chippy Posted May 28, 2006 Share Posted May 28, 2006 Hi. I'm currently working on making my future portfolio kind of thing. The thing is, I've made the base on how it probably will look but the content area is currently placed out using the position: absolute; value. I know this is possible but I don't know how, but how can I make the site with the same result without the use of position: absolute; value?IndexCSS Link to comment Share on other sites More sharing options...
Err Posted May 28, 2006 Share Posted May 28, 2006 All you needed were some floats. I added afloat: left to the #leftcontent and #rightcontent css. It works with out the absolute positionings I also added some margins to the top and left side of the #rightcontent to space it out, and it looks okay.I gotta say though, nice site! I really like the style.One question though... what's the html, body { background-color: #929292; background-image: url(images/main_bg.jpg); color: #000000; font: normal 12px "Trebuchet MS", Verdana, sans-serif; height: 100%; margin: 0; padding: 0;}#leftcontent { background-color: #464646; background-image: url(images/left_bg.jpg); border-right: 1px solid #FFCC00; height: 100%; margin: 0; padding: 0; width: 200px; float: left;}#logo { background-image: url(images/logo.jpg); height: 200px; margin: 0; padding: 0; width: 200px;}#rightcontent { background-color: #2c2c2c; border: 1px solid #FFCC00; float: left; margin-left: 14px; margin-top: 20px;/* left: 220px; position: absolute; top: 20px;*/ width: 500px;}p { background-color: #2c2c2c; color: #CCCCCC; padding: 0 10px;}ul#navlist { background: #333333; border-bottom: 1px solid #000000; font: normal 10px Arial,Verdana, sans-serif; padding: 0px; margin: 0; width: 198px; \width: 200px; w\idth: 198px;}ul#navlist li { border-top: 1px solid #000000; list-style: none; margin: 0px;}ul#navlist li a { background: #333333; border: 0px; border-right: 20px solid #333333; display: block; padding: 4px 8px 4px 8px; text-align: left; text-decoration: none; width: 164px; \width: 200px; w\idth: 164px;}ul#navlist li a:link { color: #CCCCCC; }div#navcontainer li a:visited { color: #CCCCCC; }ul#navlist li a:hover { background: #333333; border-color: #FFCC00; color: #ffffff; text-indent: 10px;} Link to comment Share on other sites More sharing options...
chippy Posted May 28, 2006 Author Share Posted May 28, 2006 One question though... what's thewidth: 164px;\width: 200px;w\idth: 164px; all about? I've never seen that. Is that some kind of CSS hack or what? O_o? Actually, that menu is from Listmatic, and that is some sort of IE hack for that menu. Personally I have no idea how that works, but if it looks good, and it validates, I don't really care. :)And thank you for thinking the design is nice. Link to comment Share on other sites More sharing options...
Err Posted May 28, 2006 Share Posted May 28, 2006 Actually, that menu is from Listmatic, and that is some sort of IE hack for that menu. Personally I have no idea how that works, but if it looks good, and it validates, I don't really care. :)And thank you for thinking the design is nice.<{POST_SNAPBACK}> Oh I see.Did the code I give ya work the way you wanted it too? Link to comment Share on other sites More sharing options...
chippy Posted May 28, 2006 Author Share Posted May 28, 2006 Oh I see.Did the code I give ya work the way you wanted it too?<{POST_SNAPBACK}> It did indeed. Thanks for the help. I tried the float property but I guess I did something wrong when I did it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now