Log in

View Full Version : Layout


HabboListenFM
26-01-2010, 02:31 PM
Can someone plese help me with this layout i have made. I cant get the content box to go next to the other box's on the left. I know this is so simple to fix but i really cant do it -.-'



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ilkeston Town » Your town » Your views </title>
<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />
<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="chromejs/chrome.js">

/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
</head>

<body bgcolor="#a5cdf3">
<center><img src="images/banner.png"/><br><br><br>
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#" rel="dropmenu1">News</a></li>
<li><a href="#" rel="dropmenu2">History</a></li>
<li><a href="#" rel="dropmenu3">Gallery</a></li>
<li><a href="#" rel="dropmenu4">Radio</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Ilkeston News</a>
<a href="http://www.cssdrive.com">Derbyshire News</a>
<a href="http://www.javascriptkit.com">National News</a>
<a href="http://www.codingforums.com">Local Travel News</a>
<a href="http://www.javascriptkit.com/jsref/">Local Weather</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>

<div id="dropmenu4" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Ilkeston News</a>
<a href="http://www.cssdrive.com">Derbyshire News</a>
<a href="http://www.javascriptkit.com">National News</a>
<a href="http://www.codingforums.com">Local Travel News</a>
<a href="http://www.javascriptkit.com/jsref/">Local Weather</a>
</div>


<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script></center>
<br>
<table cellspacing="0" cellpadding="0">
<tr>
<td><div class="topleft"><font color="white"><center><b>Welcome</b></center></font></div></td>
</tr>
<tr>
<td><div class="midleft"><center>Welcome message here.</center></div></td>
</tr>
<tr>
<td><div class="botleft"></div></td>
</tr>
</table><br>
<table cellspacing="0" cellpadding="0">
<tr>
<td><div class="topleft"><font color="white"><center><b>Radio Player</b></center></font></div></td>
</tr>
<tr>
<td><div class="midleft"><center>Radio player here.</center></div></td>
</tr>
<tr>
<td><div class="botleft"></div></td>
</tr>
</table><br>
<table cellspacing="0" cellpadding="0">
<tr>
<td><div class="topleft"><font color="white"><center><b>Advertisment</b></font></center></div></td>
</tr>
<tr>
<td><div class="midleft"><center>Advertisment here.</center></div></td>
</tr>
<tr>
<td><div class="botleft"></div></td>
</tr>
</table><br>
<table cellspacing="0" cellpadding="0">
<tr>
<td><div class="topleft"><font color="white"><center><b>Not sure</b></center></font></div></td>
</tr>
<tr>
<td><div class="midleft"><center>Not sure what will go here.</center></div></td>
</tr>
<tr>
<td><div class="botleft"></div></td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" align="right" valign="top">
<tr>
<td><div class="topright"><center><font color="white"><b>Content</b></font></center></div></td>
</tr>
<tr>
<td><div class="midright"></div></td>
</tr>
<tr>
<td><div class="botright"></div></td>
</tr>
</table>
</body>
</html>



I have added the code in for anyone who can help and also there is the preview attached.

Thank you all for your help!
Recursion
26-01-2010, 02:35 PM
Use CSS to float the content right and then float the smaller boxes right.

I don't understand how you have ID'd your DIVs so I can't do it for you :P
HabboListenFM
26-01-2010, 02:58 PM
yes maybie i should have added the css style in as well xD



body, html {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

}

.topleft {

width: 200px;

height: 24px;

background-image: url("images/Topleft.png");

}

.midleft {

width: 200px;

height: auto;

background-image: url("images/midleft.png");

}

.botleft {

width: 200px;

height: 6px;

background-image: url("images/botleft.png");

}

.topright {

width: 762px;

height: 24px;

background-image: url("images/topright.png");

}

.midright {

width: 762px;

height: auto;

background-image: url("images/midright.png");

}

.botright {

width: 762px;

height: 6px;

background-image: url("images/botright.png");

}
Recursion
26-01-2010, 03:43 PM
I'm going to assume these are the right DIVs, I can't tell very easily by your code but..



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ilkeston Town » Your town » Your views </title>
<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />
<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="chromejs/chrome.js">

/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
</head>

<body bgcolor="#a5cdf3">
<center><img src="images/banner.png"/><br><br><br>
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#" rel="dropmenu1">News</a></li>
<li><a href="#" rel="dropmenu2">History</a></li>
<li><a href="#" rel="dropmenu3">Gallery</a></li>
<li><a href="#" rel="dropmenu4">Radio</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Ilkeston News</a>
<a href="http://www.cssdrive.com">Derbyshire News</a>
<a href="http://www.javascriptkit.com">National News</a>
<a href="http://www.codingforums.com">Local Travel News</a>
<a href="http://www.javascriptkit.com/jsref/">Local Weather</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>

<div id="dropmenu4" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Ilkeston News</a>
<a href="http://www.cssdrive.com">Derbyshire News</a>
<a href="http://www.javascriptkit.com">National News</a>
<a href="http://www.codingforums.com">Local Travel News</a>
<a href="http://www.javascriptkit.com/jsref/">Local Weather</a>
</div>


<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script></center>
<br>
<table cellspacing="0" cellpadding="0">
<div id="side_wrapper">
<tr>
<td><div class="topleft"><font color="white"><center><b>Welcome</b></center></font></div></td>
</tr>
<tr>
<td><div class="midleft"><center>Welcome message here.</center></div></td>
</tr>
<tr>
<td><div class="botleft"></div></td>
</tr>
</table><br>
<table cellspacing="0" cellpadding="0">
<tr>
<td><div class="topleft"><font color="white"><center><b>Radio Player</b></center></font></div></td>
</tr>
<tr>
<td><div class="midleft"><center>Radio player here.</center></div></td>
</tr>
<tr>
<td><div class="botleft"></div></td>
</tr>
</table><br>
<table cellspacing="0" cellpadding="0">
<tr>
<td><div class="topleft"><font color="white"><center><b>Advertisment</b></font></center></div></td>
</tr>
<tr>
<td><div class="midleft"><center>Advertisment here.</center></div></td>
</tr>
<tr>
<td><div class="botleft"></div></td>
</tr>
</table><br>
<table cellspacing="0" cellpadding="0">
<tr>
<td><div class="topleft"><font color="white"><center><b>Not sure</b></center></font></div></td>
</tr>
<tr>
<td><div class="midleft"><center>Not sure what will go here.</center></div></td>
</tr>
<tr>
<td><div class="botleft"></div></td>
</tr>
</div>
</table>
<table cellspacing="0" cellpadding="0" align="right" valign="top">
<div id="content_wrapper">
<tr>
<td><div class="topright"><center><font color="white"><b>Content</b></font></center></div></td>
</tr>
<tr>
<td><div class="midright"></div></td>
</tr>
<tr>
<td><div class="botright"></div></td>
</tr>
</div>
</table>
</body>
</html>




#content_wrapper {
float: right;
}
#side_wrapper {
float: left;
}


I think that should work.
HabboListenFM
26-01-2010, 03:55 PM
I have just tried that but it didnt work im not really sure why i didnt cus it makes sense to me lol Thanks anyway :)
Recursion
26-01-2010, 03:59 PM
Try this CSS code, if it doesn't work then you either need to work out dimensions for the wrapper or I'm as bad I think as XHTML/CSS :P


#content_wrapper {
position: relative;
float: right;
}
#side_wrapper {
position: relative;
float: left;
}

</span></span>
LMS16
26-01-2010, 05:46 PM
Make sure the dimentions are correct, this could cause that problem, if not make the box divs float left and also the content div float left, thts how i do it :)

Lew.
HabboListenFM
26-01-2010, 10:21 PM
Ok i tried adding the code to the css file and also onto the actual index file as css. But its still not working :( what am i doing wrong?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ilkeston Town » Your town » Your views </title>
<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="txt/css">
#content_wrapper {

position: relative;

float: left;

}

#side_wrapper {

position: relative;

float: left;
}
</style>

<script type="text/javascript" src="chromejs/chrome.js">

/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
</head>

