1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Right align a menu and change from 3 col to 2 col layout

Discussion in 'CSS' started by le007, Oct 8, 2007.

0
Page 2 of 2
  1. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #21
    Hey all, havent been here in a few days! 20 replies! Ok... :D)

    Back to the original question:

    I tried using the float method - it kind of worked. The problem is, I don't get why header doesnt have a yellow background from left to right? Also the a href span is quite different in IE6 if anyone can help? (see link and code)
    Thanks,
    Leo

    http://homepage.eircom.net/~egoman/info2.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
/* global */
html{height: 100%;}

body
{ font-family: arial, sans-serif;
  padding: 0px;
  margin: 0px;
  font-size: .78em;
}


#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 700px;
	background: red;
}

#header {
	margin: 0 0 15px 0;
	background: yellow;
}

#headleft {
	background: green;
	float: left;
	width: 150px;
}

#headright {
	background: green;	
	float: right;
}


#left {
	clear: both;
	float: left;
	width: 150px;
}

#content { 
	float: left;
	width: 56%;
}

#right {
	float: right;
	width: 150px;
}


#footer {
	clear: both;
	background: #A2A2A2;
}



#nav ul {
	white-space: nowrap;
	font-family: arial;
	font-size:12px;
	list-style:none;
}
	#nav li {
	float: left;
	margin-right: 2px;
}
	#nav a, #nav .active {
	padding: 0 11px;
	height: 2em;
	float:left;
	line-height: 2em;
	margin: 0 0 4px;
	background-color: #000000;
	color: white;
	text-decoration: none;
	width: 20px;
}
	#nav a:hover {
	color: #fff;
	background-color: #369;
	margin: 2px 0 0 0;
}
	#nav .active {
	background: #369;
	margin: 0 2px 0 0;
}


 a span {
        display: none;
 }
  a:hover span {
        display: block;
        position: relative; top: 0px; left: 0;
        /* formatting only styles */
        width: 100px;
        padding: 5px; margin: 0px; z-index: 100;
        background: green; border: 1px dotted #c0c0c0;
        color: white;
        opacity: 0.9;
/* end formatting */

 }





</style>
</head>

<body>


<div id="wrapper">
	<div id="header">
		<div id="headleft">
		HEADER
		</div>
		<div id="headright">
	     <div id="nav">
	        <ul>
	            <li><a href="test" >HOME<span>You are home</span></a></li>
        	    <li><a href="test" >test</a></li>
	            <li><a href="test" >test</a></li>
	            <li><a href="test" >test</a></li>
	            <li><a href="test">test</a></li>
	            <li><a href="test">test</a></li>
	            <li><a href="test">test</a></li>
	        </ul>
	    </div>
		</div>

	</div>
	<div id="container">
		<div id="left">
			LEFT
		</div>
		
		<div id="content">
			CONTENT
		</div>
		
		<div id="right">
			RIGHT
		</div>
	</div>
	<div id="footer">
		FOOTER
	</div>
</div>
    Code (markup):
     
    le007, Oct 10, 2007 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #22
    Leo,
    
<style>
/* global */
*html{height: 100%;} /*star before the html as html doesn't really exist; only IE thinks it does*/

* {
  margin: 0;
  padding: 0;
}

body { 
  font-family: arial, sans-serif;
  font-size: .78em;
}


#wrapper {
	text-align: left;
	margin: 0px auto;
	width: 700px;
	background: red;
}

#header {
	background: #fff000;
        width: 700px;
        height: 80px;
}

#headleft {
	background: #0cd754;
	float: left;
	width: 150px;
}

#headright {
        width: 400px;
	background: #0cd754;	
	float: right;
}


#left {
	clear: both;
	float: left;
	width: 150px;
        height: 50px;
}

#right {
	float: right;
	width: 150px;
        height: 50px;
}

#content { 
    /*try not floating this*/
    position: relative;
    background-color: #d70c0c;
    color: #fff;
    text-align: center;
    margin: 0 155px;
    height: 50px;
}


#footer {
	clear: both;
	background: #A2A2A2;
        color: #fff;
        text-align: center;
}

