Div gaat door andere div(footer) - Softwareontwikkeling

vrijdag 6 november 2009 11:40

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik heb bij mijn site het probleem dat mijn content div m'n footer overlapt terwijl dit dus duidelijk niet de bedoeling is.

Cascading Stylesheet:

#content{
        margin-left: auto;
    margin-right: auto;
    width: 100%;
    min-height: 500px;
        heigh: auto !important;
    border-bottom: 1px dotted #000;
    font-size:11px;
    font-family:Arial, Helvetica, sans-serif, cursive;
        clear:both;
}

#footer{
    width: 100%;
    height: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}

#wrapper{
        width: 980px;
    border-color: #000;
    border-width:0px;
    border-style:dotted;
        margin-left: auto;
        margin-right: auto;
    background-color: white;
        text-align: left;
}

#infopage {
        float: right;
    width:780px;
    text-align:left;
    background-color:white;
    height: 500px;
    margin-left:auto;
    margin-right:auto;
    font-size:11px;
    font-family:Arial, Helvetica, sans-serif, cursive;
}


#navmenu{
    float:left;
    width:200px;
    text-align:center;
    background-image:url(Images/bgmenu.jpg);
    background-color:white;
    height: 300px;
    margin-left:auto;
    margin-right:auto;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif, cursive,;
}

Daarbij is infopage me rechter div en navmenu de linker in de content. Hierbij gaat de infopage door mijn footer heen.

Afbeeldingslocatie: http://img197.imageshack.us/img197/3541/screenym.png

Afbeeldingslocatie: http://img197.imageshack.us/img197/3541/screenym.png

Enig idee hoe ik doet moet oplossen?

Ik heb zelf al op aantal plaatsen clear: both proberen te zetten maar heeft niks van geholpen, min-height etc erbij te plaatsen maar ik krijg het niet voor elkaar.

http://www.justinwilting.nl/index.php?page=mazda

In IE werkt die wel normaal maar in chrome en firefox niet.
B.v.d.

[ Voor 7% gewijzigd door Verwijderd op 06-11-2009 11:57 ]

vrijdag 6 november 2009 11:42

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Zonder de (relevante!) HTML kunnen we hier natuurlijk niks mee

En mocht je toevallig ergens een online (uitgeklede!) testcase kunnen plaatsen: Graag. Verder mis ik wat je zelf al hebt geprobeerd om dit op te lossen?

[ Voor 54% gewijzigd door RobIII op 06-11-2009 11:43 ]

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

vrijdag 6 november 2009 11:42

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

clear je floats

Intentionally left blank

vrijdag 6 november 2009 11:54

Acties:

0 Henk 'm!

Currahee

3 miles up, 3 miles down!

Als het clearen niet werkt dan is er altijd nog een trucje met <br style='clear:both;' /> in je html te zetten. Niet heel netjes, maar werkt vaak wel

vrijdag 6 november 2009 12:03

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Mag ik vragen waar ik precies in mijn css die clear moet zetten? en anders die br?

vrijdag 6 november 2009 12:09

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Verwijderd schreef op vrijdag 06 november 2009 @ 12:03:
Mag ik vragen waar ik precies in mijn css die clear moet zetten? en anders die br?

Op je footer en voor je footer respectievelijk. Maar waarom probeer je het niet gewoon? We verwachten hier wel een beetje eigen inzet.

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

vrijdag 6 november 2009 12:18

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

RobIII schreef op vrijdag 06 november 2009 @ 12:09:
[...]

Op je footer en voor je footer respectievelijk. Maar waarom probeer je het niet gewoon? We verwachten hier wel een beetje eigen inzet.

Ik had het al geprobeerd maar toen werkte het niet en nu nog steeds niet, was meer een extra vraag zodat ik zeker wist of ik ze goed had geplaatst.

vrijdag 6 november 2009 12:19

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Verwijderd schreef op vrijdag 06 november 2009 @ 12:18:
[...]

Ik had het al geprobeerd maar toen werkte het niet en nu nog steeds niet, was meer een extra vraag zodat ik zeker wist of ik ze goed had geplaatst.

