Hello,

I am designing a website and need a bit of help. The URL is http://galgal.org.uk . However, I try to get the SmashLeaks logo to go over the top of the marquee, above where it is so it looks like it's coming out of the logo (Colour will be changed later).

The HTML Code Looks Like This:

<html>

 <head>
 <title>Give a Little, Get a Lot!</title>
 <link rel="stylesheet" href="style.css" type="text/css" />
 </head>

  <body>

 <br >

  <div id="marquee" >
        <div id="marq" >
 <marquee behaviour="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" ><font color="white" face="Arial"> This is a Simple Marquee. Hover Over Me!</font></marquee>
 <div align="right">
  <a href="index.html" ><img src="images/SmashLeaks.png" height="150" width="250"/></a>

    </div>
   </div>
  </div>

 <br >

  
 
 <br >

   

   </body>

</html>

and my style.css is this:

body {
background-image:url('images/background.jpg');}

#marquee{
margin-top: 6px;
position: relative;
}

#marq {
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #929292;
background-color: #9D97B8;
width: 1330px;
height: 18px;
padding: 2px 5px;
color: #f0f0f0;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
}

Let me know how to fix this issue please! :)

Recommended Answers

All 24 Replies

Do you want the marquee text to go under or over the logo? The only way i can think of is to actually draw the logo over the marquee background in photoshop, then using css, set that image as the background of the div you want to contain the marquee and the logo.

You can do that using this code in your css,

background-image: url(images/yourimage.png);
background-repeat: no-repeat;

If this is the way you are going to choose, make sure you use a png, and set it against a transparent background in Photoshop.

You probably will have to do this, as you cannot set divs over divs.
thanks,
Adam

You probably will have to do this, as you cannot set divs over divs.

Actually thats what postioning and z-index attributes are made for.

You can do this with your current markup, but you'd have to change a few other things as well

CSS

I gave your logo and smashleaks id's logo and logo1. Then used position absolute on smashleaks to bump it over the logo.

body {
background-image:url('images/Background.jpg') ;
}

#header{
position: relative;
background-color: #bbbbbb;
border-bottom: 6px solid #bbbbbb;
}

#logo {position:absolute; top:10px; left:350px;}
#logo2 {margin-top: 70px}

#main{
font-family: sans-serif;
width: 1000px;
border: 5px solid #FFFBFA;
margin: 20px auto 0 auto;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
color: #bbbbbb;
background-color: #1165BA;
}

#marquee{
margin-top: 6px;
position: relative;
}

#marq{
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #000000;
background-color: #E65A2C;
width: 988px;
height: 18px;
padding: 2px 5px;
color: #f0f0f0;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
}


#African1 { 
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
border: 2px solid #000000;
background-color: #E65A2C;
width: 270px;
height: 180px;
padding: 2px 5px;
color: #f0f0f0;
font-size: 14px;
text-transform: uppercase;
background-image:url('images/African1.jpg') ;
font-weight: 700;
margin-right: 0.1in;
}

#African2 { 
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
border: 2px solid #000000;
background-color: #E65A2C;
width: 270px;
height: 180px;
padding: 2px 5px;
color: #f0f0f0;
font-size: 14px;
text-transform: uppercase;
background-image:url('images/African2.jpg') ;
font-weight: 700;
margin-right: 0.1in;
}







#footer{
font-size: 12px;
background-color: #FF0000;
color: #FFFFFF;
padding: 5px;
text-align: center;
}

Mark Up

<div id="main">

 <div id="header">
   
  
 </div>

 <br>

 <a href="index.html"><img id="logo2" src="images/galgal.png"></a>

 <a href="http://www.smashleaks.co.uk"><img id="logo" src="http://a3.twimg.com/profile_images/1709604664/SmashLeaks.png" height="150" width="250"></a>
  
  <div id="marquee">
        <div id="marq">
 <marquee behaviour="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();"><font color="white" face="Arial"> Update: colours are yet to change!  </font></marquee>
   
    </div>
   </div>

 <br>

    <div align="right"><div id="African1">
    </div>
 <br>
    <div align="right"><div id="African2">
    </div> </div> 

 <br><br><br>

  
