Web Design Forums

88mph · 31-03-2008, 18:28

I have build this template to house a new site

www.mildfuzz.com/Sitetemplate

but when i put any content in, it falls to pieces

www.mildfuzz.com/Sitetemplate/lorem.html

any ideas?

30equals · 31-03-2008, 18:58

you need to clear your floats

bluesage · 31-03-2008, 19:01

need to clear:both at some point, try with the pagebottom wrapper.

I think it may be the way your divs are placed, but not sure which one needs to be moved.

for 3 column layout, you can also try something like this:

Code:

<div id="colholder">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>

css: will create three col of same width theoretically if I didnt make a mistake.

Code:

#colholder {
width:900px; /*max width of all 3 columns*/
}
#col1{
float:left; width:300px;
}
#col2{
float:left; width:300px;
}
#col3{
float:left; width:300px;
}

88mph · 01-04-2008, 05:41

tried that method before, didn't work, and when I looked up the three col method online, the method i have employed seems to reign supreme amongst the tutorial creators

i'll give it another shot now i am bit more proficient tho

did try to put a clear in, but it sent the whole think mental. will upload and show you the results when i get it

88mph · 01-04-2008, 05:42

by the way

Mild Fuzz - The slightly defocused world of John Farrow

and

Mild Fuzz - The slightly defocused world of John Farrow

link to the true html, as the original link is on a redirect

my bad

88mph · 01-04-2008, 18:24

have updated the site, but still have a lot of problems

heres the css

Code:

body 	{			
			background-image: url("../images/background.gif");
			background-color: white;
			
}
img#logo {
	position: relative;
	top: 50px;
	
	z-index: 2;
	margin: 0 auto;
	display: block;
	
}


#container {
	top: 135px;
	height: 100%;
	background: url("../images/pagebackground.gif")  no-repeat left top;
	width: 787px;
	margin: 0 auto;
	height: 500px;
}
#boarderbackground {
	
	position: relative;
	top: 10px;
	min-height: 440px;

	background: url("../images/boarderbackground.gif")  repeat-y left;
	
}
#signature {
		position: relative;
		background: url("../images/pagebackgroundbase.gif")  no-repeat  bottom;
		min-height: 10px;
		top: 10px;
		padding: 0;
		
		clear: both;
}
#content {
	background: url("../images/pagetop.gif")  repeat-x left top;
	background-color: white;
	position: relative;
	top: 77px;
	width: 670px;
	margin: 0 auto;
	min-height: 310px;
}

}
#columns {
		
	height: 100%;
	float: left;
}
#leftcol {
	height: 100%;
	background-color: #dddddd;
	background: url("../images/leftcol-boarder.gif")  repeat-y left top;
	
	float: left;
	width: 169px;
	min-height: 310px;
	border-right:dotted black 1px;
}
#centrecol {
	height: 100%;
	float: left;
	width: 329px;
	border-right:dotted black 1px;
 	min-height: 310px;
	
}
#rightcol {
	height: 100%;
	background-color: #dddddd;
	float: right;
	width: 166px;
	min-height: 310px;
	background: url("../images/rightcol-boarder.gif")  repeat-y right top;
}
#pagebottomwrapper{
	background: url("../images/pagebottom.gif")  repeat-x left bottom;
	position: relative;

	clear: both;
	margin: 0 auto;
	
}

