CSS Layout challenge

429 Posts

c-m Reply #11, 17 years, 8 months ago

Well here is my CSS.

As you can see the two images outside the container are absolute. This is a problem since if the page is re-sized the images move around - a bit like that fish in the example above. What is the best way to position these images?

html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background: #ffffff;
}




#page-container {
		width: 750px;	
		margin: auto;
		background-color:#007e3e; 

}



/* HORIZONTAL NAVIGATION BAR
/////////////////////////////////////*/

ul#navigation {	
	width:750px;
	list-style:none;
	height:50px;
margin: 0;
padding: 0;
}

ul#navigation li {
	display:inline;
}


ul#navigation li a {
	height:50px;
	float:left;
	text-indent:-9999px;
	text-decoration:none;
}


ul#navigation  li a span {
	float:left;
	display:block
}

ul#navigation li#navigation-1 a {
	width:189px;
	background:url(navigation.jpg) no-repeat 0px 0
}

ul#navigation li#navigation-1 a:active,
ul#navigation li#navigation-1 a:hover {
	background-position:0px -50px
}

ul#navigation li#navigation-4 a {
	width:187px;
	background:url(navigation.jpg) no-repeat -189px 0
}

ul#navigation li#navigation-4 a:active,
ul#navigation li#navigation-4 a:hover {
	background-position:-189px -50px
}

ul#navigation li#navigation-12 a {
	width:187px;
	background:url(navigation.jpg) no-repeat -376px 0
}

ul#navigation li#navigation-12 a:active,
ul#navigation li#navigation-12 a:hover {
	background-position:-376px -50px
}

ul#navigation li#navigation-36 a {
	width:187px;
	background:url(navigation.jpg) no-repeat -563px 0
}

ul#navigation li#navigation-36 a:active,
ul#navigation li#navigation-36 a:hover {
	background-position:-563px -50px
}


#header {
	height: 92px;
	background: #ffffff	url(../images/header.jpg) no-repeat;

	}

/********* ******/


#content {
		margin: 35px 15px 15px 15px;
		background: #ffffff;
		line-height: 18px;
		color: #007e3e;
		width: 720px;
}




#footer {
	background: url(../images/footer.jpg);
	height: 200px;
	clear: left;
	text-align: center;
	padding: 25px;
	
	
}

/***************** **************/


/****** boxes for front page ******/

#qucksurvey {
width: 230px;
float: left;
clear: right;
background: #6eac7d;
margin-left: 15px;
margin-bottom: 15px;
height: 210px;
border: 2px solid #ffffff;
}

#news {
margin-left: 10px;
margin-bottom: 15px;

width: 230px;
float: left;
clear: right;
background: #6eac7d;
height: 210px;
border: 2px solid #ffffff;



}

#ndrange {
margin-right: 15px;
margin-bottom: 15px;
width: 230px;
float: right;
clear: right;
background: #6eac7d;
height: 210px;
border: 2px solid #ffffff;
}


/******* headers ******/
h1 {
	margin: 0;
	padding: 0;
}

#content h2 {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: 200;
	font-size: 26px;
	color: #235F35;
}

.light {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: 200;
	size: 24px;
	color: #73AD81;
}


/******* text styles ******/
#content p {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
	color: #235F35;
}

#content .padding {
	padding: 15px;
}


.floatright {
float: right;
margin: 25px 15px 0px 25px;
clear: right;
}

.floatrightbutton {
float: right;
margin: 0px 35px 10px 25px;
clear: right;
border: 0px;
}


.floatrightbutton a:hover {
float: right;
margin: 0px 35px 10px 25px;
clear: right;
border: 0px;
background-image: url(../images/buynowbutton2.png) 
}


p.centertext {
margin-left: auto;
margin-right: auto;
}

IMG.displayed {
    display: block;
    margin-left: 35px;
	position: ; left: 10px; right: 0;
	 }

a.centered {
    display: block;
margin-left: auto;
margin-right: auto;
text-align:center;
color: #000000;
text-decoration: none;

}


.bold {
color: #000000;
}


.dogleft {
position: absolute; top: 650px; left: 35px;  
clear: right;
border: 0px;
}


.dogright {
position: absolute; top: 550px; right: 35px;  
clear: right;
border: 0px;
}



/************ Links ******/

