Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder dswimboy's Avatar
    Join Date
    Nov 2003
    Location
    mostly in Ann Arbor
    Posts
    458
    Thanks
    0
    Thanked 0 Times in 0 Posts

    text wrapper height, with images

    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:
    Code:
    <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:
    Code:
    #links {
    	text-align: center;
    	background-color: #0000CC;
    }
    #link-content {
    	padding-top: 10px;
    	padding-bottom: 10px;
    	background-color: #FFFF66;
    }
    thank you for your help.
    "There is more than one way to do it."

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!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.

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    109
    Thanks
    0
    Thanked 0 Times in 0 Posts
    deleted. blech. wrong answer.
    Last edited by syrupcore; 11-27-2005 at 12:03 AM.

  • #4
    Regular Coder
    Join Date
    May 2005
    Posts
    109
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Regular Coder dswimboy's Avatar
    Join Date
    Nov 2003
    Location
    mostly in Ann Arbor
    Posts
    458
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    "There is more than one way to do it."

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •