6 replies [Last post]
Vlad097
Vlad097's picture
Offline
newbie
South Africa
Last seen: 12 years 19 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-01-02
Posts: 4
Points: 5

Hi there.
I try to build this website strictly with div's and css. I put one body div around everything. I put pictures 1,2,3 and 4 inside a header div and each inside it's own div. Pictures 5,6,7 and 8 are inside container and each inside it's own div. Footer is pic 9 and it has div on it's own.
Now, I managed to make 1 and 2 image look like in photoshop but img 3 and 4 I can't force into the header div.
It keeps slipping underneath the header box no matter what I do. I did my maths by the way with dimensions and check it many times. I really wander if this is possible?
What would you do?

AttachmentSize
webSite1.png62.72 KB
wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 11 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

show us your code.

show us your code.

Vlad097
Vlad097's picture
Offline
newbie
South Africa
Last seen: 12 years 19 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-01-02
Posts: 4
Points: 5

thanx for reply...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Css/default.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
	<div id="body">
	   <div id="header">
		        <div id="leftHeader">Left Header 1</div>
 
           		<div id="cenerHeader">Center 2</div>
 
            	        <div id="search">Search Goes Here 3</div>
 
       	                <div id="underSearch">under Search 4</div>
	   </div>
 
	   <div id="container"> Whole container 
 
			<div id="leftNav"> Left Nav goes Here 5</div>
 
			<div id="leftContainer"> Left container goes here 6</div>
 
			<div id="rightContainer"> Right container goes here 7</div>
 
			<div id="rightNav"> Right Nav goes here 8</div>
          </div>
 
			<div id="footer"> Footer goes here 9</div>
     </div>
 
</body>
</html>

And CSS file!

#body {
margin: 0 auto;
width: 949px;
height: 577px;
text-align: center;}

#header {
width: 949px;
height: 245px;}

#leftHeader {
width: 324px;
height: 245px;
background-image: url(../Images/CubedCherry1_01.png);
background-repeat: no-repeat;
float: left;}

#cenerHeader {
width: 296px;
height: 245px;
background-image: url(../Images/CubedCherry1_03.png);
background-repeat: no-repeat;
margin-left: 324px;
margin-top: 0px;}

#search {
width: 329px;
height: 132px;
background-image: url(../Images/CubedCherry1_04.png);
background-repeat: no-repeat;
margin-top: 0px;
float: right;}

#underSearch{
width: 329px;
height: 113px;
background-image: url(../Images/CubedCherry1_05.png);
background-repeat: no-repeat;
margin-top: 0px;
float: right;
margin-left: 620px;}

#container {
width: 950px;
height: 297px;
text-align: center;}

#leftNav {
width: 177px;
height: 297px;
margin: 0 auto;
background-image: url(../Images/CubedCherry1_06.png);
background-repeat: no-repeat;}

#leftContainer {
width: 300px;
height: 297px;
margin: 0 auto;
background-image: url(../Images/CubedCherry1_07.png);
background-repeat: no-repeat;}

#rightContainer {
width: 313px;
height: 297px;
margin: 0 auto;
background-image: url(../Images/CubedCherry1_08.png);
background-repeat: no-repeat;}

#rightNav {
width: 159px;
height: 297px;
margin: 0 auto;
background-image: url(../Images/CubedCherry1_10.png);
background-repeat: no-repeat;}

#footer {
margin: 0 auto;
width: 950px;
height: 35px;
background-image: url(../Images/CubedCherry1_11.png);
background-repeat: no-repeat;}

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 21 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Hello Vlad097

When you don't float #cenerHeader the order things need to be in for your right floated elements might not be very intuitive. Floats come first.

First solution involves changing the order of your floats and a little tweak to your CSS:
markup -

<div id="body">
	   <div id="header">
		        <div id="leftHeader">Left Header 1</div>
 
            	        <div id="search">Search Goes Here 3</div>
 
       	                <div id="underSearch">under Search 4</div>
 
           		<div id="cenerHeader">Center 2</div>
	   </div>
 

And the CSS that goes with it -
#underSearch{
width: 329px;
height: 113px;
background: #F00 url(../Images/CubedCherry1_05.png) no-repeat;
margin-top: 0px;
float: right;
}

-------------------------
For a different, and easier solution, this works by only changing your CSS -

#header {
width: 949px;
overflow: auto; /*to clear floats*/
border-bottom: 3px solid #00f; /*just for demonstration*/
}
 
#leftHeader {
width: 324px;
height: 245px;
background: #0F0 url(../Images/CubedCherry1_01.png) no-repeat;
float: left;}
 
#cenerHeader { 
width: 296px;
height: 245px; 
float: left;
background: #9F0 url(../Images/CubedCherry1_03.png) no-repeat;
margin-top: 0px;} 
 
#search {
width: 329px;
height: 132px;
background: #CC0 url(../Images/CubedCherry1_04.png) no-repeat;
margin-top: 0px;
float: right;}
 
#underSearch{
width: 329px;
height: 113px;
background: #F00 url(../Images/CubedCherry1_05.png) no-repeat;
margin-top: 0px;
float: right;}

Vlad097
Vlad097's picture
Offline
newbie
South Africa
Last seen: 12 years 19 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-01-02
Posts: 4
Points: 5

Wonderful advice!

I've sorted it within seconds. Thank you so much for that. I've learned a lot in those 10 min. Smile)) I understand why it happened. Where do you think I could go to read about a logic on how css compiler works, lets say some practical stuff like this, what is first, ordering in coding of css.
I actually also realized that I don't understand fully what's going on behind the scene with css and markup. I mean, everything is fine until there is complex layout of background images.
Okay anyway, Thanx again, you've made my day!
V

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 21 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

This is a good place to find

This is a good place to find all that - http://www.w3schools.com/default.asp

Also, checking with a validator will find errors in your code as well as help you learn to avoid them in the first place. Have a look at all the these links:

Validate your markup
Validate your CSS

Vlad097
Vlad097's picture
Offline
newbie
South Africa
Last seen: 12 years 19 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-01-02
Posts: 4
Points: 5

Excelent

Thanx for these. It will keep me busy for a couple of weeks. Thanx again!