Lagen in CSS / XHTML

[Cybot12999]

hallo,

Ik had een vraag over CSS / XHTML.

Hoe kan je, verschillende lagen maken. Zo, dat ik op mijn site (www.bouwjeeigeniphone.tk) aan de rechterkant, in de witruimte, de shoutbox kan zetten. (die staat nu onderaan)

Verder heb ik een marge ingesteld van 7.5%, maar ik zou dus die shoutbox op de witruimte die gemaakt wordt door die marge.

Wie kan mij helpen?

Alvast bedankt!

[RobIII]

Wat heb je al geprobeerd? Gezocht? Gevonden? Al eens een tutorial CSS doorgenomen? Ben je bekend met absolute/relatieve positionering?

En, om maar wéér eens de bekende vraag te stellen: waarom XHTML? En waarom niet gewoon HTML (Strict)? Heb je daar een goede reden voor of wil je gewoon "hip" zijn?

[ Voor 39% gewijzigd door RobIII op 14-09-2008 14:31 ]

[abort_]

lees eens wat over de "z-index" property in css.

[Snake]

RobIII schreef op zondag 14 september 2008 @ 14:30:
En, om maar wéér eens de bekende vraag te stellen: waarom XHTML? En waarom niet gewoon HTML (Strict)? Heb je daar een goede reden voor of wil je gewoon "hip" zijn?

En waarom niet?

Het is een manier om je uit te drukken, en als je je beter voelt met XHTML then so be it. Ik werk er ook liever mee, ivm dat alle tags gesloten moeten worden, voelt net iets beter.

[WeeJeWel]

RobIII schreef op zondag 14 september 2008 @ 14:30:
En, om maar wéér eens de bekende vraag te stellen: waarom XHTML? En waarom niet gewoon HTML (Strict)? Heb je daar een goede reden voor of wil je gewoon "hip" zijn?

Omdat als iedereen standaard XHTML zou schrijven de webwereld er een stuk overzichtelijker op zou worden

[Snake]

WeeJeWel schreef op zondag 14 september 2008 @ 14:35:
[...]

Omdat als iedereen standaard XHTML zou schrijven de webwereld er een stuk overzichtelijker op zou worden

Zelfde met als iedereen in standaard HTML zou schrijven.

Dus die vergelijking gaat niet op.

Imo is het hetzelfde als perl of php. Waarom kies je iets? Persoonlijke voorkeur.

[WeeJeWel]

Nee, in html kan iedereen zijn eigen stijl schrijven. Tags die niet worden gesloten bijv. XHTML is gewoon netjes, georganiseerd.

[Rowanov]

Dat is onzin; in xhtml kan net zo goed totale bagger worden geproduceerd. Een tabellen-layout in xhtml is geen meter chiquer dan dezelfde layout in html. Het ligt er bij beide aan hoe je ze hanteert.

[Gomez12]

Tsja, maar zolang xhtml geen ondersteuning in IE heeft dan vind ik het iets verder gaan dan een persoonlijke smaak...

Het klinkt heel erg hip alleen als je het compleet toepast benadeel je een mogelijke 30% van je klanten ( je IE gebruikers )...

[Cybot12999]

Bedankt voor de antwoorden,

1. Waarom xhtml:
Aangezien ik dit jaar voor het eerst informatica op school heb, en we met xhtml werken, heb ik als standaart xhtml gekozen. (nee ik wil niet hip zijn ofzo)

2 Z-Index,
Hier heb ik al het een en het ander over gelezen, de z-index zorgt ervoor wat boven wat komt.

Toch begrijp ik het niet, heb er echt al veel over gelezen, dat je <div> moet gebruiken, en toch lukt het niet.....

[Snake]

Cybot12999 schreef op zondag 14 september 2008 @ 15:21:
Bedankt voor de antwoorden,

1. Waarom xhtml:
Aangezien ik dit jaar voor het eerst informatica op school heb, en we met xhtml werken, heb ik als standaart xhtml gekozen. (nee ik wil niet hip zijn ofzo)

2 Z-Index,
Hier heb ik al het een en het ander over gelezen, de z-index zorgt ervoor wat boven wat komt.

Toch begrijp ik het niet, heb er echt al veel over gelezen, dat je <div> moet gebruiken, en toch lukt het niet.....

Wat lukt er niet? Wat heb je geprobeerd?

