[CSS] ul width 100%

[lensy]

Hallo,

Ik ben bezig de site van mijn scouts mobiel te maken (*nog altijd irrelevant*). Nu wil ik dat het menu zich aanpast aan de breedte van het scherm, om zo zo weinig mogelijk problemen te hebben met de verschillende mobiele platforms.

Dus ik wil ul op 100% zetten. Dit lijkt hij echter niet te nemen zoals je kan zien, de ul items blijven een minimale grootte te hebben.

code:

#mainMenu {
    position: absolute;
    left: 110px;
    top: 10px;
        background-color: rgb(232, 229, 40);
}
ul#nav1 {
    font-size: 13pt;
    list-style: none;
        padding: 0;
        margin: 0;
    width: 100%;
}
ul#nav1 li{
    float: left;
        margin: 0 0.15em;
}
ul#nav1 li a{
    list-style: none;
        float: left;
        height: 43px;
        line-height: 2.5em;
    color: rgb(31, 33, 72);
    background-color: rgb(232, 229, 40);
        border: 0.1em solid rgb(31, 33, 72);
        text-align: center;
        text-decoration: none;
}

Ik weet niet goed hoe ik dit moet aanpakken, hoe los ik dit best op? Ligt het probleem in de omvattende div of iets dergerlijk?


Alvast bedankt!


edit: meer info

[ Voor 57% gewijzigd door MueR op 23-02-2011 13:34 . Reden: Link weer verwijderd ]

[RobIII]

Als je nou even een (uitgeklede!) testcase bouwt om je probleem te illustreren i.p.v. ons naar een complete site te verwijzen. Nu moeten we door een shitload aan HTML, CSS etc gaan spitten om je probleem überhaupt te pinpointen. Je kunt je probleem prima met een paar regels code in dit topic (gebruik code tags!) illustreren.

Verder zie ik nergens wat je zelf al hebt geprobeerd/gezocht/gevonden/etc. (zie onze Quickstart); we verwachten hier namelijk wel wat meer eigen inzet.

Overigens: Voor een mobiele site zou ik me eerst eens gaan druk maken over de royaal dikke afbeeldingen die je op 1 pagina serveert

[ Voor 61% gewijzigd door RobIII op 23-02-2011 11:55 ]

[Flowmo]

ul {
display:block;
width:auto;
}

klaar...?

[lensy]

RobIII schreef op woensdag 23 februari 2011 @ 11:51:
Als je nou even een (uitgeklede!) testcase bouwt om je probleem te illustreren i.p.v. ons naar een complete site te verwijzen. Nu moeten we door een shitload aan HTML, CSS etc gaan spitten om je probleem überhaupt te pinpointen. Je kunt je probleem prima met een paar regels code in dit topic (gebruik code tags!) illustreren.

Mijn excuses, ik wou snel posten voordat ik even weg moest. Ik heb nu extra info toegevoegd in de eerste post.

Overigens: Voor een mobiele site zou ik me eerst eens gaan druk maken over de royaal dikke afbeeldingen die je op 1 pagina serveert

Daar heb je volledig gelijk in! Ik zal moeten kijken voor thumbnails of dergerlijke, bedankt.

Flowmo schreef op woensdag 23 februari 2011 @ 11:54:
ul {
display:block;
width:auto;
}

klaar...?

Dit geeft spijtig genoeg geen verschil... Nog ideeën?


Verdere opmerkingen/tips zijn ook zeker welkom, ik ben verre van ervaren met websites en de mobiele versies ervan

[Bozozo]

De ul op 100% zetten heeft geen zin; het gaat om de width van de li items. Er is vziw geen 'auto' optie waarbij de list items zich vanzelf uitsmeren.

Twee oplossingen:
- Een procentuele width. Dus 4 items, dan 25% width.
- Een tabel. Maar dan krijg je de semantiekboys over je heen.

[mcDavid]

Bozozo schreef op woensdag 23 februari 2011 @ 13:05:
De ul op 100% zetten heeft geen zin; het gaat om de width van de li items. Er is vziw geen 'auto' optie waarbij de list items zich vanzelf uitsmeren.

Twee oplossingen:
- Een procentuele width. Dus 4 items, dan 25% width.
- Een tabel. Maar dan krijg je de semantiekboys over je heen.

3e oplossing:
- display:table-cell

Maar ik zou toch de voorkeur geven aan jouw eerste oplossing indien mogelijk...

[ Voor 8% gewijzigd door mcDavid op 23-02-2011 13:13 ]

[StephanVierkant]

lensy schreef op woensdag 23 februari 2011 @ 12:51:
[...]
Daar heb je volledig gelijk in! Ik zal moeten kijken voor thumbnails of dergerlijke, bedankt.

Mag ik je http://phpthumb.sourceforge.net/ aanbevelen?

[lensy]

Bozozo schreef op woensdag 23 februari 2011 @ 13:05:
De ul op 100% zetten heeft geen zin; het gaat om de width van de li items. Er is vziw geen 'auto' optie waarbij de list items zich vanzelf uitsmeren.

Twee oplossingen:
- Een procentuele width. Dus 4 items, dan 25% width.
- Een tabel. Maar dan krijg je de semantiekboys over je heen.

Over een tabel heb ik ook zitten denken, en hoewel ik geen semantiekboy ben heb ik daar ook wel wat problemen mee

Procentuele width had ik ook al eens geprobeerd, dit gaf een raar resultaat. Enig idee hoe het zou komen?

code:

ul#nav1 {
    font-size: 13pt;
    list-style: none;
        padding: 0;
        margin: 0;
}
ul#nav1 li{
    float: left;
        margin: 0 0.15em;
}
ul#nav1 li a{
    display: block;
    list-style: none;
        float: left;
        height: 43px;
    width: 25%;
        line-height: 2.5em;
    color: rgb(31, 33, 72);
    background-color: rgb(232, 229, 40);
        border: 0.1em solid rgb(31, 33, 72);
        text-align: center;
        text-decoration: none;
}

Stephan4kant schreef op woensdag 23 februari 2011 @ 13:12:
[...]

Mag ik je http://phpthumb.sourceforge.net/ aanbevelen?

Zeker! Bedankt.

[ Voor 7% gewijzigd door lensy op 23-02-2011 13:16 ]

[mcDavid]

lensy schreef op woensdag 23 februari 2011 @ 13:14:

Procentuele width had ik ook al eens geprobeerd, dit gaf een raar resultaat. Enig idee hoe het zou komen?
[afbeelding]

code:

ul#nav1 {
    font-size: 13pt;
    list-style: none;
        padding: 0;
        margin: 0;
}
ul#nav1 li{
    float: left;
        margin: 0 0.15em;
}
ul#nav1 li a{
    display: block;
    list-style: none;
        float: left;
        height: 43px;
    width: 25%;
        line-height: 2.5em;
    color: rgb(31, 33, 72);
    background-color: rgb(232, 229, 40);
        border: 0.1em solid rgb(31, 33, 72);
        text-align: center;
        text-decoration: none;
}

Bedenk eens hoe je DOM tree eruit ziet, en waar die 25% nou 25% van is...

[OkkE]

Is het niet netter om dan gelijk een echte mobile-version te maken? En in dat geval alle menu-items (zeker in dit geval, omdat het er niet zo veel zijn) onder elkaar te tonen?

Overgens zijn de <a> elementen 25% (van de <li>), dit moet je op de <li> zetten anders past de tekst er nooit goed in...

[SandaX]

Je hebt de width op je a gezet en niet op je li.

[Room42]

Hij heeft alle relevante dingen op de a gezet in plaats van de li

[Bozozo]

mcDavid schreef op woensdag 23 februari 2011 @ 13:12:
[...]

3e oplossing:
- display:table-cell

Maar ik zou toch de voorkeur geven aan jouw eerste oplossing indien mogelijk...

Ah daar had ik niet aan gedacht. Dan wordt het:

Cascading Stylesheet:

  ul {
    display: table;
    width: 100%;
  }
  li {
    display: table-cell;
    text-align: center;
  }

Best prima lijkt me.

[lensy]

OkkE schreef op woensdag 23 februari 2011 @ 13:18:
Is het niet netter om dan gelijk een echte mobile-version te maken? En in dat geval alle menu-items (zeker in dit geval, omdat het er niet zo veel zijn) onder elkaar te tonen?

Wat bedoel je met een "echte" mobile-version?

Overgens zijn de <a> elementen 25% (van de <li>), dit moet je op de <li> zetten anders past de tekst er nooit goed in...

Dat had ik net ook gezien, bedankt (en ook de anderen die dit gezien hebben )

