Basically I am pulling data off of mysql and for each field I want a full width horizontal bar wich links off to more details of that item. The bar is styled and I want the border to change on rollover.
[COLOR=red]I have this working fine.[/COLOR]
Now, within the bar I want 4 boxes each with some text in. 3 floating left and 1 right. Mainly for aesthetics.
HTML:
echo "<div class=holder>";
$query = "SELECT * FROM foo";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result))
{
if ($row['Wcolour'] == "Red")
{
$class = "redbox";
}
else if ($row['Wcolour'] == "White")
{
$class = "whitebox";
}
else
{
$class= "box";
}
echo "[COLOR=red]<a class=$class href=".$_SERVER['PHP_SELF']."?id=".$row["id"].">[/COLOR]
[COLOR=red] <div class=left><strong>".$row["Wtitle"]."</strong></div>[/COLOR]
[COLOR=red] <div class=left>".$row["Wsubt"]."</div>[/COLOR]
[COLOR=red] <div class=left>£".$fromprice."</div>[/COLOR]
[COLOR=red] Edit/Delete[/COLOR]
[COLOR=red]</a>[/COLOR]";
}
Main CSS:
[COLOR=darkorange]//set up boxes[/COLOR]
[COLOR=black]a.redbox , a.whitebox , a.rosebox {[/COLOR]
[COLOR=black]display:block;[/COLOR]
[COLOR=black]float:left;[/COLOR]
[COLOR=black]margin: 3px 0;[/COLOR]
[COLOR=black]width: 530px;[/COLOR]
[COLOR=black]height:22px;[/COLOR]
[COLOR=black]line-height:18px;[/COLOR]
[COLOR=black]color:#eeeedd;[/COLOR]
[COLOR=black]text-decoration:none;[/COLOR]
[COLOR=black]font-family:arial, verdana, sans-serif;[/COLOR]
[COLOR=black]text-align:left;[/COLOR]
[COLOR=black]cursor:pointer;[/COLOR]
[COLOR=black]font-size:1.2em;[/COLOR]
[COLOR=black]padding: 5px 5px 2px 5px;[/COLOR]
[COLOR=black]background: #5913c5;[/COLOR]
[COLOR=black]border: 2px solid #5913c5 ;[/COLOR]
[COLOR=black]}[/COLOR]
[COLOR=darkorange]//override colours for other boxes[/COLOR]
a.whitebox {
background: #eed;
border: 2px solid #eed ;
color: #333;
}
a.rosebox {
background: #bba3d5;
border: 2px solid #bba3d5 ;
color: #333;
}
[COLOR=darkorange]//set border colours for hover[/COLOR]
a:hover.redbox {
border: 2px solid #eed ;
}
a:hover .whitebox {
border: 2px solid #5913c5 ;
}
a:hover.rosebox {
border: 2px solid #eed ;
}
The problem I have is with the nested boxes (class left).
Class left CSS:
.left
{
width:auto;
float: left;
clear: none;
margin: 0 5px 0 0;
padding: 0 5px 0 0;
height:auto;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #333333;
background: #0f0; [COLOR=darkorange]//added as an indicator it is working[/COLOR]
}
No matter what I call it, (.left, a.redbox .left etc) I cannot get it recognised and I just get the text one below the other flowing out of the box.
I haven’t even started to sort the right floating box yet.
I am no CSS guru so there are no doubt a few things wrong but can someone tell me how to sort it?
Ascii time!
[FONT=Fixedsys]_________________________________________________[/FONT]
[FONT=Fixedsys]| a.box (rollover) |[/FONT]
[FONT=Fixedsys]| _________ ________ _______ _________ |[/FONT]
[FONT=Fixedsys]||.left | |.left | |.left | |.right | |[/FONT]
[FONT=Fixedsys]|| | | | | | | | |[/FONT]
[FONT=Fixedsys]|| | | | | | | | |[/FONT]
[FONT=Fixedsys]| --------- --------- -------- ---------- |[/FONT]
[FONT=Fixedsys]| |[/FONT]
[FONT=Fixedsys]-------------------------------------------------[/FONT]
EDIT: Obviously I meant DIVS in the title not dive