Als je dan eens laat zien wat je geprobeerd hebt (als in: relevante(!) html en evt. wijzigingen in de CSS die je gedaan hebt) dan kunnen we tenminste wat zinnigs zeggen anders dan gissen naar waarom 't niet werkt.

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

vrijdag 6 november 2009 12:24

Acties:

0 Henk 'm!

The_Ghost16

In IE7 werkt het bij mij niet hoor

Maar wat wil je bereiken. Dat je footer naar beneden geplaatst wordt afhankelijk van de grote van je content?
Want dat mis ik nog een beetje. Je3 zegt dat het niet klopt maar wat moet het wel doen dan?

En plaats tussen je content div en footer div een clear both zoals hierboven al aangegeven.

vrijdag 6 november 2009 12:25

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Het is me nu wel gelukt. Ik heb toch maar gebruikt gemaakt van Currahee zijn oplossing.

code:

<body>
<div id="wrapper">
  <div id="header">

  </div>

<div id="chromemenu">

</div>



<div id="content">

<div id="navmenu">
  
</div>
<div id="infopage">

</div>
<br style="clear:both;" />
</div>
<div id="footer">© Copyrights van Sprundel BV | Bredaseweg 241, 4705 RN ROOSENDAAL, Tel: 0165 - 575000, Fax: 0165 - 575009
</div>
</div>
</body>

</html>

Dit beter? of mis je nou teveel?

Me footer moest inderdaad wat naar beneden aan de hand van de grote van de content, sorry voor de slechte uitleg.

Ik hoop dat die het in elke browser op het moment goed doet nu.
In ieder geval bedankt allemaal.

[ Voor 114% gewijzigd door Verwijderd op 06-11-2009 13:33 ]

vrijdag 6 november 2009 12:43

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

offtopic:
Ik vroeg om relevante(!) html en/of een testcase; dit is (veel) meer dan we nodig hadden/hebben en toch mis ik nog steeds je footer bijvoorbeeld. Het was makkelijker geweest als je de output van je PHP had gecopied en pasted en ontdaan van overbodige zut als die table.
En wat doet die htmlspecialchars daar

En die switch kun je ook (zo goed als) achterwege laten als je je links en bestanden wat consequenter hanteert (en dus niet home->mhome en mazdabrochures->mazda/brochures. Dan kan je switch vervangen worden door een simpele string concatenatie en een check of de include bestaat.

[ Voor 94% gewijzigd door RobIII op 06-11-2009 12:47 ]

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

vrijdag 6 november 2009 13:42

Acties:

0 Henk 'm!

Verwijderd

Wat je ook kan doen is om in je wrapper div een overflow: hidden toe te voegen.

vrijdag 6 november 2009 14:00

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

RobIII schreef op vrijdag 06 november 2009 @ 12:43:

offtopic:
Ik vroeg om relevante(!) html en/of een testcase; dit is (veel) meer dan we nodig hadden/hebben en toch mis ik nog steeds je footer bijvoorbeeld. Het was makkelijker geweest als je de output van je PHP had gecopied en pasted en ontdaan van overbodige zut als die table.
En wat doet die htmlspecialchars daar En die switch kun je ook (zo goed als) achterwege laten als je je links en bestanden wat consequenter hanteert (en dus niet home->mhome en mazdabrochures->mazda/brochures. Dan kan je switch vervangen worden door een simpele string concatenatie en een check of de include bestaat.

offtopic:
Ik ben pas beginned phper, en dat gedeelte had een vriend van me in elkaar gezet en het werkt wel. Ik zou wel graag willen weten hoe je jouw versie doet dan. Als je eventueel een link hebt met een tutorial of iets dergelijks

vrijdag 6 november 2009 14:10

Acties:

0 Henk 'm!

Saven

Administrator

Verwijderd schreef op vrijdag 06 november 2009 @ 13:42:
Wat je ook kan doen is om in je wrapper div een overflow: hidden toe te voegen.

Dat is we de nette manier idd