[CSS] height: 100% icm height:auto container - Softwareontwikkeling

vrijdag 10 augustus 2007 16:49

Acties:

Your ad here?

Topicstarter

Ik loop tegen een probleem aan bij het maken van mij eerste CSS site. Alle divs staan in een container om ze te centreren. Deze container wil ik mee laten scalen met de content, dus zet ik hem op height: auto (de default instelling). Dit werkt prima, maar het probleem ontstaat als ik schaduw aan de pagina toe ga voegen.

Ik heb in Photoshop een 19x1 jpeg afbeelding gemaakt voor de schaduw (1 links en 1 rechts), en die laat ik verticaal repeaten.

Cascading Stylesheet:

div#pageshadowleft{
    position: relative;
    float: left;
    clear: right;   
    width: 19px;
    height: 100%;
    margin: 0 5px 0 0;
    padding: 0;
    background: #F00 url(pageshadow_left.jpg) repeat-y 0 0;
}

Dit werkt alleen als de parent div (dat is de main container) een fixed hoogte heeft. Als ik de parent div op height: auto zet, dan verdwijnt de schaduw div. Hoe kan ik dit oplossen, zonder de automatisch aanpassende paginahoogte naar de prullenbak te verwijzen?

edit: pagina met main container op 1000px: http://www.xs4all.nl/~abrink/default.html

[ Voor 4% gewijzigd door Bozozo op 12-08-2007 17:46 ]

TabCinema : NiftySplit

vrijdag 10 augustus 2007 16:54

Acties:

NiteSpeed

Linkje naar de testpage zou handig zijn

vrijdag 10 augustus 2007 16:55

Acties:

AllSeeyinEye

a.k.a. Oogje

Het is hier geen HK

[ Voor 81% gewijzigd door RobIII op 12-08-2007 23:24 ]

EvaluationCopy schreef: [...] Audi-rijders zijn de nieuwe BMW-rijders. Petjes met een pak en dan zonder petje, maar in hart en nieren gewoon nog petjes. :+

vrijdag 10 augustus 2007 17:50

Acties:

Bozozo

Your ad here?

Topicstarter

@ NiteSpeed: zie edit OP
@ Hierboven: tja...

TabCinema : NiftySplit

zaterdag 11 augustus 2007 16:14

Acties:

Bozozo

Your ad here?

Topicstarter

Ik heb er nu een probleem bij: ik heb het (css-only) menu aangepast (is nu heel netjes met relatieve posities) maar nu laat internet explorer de <li> items niet netjes naar links floaten. Hij lijkt de tekst toch op een volgende regel te willen plaatsen. Zie link OP.

Het schaduwprobleem is ook nog niet opgelost; volgens mij is dit gewoon het 'heilige graal' probleem waarvoor geen mooie oplossing bestaat in css

edit: het 'IE verschuift knoppen naar de volgende regel' verdwijnt als ik de knoppen uit de lijst structuur haal. Ik vervang dus de <ul> door een gewone <div> en verder laat ik alles hetzelfde (behalve natuurlijk noodzakelijke aanpassingen zoals het verwijderen van <li> tags in de html en het aanpassen van de css definities) en dan werkt het prima.
1. Kan iemand me uitleggen waarom internet explorer list items verticaal verplaatst, zelfs als ze floaten?
2. Waarom gebruikt eigenlijk iedereen <ul> voor css navigatie als een gewone <div> net zo goed (beter?) werkt?

[ Voor 41% gewijzigd door Bozozo op 11-08-2007 18:37 ]

TabCinema : NiftySplit

zondag 12 augustus 2007 13:23

Acties:

Bozozo

Your ad here?

Topicstarter

Voor mensen die in de toekomst tegen dit probleem aanlopen, de oplossing is als volgt:

Cascading Stylesheet:

ul {
    list-style: none;
    margin: 0;
}
ul li {
    float: left;
}
ul li a {
    float: left;
    width: 6em;
    height: 28px;
    margin: 0 1em 0 1em;
    line-height: 28px;
    text-align: center;
    background: black url(TopMenuButton_link.jpg) repeat-x center left;
    color: white;
}

Waarbij het belangrijkste is dat zowel de list items als de links in de list items float: left meekrijgen. Dit werkt in FF en IE6, andere browsers heb ik niet getest.

Het andere probleem heb ik helaas nog niet verholpen, en ik ben bang dat de enige oplossing een vies trucje is zoals faux columns

TabCinema : NiftySplit

zondag 12 augustus 2007 15:21

Acties:

kaydie

Probeer dit eens...

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>arno's</title>

<style type="text/css">

body {
    text-align:center;
    margin:0;
    background-color:#999;
}

#wrapper{
    width:778px;
    margin:50px auto 0 auto;
    background:#FFF url(pageshadow_left.jpg) repeat-y top left;
    overflow:hidden;
}

#content {
    width:740px;
    float:left;
    margin-left:19px;
    text-align:left;
    padding-right:19px;
    background:#FFF url(pageshadow_right.jpg) repeat-y top right;
}
</style>

<div id="wrapper">

    <div id="content">

        <p>Lorem ipsum dolor sit amet, consectetuer 
           adipiscing elit. Vivamus eget turpis. Fusce 
           nisi turpis, pellentesque ut, gravida id, 
           dictum a, velit. Sed nec metus vitae mauris 
           fringilla tincidunt. Praesent pharetra pede non 
           ante. In tellus purus, rutrum non, vehicula ut, 
           cursus in, nisi. Nam non est. Aliquam id nibh 
           sed elit vehicula tincidunt. Donec egestas 
           metus vel nisl.
        </p>

    </div>

</div>

zondag 12 augustus 2007 18:56

Acties:

Bozozo

Your ad here?

Topicstarter

Bedankt! Stom dat ik zelf niet aan zo'n wrapper structuur had gedacht

offtopic:
mn enige smoes is dat dit mn eerste pagina is

Nu gaat eigenlijk alles goed, behalve dat IE het nodig vindt om mijn pageshadow_headertop en pageshadow_footerbottom van een groene streep te voorzien, en bovendien de content textbox te breed maakt. Deze cross-browser issues maken de learning curve voor beginners wel erg steil zeg

TabCinema : NiftySplit