<div id="footer">
				© Copyright Give a Little, Get a Lot!

			</div>
                      </div>
                    </div>

btw: you need to specify a valid doctype if you expect cross browser compliance.

Hey look at the site now. I coped your coding and put them in the right place. When you look you'll see it wrecks it.

if i understood correctly what you are trying to do, here is the simple css you can add to make it happen (result shown in attached file)

#marquee{
margin:50px 0 60px 0;
position: relative;
}

#logo2{
position: absolute;
z-index: 1;
}
commented: Helpful and the code changed it! :) +3

How do I have it to the right

How do I have it to the right

#logo2{
position: absolute;
z-index: 1;
right: 135px; //ish
}

That's that issue. As you can see the images of the Africian children and the "Text" are on different lines. I want it so I can have them all on the same line by floating. But I'm not sure how.

HTML:

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//ENS"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <title>Give a Little, Get a Lot!</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css" />
  
 </head>

  <body id="body" bgcolor="D6D0D0" >
   <div id="main">

 <div id="header">
  
 </div>

 <br >

 <div id="logo"><a href="index.html" ><img src="images/galgal.png" ></a></div>

 <div id="logo2"><a href="http://www.smashleaks.co.uk" ><img src="http://a3.twimg.com/profile_images/1709604664/SmashLeaks.png" height="150" width="250"/></a></div>
  
  <div id="marquee" >
        <div id="marq" >
 <marquee behaviour="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" ><font color="white" face="Arial"> Update: (Name) - (£Amount) | (Name) - (£Amount)</font></marquee>
   
    </div>
   </div>

 <br >

  <div id="Welcome">
   <p>Test</p>
  </div>

 <br >

    <div align="center"><div id="African1">
    </div>
 <br >
    <div align="center"><div id="African2">
    </div> </div> 

 <br ><br ><br >

  
<div id="footer">
				&copy; Copyright Give a Little, Get a Lot!
 
			</div>
                      </div>
                    </div>
 <br ><br >
   </body>

</html>

CSS:

body {
}

#header{
position: relative;
background-color: #bbbbbb;
border-bottom: 6px solid #bbbbbb;
}


#main{
font-family: sans-serif;
width: 1000px;
border: 5px solid #FFFBFA;
margin: 20px auto 0 auto;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
color: #bbbbbb;
background-color: #1165BA;
}

#marquee{
margin:50px 0 60px 0;
position: relative;
}
 
#logo2{
position: absolute;
z-index: 1;
right: 170px; 
}

#marq{
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #000000;
background-color: #E65A2C;
width: 988px;
height: 18px;
padding: 2px 5px;
color: #f0f0f0;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
}

#Welcome { 
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
border: 2px solid #000000;
background-color: #E65A2C;
width: 300px;
height: 250px;
padding: 2px 5px;
color: #f0f0f0;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
margin-left: 0.1in;
}

#African1 { 
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
border: 2px solid #000000;
background-color: #E65A2C;
width: 270px;
height: 170px;
padding: 2px 5px;
color: #f0f0f0;
font-size: 14px;
text-transform: uppercase;
background-image:url('images/African1.jpg') ;
font-weight: 700;
margin-right: 0.1in;
}

#African2 { 
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
border: 2px solid #000000;
background-color: #E65A2C;
width: 270px;
height: 170px;
padding: 2px 5px;
color: #f0f0f0;
font-size: 14px;
text-transform: uppercase;
background-image:url('images/African2.jpg') ;
font-weight: 700;
margin-right: 0.1in;
}






#footer{
font-size: 12px;
background-color: #FF0000;
color: #FFFFFF;
padding: 5px;
text-align: center;
}

I want to have a text box then images then another text box for example on the same line but with gaps if that makes sense. Cheers!

Hey look at the site now. I coped your coding and put them in the right place. When you look you'll see it wrecks it.

No my code worked fine. If you added a doctype it may have mis-aligned some elements, but thats easily fixed. You still need a doctype.