[Cybot12999]

ik heb verschillende sites gevolgd, zoals: http://www.handleidinghtm...nten/css-elementen10.html , en heb ook bij google gezocht op "lagen in css" en de eerste 4 links uitgeprobeert. Maar of het komt onder de menubalk te staan, of het komt helemaal niet op de site te staan

[Gomez12]

Maar wat werkt er dan exact niet?

Als ik 2 divjes aanmaak, deze absoluut positioneer op dezelfde plek en de ene een hogere z-index meegeef dan de andere werkt dit altijd afaik.

Persoonlijk heb ik een hekel aan absoluut positioneren.

Maar kom eens met een versimpeld stukje wat niet werkt ( zeg maar stuk of 6 regels ) dan kan er commentaar op gegeven worden. Nu is het meer zoiets van, het werkt niet...

[Cybot12999]

sorry dat ik onduidelijk ben. Ik heb, met een marge, de middelste kolom verkleint. Nou is er door die marge, een witruimte ontstaan aan de linker/rechter zijkant. Nou wou ik graag op die lege ruimte, de shoutbox zetten. Maar door die marges werkt het niet. Is er dan een oplossing, hou én de marges blijven bestaan, én de shoutbox op de witruimte komt? (dat laatmaarzeggen, de ene laag, de tekst met marges is, en laag 2 de shoutbox is)

Het is nu gelukt om de shoutbox, bovenop de rest te krijgen. Maar nu valt mijn rechtermarge totaal weg. Hoe krijg ik die weer terug?
Beide marges ook weer terug. Maar nu wordt de shoutbox ook "mee-gemarged" Hieronder de code:
<body>
<!--#include file="menu.txt" -->
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<div id="d1">
<iframe title="bouwje" src="http://www4.shoutmix.com/?bouwje" width="160" height="300" frameborder="0" scrolling="auto">
<a href="http://www4.shoutmix.com/?bouwje">View shoutbox</a>
</iframe>
<br />
<!-- End ShoutMix -->
</div>
<div id="d2" class="marges">

De code gaat van Body tot en met de plek waar ik de marges weer wil laten beginnen (bij de afbeeldingen tot het einde)

[ Voor 57% gewijzigd door Cybot12999 op 14-09-2008 17:39 ]

[Rowanov]

Ik denk dat je veel te moeilijk aan het doen bent; deze layout ziet er redelijk standaard uit. Dit type layout trek je zo van google, maar daar leer je niet veel van. Kijk eens op http://modernmarkup.nl/ voor de basisbeginselen. Als je dan nog vragen hebt over specifiek css eigenschappen kan je dat in de referentie opzoeken.

Mocht dit allemaal nog niet voldoende zijn kan je hier altijd om hulp vragen, maar geef er dan een schets bij hoe het er uit moet zien. Ik kan niet aan de indruk ontkomen dat je je in bochten wringt die niet nodig zijn

[Cybot12999]

Rowanov schreef op zondag 14 september 2008 @ 17:30:
Ik denk dat je veel te moeilijk aan het doen bent; deze layout ziet er redelijk standaard uit. Dit type layout trek je zo van google, maar daar leer je niet veel van. Kijk eens op http://modernmarkup.nl/ voor de basisbeginselen. Als je dan nog vragen hebt over specifiek css eigenschappen kan je dat in de referentie opzoeken.

Mocht dit allemaal nog niet voldoende zijn kan je hier altijd om hulp vragen, maar geef er dan een schets bij hoe het er uit moet zien. Ik kan niet aan de indruk ontkomen dat je je in bochten wringt die niet nodig zijn

Bedankt voor je antwoord. Ik heb de layout, echt niet van google gehaald ofzo. Ik heb hem zelf getypt met HTML-Kit. Alleen het menu'tje is gemaakt met een programmaatje.

[Verwijderd]

Misschien is dat wel het probleem hè? Dat je je bezighoudt met dingen die je (nog) niet beheerst. Je wilt direct een bepaald resultaat halen, maar mist de basiskennis. Had je tóch beter even een kant-en-klare layout kunnen downloaden.

[Zakkenwasser]

Cybot12999 schreef op zondag 14 september 2008 @ 17:40:
[...]

Bedankt voor je antwoord. Ik heb de layout, echt niet van google gehaald ofzo. Ik heb hem zelf getypt met HTML-Kit. Alleen het menu'tje is gemaakt met een programmaatje.

