Probleem css hoogte / overlappende divs - Softwareontwikkeling

dinsdag 29 januari 2008 00:38

Acties:

Verwijderd

Topicstarter

Hallo luitjes,

Ik heb een probleem met mijn website.. Ik heb hem scalable gemaakt, dus in %'en, maar het werkt niet zoals ik wil.

Ik wil dus 2 divs die boven elkaar staan, container + bottom. De keuze hiervoor heb ik gemaakt omdat de container maar 75% breed is, en de bottom 100%.

Dit is mijn stylesheet:

Cascading Stylesheet:

html, body      {
                height:                 100%;
                margin:                 0;
                padding:                0;
                text-align:             center;
                background-color:       #FFFFFF;
                font-family:            Trebuchet MS, Verdana;
                font-size:              12px;
                }

#container      {
                margin:                 0 auto;
                margin-top:             1%;
                margin-bottom:          1%;
                padding:                0;
                width:                  75%;
                height:                 78%;
                text-align:             left;
                background-color:       #fff;
                }

#heading        {
                width:                  100%;
                height:                 24%;
                margin-bottom:          1%;
                padding:                0;
                background:             #F0F0F0;
                }

#menu           {
                width:                  20%;
                height:                 auto;
                float:                  left;
                }

#menu ul,
#menu li        {
                margin:                 0;
                padding:                0;
                border-top:             1px solid #b6c83e;
                border-bottom:          1px solid #d7d9ca;
                background-color:       #abbf27;
                list-style:             none;
                }

#content        {
                background:             #FFFFFF;
                width:                  63%;
                min-height:             75%;
                float:                  left;
                }

#page-content   {
                margin-left:            3%;
                margin-right:           5%;
                }
                                                
#extra          {
                width:                  17%;
                min-height:             75%;
                float:                  left;
                background:             #F0F0F0;
                }
                        
#bottom         {
                margin:                 0;
                padding:                0;
                width:                  100%;
                height:                 20%;
                background-color:       #859813;
                background-image:       url(../images/bottom-background.jpg);
                background-repeat:      repeat-x;
                }

#bottom-liner   {
                background-image:       url(../images/bottom-liner.jpg);
                background-repeat:      no-repeat;
                height:                 140px;
                width:                  100%;
                background-position:    center left;
                }
            
#bottom ul, li  {
                list-style-type:        none;
                display:                inline;
                padding-right:          3px;
                padding-top:            0;
                padding-bottom:         0;
                margin:                 0;
                color:                  #FFFFFF;
                line-height:            30px;
                }

En dit is mijn broncode (<html> e.d. weggelaten, heb wel W3C bovenin staan):

HTML:

<body>

<div id="container">
    <div id="heading">lala&#960;</div>
    <div id="menu">
        <ul id="MainMenu">
            <li>    <a href="#">&#8250; Homepage</a>                </li>
            <li>    <a href="#">&#8250; Nieuws & aanbiedingen</a>   </li>
            <li>    <a href="#">&#8250; Over ons</a>                </li>
            <li>    <a href="#">&#8250; Assortiment</a>             </li>
            <li>    <a href="#">&#8250; Contact</a>                 </li>   
        </ul>
    </div>
    <div id="content">
        
        <div id="page-content">
            <span class="title">Assortiment</span>
            <span class="text">hoi :)</span>
        </div>

        </div>
    <div id="extra">testing</div>
    
</div>

<div style="clear:both;"></div>

<div id="bottom">
    <div id="bottom-liner">
        <ul>
            <li><a href="#">HOMEPAGE</a> |</li>
            <li><a href="#">DE WINKEL</a> |</li>
            <li><a href="#">AANBIEDINGEN</a> |</li>
            <li><a href="#">OVER ONS</a> |</li>
            <li><a href="#">ASSORTIMENT</a> |</li>
            <li><a href="#">RECEPTEN</a> |</li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    <p class="copyright">KVK 010101010101 | BTW 234.45653.1234</p>
    <p class="copyright">Alle rechten voorbehouden © 2008-2009 ***********. Webdesign by <a href="#">Dennis van de Haar</a></p>
    </div>
