Very Slight Problem with my code

Zenax

Zenax

Active Member
Messages
1,377
Reaction score
4
Points
38
OK, so I have racked my brains about this, and what ever I do to try and fix the problem, it won't work. I even tried running it through the w3c validator!

My problem, is that the border will not stretch round all the divs, and I believe its something to do with the css but I have no idea what.

It has something to do with the fact that the height of the small box divs is not stretching the main div so the border won't go around it.

http://sapiencreations.x10hosting.com/new_improved/

Please help, so I can get on with finishing this layout for my friend.

Regards,
Zenax
 
sambosch

sambosch

New Member
Messages
45
Reaction score
0
Points
0
Code: 
<!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=iso-8859-1" />
<title>New</title>

<style>

body
{
margin: 0px;
}

.main
{
border: 1px solid #000000;
height: 100%;
width: 600px;
font-size: 10px;
font-family: Tahoma;
margin-left: 200px;
}

.indent
{
margin: 2px;
}

#slogan
{
background-color: #003399;
color: #FFFFFF;
font-weight: bold;
width: 600px;
font-family: Tahoma;
font-size: 12px;
}

#logo
{
height: 150px;
width: 600px;
border-bottom: 1px solid #000000;
}

#sitenav
{
background-color: #DEDEDE;
width: 600px;
border-bottom: 1px solid #000000;
}

a#nav, a#nav:visited
{
color: #FF0000;
text-decoration:underline;
}

a#nav:hover
{
color: #0000FF;
text-decoration: none;
}

.smallbox1
{
width: 200px;
background-color: #FFFFFF;
height: 200px;
border-right:1px solid black;
padding:5px;
}
.smallboxend
{
width: 200px;
background-color: #FFFFFF;
height: 200px;
padding:5px;
}

#content
{
width: 600px;
}
</style>


</head>

<body>

<div class="main">

    <div id="slogan">
    
        <div align="right">
        
            <div class="indent"> 
        
                Creating Games You Love...
                
            </div>
        
        </div>
    
    </div>
    
    <div id="logo">
    
    <!-- Place Logo Here Please -->
    
    </div>
    
    <!-- NAVIGATION -->
    <div id="sitenav">
    
    <div class="indent">
    
    <div align="center">
        
    <a href="#" id="nav">Home</a> &nbsp; | &nbsp; <a href="#" id="nav">Contact Us</a> &nbsp; | &nbsp; <a href="#" id="nav">About Us</a>
    </div>
    
    </div>
    
    </div>
    <!-- END NAVIGATION -->

<div>
 <table cellspacing="0" cellpadding="0" border="0">
   <tr>
    
<td valign="top" class="smallbox1">
      <b>Latest News:</b>
        <br />
        Well, a new layout is in place, having a few problems with it! Should be sorted soon!
        </td>
        
<td valign="top" class="smallbox1">
        <b>Lastest Downloads:</b>
        <br />
        None available yet, will be soon!
        </td>

<td valign="top" class="smallboxend">
        <b>Login:</b>
        <form>
        <input type="text" value="Username" maxlength="20" />
        <br />
        <br />
        <input type="password" value="password" maxlength="20" />
        <br />
        <input type="button" value="Login" />
        </form>
        </td>

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

</body>
</html>

I think the above code solved the problem.
I tested it on Firefox and IE.
Plus added some padding for ur small boxes

Hope that helps
Enjoy
 
Zenax

Zenax

Active Member
Messages
1,377
Reaction score
4
Points
38
Yeah thats what I want however I want it coded in divs not tables

thanks for the help anyway

Regards,
Zenax
 
Zenax

Zenax

Active Member
Messages
1,377
Reaction score
4
Points
38
Thing is, it works all fine and dandy in tables, but I code my layouts in divs, and when the layout is done like that it don't work, so thats the problem.

Regards,
Zenax
 
You must log in or register to reply here.
Top