'a href' zo groot als button
Ik ben het even vergeten. Heb het volgende:
<div class="btn">
<a href="#"><span>View project</span></a>
</div>
Hoe zorg ik er ook alweer voor dat het klikgedeelte van de Ahref even groot als de button is?
Ik heb van de Ahref al een display:block; gemaakt.
Edit:
Titel aangepast naar wat duidelijkers.
Gewijzigd op 02/05/2016 09:55:22 door - Ariën -
Padding geven.
<a href="#">
<div class="btn">
<span>View project</span>
</div>
</a>
Gewijzigd op 01/05/2016 20:20:59 door Jan Graneker
Waarom een div en een span in die a, nergens voor nodig lijkt mij.
Geef gewoon de a padding.
Kun je niet gewoon die div verwijderen en de a een class btn meegeven: <a href="#" class="btn">View project</a>..
Lange leven Bootstrap, niemand kan meer normaal front-end bouwen.. Hulde
Gewijzigd op 02/05/2016 11:55:28 door Joakim Broden
Gewijzigd op 02/05/2016 13:27:13 door Jan Graneker
Jan Graneker op 02/05/2016 13:26:35:
Ik zou inderdaad gewoon een A element kunnen toevoegen, alleen voor de netheid dacht ik, ik gooi het in een Div. Probeer juist niet 'the easy way out' te gebruiken. Ik gebruik geen BS. Wil eerst alles zo goed neerzetten en daarna alles ombouwen naar BS.
Geen idee wat je probeer te zeggen, maar voor de netheid wil je een extra div creëren? Puur omdat het netjes lijkt? De a is toch de button, dus dan is het ook netjes om die de 'btn' class mee te geven en te stijlen als button ipv een div. Voeg juist geen extra elementen toe om het netjes te houden. Hoe minder elementen, hoe beter.
En eerst alles goed zetten en dan ombouwen naar Bootstrap? Ehm, Whaaaat the fuck? Dan zou ik het eerder nog anders om doen (wat tevens een goed gebruikte methode is), eerst een wireframe creëren met Bootstrap en dan de juiste versie bouwen.
Ps jammer van je profiel foto :( Go Lorenzo Go Lorenzo Goooooo! Alhoewel ik Dovizioso ook wat punten gun :D
Gewijzigd op 02/05/2016 13:38:56 door Joakim Broden
Quote:
Hoe minder elementen, hoe beter.
Mee eens, maar vaak is het handig elementen een soort "container" te geven. Zo zou je ook een menu-balk kunnen maken met behulp van een unordered list (ul) in combinatie met hyperlinks (a-tags).
Om antwoord te geven op de vraag van Jan:
Geef de div vaste afmetingen (bijvoorbeeld width: 150px; height: 25px; ).
Je was al op de goede weg met de display: block van de hyperlink. Het enige wat je volgens mij nog hoeft te doen is deze uitvullen in de div met width: 100% en height: 100%. Horizontaal centreren kan met text-align, verticaal centreren met line-height (die in de buurt van de hoogte van de div zit).
Joakim Broden op 02/05/2016 13:35:11:
Geen idee wat je probeer te zeggen, maar voor de netheid wil je een extra div creëren? Puur omdat het netjes lijkt? De a is toch de button, dus dan is het ook netjes om die de 'btn' class mee te geven en te stijlen als button ipv een div. Voeg juist geen extra elementen toe om het netjes te houden. Hoe minder elementen, hoe beter.
En eerst alles goed zetten en dan ombouwen naar Bootstrap? Ehm, Whaaaat the fuck? Dan zou ik het eerder nog anders om doen (wat tevens een goed gebruikte methode is), eerst een wireframe creëren met Bootstrap en dan de juiste versie bouwen.
Ps jammer van je profiel foto :( Go Lorenzo Go Lorenzo Goooooo! Alhoewel ik Dovizioso ook wat punten gun :D
Jan Graneker op 02/05/2016 13:26:35:
Ik zou inderdaad gewoon een A element kunnen toevoegen, alleen voor de netheid dacht ik, ik gooi het in een Div. Probeer juist niet 'the easy way out' te gebruiken. Ik gebruik geen BS. Wil eerst alles zo goed neerzetten en daarna alles ombouwen naar BS.
Geen idee wat je probeer te zeggen, maar voor de netheid wil je een extra div creëren? Puur omdat het netjes lijkt? De a is toch de button, dus dan is het ook netjes om die de 'btn' class mee te geven en te stijlen als button ipv een div. Voeg juist geen extra elementen toe om het netjes te houden. Hoe minder elementen, hoe beter.
En eerst alles goed zetten en dan ombouwen naar Bootstrap? Ehm, Whaaaat the fuck? Dan zou ik het eerder nog anders om doen (wat tevens een goed gebruikte methode is), eerst een wireframe creëren met Bootstrap en dan de juiste versie bouwen.
Ps jammer van je profiel foto :( Go Lorenzo Go Lorenzo Goooooo! Alhoewel ik Dovizioso ook wat punten gun :D
Waarom? Gewoon omdat ik het leuk vind. Probeer ook niks op te zoeken, maar gewoon alles uit het hoofd te typen. Als 'verouderde' desktop only versie klaar is het daarna in Bootstrap te knallen. Ik wil niet kopie/pasten en alles maar overnemen, maar gewoon lekker zelf 'maken'.
Ik kan leven met lorenzo, zolang je maar niet voor Marc bent, haha.
Toevoeging op 04/05/2016 14:15:49:
Thomas van den Heuvel op 02/05/2016 14:11:56:
Mee eens, maar vaak is het handig elementen een soort "container" te geven. Zo zou je ook een menu-balk kunnen maken met behulp van een unordered list (ul) in combinatie met hyperlinks (a-tags).
Om antwoord te geven op de vraag van Jan:
Geef de div vaste afmetingen (bijvoorbeeld width: 150px; height: 25px; ).
Je was al op de goede weg met de display: block van de hyperlink. Het enige wat je volgens mij nog hoeft te doen is deze uitvullen in de div met width: 100% en height: 100%. Horizontaal centreren kan met text-align, verticaal centreren met line-height (die in de buurt van de hoogte van de div zit).
Quote:
Hoe minder elementen, hoe beter.
Mee eens, maar vaak is het handig elementen een soort "container" te geven. Zo zou je ook een menu-balk kunnen maken met behulp van een unordered list (ul) in combinatie met hyperlinks (a-tags).
Om antwoord te geven op de vraag van Jan:
Geef de div vaste afmetingen (bijvoorbeeld width: 150px; height: 25px; ).
Je was al op de goede weg met de display: block van de hyperlink. Het enige wat je volgens mij nog hoeft te doen is deze uitvullen in de div met width: 100% en height: 100%. Horizontaal centreren kan met text-align, verticaal centreren met line-height (die in de buurt van de hoogte van de div zit).
Does the trick tnx Thomas. Als ik naar mijn vorige posts kijk, elke keer de redder in nood (Y)