[CSS]Verticale navigatiebar 100%

[Verwijderd]

Waarom werkt dit niet? Ik heb volgens mij alle benodigde stappen juist gezet.
Bij firefox weigert hij de navbar naar beneden te 'trekken'..

Cascading Stylesheet:

body {
    font: 70% Tahoma, Arial, Helvetica, sans-serif;
    line-height: 16px; 
    margin-top: 0px;
    margin-bottom: 0px;
    height: 100%;
    
}

#content {
    margin: 0px auto; 
    width: 780px;
    min-height: 100%;
    height:auto !important;
    height:100%;
}

#navbar {
    float: right; 
    height: 100%;
    background-color: #efefef;
    width: 175px;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    margin: 0 8px 0 35px;
    }

HTML:

<div id="content">
<div id="navbar"> blaat
</div>
        
</div>

[BtM909]

Quick and dirty

Cascading Stylesheet:

html { height: 100% }

Mooier is om faux columns te gebruiken

[ Voor 27% gewijzigd door BtM909 op 11-01-2007 14:19 ]

[Verwijderd]

BtM909 schreef op donderdag 11 januari 2007 @ 14:19:
Quick and dirty

Cascading Stylesheet:

html { height: 100% }

Mooier is om faux columns te gebruiken

Misschien even als toevoeging. De reden waarom je faux clumns moet gebruiken is dat wanneer de content uit de 100% loopt (dus de content is groter dan op het scherm kan). Je menu niet mee gerekt wordt met de pagina. Dit ziet er nogal apart uit.

[Verwijderd]

Toch wat vergeten dus. Dit is inderdaad de oplossing.

--> maar heb even wat lopen klungelen en inderdaad faux columns zijn een betere oplossing.

[ Voor 230% gewijzigd door Verwijderd op 11-01-2007 16:45 ]

[Verwijderd]

--> Maar ook die faux columns maken het voor mij niet gemakkelijk

Iemand enig idee waarom in firefox het menu de achtergrondlijn aan de rechterkant wel overlapt en in IE niet? Heeft dit te maken met de manier van centreren van achtergrondplaatje en #content? het is precies 1 px verschil Wellicht ronden ze de 50% anders af?

html

code:

<div id="content">
<div id="navbar">
    <h1>Setup</h1>
    <span class="underh1">new</span>
        
        <div class="sidenav">
        <h1>Onderwerpen</h1>
            <ul>
                <li><a href="#">Onderwerp 1</a></li>
                <li><a href="#">Onderwerp 2</a></li>
                <li><a href="#">Onderwerp 3</a></li>
                <li><a href="#">Onderwerp 4</a></li>
                <li><a href="#">Onderwerp 5</a></li>
            </ul>
        
        </div>

    <div class="about">
        <h1>About me</h1>
            <p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. <a href="#">Read more &raquo;</a></p>
            
        </div>
        
    <div class="links">
        <h1>Links</h1>
            <ul>
                <li><a href="#">Duis porttitor</a></li>
                <li><a href="#">Sed vulputate</a></li>
                <li><a href="#">Vivamus et mi</a></li>
                <li><a href="#">Nullam posuere</a></li>
                <li><a href="#">Aenean ornare</a></li>
            </ul>
            
        </div>
    
</div>

css

code:

html {
    height: 100%;
    }

body {
    font: 70% Tahoma, Arial, Helvetica, sans-serif;
    line-height: 16px; 
    margin-top: 0px;
    margin-bottom: 0px;
    height: 100%;
    background: url(../images/bg.gif) repeat-y 50% 0;
    
}

#content {
    margin: 0px auto; 
    width: 780px;
}

#navbar {
    float: right; 
    width: 175px;
    padding: 0px;
    margin: 0 0px 0 5px;
    }

#navbar h1 {
    color: #F29900;
    font-size: 2.7em;
    font-weight: bold;
    margin: 25px 10px 2px 15px;
}

#navbar .underh1 {
    color: #666;
    font-size: 1em;
    font-weight: normal;
    margin:0px 10px 10px 20px;
    text-transform: uppercase;
    }
#navbar .sidenav {
    margin-top: 40px;
    margin-bottom: 15px;
    margin-right: 0px;
    }

#navbar .sidenav h1 {
    background: #efefef;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    color: #000;
    font-size: 1.2em;
    height: 22px;
    margin: 0;
    padding-left: 12px;
    padding-top: 6px;
}

#navbar .sidenav ul {
    margin: 0;
    padding: 0;
}

#navbar .sidenav li {
    border-bottom: 1px solid #666;
    list-style: none;
}

#navbar .sidenav li a {
    border-top: 1px solid #efefef;
    background: #efefef;
    color: #666;
    display: block;
    padding: 7px 4px 7px 12px;
    text-decoration: none;
}
#navbar .sidenav li a:hover {
    border-top: 1px solid #e0e0e0;
    background: #c6c6c6;
    color: #000;
}

Dit is hier werkend te zien

[moozzuzz]

Geef es een screenshot, want ik zie geen probleem in je huidige versie (IE6.x XP), maar weet natuurlijk niet hoe je het eigenlijk zou willen?

[Verwijderd]

IE geeft ook geen problemen, maar als je de site in firefox bekijkt dan wel. Dan overlapt het menu d rechter border van de achtergrond en sluiten de horizontale borders van de het list menu niet aan tegen de linker border. Als ik dan een margin-right van 1px opgeef klopt het in Firefox wel weer maar niet in IE.

Screenshot van zoals het nu is in firefox

Door ook links een lijn te zetten via mijn achtergrond image ben ik erachter dat firefox de content gewoon 1px meer naar rechts zet. De letters van de linkertekst staan in firefox namelijk tegen de lijn aan en in IE op de lijn. Ik denk dus dat het iets met het uitlijnen te maken heeft, maar heb nog steeds geen oplossing.

[ Voor 27% gewijzigd door Verwijderd op 11-01-2007 17:47 ]

[moozzuzz]

Mogelijks ligt het idd aan afrondingsfouten (meer zelfs het lig wellicht aan de breedte van de scrollbar oid ---> als je het venster verkleint met 1px kan het opgelost/gereproduceerd worden in IE). Mogelijks op te lossen door de achtergrond vast te pinnen aan de #content (heb zelf nooit faux-collumns nodig voor het kolom-effect).

[Verwijderd]

De manier hoe jij faux coulumns gebruikt gaat niet lekker. Als je de pagina namelijk verkleint in FF gaan de menu lijnen flippen, ze gaan door de tekst enzo. (dit komt daardat IE en FF "background: center" anders interpreteren, die van FF is logischer, maar vaak wel onhandiger)

Het beste om dit probleem op te lossen is door je content ook nog een keer dezelfde achtergrond te geven als je body OF je centreert de pagina niet maar zet hem links.

//toevoeging:
Volgens mij werkt dat doorgestreepte ook niet, want dan gaat ie flippen met die 1px gedoe. Probeer maar eens je zult zien wat ik bedoel.

[ Voor 15% gewijzigd door Verwijderd op 11-01-2007 18:12 ]

[Verwijderd]

Ik heb inmiddels inderdaad de achtergrond in de #content geplaatst. Dit zal wel juist zijn (en afrekenen met de afrondingsfouten) want in Firefox werkt hij nu zoals het hoort. Alleen IE geeft dus nu een probleem. De rechter border staat inmiddels wel goed. Wat opvalt is wel dat de horizontale borders tussen de onderwerpen niet doorlopen totaan de rechterborder (zie screenshot). Verder overlapt het menu dus wel de linkerborder (dit is een lijst) maar de titel van het menu (onderwerpen) doet het wel goed

[Verwijderd]

De oplossing zat hem in de volgende css code. De margin right moest ook op 1px komen te staan. Wellicht zit het verschil in output van firefox en ie hem erin dat de 1 wel een margin accepteerd als die buiten een fixed width komt en de ander niet?

css

code:

#navbar .sidenav {
    margin-top: 40px;
    margin-bottom: 15px;
    margin-right: 0px; <-------------------------------- naar 1px
    }

[ Voor 11% gewijzigd door Verwijderd op 12-01-2007 12:52 ]