yeap, me too, site layout problem...

ted_chou12 · December 26, 2006

this is my websites' previous css script:
[code]
/********************************************
   AUTHOR: Erwin Aligam
   WEBSITE:   http://www.styleshout.com/
TEMPLATE NAME: Bright Side of Life
   TEMPLATE CODE: S-0005
   VERSION: 1.0
*******************************************/

/********************************************
   HTML ELEMENTS
********************************************/

/* top elements */
* { padding: 0; margin: 0; }

body {
margin: 0;
padding: 0;
font: .70em/1.5em Verdana, Tahoma, Helvetica, sans-serif;
color: #666666;
background: #A9BAC3 url(bg.gif) repeat-x;
text-align: center;
}

/* links */
a {
color: #4284B0;
background-color: inherit;
text-decoration: none;
}
a:hover {
color: #9EC068;
background-color: inherit;
}

/* headers */
h1, h2, h3 {
font: bold 1em 'Trebuchet MS', Arial, Sans-serif;
color: #333;
}
h1 { font-size: 1.5em; color: #6297BC; }
h2 { font-size: 1.4em; text-transform:uppercase;}
h3 { font-size: 1.3em; }

p, h1, h2, h3 {
margin: 10px 15px;
}
ul, ol {
margin: 10px 30px;
padding: 0 15px;
color: #4284B0;
}
ul span, ol span {
color: #666666;
}

/* images */
img {
border: 0px solid #CCC;
}
img.no-border {
border: none;
}
img.float-right {
margin: 5px 0px 5px 15px;
}
img.float-left {
margin: 5px 15px 5px 0px;
}
a img {
border: 0px solid #568EB6;
}
a:hover img {
border: 2px solid #CCC !important; /* IE fix*/
border: 2px solid #568EB6;
}

code {
margin: 5px 0;
padding: 10px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
/* white-space: pre; */
background: #FAFAFA;
border: 1px solid #f2f2f2;
border-left: 4px solid #4284B0;
}
acronym {
cursor: help;
border-bottom: 1px solid #777;
}
blockquote {
margin: 15px;
padding: 0 0 0 20px;
background: #FAFAFA;
border: 1px solid #f2f2f2;
border-left: 4px solid #4284B0;
color: #4284B0;
font: bold 1.2em/1.5em Georgia, 'Bookman Old Style', Serif;
}

/* form elements */
form {
margin:10px; padding: 0;
border: 1px solid #f2f2f2;
background-color: #FAFAFA;
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding: 2px;
border:1px solid #9EC630;
font: normal 1em Verdana, sans-serif;
color:#777;
}
textarea {
width:300px;
padding:2px;
font: normal 1em Verdana, sans-serif;
border:1px solid #9EC630;
height:100px;
display:block;
color:#777;
}
input.button {
margin: 0;
font: bold 1em Arial, Sans-serif;
border: 1px solid #CCC;
background: #FFF;
padding: 2px 3px;
color: #4284B0;
}

/* search form */
form.searchform {
background: transparent;
border: none;
margin: 0; padding: 0;
}
form.searchform input.textbox {
margin: 0;
width: 120px;
border: 1px solid #9EC630;
background: #FFF;
color: #333;
height: 14px;
vertical-align: top;
}
form.searchform input.button {
margin: 0;
padding: 2px 3px;
font: bold 12px Arial, Sans-serif;
background: #FAFAFA;
border: 1px solid #f2f2f2;
color: #777;
width: 60px;
vertical-align: top;
}

/***********************
LAYOUT
************************/
#wrap {
background: #FFF;
width: 820px; height: 100%;
margin: 0 auto;
text-align: left;
}
#content-wrap {
clear: both;
margin: 0; padding: 0;
background: #FFF;
}

/* header */
#header {
position: relative;
height: 85px;
background: #000 url(headerbg.gif) repeat-x 0% 100%;
}
#header h1#logo {
position: absolute;
margin: 0; padding: 0;
font: bolder 4.1em 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -2px;
top: 0; left: 5px;
}
#header h2#slogan {
position: absolute;
top:37px; left: 95px;
color: #666666;
text-indent: 0px;
font: bold 11px Tahoma, 'trebuchet MS', Sans-serif;
text-transform: none;
}
#header form.searchform {
position: absolute;
top: 0; right: -12px;
}

