CSS button wil maar niet lukken

[Standeman]

Ik ben sinds kort bezig met CSS.. het lukt nu aardig er zijn alleen twee dingen die maar niet willen lukken, wat me nu begint te frustreren

CSS code:

code:

.button_left {
    position: relative;
    top: 25px;
    width: 25px;
    right: 125px;
    width: 25px;
    height: 26px;
    background-image: url(../images/header_left_yellow.gif);
    background-repeat: no-repeat;
    background-position: right;
}

.button_middle {
    position: relative;
    top: 0px;
    
    right: 25px;
    height: 26px;
    background-image: url(../images/header_middle_yellow.gif);
    background-repeat: repeat-x;
    color: #404040;
    text-align: center;
    line-height: 1.8;
    text-decoration: none;
    font-family: Arial,Helvetica;
    font-size: 9pt;
    font-weight: bold;
}


.button_right {
    position: relative;
    top: -25px;
    right: 0px;
    width: 25px;
    height: 26px;
    background-image: url(../images/header_right_yellow.gif);
    background-repeat: no-repeat;
    background-position: left;
}
.button_middle a {
    text-decoration: none;
    color: #404040;
}

#next_button {
    position: relative;
    text-align: right;
    border-style: solid;
    
}

Mijn HTML ziet er als volgt uit:

code:

        <div id="next_button">
            <div class="button_left"></div>
            <div class="button_middle"><a href="">Volgende&nbsp;&gt;</a></div>
            <div class="button_right"></div>
        </div>

Hier boven wordt een button beschreven die uit drie delen bestaat. Een linkerkant, een middenstuk en een rechterkand. In het middenstuk komen linkjes e.d. te staan voor navigatie.

Mijn probleem is dat ik voor het middenstuk een vaste breedte moet aangeven, omdat anders de hele pagina ervoor gebruikt wordt. Aangezien er in het middenstuk strings komen te staan met een variable lengte, is dat erg lastig.

Tevens heb ik nog het probleem dat de verschillende divs onder elkaar geplaatst worden i.p.v. naast elkaar, waardoor ik de afstanden vanaf de randen moet aanpassen.

Met tabellen lukt me dit makkelijk, aangezien een cell zich automatisch aanpast aan de breedte van de tekst.

Iemand enig idee hoe ik een dynamisch knopje kan maken welke zich automatisch aanpast aan de breedte van de tekst die erin staat?

[Coldcat]

ik denk dat je beter met percentages kan gaan werken aangezien die bij elke resolutie goed bereikbaar zijn.

[Standeman]

Coldcat schreef op donderdag 02 juni 2005 @ 13:12:
ik denk dat je beter met percentages kan gaan werken aangezien die bij elke resolutie goed bereikbaar zijn.

Percentages hebben geen nut aangezien mijn background-image een bepaald formaat heeft. Verder zou dan de text in het midden wel netjes afgepast zijn in 800x600 maar niet in 1024x768.. Zou een beetje zonde zijn.

[ACID-dude]

<css noob alert>

kan je #next_button geen width meegeven?

</css noob alert>

[Standeman]

ACID-dude schreef op donderdag 02 juni 2005 @ 13:17:
<css noob alert>

kan je #next_button geen width meegeven?

</css noob alert>

Ja.. dat kan wel, maar dat lost mijn probleem niet op... bijv:

button 1: <><Volgende><>
button 2: <><hottentottentententoonstelling><>

Als ik een vaste width heb waar hottentottentententoonstelling in past, zou button 1 onnodig lang zijn..

offtopic:
Noob?? Wie ik?? *grrr* .. nou ja, qua css misschien wel

[ Voor 8% gewijzigd door Standeman op 02-06-2005 13:20 ]

[ACID-dude]

Standeman schreef op donderdag 02 juni 2005 @ 13:20:
[...]

offtopic:
Noob?? Wie ik?? *grrr* .. nou ja, qua css misschien wel

offtopic:
Nee, ik bedoelde mezelf . Ik ben er pas net mee bezig.

Dan weet ik het ook even niet. Ik kan het moeilijk visualiseren.

[TeeDee]

Pseudo spul:

Cascading Stylesheet:

#next_button {
    position: relative;
    text-align: right;
    border-style: solid 1px black;
}

.left {
  position:relative;
  float:left;
  height:26px;
  width:25px;
}

.right {
  position:relative;
  float:left;
  height:26px;
  width:25px;
}

.middle {
  position:relative;
  float:left;
  height:26px;
  background-image: url(../images/header_middle_yellow.gif);
  background-repeat: repeat-x;
}

HTML:

<div id="next_button">
    [img]"left.gif">
[/img]Volgende. ... .. .</p>
     [img]"right.gif">
</div[/img]

Lichtelijk getest, maar lijkt me dat dit the way to go is.

[ Voor 36% gewijzigd door TeeDee op 02-06-2005 13:33 ]

[Standeman]

TeeDee schreef op donderdag 02 juni 2005 @ 13:32:
Pseudo spul:

Cascading Stylesheet:

#next_button {
    position: relative;
    text-align: right;
    border-style: solid 1px black;
}

.left {
  position:relative;
  float:left;
  height:26px;
  width:25px;
}

.right {
  position:relative;
  float:left;
  height:26px;
  width:25px;
}

.middle {
  position:relative;
  float:left;
  height:26px;
  background-image: url(../images/header_middle_yellow.gif);
  background-repeat: repeat-x;
}

HTML:

<div id="next_button">
    [img]"left.gif">
[/img]Volgende. ... .. .</p>
     [img]"right.gif">
</div[/img]

Lichtelijk getest, maar lijkt me dat dit the way to go is.

Gewoon geen div-jes gebruiken dus Het zijn dus net tabellen en komen onder elkaar te staan.. weer een leer momentje!!

[Verwijderd]

Nog een leermomentje dan. Underscores in je CSS is not done.
Gebruik liever een benaming als "nextButton" ipv "next_button"

[Sappie]

Verwijderd schreef op donderdag 02 juni 2005 @ 15:28:
Nog een leermomentje dan. Underscores in je CSS is not done.
Gebruik liever een benaming als "nextButton" ipv "next_button"

waar haal je die wijsheid vandaan? Het gebruik van hoofdletters, en daarmee dus camelCasing, in attributes (en volgens mij dus ook de inhoud daarvan) is in XHTML bijvoorbeeld niet correct afaik (maar dit zoek ik even op en hier zou ik ongelijk in kunnen hebben.) Het is iig onzin dat het gebruik van underscores not done is.

edit:
Excuses.. ik had het bij het verkeerde eind:

http://devedge-temp.mozil...rce/2001/css-underscores/

ipv underscores dus idd beter zoals zkywalker aangeeft camelCasing of hyphens "-"

[ Voor 40% gewijzigd door Sappie op 02-06-2005 15:38 ]

[Verwijderd]

hoofdletters mag prima in x(ht)ml

[Sappie]

Ik was idd even in de war met de element en attribute names.. die wel altijd in lowercase moeten. http://www.w3.org/TR/xhtml1/#h-4.2

[Verwijderd]

http://www.ericmeyeroncss.com/bonus/render-mode.html

Avoid Underscores
Because of their twisted support history, you are strongly encouraged not to use underscores in class and id values. Hyphens are permitted and are a common substitute (as in test-class).

In de oude dagen gaf de underscore nogal wat problemen met Netscape browsers, vandaar dat er ingeslopen is als een "not done".

[ Voor 20% gewijzigd door Verwijderd op 02-06-2005 15:39 ]

[Verwijderd]

Sappie schreef op donderdag 02 juni 2005 @ 15:32:
[...]

