text wrapper height, with images

dswimboy

11-26-2005, 09:26 PM

i have an examlpe menu bar at http://www-personal.umich.edu/~burkemw/cf/test.html. i'm trying to eliminate the blue space above the links in both IE and FF. i've tried using line-height, height, padding, margins.

the top of the menu should be a straight yellow line. the bottom should curve down smoothly (the image) to a straight line beneat the links (an HTML tag), then curve up smoothly.

the CSS is coded into that page, but here is the relevant HTML and CSS
HTML:
<DIV id="links"><IMG src="images/links-left.gif" width="125" height="40" alt="" border="0"><SPAN id="link-content"><A HREF="events.html" class="default">Events</A> <A href="meetings.html" class="default">Meetings</A> <A href="schools.html" class="default">Schools</A> <A href="opportunities.html" class="default">Opportunities</A> <A href="../../coppermine-1.0RC3/index.php" class="default">Photo Gallery</A></SPAN><IMG src="images/links-right.gif" width="125" height="40" alt="" border="0">
</DIV>

CSS:
#links {
text-align: center;
background-color: #0000CC;
}
#link-content {
padding-top: 10px;
padding-bottom: 10px;
background-color: #FFFF66;
}

thank you for your help.

_Aerospace_Eng_

11-26-2005, 10:51 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="http://www-personal.umich.edu/~burkemw/cf/">
<STYLE>
#links {
text-align: center;
background-color: #0000CC;
}
#link-content {
padding-top: 10px;
padding-bottom: 10px;
background-color: #FFFF66;
}

/* Link styling */
a, a:visited, a:active {
color: #FF9900;
}
a:hover {
color: #F27900;
}
a.default, a.default:visited {
text-decoration: none;
padding-top: 2px;
padding-bottom: 3px;
padding-left: 2px;
padding-right: 2px;
border-style: dotted;
border-width: 2px;
border-color: #FF9900;
background-color: #FFCC33;
color: blue;
}
a.default:hover, a.default:active {
text-decoration: none;
background-color: blue;
color: white;
}
#left-img {
float:left;
}
#right-img {
float:right;
}
#link-content {
margin-left:125px;
margin-right:125px;
}
* html #link-content {
margin-left:122px;
margin-right:122px;
}
</STYLE>
<title>test</title>
</head>

<body>
<DIV id="links"><IMG src="links-left.gif" width="125" height="40" alt="" border="0" id="left-img"><IMG src="links-right.gif" width="125" height="40" alt="" border="0" id="right-img">
<div id="link-content"><A HREF="events.html" class="default">Events</A> <A href="meetings.html" class="default">Meetings</A> <A href="schools.html" class="default">Schools</A> <A href="opportunities.html" class="default">Opportunities</A> <A href="../../coppermine-1.0RC3/index.php" class="default">Photo Gallery</A></div>
</DIV>
</body>
</html>

The stuff I added is in green. Also notice the placement of the link-content. I also changed it from a span to a div.

syrupcore

11-26-2005, 11:01 PM

deleted. blech. wrong answer.

syrupcore

11-26-2005, 11:15 PM

what I dont quite get is when I loaded the html myself, the menu sat on the top. there were no images as the paths are relative(try breaking your img links to see what I mean). when I put in absolute URIs to the images, it broke again. something about the images are pushing the links down. ?. seems like a negative margin on the span should fix it but doesn't.

consider using a ul for your menu and background images+padding for the menu background. you can google listamatic for some examples.

will

dswimboy

11-27-2005, 09:09 AM

alright, now i have two propositions:
1) can it be liquid enough, such that the whole thing doesn't have to take 100% of the screen? i understand why it would be hard with the floats in there. a margin-left and -right could be used, but then you're limiting a screen width.

OR

2) how do i make the links evenly spread between the images?

_Aerospace_Eng_

11-27-2005, 09:18 AM

1) Make your left and right images smaller in width, adjust the margins, there you go more width in your layout.

2) What do you mean by "evenly" spread?