I fixed the marquee issue. I need the boxes on the same line so I have 3 boxes in a row on 2 lines if that makes sense. Any help?

I also need it so the Donation Sticker looking thing is over the corner of the head on the right. And also so that the boxes are in line with the SmashLeaks logo and that they don't just splatter all over the page as they are doing now.

You dont really need those images as background images in a div nested in another div. Thats a bit redundant as <img> tag thenselves are block level elements. You could just set them as images with the <im> tag, then float them left.

That has confused me completely. Do you know how to put the donate sticker over it, if so could you write the code and I'll throw it in. Sorry I'm not the best at CSS by a long shot!

Hi zobadof,

I've made the page look very similar to the PNG example you posted. Here's the code I used to do it.

#main { position: relative; }
#marq { width: 752px; }
#logo2 { right: 0; top: 127px; }
#donate { position: absolute; right: -70px; top: -35px; opacity: 0.5; }

May I ask, are you new to HTML/CSS? The practices you are using (position everything, outdated tags, freaking marquees, etc.) is really what stagnated the web for a long time. IF you plan to make a living from web designing you should really try to look up modern HTML practices.

I'm new to CSS but not HTML. I do not intend to make money as its a charity thing..

Cheers for that. When I zoom/out it all messes up, any idea's? The whole site comes out of shape. Let me know.

Cheers for that. When I zoom/out it all messes up, any idea's? The whole site comes out of shape. Let me know.

Yea, it's because of all the positioning you used. HTML should come as naturally free-flowing as possible to ensure that DOES NOT happen.

My advice? Re-work the site without constantly setting position everywhere.

So I just checked your site after applying MY RECOMMENDED CSS CHANGES and the site fully functions. The problem is you haven't applied everything I mentioned above (in my first post in this thread). One of my monitors is 2048x1152 and the site looks perfect in it and if I resize it to take up half my monitor (or a third, or a fourth), it stills works PERFECT.

APPLY ALL THE CHANGES I LISTED ABOVE!

I used what you said. The other stuff messed it all up and moved things around everywhere. Can you please send the CSS / HTML file as a full with your code included. That'll be easier I think.

Cheers!

Ignore that last post. Fixed it now, cheers for that mate! Had to modify the code a little not an issue. Right next problem.

Boxes. I have the "Text" box and then the two images boxes. I know the <div align="center"> needs to go but I put that there for a rough idea. How do I get the boxes to all go next to each other?

HTML:

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//ENS"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <title>Give a Little, Get a Lot!</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css" />
  <style type="text/css">
    <!--
    img { border: none; }
    -->
  </style>
 </head>

  <body id="body" bgcolor="D6D0D0" >
   <div id="main">

 <div id="header">

  <div align="left"><img src="images/galgal.png" height="95" width="220" >
 </div></div>

 <br >


 <div id="logo"><a href="index.html" ></a></div>
 
 <br >

 <div id="logo2"><a href="http://www.smashleaks.co.uk" ><img src="http://a3.twimg.com/profile_images/1709604664/SmashLeaks.png" height="150" width="250"/></a></div>
  
  <div id="marquee" >
                    <div id="marq" >
 <marquee behaviour="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" ><font color="white" face="Arial"> this website is under construction</font></marquee>
   
    </div>
   </div>

 <br >

  <div id="Welcome">
   <p>Test</p>
  </div>

 <br >

    <div align="center"><div id="African1">
    </div>
 <br >
    <div align="center"><div id="African2">
    </div> </div> 
    
    <div id="donate"><img src="images/Donate.png" ></div>

 <br ><br ><br >

       <div id="extra">
        <br ><br ><br ><br >
         </div>
  
                         <div id="footer">
				&copy; Copyright Give a Little, Get a Lot!
 
			</div>
                      </div>
                    </div>
 <br ><br >
   </body>

</html>

CSS:

body {
}

#header{
position: relative;
background-color: #bbbbbb;
border-bottom: 6px solid #bbbbbb;
text-align: center;
margin-top: 0.05in;
margin-left: 0.05in;
margin-right: 0.05in;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}