/* header photo */
.headerphoto {
margin: 0 auto;
width: 100%;
height: 120px;
padding: 0px 0px 0px 0px;
background: #FFF url(headerphoto.jpg) no-repeat center;
}

/* main */
#main {
float: left;
margin-left: 15px;
padding: 0;
width: 50%;
}

.post-footer {
background-color: #FAFAFA;
padding: 5px; margin: 20px 15px 0 15px;
border: 1px solid #f2f2f2;
font-size: 95%;
}
.post-footer .date {
background: url(clock.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
background: url(comment.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
background: url(page.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}

/* sidebar */
#sidebar {
float: left;
width: 23%;
margin: 0; padding: 0;
display: inline;
}
#sidebar ul.sidemenu {
list-style:none;
margin:10px 0 10px 15px;
padding:0;
}
#sidebar ul.sidemenu li {
margin-bottom:1px;
border: 1px solid #f2f2f2;
}
#sidebar ul.sidemenu a {
display:block;
font-weight:bold;
color: #333;
text-decoration:none;
padding:2px 5px 2px 10px;
background: #f2f2f2;
border-left:4px solid #CCC;

min-height:18px;
}

* html body #sidebar ul.sidemenu a { height: 18px; }

#sidebar ul.sidemenu a:hover {
padding:2px 5px 2px 10px;
background: #f2f2f2;
color: #339900;
border-left:4px solid #9EC630;
}

/* rightbar */
#rightbar {
float: right;
width: 23%;
padding: 0; margin:0;
}

/* Footer */
#footer {
clear: both;
color: #FFF;
background: #A9BAC3;
border-top: 5px solid #568EB6;
margin: 0; padding: 0;
height: 50px;
font-size: 95%;
}
#footer a {
text-decoration: none;
font-weight: bold;
color: #FFF;
}
#footer .footer-left{
float: left;
width: 65%;
}
#footer .footer-right{
float: right;
width: 30%;
}

/* menu tabs */
#header ul {
z-index: 999999;
position: absolute;
   margin:0; padding: 0;
   list-style:none;
right: 0;
bottom: 6px !important; bottom: 5px;
font: bold 13px Arial, 'Trebuchet MS', Tahoma, verdana, sans-serif;
}
#header li {
   display:inline;
   margin:0; padding:0;
}
#header a {
   float:left;
   background: url(tableft.gif) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header a span {
   float:left;
   display:block;
   background: url(tabright.gif) no-repeat right top;
   padding:6px 15px 3px 8px;
   color: #FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span {float:none;}
/* End IE5-Mac hack */
#header a:hover span {
color:#FFF;
}
#header a:hover {
   background-position:0% -42px;
}
#header a:hover span {
   background-position:100% -42px;
}
#header #current a {
   background-position:0% -42px;
color: #FFF;
}
#header #current a span {
   background-position:100% -42px;
color: #FFF;
}
/* end menu tabs */

/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }

