[xHTML/CSS] divs ipv table - Softwareontwikkeling

zondag 19 december 2004 17:46

Acties:

Topicstarter

Aangezien je tegenwoordig geen sites meer "mag" maken dmv. tables, wil ik een nieuwe site gaan ontwerpen waarbij ik gebruik wil maken van DIVs...

Maar goed, na 300 ideeën uitgewerkt te hebben krijg ik een leuke layout nogsteeds niet voor elkaar zonder de table opmaak... Call me stupid, maar het lukt me gewoon niet

Nu heb ik het volgende idee, wat ik probeer uit te werken (v. 0.1 zeg maar

)

Afbeeldingslocatie: http://www.neejoh.nl/newsite/new-full.jpg

^*click*
(is een IFrame verstandig, of zal dit ook een DIV moeten worden?)

Als ik dit probeer uit te werken krijg ik dit:
Internet Explorer:

Afbeeldingslocatie: http://www.neejoh.nl/newsite/new-IE.jpg

^*click*

FireFox:

Afbeeldingslocatie: http://www.neejoh.nl/newsite/new-FF.jpg

^*click*

Ok, nu ben ik best bereid er wat voor te doen, maar ik wordt gek van alle verschillende CSS voorbeelden die ik via google gevonden heb

De één werkt wél onder IE maar niet onder FF en omgekeerd... Ik zie door de bomen het bos niet meer..

Nu is mijn vraag, hoe krijg ik in ****naam mijn DIVs op de goede plaats?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>./Neejoh</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
<body>
<div id="back_top" />
<div id="main">Bla bla bla, yada yada yada (:</div>
</body>
</html>

Cascading Stylesheet:

html, body {
    margin: 0px 0px 0px 0px;
    background-color: #000;
    background-image: url(grafix/back_main.jpg);
    background-position: center;
    background-repeat: repeat-y;
    text-align: center;
    }

#back_top {
    background-image: url(grafix/back_top.jpg);
    background-position: center;
    background-repeat: no-repeat;
    height: 87px;
    }

#main {
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFF;
    width: 250px;
    border: 1px solid #899C9C;
    background-color: #0B0B0B;
    }

Ik heb alles even een beetje terug gebracht naar zo min mogelijk onzinnige code waarvan ik weet dat het niet werkt... (heb zelf lopen klote met position ed.)

Ik hoop écht dat jullie mij kunnen helpen, anders ben ik bang dat ik weer terug moet gaan naar tables en dat doe ik liever niet... Ik leer liever een nieuwe "goede" methode die voorbereid is op de toekomst.

[ Voor 7% gewijzigd door Neejoh op 19-12-2004 17:49 ]

zondag 19 december 2004 18:37

Acties:

Clay

cookie erbij?

Je hebt niet voor elk stuk interface wat je ziet een aparte div nodig

stel je centreert de hele site met een div op 700px en margin:auto, dan heb je al 1 div om die header bovenin als background te zetten (met no-repeat). padding-top erbij, en de content komt er niet meer op te liggen.

Ik zou ook proberen ids (en classes) een naam te geven die geen positie impliceert. Wie weet staat die de volgende keer ergens anders

en dan klopt de naam niet meer.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

zondag 19 december 2004 18:49

Acties:

Verwijderd

je "mag" net zo min alleen maar divs gebruiken

het idee van html is (al sinds het begin) dat je elementen gebruikt waar ze voor bedoeld zijn, een p voor een paragraaf, een ul voor een lijst (opsomming, menu etc)

Ik snap uit je plaatje niet echt goed wat je wilt;
- dit getekende gecentreerd en vaste breedtes, hoe breedt je venster ook is
- bovenste vaste breedte en de rest rekkend met een marge van 20 px aan de zijkanten
- iets anders

text-align: centerp; lijnt alleen de text uit en heeft geen invloed op blockelementen, tenminste zo hoort het, in IE lijnen block elementen zo wel centraal uit

margin-left: auto; margin-right: auto; centreert normaal je block in het midden, behalve dus in IE, waar je bovenstaande methode dus kan gebruiken.

Anyways, verduidelijk even wat je precies wilt

zondag 19 december 2004 21:44

Acties:

Neejoh

Topicstarter

* Neejoh wordt gek *

@Clay: Heb van alles geprobeerd met wat jij zegt, maar kom d'r niet uit?

Cascading Stylesheet:

html, body {
    margin: 0px 0px 0px 0px;
    background: #000 url(grafix/back_main.jpg) repeat-y center;
    }

#back_top {
    background: #000 url(grafix/back_top.jpg) no-repeat center;
    height: 87px;
    }

Waar zou ik vervolgens de margin/padding neer moeten zetten? Hij rekt in mijn tests alleen maar 87px uit, maar plaatst hem over het logo heen...

@Mophor: De bedoeling is dat de site gewoon in het midden gecentreerd wordt, wat de resolutie ook mag wezen. Met de pijlen aan de zijkant wou ik alleen aangeven dat ik de tekstvlakken alleen iets naar binnen springen. Hoe ik de preciese opmaak van de tekstvlakken (én navigatie) wil weet ik nog niet precies, maar zodra ik eenmaal weet hoe ik de tekstvlakken kan laten drijven in de "main-div" kan ik er zelf wel wat mee spelen...

[ Voor 13% gewijzigd door Neejoh op 19-12-2004 21:46 ]

zondag 19 december 2004 23:43

Acties:

T-MOB

Aangezien je je hele site op een vaste breedte wil hebben kun je gewoon een zogenaamde wrapper gebruiken:

HTML:

<body><div id="wrapper">

 <div id="back top" />
 <div id="main" />

</div></body>

Met CSS

Cascading Stylesheet:

body
{
 text-align: center; /* voor IE < 6 */
}

#wrapper
{
 width: 700px;
 text-align: left; /* voor IE < 6 */
 margin: 0 auto; /* voor échte browsers */
}

[ Voor 15% gewijzigd door T-MOB op 19-12-2004 23:45 ]

Regeren is vooruitschuiven