[CSS] voor dummies - Deeltje 8

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_57497673
quote:
Op woensdag 19 maart 2008 21:51 schreef GVRuud het volgende:
Uiteindelijk ben ik toch maar bezweken onder een beunhaasmethode omdat ik er echt niet aan uit kwam en de html wel een keertje af mocht zijn...

Zie http://bus.nimeon.nl/. De lijntjes die links en rechts van de header doorlopen worden nu met javascript gepositioneerd.

Toch heel erg bedankt voor je moeite!
  donderdag 20 maart 2008 @ 13:58:20 #252
12880 CraZaay
prettig gestoord
pi_57499904
quote:
Op donderdag 20 maart 2008 12:17 schreef GVRuud het volgende:

Zie http://bus.nimeon.nl/. De lijntjes die links en rechts van de header doorlopen worden nu met javascript gepositioneerd.
Bah Waarom niet gewoon die header 100% breed en een breed plaatje met die lijnen maken en die gecentreerd als achtergrond voor de header gebruiken? De afbeelding wordt daar misschien 1 kilobyte groter van.
pi_57500975
Ja ik had het liever ook anders opgelost. Maar een afbeelding van 2000px (of meer) breder vind ik helemaal geen mooie oplossing. Bij deze oplossing garandeer ik dat de lijnen nooit ophouden
pi_57502103
quote:
Op donderdag 20 maart 2008 14:56 schreef GVRuud het volgende:
Ja ik had het liever ook anders opgelost. Maar een afbeelding van 2000px (of meer) breder vind ik helemaal geen mooie oplossing. Bij deze oplossing garandeer ik dat de lijnen nooit ophouden
Je kunt het ook doen net als die gast hiervoor met die rode/groene/blauwe div's.
En dan die achterste 2 dus een achtergrondplaatje geven met repeat-x
  donderdag 20 maart 2008 @ 16:08:40 #255
12880 CraZaay
prettig gestoord
pi_57502393
quote:
Op donderdag 20 maart 2008 14:56 schreef GVRuud het volgende:
Ja ik had het liever ook anders opgelost. Maar een afbeelding van 2000px (of meer) breder vind ik helemaal geen mooie oplossing. Bij deze oplossing garandeer ik dat de lijnen nooit ophouden
Waarom niet? Je moet natuurlijk afwegen hoeveel van je bezoekers fullscreen browsen op een scherm van 25" of groter

Javascript gebruiken voor lay-out, terwijl het voor gedrag bedoeld is, vind ik helemaal ranzig. Maar ieder z'n meug
pi_57502649
quote:
Op donderdag 20 maart 2008 07:29 schreef Chandler het volgende:

[..]

IE7 & de laatste versie van FF geven het allemaal heel netjes weer

Ik zit dus alleen met 100% width en de juiste manier van de afbeeldingen naast en onder elkaar te zetten.
Een randje eromheen zetten wil nog wel eens helpen om te kijken wat er precies gebeurt
http://duft.nl/web/test2.html

Zo te zien zijn die 2 plaatjes linksboven net te hoog, waardoor de plaatjes daaronder naar een volgende regel worden verplaatst ofzo....
pi_57505441
Het probleem is dat ik het niet zie

Hoe zou ik dat kunnen oplossen?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_57505687
quote:
Op donderdag 20 maart 2008 18:55 schreef Chandler het volgende:
Het probleem is dat ik het niet zie

Hoe zou ik dat kunnen oplossen?
Al die blokjes een vaste hoogte geven?
pi_57510638
Na tijdenlang websites gemaakt te hebben wil ik het nu met divjes proberen. Aangezien het nog nieuw voor me is en het me (mijn mening) toch redelijk wil lukken, loop ik al enkele dagen tegen hetzelfde probleem aan.

Wat ik wil is een site opgedeeld in 6 divs. Een container die de rest bevat, namelijk de header, de body (bevat een div menu en een div content) en de footer.
Voorbeeld/vooruitgang is hier te zien: www.bugworks.eu/stuff/fok/div.html

Alles lijkt goed te zijn tot het moment ik het menu aan ga passen (meer regels/tekst), dan overlapt hij de footer. Doe ik hetzelfde bij de content dan wordt de footer netjes zoals bedoeld opgeschoven naar beneden. Nu heb ik al vanalles geprobeerd, maar ik kan geen oplossing vinden. Weet iemand van jullie waar het aan ligt? Alvast bedankt. :Y

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28		#page_container {
border: 1px solid;
padding: 10px;
margin-left: 150px;
margin-right: 250px;
}
#page_header {
border: 1px solid;
height: 100px;
margin-bottom: 10px;
}
#page_body {
border: 1px solid;
}
#page_menu {
position: absolute;
width: 190px;
border: 1px solid;
}
#page_content {
margin-left: 200px;
border: 1px solid;
}
#page_footer {
border: 1px solid;
height: 50px;
margin-top: 10px;
}


HTML/divjes
1
2
3
4
5
6
7
8		<div id="page_container">
  <div id="page_header">Header</div>
  <div id="page_body">
    <div id="page_menu">Menu<br /><br /><br /><br /><br /><br />Menu</div>
    <div id="page_content">Content<br /><br /><br />Content</div>
  </div>
  <div id="page_footer">Footer</div>
</div>
pi_57510731
Je menu heeft een position:absolute. Daarmee haal je 'm uit de natuurlijke float, dus de rest houdt geen rekening meer met de grootte van je menu.

Als je 'm gewoon positioneert met margins, zou het in principe goed moeten gaan.
pi_57511232
Het de position:absolute weggehaald en "margin-top: -150px;" toegevoegd aan #page_content, het enige nadeel is dat hij uitgaat van het einde (laagste) van het menu div, dus dat verschilt nogal.

Maar ondanks bovenstaande blijft het menu nog steeds over het footer div gaan .
pi_57511479
als je het mij vraagt moet je helemaal niet met zulke grote marges hoeven werken.. Ik ga er even op los!
pi_57511997
http://duft.nl/web/div.html
Een extra divje met clear:both was de truc!
Weltrusten
  donderdag 20 maart 2008 @ 23:38:02 #264
12880 CraZaay
prettig gestoord
pi_57512024
Zonder #page_body kan het ook prima, scheelt weer een element
pi_57512055
Dank je .

Slaap lekker
pi_57512058
quote:
Op donderdag 20 maart 2008 23:38 schreef CraZaay het volgende:
Zonder #page_body kan het ook prima, scheelt weer een element
zou idd ook kunnen, en dan de footer clear:both geven (of misschien is dat nieteens nodig)

Maar misschien moet die #page_body nog een bepaalde opmaak krijgen...
pi_57512100
quote:
Op donderdag 20 maart 2008 23:39 schreef mcDavid het volgende:

[..]

zou idd ook kunnen, en dan de footer clear:both geven (of misschien is dat nieteens nodig)

Maar misschien moet die #page_body nog een bepaalde opmaak krijgen...
#page_body had ik eigenlijk als container div, hoeft dus geen opmaak oid.
pi_57512142
quote:
Op donderdag 20 maart 2008 23:40 schreef BugWorks het volgende:

[..]

#page_body had ik eigenlijk als container div, hoeft dus geen opmaak oid.
dan die skippen idd. Veel makkelijker.
pi_57512193
quote:
Op donderdag 20 maart 2008 23:42 schreef mcDavid het volgende:

[..]

dan die skippen idd. Veel makkelijker.
Heb het nu net even aangepast, dus zonder die body div. Dat werkt idd, alleen is jouw oplossing voor een groot deel dus overbodig geworden, maar toch bedankt voor je moeite .

Edit
Je extra div lijkt dus toch noodzakelijk.

[ Bericht 5% gewijzigd door BugWorks op 20-03-2008 23:51:41 ]
pi_57514094
quote:
Op donderdag 20 maart 2008 16:08 schreef CraZaay het volgende:

[..]

Waarom niet? Je moet natuurlijk afwegen hoeveel van je bezoekers fullscreen browsen op een scherm van 25" of groter

Javascript gebruiken voor lay-out, terwijl het voor gedrag bedoeld is, vind ik helemaal ranzig. Maar ieder z'n meug
Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.
  vrijdag 21 maart 2008 @ 03:39:03 #271
32768 DionysuZ
Respect my authority!
pi_57514146
die lijntjes kun je heus wel op een andere manier oplossen zonder javascript te gebruiken =). Wees creatief
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
  vrijdag 21 maart 2008 @ 08:07:29 #272
12880 CraZaay
prettig gestoord
pi_57514616
quote:
Op vrijdag 21 maart 2008 03:03 schreef GVRuud het volgende:

Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.
Het is visueel en dus layout wat mij betreft, ook als het niets toevoegt aan de gebruikersbeleving. Ik snap wel dat je het zo gedaan hebt hoor en ik heb ook echt weleens het een en ander gepositioneerd met JS. Je moet aan afweging maken tussen twee kwaden in dit geval, en ik kies dan altijd voor zo min mogelijk elementen in de HTML die alleen voor opmaak gebruikt worden en geen JS, dus dan kom je uit op een oplossing met een brede achtergrondafbeelding. Neemt niet weg dat beide punten verdedigbaar zijn
  vrijdag 21 maart 2008 @ 12:40:11 #273
32768 DionysuZ
Respect my authority!
pi_57518546
ik erger me weer dood aan microsoft. Aangezien ze opacity nog steeds niet accepteren in IE7, ben ik genoodzaakt alpha filter erop te gebruiken. Maar wat hebben ze nou geflikt? Ze hebben cleartype gewoon uitgezet voor elementen waar dxtransform op plaatsvindt.
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_57518718
quote:
Op vrijdag 21 maart 2008 03:03 schreef GVRuud het volgende:

[..]

Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.
Nogmaals: kijk even onderaan de vorige pagina. Die gast die links en rechts een verschillende kleur background wil. Als je het precies zo doet gaat het ook goed. Doe je alleen een achtergrondafbeelding ipv een achtergrondkleur!
pi_57518771
quote:
Op donderdag 20 maart 2008 23:44 schreef BugWorks het volgende:

[..]

Heb het nu net even aangepast, dus zonder die body div. Dat werkt idd, alleen is jouw oplossing voor een groot deel dus overbodig geworden, maar toch bedankt voor je moeite .

Edit
Je extra div lijkt dus toch noodzakelijk.
Volgens mij zou je ook de footer kunnen gebruiken ipv die extra div. Geef die ff een clear:both (dit geeft aan dat er aan beide kanten van die div geen float-objecten mogen staan) en kijk wat er gebeurt.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deeltje 8
Index

» digital corner

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')