• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Button uitlijnen

Status
Niet open voor verdere reacties.

Kumquat

Bekend gezicht
Lid geworden
29 jan 2012
Berichten
145
Waarderingsscore
0
Hi,

Ik hoop dat iemand me de goede kant op kan sturen :) De afbeeldingen hebben een vaste hoogte (210px). De button staat nu onder de tekst en afhankelijk van de hoeveelheid tekst staat hij soms verder naar onderkant. Maar ongeacht de hoeveelheid tekst wil ik de button op een vaste positie uitlijnen zodat hij altijd rechts staat en gelijk is met de onderkant van de afbeelding.

~Uitlijnen.jpg

De code zoals hij nu is.
Code:
li.element.element-itemlink a {
    margin-top: 20px;
    margin-left: 200px;
    background-color: #075c97;
    font-size: 1rem;
    color: #ffffff;
    line-height: 28px;
    min-height: 30px;
    width: 100px;
    text-align: center;
    display: inline-block;
    background-image: linear-gradient(to bottom,#9fd256,#6fac34);
    border: 1px solid rgba(0,0,0,.2);
    border-color: rgba(0,0,0,.2);
    border-bottom-color: rgba(0,0,0,.4);
    text-shadow: 0 -1px 0 rgba(0,0,0,.2);
    border-radius: 4px;
    background-origin: border-box;
    box-sizing: border-box;
}
 
In .css:
Code:
div.absolute {
    position: absolute;
    bottom: 0;
    right: 0;
}

In .html:
Code:
  <div class="absolute">afbeelding.jpg
</div>

Bovenstaande code kan binnen de <div> en </div> van een bestaande div-container worden geplaatst.
De waardes van "bottom" en "richt" in het css kunnen worden aangepast.
 
Ik heb de code voor CSS geprobeerd, ik zal het vast verkeerd doen :)....maar het geeft niet gewenste resultaat. Zie printscreen zoals de code nu in CSS staat. Waar moet ik precies de code tussen zetten? Heb ook geprobeerd door de code tussen de
Code:
li.element.element-itemlink a {
{
te plaatsen, maar ook dit werkte helaas ook niet

code.JPG
 
Ik gebruik CSS en geen HTML, zie m'n printscreen. Ik heb al verder zitten vogelen, maar nog zonder resultaat
 
Bedankt, heb heel veel geprobeerd maar het lukt nog niet. Echt frustrerend :( Het zou toch mogelijk moeten zijn om die button rechts en op de bottom te plaatsen :wacko:

Nog andere opties? :)
 
Ik denk dat je het beste gebruik kunt maken van een tabel met 2 rijen onder elkaar dan kan je ze gewoon vast zetten:

Code:
<table>
<tr>

<td>
bla bla bla
</td>

</table>
 
Bedoel je dat ik onderstaande code in een tabel moet plaatsen? Het klinkt makkelijk, 2 rijen in een tabel, maar ik snap hem nog niet helemaal. Waar en wat plaats ik in die tabel? (sorry voor alle vragen, ben nog maar beginner met CSS)

Code:
li.element.element-itemlink a {
    margin-top: 20px;
    margin-left: 200px;
    background-color: #075c97;
    font-size: 1rem;
    color: #ffffff;
    line-height: 28px;
    min-height: 30px;
    width: 100px;
    text-align: center;
    display: inline-block;
    background-image: linear-gradient(to bottom,#9fd256,#6fac34);
    border: 1px solid rgba(0,0,0,.2);
    border-color: rgba(0,0,0,.2);
    border-bottom-color: rgba(0,0,0,.4);
    text-shadow: 0 -1px 0 rgba(0,0,0,.2);
    border-radius: 4px;
    background-origin: border-box;
    box-sizing: border-box;
}
 
Geef de div die de text houd een vaste width en height zodat het niet uitmaakt hoeveel tekst je hebt, de button zal er dan sowieso onder blijven met dezelfde plaats.

Trouwens, altijd raadzaam om de volledige code te plaatsen of de website url zelf zodat het makkelijker is om te helpen.
 
Als het goed is heb je een afbeelding en daaronder wil je de knop plaatsen. De code hiervoor kan je om het makkelijk te houden (ik heb op dit moment geen idee van je kennis niveau daarom houd ik het simpel) het beste maken in HTML.

Ik zal hieronder de volledige code plaatsen vanaf de HTML opzet. Daarnaast adviseer ik je in een code editor te werken zodat de tekst verschillende kleuren krijgt. Deze opmerking maak ik voor het geval je nu met kladblok aan het "spelen" bent.

Ik zal de afbeelding ook als bijlage toevoegen dan kan je ze naar het bureaublad downloaden en het resultaat zien.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	

	<link rel="stylesheet" href="css/index.css" />

	<div id ="afbeelding">
	<table>
	<tr>
	<td> <img src= "desktop.png"></img></td>
	</tr>
	<tr> 
	<td ALIGN="center"> <input type = "button" name= "knop" value= "waarde"> </td>
	
	</tr>
	
	</table>
	
	
	</div>
</head>

<body>

Ik hoop dat je nu een eind op weg bent, mocht je er onverhoopt niet uitkomen vraag het gewoon weer even opnieuw.
 

Bijlagen

  • desktop.png
    desktop.png
    36,7 KB · Weergaven: 66
Om misverstanden te voorkomen....de button komt niet onder de afbeelding maar rechts ervan. De afbeelding heeft altijd een vaste hoogte/breedte, het gaat dus echt om het blok met de intro tekst (die per artikel verschilt). Ik wil de button uitlijnen met de onderkant van de afbeelding, dus ongeacht de hoeveelheid tekst. Zie mijn printscreen zoals het nu is. Ik werk in macromedia, de code had ik daar vandaan gekopieerd en geplakt in kladblok, vandaar 1 kleur :)

De site is gemaakt met Joomla, misschien heel stom, maar geen idee waar ik HTML kan wijzigen/toevoegen. CSS kan ik wel, deze aanpassing zal moeten komen in custom.css. Ik heb al eerder aanpassingen gedaan (die waren voor mijn niveau niet zo lastig haha) maar het is gewoon nog een beetje lastig. Maar, oefening baart kunst en de aanhouder wint. Kan ik jouw code ook toepassing in custom.css?

--- Update ---

Geef de div die de text houd een vaste width en height zodat het niet uitmaakt hoeveel tekst je hebt, de button zal er dan sowieso onder blijven met dezelfde plaats.

Trouwens, altijd raadzaam om de volledige code te plaatsen of de website url zelf zodat het makkelijker is om te helpen.

Een link van de website heeft in dit geval (nog) geen zin, dit gedeelte staat nog niet live. Ik zal de volledige code van dat tekstblok opzoeken en plaatsen :) De width/height voor de tekst ga ik even uitproberen, bedankt voor die tip!
 
Laatst bewerkt door een moderator:
in Custom CSS kan je de code helaas niet toepassen. Ik denk dat je een keuze moet maken die als volgt zal moeten zijn:

1 je gaat de website onderhouden in Joomla
2 je gaat de website maken in HTML en CSS

Maar goed voor nu zou je de code in elk geval als volgt moeten aanpassen namelijk onderstaande toevoegen bij de button.

p.readmore {float:right;}

varianten op deze code zijn:


p.readmore {float:left;}
p.readmore {float:center;}
p.readmore {float:top;}
p.readmore {float:bottum;}
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan