...

View Full Version : Menu buttons being squashed



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 />
<!-- Creative Commons License -->
<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>.
<!-- /Creative Commons License -->

</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/">&#171;= 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 /><!-- This little BR is because IE5PC likes to ignore the margin-bottom on the last P above if it is the last element in the DIV-->
</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;
}

Excavator
11-08-2011, 03:13 PM
Hello purge,
Give that menu a width and it won't size down like the rest of your page.
Try this -

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

When posting code (including CSS) in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.

This will wrap your code in a scroll box which greatly helps the readability of your post.

purge
11-08-2011, 05:08 PM
Sorry bout the coding thing. I did put a tag on that, but the rest of the tag did not seem to catch the CSS part.

Your suggestion worked a treat, so it seems I must add a width on to the correct element. I guess I did not know which one, but at least if I run into the menu situation again, at least I know what else I can try.

How do you thank people here?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum