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 -.-'
I have added the code in for anyone who can help and also there is the preview attached.PHP Code:<!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>
Thank you all for your help!
Results 1 to 10 of 10
Thread: Layout
-
Layout
-
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
:8
Originally Posted by Chippiewill
-
yes maybie i should have added the css style in as well
PHP Code: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");
}
-
I'm going to assume these are the right DIVs, I can't tell very easily by your code but..
PHP Code:<!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>
I think that should work.PHP Code:#content_wrapper {
float: right;
}
#side_wrapper {
float: left;
}
:8 Originally Posted by Chippiewill
-
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
-
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
</span></span>PHP Code:#content_wrapper {
position: relative;
float: right;
}
#side_wrapper {
position: relative;
float: left;
}
:8 Originally Posted by Chippiewill
-
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.Im not here to be loved, I love to be hated :-}
-
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?
PHP Code:<!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>
Thank you both for all your help and to anyone else who decides to help.PHP Code: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");
}
-
I tried making them both float left and it still wont go next to the box's :s Originally Posted by Lewiie15
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.
-
oh yay i did it
Thank you for your help guys/girls! Plus rep to all three of you (if it lets me, sorry is it doesnt.)
PHP Code:#sidebar {
float: left;
width: 200px;
border: 0px dashed #F5E0B7;
margin-bottom: 0px;
margin-right: 10px;
}
#content {
float: right;
width: 762px;
margin-left: 5px;
}
Reply With Quote
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts