Hello you lovely people!

I need some help. I'm an old school web designer who learnt to design websites using tables. I then stopped web design for some years, but recently I've been doing it again. I kinda understand DIV's but the seem to behave one way one day and one way the next.

I have a design brief where I need to create a website that has design elements in each of the boxes of the image I've attached. The image is to scale (pixel for pixel) the website is 980px wide, and must be centred (seen the sticky on centring a webpage using a wrapper).

 

 

The bit I'm having trouble with is the DIV's that sit ontop of the other DIV's.

Anyone fancy helping me out with the code for that? I realise that its probably to do with the 'Float' and 'Position' (and 'Top' and 'Left' and 'Width' and 'Height' CSS elements). But I just seem to push my DIV's out of the way with other DIV's.

 

Some CSS/DIV related Questions:

 

Why would you use FLOAT: Left; instead of FLOAT: Right; What is the difference between these two? What does 'None' and 'Inherit' mean?

 

What is the differences between all the different Position: attributes? Absolute, Fixed, Inherit, Relative, Static,

Without seeing your code, you'll have to study a tutorial.

 

Google "div boxes" and open the first link below the ad which describes absolute, relative and fixed positions for block elements (divs).

 

If a block element is floated, you often have to clear the float after it because floated elements don't give their height to a container like a div, so a following element may climb up over the floated element. One method is to add overflow: hidden; to the style of the containing block element (usually a div).

 

Beginners often code everything in position: absolute (no thanks to Dreamweaver with its APDivs, I think), but you will have much more flexibility if you code with position: relative or don't state any position and then one element will follow the previous one, either starting a new line or side by side if several have a float.

 

Why would you use FLOAT: Left; instead of FLOAT: Right; What is the difference between these two? What does 'None' and 'Inherit' mean?

Float: right will place the element as far right as it can go inside a container or the page body.

 

Quite honestly, don't worry too much about inherit. Nearly everything inherits code from a previous style with a higher rank, hence cascading style sheet where inheritance cascades down.

 

None is often used to cancel out some inherited style or to stop a default style like borders around an image link.

Edited January 27, 201214 yr by Wickham

Thanks for that Wickham

I've roughly DIV'd out the main elements, but I can't seem to create those boxes that need to float ontop of the other DIV's. I've been battling away at it and not really progressed far. I've got them to float ontop of one DIV but they are meant to come down ontop of the DIV beneath it (as per the diagram above).

 

Here is a link to the online version of what I've created so far (rough mock up). I've got a job interview tomorrow, so its quite important that I get this right ASAP.

 

DIV Mock Up

 

The HTML code for it is as follows:

 

<!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="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">

<div id="head"></div>
   <div id="hero">	
      <div id="pod1"></div>
      <div id="pod2"></div>
   </div>
   <div id="body"></div>
   <div id="footer"></div>
</div>
</body>
</html>

The CSS code is as follows:

 

body {
       text-align:center;
	background-image:url(images/background.jpg);
}
#wrapper {
       margin: 0 auto;
       width: 940px;
       text-align:left;
	background-color:#CCC;
	height:990px;
}

#head {
position:relative;
width:940px;
background-image:url(images/header.png);
height:120px;
text-align:center;
}

#hero {
position:relative;
width:940px;
background-image:url(images/hero.jpg);
height:320px;
text-align:center;
}

#pod1 {
margin:0px 0px 0px 0px;
position:inherit;
width:200px;
top:200px;	
left:20px;
background-image:url(images/pod1.png);
height:250px;
float:left;
}

#pod2 {
margin:0px 0px 0px 0px;
position:inherit;
width:200px;
top:200px;
left:40px;
background-image:url(images/pod2.png);
height:250px;
float:left;
}

#body {
position:relative;
width:940px;
background-image:url(images/body.jpg);
height:460px;
text-align:left;
}

#footer {
position:relative;
width:940px;
background-image:url(images/footer.png);
height:100px;
text-align:center;
}

Edited January 31, 201214 yr by AblazeRich
Please use the code button or tags to format your code.

Add...

 

z-index:1;

 

to your #pod1 & #pod2 css.

Edited January 31, 201214 yr by Bomb

Thanks Bomb, but that doesn't seem to have done anything.

 