Menu kan je beter zo maken:

code:

<ul>
<li>Menuoptie1</li>
<li>Menuoptie2</li>
<li>Menuoptie3</li>
<li>Menuoptie4</li>
<li>Menuoptie5</li>
<li>Menuoptie6</li>
</ul>

[ Voor 7% gewijzigd door Zakkenwasser op 14-09-2008 17:49 ]

[Cybot12999]

Verwijderd schreef op zondag 14 september 2008 @ 17:44:
Misschien is dat wel het probleem hè? Dat je je bezighoudt met dingen die je (nog) niet beheerst. Je wilt direct een bepaald resultaat halen, maar mist de basiskennis. Had je tóch beter even een kant-en-klare layout kunnen downloaden.

basiskennis heb ik wel van HTML/XHTML/CSS en een beetje javascript. Kant en Klare layouts doe ik niet aan, ik vindt het gewoon leuk om nieuwe dingen al bezig te ontdekken.


Verder ben ik er ook achtergekomen waardoor de rechtermarge wegvalt:
Position= relative = Marges doen het
" " = Absolute= De shoutbox staat op de plek waar ik hem wil hebben (in de ruimte gemaakt door de linkermarge) maar de rechtermarge valt compleet weg.

Alvast bedankt voor jullie behulpzaamheid!

[Rowanov]

Cybot12999 schreef op zondag 14 september 2008 @ 17:40:
Bedankt voor je antwoord. Ik heb de layout, echt niet van google gehaald ofzo. Ik heb hem zelf getypt met HTML-Kit. Alleen het menu'tje is gemaakt met een programmaatje.

Ik doelde op het feit dat google je kant en klare layouts kan aanleveren die direct je probleem zouden oplossen, maar daar leer je niet van hoe je het probleem oplost en waarom het nu niet werkt. Ik merkte direct op dat dit wel zelfgemaakt zou moeten zijn, omdat het verre van de makkelijkste manier is om zo'n layout te maken

Tipje: stap af van het lagen idee en position: absolute;.

Cybot12999 schreef op zondag 14 september 2008 @ 17:51:
Verder ben ik er ook achtergekomen waardoor de rechtermarge wegvalt:
Position= relative = Marges doen het
" " = Absolute= De shoutbox staat op de plek waar ik hem wil hebben (in de ruimte gemaakt door de linkermarge) maar de rechtermarge valt compleet weg.

Alvast bedankt voor jullie behulpzaamheid!

Een document heeft een flow (natuurlijke volgorde van de elementen); als je een relatieve positie instelt verplaats je het element t.o.v. zijn positie in de flow. Dat is het best te zien door drie blokken onder elkaar te nemen en de middelste relatief te verplaatsen; de ruimte tussen blok 1 en 3 blijft hetzelfde. Als je het middelste blok absoluut positioneert, dan zullen blok 1 en 3 gewoon op elkaar aansluiten omdat blok 2 uit de flow is.

[ Voor 41% gewijzigd door Rowanov op 14-09-2008 17:56 ]

[Cybot12999]

MrJey schreef op zondag 14 september 2008 @ 17:48:
[...]

Menu kan je beter zo maken:

code:

<ul>
<li>Menuoptie1</li>
<li>Menuoptie2</li>
<li>Menuoptie3</li>
<li>Menuoptie4</li>
<li>Menuoptie5</li>
<li>Menuoptie6</li>
</ul>

Bedankt voor je antwoord!
Het programma heeft precies zo'n menu gemaakt als jij zegt,:
<div class="h_mnu_01">
<ul>
<li><a href="index.shtml">Homepage</a></li>
<li><a href="Iphone3G.shtml">Iphone 3G</a></li>
<li><a href="afb.shtml">Afbeeldingen</a></li>
<li><a href="idee.shtml">Het idee</a></li>
<li><a href="contact.shtml">Contact</a></li>
</ul>
</div>
Neem aan dat het probleem toch iet hier ligt?

Alvast bedankt!

[Cybot12999]

Rowanov schreef op zondag 14 september 2008 @ 17:52:
[...]


Ik doelde op het feit dat google je kant en klare layouts kan aanleveren die direct je probleem zouden oplossen, maar daar leer je niet van hoe je het probleem oplost en waarom het nu niet werkt. Ik merkte direct op dat dit wel zelfgemaakt zou moeten zijn, omdat het verre van de makkelijkste manier is om zo'n layout te maken

