Css - links onder
Ik weet veel van CSS, maar dit niet:
Hoe kan ik een stukjes code/plaatje/tekst, naar links onder uitlijnen? Ik heb bijvoorbeeld aan layout met 2 kolommen, eentje links en eentje rechts. In de linkste kolom komt mijn menu, nu wil ik onder in deze kolom nog een stukje test/plaatje/code toevoegen.
Ik krijg het niet voorelkaar, iemand een idee?
Groete, Robino.
eerlijk gezegd weet ik niet wat je bedoeld :S
Gewijzigd op 01/01/1970 01:00:00 door Kumkwat Trender
Gewijzigd op 01/01/1970 01:00:00 door joren vh
http://www.nibosoft.nl/portfolio/
Gewijzigd op 01/01/1970 01:00:00 door aaa Trump
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="left">
<h1>Robin Maree</h1>
<ul>
<li><a href="#">Voorpagina</a></li>
<li><a href="#">Algemeen</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Links</a></li>
</ul>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0"/></a>
<a href="http://jigsaw.w3.org/css-validator/"><img
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valide CSS!" height="31" width="88" border="0" />
</a>
</p>
</div>
<h1>Robin Maree</h1>
<ul>
<li><a href="#">Voorpagina</a></li>
<li><a href="#">Algemeen</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Links</a></li>
</ul>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0"/></a>
<a href="http://jigsaw.w3.org/css-validator/"><img
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valide CSS!" height="31" width="88" border="0" />
</a>
</p>
</div>
door
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="left">
<h1>Robin Maree</h1>
<ul>
<li><a href="#">Voorpagina</a></li>
<li><a href="#">Algemeen</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Links</a></li>
</ul>
<p valign="bottom">
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0"/></a>
<a href="http://jigsaw.w3.org/css-validator/"><img
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valide CSS!" height="31" width="88" border="0" />
</a>
</p>
</div>
<h1>Robin Maree</h1>
<ul>
<li><a href="#">Voorpagina</a></li>
<li><a href="#">Algemeen</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Links</a></li>
</ul>
<p valign="bottom">
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0"/></a>
<a href="http://jigsaw.w3.org/css-validator/"><img
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valide CSS!" height="31" width="88" border="0" />
</a>
</p>
</div>
verchil is
<p valign="bottom">
Volgens mij werkt 'valign' alleen maar op tabelcellen. Heb je hier iets aan, Joren?:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<style type="text/css">
#shoutbox {
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;}
#shoutbox p {
position: absolute;
bottom: 0;}
</style>
</head>
<body>
<div id="shoutbox">
<p>tekstregel 1 <br>tekstregel 2<br>tekstregel 3</p>
<div>
</body>
</html>
<head>
<style type="text/css">
#shoutbox {
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;}
#shoutbox p {
position: absolute;
bottom: 0;}
</style>
</head>
<body>
<div id="shoutbox">
<p>tekstregel 1 <br>tekstregel 2<br>tekstregel 3</p>
<div>
</body>
</html>
- Frank
Gewijzigd op 01/01/1970 01:00:00 door Frank62
http://www.freewebs.com/htmlcurcus/afbeeldingen.html
daar werkt het wel dus dan moet het hier ook wel werken, denk ik (hoop ik)
Edit:
Voorbeeld (getest in IE6/7, FF2 en Opera9 op Win XP): div linksonder in een andere div zetten
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Images zijn inline-elementen, dus die lijnen zich vanzelf uit op de manier zoals ze dat op jouw uitlijnvoorbeeld doen. Zet TUX maar eens op je bureaublad en zet daar het volgende file bij:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<html>
<head>
</head>
<body>
<div style="width: 300px; height: 300px;">
<p valign="bottom"><img src="TUX.jpg"></p>
</div>
</body>
</html>
<head>
</head>
<body>
<div style="width: 300px; height: 300px;">
<p valign="bottom"><img src="TUX.jpg"></p>
</div>
</body>
</html>
Tuxxie verschijnt wel, maar niet op de bodem van de div.
@Jan: Wat jij beschrijft staat zo ongeveer al in mijn codevoorbeeld, behalve dat mijn code waarschijnlijk niet valide is.
- Frank
Gewijzigd op 01/01/1970 01:00:00 door Frank62
Uitlijning is toch default links?
- Frank
- Frank
Allemaal bedankt!
bottom: 0;
ik had ook ooit het zelfde probleem gehad en toen had ik dit ook ergens gezien..
ok dit zal ik nooit meer vergeten ;)