[CSS] div width met link die bold wordt

[Verwijderd]

Hallo allemaal,

Ik heb een functie geschreven (in PHP) die gegeven een <a href> url een knop layout maakt met divs. Bijvoorbeeld, als ik de functie aanroep maakKnop("<a href='http://www.google.nl'>Google</a>") dan resulteert dit in de volgende code:

HTML:

<div>
<div style="float: left; "><img src="button_left_small.gif"></div>
<div style="padding-top: 2px; height: 17px; background-color:#e3ecf5; float: left;"><a href="http://www.google.nl">Google</a></div>
<div style="float: left;"><img src="button_right_small.gif"></div>
</div>

button_left_small.gif is een plaatje van het linker uiteinde van een afgeronde knop.
Daartussen komt dus een rechthoekig stuk met tekst.
button_right_small.gif is een plaatje van het rechter uiteinde van een afgeronde knop.

Het probleem is echter dat ik als stijl heb dat een URL dik wordt bij hover. Hierdoor wordt de knop dus ook breder bij hover. In sommige gevallen gebruik ik deze knop in een tabel en als de width dan te klein is schuift het rechter gedeelte van de knop naar de volgende regel. Om dit te voorkomen wil ik dus eigenlijk de width van het middenstuk vast zetten zodat het niet groter hoeft te worden als de tekst bold wordt. Iemand enig idee hoe ik dit kan aanpakken?

[mithras]

Wat is het uiterlijk van de knop? Ik denk namelijk dat je helemaal geen vier divjes nodig hebt voor afgeronde hoeken Als je even een normale en bold variant laat zien is de hulp om een betere markup te geven eenvoudiger denk ik.

[MueR]

Je zou dit inderdaad gewoon kunnen doen met een a en een span. Je kan die afgerondde hoeken als background instellen, waardoor ze nooit zullen wegklappen.

Waarom gebruik je trouwens inline styling hiervoor? Een class voor die dingen zou een stuk makkelijker zijn. Daarbij zou ik je ook aanraden om juist geen bold bij een onhover te gebruiken. Het probleem zie je hier al direct, je gaat stukken tekst (of in dit geval images) naar volgende regels laten wegklappen, wat heel vervelende gevolgen kan hebben. Stel dat de link zelf precies op het einde van de regel staat, waardoor die naar de volgende regel wegklapt. Dan is je onhover weg, de link valt weer terug naar de huidige regel, waardoor hij weer een onhover krijgt, weer wegvalt, enzovoorts.

[Verwijderd]

Normaal:


Bold:

[Verwijderd]

MueR schreef op zondag 03 januari 2010 @ 12:33:
Je zou dit inderdaad gewoon kunnen doen met een a en een span. Je kan die afgerondde hoeken als background instellen, waardoor ze nooit zullen wegklappen.

Waarom gebruik je trouwens inline styling hiervoor? Een class voor die dingen zou een stuk makkelijker zijn. Daarbij zou ik je ook aanraden om juist geen bold bij een onhover te gebruiken. Het probleem zie je hier al direct, je gaat stukken tekst (of in dit geval images) naar volgende regels laten wegklappen, wat heel vervelende gevolgen kan hebben. Stel dat de link zelf precies op het einde van de regel staat, waardoor die naar de volgende regel wegklapt. Dan is je onhover weg, de link valt weer terug naar de huidige regel, waardoor hij weer een onhover krijgt, weer wegvalt, enzovoorts.

Klopt, ik doe liever ook geen bold bij de onhover maar dit was gewenst door diegene die het gaat gebruiken.

[mithras]

Ik zou zoiets doen:

HTML:

<a href="http://google.com" class="button">http://google.com<span></span></a>

a: display block, linkerronding
span: float right, display block, rechterronding

Volgens mij moet het dan lukken. Bij te brede blokken -> geheel gaat naar volgende regel.

[Verwijderd]

mithras schreef op zondag 03 januari 2010 @ 12:51:
Ik zou zoiets doen:

HTML:

<a href="http://google.com" class="button">http://google.com<span></span></a>

a: display block, linkerronding
span: float right, display block, rechterronding

Volgens mij moet het dan lukken. Bij te brede blokken -> geheel gaat naar volgende regel.

Mithras, bedankt!
Met behulp van jouw tip is het me gelukt. Ik heb het een beetje anders moeten doen omdat ik het met een span niet gedaan kreeg (als er geen tekst in staat, wordt de span niet weergegeven, althans bij mij niet )
Ook moest ik nog een beetje klooien met padding e.d. om de tekst een beetje mooi in het midden te krijgen. Voor de search hier nog even de totale source:

Cascading Stylesheet:

.button {
    background-color: #e3edf6;
    float:left;
    padding-top:4px;
    height: 19px; 
}

.button .divleft {
    background-image:url('button_left_small.gif');
    background-repeat:no-repeat;
    background-position: top left;
    width: 12px;
    height: 23px;
    float: left; 
    position: relative;
    top: -4px;
    left: 0px;     
}

.button .divright {
    background-image:url('button_right_small.gif');
    background-repeat:no-repeat;
    background-position: top right;
    width: 12px;
    height: 23px;
    float: right;
    position: relative;
    top: -4px;
    left: 0px;
}

De url ziet er dan als volgt uit:

HTML:

<a  class='button' href="http://www.google.nl"><div class='divleft'></div>Google<div class='divright'></div></a>

[MueR]

Wat omslachtig zeg? Als een span leeg is wordt hij niet weergegeven nee, dus doe dan dit?

HTML:

<a href="http://www.google.nl/" class="button"><span>Google</span></a>

Overigens mag je wel wat consistenter worden met je html. Je gebruikt single quotes en dubbelquotes door elkaar voor attributes. Probeer daar gewoon altijd dubbelquotes of altijd singlequotes te gebruiken (met een heel heel heel sterke voorkeur voor dubbelquotes ivm javascript).

[Verwijderd]

Wat een gepruts. Een div mag helemaal niet binnen een a element voorkomen. Heel simpel gesteld: een a element is een inline-level element, en daarbinnen mogen geen block-level elementen voorkomen. Verder is een lege div of span toevoegen bijna altijd een teken dat je aan het knoeien bent. Waarom niet gewoon alle tekst van de button binnen die span zetten? En wat is er met top: -4px? Dat is helemaal niet nodig als je weet waar de stukjes "lege ruimte" vandaan komen.

[Verwijderd]

Trust me, alle tekst in een span heb ik als eerste geprobeerd. Dit werkte echter niet omdat ik zowel links als rechts een knop uiteinde moet toevoegen. Dus toen heb ik geprobeerd om het linker uiteinde in de <a> tag op te nemen en het rechter uiteinde in de span, maar toen liep ik tegen het probleem aan dat de background image bovenaan in de <a> tag moet zitten maar de tekst met een padding-top van 2px en lukt dat dus niet. Ik moet dus de 2 uiteinden als losse elementen toevoegen. De span tag werkte daar niet voor mij en dus een <div>

[BtM909]

En dus lees je niet wat Cheatah zegt, trust me

[Verwijderd]

Wellicht begrijp ik je dan verkeerd Cheatah, zou je jouw idee eens kunnen proberen met deze twee plaatjes als uiteinde:

Links:
Rechts:

Alvast bedankt

[mcDavid]

Als je de knop toch een vaste breedte wilt geven, wat doe je dan uberhaupt moeilijk? maak gewoon één achtergrondplaatje met 4 ronde hoeken en je bent klaar.

Als het toch generieker moet, heb je het voor 40% van je bezoekers op deze manier al opgelost:

Cascading Stylesheet:

-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;

Helaas blijf je in de HTML wel met extra tags zitten, anders krijg je het voor IE onmogelijk werkend.

[Verwijderd]

Dat is juist het probleem, het moet geen vaste breedte worden. Ik schrijf een functie waar ik een <a href> tag naar toe gooi en die er dan een knop "omheen zet", dus variabele breedte

[mcDavid]

Verwijderd schreef op zondag 03 januari 2010 @ 14:45:
Wellicht begrijp ik je dan verkeerd Cheatah, zou je jouw idee eens kunnen proberen met deze twee plaatjes als uiteinde:

Links: [afbeelding]
Rechts: [afbeelding]

Alvast bedankt

Cascading Stylesheet:

a {background: #E3ECF5 url("button_left_small.gif") no-repeat top left} 
a span {background: url("button_right_small.gif") no-repeat top right}

Uit mijn hoofd maar volgens mij werkt het zo.
_{Maar ik zou dat dus tussen conditional comments zetten, scheelt voor niet-IE gebruikers weer 2 http-requests}

[ Voor 8% gewijzigd door mcDavid op 03-01-2010 15:08 ]

[mithras]

^^ al deze oplossingen hierboven bedoelde ik ook. Per ongeluk was het <span></span>, maar dat moest logischerwijs natuurlijk om de gehele tekst binnen het <a> element staan. Verder is met de juiste afbeeldingen dit helemaal niet moeilijk.

Op de a een background image én background color en de span daarbovenop nog een extra background-image geven. Ben je helemaal klaar

/edit: en daarnaast, lees de opmerkingen van Cheatah nog eens goed. Er zit een fundamenteel verschil tussen een inline en block element. De volgorde waarin je werkt is belangrijk, zeker als je gaat kijken naar efficiency (schone html is sneller te renderen) en browser-compatibiliteit. Wellicht een goede les om eens wat informatie over dit soort onderdelen op te zoeken (bijv. ook het principe van een box model bij html).

[ Voor 36% gewijzigd door mithras op 03-01-2010 15:20 ]

[Verwijderd]

Allen bedankt voor de opmerkingen. Ik heb nu een wat schonere oplossing, die zorgt voor minder problemen:

Cascading Stylesheet:

.button {  
    background-color: #e3edf6;
    padding-left: 12px;
    height: 23px;
    line-height: 20px;
    background-image:url('button_left_small.gif');
    background-repeat:no-repeat;
    background-position: left;
    display: block;
    float: left;
    
}

.button .tekst {
    background-image:url('button_right_small.gif');
    background-repeat:no-repeat;
    background-position: top right;
    height: 23px;
    padding-right: 12px;          
    display: block;
    float: left;
}

Eerst zat ik nog even te stoeien met het "centreren" van de tekst. dit probeerde ik in de <a tag> te regelen met padding-top: 4px. Het probleem was echter dat de background image dan ook omlaag sprong en dit kon ik niet herstellen met background-position. Uiteindelijk heb ik het met een line-height kunnen oplossen.

De "schonere" (voor zover dat hier kan ) HTML is nu:

HTML:

<a class="button" href="http://www.google.nl"><span class="tekst">Google</span></a>

[H004]

Die 'class="tekst"' kun je natuurlijk ook nog droppen. Dat maakt het geheel nog iets compacter...

Cascading Stylesheet:

.button span { /* ... */ }

[ Voor 6% gewijzigd door H004 op 03-01-2010 16:10 ]

[Verwijderd]

Klopt!
Schoon, schoner, schoonst

[mcDavid]

Display:block en float:left kun je volgens mij ook droppen als je de line-height gewoon direct goed maakt.

En hoewel dit natuurlijk cross-browser werkt, zou ik toch overwegen dit IE-only te maken en voor andere browsers gewoon de border-radius te gebruiken.

[ Voor 42% gewijzigd door mcDavid op 03-01-2010 18:28 ]