novicenate Posted February 25, 2007 Share Posted February 25, 2007 I want the main section of my pages to be centered on the page, and I have that. But within, I want to be able to position the elements (such as a menu, actual content, etc.) so they will position within the main section. I'm having a hard time getting this done. Here is the code I have to this point... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Welcome </title><style>body{background-color:#dccfbf; margin-top:0px; text-align:center}#header{width:750px; border-left:1px solid black; border-right:1px solid black;border-bottom:1px solid black; padding:0}#content{width:750px; border-left:1px solid black; border-right:1px solid black; border-bottom:1px solid black; text-align:left; background-color: white;}#menu{width:175px; background-color:#A3CFFC; border:1px solid navy; position:relative; top:10px; left:10px}#menu ul{list-style-type:none; margin:0; padding:5px}</style></head><body><div id="header"><img src="../images/header.jpg"></div><div id="content"> <div id="maincontent">Welcome!</div> <div id="menu"> <ul> <li>About Us</li> <li>Directions</li> <li>Upcoming Events</li> </ul> </div></div></body></html> I want the menu to be at the upper left of the white area with another column of text (main content) to be at the same vertical position, but obviously to the right of the menu section. Any ideas??? I'm sure I have some errors, so feel free to tear up my code. Thanks Link to comment Share on other sites More sharing options...
jlhaslip Posted February 25, 2007 Share Posted February 25, 2007 I used a wrapper div to set the width and to centre the page, 'floated the left nav div, and stuff.Have a look to see if that'll do for now. I didn't test the image. I inserted a couple of 's to show some size for the image, but try this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Welcome </title><style>body{ background-color:#dccfbf; margin:0 auto; text-align:center; width:750px; }#header{ border-left:1px solid black; border-right:1px solid black; border-bottom:1px solid black; padding:0; margin:0 auto; padding: 0; text-align:center } img { display:block; }#content{ border-left:1px solid black; border-right:1px solid black; border-bottom:1px solid black; text-align:left; background-color: white; margin:0 auto; /* top/bottom left/right */ padding: 0; /* all 4 */ text-align:center }#maincontent { margin: 0 0 0 180px; /* top right bottom left */ border: 1px solid #000000; }#menu{ width:175px; background-color:#A3CFFC; border:1px solid navy; float:left; }#menu ul{ list-style-type:none; margin:0; padding:5px; }</style></head><body><div id="wrap" ><div id="header"> <img src="../images/header.jpg"> </div><div id="content"><div id="menu"><ul><li>About Us</li><li>Directions</li><li>Upcoming Events</li></ul></div><div id="maincontent"> <h2>Welcome!</h2> <p> Content here.</p> <p> Content here.</p> <p> Content here.</p> <p> Content here.</p> <p> Content here.</p> <p> Content here.</p> <p> Content here.</p> <p> Content here.</p> <p> Content here.</p> <p> Content here.</p> <p> Content here.</p> <p> Content here.</p> <p> Content here.</p> <p> Content here.</p> </div></div></div></body></html> Link to comment Share on other sites More sharing options...
novicenate Posted February 26, 2007 Author Share Posted February 26, 2007 thank you very much, this helps!! 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