/* additional classes */
.clear { clear: both; }
.green { color: #9EC630; }
.gray { color: #BFBFBF; }
[/code]
this is the css menu i am trying to put in:
[code]
.menu {
width: 770px;
font-size: 11px;
position: relative;
z-index: 100;
white-space: nowrap;
padding: 1px 0px 1px 0px;
}
/* remove all default list styling */
.menu ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
.menu ul ul {
}
/* float the list to make it horizontal
relative positon so that you can control the dropdown menu positon
*/
.menu li {
float:left;
position: relative;
/* space between buttons */
margin-left: 2px;
}
.menu .first {
margin-left: 0px;
}
.menu .last {
margin-right: 0px;
}

/* FIRST-LEVEL NORMAL *********************************************************/
.menu a,
.menu a:visited {
display: block;
font-size: 11px;
text-decoration: none;
text-align: center;
font-weight: bold;
background-image: url('nav_top_backg_off.gif');
background-color: #B6D3F7;
color: #2B449C;
height: 15px; padding-left:5px; padding-right:5px; padding-top:3px; padding-bottom:2px
}

/* SECOND-LEVEL NORMAL ********************************************************/
.menu ul ul a.drop,
.menu ul ul a.drop:visited {
background-image: url('none');
background-color: #B6D3F7;
color: #2B449C
}

/* SECOND-LEVEL HOVER *********************************************************/
.menu ul ul a.drop:hover {
background-image: url('none');
background-color: #2A419D;
color: #FFFFFF
}
.menu ul ul :hover > a.drop {
background-image: url('none');
background-color: #2A419D;
color: #FFFFFF
}
/* hide the sub levels
give them a positon absolute so that they take up no room
*/
.menu ul ul {
visibility: hidden;
position: absolute;
height: 0px;
/* position the top of the dropdown against the button */
top: 20px;
/* account for the padding of the top level item when positioning the left side */
left: -3px;
_left: -5px;
}

/* style the table so that it takes no part in the layout */
.menu table {
position: absolute;
top: 0;
left: 0;
}

/* SECOND-LEVEL NORMAL ********************************************************/
.menu ul ul a,
.menu ul ul a:visited {
border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; text-align: left;
white-space: nowrap;
background-image: url('none');
background-color: #B6D3F7;
color: #2B449C;
border-top: medium none;
/* width of dropdowns is set to accomadate widest item */
width: 188px; padding-left:11px; padding-right:11px; padding-top:3px; padding-bottom:2px
}
.menu ul .last ul a,
.menu ul .last ul a:visited {
/* shorten the last dropdown so the page doesn't scroll over so much */
width: 160px;
}

/* FIRST-LEVEL HOVER **********************************************************/

/* START DO NOT COMBINE THESE TWO, IT BREAKS IE DROPDOWNS */
.menu a:hover {
/* light top button */
background-image: url('nav_top_backg_on.gif');
background-color: #2B449C;
color: #FFFFFF;
text-decoration: none
}
.menu :hover > a {
/* keep top button lit up when the mouse moves onto the dropdown */
background-image: url('nav_top_backg_on.gif');
background-color: #2B449C;
color: #FFFFFF;
text-decoration: none
}
/* END DO NOT COMBINE THESE TWO, IT BREAKS IE DROPDOWNS */

/* START DO NOT COMBINE THESE TWO, IT MAKES IE CHANGE COLOR */
.menu ul ul a:hover {
background-image: url('none');
background-color: #2B449C;
color: #FFFFFF;
text-decoration: none
}
.menu ul ul :hover > a {
background-image: url('none');
background-color: #2B449C;
color: #FFFFFF;
text-decoration: none
}
/* END DO NOT COMBINE THESE TWO, IT MAKES IE CHANGE COLOR */

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}

/* SUBMENU ********************************************************************/
.nav_line {
background-color: #B6D3F7;
}
.sub_nav td {
background-image: url('nav_sub_backg.gif');
background-color: #3873AD;
color: #FFFFFF;
font-size: 9px;
font-weight: bold;
padding-left: 10px;
padding-right: 5px;
letter-spacing: 1px
}
.sub_nav td a:link, .sub_nav td a:visited {
color: #FFFFFF;
font-size: 9px;
text-decoration: none;
}
.sub_nav td a:hover, .sub_nav td a:active {
color: #B6D3F7;
font-size: 9px;
text-decoration: none;
}
.sub_nav .nopad {
padding: 0px;
}
.sub_nav .rightend {
background-image: url('nav_sub_right.gif');
background-repeat: no-repeat;
background-position: right top;
width: 1px
}
[/code]
both of them interfere with each other... by the way, my webpage html code looks like this:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta name="Robots" content="index,follow" /><link rel="stylesheet" href="../images/BrightSide.css" type="text/css" />
<title></title>
</head>

<body>

<div id="wrap">


<div id="header">

<h1 id="logo">SC<span class="green">online</span></h1>
<h2 id="slogan">The worldwide student community</h2>

<form method="post" class="searchform" action="#">
<p><input type="text" name="search_query" class="textbox" />
<input type="submit" name="search" class="button" value="Search" /></p>
</form>

<ul>
<li id="">
<a href=""><span>Home</span></a></li>

<li id="">
<a href="include.php?page=faq"><span>FAQ</span></a></li>

<li id="">
<a href="include.php?page=services"><span>Services</span></a></li>

<li id="">
<a href="include.php?page=support"><span>Support</span></a></li>

<li id="">
<a href="include.php?page=about"><span>About</span></a></li>
</ul>
</div>


<div id="content-wrap">

<div class="headerphoto"></div>

<div id="sidebar" >
<h1><span class="green">Members Menu</span></h1>
<ul class="sidemenu">
<li><a href=register.php">Register</a></li>
<li><a href="users">Login</a></li>
<li><a href="users/faq.php">FAQ</a></li>
<li><a href="users/info.php">Information</a></li>
<li><a href="forum">Forum</a></li>
</ul>

<h1><span class="green">Sponsers</span></h1>
<ul class="sidemenu">
<li><a href="http://partners.ipower.com/z/57/CD5822/">IPowerweb</a></li>
<li><a href="http://www.4templates.com/?aff=ealigam">4templates</a></li>
<li><a href="http://www.fotolia.com/partner/114283">Fotolia.com</a></li>
<li><a href="http://www.bigstockphoto.com/?refid=grKPpdNw6k">BigStockPhoto.com</a></li>
<li><a href="http://www.text-link-ads.com/?ref=40025">Text Link Ads</a></li>
</ul> </div>

<div id="main">

<a name="User Panel"></a>
<h1>User Panel</h1>
<link rel="stylesheet" href="menu.css" type="text/css" />

<div class="menu">
<ul>
<li class="first" style="width:70px;">
<a href="index.php">INDEX</a>
</li>
<li style="width:10px;" onmouseover="fixBurnThru(true)" onmouseout="fixBurnThru(false)">
<a href="profile.php" class="drop">MY PROFILE</a>

<ul>
<li><a href="viewprofile.php">View My Profile</a></li>
<li><a href="editprofile.php">Edit My Profile</a></li>
</ul>

</li>
<li style="width:10px;" onmouseover="fixBurnThru(true)" onmouseout="fixBurnThru(false)">
<a href="privatemessage.php" class="drop">MESSAGES</a>

<ul>
<li><a href="pmsend.php">Send Messages</a></li>
<li><a href="inbox.php">My Inbox</a></li>
<li><a href="outbox.php">My Outbox</a></li>
</ul>

</li>
<li style="width:10px;" onmouseover="fixBurnThru(true)" onmouseout="fixBurnThru(false)">
<a href="page.php" class="drop">MY PAGE</a>

<ul>
<li><a href="editpage.php">Edit My Page</a></li>
<li><a href="pagedetail.php">Current Page Status</a></li>
</ul>

</li>
<li style="width:10px;" onmouseover="fixBurnThru(true)" onmouseout="fixBurnThru(false)">
<a href="photo.php" class="drop">PHOTO GALLERY</a>

<ul>
<li><a href="photogallery.php">View My Gallery</a></li>
<li><a href="photoedit.php">Edit Photos</a></li>
</ul>

</li>
<li class="last" style="width:10px;" onmouseover="fixBurnThru(true)" onmouseout="fixBurnThru(false)">
<a href="../forum" class="drop">FORUM</a>

</li>
</ul>
</div>

<link rel="stylesheet" href="../images/BrightSide.css" type="text/css" />
<p><b>Welcome Ted, you are logged in as "<u>ted_chou12</u>" - <a href = "index.php?do=logout">logout</a></b></p><p>This is the members only area, please quit immediatly if you are not an member, or else, please access the webpages freely and comfortably. Thank you for paying attention to this notice!</p>
<p><b>Last Login:</b> </p>
<link rel="stylesheet" href="../images/BrightSide.css" type="text/css" />

</div>

<div id="rightbar">
<h1><span class="green">Support Styleshout</span></h1>
<p>If you are interested in supporting my work and would like to contribute, you are
welcome to make a small donation through the
<a href="http://www.styleshout.com/">donate link</a> on my website - it will
be a great help and will surely be appreciated.</p>

<h1><span class="green">Lorem Ipsum</span></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum
odio, ac blandit ante orci ut diam.</p> </div>


</div>


<div id="footer">

<div class="footer-left">
<p class="align-left">
© 2006 <strong>THE RISK TAKING GROUP</strong> |
Design by: <a href="http://www.styleshout.com">Styleshout</a>
</p> </div>

<div class="footer-right">
<p class="align-right">
<a href="index.html">Home</a> | 
<a href="index.html">SiteMap</a> | 
<a href="index.html">RSS Feed</a>
</p> </div>

</div>



</div>

</body>
</html>
[/code]
so the layout goes to a disaster...
can anyone help me out with this please? what i think is the problem is that the labels for links such as li and ul as well as hyperlinks, i am not sure about the <div> tags, because my site template css uses very dependentally of div tags so an extra div tag inserted might evident the dependency, but i am not sure... not an expert of this. :)

ToonMariner · December 28, 2006

can u posta link to your site - its easire to see whats going on.

It would be nice to have a link to old and one where the new is falling down.

Sign In

yeap, me too, site layout problem...

Recommended Posts

ted_chou12

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information