Box Float

Question

zobadof -7 Junior Poster

12 Years Ago

Hello,

I am designing a new website, but have had a few issues. Most of which get resolved instantly because of DaniWeb's great members! The next issue is with boxes and CSS. I am trying to get the boxes; http://galgal.org.uk/ to go next to each (with some spacing) so I can have it looking nice rather than a complete and horrible mess. The website is very much under construction so I do not want reviews. Please help me fix this issue, I want the "Text" box then the Images boxes (One underneath each other) and then another box for a totalizer on the same row.

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="5FC6FA" >
   <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="SmashLeaks"><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">
       
         </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: -69px; 
top: -25px; 
}

#marquee{
margin:50px 0 60px 0;
position: relative;
}
 
#SmashLeaks{
z-index: 1;
position: absolute;
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;
}

web-design

2 Contributors
5 Replies
96 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by zobadof

All 5 Replies

teedoff 3 Posting Pro

12 Years Ago

Dont keep posting all your code if you provide a link! We can see ALL your html and css through your link.

You issue seems resolved? The boxes are floated next to each other correct?

Also in your last thread, it was suggested that you do some actually learning of some basic coding principles and standards. I take it you havent done this? It really would be very beneficial for you to do some learning on your own. These questions you have are very basic coding problems.

Edited 12 Years Ago by teedoff because: n/a

teedoff 3 Posting Pro

12 Years Ago

I have no idea what you're talking about..."slider where the image of the boys are"

You want the slider to sit where the three boxes are? It cant without moving/removing the boxes.

Also, if you ask a question and ppl are in the process of trying to help and answer thoat question, then you say "oh nevermind I want a slider instead", ppl are going to stop helping you and wasting their time!

Reply to this topic

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.

zobadof -7 Junior Poster · Answer 1 · 2012-02-20T20:04:15+00:00

Hello,

I am now trying to have a slider instead. Will keep you updated. I know basic CSS and HTML as I have a book

zobadof -7 Junior Poster · Answer 2 · 2012-02-20T20:59:43+00:00

I am trying to get the slider where the image of the boys are. However, its not working.

zobadof -7 Junior Poster · Answer 3 · 2012-02-20T21:17:42+00:00

I made the decision yesterday. Okay. If you're willing to help, there is a black box. That is the slider with no images in at the moment. The two images next to the box with "Test" in it are the images and others that will go in the slider. To replace the images the intention is to have a box either side of the slider underneath of the marquee. I hope that makes sense, sorry for any confusion.

Thanks again!

Box Float

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers