...

View Full Version : text wrapper height, with images



dswimboy
11-26-2005, 10: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, 11: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-27-2005, 12:01 AM
deleted. blech. wrong answer.

syrupcore
11-27-2005, 12:15 AM
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, 10: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, 10: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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum