#d1 en #d2 positioneren

Status
Niet open voor verdere reacties.
Hoi Henk,
Op de pagina zie ik geen #d1 en #d2, dus ik kan ook niet zien wat er mislukt en hoe dingen heen en weer vliegen.
  • Wat ik als waarzegger vermoed, is dat de #d1 en #d2 <div>'s zijn (of andere elementen) met een absolute positie.
Maar om iets te kunnen zeggen over een oplossing: graag een link naar een testpagina met alles er op en er aan! :)

Met vriendelijke groet,
CSShunter
 
Hoi Henk,
Ik ga geloof ik toch eens m'n geluk als waarzegger proberen. ;)

Want wat gebeurt er als je de absolute positie van de #d1 en de #d2 weghaalt?
 
Hoi Hunter,

Er gebeurd een hele boel,het wiite vlak staat op de goede plaats, maar het zwarte vlak d2 staat nu in zijn geheel onder het witte vlak d1 .
De bedoeling is dat je maar een klein schaduw randje ziet.

Groet,
Henk
 
Aha. Is de #d2 alleen maar voor het schaduwrandje, of moet er ook nog iets in komen?

Als het alleen om de schaduw van de #d1 gaat, dan kan je dat heel mooi doen met de box-shadow van css3:
Code: 
#d1 {
    width: 300px;
    height: 152px;
    background: white;
    border-right: 1px solid #888888;
    border-bottom: 1px solid #888888;
    [COLOR="#B22222"]box-shadow: 5px 6px 7px #888888;[/COLOR]
    }
  • De eerste 5px is de verplaatsing van de schaduw naar rechts.
  • De tweede 6px is de verplaatsing van de schaduw naar beneden.
  • De derde 7px is de breedte en hoogte van de schaduwrand: het gebied van vervagen.
  • De #888888 is een donkergrijze tint.
  • Alle andere getallen zijn ook mogelijk! :)
box-shadow.png

Dit werkt in Firefox, Chrome, Opera, Safari en Internet Explorer 9.
Niet in IE8; daarvoor kan je eventueel css3PIE toevoegen. En anders heeft IE8 nog altijd een donkergrijs randje aan de rechterkant en de onderkant:

box-shadow-ie8.png

IE8 zonder css3PIE​
 
Hoi Henk,
Ja, dat kan ook.
In dat geval kan je de twee div's opnemen in de #leftContent door de #leftContent een relatieve positie te geven:
Code: 
#leftContent {
    ...
    position: relative;
    }
De #d1 en #d2 met hun absolute positie zitten binnen de #leftContent. Nu hebben ze wel een absolute positie, maar nu absoluut ten opzichte van de linkerbovenhoek van de #leftContent.
  • Absoluut is dus helemaal niet zo absoluut! :)
  • Elementen met een absolute positie zijn altijd absoluut t.o.v. het eerste omvattende element dat een relatieve positie heeft.
  • Heeft niets in de elementen die hoger in de html code-boom zitten een relatieve positie, dan wordt het altijd de linkerbovenhoek van het browservenster (= de 0,0 positie van de <html>-tag).
Probeer maar: als je de #total een relatieve positie geeft (en de #leftContent niet), dan komen ze links boven in de #total te hangen, dwars over de #header heen.

Met vriendelijke groet,
CSShunter
 
Hallo Hunter,

Hartelijk dank, het is allemaal gelukt.
Staat nu gewoon op www.uwfavorieten.nl
Dit is voor mijn een oefening om een andere site te maken.
Wat mij niet lukt is om de tekst "meer informatie" in het midden achter de marker te krijgen.

Nogmaals dank.

Groet,
Henk
 
