...

View Full Version : Problem with aligning text with a CSS menu within a DIV



kokesh
02-15-2009, 05:12 AM
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
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.

http://img517.imageshack.us/img517/3839/picture4am7.th.png (http://img517.imageshack.us/my.php?image=picture4am7.png)



<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>

twodayslate
02-15-2009, 07:26 AM
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

kokesh
02-15-2009, 07:52 AM
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:



<!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>

Excavator
02-15-2009, 08:24 AM
Hello kokesh,
To float something you need to give it a width.
Try this -
p.title {
font-size: 138.5%;
width: 200px;
float: left;
}

Maybe that should be an h1 instead of a p tag...

kokesh
02-16-2009, 03:14 AM
Hello kokesh,
To float something you need to give it a width.
Try this -
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:

http://img242.imageshack.us/img242/4557/picture5uu3.th.png (http://img242.imageshack.us/my.php?image=picture5uu3.png)

That's essentially what happens when I do either:


p.title {
font-size: 138.5%;
float: left;
}


or this:



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!

Excavator
02-16-2009, 06:27 AM
Just this is enough to put a horizontal scrollbar on the bottom of your browser window:
#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 (http://www.w3.org/TR/CSS2/box.html).

This works for floating h1 -

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?

kokesh
02-16-2009, 07:00 AM
Just this is enough to put a horizontal scrollbar on the bottom of your browser window:
#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 (http://www.w3.org/TR/CSS2/box.html).

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.



This works for floating h1 -

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


.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;
}

Excavator
02-16-2009, 07:27 AM
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.

kokesh
02-20-2009, 05:12 AM
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! :o

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.

Excavator
02-20-2009, 11:44 AM
See if this behaves a little more the way you want:
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?verbose=1&uri=http%3A%2F%2Fcapnofasinknship.googlepages.com%2Ffloating.html


..

kokesh
02-21-2009, 01:07 AM
See if this behaves a little more the way you want


That's perfect! Thank you so much! I really appreciate it.



http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcapnofasinknship.googlepages.com%2Ffloating.html
..

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. :D

Excavator
02-21-2009, 03:18 AM
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. :D


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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum