[CSS] button rechtsonderin alignen* - Softwareontwikkeling

maandag 14 mei 2007 09:34

Acties:

0 Henk 'm!

Topicstarter

Ik zoek een nette manier om een imagebutton rechtsonder uit te lijnen in een div. Ik krijg het echter niet voor elkaar, kheb ook al wat gegoogled maar ik kan niet echt de juiste zoektermen vinden wat me naar een oplossing leidt.

Ik heb dus een div van zeg 100x100 px. Nu moet de button rechstonder in de div komen. De div bevat trouwens ook gewoon tekst. Nu kan ik wel iets verzinnen met meerdere divs en text-align maar ik zoek eigenlijk de efficientste oplossing. Iemand die me hier mee kan helpen?

maandag 14 mei 2007 09:40

Acties:

0 Henk 'm!

storeman

Cascading Stylesheet:

div button#rechtsonder{
position:absolute;
right:10px;
bottom:10px;
}

Zoiets? De button moet dan wel in de div staan

[ Voor 1% gewijzigd door storeman op 14-05-2007 12:45 . Reden: kleurtjes, whoei! ]

"Chaos kan niet uit de hand lopen"

maandag 14 mei 2007 10:02

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Aangezien waarschijnlijk de div een variabele hoogte kan krijgen, wordt dat lastig. Is het de bedoeling dat de knop altijd helemaal onderaan de tekst komt te staan, en dan rechts? Dan zou ik het denk ik toch zo doen:

HTML:

<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ultrices.</p>
<p class="button"><button name="button">Knop</button></p>
</div>

Cascading Stylesheet:

1	p.button { text-align:right; }

---

@storeman;
Ik zou geen ID gebruiken, maar een Class. En persoonlijk ben ik altijd een voorstander van het geven van Classnames die niets over de vormgeving zeggen.

Maar volgens mij komt in jou geval de butten altijd 10px van de onderkant van de viewport.

[ Voor 6% gewijzigd door OkkE op 14-05-2007 10:03 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

maandag 14 mei 2007 10:22

Acties:

0 Henk 'm!

Stalkert

Topicstarter

bedankt voor de reacties. Het gaat trouwens om een imagebutton. In dit geval verandert de DIV niet van hoogte

[ Voor 26% gewijzigd door Stalkert op 14-05-2007 10:23 ]

maandag 14 mei 2007 10:31

Acties:

0 Henk 'm!

RM-rf

1 2 3 4 5 7 6 8 9

Stalkert schreef op maandag 14 mei 2007 @ 10:22:
bedankt voor de reacties. Het gaat trouwens om een imagebutton. In dit geval verandert de DIV niet van hoogte

ik denk dat het gebruik van position: absolute; (en bottom:0;right:0;) de beste oplossing is, de button valt dan buiten de verdere 'flow' van elementen en de omvattende DIV moet iig wel een 'position: relative (of absolute, de position moet gedefinieerd zijn) hebben dan.

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

maandag 14 mei 2007 10:44

Acties:

0 Henk 'm!

Stalkert

Topicstarter

Ik heb nu het volgende wat niet het werkt:

HTML:

<div class="article_even">
   <img src="untitled.jpg" alt="pinkpop" width="105" height="105" />
   <h4>KOP VAN EEN EVENEMENT</h4>
   tekst 
   <a href="test"><img src="images/buttons/arrow_article.gif" width="22" height="22" border="0"/></a>
</div>

en de volgende css:

Cascading Stylesheet:

.article_even {
   font-size: 11px;
   padding: 10px;
   height: 105px;
   background-color: white;
   border: 1px solid #FED30C;
}

.article_even a img {
   position: relative;
   right: 10px;
   bottom: 10px;
}

.article_even img {
   margin-right: 5px;
   float: left;
}

.article_even h4 {
   margin: 0px;
   color: #FF0000;
}

Code kan ook talen bevatten voor kleurtjes

[ Voor 21% gewijzigd door een moderator op 14-05-2007 12:43 ]

maandag 14 mei 2007 12:44

Acties:

0 Henk 'm!

storeman

Dat gaat niet werken, je zult het anchor element als absolute moeten gaan verplaatsen, niet alleen het plaatje.

Doe zoiets:

HTML:

<html>
<head>
</head>
<body>
<div style="width:200px; height:200px; border:1px solid #000000; position:relative;">
abc
<a href="#" style="display:block; position:absolute; bottom:0px; right:0x;">Test link of img</a>
def
</div>
</body>
</html>

@okke

Het gaat mij niet zozeer om de naamgeving, tis slechts een voorbeeld en het ging mij om de css in de tag. buttonrechtonder zegt idd niet zoveel. Ik geef dan ook slechts een voorbeeld, aan de ts om dit verder in te vullen naar zijn wens.
Ook blijft met de bottom en right definitie het element altijd onderaan staan in de div. Zelfs als je met js de hoogte wijzigt (door vergroten van inhoud of wijzigen van de style-hoogte). (in IE7 tenminste

)

[ Voor 13% gewijzigd door storeman op 14-05-2007 12:49 ]

"Chaos kan niet uit de hand lopen"

maandag 14 mei 2007 13:29

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

storeman schreef op maandag 14 mei 2007 @ 12:44:
@okke

Het gaat mij niet zozeer om de naamgeving, tis slechts een voorbeeld en het ging mij om de css in de tag. buttonrechtonder zegt idd niet zoveel. Ik geef dan ook slechts een voorbeeld, aan de ts om dit verder in te vullen naar zijn wens.

Ik snap 't. Maar ik probeer zelf altijd zulke dingen ook in voorbeeldjes goed te doen, juist zodat mensen die het nog aan 't leren zijn, gelijk "het goede voorbeeld" zien.

Ook blijft met de bottom en right definitie het element altijd onderaan staan in de div. Zelfs als je met js de hoogte wijzigt (door vergroten van inhoud of wijzigen van de style-hoogte). (in IE7 tenminste )

Daar was ik even niet zeker van; ik dacht dat het gedrag van bottom: en right: ook te maken had met de soort positionering van het parent element. Maar hier zal je gelijk in hebben.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.