mrkidd85 Posted March 17, 2006 Share Posted March 17, 2006 im having a nightmare trying to divide my page. firstly, I used<div id=layer1 style="position:absolute; top:20; left:00; width:25%; height:80%; padding:5px; border: #000000 2px dotted; background-color:#ffffff;></DIV> for the first part of my page, then when I completed that I did this<div id=layer1 style="position:absolute; top:20; left:30%; width:50%; height:80%; padding:5px; border: #000000 2px dotted; background-color:#ffffff;>, but all it does is underlaps the other one. does anyone know what I'm doing wrong?? Link to comment Share on other sites More sharing options...
vchris Posted March 17, 2006 Share Posted March 17, 2006 Try doing this without using percentage for your values. Link to comment Share on other sites More sharing options...
aspnetguy Posted March 17, 2006 Share Posted March 17, 2006 firstly you cannot give both divs the same id...id is unique.You are using absolute positioning which acts as layers. You set the top and left to very similar of the first div so of course they will overlap.Avoid using absolute postioing unless completely necesaary. Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 17, 2006 Author Share Posted March 17, 2006 i just did, still no luck though Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 17, 2006 Author Share Posted March 17, 2006 well im not really that good at HTML, I'm just a beginner really, could you tell me of a better way to do it because i copied and pasted this code off a beginner's website. Link to comment Share on other sites More sharing options...
aspnetguy Posted March 17, 2006 Share Posted March 17, 2006 well im not really that good at HTML, I'm just a beginner really, could you tell me of a better way to do it because i copied and pasted this code off a beginner's website.<{POST_SNAPBACK}> You will have to tell me what you are trying to do with those divs. Do you want them side by side or one on top of the other? Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 17, 2006 Author Share Posted March 17, 2006 i want them side by side, I have my links/contents on the left of the page, then I want to begin the home page in the middle, no overlapping, but its driving me insane Link to comment Share on other sites More sharing options...
aspnetguy Posted March 17, 2006 Share Posted March 17, 2006 try something like this <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <title>Your Title Here</title> <style type="text/css"> #wrapper { width: 780px; margin: auto; /*centers site...remove if you do not want it centered*/ } .paneLeft { width: 150px; float: left; } .paneRight { width: 630px float: left; } .clearer { clear: left; /*needed for FireFox so both columns will stay in the wrapper*/ } </style></head><body> <div id="wrapper"> <div class="paneLeft"> ...place menu here... </div> <div class="paneRight"> ...place content here... </div> <br class="clearer"/> </div></body></html> Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 17, 2006 Author Share Posted March 17, 2006 ok thanks but could you explain it a little because what if I want to add more div's? and the links are too close together to the content how can i separate it a little Link to comment Share on other sites More sharing options...
aspnetguy Posted March 17, 2006 Share Posted March 17, 2006 the code I gave you is using XHTML and CSS.CSS is intended to handle all presentation aspects of a layout.If you wanted to add padding to the divs you would use padding: ##px;You would need to subtract the padding from the width as well adding padding: 5px means you need to subtract 10px from the width of the div...why because you are adding 5px to the left and right of the div (10px) so now the total width (div left and div right is 10px greater thant he wrapper width (780px).Any divs you add in either paneLeft or paneRight will be contained in those columns.If you wanted to add another column you would need to give it a width adn use float:left (this keeps the divs on hte same line).Remember the total width,padding, and margin, of all floated divs (columns) must add up to the wrapper width (keep wrapper padding and margins in mind as well)I would recommend reading the CSS tutorials to better understand this.www.w3schools.com Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 17, 2006 Author Share Posted March 17, 2006 I don't understant what you just said and I tried to put padding in but it didn't work. how in HTML terms to I add another column. One to go on the left (the contents), one to go to the right (pictures) and one (text)to go in the middle?is there a more simpler way to do it? Link to comment Share on other sites More sharing options...
lugos Posted March 17, 2006 Share Posted March 17, 2006 I don't understant what you just said and I tried to put padding in but it didn't work. how in HTML terms to I add another column. One to go on the left (the contents), one to go to the right (pictures) and one (text)to go in the middle?is there a more simpler way to do it?<{POST_SNAPBACK}> Here is aspnetguy's code slightly modified to get the left, center, and right divs that you are looking for. You can change the width, add background color, add padding, add margins, etc. in the styles. If you're not too sure how to do it, the tutorials at w3schools.com are good for learning (google is also an excellent resource). Also, play around with margins and padding to get the look you desire.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Your Title Here</title><style type="text/css">#wrapper{width: 780px;margin: auto; /*centers site...remove if you do not want it centered*/}.paneLeft{width: 140px;float: left;}.paneCenter{width: 500px;float: left;}.paneRight{width: 140px;float: left;}.clearer{clear: left; /*needed for FireFox so both columns will stay in the wrapper*/}</style></head><body><div id="wrapper"><div class="paneLeft">...place menu here...</div><div class="paneCenter">...place content here...</div><div class="paneRight">...place pictures here...</div><br class="clearer"/></div></body></html> aspnetguy has got mad skillz! That layout code is simple yet bangin!lugos Link to comment Share on other sites More sharing options...
snowboard01 Posted March 18, 2006 Share Posted March 18, 2006 try this <html><head><title></title><style text/css>span{what span should do}</style> 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