#main{
font-family: sans-serif;
width: 1000px;
border: 5px solid #FFFBFA;
margin: 20px auto 0 auto;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
color: #bbbbbb;
background-color: #1165BA;
position: relative; 
}

#donate { 
position: absolute; 
right: -70px; 
top: -25px; 
}

#marquee{
margin:50px 0 60px 0;
position: relative;
}
 
#logo2{
position: absolute;
z-index: 1;
right: 2; 
top: 135px;
}

#marq{
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
border: 1px solid #000000;
background-color: #E65A2C;
width: 800px;
height: 18px;
padding: 2px 5px;
color: #f0f0f0;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
margin-left: 0.1in;
}

#Welcome { 
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
border: 2px solid #000000;
background-color: #E65A2C;
width: 300px;
height: 250px;
padding: 2px 5px;
color: #f0f0f0;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
margin-left: 0.1in;
}

#African1 { 
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
border: 2px solid #000000;
background-color: #E65A2C;
width: 250px;
height: 170px;
padding: 2px 5px;
color: #f0f0f0;
font-size: 14px;
text-transform: uppercase;
background-image:url('images/African1.jpg') ;
font-weight: 700;
margin-right: 0.1in;
}

#African2 { 
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
border: 2px solid #000000;
background-color: #E65A2C;
width: 250px;
height: 170px;
padding: 2px 5px;
color: #f0f0f0;
font-size: 14px;
text-transform: uppercase;
background-image:url('images/African2.jpg') ;
font-weight: 700;
margin-right: 0.1in;
}

#extra{
font-size: 12px;
background-color: #D6D0D0;
color: #FFFFFF;
padding: 5px;
text-align: center;
}

#footer{
font-size: 12px;
background-color: #C9C1C1;
color: #000000;
padding: 5px;
text-align: center;
}

Thanks and let me know. I want them to be in line with the Smash Leaks logo and for the SL logo not to "bar" them from going near it. :)

I used what you said. The other stuff messed it all up and moved things around everywhere. Can you please send the CSS / HTML file as a full with your code included. That'll be easier I think.

Cheers!

Sure. I'll give you my file in two minutes.

EDIT: Your site appears to be working fine...what exactly is the problem? Is it an IE problem?

EDIT2: It's an IE problem only, right? If so, it's because you have to use px when using positioning.

In your style.css file, under #logo2, you've set the following style:

#logo2 { right: 2; }

and here's what it should be:

#logo2 { right: 2px; }

Hey. The IE Issue (Blue Box) was fixed. The Zoom In/Out issue is fixed. The logo over marquee is fixed. The donate picture over side is fixed. I need to fix the boxes though. As they're not going in a line, they're going on different lines. I know its about floating but not sure the exact code or where to put it. I've put <div align="center"> on the African1 and Africian2 because I wanted to see what its like. I will remove this as obviously the CSS Float should do the trick.

Let me know!

Hmm. Not had a reply for a long time. No help? The boxes need floating but this is puzzling me. Been trying different things all day and nothing works (Obviously removing the <div align="center"> first)!

Let me know

Hmm. Not had a reply for a long time. No help? The boxes need floating but this is puzzling me. Been trying different things all day and nothing works (Obviously removing the <div align="center"> first)!

Let me know

Hi zobadof,

After reading your last two posts, I feel like I need to give you a lecture in being thankful for whatever help you do get -- rather than pushing for more through manipulative comments (ie. "haven't had a reply in a long time") -- because right now it seems you want Daniweb members to do the site for you. If so, that's fine but please list a price you are willing to pay. Secondly, have you looked at any HTML/CSS sites to learn modern practices (as I mentioned before)? I doubt you have and your page structure is a huge mess to work with at the moment. Consider going to http://css-tricks.com/ and learning about how to layout a web page rather than "winging it" and coming up with the atrocity you've come up with.

