PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

[CSS] aligneren

Door Jan H op 02-11-2008 10:50
1.641 views
Beste,

ik ben momenteel bezig aan m'n nieuwe site. Ik heb echter al 2 problemen met CSS waarvan ik zelf de oplossing niet direct weet.

1/
http://janheuninck.be/contact.php
=> De errorberichten rechts moeten verticaal gecentreerd worden. Ik heb gewerkt met vertical-align: middle; maar dit werkt niet...

2/
http://janheuninck.be/index.php
=> De menublokken moet rechts gealigneerd worden, zodat de uiterst rechtse kant van het 4e blok gelijk komt met de rechterkant van mn titel. text-align: right werkt niet... Als ik op elk menu-blok float: right; toepas, dan is alles wel mooi langs rechts uitgelijnd, maar dan staan m'n menu-blokken in omgekeerde volgorde...


Kan iemand me hierbij helpen?


alvast bedankt
?
Onbekende gebruiker
02-11-2008 10:56
Voor de eerste heb ik nog niet echt naar gekeken, maar voor de tweede wel:

Voeg eens rond om die vier menu divs een extra div in:
    		<div style="float: right;">
			<div class="menu_item" id="item_1" onclick="window.location.href='over.php';">
    				<p>Over mij</p>
    			</div>
    			<div class="menu_item" id="item_2" onclick="window.location.href='projecten.php';">
    				<p>Projecten</p>
    			</div>
    			<div class="menu_item" id="item_3" onclick="window.location.href='links.php';">
    				<p>Links</p>

    			</div>
    			<div class="menu_item" id="item_4" onclick="window.location.href='contact.php';">
    				<p>Contact</p>
    			</div>
			</div>


Die float: right; zal dan alle menu items naar rechts verplaatsen binnen in de menu div.
J
Jan H
02-11-2008 10:58
Tuurlijk, dat ik daar niet aan gedacht heb xD

bedankt!
?
Onbekende gebruiker
02-11-2008 10:59
No problem.

Wat bedoel je precies met die eerste?
J
Jan H
02-11-2008 11:03
GaMer13 schreef op 02.11.2008 10:59
No problem.

Wat bedoel je precies met die eerste?


Bij de textarea: de "niet geldig" moet verticaal gecentreerd worden t.o.v. het invoerveld. Nu staat dit onderaan t.o.v. de invoer
?
Onbekende gebruiker
02-11-2008 11:17
De enige manier die ik kan vinden, is een manier om het aan de bovenkant van de textarea te alignen, in plaats van onderaan. En die manier is hier uitgelegd.

Het nadeel van die manier is dat je een label moet gebruiken. Verder zou ik geen andere manier kunnen bedenken op dit moment.
Eddy E
02-11-2008 13:18
Je moet eigenlijk sowieso wel een label gebruiken. Denk ook aan braille-lezers en spraaksoftware etc.

Een label is hieruitermater geschikt voor. Maar ik zie dat het al gelukt is (je foutmeldingen staan netjes in het midden erachter).

Ps even je een spatie bij Naam / Voornaam invullen en dan weer halen blijft een groen vinkje geven ;).
J
Jan H
02-11-2008 13:21
Eddy Erkelens schreef op 02.11.2008 13:18
Je moet eigenlijk sowieso wel een label gebruiken. Denk ook aan braille-lezers en spraaksoftware etc.

Een label is hieruitermater geschikt voor. Maar ik zie dat het al gelukt is (je foutmeldingen staan netjes in het midden erachter).

Ps even je een spatie bij Naam / Voornaam invullen en dan weer halen blijft een groen vinkje geven ;).


Dan elke span van een foutboodschap in een label plaatsen? of de span's vervangen door labels?

De validatie klopt inderdaad nog niet, hiervoor heb ik een andere topic gestart :) Bedankt voor de tips
Eddy E
02-11-2008 14:07
Spans vervangen door labels.
Spans zijn daar niet voor. Labels wel.
En met wat gespeel met margins/paddings kan je het echt heel netjes maken ;).


[img]http://www.postimage.org/Pq2uBE7A.jpg[/img]

Voorbeeldje:

<li class="verplicht">
	<label for="naam">Naam van groep</label>
	<label class="bijschrift" for="naam">Naam van groep zo schrijven: <b>6a</b> of <b>7/8</b>.</label>
	
	<input name="naam" type="text">
</li>
<li>
	<label for="admin">Leerkracht/admin</label>
	<label class="bijschrift" for="admin">Indien niet aanwezig: <a href="n.p?s=332bc17c3eblb30aa981">gebruiker toevoegen</a></label>
	
	<select name="admin">
		<option value="3">Meester Eddy</option>
		<option value="13">Juffrouw Diana</option>
	</select>
</li>



En de rest is met CSS ;).
En dit is goed leesbaar voor braille etc. Tevens valideert het (denk ik) wel, maar dat is nog niet getest.

Reageren

Inloggen om te reageren