Menu buttons being squashed [Archive]

purge

11-08-2011, 03:05 PM

Help!

I am messing around with CSS and HTML. I have managed to add some menus within some header, but when I resize the browser to the left, the menu buttons get pushed off.

I ve heard you could use position either relative, static or absolute, it might be a red herring though. How can I keep the menu buttons from moving around.

Here is the HTML
----------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/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>Menu added</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
<p align="right"><br />
<a href="http://www.intensivstation.ch"><img src="http://intensivstation.ch/files/en_templates/css_logo.gif" alt="" width="414" height="56" border="0" /></a></p>

<div id="header">

<div id="tabs">
<ul>
<li><a href="http://www.free-css.com/"><span>CSS Templates</span></a></li>
<li><a href="http://www.free-css.com/"><span>CSS Layouts</span></a></li>
<li><a href="http://www.free-css.com/"><span>CSS Books</span></a></li>
<li><a href="http://www.free-css.com/"><span>CSS Menus</span></a></li>
<li><a href="http://www.free-css.com/"><span>CSS Tutorials</span></a></li>
<li><a href="http://www.free-css.com/"><span>CSS Reference</span></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.exploding-boy.com/" title="explodingboy"><span>explodingboy</span></a></li>
</ul>
</div>

</div>

<div id="content">
<div id="navi">
<h2>MENU</h2>
<pre>
#content #navi {
border-left:1px dotted #000;
border-bottom:1px dotted #000;
float:right;
width:250px;
background-color:#ff99cc;
margin:0px 0px 20px 20px;
}
</pre>
<p>
<img src="xhtml10.gif" alt="" width="80" height="15" border="0"/><br/>
<img src="css.gif" alt="css" width="80" height="15" border="0"/><br />
<a href="http://www.monorom.to"><img src="monorom.gif" alt="monorom" width="80" height="15" border="0"/></a><br />

<a rel="license" href="http://creativecommons.org/licenses/by/1.0/"><img src="cc.gif" alt="Creative Commons License" width="80" height="15" border="0"/></a><br />
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/1.0/">Creative Commons License</a>.


</p>
</div>

<h2>CONTENT</h2>
<p>All templates are XHTML 1.0 and CSS2/ tableless.</p>
<p>MENU floating<br />
layout grid with a floating menu on the left.<br />
The menu is fixed in it's width. The height adjusts to the content.<br />
<a href="/en/templates/">«= more TEMPLATES</a>
<br /></p>
<pre>
html {
padding:0px;
margin:0px;
}

body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px 20px;
margin:0px;
}

#content {
border:1px solid #564b47;
background-color:#fff;
}
</pre>
<br />
</div>

</body>
</html>

-------------------------

Here is the CSS

html {
padding:0px;
margin:0px;
}

body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px 20px;
margin:0px;
}

p, h2, pre {
margin: 0px;
padding: 10px;
}

#header {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
padding:5px 15px;
margin:0px;
height:27px; /** the height can sometimes push the menu off the border **/
}

/** menu insert **/

h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin:0;
padding:0;
}

hr {
border:none;
border-top:1px solid #CCCCCC;
height:1px;
margin-bottom:25px;
}

#tabs {
float:left;
width:100%;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}

#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}

#tabs li {
display:inline;
margin:0;
padding:0;
}

#tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
color:#FFF;
}

#tabs a:hover {
background-position:0% -42px;
}

#tabs a:hover span {
background-position:100% -42px;
}

/** end of menu insert **/

h2 {
font-size:14px;
padding-top:10px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}

a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}

pre {
color: #564b47;
font-size: 11px;
background-color:transparent;
font-family: Courier, Monaco, Monospace;
}

/* positioning-layers static and absolute */

#content {
border:1px solid #564b47;
background-color:#fff;
}

#content #navi {
border-left:1px dotted #000;
border-bottom:1px dotted #000;
float:right;
width:250px;
background-color:#ff99cc;
margin:0px 0px 20px 20px;
}