and the html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>
			Mild Fuzz - The slightly defocused world of John Farrow
		</title>
		<meta name="author" content="John Farrow">
		<meta name="keywords" content="Mild Fuzz, Blog, CSS, HTML, PHP, Hand Coding, Photoshop, Final Cut Studio, Editing, Adobe, Creative Suite, Design, Development, Media, Multimedia, Web, internet, John Farrow, Swindon, Wiltshire, South West">
		<link rel="StyleSheet" href="styles/mainstyle.css" type="text/css" media="all">
	</head>
	<body class="default">
		
			<img id="logo" src="images/logo.png" alt="Mild Fuzz - Multimedia" height="133" width="337" name="logo">
		
		<div id="container">
			<div id="boarderbackground">
				<div id="content">
					<div id="columns">
						<div id="leftcol"></div>
						<div id="centrecol">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer bibendum. Quisque ullamcorper vehicula sapien. Duis sit amet leo. Quisque augue. Integer consequat risus at risus. Morbi feugiat, est in pulvinar aliquam, mauris nulla imperdiet lorem, id pulvinar erat tortor eu dolor. Proin non augue. Aenean in mi. Fusce tempor accumsan dolor. Suspendisse potenti. Integer et purus at lorem condimentum mattis. Mauris felis. Cras placerat arcu at odio. Donec tempus dapibus dui.

						Phasellus ac erat. Aliquam mattis. Vestibulum vel orci quis ligula consequat dignissim. Duis nec mauris eu eros gravida iaculis. Sed sollicitudin odio vel mi. Fusce gravida tellus faucibus sapien. Sed pharetra interdum risus. Nullam auctor urna vitae libero. Curabitur quis massa molestie libero volutpat facilisis. Mauris sapien mi, iaculis eget, aliquet a, condimentum vitae, ligula. Aliquam erat volutpat. Morbi urna purus, malesuada non, eleifend at, vestibulum eu, diam. Nunc malesuada placerat leo. Aliquam blandit. Nam sit amet tellus consequat augue dapibus sollicitudin.

						Praesent id magna et est posuere tincidunt. Phasellus odio. Cras rutrum erat ac velit tristique interdum. Nunc sit amet augue suscipit magna feugiat volutpat. Praesent sodales purus sed nibh. Nullam malesuada congue magna. Suspendisse vel tortor eget dui viverra viverra. Vivamus feugiat tortor in purus. Proin rutrum est ac ligula adipiscing dignissim. Donec quis massa.

						Phasellus nibh. Etiam vulputate luctus enim. Quisque venenatis purus eget nibh. Curabitur accumsan tempor felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nec mi. Mauris lacus. Morbi ullamcorper sagittis felis. Nam accumsan porttitor purus. Aliquam erat volutpat.

						Quisque arcu. Proin nibh arcu, imperdiet in, accumsan sollicitudin, molestie id, felis. Integer metus sem, aliquam in, tincidunt et, volutpat in, justo. Cras purus erat, tincidunt sed, tincidunt eget, imperdiet ut, metus. Suspendisse eros purus, sodales ut, sollicitudin quis, aliquam quis, magna. Fusce tincidunt accumsan purus. Aenean quam massa, faucibus varius, sodales sed, cursus eu, enim. Pellentesque vel nulla dapibus elit fermentum rhoncus. Cras blandit ipsum ut est. Morbi sit amet urna eu tellus adipiscing fermentum. Integer ac augue vitae neque pharetra viverra. Maecenas porttitor, elit ut rutrum scelerisque, pede enim ullamcorper metus, vitae pulvinar sapien metus in orci. Morbi facilisis. Ut et sem ut mi facilisis sodales. Nunc nibh lorem, ullamcorper sit amet, aliquam sed, semper ac, massa. Mauris et pede.
						</div>
						<div id="rightcol"></div>
					</div>
					<div id="pagebottomwrapper"></div><!--pagebottomwrapper end-->
				</div><!--end content-->
			</div><!--end boarderbackground-->
			<div id="signature"></div>
		</div>
	</body>
</html>

88mph · 02-04-2008, 17:35

just wanted to bump this up as I am a little desperate!!

The problem is when the text in the center column runs too long, the divs underneath it have minor panic attacks

skunkbad · 03-04-2008, 00:43

If your page wasn't using frames it would be easier to work with in FF. I'd try removing the height:100% from #columns, or adding a height to #pageBottomWrapper.

88mph · 03-04-2008, 16:57

sorry about that, its a redirect. I have reposted the links above, but here they are again.

Mild Fuzz - The slightly defocused world of John Farrow

Mild Fuzz - The slightly defocused world of John Farrow

emil · 04-04-2008, 01:20

partial fixes

Code:

/* NORMALIZE Cross browser rendering inconsistencies 
----------------------------------------------------------------- 
html, body, form, fieldset{ margin: 0;padding: 0; font-family:Verdana, sans-serif; }
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address{ margin:0;padding: 0; }
dd, blockquote{ margin-left: 1em; }
form label{ cursor: pointer; }
fieldset{ border: none; }
input, select, textarea{ font-size:1em; }
textarea{font-size:1.2em;font-family:verdana,arial,helvetica,sans-serif;}
ul li { list-style: none; }
a img, :link img, :visited img {
border: 0;
}*/

/* NOTES

EACH UNIT IN PS = 5.55% (~1/18) SCREEN WIDTH;

*/


body 	{			
			background-image: url("../images/background.gif");
			background-color: white;
}
#logo {
	position: relative;
	top: 50px;
	
	z-index: 2;
	margin: 0 auto;
	display: block;
	
}


#container {
	top: 135px;

	background: url("../images/pagebackground.gif")  no-repeat left top;
	width: 787px;
	margin: 0 auto;
	
}
#boarderbackground {
		min-height: 440px;

	background: url("../images/boarderbackground.gif")  repeat-y left;
	
}
#signature {
		
		background: url("../images/pagebackgroundbase.gif")  no-repeat left bottom;
clear:both;
}
#content {
	background: url("../images/pagetop.gif")  repeat-x left top;
	background-color: #E8E8E8;
	position: relative;
	
	width: 670px;
	margin: 0 auto;
	min-height: 310px;

}
#pagebottomwrapper{
		background: url("../images/pagebottom.gif")  repeat-x left bottom;
	position: relative;
	z-index: 1;
	
	margin: 0 auto;
	min-height: 310px;
clear:both;
}
#leftandcentre {
		
	width: 500px;
	float: left;
}
#leftcol {
	
	background: url("../images/leftcol-boarder.gif")  repeat-y left top;
	
	float: left;
	width: 169px;
	min-height: 310px;
	border-right:dotted black 1px;
}
#centrecol {
	float: right;
	width: 329px;
	border-right:dotted black 1px;
 	min-height: 310px;
	
}
#rightcol {
	float: right;
	width: 166px;
	min-height: 310px;
	background: url("../images/rightcol-boarder.gif")  repeat-y right top;
}



/**/

Read on faux columns to get the backgrounds to work.

88mph · 04-04-2008, 08:22

uploaded your method, and its gone a little crazy!!

Mild Fuzz - The slightly defocused world of John Farrow

emil · 04-04-2008, 15:43

weird...

I'll look into it again tomorrow

88mph · 04-04-2008, 15:57

Quote:

Originally Posted by emil

weird...

I'll look into it again tomorrow

much appreciated, this is freaking baffling me!! (to be honest, not too hard

)

31-03-2008, 18:28	#1 (permalink)
88mph Great Scott!! Join Date: Feb 2008 Posts: 223	CSS breakdown!! I have build this template to house a new site www.mildfuzz.com/Sitetemplate but when i put any content in, it falls to pieces www.mildfuzz.com/Sitetemplate/lorem.html any ideas?

31-03-2008, 19:01	#3 (permalink)
bluesage Senior Member Join Date: Dec 2006 Location: Switzerland Posts: 356	need to clear:both at some point, try with the pagebottom wrapper. I think it may be the way your divs are placed, but not sure which one needs to be moved. for 3 column layout, you can also try something like this: Code: <div id="colholder"> <div id="col1"></div> <div id="col2"></div> <div id="col3"></div> </div> css: will create three col of same width theoretically if I didnt make a mistake. Code: #colholder { width:900px; /max width of all 3 columns/ } #col1{ float:left; width:300px; } #col2{ float:left; width:300px; } #col3{ float:left; width:300px; } __________________ www.benshu.ch // Evolving with Style

04-04-2008, 15:43	#12 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 6,998	weird... I'll look into it again tomorrow __________________ Tourism Q X R

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

31-03-2008, 18:58	#2 (permalink)
30equals Senior Member Join Date: Jan 2006 Posts: 146	you need to clear your floats

01-04-2008, 05:41	#4 (permalink)
88mph Great Scott!! Join Date: Feb 2008 Posts: 223	tried that method before, didn't work, and when I looked up the three col method online, the method i have employed seems to reign supreme amongst the tutorial creators i'll give it another shot now i am bit more proficient tho did try to put a clear in, but it sent the whole think mental. will upload and show you the results when i get it

01-04-2008, 05:42	#5 (permalink)
88mph Great Scott!! Join Date: Feb 2008 Posts: 223	by the way Mild Fuzz - The slightly defocused world of John Farrow and Mild Fuzz - The slightly defocused world of John Farrow link to the true html, as the original link is on a redirect my bad

02-04-2008, 17:35	#7 (permalink)
88mph Great Scott!! Join Date: Feb 2008 Posts: 223	just wanted to bump this up as I am a little desperate!! The problem is when the text in the center column runs too long, the divs underneath it have minor panic attacks

03-04-2008, 00:43	#8 (permalink)
skunkbad Registered User Join Date: Apr 2008 Location: Temecula, California Posts: 19	If your page wasn't using frames it would be easier to work with in FF. I'd try removing the height:100% from #columns, or adding a height to #pageBottomWrapper.

03-04-2008, 16:57	#9 (permalink)
88mph Great Scott!! Join Date: Feb 2008 Posts: 223	sorry about that, its a redirect. I have reposted the links above, but here they are again. Mild Fuzz - The slightly defocused world of John Farrow Mild Fuzz - The slightly defocused world of John Farrow

04-04-2008, 08:22	#11 (permalink)
88mph Great Scott!! Join Date: Feb 2008 Posts: 223	uploaded your method, and its gone a little crazy!! Mild Fuzz - The slightly defocused world of John Farrow

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)