Tipje: stap af van het lagen idee en position: absolute;.
[...]


Een document heeft een flow (natuurlijke volgorde van de elementen); als je een relatieve positie instelt verplaats je het element t.o.v. zijn positie in de flow. Dat is het best te zien door drie blokken onder elkaar te nemen en de middelste relatief te verplaatsen; de ruimte tussen blok 1 en 3 blijft hetzelfde. Als je het middelste blok absoluut positioneert, dan zullen blok 1 en 3 gewoon op elkaar aansluiten omdat blok 2 uit de flow is.

Heel erg bedankt voor je duidelijke uitleg!

(Ik dacht ook al wel dat ik erg moeilijk aan het doen was. Maar dit is ook mijn 1ste site waarbij ik CSS gebruik..........)

Wat ik wil bereiken is:
Dat het menu over de hele breedte van de pagina wordt uitgestrekt
Daaronder komen dan die 2 afbeeldingen, en verder daaronder de tekst. (dit wil ik zo maken, dat er aan de rechterkant en de linkerkant een marge ontstaat van 12% , dus een witte ruimte links en rechts met daarbinnen de tekst.)

Dan wil ik in die linker ruimete, aan de rechter of linkerkant de shoutbox hebben. Dus dat de shoutbox in de witte, lege ruimte, gecreerd door de marges komt.

Hoe doe ik dit, zonder die lagen te gebruiken?

[Rowanov]

Dit is een voorbeeld van hoe je dat met floats kan doen, maar geen enkel voorbeeld is zaligmakend. Er zit vaak veel onzin css in die niet nodig is; bouw eerst de (x)html van je pagina op en voeg daarna regel voor regel de css toe. Dat is eigenlijk de enige manier om te leren wat dingen precies doen.

[Cybot12999]

Heel erg bedankt allemaal. Het is uiteindelijk gelukt met floats. En inderdaad, ik was moeilijk aan het doen met de lagen. Met de floats gaat het veel gemakkelijker!

Nogmaals allemaal bedankt!!

[Verwijderd]

En je snapt er nog steeds geen fuck van, want je hebt zelf nooit de moeite genomen de basics te leren beheersen. Tot die basics behoort ook: het lezen van documentatie, het maken van simpele test cases en het uitproberen van wat elke property ongeveer doet, en waarom dat zo is. Kortom, morgen ben je weer terug met een andere vraag...

[Cybot12999]

Verwijderd schreef op zondag 14 september 2008 @ 22:00:
En je snapt er nog steeds geen fuck van, want je hebt zelf nooit de moeite genomen de basics te leren beheersen. Tot die basics behoort ook: het lezen van documentatie, het maken van simpele test cases en het uitproberen van wat elke property ongeveer doet, en waarom dat zo is. Kortom, morgen ben je weer terug met een andere vraag...

Ik heb al erg veel gelezen op het web, IK HEB ER WEL DEGELIJK DE MOEITE VOOR GENOMEN en de basis begrijp ik onderhand wel, maar als ik dan een keer een verkeerde command gebruik, krijg ik me een bult commentaar van jou, werkt ook lekker motiverend.......

[Boelie-Boelie]

Cybot12999 schreef op zondag 14 september 2008 @ 22:09:
Ik heb al erg veel gelezen op het web, IK HEB ER WEL DEGELIJK DE MOEITE VOOR GENOMEN en de basis begrijp ik onderhand wel, maar als ik dan een keer een verkeerde command gebruik, krijg ik me een bult commentaar van jou, werkt ook lekker motiverend.......

Ik denk dat bedoeld wordt: als je met een auto naar voren, achter, links en rechts kunt rijden en de handleiding hebt gelezen, wil nog niet zeggen dat je kunt autorijden.

Ik snap het best hoor, het is ook niet moeilijk dus velen zeggen het al gauw te snappen, maar er zijn gewoon teveel dingen die je pas weet na veel ervaring en veel lezen. Om een voorbeeld te nemen, je zult later merken dat die leuke floats van eerder zo hun eigenaardigheden hebben..

Overigens, als je op modernmarkup had gekeken, kon je daar lezen over het gebruik van floats en lijsten...

[ Voor 6% gewijzigd door Boelie-Boelie op 15-09-2008 00:21 ]