Jump to content

How To Structure (layout) in CSS


thejedislayer
 Share

Recommended Posts

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.23839427840989814796549.th.jpgI 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

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

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

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.2qvupaa.pngNow, 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. 2yvnimp.pngHere 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>

Edited by TheJediSlayer
Link to comment
Share on other sites

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

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,Tyler551561561561.pngCSS 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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...