waar haal je die wijsheid vandaan? Het gebruik van hoofdletters, en daarmee dus camelCasing, in attributes (en volgens mij dus ook de inhoud daarvan) is in XHTML bijvoorbeeld niet correct afaik (maar dit zoek ik even op en hier zou ik ongelijk in kunnen hebben.) Het is iig onzin dat het gebruik van underscores not done is.

De attributen zijn inderdaad case-sensitive, maar de waardes van de attributen niet, dus klopt het niet wat je zegt.

Underscores worden niet door elke browser gesupport, daar doelt hij denk ik op. Vroeger stond dit namelijk ook niet in de W3C CSS specificatie.

Edit: moet wat sneller typen

[ Voor 3% gewijzigd door Verwijderd op 02-06-2005 15:40 ]

[Sappie]

Ik had mn post al geëdit.. dit was dus echt iets wat ik niet wist.. en ik zal het van nu af aan dan ook maar eens niet meer gaan gebruiken

[DeFeCt]

nog een opmerking

code:

line-height: 1.8;

1.8 wat?

[Standeman]

DeFeCt schreef op donderdag 02 juni 2005 @ 15:42:
nog een opmerking

code:

line-height: 1.8;

1.8 wat?

Ik had een beetje zitten klooien om de tekst een beetje in het midden te krijgen.. Om de 1 of andere reden werken vertical-align: bottom; niet... Met line-height, ging het wel.. (Vraag me niet waarom en ja, het is fout).

@zkywalker
Ik gebruik altijd underscores in HTML / Script / CSS.. Anders ga ik nog wel eens automatisch java-code typen

[DeFeCt]

het is niet echt fout, maar je geeft geen eenheid mee aan die 1,8 en dat zou ik wel doen.

[Erkens]

DeFeCt schreef op vrijdag 03 juni 2005 @ 09:30:
het is niet echt fout, maar je geeft geen eenheid mee aan die 1,8 en dat zou ik wel doen.

zonder eenheid is het gewoon goed (en aanbevolen) dit is namelijk x de font-size, dus als je een font-size van 12px hebt met een line-height van 1.8 dan wordt het 21.6

[bolleh]

dat die 3 divs onder elkaar worden geplaatst ipv naast elkaar komt door position: relative. daar kun je dan beter float: left voor gebruiken

[Verwijderd]

heb je ergens een voorbeeld link ?
dit ziet er qua markup bijzonder omslachtig uit (heb ik het idee).

[Standeman]

Verwijderd schreef op vrijdag 03 juni 2005 @ 12:30:
heb je ergens een voorbeeld link ?
dit ziet er qua markup bijzonder omslachtig uit (heb ik het idee).

Hij staat hiero (tijdelijk) online.. Het is dus al aardig gelukt zoals je kan zien..


Maar goed, ik stuit weer op een nieuw probleem. De vraag is of de kleur van de balk (het oranje) via CSS aangegeven kan worden. Helaas ondersteund IE geen 24 bits PNG, anders had ik namelijk een transparante layer gemaakt welke het "XP achtig effect" (de gradient) er over heen zet en dan de kleur als achtergrond van het element gemaakt. Een gradiant van transparant naar wit kan volgens mij niet in een gif aangezien volgens mij omdat gif geen alphachannels kent

Iemand een idee??

[ Voor 9% gewijzigd door Standeman op 03-06-2005 13:36 ]

[Wacky]

Met javascript is dat probleem met de transparante JPG's op te lossen

Verder ziet in Firefox alleen de header er goed uit, de button daarentegen juist helemaal niet

[SnoeiKoei]

En ik hoop dat uiteindelijk je header er niet meer uitziet als een enorme knop, is wat misleidend zo.
In IE ziet het er iig wel goed uit nu.

[Standeman]

Wacky schreef op vrijdag 03 juni 2005 @ 15:23:
Met javascript is dat probleem met de transparante JPG's op te lossen

Verder ziet in Firefox alleen de header er goed uit, de button daarentegen juist helemaal niet