I spent the last fifteen minutes re-working your entire page. Don't bother thanking me as I won't jump back to read this (or any) of your future questions for this site. You can continue hacking away at the site and messing it up (thus requiring more questions down the road) or you can take a couple hours out of your day, read up on modern practices, and continue coding a usable (or semi-usable) page.

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//ENS"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Give a Little, Get a Lot!</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			body {
				background: #5FC6FA;
			}
			#main {
				background-color: #1165BA;
			    border: 5px solid #FFFBFA;
			    border-radius: 6px;
			    color: #BBBBBB;
			    font-family: sans-serif;
			    margin: 20px auto 0;
			    position: relative;
			    width: 1000px;
			}
			#header {
				background-color: #BBBBBB;
			    border-bottom: 6px solid #BBBBBB;
			    border-radius: 5px;
			    margin: 5px;
			}
			#logo {
				height: 95px;
				width: 220px;
			}
			#donate {
				position: absolute;
				right: -69px;
				top: -25px;
			}
			#marquee {
				background-color: #E65A2C;
			    border: 1px solid #000000;
			    border-bottom-left-radius: 5px;
			    border-top-left-radius: 5px;
			    color: #F0F0F0;
			    font-size: 14px;
			    font-weight: 700;
			    height: 18px;
			    margin: 0;
			    margin-top: 95px;
			    margin-left: 8px;
			    padding: 2px 5px;
			    text-transform: uppercase;
			    width: 800px;
			}
			#smash-leaks {
				height: 150px;
				position: absolute;
				right: 0;
				top: 140px;
				width: 250px;
			}
			#content {
				margin-top: 100px;
				padding-bottom: 80px;
			}
			#welcome {
				background-color: #E65A2C;
			    border: 2px solid #000000;
			    border-radius: 5px 5px 5px 5px;
			    color: #F0F0F0;
			    float: left;
			    font-size: 14px;
			    font-weight: 700;
			    height: 250px;	
			    margin-right: 8px;		    
			    margin-left: 8px;
			    padding: 2px 5px;
			    text-transform: uppercase;
			    width: 300px;
			}
			#african1 {
				background-color: #E65A2C;
			    background-image: url("http://galgal.org.uk/images/African1.jpg");
			    border: 2px solid #000000;
			    border-radius: 5px 5px 5px 5px;
			    color: #F0F0F0;
			    float: left;
			    font-size: 14px;
			    font-weight: 700;
			    height: 170px;
			    margin-right: 8px;
			    padding: 2px 5px;
			    text-transform: uppercase;
			    width: 250px;
			}
			#african2 {
			    background-color: #E65A2C;
			    background-image: url("http://galgal.org.uk/images/African2.jpg");
			    border: 2px solid #000000;
			    border-radius: 5px 5px 5px 5px;
			    color: #F0F0F0;
			    float: left;
			    font-size: 14px;
			    font-weight: 700;
			    height: 170px;
			    margin-right: 8px;
			    padding: 2px 5px;
			    text-transform: uppercase;
			    width: 250px;
			}
			#footer {
			    background-color: #C9C1C1;
			    border-top: 10px solid #D6D0D0;
			    color: #000000;
			    font-size: 12px;
			    padding: 5px;
			    text-align: center;	
			}
			
			/* special classes */
			.clear { clear: both; }
		</style>
	</head>
	<body>
		<div id="main">
			<div id="header">
				<img src="http://galgal.org.uk/images/galgal.png" id="logo">
				<img src="http://galgal.org.uk/images/Donate.png" id="donate">
			</div>
			<div id="marquee">
				<marquee onmouseout="this.start();" onmouseover="this.stop();" direction="left" behaviour="scroll">this website is under construction</marquee>
				<img src="http://a3.twimg.com/profile_images/1709604664/SmashLeaks.png" id="smash-leaks">
			</div>
			<div id="content">
				<div id="welcome">
					<p>Test</p>
				</div>
				<div id="african1"></div>
				<div id="african2"></div>
				<div class="clear"></div><!-- clear floated elements -->
			</div>
			<div id="footer">				
				&copy; Copyright Give a Little, Get a Lot! 			
			</div>
		</div>
	</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.