menu button disgust [Archive]

Click to See Complete Forum and Search --> : menu button disgust

rhsunderground

12-11-2007, 05:25 PM

this afternoon i've thrown together http://kayeskinner.com/ and i'm currently frustrated by the menu buttons. as you look at the page, "the mind" creeps too far to the right and this overhang is visable. thoughts as to why?

html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>ben at kayeskinner dot com</title>
<link rel="shortcut icon" href="favicon.png" />
<link rel="stylesheet" href="style2.css" type="text/css" media="screen" />
</head>
<body>
<div id="content">

<div id="head">

</div>
<div id="menu">
<ul>
<a href="index.php"><li id="home"><img src="images/home.png" alt="Home"></li></a>
<a href="man.php"><li id="man"><img src="images/man.png" alt="The Man"></li></a>
<a href="music.php"><li id="music"><img src="images/music.png" alt="The Music"></li></a>
<a href="http://kayeskinner.com/blegh"><li id="mind"><img src="images/mind.png" alt="The Mind"></li></a>
</ul>
</div>
<div id="holder">
<div id="leftside">
<p>Happy Tuesday night. We hope finals are going well for everyone and that you all have a great break.</p>
</div>
</div>
<div id="foot">
</div>
</div>
</body>
</html>
css:
body {
background: url("images/background2.png") no-repeat right top;
background-color: #330000;
color: #000000;
max-width : 900px;
margin: 0px auto;
}

#content {

padding-top:0px;
background: url("images/textbg.gif") repeat-y center top;
background-color: #CFC3C3;
}

#head {
padding-top: 10px;
background: url("images/header.png") no-repeat center;
background-color:transparent;
height:150px;
}

#menu {
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
width: 100%;
background-color: transparent;
}
#menu img a {
text-decoration: none;
border: 0px;
}

#menu ul {
display: inline;
}
#menu li {
display: inline;
width: 200px;
margin: 0px;
padding: 0px;
}
#menu a {
color: #330000;
margin: 0px;
padding: 0px;
}

#menu2 {
font-size: 20px;
list-style: none;
width: 100%;
margin: auto;
padding: 0px;
text-align: center;
border-top: 2px solid #330000;
}
#menu2 ul {

display: inline;
}
#menu2 li {
display: inline;

}
#menu2 a {
color: #336699;
margin: 0px;
padding: 2px 4px;
font-weight:bold;
text-decoration:none;
}
#menu2 li:hover {
background-color: #526DA4;
}
#menu2 li:hover a {
color: #fff; }

#holder {
margin: 0px;
padding: 0px;
}

#leftside {
text-align: center;
padding: 0px;
width : 100%;
background: url("images/content.gif") no-repeat top center;
background-color: transparent;
min-height: 450px;
}

#foot {
padding-bottom: 5px;
background: url("mono.png") no-repeat bottom;
height:100px;
clear:both;
}

Centauri

12-11-2007, 06:16 PM

Lists use padding or margins (depending on browser) to achieve list item indent, and this indent is still present even when list-style is set to none. Zeroing out all browser default margins and padding at the start of the css file overcomes this :* {margin: 0; padding: 0}

rhsunderground

12-11-2007, 07:26 PM

easy as pie - i wonder why i didn't try that?

WebJoel

12-12-2007, 07:46 AM

Shhh! -The secret to my success? -I always begin web pages with * {margin:0; padding:0;}

rhsunderground

12-26-2007, 07:02 PM

now my menu buttons have decided not to come to the party. if you visit www.kayeskinner.com you will notice that there is no navigation, despite what the code says. now i swear i've seen menus designed this way before; where have i gone wrong?
output:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>home at kayeskinner dot com</title>
<link rel="shortcut icon" href="favicon.png" />
<link rel="stylesheet" href="style2.css" type="text/css" media="screen" />
<style type="text/css"> #head {background: url("images/headers/headerhome.jpg") no-repeat center;}
</style>
</head>
<body>
<div id="content">
<div id="head">
</div>
<div id="menu">
<ul>
<li id="home"><a href="index.php"></a></li>
<li id="man"><a href="man.php"></a></li>
<li id="music"><a href="music.php"></a> </li>
<li id="mind"><a href="http://kayeskinner.com/blegh"></a></li>
</ul>
</div>
<div id="holder">
<div id="leftside">
<p>you have reached the personal homepage of ben kaye-skinner: composer, educator, writer, musician, web developer. the site is currently under construction, which is why it may look very odd in your particular web browser. keep checking in and it should be up and running by the beginning of january.</p>
<p>-bks</p>
</div>
</div>
<div id="foot">
</div>
</div>
</body>
</html>

the code i had used for the menu was:
<li id="home"><a href="index.php"><img src="images/home.png" alt="Home" height="60px" width="200px"/></a></li>
<li id="man"><a href="man.php"><img src="images/man.png" alt="The Man" height="60px" width="200px"/></a></li>
<li id="music"><a href="music.php"><img src="images/music.png" alt="The Music" height="60px" width="200px"/></a> </li>
<li id="mind"><a href="http://kayeskinner.com/blegh"><img src="images/mind.png" alt="The Mind" height="60px" width="200px"/></a></li>

css (very unorganized, i know):
body {
background: url("images/background2.png") no-repeat right top;
background-color: #330000;
color: #330000;
max-width : 900px;
margin: 0px auto;
font-weight: 600;
font-size: 12px;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
/*
font-weight: 600;
*/
text-transform:lowercase;
}

#content {
padding:0px;
margin: 0px auto;
background: url("images/textbg.gif") repeat-y center top;
background-color: #CFC3C3;
height: 100%;
width: 900px;
}

#head {
margin: 0px;
padding-top: 10px;
background-color:transparent;
height:150px;
}

img { border: none; }

a:link {
color: #000;
}

a:hover {
background-color: #F9F9F9;
}

a:visited {
color: #000;
}
p:hover {
background-color: #FAF2D3;
}
#menu {
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
width: 100%;
background-color: transparent;
}
#menu a {
text-decoration: none;
border: 0px;
}

#menu ul {
display: inline;
margin: 0px;
padding: 0px;
}
#menu li {
display: inline;
width: 200px;
height: 60px;
margin: 0px;
padding: 0px;

}
#menu a {
color: #330000;
margin: 0px;
padding: 0px;
}
#menu2 {
font-size: 20px;
list-style: none;
width: 100%;
height: 30px;
padding: 0px;
text-align: center;
margin: 5px;
}
#menu2 ul {
height: 25px;
background: url("images/menu2.jpg") repeat-x center center;
display: inline;
background-color: transparent;
width: 100%;
padding: 10px;
text-align: center;
margin: 5px;
}
#menu2 li {
display: inline;
height: 25px;
}
#menu2 a {
color: #330000;
margin: 0px;
padding: 0px;
text-decoration:none;
}
#menu2 li:hover {
background-color: transparent;
}
#menu2 li:hover a {
background-color: transparent;
text-decoration:underline;
background: url("images/libghover.gif") repeat-x center center;
}

.poem {
text-transform: none;
}
#home {
background: url("images/home.png") no-repeat top center;
width: 200px;
height: 60px;
}
#home:hover {
background: url("images/homehover.jpg") no-repeat top center;
}
#man {
background: url("images/man.png") no-repeat top center;
width: 200px;
height: 60px;
}
#man:hover {
background: url("images/manhover.jpg") no-repeat top center;
}
#music {
background: url("images/music.png") no-repeat top center;
width: 200px;
height: 60px;
}
#home:hover {
background: url("images/musichover.jpg") no-repeat top center;
}
#mind {
background: url("images/mind.png") no-repeat top center;
width: 200px;
height: 60px;
}
#mind:hover {
background: url("images/mindhover.jpg") no-repeat top center;
}

#holder {
margin: 0px;
padding: 0px;
height: 100%;
}
.h2 {
text-align:center;
}
.compositions {
border: 0px;
margin: 0px auto;
padding: 0px;
width: 400px%
}

th {
font-weight: bold;
text-align: center;
}

.tdr {
text-align:right;
text-transform: none;
border-right: 1px solid #330000;
}
.tdl {
border-left: 1px solid #330000;
text-align: left;
}

td {
width: 350px;
}

tr:hover {
background-color: #FAF2D3;
}
dd:hover {
background-color: #FAF2D3;
}

#leftside {
text-align: justify;
margin: 0px auto;
width : 800px;
background: url("images/content.gif") no-repeat top center;
background-color: transparent;
min-height: 412px;
height: 100%;
filter:alpha(opacity=80); /* Internet Explorer */
-moz-opacity:0.8; /* Mozilla 1.6 and below */
opacity: 0.8;
}

#foot {
padding-bottom: 5px;
background: url("images/footer.png") no-repeat bottom;
height:126px;
clear:both;
}

Jick

12-26-2007, 09:18 PM

I think your problem could be that you're setting the menu li's to display: inline and then you're trying to set a height and width on it. I don't know if that will work. Technically speaking if you set something to inline it shouldn't be able to have a height and width set on it. So maybe if you set the a's within the li's to display: block and set a height and width on them it would fix it... That's just an idea though. I could be totally wrong. Sorry if I am. Just trying to help out.

rhsunderground

12-26-2007, 09:26 PM

the images display - now i just have to figure out how to get them to look as i had them.

rhsunderground

12-26-2007, 09:46 PM

i guess i'm gonna have to work on this. thanks for your help.

Jick

12-27-2007, 01:46 AM

Sorry I didn't get back to you earlier. I left for a while...

Anyway, how did you have it before again? They were across the top side-by-side weren't they? Just making sure. I forgot. I only looked at it once when you actually had the links showing.

rhsunderground

12-27-2007, 01:52 PM

they were across the top, but i've gone with a different approach and i think i like it more.

Jick

12-27-2007, 03:24 PM

Oh, alright. :)