[CSS/HTML] hoogte van een LI + A object - Softwareontwikkeling

zaterdag 11 november 2006 13:37

Acties:

Topicstarter

Hoi,

ik ben weer eens bezig met een site maar ik krijg die navigatie maar niet goed.
Wat ik namelijk wil is een horizontaal menu met een rollover effect dmv een achtergrond plaatje.

Nu is dat horizontale menu geen probleem en het plaatje ook niet, maar de hoogte van de LI met daarin de A wil maar niet groter worden.

de code zoals hij nu is:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
  <TITLE>Eijkelkamp</TITLE>
  <LINK rel="stylesheet" href="./stylesheet.css"
  <SCRIPT src="./javascript.js" type="JavaScript"></SCRIPT>
</HEAD>
<BODY>
  <DIV id="body">
    <DIV id="top">
    </DIV>
    <DIV id="flash">
      <OBJECT classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="735" height="284">
        <PARAM name="flash" value="flash.swf">
        <PARAM name="quality" value="high">
        <PARAM name="bgcolor" value="#DB0071">
        <EMBED src="flash.swf" quality="high" bgcolor="#DB0071" width="735" height="284" name="flash" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></EMBED>
      </OBJECT>
    </DIV>
    <DIV id="navigation">
      <DIV class="lft">&nbsp;</DIV>
      <DIV class="rgt">&nbsp;</DIV>
      <DIV id="nav_top">
        <UL>
          <LI><A href=""><IMG src="./images/nav.php?nav=home" align="absmiddle" border="0"></A></LI>
          <LI><A href=""><IMG src="./images/nav.php?nav=webshop" align="absmiddle" border="0"></A></LI>
          <LI><A href=""><IMG src="./images/nav.php?nav=vestigingen" align="absmiddle" border="0"></A></LI>
          <LI><A href=""><IMG src="./images/nav.php?nav=contact" align="absmiddle" border="0"></A></LI>
        </UL>
      </DIV>
      <DIV id="nav_btm">
        //subnavigatie uit de database
      </DIV>
    </DIV>
    <DIV id="page">&nbsp;</DIV>
  </DIV>
  <DIV id="bottom">&nbsp;</DIV>
</BODY>
</HTML>

en de bijbehorende CSS mbt het UL LI en A verhaal:

Cascading Stylesheet:

#nav_top {
    width:  735px;
    height: 24px;
    margin: 0px 0px 0px 18px;
}

#nav_top UL {
    height:  24px;
    margin:  0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#nav_top UL LI {
    display: inline;
}

#nav_top UL LI A {
    padding:          0px 8px 0px 8px;
    text-decoration:  none;
    background-color: #FFFFFF;
}

#nav_top UL LI A:hover {
    background-image:    url("./images_bg/nav_top.gif");
    background-position: 0px 0px;
    background-repeat:   repeat-x;
}

Later zal het menu helemaal variabel worden gemaakt dmv een mysql database etc.

Op en aanmerkingen op de code mag natuurlijk altijd, want daar leer ik alleen maar van, maar volgens mij is het best netjes op deze manier.

Wie weet nu hoe ik de hoogte van de LI op exact 24 pixels kan krijgen zodat ik de achtergrond op pixel 21 kan zetten?

Voorbeeld: http://www.b2ontwerp.nl/eijkelkamp

A byte walks into a bar and orders a pint. Bartender asks him "What's wrong?" Byte says "Parity error." Bartender nods and says "Yeah, I thought you looked a bit off."

zaterdag 11 november 2006 13:40

Acties:

JHS

Splitting the thaum.

Cascading Stylesheet:

1 2	#nav_top ul li, #nav_top ul li a { display: block; } #nav_top ul li { height: 24pxl }

?

DM!

zaterdag 11 november 2006 13:55

Acties:

k0ewl

Topicstarter

JHS schreef op zaterdag 11 november 2006 @ 13:40:
Cascading Stylesheet:
1
2
#nav_top ul li, #nav_top ul li a { display: block; }
#nav_top ul li { height: 24pxl }
?

CSS:

Cascading Stylesheet:

#nav_top UL {
    height:  24px;
    margin:  0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#nav_top UL LI {
    height:  24px;
    display: block;
}

#nav_top UL LI A {
    display:          block;
    padding:          0px 8px 0px 8px;
    text-decoration:  none;
    background-color: #FFFFFF;
}

#nav_top UL LI A:hover {
    background-image:    url("./images_bg/nav_top.gif");
    background-position: 0px 0px;
    background-repeat:   repeat-x;
}

Zou dan toch moeten werken, want ik krijg nu alles verticaal weer

A byte walks into a bar and orders a pint. Bartender asks him "What's wrong?" Byte says "Parity error." Bartender nods and says "Yeah, I thought you looked a bit off."

zaterdag 11 november 2006 14:02

Acties:

JHS

Splitting the thaum.

Ahja, want dan werkt die inline display natuurlijk niet meer. Om dat op te lossen zou je ze float: left; mee kunnen geven? (Nogal oude testcase)

DM!

zaterdag 11 november 2006 14:23

Acties:

k0ewl

Topicstarter

Oké, na lang zoeken heb ik het probleem opgelost door de A een padding te geven aan de onderkant zodat hij iets hoger werd. Daarna kon ik gewoon de background op de goede plaats zetten.

De _padding zorgt voor IE, want die wilde weer eens niet luisteren. Weet dat het niet netjes is, maar goed.

CSS:

Cascading Stylesheet:

#nav_top {
    width:  735px;
    height: 24px;
    margin: 0px 0px 0px 18px;
}

#nav_top UL {
    width:   100%;
    height:  24px;
    margin:  0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#nav_top UL LI {
    display: inline;
}

#nav_top UL LI A {
    padding:          0px 8px 5px 8px;
    _padding:         3px 8px 8px 8px;
    text-decoration:  none;
}

#nav_top UL LI A:hover {
    background-image:    url("./images_bg/nav_top.gif");
    background-position: 0px 21px;
    background-repeat:   repeat-x;
}

[ Voor 10% gewijzigd door k0ewl op 11-11-2006 14:30 ]

A byte walks into a bar and orders a pint. Bartender asks him "What's wrong?" Byte says "Parity error." Bartender nods and says "Yeah, I thought you looked a bit off."