Do you think it might be conflicting with something?

Edited January 31, 201214 yr by AblazeRich

it works for me in Firefox. Try adding...

 

z-index:0;

 

to you #hero div css as well.

I added it to the Hero DIV and then I also tried adding it to the Bodytext DIV (renamed it from Body to Bodytext as was concerned that there may have been a conflict there), and I've still got nothing.

 

I uploaded it over the file I linked to above and again here:

DIV Test Link

 

Do you think it might be something to do with the Float or position tags?

 

Heres what the CSS code looks like now:

 

body {
       text-align:center;
	background-image:url(images/background.jpg);
}
#wrapper {
       margin: 0 auto;
       width: 940px;
       text-align:left;
	background-color:#CCC;
	height:990px;
}

#head {
position:relative;
width:940px;
background-image:url(images/header.png);
height:120px;
text-align:center;
}

#hero {
position:relative;
width:940px;
background-image:url(images/hero.jpg);
height:320px;
text-align:center;
z-index:0;
}

#pod1 {
margin:0px 0px 0px 0px;
position:inherit;
width:200px;
top:200px;	
left:20px;
background-image:url(images/pod1.png);
height:250px;
float:left;
z-index:1;
}

#pod2 {
margin:0px 0px 0px 0px;
position:inherit;
width:200px;
top:200px;
left:40px;
background-image:url(images/pod2.png);
height:250px;
float:left;
z-index:1;
}

#bodytext {
position:relative;
width:940px;
background-image:url(images/body.jpg);
height:460px;
text-align:left;	
z-index:0;
}

#footer {
position:relative;
width:940px;
background-image:url(images/footer.png);
height:100px;
text-align:center;
}

Edited January 31, 201214 yr by AblazeRich

Could the 'Float' elements be affecting it?

Ok, I've seemed to have sorted it somehow (don't know if this was a good way to do it or not?), by juggling the way I've nested the DIV's differently.

 

<body>
<div id="wrapper">

<div id="head"></div>

   <div id="contentwrap">
       <div id="hero">	
          <div id="pod1"></div>
          <div id="pod2"></div>
          <div id="pod3"></div>
          <div id="feature"></div>
   	</div>
       <div id="bodytext">
       Test test test testing test testicles, test test testing test testicles. Test test test testing test testicles, test test testing test testicles. Test test test testing test testicles, test test testing test testicles. Test test test testing test testicles, test test testing test testicles. Test test test testing test testicles, test test testing test testicles. Test test test testing test testicles, test test testing test testicles.
       </div>
   </div>

   <div id="footer"></div>
</div>
</body>
</html>

 

I don't know why, but I've got a funny feeling that this is not a good way to do it. Can anyone see any probs with this?

 

Without meaning to be flippant; I've tried taking the z-index code in and out and I cannot see what it does? It doesn't seem to effect anything? Whats it actually meant to do?

Edited January 31, 201214 yr by AblazeRich

z-index sorts out the layer order, allowing you to overlap images/text/divs. The lower the number the further "back" the layer sits.

 

What css are you using with the last html you posted?

You may be confusing terminology. A float is to enable a div to be side by side with another floated div or to float inside another div with text wrapping around it, not to sit on top of another div.

 

To get one div to sit on top of another (literally, like text over an image) use position: relative; or position: absolute; each with top: ??px; and left: ??px; or right: ??px; sizes to move it over the other div (called a layer) and with a z-index to define which is on top.

Edited January 31, 201214 yr by Wickham

Thanks guys, you're right Wickham, I was confusing the terminology. Sorry about misunderstanding what you were trying to tell me Bomb. I'm trying to get my head around DIV's quite quickly here!

 

But to clarify;

 

So my Pod DIV's are only working because they are inheriting the position: relative; from the Hero DIV?

They are also incased in a wrapper div, I've called #contentwrap, in the HTML.

 

With overlaying DIV's (that make use of the z-index) do they need to be nested within the DIV they are ontop of? How do you arrange the HTML? Can they sit across two DIV's using this technique?

I've got another problem.

I've tried to put some content inside the Hero DIV, and its thrown everything out! (some javascript to cycle through the images)

 

I've tried to use the z-index, but it doesn't seem to do anything. Am I using it wrong?

 

Please help! I've gotta go to my interview first thing!

 

DIV Test link

 

 

<body>
<div id="wrapper">

<div id="head"></div>

   <div id="contentwrap">
       <div id="hero">	
        <a href="javascript:gotoshow()"><img src="images/hero.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)"></a>
	<script language="JavaScript1.1">
       <!--
       var whichlink=0
       var whichimage=0
       var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
       function slideit(){
       if (!document.images) return
       if (ie) document.images.slide.filters[0].apply()
       document.images.slide.src=imageholder[whichimage].src
       if (ie) document.images.slide.filters[0].play()
       whichlink=whichimage
       whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
       setTimeout("slideit()",slidespeed+blenddelay)
       }
       slideit()
       //-->
       </script>
          <div id="pod1"></div>
          <div id="pod2"></div>
          <div id="pod3"></div>
          <div id="feature"></div>
   	</div>
       <div id="bodytext">
           <h1>Renway Executive Hire</h1>
           <p>Renway Executive Hire are a Reading based travel agency who specialise in organising transport for executive travel within the UK. Their 
           biggest client base are corporate clients travelling to and from airports, major international railway stations and seaports.</p>
           <p> They provide 
           chauffer driven cars, minibuses, car hires and even corporate internal flight bookings.</p>

       </div>
   </div>

   <div id="footer"></div>
</div>
</body>

 

CSS

body {
       text-align:center;
	background-image:url(images/background.jpg);
}

h1 {
font-family:Times New Roman, Times, serif;
font-size:18pt;
font-weight:bold;
color:#5d5d5d;
}

p {
font-family:Arial, Helvetica, sans-serif;
font-size:13pt;
font-weight:normal;
color:#5d5d5d;
}

#wrapper {
       margin: 0 auto;
       width: 940px;
       text-align:left;
	background-color:#CCC;
	height:990px;
}

#head {
position:relative;
width:940px;
background-image:url(images/header.png);
height:120px;
text-align:center;
}

#hero {
position:relative;
width:940px;
background-image:url(images/hero.jpg);
height:320px;
text-align:center;
z-index:0;
}

#pod1 {
margin:0px 0px 0px 0px;
position:inherit;
width:200px;
top:270px;	
left:25px;
background-image:url(images/pod1.png);
height:250px;
float:left;
z-index:1;
}

#pod2 {
margin:0px 0px 0px 0px;
position:inherit;
width:200px;
top:270px;
left:55px;
background-image:url(images/pod2.png);
height:250px;
float:left;	
z-index:1;
}

#pod3 {
margin:0px 0px 0px 0px;
position:inherit;
width:200px;
top:270px;
left:85px;
background-image:url(images/pod3.png);
height:250px;
float:left;
z-index:1;
}

#feature {
margin:0px 0px 0px 0px;
position:inherit;
width:230px;
top:270px;
left:110px;
background-image:url(images/feature.jpg);
height:510px;
float:left;
z-index:1;
}

#contentwrap{
position:relative;
width:940px;
background-image:url(images/body.jpg);
background-position:bottom;
height:780px;
text-align:left;
float:none;
}

#bodytext {
position:relative;
top:30px;
width:630px;
height:300px;
padding: 0px 0px 0px 35px;
text-align:left;
float:none;
}

#footer {
position:relative;
width:940px;
background-image:url(images/footer.png);
height:100px;
text-align:center;
}

How do you know what type of CSS your using? Isnt it set by the browser?

How do you know what type of CSS your using? Isnt it set by the browser?

 

You're going to have to clarify what you are asking. CSS is a styling language that remains the same regardless of which browser you use. The way browsers render various CSS rules is what changes.

I haven't looked at your code in deatail, but if you want three divs to sit partly or completely over another div, first create a container div with position: relative with a size enough for everything to go in it and make sure that div is in the correct place in the flow of you page. Then use position: absolute; for all the divs inside, the big one with the X and the three small ones that are partly over it, positioning them all with top: ??px; and left: ??px; or right: ??px and apply z-index as appropriate. That's the general principle I would use although there are lots of ways to skin a cat and you could use position: relative for the three divs with a negative margin-top to raise them up over the big div.

Thanks Wickham, thats worked! Excellent