thejedislayer Posted April 11, 2010 Share Posted April 11, 2010 Hello,Tonight, I had a question to ask you folks, and I really do hope someone can help me. Anyways, a friend is helping me with learning web-based languages, and he finally asked me to build him a CSS website layout through a picture he showed me.Picture of layout he asked me to build.I have been studying CSS for a few weeks now, and I have most of the basics down, but my problem lies in how to properly structure a CSS layout to look like the picture above. So, tonight, I am hoping someone can provide tutorials on how to structure websites in CSS code. I know the basics of both HTML 4 and CSS. Thank you very much for your time, tonight.Tyler Link to comment Share on other sites More sharing options...
jeffman Posted April 11, 2010 Share Posted April 11, 2010 This is almost exactly what you want, but left and right are reversed. That should not be a big problem.http://www.sophox.com/wordpress/?p=177Look at the sample page first. Then look at the code. Link to comment Share on other sites More sharing options...
thejedislayer Posted April 12, 2010 Author Share Posted April 12, 2010 Hey, Deirdre's Dad,Thanks for the update! Anyways, I looked briefly over the link you sent me, and this is exactly what I was looking for. I appreciate you spending the time to help me out today. :}Tyler Link to comment Share on other sites More sharing options...
thejedislayer Posted April 15, 2010 Author Share Posted April 15, 2010 Another question, if I may.I created a website using both HTML, XHTML, and CSS. Anyways, in Firefox, everything shows up properly as coded; however, when I go to check out the web page in Internet Explorer 8, the menu on the left breaks using tables. I cannot seem to figure out what is causing the breaking, but if someone could please put me in the right direction, I would much appreciate it.HTML code (CSS code below this) <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <link rel="stylesheet" type="text/css" href="css.css" /> <title>Welcome to RAWR!</title></head><body> <h1>Welcome to Sinclair</h1> <p> Welcome to the RAWR website! Here you will find links to clubs, events, classes, teachers, and much, much more! Please use the navigation bar to navigate to the directory you wish to explore!</p><table> <ol id="ol1"> <li>Teachers</li> <li>Courses</li> <li>Clubs</li> </ol> <ol id="ol2"> <li>RAWR</li> <li>RAWR</li> <li>RAWR</li> </ol></table><div id="footer"> Copyright 2010 Sinclair</div> </body></html> CSS code (HTML code above) body { background-color:#F5F5DC;}h1 { text-align:center; font-family:fantasy; color:#A52A2A;}p { font-family:cursive; text-indent:5px; position:absolute; left:200px; right:200px;}#ol1 { position:absolute; left:0px; background-color:#A52A2A; color:#FFFFFF;}#ol2 { position:absolute; right:0px; background-color:#A52A2A; color:#FFFFFF;}#footer { position:absolute; width:100%; bottom:0px; background-color:#A52A2A; text-align:center; color:#FFFFFF;} Link to comment Share on other sites More sharing options...
ShadowMage Posted April 15, 2010 Share Posted April 15, 2010 That table shouldn't work at all. It doesn't have any <tr> or <td> tags in it.I think you're probably going to be better of putting your lists inside of a <div> <div> <ol id="ol1"> <li>Teachers</li> <li>Courses</li> <li>Clubs</li> </ol> <ol id="ol2"> <li>RAWR</li> <li>RAWR</li> <li>RAWR</li> </ol></div> Link to comment Share on other sites More sharing options...
thejedislayer Posted April 15, 2010 Author Share Posted April 15, 2010 @ jklothThat did the trick, jkloth. Thanks again for your assistance in this matter. I simply updated the code to include the <div> tags instead of the <table> tags. Link to comment Share on other sites More sharing options...
thejedislayer Posted April 16, 2010 Author Share Posted April 16, 2010 When I position the text with the absolute affect (position:absolute;), I have an issue. The text seems to overlap itself when I use multiple <p> tags.The picture below is the undesired affect that I get, and I cannot seem to figure out how to stop it.Now, there was one solution to fixing the text issue that worked; however, it caused the menus to also be brought down as well. I used the <br /> tag to move the second <p> section away from the first. The code is exactly the same as in my above post, minus the second paragraph I added. Thanks again,Tyler**EDIT**I thought it worth showing how the <p> tags were being coded in the .html document. <p> Welcome to the Rawr website! Here you will find links to clubs, events, classes, teachers, and much, much more! Please use the navigation bar to navigate to the directory you wish to explore!</p><p> BLAH, BLAH, BLAH BLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAH</p> **EDIT**I found A solution;however, I would still like to know a work around to being able to just add new <p> tags, like the code above. Here is the new code I used. <p> Welcome to the Rawr website! Here you will find links to clubs, events, classes, teachers, and much, much more! Please use the navigation bar to navigate to the directory you wish to explore!<br /> BLAH, BLAH, BLAH BLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAH<br /> BLAH, BLAH, BLAH BLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAH<br /> BLAH, BLAH, BLAH BLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAHBLAH, BLAH, BLAH</p> Link to comment Share on other sites More sharing options...
ShadowMage Posted April 16, 2010 Share Posted April 16, 2010 I didnt really take a look at your CSS before. The reason they overlap is because they have the exact same CSS declarations. You specify that all <p> tags should be absolutely positioned at 200px from the left and right sides (which I'm not sure is gonna work right anyway). Absolute positioning removes the element from the flow of the page which is why they don't break to a new line.You should really get rid of all that absolute positioning. It has its uses but this isn't one of them. What I would do is place your two menus (the <ol>'s) in their own divs and use another div to contain the paragraph text in the center. <div id='menuLeft'> <ol id='ol1'> ... </ol><div><div id='menuRight'> <ol id='ol2'> ... </ol></div><div id='centerContent'>...</div> Give the menuLeft div a float: left; property and specify a width for it, and do the same for the menuRight div except give it float: right; instead. Don't do anything with the centerContent div. Link to comment Share on other sites More sharing options...
thejedislayer Posted April 20, 2010 Author Share Posted April 20, 2010 Hey,Thanks for replying. Anyways, I did as you had asked of me, but unfortunately the results were undesirable, as shown in the picture below. I tried following your instructions precisely, but perhaps I misunderstood a portion, so I will post the code below the picture.The reason why the results were undesirable is because the text is pushing the menus down, and also because the text themselves aren't being centered, but non-centering can be explained away because I didn't use the text-align:center; function. Point and being, I messed up on your code somewhere, and I was hoping you could point out the mistake.Thanks again,TylerCSS code body { background-color:#F5F5DC;}h1 { text-align:center; font-family:fantasy; color:#A52A2A;}#pcenter {}.p { font-family:cursive; text-indent:5px;}#menuLeft { float:left; width:110px;}#ol1 { background-color:#A52A2A; color:#FFFFFF;}#menuRight { float:right; width:110px;}#ol2 { background-color:#A52A2A; color:#FFFFFF;}#footer { position:absolute; width:100%; bottom:0px; background-color:#A52A2A; text-align:center; color:#FFFFFF;} Main document code <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <link rel="stylesheet" type="text/css" href="css.css" /> <title>Welcome to Sinclair!</title></head><body> <h1>Welcome to Sinclair</h1> <div id="pcenter"> <p> Welcome to the Sinclair website! Here you will find links to clubs, events, classes, teachers, and much, much more! Please use the navigation bar to navigate to the directory you wish to explore!<br /> MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT MOAR TEXT </p> </div><div id="menuLeft"> <ol id="ol1"> <li>Teachers</li> <li>Courses</li> <li>Clubs</li> </ol></div><div id="menuRight" <ol id="ol2"> <li>Sinclair</li> <li>Sinclair</li> <li>Sinclair</li> </ol></div><div id="footer"> Copyright 2010 Sinclair</div> </body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted April 21, 2010 Share Posted April 21, 2010 This div:<div id="pcenter">needs to come after your two menu divs in the code. Notice in my code that I provided I placed the two menu divs first and then the content div. Your 'pcenter' div is my content div.The reason is that float works on elements that come after the element that was floated. Any elements before the floated element will remain unaffected and follow the normal flow of the page. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.