Hoi Henk,
... de tekst "meer informatie" in het midden achter de marker te krijgen
Klik om te vergroten...
Dat komt omdat alle images dezelfde css hebben:
Code: 
img {
	float: left;
	padding-left: 10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 95px;
}
Bij de marker wil je dat niet, dan kan je die een id geven...:
HTML: 
...
<img id="marker" src="images/menu_marker.png" width="11" height="11" alt="" />
... met afwijkende stijl:
Code: 
#marker {
	float: none;
	padding: 0;
	margin-right: 10px;     /* afstand tot de tekst */
	vertical-align: middle; /* in het midden van de tekstregel */
}
(Om te vermijden dat alle andere te plaatsen images ook die float en paddings hebben, kan je het beste het logo-image een id geven, waarvoor de float en de paddings wel mogen. Dan krijgen alle andere images ze niet automatisch, en hoeven die niet stuk voor stuk gecorrigeerd te worden.)

Gegroet,
CSShunter
____
PS: Zowel in de #leftContent als in de #centerContent zit een #d1 en een #d2. Maar van een id mag er maar één per pagina in zitten (zal ook de html-validator zeggen).
Van een class .d1 en .d2 mogen er meer zijn, dus maak je er classes van. :)
 
Hallo Hunter,

Tekst staat nu keurig in het midden achter het plaatje marker.
De volgende vraag is , hoe krijg ik deze regel altijd onderaan in #D1 is nu #class1.
Controle met de html-validator geeft problemen "element "DIV" undefined "

Groet,
Henk
 
#D1 is nu #class1
Klik om te vergroten...
Jawel, maar daarmee is het nog steeds een id!
In de css moet het met een puntje ervoor i.p.v. een hekje:
Code: 
.class1 {
    ...
}
En in de html:
HTML: 
<div class="class1">
    ...
</div>
En voor class2 idem dito.

Verder merkt de validator op dat er een eind-tag voor een <div> ontbreekt ("end tag for "div" omitted").
Het is altijd erg behulpzaam om in je code consequent in te springen, dan zie je altijd gauw wat er loos is:

HTML: 
<body>
<div id="total">
	<div id="header">
		...
	</div> 
 
	<div id="leftContent">
		<div id="class1">
			...
		</div>
		<div id="class2">
			...
		</div>
	</div>
	
	<div id="centerContent">
		<div id="class1">
			...
		</div>
		<div id="class2">
			...
		</div>
	</div>

	<div id="rightContent">
		...
	</div>

	<div id="footer">
		...
	</div>

</body>
In dit geval: de </div> van de <div id="total"> ontbreekt (vlak voor de </body>).

=======
hoe krijg ik deze marker-regel altijd onderaan?
Klik om te vergroten...
Door 'm ook een absolute positie te geven (t.o.v. de #leftContent), en dan deze met een {bottom: ..px;} op een bepaalde afstand van onder af te zetten, bv.:
Code: 
#leftContent h2 {
     position: absolute;
     bottom: 10px;
     left: 115px;
}
Met vriendelijke groet,
CSShunter
 
Hallo Hunter,

Alles staat nu keurig op zijn plaats en ik begrijp het ook allemaal.
Alleen de laatste </div> lukt niet.
Ik heb nu onderaan boven body , 2 div's.
Validator geeft nog steeds 1 fout.
Haal ik echter 1 div weg, dan vliegt mijn hele pagina naar links.
Ik heb ze, zoals jij aanbeveelde wat netter gegroupeerd, maar kan de fout niet vinden.

Groet,
Henk
 
Hallo Henk,
Validator geeft nog steeds 1 fout.
Klik om te vergroten...
Ja, dat klopt. Maar die fout zit niet in een </div> meer of minder.
De html-validator zegt nu:
'end tag for "html" omitted, but OMITTAG NO was specified'.

In het abracadabra van de validator betekent dat:
'De eind-tag </html> is weggelaten, maar in de html-specificatie staat dat je deze niet mag weglaten'.

En inderdaad, na de </body> ontbreekt de </html>.
Zet je die erbij, dan is ie foutloos, en doen de div's geen rare dingen. :)

Met vriendelijke groet,
CSShunter
 
Hallo Hunter,

Het heeft wat moeite gekost maar alles werkt met nul fouten.
Hartelijk dank voor je tomeloze inzet.

Henk
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan