Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

I thought I was getting a handle on CSS... 1

Status
Not open for further replies.

wbodger

Programmer
Apr 23, 2007
769
US
I have this simple little brochureware site that I am trying to put together the 'right' way with CSS and relative positioning, but it is not working for me. The site is at Very simple with one stylesheet. Not sure if it would be easier to post it here or for you to look at it online, so here is the apge:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
	<head>
		<title>The Plumbers Pillow a product of AcheFreeman, Edmonds, WA</title>
		<link type="text/css" href="includes/style2.css" rel="stylesheet" media="screen" />
	</head>
	<body>
		<div id="container">
			<div id="logo" class="clearfix"><img src="images/logo.png" width="216" height="245"></div>
			<p>
				<div id="testimonial" class="clearfix">
					<p align="center">"The Plumbers Pillow &#0153; is ergonomically designed to 
						correctly support and stabilize the spinal vertebra and muscle structure while 
						working on the back. This support can help reduce and prevent neck and back 
						injuries."</p>
					<p align="center">
					Dr. Steve Sanderson, D.C.<p align="center">
						<font size="2">Doctor of Chiropractic<br>
							Seatac, Washington</font>
				</div>
				<div id="tbox" class="clearfix">Backbreaking work no longer means backbreaking 
					pain.</div>
				<div id="bar"><img src="images/vbar.png" width="18" height="600"></div>
				<div id="bluebox">The comfortable solution for awkward jobs</div>
				<div id="beforeafter"><img src="images/beforeafterwide.png" width="353" height="190"></div>
				<div id="lbox">The PLUMBER’S PILLOW&#0153;<br>
					<ul>
						<li>Fits over cabinet toekicks;</li>
						<li>Folds to a compact 13x18x8 with an easy-to-carry handle;</li>
						<li>Folds to a 36" length for full upper body support;</li>
						<li>Separates into two pillows for versatility in different situations;</li>
						<li>Is made of comfortable foam with a removable, washable, urethane coated 
							Cordura® cover.</li>
						<li>Perfect for professional contractors and do-it-yourselfers</li>
						<li><strong>Only $49.95</strong></li>
					</ul>
				</div>
				<div id="footer">Copyright 2009 Achefreeman, All rights reserved</div>
		</div>
	</body>
</html>

AND THE STYLE SHEET:
Code:
/***CSS Document***/

div#container
{
	margin: 0px auto;
	width: 750px;
	background-color:#F6F7F7;
}
div#logo
{
	position:relative;
	top:10px;
	padding:15px;
}
div#logo #testimonial
{
	top:20px;
	background-color:#FFF5DD;
	margin:5px 5px 5px 5px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size:14px;
	line-height:18px;
	width:225px;
	padding:10px;
}
div#logo #testimonial #tbox
{
	top:25px;
	background-color:#FFF5DD;
	margin:5px 5px 5px 5px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size:18px;
	line-height:24px;
	width:225px;
	padding:10px;
	text-align:center;
}
div#bar
{
	left:255px;
	top:-600px;
	padding:15px;
}
div#bluebox
{
	position:relative;
	top:-1230px;
	left:310px;
	background-color:#00667D;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	width:420px;
	font-size:18pt;
	font-style:italic;
	font-weight:bold;
	color:White;
	text-align:center;
}
div#beforeafter
{
	position:relative;
	top:-1200px;
	left:350px;
}
div#lbox
{
	position:relative;
	top:-1175px;
	left:310px;
	background-color:#FFF5DD;
	margin:5px 5px 5px 5px;
	width:400px;
}
div#footer
{
	width:750px;
	background-color:#00667D;
	text-align:center;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size:small;
	color:White;
}
.clearfix:after
{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix
{
	display:inline-block;
}

I have spent too long looking at this, I don't see the problems with the style sheets.

Thanks for any help you can give me.

Willie
 
Hello,
Firstly you have a few validation errors that need to be taken care of - You should try not to use relative positioning because you will end up with crazy div positions like
Code:
 #lbox
{
    position:relative;
    top:-1175px;
This will give you scroll bars where you don’t need them on the side of the browser
Instead try to use
float:left;
float:right;
Etc. This will fix the positioning issues.
 
I agree - the usage of all those negative values is just not necessary for a simple layout. I'd start from the basics and rework your entire CSS, to be honest.

Perhaps posting a screenshot of how you would like it to look would help to give a good example of cleaner CSS?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
I am trying to put together the 'right' way with CSS and relative positioning
CSS is certainly the right way. Relative positioning may have a role to play as well, but I rather doubt it in a simple layout. I certainly wouldn't expect almost every element on the page to be relatively positioned.

One other problem that you'll have with your CSS is these rules:
Code:
div#logo #testimonial
{
    top:20px;
    background-color:#FFF5DD;
    margin:5px 5px 5px 5px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size:14px;
    line-height:18px;
    width:225px;
    padding:10px;
}
div#logo #testimonial #tbox
{
    top:25px;
    background-color:#FFF5DD;
    margin:5px 5px 5px 5px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size:18px;
    line-height:24px;
    width:225px;
    padding:10px;
    text-align:center;
}
The first rule applies to an element with the id "testimonial" nested inside a div with the id "logo". The second applies to a further element, with the id "tbox" nested inside the "testimonial" element. None of this will be applied in your code, because the elements in question are siblings rather than nested inside eachother.


-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
That would be two main containers floated next to each other, with a footer at the bottom. I don't know how important it is for you to have the left boxes hang further than the point where the blue colour of the top banner begins, but if you do need that you will have figure out some extra steps to work around that. If not, then it is a simple way of having two blocks floated next to each other. All the content within the blocks (two boxes with text in one and image, heading and a list in the other) can easily just follow the document flow then. After the two floated blocks you put a clearing footer and that's that.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Ahh... I see what you are saying with the two boxes/containers. I would like to have the over/underhang just for some 'texture' to the site, but I'm not a designer, just helping a friend out. Thanks for the help!
 
Getting the blue and yellow boxes to overlap is where relative postioning can come in to play. Do as Vrag says and lay your content out in two boxes floated side-by-side.

Then, give the blue box [tt]position: relative[/tt] and [tt]left: -20px;[/tt] (or whatever). What relative positioning does is say "render this object at this position relative to where you were going to render it", so it's perfect for nudging an element a little to the left. Just don't try laying out a whole page that way.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top