PDA

View Full Version : 6 Images 3 colums Help! :(



Obsolete
Jul 18th, 2009, 05:23 PM
Hello there I'm currently new to this forum.

I haven't been doing HTML nor CSS for long. Still a 'noob' so to speak lol.
Anyway my problem is I've got 6 boxes which I'm trying to line into 3 colums.

Below you'll find the HTML and CSS coding so far.
Also an image on what I'm trying to achieve (Current Text is just for show).
To the more experienced coders, the coding will probably look messy, but this is my first thing from scratch :)

Anyway time to show you the fun stuff:

HTML-

<!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>Bassline Fury Online Radio | Enjoy your stay</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {
font-weight: bold;
font-size: 14px;
color: #FFFFFF;
}
a:link {color: #B2DFEE; text-decoration: none; }
a:active {color: #B2DFEE; text-decoration: none; }
a:visited {color: #FF0000; text-decoration: none; }
a:hover {color: #FF0000; text-decoration: underline overline; }
-->
</style>
</head>

<body>
<!--Header Logo-->
<div id="logo"></div>
<!--Header Logo End-->

<!--Players Header-->
<div id="playerhead">
<div align="center" class="style2"><u>Current Supported Players</u></div>
<div id="playerlogos">
<a href="http://94.23.192.221:8046/listen.pls"><img src="images/playerlogos/winamp.png" border="0" /></a>
<img src="images/playerlogos/spacer.png" />
<a href="http://94.23.192.221:8046/listen.asp"><img src="images/playerlogos/windows.png" border="0" /></a>
<img src="images/playerlogos/spacer.png" />
<a href="http://94.23.192.221:8046/listen.pls"><img src="images/playerlogos/real.png" border="0" /></a>
<img src="images/playerlogos/spacer.png" />
<a href="http://94.23.192.221:8046/listen.pls"><img src="images/playerlogos/quick.png" border="0" /></a></div>
</div>
<!--Players Header End-->

<!--Menu-->
<div id="menubar">
<a href="/home" color="#B2DFEE"> Home</a>
<img src="images/spacer2.png" />
<a href="/forum" color="#B2DFEE"> Community</a>
<img src="images/spacer2.png" />
<a href="/home/contactdj" color="#B2DFEE"> Contact DJ</a>
<img src="images/spacer2.png" />
<a href="/home/contactstaff" color="#B2DFEE"> Contact Staff</a>
<img src="images/spacer2.png" />
<a href="/home/login/djlogin.php" color="#B2DFEE"> DJ Login</a>
</div>
<!--Menu-->

<!--Content-->
<!--Status Header-->
<div id="statushead">
<div align="center">
<p class="status1"><strong>Radio Status</strong></p>
</div>
</div>
<!--Status Header End-->
<!--Status BG-->
<div id="statusbg">
<p class="status2"><strong>Current DJ:</strong> MattyG</p>
<p class="status2"><strong>Current Song:</strong> Big Ang - Roses</p>
<p class="status2"><strong>Music Genre:</strong> Bassline House</p>
<p class="status2"><strong>Stream:</strong> 48kbps</p>
<p class="status2"><strong>Current Listeners:</strong> 50</p>
<p class="status2"></p>
</div>
<!--Status BG End-->
<!--Status Footer-->
<div id="statushead">
</div>
<!--Status Footer End-->
<!--DJ Says Header-->
<div id="dj">
</div>
<!--DJ Says Header End-->
<!--Content End-->

</body>
</html>


CSS -
@charset "utf-8";
/* CSS Code by MattyGlover */

*{
padding:0;
margin:0;
}

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/headerbg.png);
background-repeat:repeat-x;
background-color:#FFFFFF;
height:154px;
padding:0;
margin:0;
}

/* HEADER LOGO*/
#logo {
background-repeat:no-repeat;
background-image:url(images/logo.png);
height:154px;
width:353px;
float:left;
}
/* HEADER LOGO END*/

/* PLAYERS HEADER*/
#playerhead {
background-repeat:no-repeat;
background-image:url(images/glossbox.png);
width:262px;
height:100px;
float:right;
padding-top:4px;
margin-top:45px;
margin-right:24px;
}
/* PLAYERS HEADER END*/

/* PLAYER LOGOS*/
#playerlogos {
margin-top:20px;
margin-left:6px;
}
/* PLAYER LOGOS END*/

/* MENU*/
#menubar {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background-image: url(images/menubg.png);
background-repeat:repeat-x;
background-color:#FFFFFF;
height:25px;
padding:8px;
margin-top:154px;
}
/* MENU END*/

/* CONTENT*/
#statushead {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
background-image: url(images/statusheader.png);
background-repeat:no-repeat;
height:27px;
width:240px;
margin-left:5px;
padding-bottom:0px;
}

#statusbg {
background-image: url(images/statusbg.png);
background-repeat:repeat-y;
width:240px;
margin-left:5px;
padding-bottom:0px;
}

.status1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
margin-top:5px;
text-decoration: underline;
}

.status2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin-top:5px;
margin-left:10px;
}

#dj {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
background-image: url(images/djheader.png);
background-repeat:no-repeat;
height:27px;
width:293px;
margin-right:254px;
display:inline;
}
/* CONTENT END*/


Heres it is currently sat on a server http://www.bassline-fury.co.uk/radio
And here is what I'm trying to achieve: http://img339.imageshack.us/img339/5168/basslinefuryradio.png

As you can see on the live demo it's working fine. But when I'm trying to add the Center and right box it just messes up. Goes all over the place.
How can I construct the CSS for it to look like the image (Obviously not by size, but by detail).

Hope you can help and hope this is enough information hehe.
Obsolete :)

(oh and FYI I'm resizing the middle boxes in a slightly bigger width)

brandon1
Jul 18th, 2009, 07:16 PM
Well I started to try to work on this but I ran out of time, so for my sake and anyone else who wants to work on this, here is the link to the editable demo I made of it.

http://www.blendedcodes.com/LnJ1ifX9

I'll try to get on later and work on it if nobody gets to it, hope the link helps tho.

Obsolete
Jul 19th, 2009, 02:56 PM
Thanks for the input. Doe's it look too messy for a first timer? :P

Obsolete
Jul 21st, 2009, 01:14 PM
Bump - I appologise if this is not allowed