[CSS] Ik krijg een bepaalde style niet goed - Softwareontwikkeling

vrijdag 30 maart 2007 16:12

Acties:

Topicstarter

Ik ben al een behoorlijk tijd bezig mijn sterk verouderde website die geheel opgetrokken is uit frames om te zetten naar een fatsoenlijke website die met styles is opgebouwd. Ik ben een heel eind alleen ik krijg het laatste stukje maar niet goed (en da's behoorlijk frustrerend).
Hieronder zie je hoe de pagina eruit moet komen te zien qua indeling. Even in het kort:

A+C+H+J: hoekafbeeldingen, statisch 25px * 25px
B+I: repeterende achtergrond in totaal 950 px breed
D+G: dynamische achtergrond, hoogte 100% (dus stretched bij groter of kleiner beeldscherm)
E: menu positie, stretched in hoogte mee tot 100%
F: content gedeelte. Stretched mee in hoogte en laadt zoals een Iframe de content (maar in mijn geval met AJAX). DIt gedeelte zou het hele oppervlak moeten zijn wat overblijft.
Afbeeldingslocatie: http://members.home.nl/m.degans/img/website.gif

Afbeeldingslocatie: http://members.home.nl/m.degans/img/website.gif

Alle overige onderdelen zien er zowel in IE als Firefox identiek uit (hoe is het mogelijk!).
Toch zit er een probleem in F. De hoogte wordt neit juist berekent. Hij gebruikt niet de 100% die over is, maar de 100% van het beeldscherm. en dus loopt de inhoud over of onder (ligt aan z-index) de onderkant heen . Ik heb overflow:auto geprobeert, maar ook dan laat hij een gedeelte van de scrollbar niet zien.
Ik heb alles geprobeert met float:left, alles met position:absolute & relative en verschillende combinaties tussen deze, maar ik krijg het niet goed. Heeft iemand een idee?

De style code voor de blokken is verkort als volgt:

Cascading Stylesheet:

body,html{height:100%;margin:0px;}
#A{position:absolute;background:url(plaatjes/nieuweSite2/linksboven.jpg) no-repeat;width:25px;height:28px;overflow: hidden;display:inline;margin-left:0px;z-index:1;}
#B{position:absolute;background:url(plaatjes/nieuweSite2/boven.jpg) repeat-x;width:950px;height:28px;margin-left:25px;z-index:1;}
#C{position:absolute;background:url(plaatjes/nieuweSite2/rechtsboven.jpg) no-repeat;width:25px;height:28px;margin-left:975px;z-index:1;}
#D{position:absolute;background:url(plaatjes/nieuweSite2/links.jpg) repeat-y;width:25px;height:100%;z-index:0;}
#buttonencontent{position:absolute;width:950px;height:100%;margin-left:25px;}
#E{position:absolute;margin:40px 25px 0px 0px;width:160px;text-align:center;padding:0px;background-color:#00FF00}
#F{width:790px;height:100%;background-color:#00FF00;margin:28px 0px 50px 160px;overflow:auto}
#G{position:absolute;background:url(plaatjes/nieuweSite2/rechts.jpg) repeat-y;width:25px;height:100%;margin-left:975px;z-index:0;}
#H{position:absolute;background:url(plaatjes/nieuweSite2/linksonder.jpg);width:25px;height:28px;bottom:0px;margin-left:0px;z-index:1;}
#I{position:absolute;background:url(plaatjes/nieuweSite2/onder.jpg) repeat-x;width:950px;height:28px;bottom:0px;margin-left:25px;z-index:1;}
#J{position:absolute;background:url(plaatjes/nieuweSite2/rechtsonder.jpg);width:25px;height:28px;bottom:0px;margin-left:975px;z-index:1;}

De html code is verkort als volgt:

HTML:

<div id="container" >
        <div id="A"></div>
        <div id="B"></div>
        <div id="C"></div>
        <div id="D"></div>
        <div id="buttonencontent">
            <div id="E"></div>
            <div id="F"></div>  
        </div>
        <div id="G"></div>
        <div id="H"></div>
        <div id="I"></div>
        <div id="J"></div>
    </div>

Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

vrijdag 30 maart 2007 16:36

Acties:

PuntPunter

Als je ipv #F nou #buttonencontent een margin-bottom geeft (staat nu op 50px dacht ik..) ?

vrijdag 30 maart 2007 17:02

Acties:

P.O. Box

misschien werkt dit in je stylesheet:

Cascading Stylesheet:

* {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

vrijdag 30 maart 2007 21:34

Acties:

DieRooie

Topicstarter

PuntPunter schreef op vrijdag 30 maart 2007 @ 16:36:
Als je ipv #F nou #buttonencontent een margin-bottom geeft (staat nu op 50px dacht ik..) ?

Dat werkt helaas niet.

Edwardvb schreef op vrijdag 30 maart 2007 @ 17:02:
misschien werkt dit in je stylesheet:
Cascading Stylesheet:
1
2
3
4
* {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

Ik moest me om heel eerlijk te zijn eerst even verdiepen in dit box-sizing principe. Ik las dat dit wordt gehanteerd om de verschillen tussen margin en padding tussen verschillende browsers op te lossen. Ik heb dat probleem niet omdat bij mij juist alles hetzelfde reageert. Corrigeer me als ik het fout begrijp (ik heb geprobeerd dit op verschillende plaatsen in de stylesheet te hanteren, maar zag geen verschil).

Het probleem heeft er mee te maken dat box F een topmarge heeft van 28 pixels en eigenlijk ook nog een marge moet hebben van 50pixels onderop. Als deze box F de waarde 100% hoogte meekrijgt dan is hij dus eigenlijk 100%+28pixels+50pixels = te groot. Ik zie momenteel maar 1 oplossing en dat is het gerbuik van javascript om die hoogte te berekenen....
of alles op te maken door gebruik van tabellen (maar dat is wel een erg slordige oplossing).

Waarschijnlijk doe ik iets structureel fout, want dit moet toch mogelijk zijn met hedendaagse CSS?

Beiden overigens bedankt voor de snelle replies!

zondag 1 april 2007 12:29

Acties:

Scheeve

Laat height eens weg dan

zondag 1 april 2007 12:48

Acties:

Mitrilvich

En als je bij #F:

code:

position: absolute;
padding-top: 28px;
padding-bottom: 28px;
height: 100%;
top: 0px;
z-index: [waarde eentje lager dan die van #B en #I]

Bij 100% pakt het element de hoogte van diens parent en neemt daar 100% van, in andere woorden: neemt de hoogte van parent over. Dit doet eerst #buttonencontent en daarna #F. Door #F achter (z-index) die andere blokken te laten vallen en de content toch in het zichtbare gebied te houden (padding) moet het wel lukken.

zondag 1 april 2007 22:28

Acties:

BikkelZ

CMD+Z

HTML 4.01 LOOSE is ook een DTD heren. En daar is niks mis mee als je maar weet waarom je dat doet. CSS is gewoon niet de perfecte standaard die het zou moeten zijn, zeker niet de oudere versies.

iOS developer