Basic XHTML and CSS help please....

School project gone annoying.

Page 1 of 1

5 Replies - 1008 Views - Last Post: 22 December 2009 - 05:08 AM

#1 ShaneK  Icon User is offline

  • require_once("brain.php"); //Fatal error :/
  • member icon

Reputation: 240
  • View blog
  • Posts: 1,224
  • Joined: 10-May 09

Basic XHTML and CSS help please....

Post icon  Posted 01 December 2009 - 10:05 AM

So for my school project I'm working on this site for my city that's going to have a ton of PHP and database interaction, but first I need to get the layout done. That's the problem, I'm not too fond of XHTML or CSS.

Here's what I've got:
http://shanessite.ne...%20Weatherford/

What's wrong?
Well, the left and right borders are supposed to sroll 100% of the height of the site, and as you can tell from that example the left border does not.

Also, the main content is supposed to be up to the right of the menu, but for some reason it's very very far down on the page.

Any help would be appreciated, here's the source of the HTML and CSS (not like you really need them to be posted here, but yeah...)

Style.css
BODY, TD {
	padding: 0px;
	margin: 0px;
}

A {
	font-weight: bold;
	color: black;
}

A:Hover {
	color: grey;
}

#sideLeft {
	float: left;
	padding-bottom: 100%;
	width: 10px;
	background-image: url(images/side.jpg);
	background-repeat: repeat-y;
}

#sideRight {
	float: right;
	padding-top: 100%;
	width: 10px;
	background-image: url(images/side.jpg);
	background-repeat: repeat-y;
}

#menu {
	width: 200px;
	height: 100%;
	margin-bottom: 100%;
	float: left;
}

#menu li {
	font-weight: 500;
	margin-bottom: 5px;
	list-style-type: none;
	width: 200px;
}

#menu li li {
	margin-left: -20px;
	margin-bottom: 2px;
	list-style-type: none;
	width: 200px;
}

#mainContent{
	float: left;
	width: 42%;
	margin-left: 50px;
	margin-right: 10%;
}

img {
	border-style: none;
}


index.html
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!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>
	<title>The City of Weatherford</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="sideLeft">
</div>

<div id="sideRight">
</div>

<div id="menu">
<a href="http://cityofweatherford.com"><img src="images/Logo.png" alt="logo" /></a>
<ol>
<li>
About
<ol>
<li><a href="http://cityofweatherford.com/weatherford_history.php">History of Weatherford</a></li>
<li><a href="http://cityofweatherford.com/Calendar2.php">Calendar of Events</a></li>
</ol>
</li>
</ol>
</div>

<div id="mainContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec velit nisl, tempor non condimentum ornare, fermentum id ipsum. Fusce elementum mauris id arcu convallis nec euismod dolor vulputate. In a lacus leo. Sed dignissim neque vitae dolor cursus blandit. Curabitur sed tristique nisi. Nullam adipiscing elit vitae libero iaculis sed fermentum enim hendrerit. Sed sit amet ante massa, ac commodo nisi. Sed mattis ultricies nunc, non auctor ipsum sollicitudin at. Nunc interdum dignissim nibh, sit amet mattis purus blandit sed. Duis tristique, libero at volutpat mollis, urna urna condimentum purus, nec imperdiet velit purus ut augue. Phasellus vitae luctus mauris. In ac nibh risus. Sed a blandit massa. Aliquam vulputate nibh sed justo eleifend commodo. Maecenas bibendum venenatis hendrerit. Sed eget congue ante. Sed dignissim, nulla ut lobortis cursus, diam orci auctor mauris, sit amet sollicitudin metus orci et turpis. Cras gravida egestas lacus, ac tincidunt sem mattis quis. In id erat at enim venenatis dapibus. Phasellus tempus laoreet odio, non aliquam tellus elementum ac.

Donec nec nibh velit. Curabitur fringilla mauris non justo tincidunt dignissim. Phasellus porta metus risus. Vestibulum magna ante, posuere in consectetur at, volutpat sit amet mauris. Nam mi leo, luctus vel cursus sed, accumsan et turpis. Praesent ultricies nisl nec justo tempor rhoncus. Vestibulum fringilla, odio sit amet posuere gravida, nulla turpis gravida enim, ut ullamcorper dolor justo id arcu. Nullam sit amet ultrices sem. Duis viverra, nunc eu laoreet hendrerit, turpis dolor aliquam elit, pulvinar fringilla libero turpis sed nisl. Vivamus sodales tincidunt congue. Quisque ac magna velit. Mauris luctus fringilla iaculis. Sed tristique congue pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eget dapibus lorem. In hac habitasse platea dictumst. Praesent rutrum faucibus congue. Mauris nec orci nisl, et ultricies neque.