Bozozo schreef op woensdag 23 februari 2011 @ 13:26:
[...]
Ah daar had ik niet aan gedacht. Dan wordt het:

Cascading Stylesheet:

  ul {
    display: table;
    width: 100%;
  }
  li {
    display: table-cell;
    text-align: center;
  }

Best prima lijkt me.

Dit wil ook niet lukken, het blijft er zoals het originele uit zien: dus niet over heel de breedte.

Cascading Stylesheet:

ul#nav1 {
    font-size: 13pt;
    list-style: none;
        padding: 0;
        margin: 0;
    display: table;
    width: 100%;
}
ul#nav1 li{
    display: table-cell;
        text-align: center;
    float: left;
        margin: 0 0.15em;
    list-style: none;
        line-height: 2.5em;
        height: 43px;
    background-color: rgb(232, 229, 40);
        border: 0.1em solid rgb(31, 33, 72);
}
ul#nav1 li a{;
    color: rgb(31, 33, 72);
        text-decoration: none;
}

Zet ik de width van de li gewoon op 25% krijg ik dit:

Hij verdeelt dus het menu over 25% van de pagina, snap ik niet...

[mcDavid]

lensy schreef op woensdag 23 februari 2011 @ 13:42:
[...]

Wat bedoel je met een "echte" mobile-version?


[...]

Dat had ik net ook gezien, bedankt (en ook de anderen die dit gezien hebben )


[...]

Dit wil ook niet lukken, het blijft er zoals het originele uit zien: dus niet over heel de breedte.

Cascading Stylesheet:

ul#nav1 {
    font-size: 13pt;
    list-style: none;
        padding: 0;
        margin: 0;
    display: table;
    width: 100%;
}
ul#nav1 li{
    display: table-cell;
        text-align: center;
    float: left;
        margin: 0 0.15em;
    list-style: none;
        line-height: 2.5em;
        height: 43px;
    background-color: rgb(232, 229, 40);
        border: 0.1em solid rgb(31, 33, 72);
}
ul#nav1 li a{;
    color: rgb(31, 33, 72);
        text-decoration: none;
}

Zet ik de width van de li gewoon op 25% krijg ik dit:
[afbeelding]
Hij verdeelt dus het menu over 25% van de pagina, snap ik niet...

http://css-tricks.com/the-css-box-model/ hier, leesvoer.

[SandaX]

Begin eens met een uitgeklede versie, en voeg langzaam elementen toe. Dan kom je er zelf achter wat je nu eigenlijk allemaal aan het veranderen bent. Je gebruikt nu bijvoorbeeld een border en margin met een fixed width samen met een procentuele breedte van je gehele element.

[ Voor 4% gewijzigd door SandaX op 23-02-2011 13:56 ]

[OkkE]

lensy schreef op woensdag 23 februari 2011 @ 13:42:
Wat bedoel je met een "echte" mobile-version?

De iPhone 4 is prima geschikt om ook normale websites weer te geven, met zijn 960x640 resolutie. Maar niet elk mobiel apparaat heeft zoveel pixels.

Om snel en eenvoudig een website voor een groot aantal mobiele apparaten goed werkend te maken, kun je zoiets als dit kunnen doen.

Uiteraard is dit globaal het idee, je zal het moeten aanpassen naar je eigen situatie.
.

Cascading Stylesheet:

* {
    width: auto;
    float: none;
    position: static;
}
#nav, #nav li, #nav a {
    display: block;
}
#nav a {
    padding: 10px;
}
img {
    width: 100%;
    height: auto;
}

[Bozozo]

lensy schreef op woensdag 23 februari 2011 @ 13:42:

Cascading Stylesheet:

ul#nav1 {
    font-size: 13pt;
    list-style: none;
        padding: 0;
        margin: 0;
    display: table;
    width: 100%;
}
ul#nav1 li{
    display: table-cell;
        text-align: center;
    float: left; /* fout --> weghalen dit! */
        margin: 0 0.15em;
    list-style: none;
        line-height: 2.5em;
        height: 43px;
    background-color: rgb(232, 229, 40);
        border: 0.1em solid rgb(31, 33, 72);
}
ul#nav1 li a{;
    color: rgb(31, 33, 72);
        text-decoration: none;
}

[ Voor 4% gewijzigd door Bozozo op 23-02-2011 18:20 ]