</div>

</body>

Wie kan mij helpen, zodat de tekst niet verdwijnt onder mijn bottom div, en alles netjes aansluit. Ik wil hem namelijk goed zichtbaar hebben in de meest gebruikte browsers (IE6/7, FF, Safari enz).

PS: Ik gebruik Keynote op Mac, dus vandaar die vage inspringingen in mijn CSS toen ik het hierin kopieerde.

Alvast bedankt!
Gr Dennis

[ Voor 4% gewijzigd door een moderator op 29-01-2008 02:24 . Reden: Code tags gefixed ]

dinsdag 29 januari 2008 02:21

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Je test-case illustreert in ieder geval je probleem niet erg duidelijk; nu snap ik wel wat je probleem is, maar probeer dat ook in je test-case duidelijk te maken

Dit probleem is overigens al regelmatig voorbij gekomen, met een beetje zoeken moet je zo iets gevonden hebben.

[ Voor 46% gewijzigd door RobIII op 29-01-2008 02:25 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 29 januari 2008 20:36

Acties:

Zillion01

Obey your screen!

Zonder een link of een stuk code wat het in een keer doet ga ik echt niet kijken hoor.

woensdag 30 januari 2008 01:40

Acties:

Verwijderd

Topicstarter

Aha, sorry voor geen link (op sommige forums mag 't niet enz, dus vandaar dat ik hem had weggelaten).

Hierbij dan de link:
https://bb.avans.nl/bbcsw...haar/vianatura/index.html

Als iemand mij kan helpen, graag! Heb al gekeken bij de andere topics maar kon zo gauw geen situatie vinden die ook bij mij van toepasing was.

Gr Dennis

woensdag 30 januari 2008 02:23

Acties:

Zillion01

Obey your screen!

Je gebruikt float-lefts terwijl je de footer op de onderkant wilt. Maak een container (geef relative aan) en daarin nog een container die ook relative is waar je de boel laat floaten. Binnen de 2e relative container zit de footer. De footer moet je absoluut positioneren met bottom:0. Om te voorkomen dat dan nog een de boel enigszins onder de footer kan schuiven dien je de 2e container of de floating container daarbinnen bijv. een padding bottom van 30px te geven.

Als je het jezelf gemakkelijk wilt maken google dan even op een vaste footer in de bottom, dit is wel zo vaak voorkomend echter niet gemakkelijk zelf te bedenken.

[ Voor 3% gewijzigd door Zillion01 op 30-01-2008 02:25 ]

woensdag 30 januari 2008 02:27

Acties:

curry684

left part of the evil twins

Waarom maak je het ding in godesnaam percentile scaled ipv gewoon fixed content? Je overtreedt nu per definitie een aantal basisregels met betrekking tot leesbaarheid op grote schermen.

Professionele website nodig?

woensdag 30 januari 2008 08:23

Acties:

Boelie-Boelie

curry684 schreef op woensdag 30 januari 2008 @ 02:27:
Waarom maak je het ding in godesnaam percentile scaled ipv gewoon fixed content?

Ik zou een max-width voorstellen.

Cogito ergo dubito

woensdag 30 januari 2008 08:53

Acties:

Cartman!

Als je maten en font-sizes in em doet ipv. pixels kun je je site compleet schaalbaar maken maar op normale weergave is ie precies zoals je wilt. Gebruiken mensen de mogelijkheid om hem groter te maken in de browser dan schaalt ie pas mee. Ik ben het eens met curry dat voor grote schermen dit echt niet gaat werken.

woensdag 30 januari 2008 11:53

Acties:

Verwijderd

Topicstarter

Thx voor de reacties, ga ik zeker gebruiken voor m'n site!

woensdag 30 januari 2008 12:39

Acties:

Verwijderd

curry684 schreef op woensdag 30 januari 2008 @ 02:27:
Waarom maak je het ding in godesnaam percentile scaled ipv gewoon fixed content?

Wellicht omdat iemand die 1000 euri uitgeeft aan een 24" monitor zelf mag uitmaken hoe 'ie z'n screen real-estate gebruikt? Als diegene graag full screen browsed moet 'ie dat zelf weten, al zullen de meeste mensen met een groot scherm niet full screen browser. Probleem opgelost lijkt me.

woensdag 30 januari 2008 13:04

Acties:

curry684

left part of the evil twins

Verwijderd schreef op woensdag 30 januari 2008 @ 12:39:
[...]

Wellicht omdat iemand die 1000 euri uitgeeft aan een 24" monitor zelf mag uitmaken hoe 'ie z'n screen real-estate gebruikt? Als diegene graag full screen browsed moet 'ie dat zelf weten, al zullen de meeste mensen met een groot scherm niet full screen browser. Probleem opgelost lijkt me.

Ik heb een 1920x1200 laptop met 1440x900 scherm ernaast, en ik browse altijd op 1152x864 of 1024x768, dus je hoeft niet tegen mij te ranten. In de echte boze wereld daarbuiten echter zijn de meeste mensen debielen die niet doorhebben dat je een browser ook niet maximized kunt gebruiken. En ook die mensen kopen 24" monitors en vinden jouw site vervolgens onleesbaar. Verkoop dat maar aan je klanten.

Professionele website nodig?

woensdag 30 januari 2008 19:19

Acties:

Verwijderd

Topicstarter

Ik heb hetgeen aangepast met een max-width, maar die ondersteund IE6. Ik denk niet dat er zoveel mensen zijn die IE6 gebruiken met een groot scherm? Maargoed, het moet niet kunnen natuurlijk.

Ik had al bedacht om een container in een container te zetten, met de buitenste container de uiterste maat in pixels, maar dan wordt die natuurlijk ook geplaatst bij kleinere schermen, waardoor je een verticale scrollbar krijgt. Iemand enig idee hoe ik dat dan kan oplossen, zonder gebruik van een css-hack?

De footer helemaal aan de bottom werkt ook niet, dan zweeft hij vanaf precies het midden (IE7), zie hier:

https://bb.avans.nl/bbcsw...haar/vianatura/index.html

woensdag 30 januari 2008 20:07

Acties:

Cartman!

Verwijderd schreef op woensdag 30 januari 2008 @ 19:19:
Ik heb hetgeen aangepast met een max-width, maar die ondersteund IE6. Ik denk niet dat er zoveel mensen zijn die IE6 gebruiken met een groot scherm? Maargoed, het moet niet kunnen natuurlijk.

Het zal je tegenvallen hoeveel mensen nog IE6 gebruiken, en reken maar dat een flink deel inmiddels een groot scherm heeft.

woensdag 30 januari 2008 20:21

Acties:

Verwijderd

Topicstarter

Ja daar heb je wel gelijk in, maar zit al 3 dagen te ***** en het wil maar niet lukken.

Ik wil dus:

HEADER
CONTENT (soms veel, soms weinig)
FOOTER

Samen 100% hoogte, bij meer content uiteraard groter als 100%.

de footer moet altijd helemaal onderaan worden geplaatst, bij weinig en veel content. Het wil maar niet lukken, heb al zoveel geprobeerd..

Kan iemand mij aub helpen?

[ Voor 9% gewijzigd door Verwijderd op 30-01-2008 20:23 ]

woensdag 30 januari 2008 20:39

Acties:

Cartman!

Wat heb je allemaal al geprobeerd en gezocht dan? Ik vind dit meer een 'ik snap het niet, kunnen jullie het voorkauwen' dingetje. Sowieso vind ik het persoonlijk lelijk als een site 5 regels content heeft en ik vervolgens driekwart scherm niks zie en onderaan ineens een footer zweeft.

woensdag 30 januari 2008 21:11

Acties:

Verwijderd

Topicstarter

Ik wil het best zelf doen hoor. Daar ben ik nu ook al een paar dagen mee bezig.

Dat je een footer onderaan lelijk vind is een kwestie van smaak, maar dat is in dit geval mooier aangezien er straks nog een achtergrond op komt.

Ik heb het volgende geprobeerd:
- De uitleg van Zillion01
- De uitleg van gigadesign.be (http://www.gigadesign.be/2006/07/layout-met-100-hoogte/)
- De uitleg van webmasterworld.com (http://www.webmasterworld.com/forum83/1120.htm)
- Nog wat google hits hier en daar

Alle 3 is het niet gelukt, ook niet nadat ik het zelf geprobeerd had aan te passen.

Ik krijg de footer wel op de bottom bij veel tekst. Logisch, dan wordt die naar onder gedrukt door de lange content. Maar als de content weinig is, dan gaat hij niet helemaal naar onder.

Ik heb nu de volgende code over:

code:

#footer         {
                position:               absolute;
                bottom:                 0;
                width:                  100%;
                height:                 20%;
                text-align:             center;
                }

#container {
                position:               relative;
                min-height:             100%;
                height:                 auto !important; /* voor moderne browsers */
                height:                 100%; /* voor IE */
                width:                  100%;
                text-align:             left;
                }

#positioner     {
                width:                  75%;
                height:                 100%;
                margin:                 0 auto;
                }

#heading        {
                width:                  100%;
                height:                 20%;
                padding:                0;
                background:             #F0F0F0;
                }

#content        {
                background:             #FFFFFF;
                width:                  60%;
                height:                 auto;
                float:                  left;
                }

woensdag 30 januari 2008 21:23

Acties:

Zerora

Ik Henk 'm!

Verwijderd schreef op woensdag 30 januari 2008 @ 21:11:
Ik krijg de footer wel op de bottom bij veel tekst. Logisch, dan wordt die naar onder gedrukt door de lange content. Maar als de content weinig is, dan gaat hij niet helemaal naar onder.

De tekst gaat zelfd dwars door de footer heen. Is niet echt de bedoeling lijkt me

Ik zou zeggen kijk eens af op deze website waar je kant en klare CSS layouts kunt downloaden

http://www.code-sucks.com/css%20layouts/

Makkelijker kan ik het je denk ik niet maken

[ Voor 4% gewijzigd door Zerora op 30-01-2008 21:23 ]

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

woensdag 30 januari 2008 22:19

Acties:

Verwijderd

Topicstarter

Zerora schreef op woensdag 30 januari 2008 @ 21:23:
[...]

De tekst gaat zelfd dwars door de footer heen. Is niet echt de bedoeling lijkt me

Ik zou zeggen kijk eens af op deze website waar je kant en klare CSS layouts kunt downloaden

http://www.code-sucks.com/css%20layouts/

Makkelijker kan ik het je denk ik niet maken

Dat zijn fixed css layouts.. dat kan ik ook maken, maar toch bedankt voor de tip.

woensdag 30 januari 2008 23:50

Acties:

Boelie-Boelie

Met footerstickalt en de bijbehorende IE7-fix zou het denk ik moeten lukken.

Cogito ergo dubito

zaterdag 2 februari 2008 20:27

Acties:

Verwijderd

Topicstarter

Boelie-Boelie schreef op woensdag 30 januari 2008 @ 23:50:
Met footerstickalt en de bijbehorende IE7-fix zou het denk ik moeten lukken.

Heel erg bedankt voor de term, heb het eindelijk voor elkaar!

https://bb.avans.nl/bbcsw...haar/vianatura/index.html

Aan ieder ander die ook een reactie heeft achtergelaten: bedankt voor jullie medewerking!