Toon posts:

[CSS] Image onderaan in een div

Pagina: 1
Acties:

Verwijderd

Topicstarter
Ik krijg het niet voor elkaar om een plaatje helemaal aan de onderkant van een div te plaatsen. Ik gebruik deze css:

code:
1
2
3
4
5
6
7
8
9
10
11
#test
{
    text-align: right;
    background-color: #E9E9E9;
}

#test p
{
    padding: 10px;
    color: #858585;
}


En deze html:

code:
1
2
3
4
    <div id="test">
            <p>Test</p>
            <a href="#">[img]"image.gif"></a>
[/img]


Hoe krijg ik dit plaatje nu helemaal onderaan in de div? Nu is er een grijze lijn onder te zien van de achtergrond van de div...

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
#test
{
    text-align: right;
    background-color: #E9E9E9;
    position: relative;
}

#bleh{
    position: absolute;
    bottom: 0;
}


Zoiets?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


Verwijderd

Topicstarter
Dus die #bleh div om het plaatje heeb of hoe bedoel je dit?

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Je maakt toch verwijzingen naar een id met # in je CSS? Mag je een keer raden zelf proberen welk element een id="bleh" moet krijgen :)

Mooier is trouwens om
Cascading Stylesheet:
1
div#test a { }
daarvoor te gebruiken ;)

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


  • mithras
  • Registratie: Maart 2003
  • Niet online
DeepRoots schreef op vrijdag 31 maart 2006 @ 11:12:
Dus die #bleh div om het plaatje heeb of hoe bedoel je dit?
code:
1
2
3
4
<div id=test>
Hier een stuk tekst
<div id=bleh><a href="#">[img]"#"></a></div>
</div[/img]
Dat denk ik ;)* mithras lult weer teveel :X

Maar ik zou niet een div in een div gebruiken, gewoon de a in de id "test" aanroepen ofzo

/edit2 spuit 11 enzo

[ Voor 46% gewijzigd door mithras op 31-03-2006 11:17 ]


  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Ik zou dus niet eens een div om die img heen zetten, maar direct de id op de image, tenzij die link echt nodig is en dan dus op de link :)

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


Verwijderd

BtM909 schreef op vrijdag 31 maart 2006 @ 11:15:
Je maakt toch verwijzingen naar een id met # in je CSS? Mag je een keer raden zelf proberen welk element een id="bleh" moet krijgen :)

Mooier is trouwens om
Cascading Stylesheet:
1
div#test a { }
daarvoor te gebruiken ;)
Maar als je dan meerdere URLs op je pagina hebt, kom je alsnog op (div#test) a#bleh { } neer..

  • mithras
  • Registratie: Maart 2003
  • Niet online
Maar als je eigenlijk alleen in je div een stuk teskt hebt, en geen link, kan je net zo goed # test a {} gebruiken volgens mij. Ik typye idd wel die div met dat id, maar die is helemaal niet nodig :z

Verwijderd

Mithras86 schreef op vrijdag 31 maart 2006 @ 11:19:
Maar als je eigenlijk alleen in je div een stuk teskt hebt, en geen link, kan je net zo goed # test a {} gebruiken volgens mij. Ik typye idd wel die div met dat id, maar die is helemaal niet nodig :z
Mja, het kan op vele manieren. ;) Hangt van je pagina opbouw af en bedoelingen.

Die extra #test is eerder nodig wanneer je erg grote CSS bestanden hebt, dit geeft je browser een steuntje in rug bij het berekenen van de weergave van de pagina..

Verwijderd

Topicstarter
Op deze manier komt bij mij het plaatje rechts naast de div te staan... En dat ligt dus aan die text-align, is er een andere manier om het plaatje rechts te krijgen?

Edit: Al gevonden, gewoon right: 0 ipv text-align gebruiken.

Bedankt iedereen!

[ Voor 62% gewijzigd door Verwijderd op 31-03-2006 11:42 ]


Verwijderd

Topicstarter
Helaas, te vroeg gejuigd, internet explorer laat het hele plaatje nu niet meer zien... firefox werkt perfect... heeft iemand een andere oplossing die ik kan proberen?

Verwijderd

code:
1
a#bleh { position: absolute; bottom: 0; margin: 0 0 0 auto; }

Zelf even de gewenste afstanden invullen. :)
Pagina: 1