Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Div tags

  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div tags

    Website: http://gmu.awardspace.com/

    On that site, I have the div tag 'navbar'. What I want it to do is make the page look something like this.



    But, as you can see, it doesn't seem to do anything. Any help at all would be appreciated. Thankyou.

  • #2
    New Coder
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    0
    Thanked 2 Times in 2 Posts
    try this

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <style type="text/css">
    	body { text-align:center; }
    
    	#top { width:800px; height:100px; background:#ccc; border:1px solid #000; margin:0 auto;}
    
    	#bottom { height:30px; width:700px; border:1px solid #000; border-width:0 1px 1px; background:#ccc; margin:0 auto; }
    
      </style>
     </HEAD>
     <BODY>
    	<div id="top"></div>
    	<div id="bottom"></div>  
     </BODY>
    </HTML>

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem with that is that if you have those inside of another div tag, it messes up the formatting.

  • #4
    New Coder
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    0
    Thanked 2 Times in 2 Posts
    as long as the div u put them in is larger then they are u shouldnt have a problem...

  • #5
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah. It turns out my original code works fine. It was just a stupid mistake by me. Thanks.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Quote Originally Posted by dudeson View Post
    try this

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <style type="text/css">
    	body { text-align:center; }
    
    	#top { width:800px; height:100px; background:#ccc; border:1px solid #000; margin:0 auto;}
    
    	#bottom { height:30px; width:700px; border:1px solid #000; border-width:0 1px 1px; background:#ccc; margin:0 auto; }
    
      </style>
     </HEAD>
     <BODY>
    	<div id="top"></div>
    	<div id="bottom"></div>  
     </BODY>
    </HTML>
    This, my friend, might be valid code but it’s poorly written. The doctype is incomplete and will cause IE to switch to quirks mode which might have some serious rendering issues as result (different visual output). A correct doctype includes the source URL:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    (And note that (X)HTML strict should be the only doctype you ever use. Transitional is for whiners and those that are too lazy to write proper code (and actually to transition from old, non-standard code to new standards compliant code, not to code new sites with it).)

    Secondly it’s always good practice to write everything lower case. Not regular text of course but the HTML and CSS. Avid upper case for future compatibility (potential switch from HTML to XHTML where everything must be lower case anyway) and don’t mix it at all!

  • #7
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Rather than making a new topic, I figured I just post here, again.

    I have this code: http://rafb.net/p/H6E5I255.html

    I want the bottom bordered div to touch the picture div. Any idea why it's not?

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    #logo img {
    					border-bottom:1px solid #000;
    					border-right:1px solid #000;
    					display:block;
    				}
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •