[CSS] DIV's in gecentreerde website. - Softwareontwikkeling

dinsdag 19 september 2006 15:52

Acties:

Topicstarter

Het probleem met DIV-jes absoluut en relatief positioneren is hier al zo vaak voorgekomen dat ik me schaam nog een topic hierover te openen. Maar ik kom er niet meer uit en geef het na erg lang geklooi op.

Ik ben (of was eigenlijk) met een website bezig welke prima werkte. Tenminste .. dat dacht ik. Nu schuiven opeens(?) bepaalde div-layers niet meer mee als ik de browser resize. De website waarover het gaat is creativeline.nl. En het gaat over de afbeeldingen aan de rechterkant, en een klein hoekje wat het vierkant in het midden afrond aan de rechter onderkant.

In FF werkt alles prima en blijft alles netjes op z'n plek. IE maakt er een zoootje van. Zodra ik echter de browser resize en refresh staat alles weer prima op zijn plaats, totdat ik weer het IE-venster ga vergroten of verkleinen.

Waar vind ik het probleem? Waar zit de fout?

dinsdag 19 september 2006 16:17

Acties:

Rowanov

Kop eens wat anders...

Geef eens screenshots, want ik kan het probleem hier niet reproduceren.

Ik kan je wel vertellen wat relatief en absoluut positioneren inhoud; relatief houdt in dat je het element ten-opzichte van de parent positioneert, maar niet uit de document-flow haalt (er is een denkbeeldig blok op de plaats waar het element staat, ook al heb je hem een offset van een x aantal pixels gegeven, dan blijft het blok op dezelfde plek). Als je een element absoluut positioneert, dan haal je hem uit de flow en er is geen lege plek te zien; alle content schuift door.

dinsdag 19 september 2006 16:33

Acties:

Wolf3D

Topicstarter

Bedankt voor je uitleg.
Wat betreft het screenshot, ik had ergens in mijn bericht een url gezet: creativeline.nl. Hij was een beetje verborgen, maar stond er wel

.

Ik vind het altijd lastig te bepalen wat nou relatief is en wat absoluut, maar volgens mij heb ik het goed gedaan Ik heb hetzelfde principe ook toegepast op een andere website waar wel alles goed werkt.

De gehele website (800x600) is gecentreerd in het midden van de pagina. Alle onderdelen binnen deze pagina moeten dus op dezelfde plek in de gecentreerde website blijven staan. Daarvoor maak ik gebruik van een div in een div. De eerste zet ik op 'relative' en de tweede op 'absolute'.

dinsdag 19 september 2006 16:42

Acties:

TeeDee

CQB 241

Ik zie ook <table> voor je layout. Dat is vragen om problemen, zeker als je daarin divs (relative) met daarin weer divs (absolute) gaat plaatsen. Gooi hier nog wat geneuzel van een niet nader te noemen browser (IE dus) tegenaan et voila: je website is kaduuk in IE.

Als ik wat algemene pointers mag geven:

1: je hebt nu allemaal inline style elementen. Als je die nu eens zoveel mogelijk groepeer en dan in een .css file plaats. (caching e.d.)
2: drop je tables voor layout doeleinden
3: Lees je eens in om erachter te komen wat semantisme is.

Edit: ah, je hebt al een 'style.css' erin staan. Waarom dan alsnog zoveel inline styling?

[ Voor 75% gewijzigd door TeeDee op 19-09-2006 16:48 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 19 september 2006 16:55

Acties:

TafkaT

Volgens mij is het een ie-bug waarbij de absolute positioning van je divs verloren gaat als de parent geen width heeft.

(en je code is nogal rommelig

)

[ Voor 13% gewijzigd door TafkaT op 19-09-2006 16:55 ]

dinsdag 19 september 2006 16:56

Acties:

crisp

Devver

Pixelated

aanvullend op TeeDee: om horizontaal te centreren hoef je geen relative of absolute positioning te gebruiken. Probeer zoveel mogelijk alles in de flow te houden, scheelt je een hoop problemen.

edit: oh, linkje bekeken. Het is dus een postzegelsite met table-layout. Vergeet mijn opmerking dan maar...

[ Voor 22% gewijzigd door crisp op 19-09-2006 16:57 ]

Intentionally left blank

dinsdag 19 september 2006 17:01

Acties:

Rowanov

Kop eens wat anders...

Een tabel-loze en correctere manier om je gehele website met css te centreren is de volgende:

HTML:

<body>
  <div id="container">
  ...content...
  </div>
</body>

Cascading Stylesheet:

body {
  text-align: center;
}
#container {
  width: 700px;
  margin: 0 auto;
  text-align: left;
}

Edit:

Wolf3D schreef op dinsdag 19 september 2006 @ 16:33:
Bedankt voor je uitleg.
Wat betreft het screenshot, ik had ergens in mijn bericht een url gezet: creativeline.nl. Hij was een beetje verborgen, maar stond er wel .

Die heb ik gezien, vandaar mijn mededeling dat het probleem hier niet reproduceerbaar is; daar bedoel ik mee dat ik geen problemen zie als ik de pagina open en dat een screenshot handig is om het exacte probleem er even uit te lichten

[ Voor 45% gewijzigd door Rowanov op 19-09-2006 17:03 ]

dinsdag 19 september 2006 17:03

Acties:

TafkaT

Hmm, nog even een opmerking: waarom iets doen met 10 verschillende plaatjes als je het met 1 plaatje kan doen?

dinsdag 19 september 2006 17:04

Acties:

TeeDee

CQB 241

En dan het verticale gedeelte nog en dan heb je voor een groot gedeelte het e.e.a. al werkend.

Bijkomend voordeel van semantisme en table-less layouts zal er (hoogstwaarschijnlijk) voor zorgen dat de site ook een betere PageRank zal krijgen. (nu is er geen PageRank)

TafkaT schreef op dinsdag 19 september 2006 @ 17:03:
Hmm, nog even een opmerking: waarom iets doen met 10 verschillende plaatjes als je het met 1 plaatje kan doen?

Dat viel mij ook op. Waarom moeilijk doen als het ook met 1 afbeelding kan.

[ Voor 39% gewijzigd door TeeDee op 19-09-2006 17:05 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 19 september 2006 17:22

Acties:

Wolf3D

Topicstarter

ZOW! Dat is een hoop kritiek! Maar .. kan ik altijd gebruiken. Wel even slikken....
Waar zal ik beginnen.

De 10 plaatjes ipv. 1, is gedaan om de layout makkelijk aan te kunnen passen, en makkelijk een plaatje te kunnen veranderen of ermee te kunnen schuiven. Een nadeel van 1 plaatje, is dat de scherpe randjes om de plaatjes heen door JPG lelijk worden gemaakt. Dan kan ik de compressie lager zetten, maar dan wordt het totale plaatje wel erg groot.

Wat betreft het table-less designen. Tja, het designen met tables zit er al zo lang in bij mij, dat ik het lastig vind om die switch te maken, maar .. moet ik wel gaan doen idd. Het scheelt inderdaad in pagerank, had ik ook al wat onderzoek naar gedaan.

Het centreren d.m.v. CSS ga ik meteen uitproberen. Dat scheelt iig een hele tabel.

Het semantisme document is ook erg interesant!! Eens kijken of ik mijn ontwikkelmethode kan gaan omgooien....

dinsdag 19 september 2006 17:33

Acties:

TeeDee

CQB 241

Wolf3D schreef op dinsdag 19 september 2006 @ 17:22:
ZOW! Dat is een hoop kritiek! Maar .. kan ik altijd gebruiken. Wel even slikken....
Waar zal ik beginnen.

Het komt uit een goed hart moet je maar denken

De 10 plaatjes ipv. 1, is gedaan om de layout makkelijk aan te kunnen passen, en makkelijk een plaatje te kunnen veranderen of ermee te kunnen schuiven. Een nadeel van 1 plaatje, is dat de scherpe randjes om de plaatjes heen door JPG lelijk worden gemaakt. Dan kan ik de compressie lager zetten, maar dan wordt het totale plaatje wel erg groot.

Ok, zolang je er maar een goede reden voor hebt.

Wat betreft het table-less designen. Tja, het designen met tables zit er al zo lang in bij mij, dat ik het lastig vind om die switch te maken, maar .. moet ik wel gaan doen idd.

De 'switch' is inderdaad lastig, daarna wil je niet anders meer. Het ontwikkelen gaat in ieder geval een stuk sneller/makkelijker. Het is en blijft lastig om het e.e.a. werkend te krijgen in veel browsers, maar daar kan je GoT voor (mis/ge)bruiken.

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 19 september 2006 18:06

Acties:

Wolf3D

Topicstarter

TeeDee schreef op dinsdag 19 september 2006 @ 17:33:
De 'switch' is inderdaad lastig, daarna wil je niet anders meer. Het ontwikkelen gaat in ieder geval een stuk sneller/makkelijker. Het is en blijft lastig om het e.e.a. werkend te krijgen in veel browsers, maar daar kan je GoT voor (mis/ge)bruiken.

Ja, is vaak zo inderdaad. Helaas duurt het vaak een tijdje voordat zo'n switch gemaakt is, maar ben blij dat ik even ben wakker geschud. Ik wil op professioneel niveau websites maken, dus .. dit is een goed begin!

Mag ik dan meteen even (mis/ge)bruik maken van jullie of jouw expertise. De onderstaande code geplaatst door Rowanov werkt niet voor het vertikaal centreren:

Rowanov schreef op dinsdag 19 september 2006 @ 17:01:
Een tabel-loze en correctere manier om je gehele website met css te centreren is de volgende:
HTML:
1
2
3
4
5
<body>
  <div id="container">
  ...content...
  </div>
</body>
Cascading Stylesheet:
1
2
3
4
5
6
7
8
body {
  text-align: center;
}
#container {
  width: 700px;
  margin: 0 auto;
  text-align: left;
}

Hoe krijg ik het wel voor elkaar om via CSS naast horizontaal ook vertikaal te centreren?

dinsdag 19 september 2006 19:21

Acties:

TeeDee

CQB 241

Eerste hit: [google=css+div+vertical], of nog beter de 2e hit, die van Hicks, deze dus.

Heart..pumps blood.Has nothing to do with emotion! Bored