<body bgcolor="#a5cdf3">
<center><img src="images/banner.png"/><br><br><br>
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#" rel="dropmenu1">News</a></li>
<li><a href="#" rel="dropmenu2">History</a></li>
<li><a href="#" rel="dropmenu3">Gallery</a></li>
<li><a href="#" rel="dropmenu4">Radio</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Ilkeston News</a>
<a href="http://www.cssdrive.com">Derbyshire News</a>
<a href="http://www.javascriptkit.com">National News</a>
<a href="http://www.codingforums.com">Local Travel News</a>
<a href="http://www.javascriptkit.com/jsref/">Local Weather</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>

<div id="dropmenu4" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Ilkeston News</a>
<a href="http://www.cssdrive.com">Derbyshire News</a>
<a href="http://www.javascriptkit.com">National News</a>
<a href="http://www.codingforums.com">Local Travel News</a>
<a href="http://www.javascriptkit.com/jsref/">Local Weather</a>
</div>


<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script></center>
<br>
<table cellspacing="0" cellpadding="0">
<div id="side_wrapper">
<tr>
<td><div class="topleft"><font color="white"><center><b>Welcome</b></center></font></div></td>
</tr>
<tr>
<td><div class="midleft"><center>Welcome message here.</center></div></td>
</tr>
<tr>
<td><div class="botleft"></div></td>
</tr>
</table><br>
<table cellspacing="0" cellpadding="0">
<tr>
<td><div class="topleft"><font color="white"><center><b>Radio Player</b></center></font></div></td>
</tr>
<tr>
<td><div class="midleft"><center>Radio player here.</center></div></td>
</tr>
<tr>
<td><div class="botleft"></div></td>
</tr>
</table><br>
<table cellspacing="0" cellpadding="0">
<tr>
<td><div class="topleft"><font color="white"><center><b>Advertisment</b></font></center></div></td>
</tr>
<tr>
<td><div class="midleft"><center>Advertisment here.</center></div></td>
</tr>
<tr>
<td><div class="botleft"></div></td>
</tr>
</table><br>
<table cellspacing="0" cellpadding="0">
<tr>
<td><div class="topleft"><font color="white"><center><b>Not sure</b></center></font></div></td>
</tr>
<tr>
<td><div class="midleft"><center>Not sure what will go here.</center></div></td>
</tr>
<tr>
<td><div class="botleft"></div></td>
</tr>
</div>
</table>

<table cellspacing="0" cellpadding="0">
<div id="content_wrapper">
<tr>
<td><div class="topright"><center><font color="white"><b>Content</b></font></center></div></td>
</tr>
<tr>
<td><div class="midright"></div></td>
</tr>
<tr>
<td><div class="botright"></div></td>
</tr>
</div>
</table>
</body>
</html>




body, html {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

}

.topleft {

width: 200px;

height: 24px;

background-image: url("images/Topleft.png");


}

.midleft {

width: 200px;

height: auto;

background-image: url("images/midleft.png");


}

.botleft {

width: 200px;

height: 6px;

background-image: url("images/botleft.png");


}

.topright {

width: 762px;

height: 24px;

background-image: url("images/topright.png");


}

.midright {

width: 762px;

height: auto;

background-image: url("images/midright.png");

}

.botright {

width: 762px;

height: 6px;

background-image: url("images/botright.png");

}


Thank you both for all your help and to anyone else who decides to help.
HabboListenFM
27-01-2010, 08:59 AM
Make sure the dimentions are correct, this could cause that problem, if not make the box divs float left and also the content div float left, thts how i do it :)

Lew.

I tried making them both float left and it still wont go next to the box's :s
HabboListenFM
27-01-2010, 11:35 AM
oh yay i did it :P Thank you for your help guys/girls! Plus rep to all three of you (if it lets me, sorry is it doesnt.)



#sidebar {
float: left;
width: 200px;
border: 0px dashed #F5E0B7;
margin-bottom: 0px;
margin-right: 10px;
}

#content {
float: right;
width: 762px;
margin-left: 5px;
}

Want to hide these adverts? Register an account for free!