a {
	font-size: 11px;
	color: #235F35;
}

a:link {
	text-decoration: none;
	color: #000000;
}

a:visited {
	text-decoration: none;
	color: #000000;
}

a:hover {
	text-decoration: none;
	color: #666666;
}

a:active {
	text-decoration: none;
	color: #000000;
	


/******** survey ****/

iframe.survey {
		display: block;
		text-align: center;

		padding-left: 25px;
}

/***
.languages {
float: right;
margin: 3px 5px 5p;
border: 0.5px solid #ffffff;
}
***/

Also the site contains an ifame that is a PHP survey, I can’t for the life of me get that centered.

1,161 Posts

Photowebmax Reply #12, 17 years, 8 months ago

Its always a little hard to see the issue without a real active example page.

One quick thing that leaps out at me though. Your #page-container has a margin of auto. This will make the page move from side to side and up and down with user page resizing. Not sure if this is what you want or not. Having the #page-container{margin: 0 auto) will make the container centered side to side but keep the position from the top the same. Some old IE browsers in quirks mode will not get this right though. Adding a text-align:center to the body element and adding a text-align:left to the #page-container will fix this. Modern browsers just ignore this.

With those two boxes on either side you might try using a big margin-top or seeing if something other than absolute positioning works. Absolute positioning is a powerful tool but but it does require extensive testing in as many browsers as possible because strange things do happen. Absolute positioning boxes with a centered design can be tricky as the absolute stuff is glued to the screen while the rest of the content is not. You see more absolute positioned content with left positioned pages. Also be aware that there is an IE6 bug with respect to absolute positioning in a relative container. Its a mess with not "having layout" etc and the fix can be ugly * html hacks. Some purists who want to avoid hacks will not use absolute positioning. But as the saying goes there are many ways to skin the cat...

Max

PS: you might want to think about using a percentage and or ems for your text size. Your text might scale better...

429 Posts

c-m Reply #13, 17 years, 8 months ago

here is the site www.presspointproofing.co.uk/naturediet everything appears to work how I want it minus the two images left and right and the survey.

I’m not a developer in any sense of the word but got lumbered with producing this.

2,314 Posts

anonymized-26931 Reply #14, 17 years, 8 months ago

Hi there,

if those pictures should always be on a certain place outside the container on the bottom, try to put the images inside of #page-container and change the css to:

#page-container {
	width: 750px;
	position: absolute;
	left: 50%;
	margin-left: -375px;
	margin-top: 0px;
	background-color:#007e3e; 
}
.dogleft {
	position: absolute;
	bottom: 0px; 
	left: -150px;  
	border: 0px;
}

hope this works,

cheers, j

2,314 Posts

anonymized-26931 Reply #15, 17 years, 8 months ago

....and for the survey...

you forgot to close

a:active {
	text-decoration: none;
	color: #000000;
	}

so the css for the iframe (which comes after) is not working. if you close it, the text will be centered

cheers, j

2,314 Posts

anonymized-26931 Reply #16, 17 years, 8 months ago

maybe you could place the left dog further to the container (or make it smaller), so that you won’t have a horizontal scroll-bar on a 1024px screen.
...and if you add display:inline; to floated elements with a margin, you’ll avoid IE6s double-margin-bug

2,314 Posts

anonymized-26931 Reply #17, 17 years, 8 months ago

hahaa...i’m spamming this thread

i just thought, you could possibly wrap the whole container in a div which is set to width:100%; and which will expand vertically. you then apply a background-image (the two dogs in one image) to that div with background-position:bottom center;

i’m sure this will work, and you don’t need to worry about those scrollbars...

*edit: have a look at the attached files

429 Posts

c-m Reply #18, 17 years, 7 months ago

Thanks. Will look into those changes when the amends come back. Cheers.

429 Posts

c-m Reply #19, 17 years, 3 months ago

right. so this is live at www.naturediet.co.uk/nl I haven’t made the URL a link as the pages are tracked using google analytics.

The layout works fine in IE7 and 8, Safari and Firefox.

The layout does not work in IE5.5 and IE6 which unfortunately represents 12% of the site’s visitors.

2,314 Posts

anonymized-26931 Reply #20, 17 years, 3 months ago

IE5.5!?

the layout i attached above works fine in ie6 though, it’s just a crude example...no fine tuning