...etc
    Code (markup):
    I didn't look at the span, but I do something completely different with my drops.

    Why the header was red and not yellow:
    The red content was riding up, or so it seemed while I was playing with it. GIving the header a height prevented that.

    I also unfloated the content and instead gave it side margins equal to a bit more than the left and right floats.

    I think there needs to be a star before "html".
     
    Stomme poes, Oct 10, 2007 IP
  3. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #23
    Hey poes how are you buddy?

    I tested your code. Header is working nicely now, thanks. The left, content and right though... not sure why I cudnt leave that as I had it? Floated left left and right respectively? Im not sure of the contents height so it'd be one of the reasons I'd like to leave it as I had it - also the right columns text is now at the bottom of content? I've thrown it up live for your viewing :D)

    font-family: arial, sans-serif; - arial is the principle font and sans serif is...?

    I still havent got a fix for the span prob... if anyone does I'd really appreciate it!

    Thanks Poes - true gent!
    Leohttp://homepage.eircom.net/~egoman/info3.html
     
    le007, Oct 10, 2007 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #24
    Eh, you could've left the content also floating, I just changed it so there was something more solid there. You could leave the floats. The reason right and left meet the footer is I also gave them heights the same as content.

    You don't need to float the content when you don't know how big it will be. Normally, if you don't set a height (or, for IE6, set it to 1%), it will just grow to fit whatever you stick in there (except more floats). So, as it is now, you could fill the content with a bunch of text, and if you remove the height in CSS, the content box will be as big or small as the amount of text inside.

    Arial is a sans-serif font (no little dingies hanging off the letters like in Times New Roman). But, for instance, my machine has very few fonts installed. I don't have Arial (though it is a very common font and considered "safe"). So, when you want a font, you first type the one you want, then a backup, and then serif or sans-serif. The browser will go through the list in order.

    font: normal 12px/14px Verdana, Arial, sans-serif;
    My browser will first check if I have Verdana (a sans-serif font). If not, then it will check for Arial. If not that, then it will at least still give me a font without thingies hanging on the letters-- otherwise, my particular browser's default is serif. So, it's very good idea to add "serif" or "sans-serif" at the end of your font declarations, so that at the very least, everyone will see the same type of font.

    Ah, sorry about the right, I had re-arranged the html too (listed floats before content) here that is:
    
<div id="wrapper">
	<div id="header">
		<div id="headleft">
		HEADER
		</div>

		<div id="headright">
	     <div id="nav">
	        <ul>
	            <li><a href="test" >HOME<span>You are home</span></a></li>
        	    <li><a href="test" >test</a></li>
	            <li><a href="test" >test</a></li>
	            <li><a href="test" >test</a></li>

	            <li><a href="test">test</a></li>
	            <li><a href="test">test</a></li>
	            <li><a href="test">test</a></li>
	        </ul>
	    </div>
		</div>

	</div>

	<div id="container">
		<div id="left">
			LEFT
		</div>
		
		<div id="right">
			RIGHT
		</div>
         <div id="content">
			CONTENT
		</div>

	</div>
	<div id="footer">
		FOOTER
	</div>
</div>
    Code (markup):
     
    Stomme poes, Oct 10, 2007 IP
  5. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #25
    Poes are the man dawg!

    http://homepage.eircom.net/~egoman/info3.html

    thanks for explaining the font - 14px/16px??

    So in other words - at the moment I don't know the size of my content div. I'm hoping to have dynamically created results which could be 1 - 100 so I need it to extent accordingly. Should I leave it as you have it set or float or what?

    You see thats where I'm a bit confused:
    margin: 0 155px; not sure how it works with IE6 as in thats 155 from them right? Its relatively positioned to the container is that right?

    Whats my best play for height if I'm not sure of it as the content other than the index (home) page will be mostly dynamically created. Should I set min-height?

    Ok that layout is fine, very nice thank you - but say a link on the website I might only need content and right div, basically changing from 3 col display to a 2 col display - how would I go about that plz?
     
    le007, Oct 10, 2007 IP
Page 2 of 2