[XHTML] Probeersel met meerdere menu's werkt niet - Softwareontwikkeling

dinsdag 13 juli 2004 19:19

Acties:

Topicstarter

Nu de vakantie weer is begonnen en er wat meer tijd is om wat dingen - uit vrije wil

- bij te leren heb ik besloten om maar weer eens wat aan XHTML te gaan doen. Nu ik als voorbeeld de restyle van een website van de plaatselijke supermarkt - bij wijze van spreken - erbij wilde pakken kwam ik op een apart probleem terecht.

Het design ziet er grofweg zo uit:
Afbeeldingslocatie: http://gamergy.counter-strike.nl/~harm/got/layout.gif

Afbeeldingslocatie: http://gamergy.counter-strike.nl/~harm/got/layout.gif

Omdat ik echt alles in div'jes en spans wil gaan verstoppen had ik zoiets bedacht. De witte kleur is de body, die een width van 100%, een height van 100%, geen margin en padding heeft. De blauwe kleur is eigenlijk het omspannend geheel en zie je vanuit het gewone design niet. Heeft een breedte van 750px, en een hoogte van 100%. De top heeft een hoogte van 21px. Dat werkt allemaal prima. Echter, als ik nu de left- en rightmenus plus het oranjese content gedeelte wil gaan inpassen gaat het mis. De code hiervan ziet er zo uit:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>Index</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body style="width: 100%; height: 100%; margin: 0px; padding: 0px;">

<div style="width: 100%; height: 100%;" align="center">
 <div style="width: 750px; height: 100%; background-color: white; border: 1px solid black; text-align: left;">
  <div style="width: 100%; height: 21px; border-bottom: 1px solid black; background: url('gfx/top/bg.gif'); vertical-align: middle; color: white;">blabla</div>
  <div style="position: absolute; width: 100%; height: 100%;">
   <div style="position: absolute; left: 0px; top: 0px; width: 160px; height: 100%; border-right: 1px solid black; background: url('gfx/main/menu_bg.gif');"></div>
   <div style="position: relative; width: 430px; height: 100%; background: url('gfx/main/content_bg.gif');"></div>
   <div style="position: absolute; left: 590px; top: 0px; width: 160px; height: 100%; border-left: 1px solid black; background: url('gfx/main/menu_bg.gif');"></div>
  </div>
 </div>
</div>

<br />
</body>
</html>

Het resultaat in IE (ook in Firefox) hiervan ziet er zo uit:
Afbeeldingslocatie: http://gamergy.counter-strike.nl/~harm/got/ie.gif

Nou zet hij de rightmenu er wel goed neer en de content zou dus nog iets op moeten schuiven. Want waarschijnlijk zal het leftmenu gewoon daaronder hangen.

Ik heb al geprobeerd de position values 'om te draaien'. Want ik verwacht dat daar het probleem zit. Want als de positie absoluut is, is het toch zo dat de 'left' zich verhoudt tot de container waar hij in zit

.

Afijn, hier staat het zootje nog online. De vraag is dus, hij komt het er wel goed uit te zien

zeroxcool.net - curity.eu

dinsdag 13 juli 2004 19:47

Acties:

gorgi_19

Kruimeltjes zijn weer op :9

>> Webdesign & Graphics

Digitaal onderwijsmateriaal, leermateriaal voor hbo

dinsdag 13 juli 2004 19:58

Acties:

Verwijderd

De div met position: relative; staat tegen de linkerkant. Als je die op de juiste plek wilt hebben zal hij 160 + 1 pixels naar rechts moeten. Verder zou je hiervoor maximaal 4 div's nodig moeten hebben en de rest met de wat meer 'descriptive' elementen moeten doen. En zet alsjeblieft alle CSS in een extern bestand. Dit is toch onleesbaar?

dinsdag 13 juli 2004 20:42

Acties:

zeroxcool

Topicstarter

Verwijderd schreef op 13 juli 2004 @ 19:58:
De div met position: relative; staat tegen de linkerkant. Als je die op de juiste plek wilt hebben zal hij 160 + 1 pixels naar rechts moeten. Verder zou je hiervoor maximaal 4 div's nodig moeten hebben en de rest met de wat meer 'descriptive' elementen moeten doen. En zet alsjeblieft alle CSS in een extern bestand. Dit is toch onleesbaar?

In een extern bestand komt het ook wel, maar ik wil het eerst werken hebben. Vier divs in de zin van, één voor de top, twee voor de linker- en rechterkant, en één voor de content?

zeroxcool.net - curity.eu

dinsdag 13 juli 2004 20:58

Acties:

zeroxcool

Topicstarter

Heb er nu dit van gemaakt. Het probleem wat ik had is nu inderdaad opgelost. Echter, de verschillen in browsers treden nu op. IE kent dit probleem:
Afbeeldingslocatie: http://gamergy.counter-strike.nl/~harm/got/ie_2.gif

Afbeeldingslocatie: http://gamergy.counter-strike.nl/~harm/got/ie_2.gif

Je ziet dat de container 10 px van onderen ophoudt, de inline divs gaan echter gewoon door.

En Firefox dit:
Afbeeldingslocatie: http://gamergy.counter-strike.nl/~harm/got/firefox_1.gif

Afbeeldingslocatie: http://gamergy.counter-strike.nl/~harm/got/firefox_1.gif

De twee borders van de container zijn niet meer zichtbaar, en de pagina is inmens breed.

Help.

zeroxcool.net - curity.eu

dinsdag 13 juli 2004 22:14

Acties:

crisp

Devver

Pixelated

ga eerst eens uitzoeken hoe je met CSS fatsoenlijk centreert, en haal ook die br eens weg onderaan je verzameling div's

Je code heeft niets specifiek met xhtml te maken op de doctype na. Als je echt netjes wilt leren (x)html-en zoek dan eens in dit forum op het woord 'semantiek'

[ Voor 44% gewijzigd door crisp op 13-07-2004 22:16 ]

Intentionally left blank

woensdag 14 juli 2004 13:03

Acties:

zeroxcool

Topicstarter

Alignen heeft toch problemen in beide browsers. De Gecko engines hebben genoeg aan margin-(left|right): auto terwijl IE alignen met text-align: center moet, toch?

code:

<body style="text-align:center;">
    <div style="width:600px; text-align:left;
     margin-left:auto; margin-right:auto;">
        hier dan de content...
    </div>
</body>

Over de semantiek overigens. Er zijn nogal wat discussies daarover geweest ja. Maar wat ik eruit kan opmaken is mijn code fout omdat div's niet daarvoor bedoeld zijn?

[ Voor 26% gewijzigd door zeroxcool op 14-07-2004 14:46 ]

zeroxcool.net - curity.eu

woensdag 14 juli 2004 15:31

Acties:

Verwijderd

ZeRoXcOoL schreef op 14 juli 2004 @ 13:03:

Over de semantiek overigens. Er zijn nogal wat discussies daarover geweest ja. Maar wat ik eruit kan opmaken is mijn code fout omdat div's niet daarvoor bedoeld zijn?

Nee, ik gaf aan dat div's wel juist gebruikt zijn, je maakt daar nu namelijk onderscheid mee tussen bepaalde delen van het document. Een header. Een menu, een content gedeelte en een balk met informatie. Div's kunnen hier prima voor worden gebruikt.

Maar je had het erover dat je alles in div of span elementen ging stoppen. Dat is niet zo wijs. Gebruik hn elementen voor kopjes, tussenkopjes, gebruik lijst elementen voor lijsten, gebruik paragraaf elementen voor stukken tekst, etcetera.

Span en div elementen moet je vermijden als er elementen zijn die enigszins kunnen beschrijven wat ze bevatten.

woensdag 14 juli 2004 15:44

Acties:

zeroxcool

Topicstarter

Verwijderd schreef op 14 juli 2004 @ 15:31:
[...]

Nee, ik gaf aan dat div's wel juist gebruikt zijn, je maakt daar nu namelijk onderscheid mee tussen bepaalde delen van het document. Een header. Een menu, een content gedeelte en een balk met informatie. Div's kunnen hier prima voor worden gebruikt.

Maar je had het erover dat je alles in div of span elementen ging stoppen. Dat is niet zo wijs. Gebruik hn elementen voor kopjes, tussenkopjes, gebruik lijst elementen voor lijsten, gebruik paragraaf elementen voor stukken tekst, etcetera.

Span en div elementen moet je vermijden als er elementen zijn die enigszins kunnen beschrijven wat ze bevatten.

Dat bedoelde ik eigenlijk ook. De grove lay-out zoals de code die er nu staat kan uiteraard wel in divs. Behalve dat tekstje (foei

).

Maar even weer van offtopic af. Hoe is dit op te lossen?

zeroxcool.net - curity.eu

woensdag 14 juli 2004 16:49

Acties:

Verwijderd

ZeRoXcOoL schreef op 14 juli 2004 @ 15:44:
Maar even weer van offtopic af. Hoe is dit op te lossen?

het centreren van een div (of willekeurig ander item) kan je als volgt doen:

code:

div#center {
    position: absolute;
    left: 50%;
    width:500px;
    height:100%;
    margin-left: -250px; /* Dit is de truuk, zet deze naar -(width/2) */
    border: 1px solid #000;
}

werkt in alle browsers, incl. IE, deze oplossing is al best wel oud eigenlijk, volgens mij kwam ie van oh,when?

[ Voor 10% gewijzigd door Verwijderd op 14-07-2004 23:46 ]

woensdag 14 juli 2004 17:20

Acties:

crisp

Devver

Pixelated

Shadow: dat werkt idd, maar als je window te smal is dan gaan er dingen wegvallen. De "text-align" versie met margin: 0 auto; vind ik dan netter.
de -(width/2) truuk heeft echter als voordeel dat je 'm ook voor centreren in de hoogte kan gebruiken (sommige browsers hebben daar echter moeite mee waaronder Safari en Konquerer).

Intentionally left blank

woensdag 14 juli 2004 21:38

Acties:

zeroxcool

Topicstarter

Ik word gek

. Heb het nu geprobeerd naar het idee van http://www.positionisever...dered-borders-center.html. Maar dat vind ik persoonlijk te tricky.

Het probleem is nu dus eigenlijk dat de height: 100% niet echt werkt. Ook is de width in Firefox niet echt perfect. Hoe kun je dat dit dan oplossen?

zeroxcool.net - curity.eu

woensdag 14 juli 2004 23:46

Acties:

Verwijderd

crisp schreef op 14 juli 2004 @ 17:20:
Shadow: dat werkt idd, maar als je window te smal is dan gaan er dingen wegvallen. De "text-align" versie met margin: 0 auto; vind ik dan netter.
de -(width/2) truuk heeft echter als voordeel dat je 'm ook voor centreren in de hoogte kan gebruiken (sommige browsers hebben daar echter moeite mee waaronder Safari en Konquerer).

ja je hebt wel gelijk.. zoals zo vaak

toch maar eens naar die oplossing van jou gaan kijken.

Pagina: 1

Reageer