[CSS] Verschillende li breedtes

[Verwijderd]

Beste Tweakers,

Ik wil graag voor alle buttons in mijn site verschillende breedtes hebben.
Hiervoor heb ik opgezet:

Cascading Stylesheet:

ul#button, ul#button ul, ul#button li, ul#button a
{
    margin: 0px 0px 0px 0px;
    padding: 0px;   
    display: block;
    float: left;
    clear: none;
}

ul#button li, ul#button a
{
    height:21px;
    text-align:center;
    text-decoration:none;
    font-family: "Arial", "Tahoma";
    font-size: 10pt;
    font-weight: bold;
    color: #336666;
    letter-spacing:0px;
    line-height:2em;
}

Maar nu vind ik het lelijk om voor iedere button een ul#Homebutton li, ul#Homebutton a, ul#infobuttons etc toe te moeten voegen.

Is het mogelijk om iets als dit te doen?

Cascading Stylesheet:

ul#Homebutton li, ul#Homebutton a
{
    Erf de style van ul#button li
    width: 100px;
}
ul#Infobutton li, ul#Infobutton a
{
    Erf de style van ul#button li
    width: 100px;
}

[Verwijderd]

Als ik je goed begrijp wil je zoiets?

Cascading Stylesheet:

#id_van_ul li {
  height: 20px;
  background-color: #000;
}

#id_van_ul_li li.home {
  width: 200px;
}

#id_van_ul_li li.contact {
  width: 250px;
}

Alle li's binnen de ul met id id_van_ul worden hierme 20px hoog en krijgen een zwarte achtergrondkleur. De li's met de classnames home en contact worden respectievelijk 200px en 250px breed (en dus 20px hoog en zwart van achtergrond).

edit: Bij nogmaals lezen wil je volgens mij iets anders. Iedere li hetzelfde stylen kun je door simpelweg

Cascading Stylesheet:

li {
  styling here
}

te doen.

[ Voor 17% gewijzigd door Verwijderd op 19-06-2006 22:26 ]

[Dennis]

Hij weet wel hoe het werkt, maar wil liever niet alle buttons apart vermelden in de css. Ik vrees dat dit toch noodzakelijk is.

[Verwijderd]

edit: Bij nogmaals lezen wil je volgens mij iets anders. Iedere li hetzelfde stylen kun je door simpelweg

Ik wil ze allemaal het zelfde stylen, alleen sommige breder dan de andere

[Verwijderd]

Verwijderd schreef op maandag 19 juni 2006 @ 22:35:
[...]

Ik wil ze allemaal het zelfde stylen, alleen sommige breder dan de andere

Helaas kan een browser niet raden hoe breed iedere li moet zijn, dus dat moet je per li definieren

[Verwijderd]

Helaas kan een browser niet raden hoe breed iedere li moet zijn, dus dat moet je per li definieren

Dat snap ik, maar wat is nu de netste manier?

[Verwijderd]

Verwijderd schreef op maandag 19 juni 2006 @ 22:38:
[...]


Dat snap ik, maar wat is nu de netste manier?

De styling die voor iedere li hetzelfde is eenmaal definieren, en de extra styling (zoals de breedte) en de styling die je wilt overschrijven (wanneer je li's in 80% van de gevallen 100px breed zijn zou ik dit in de css zetten en waar nodig overschrijven) met classes zou ik zeggen.

[Verwijderd]

Overschrijven lijkt inderdaad een nette oplossing

[BtM909]

Waar denk je dat Cascading stylesheets voor staat

[acemoo]

BtM909 schreef op dinsdag 20 juni 2006 @ 16:46:
Waar denk je dat Cascading stylesheets voor staat

Ik heb geen idee waar Cascading voor staat.

[Blaise]

Netste manier is om alle gezamenlijke eigenschappen eenmaal te vermelden, en alle individuele kenmerken per item ook eenmaal. Je ontkomt er niet aan dat je voor elk item de breedte moet definiëren als de breedte uniek is.

Het zou eventueel wel kunnen dat je geen breedte definieert en een display:inline of float:left geeft aan je items, zodat de breedte automatisch wordt aangepast aan de breedte van de tekst. Je kan dan je items dynamisch breder/smaller maken met margin, padding en border. Maar ik heb geen inzicht in je situatie dus wellicht kan dat niet.

[Zoefff]

Als ik het goed begrijp wil je alle buttons dezelfde style geven, en enkel een verschillende breedte?

Volgens mij kan je een paar dingen doen. Ik probeer altijd zo weinig mogelijk id's en classes op mijn pagina te gebruiken, is het niet noodzakelijk, dan ook niet gebruiken. Dat komt de overzichtelijkheid ten goede. Als het even mogelijk is zou ik dus een standaardstyle voor de ul / li maken, en alleen uitzonderingen daarop (als je ergens een lijst níet als buttons wilt gebruiken) apart stylen. Maargoed, even er vanuitgaand dat dit niet mogelijk is zou ik het volgende doen:

Cascading Stylesheet:

ul.button {
    margin:0px;
    padding:0px;    
    display:block;
    float:left;
    clear:none;
}

ul.button li, ul.button a
{
    height:21px;
    text-align:center;
    text-decoration:none;
    font-family: "Arial", "Tahoma";
    font-size: 10pt;
    font-weight: bold;
    color: #336666;
    letter-spacing:0px;
    line-height:2em;
}

En dan voor de aparte buttons:

Cascading Stylesheet:

ul#buttonid li, ul#buttonid a {
    width: 100px;
} 

Alle ul's met de class 'button' krijgen in ieder geval die stijl mee, en de buttons die ook een id meekrijgen, krijgen die stijl er nog bovenop.

Dus zoiets:

HTML:

<ul class="button" id="buttonid">
    <li>blaat</li>
</ul>

Als je binnen een ul een aantal li's wilt hebben met verschillende breedte, dan moet je het id natuurlijk verplaatsen naar de li, en er in de CSS "li#buttonid" i.p.v. "ul#buttonid li" van maken.

Let op het gebruik van class en id, dat is bewust zo gekozen. Een class kan je meerdere malen op dezelfde pagina gebruiken, terwijl een id uniek moet zijn.

[ Voor 7% gewijzigd door Zoefff op 20-06-2006 18:39 ]

[Verwijderd]

Cascading Stylesheet:

ul.lijst li {
    font-family: Verdana;
    font-size: 11px;
    /* etc. */
}

ul.lijst li.small {
    width: 100px;
}

ul.lijst li.large {
    width: 150px;
}

En dan in je HTML:

HTML:

<ul class="lijst">
    <li class="small">a</li>
    <li class="small">b</li>
    <li class="large">c</li>
    <li class="large">d</li>
    <li class="small">e</li>
    <li class="large">f</li>
</ul>

De stijl die je definieerd in `ul.ijst li` wordt toegepast op alle li-elementen.
Vervolgens vul je deze stijl aan met een extra class.
Succes

[ Voor 34% gewijzigd door Verwijderd op 21-06-2006 16:49 ]

[Verwijderd]

Verwijderd schreef op woensdag 21 juni 2006 @ 16:49:
Vervolgens vul je deze stijl aan met een extra class.

Die ik niet 'small' en 'large' zou noemen, maar een naam zou geven wat de inhoud en niet de weergave omschrijft. Misschien maak je ze later wel even groot, maar rood en blauw en dan snap je er niets meer van met die namen

[Verwijderd]

Je zou ook iets kunnen doen met li + li + li. Echter ondersteund IE zoiets moois natuurlijk niet..