Jump to content

position: absolute


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites
One question though... what's the
width: 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 post
Share on other sites
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.

Oh I see.Did the code I give ya work the way you wanted it too?
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...