Transparantie in JPG's Dat bestaat volgens mij niet hoor..

hmmm.. in FireFox ziet het er inderdaad niet uit.. Gauw maar even wat aan doen

@Snoeikoei.. Op het moment hoef ik het alleen maar het werkend te krijgen, daarna gaan we pas nadenken over kleurtjes e.d.

[Verwijderd]

Het is dus al aardig gelukt zoals je kan zien..

ik zou me ernstig afvragen waarom je dit zo willen doen ?

Je argument van hottentottentententoonstelling vind ik niet realistisch.
Hoe denk je hiermee hovers te gaan aanpakken ? Dat gaat niet verder dan de tekstkleur.

je kunt beter denken aan het restylen van de html tags (ook met accessibility in het achterhoofd.)

Ik zou het zelf zo doen, plus dat het browsercompatible is.

[ Voor 4% gewijzigd door Verwijderd op 03-06-2005 15:42 ]

[Standeman]

Verwijderd schreef op vrijdag 03 juni 2005 @ 15:42:
[...]

ik zou me ernstig afvragen waarom je dit zo willen doen ?

Je argument van hottentottentententoonstelling vind ik niet realistisch.
Hoe denk je hiermee hovers te gaan aanpakken ? Dat gaat niet verder dan de tekstkleur.

je kunt beter denken aan het restylen van de html tags (ook met accessibility in het achterhoofd.)

Ik zou het zelf zo doen, plus dat het browsercompatible is.

Hey.. wow.. dat ziet er goed uit zet.. en heel wat minder code die nodig is. Ik heb zelf ook nog niet zo veel ervaring in CSS (zie mjn sig.. )

Ik moet alleen nog een manier bedenken om de kleurstelling wat dynamischer te maken zodat er niet heel veel plaatjes gemaakt hoeven te worden.. maar goed, daar gaan we gewoon even over denken..

[bolleh]

Verwijderd schreef op vrijdag 03 juni 2005 @ 15:42:
[...]

ik zou me ernstig afvragen waarom je dit zo willen doen ?

Je argument van hottentottentententoonstelling vind ik niet realistisch.
Hoe denk je hiermee hovers te gaan aanpakken ? Dat gaat niet verder dan de tekstkleur.

je kunt beter denken aan het restylen van de html tags (ook met accessibility in het achterhoofd.)

Ik zou het zelf zo doen, plus dat het browsercompatible is.

als je dan toch zon soort image rollover doet doe dan een manier gebruiken dat je alle images precached hebt, nu zie je de eerste keer ff nix en ineens die background
hier een tutorial voor image rollover waarbij beide knoppen in 1 image staan en dus geen extra laadtijd hebben zodra je een mouseover doet

[Verwijderd]

bolleh schreef op zaterdag 04 juni 2005 @ 00:33:
[...]

als je dan toch zon soort image rollover doet doe dan een manier gebruiken dat je alle images precached hebt, nu zie je de eerste keer ff nix en ineens die background
hier een tutorial voor image rollover waarbij beide knoppen in 1 image staan en dus geen extra laadtijd hebben zodra je een mouseover doet

leuke opmerking, maar flickering ontstaat alleen als je in IE de cache optie op "altijd" hebt staan. webdevelopers doen dit vaak, een gemiddelde bezoeker heeft dit gewoon op automatically staan en dan is die flickering er niet. Maar goed als je dat wilt uitsluiten dan zou je die optie (for the record: sliding doors) kunnen gebruiken

[ Voor 10% gewijzigd door Verwijderd op 04-06-2005 09:28 ]

[Annie]

Standeman schreef op vrijdag 03 juni 2005 @ 15:39:
[...]

Transparantie in JPG's Dat bestaat volgens mij niet hoor..

Klopt, maar er wordt ook gewoon PNG bedoelt. Zoek maar eens op ie png fix o.i.d.