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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with aligning text with a CSS menu within a DIV

    hi,
    just so you know I am VERY new at CSS. A few years ago I knew HTML fairly well but that was when tables-based design wasn't all that bad of a thing to do (I think).

    Anyway, right now I'm in the basic layout stage of my site design. I'm using a fluid two column layout with header and footer.

    So far my main problem is that I am putting the site title and the navigation menu within the header div. The site title should be on the left side of the div and the navigation menu should be directly to the right of the title. The title is simply text.

    Right now I can't get the title text to be on the same line as the nav menu. It either goes above it or below it and that messes up the rest of the divs in the layout. I shouldn't have to divide the header into leftheader and rightheader divs, correct? I also tried a div within a div; I made a sitetitle div within the header div and set it to
    Code:
    float: left
    . but it didn't work.

    I'll attach a screenshot and the code of what I currently have. I apologize that this is probably a very simple fix; like I said I'm new at this . I went through several CSS positioning tutorials online and still haven't solved this so I'm askin' for help! Thanks a lot.



    Code:
    <style type="text/css">
    
    body {
      margin: 0px;
      padding: 0px;
    }
    #header {
      padding-left: 5px;
      background: #dbdbdb;
      clear: both;
      width: 100%;
      margin-bottom: 5px;
    }
    #content {
      background: #dbdbdb;
      float: left;
      width: 80%;
      height: 60%;
      margin-bottom: 5px;
    }
    #sidebar {
      background: #dbdbdb;
      float: right;
      width: 19%;
      height: 60%;
      margin-bottom: 5px;
    }
    #footer {
      background: #dbdbdb;
      clear: both;
      width: 100%;
    }
    
    p {
      font-family: Times New Roman, Arial, Verdana;
    }
    
    p.title {
      font-size: 138.5%;
    }
    
    </style>
    then in the HTML it goes, basically, <div id="header">site title text <div id="navmenu"></div></div>
    Last edited by kokesh; 02-15-2009 at 05:07 AM. Reason: title was misleading

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    For a menu use an unordered list. Can we have more code, or a link? The screenshot looks fine.

    Menus: http://cssplay.co.uk
    General layouts:http://bonrouge.com/3c-hf-fluid-lc.php
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah i'm using an unordered list.

    here is the code for the page in the screenshot. The problem is that where it says "Header (menu)", the actual menu needs to be directly to the right of this text. In other words, it should look like:

    Header (menu) Overview Demographics etc.

    right now the menu is on a different line from the title text in the header div. It needs to be on the same line.

    Here's the code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <html>
    
    	<head>
    		<title>Floating Layout Practice</title>
    <script type="text/javascript" src="ddtabmenu.js">
    /***********************************************
    * DD Tab Menu script- � Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    </script>
    <script type="text/javascript">
    //SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
    ddtabmenu.definemenu("ddtabs1", 0) //initialize Tab Menu #1 with 1st tab selected
    
    </script>
    <link rel="stylesheet" type="text/css" href="floating.css">
    <link rel="stylesheet" type="text/css" href="ddtabmenu.css" />
    	</head>
    	<body>
    <div id="header">
    <p class="title">Header (menu)</p>
    <!-- NAVIGATION MENU START -->
    <!-- NAVIGATION MENU LINK NAMES START -->
    <div id="ddtabs1" class="basictab">
    <ul>
    <li><a href="http://www.dynamicdrive.com" rel="sc1">Overview</a></li>
    <li><a href="http://www.dynamicdrive.com/new.htm" rel="sc2">Demographics</a></li>
    <li><a href="http://www.dynamicdrive.com/style/" rel="sc3">Prospective Businesses</a></li>
    <li><a href="http://www.dynamicdrive.com/forums/" rel="sc4">Current Businesses</a></li>
    <li><a href="http://tools.dynamicdrive.com/imageoptimizer/" rel="sc5">Contact Us</a></li>
    </ul>
    </div>
    <!-- NAVIGATION MENU LINK NAMES END -->
    <!-- NAVIGATION MENU SUBMENU TEXT START -->
    <DIV class="tabcontainer">
    
    <div id="sc1" class="tabcontent">submenu text
    </div>
    
    <div id="sc2" class="tabcontent">submenu text
    </div>
    
    <div id="sc3" class="tabcontent">
    See the new scripts recently added to Dynamic Drive. <a href="http://www.dynamicdrive.com/new.htm">Click here</a>.
    </div>
    
    <div id="sc4" class="tabcontent">
    Original, practical <a href="http://www.dynamicdrive.com/style/">CSS codes and examples</a> such as CSS menus for your site.
    </div>
    
    <div id="sc5" class="tabcontent">hi
    </div>
    <!-- NAVIGATION MENU SUBMENU TEXT END -->
    </DIV>
    <!-- NAVIGATION MENU END -->
    <hr>
    </div>
    
    <div id="content">
    Content area
    </div>
    <div id="sidebar">
    Sidebar
    </div>
    <div id="footer">
    Footer
    </div>
    	</body>
    </html>

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello kokesh,
    To float something you need to give it a width.
    Try this -
    Code:
    p.title {
      font-size: 138.5%;
    width: 200px;
    float: left;
    }
    Maybe that should be an h1 instead of a p tag...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello kokesh,
    To float something you need to give it a width.
    Try this -
    Code:
    p.title {
      font-size: 138.5%;
    width: 200px;
    float: left;
    }
    Maybe that should be an h1 instead of a p tag...
    The problem with the float tag is that it isn't allowing the menu to start on the right side of the p.title div. Instead, only the tabs are starting on the right side. The menu tries to extend its border (the solid gray 1px line) all the way to the left side of the header div. I'll show you what I mean:



    That's essentially what happens when I do either:
    Code:
    p.title {
      font-size: 138.5%;
      float: left;
    }
    or this:

    Code:
    p.title {
      font-size: 138.5%;
      width: 200px;
      float: left;
    }
    Also notice how my <hr> got pushed off to the side. It should be centered on the screen (you can see the scroll bar on the bottom of the screenshot. That shouldn't be there)

    What I want is for the menu to look like it does in the screenshot in my original post (that is, how there is no border on the left side of the tabs) except scooted over to the right side of the "Header (menu)" text.

    (As a side note, the float tag didn't work at all when I changed it to h1 instead of p.title. It stuck the menu under the text as if there was no float at all.)

    Thanks for your continued suggestions!

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Just this is enough to put a horizontal scrollbar on the bottom of your browser window:
    Code:
    #header {
      padding-left: 5px;
      background: #dbdbdb;
      clear: both;
      width: 100%;
      margin-bottom: 5px;
    }
    With that code your telling #header to be the width of the browser window - width:100% - plus 5px. Have a look at the box model.

    This works for floating h1 -
    Code:
    h1#title {
    	width: 200px;
    	float: left;
    	font-size: 138.5%;
    	color: #f00;
    }
    
    </style>
    	</head>
    	<body>
    <div id="header">
    <h1 id="title">Header (menu)</h1>
    Can't work on your menu with the code you've provided. You're not providing all the information.
    Can you just link the test site?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Just this is enough to put a horizontal scrollbar on the bottom of your browser window:
    Code:
    #header {
      padding-left: 5px;
      background: #dbdbdb;
      clear: both;
      width: 100%;
      margin-bottom: 5px;
    }
    With that code your telling #header to be the width of the browser window - width:100% - plus 5px. Have a look at the box model.
    Wouldn't that be true if I had a margin of 5px, not a padding of 5px? Effectively aren't I telling the header to be 100% minus 5px? Because I didn't have the scrollbar before I changed it to a float.

    Quote Originally Posted by Excavator View Post
    This works for floating h1 -
    Code:
    h1#title {
    	width: 200px;
    	float: left;
    	font-size: 138.5%;
    	color: #f00;
    }
    
    </style>
    	</head>
    	<body>
    <div id="header">
    <h1 id="title">Header (menu)</h1>
    Can't work on your menu with the code you've provided. You're not providing all the information.
    Can you just link the test site?
    Hah, I was kind of afraid of that. I'll work on giving you a link to a test site. Right now I'm just working on a local copy (I don't have a host right now.) I guess I'll have to find a free host or use googlepages or something.

    If it helps I'll post the css for the menu that I'm using (which I got from DynamicDrive) Here is the CSS for the menu; in the meantime I'll work on getting a test site on the web so I can show you a link.

    CSS for nav menu
    Code:
    .basictab ul{
    margin: 4px;
    padding: 3px 0;
    margin-left: 0;
    font: bold 12px Verdana;
    border-bottom: 1px solid gray;
    list-style-type: none;
    text-align: left; /*set to left, center, or right to align the menu as desired*/
    }
    
    .basictab li{
    display: inline;
    margin: 0;
    }
    
    .basictab li a{
    text-decoration: none;
    padding: 3px 7px;
    margin-right: 3px;
    border: 1px solid gray;
    border-bottom: none;
    background-color: #ededed;
    color: #2d2b2b;
    }
    
    .basictab li a:visited{
    color: #2d2b2b;
    }
    
    .basictab li a:hover, .basictab li a.current{
    background-color: #004080;
    color: white;
    }
    
    .basictab li a:active{
    color: white;
    }
    
    .tabcontainer{
    clear: none;
    width:95%; /*width of 2nd level sub menus*/
    height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
    }
    
    .tabcontent{
    display:none;
    font-family:Arial, Verdana;
    }

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Wouldn't that be true if I had a margin of 5px, not a padding of 5px? Effectively aren't I telling the header to be 100% minus 5px? Because I didn't have the scrollbar before I changed it to a float.
    Did you look at the box model? I gave you a link in that last post.
    You should look at it. You need to understand how it works.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Did you look at the box model? I gave you a link in that last post.
    You should look at it. You need to understand how it works.
    Sorry, I did indeed look at it but until now did not understand that the padding was added to the total box width. For whatever reason I thought that it was "built in" so to speak. At any rate, I have been playing around with my header box, trying to resolve the <hr> issue..I thought that I could remove the width property from the header box since it will be 100% anyway..that didn't work, to say the least. Even with removing the padding property, my horizontal rule is still shoved over to the side just like the menu. This is due to the float on the Header text, I believe. I want the horizontal rule to be centered and have a width of 100%.

    At any rate, I have been unable to work on this for several days and consequently I am a little confused and have lost track of what I was doing. I apologize if I am writing in a way that is hard to understand!

    In the meantime, I have uploaded my files to my googlepages account and you can view them all at http://capnofasinknship.googlepages.com/testsite.html

    The html file on there is the same as in my earlier screenshots (that is, the padding is still a problem). I assume the padding is an easy fix, I'm just not seeing it right now. I'm mainly concerned about the "Header (menu)" text being in the wrong spot. Again, I want it directly to the left (not above or below) the navigation menu. The test site menu that I linked to has a screenshot of a photoshop mockup of what this part of the layout should look like.

    Thanks again for your time.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    See if this behaves a little more the way you want:
    Code:
    html, body {
    width: 100%;
    height: 100%;
    font: 14px Times New Roman, Arial, Verdana;
    background: #fc6;
    }
    * {
      margin: 0px;
      padding: 0px;
    }
    #header {
      background: #dbdbdb;
      width: 100%;
      margin-bottom: 5px;
    }
    #content {
      background: #dbdbdb;
      float: left;
      width: 80%;
      height: 60%;
      margin-bottom: 5px;
    }
    #sidebar {
      background: #dbdbdb;
      float: right;
      width: 19%;
      height: 60%;
      margin-bottom: 5px;
    }
    #footer {
      background: #dbdbdb;
      clear: both;
      width: 100%;
    }
    #contentbox {
      background: white;
      border: 1px solid gray;
      margin: 10px;
      padding; 3 px 0;
    }
    p.title {
      float: left;
      width: 200px;
    margin: 0 0 0 5px;
      font-size: 138.5%;
    }
    
    p.pagename {
      font-size: 110%;
      color: green;
      font: Georgia, serif;
    }
    hr {
      border: 0;
      width: 100%;
      color: #f00;
      background-color: #f00;
      height: 5px;
    }
    http://validator.w3.org/check?verbos...Ffloating.html


    ..
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    See if this behaves a little more the way you want
    That's perfect! Thank you so much! I really appreciate it.

    Quote Originally Posted by Excavator View Post
    Eh...yeah...I ran it through the validator last week and noticed those errors. I have since remedied the three problems and fixed my Doctype/encoding code. The code is now valid but in order to fix it I removed the </head> tag completely. Is this ok? Is it an implicitly closing element? That was the only thing I could think of to fix the error that said that I couldn't close the head element because it wasn't open. (? even though it was open). The other error said that I was using <body> in the wrong place.

    When I removed the </head> tag, both of those errors were resolved and the page still functions. Am I correct to assume that that was the best course of action? Thanks for bringing the errors to my attention and for all your help, Excavator.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by kokesh View Post
    The code is now valid but in order to fix it I removed the </head> tag completely. Is this ok? Is it an implicitly closing element? That was the only thing I could think of to fix the error that said that I couldn't close the head element because it wasn't open. (? even though it was open). The other error said that I was using <body> in the wrong place.

    When I removed the </head> tag, both of those errors were resolved and the page still functions. Am I correct to assume that that was the best course of action? Thanks for bringing the errors to my attention and for all your help, Excavator.

    I think your comment (<-- .... -->) is not being recognized inside the head of your document. When you put </head> inside your comment, that's closing the head and counts as your one closing tag.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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