Proin auctor facilisis mi, sed fermentum lorem ornare varius. Praesent commodo aliquam tortor et scelerisque. Aenean ac lacus libero. Fusce vulputate dui ac leo varius sagittis. Suspendisse gravida nibh ac ligula interdum condimentum. Maecenas ultrices, ligula eu suscipit suscipit, sapien justo rutrum lorem, non bibendum risus elit sed sem. Mauris vel mi justo, vel faucibus lacus. Sed fermentum commodo fringilla. Maecenas magna nisi, condimentum et vulputate a, bibendum non dolor. Aenean in commodo dolor. Fusce mi nisl, volutpat eu mollis vitae, pulvinar non elit. In tellus diam, cursus vel dictum nec, hendrerit ut nunc. Curabitur lorem neque, pharetra ut aliquet id, aliquam vitae nisi. Ut quis felis urna, eu tempor justo. Nulla facilisis ipsum et nisi vestibulum rutrum. Morbi odio eros, aliquam sit amet gravida eu, pretium nec nulla. Nulla sodales ante tortor. Mauris luctus rutrum tortor, viverra dignissim purus adipiscing id.

Morbi eget elit id turpis ultricies feugiat quis tempus quam. Aenean dapibus luctus egestas. Sed bibendum tellus fringilla neque ullamcorper vitae interdum lectus faucibus. Curabitur enim erat, bibendum sed malesuada sit amet, blandit sed elit. Vivamus elit dolor, pulvinar sit amet rutrum in, consectetur molestie metus. Quisque vel condimentum nisi. Vivamus aliquam, lectus vitae cursus rhoncus, massa felis aliquet purus, quis commodo leo risus non ligula. Ut id magna et purus bibendum consectetur non eget nisl. Donec ut massa leo. Pellentesque eros nibh, venenatis vel faucibus sagittis, malesuada nec nisi. Nulla vulputate congue lacus, in fringilla felis venenatis ut. Praesent viverra, ligula sit amet pharetra vestibulum, ipsum enim dignissim nulla, ac facilisis erat lacus vel velit. Suspendisse potenti. Curabitur erat velit, hendrerit at lacinia non, mollis vel nibh. Sed gravida luctus ipsum, ut scelerisque magna dictum et.

Nulla at massa ante, sed bibendum mi. Nullam eleifend, odio eu gravida tempus, sem purus faucibus ligula, tempor varius leo nunc accumsan velit. Integer a nisi mauris, at fermentum odio. Duis iaculis eleifend leo ultricies ornare. In aliquet aliquet augue ac ultricies. Aenean sem libero, mollis molestie eleifend in, gravida ut lacus. Etiam urna ante, pretium quis aliquet in, faucibus quis ante. Suspendisse potenti. Donec tristique rhoncus convallis. Vivamus in felis vel ante congue molestie vel ut elit. Donec venenatis tortor ac est vulputate vestibulum. Nullam sem sem, gravida ut rutrum sed, fermentum ac nunc. Donec sed eros magna. Aliquam ultrices molestie tortor in ultricies.
</div>

</body>
</html>


The text is just lorem ipsum.

Once again, any help would be appreciated!

Thanks

Yours,
Shane~

Is This A Good Question/Topic? 0
  • +

Replies To: Basic XHTML and CSS help please....

#2 CatchThi5Drift  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 12-October 09

Re: Basic XHTML and CSS help please....

Posted 01 December 2009 - 11:55 AM

I opened your page in four different browsers (Safari, Opera, Firefox, Camino), and everything looks to be working the way you described it should be. The only issue is that the borders don't reach the bottom in all but Safari, however they both stop at the same point.
Was This Post Helpful? 0
  • +
  • -

#3 ShaneK  Icon User is offline

  • require_once("brain.php"); //Fatal error :/
  • member icon

Reputation: 240
  • View blog
  • Posts: 1,224
  • Joined: 10-May 09

Re: Basic XHTML and CSS help please....

Posted 01 December 2009 - 01:07 PM

Forgot that I messed with this code, the problem is when the width of the main content area gets much larger it gets scrolled all the way to the bottom. Also, the border thing...

Yours,
Shane~
Was This Post Helpful? 0
  • +
  • -

#4 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1368
  • View blog
  • Posts: 3,455
  • Joined: 28-November 09

Re: Basic XHTML and CSS help please....

Posted 02 December 2009 - 09:38 AM

Set a max-width in CSS. Be sure to account for the extra space for padding and margins, ie if you have padding:5; and margin:5; you would need to remember to take 20 off of the max width (or height should you choose to use it).
Was This Post Helpful? 0
  • +
  • -

#5 ShaneK  Icon User is offline

  • require_once("brain.php"); //Fatal error :/
  • member icon

Reputation: 240
  • View blog
  • Posts: 1,224
  • Joined: 10-May 09

Re: Basic XHTML and CSS help please....

Posted 02 December 2009 - 11:24 AM

Well, that's not as much of the problem as the scrolling thing is. I don't care that it's larger, by all logical reasoning it should NOT scroll to the bottom, there's plenty of room at the top for it. When I say "much larger" I mean just a couple pixels...

Yours,
Shane~
Was This Post Helpful? 0
  • +
  • -

#6 rikkit  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 05-December 09

Re: Basic XHTML and CSS help please....

Posted 22 December 2009 - 05:08 AM

Attached Image

Looking at your site in Firebug, the problem is the floating of the background. For some reason both sides have padding-bottom: 100%; - I think this is your problem. Rather than floating the background at the sides I would make it a background colour and set a layer in front to be white with a set width. #menu and #mainContent would then go in that 'wrap.' That would solve it.

This post has been edited by rikkit: 22 December 2009 - 05:09 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1