Knoppenbalk met DIVs

**Bavo Ketels** · 27-03-2007, 11:12

Hallo

Ik wil een knoppenbalk maken met images en tekst door middel van divs.

Er doen zich enkele problemen voor.
Een button menu moet altijd op één regel blijven. Als ik float:left; gebruik, dan komen de buttons op 2 lijnen als de pagina smaller wordt. Dat effect wil ik niet.

Als de tekst langer wordt dan de 80px van de button, dan wordt de image niet meer gecentreerd. Hetzelfde als de image breder wordt dan 80px.

Kan dit opgelost worden met divs?

Code:

<!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" >
<head>
    <title>Untitled Page</title>
    <style>
    BODY
    {
        margin:0px;
        font-family:verdana;
        font-size:10px;
    }
    
    /* Header */
    #header
    {
        background-color:#B7C9E9;
        height:80px;
        width:100%;
        margin:0;
    }

    #header-fade
    {
        width:100%;
        background-color:#E7EEF8;
        overflow:hidden;
        height:5px;    
    }

    /* Header Buttons */
    .header-separator
    {
        font-size:1px;
        width:2px;
        height:80px;
        overflow:hidden;
        float:left;
    }

    .header-button
    {
        width:80px;
        height:80px;
        float:left;
    }
    .header-button-image
    {
        margin-top:2px;
        height:55px;
        width:100%;
    }
    .header-button-text
    {
        height:20px;
        width:100%;
        font-size:14px;
    }
    
    /* Using DIV to mimic image */
    .image
    {
        width:60px;
        height:60px;
        background-color:#FF0000;
    }
    .bredere-image
    {
        width:100px;
        height:60px;
        background-color:#00FF00;
    }
    </style>
</head>
<body>
    <div id="header" nowrap="nowrap">
        <div class="header-button" align="center">
            <div class="header-button-image" >
                <div class="bredere-image">IMG</div>
            </div>
            <div class="header-button-text" nowrap="nowrap">
                <a href="">Titel 1</a>
            </div>
        </div>
        <div class="header-separator"></div>
        <div class="header-button" align="center">
            <div class="header-button-image" >
                <div class="image">IMG</div>
            </div>
            <div class="header-button-text" nowrap="nowrap">
                <a href="">Veel Langere Titel</a>
            </div>
        </div>
        <div class="header-separator"></div>
        <div class="header-button" align="center">
            <div class="header-button-image" >
                <div class="image">IMG</div>
            </div>
            <div class="header-button-text" nowrap="nowrap">
                <a href="">Titel 2</a>
            </div>
        </div>
        <div class="header-separator"></div>
        <div class="header-button" align="center">
            <div class="header-button-image" >
                <div class="image">IMG</div>
            </div>
            <div class="header-button-text" nowrap="nowrap">
                <a href="">Titel 3</a>
            </div>
        </div>
        <div class="header-separator"></div>
    </div>
    <div id="header-fade"></div>
</body>
</html>

**Dieter Wyns** · 27-03-2007, 21:54

Voor een menu werk ik altijd met een lijst

html

Code:

<ul id="navigation">
  <li><a href="#">Pagina 1</a></li>
  <li><a href="#">Pagina 2</a></li>
  <li><a href="#">Pagina 3</a></li>
</ul>

css

Code:

#navigation {
  list-style:none;
}

#navigation li {
  display:inline;
}

bovenstaande code is niet getest, maar zou in principe moeten werken

Lijkt mij veel effecientere manier van werken, en moet je eerste probleem oplossen. Kan je het 2de probleem verder uitleggen?

Knoppenbalk met DIVs