[css] tekst/list elementen gelijk verdelen over breedte - Softwareontwikkeling

vrijdag 28 november 2008 16:59

Acties:

0 Henk 'm!

Topicstarter

Beste mensen,

ik wil voor een menu van een website over de volle breedte items hebben, gelijk verdeeld en met evengrote 'gaten'

ongeveer dit idee:

HTML:

<div>
  <span>item 1</span>
  <span>item 2</span>
  <span>item 3</span>
  <span>item 4</span>
</div>

maar dan dmv een list (ul), echter nu wil ik graag over de hele breedte van de div (800px) de items verdeeld hebben.
Dus helemaal links 1 (tegen border aan) en helemaal rechts de laatste.

is hier een truuk voor? Ik heb al wat zitten kutten, maar ik kom er niet uit.
Als ik margin's gebruik is het
a: static
b: buitensta items komen niet tegen rand aan.

ik heb justify geprobeerd, maar dat werkt natuurlijk niet als je maar 4 items hebt en dan niks meer.

hoopte dat ik niet de eerste was met dit probleem

This message was sent on 100% recyclable electrons.

vrijdag 28 november 2008 17:51

Acties:

0 Henk 'm!

Da Weef

Het wordt mij niet helemaal duidelijk wat je precies wilt. Grafisch voorbeeld zou helpen met eenduidige uitleg.

-Hebben de items een vaste breedte?
-Is het aantal items variabel?
-Bestaan items alleen uit tekst/links?

vrijdag 28 november 2008 18:33

Acties:

0 Henk 'm!

Verwijderd

Eigenlijk wil je dus het gedrag van een tr met td's nabootsen, toch?

Wellicht werkt display:table-cell e.d. Kom je wel weer met IE in de knoei.

vrijdag 28 november 2008 18:46

Acties:

0 Henk 'm!

BasieP

Topicstarter

ja/nee

sorry dat het niet zo duidelijk is, ik zal een tekening maken
Afbeeldingslocatie: http://huistenwolde.nl/test.png

oke, de lijnen zijn mijn andere elementen (divs/etc) nu wil ik over de volle breedte een menu. Dit menu bestaat uit een aantal items (4 op de tekening)
het linker item staat helemaal links, en de rechter helemaal rechts.
de items zijn variabel van breedte, en het zijn soms 1 en soms meerdere woorden. dus een menuitem zou kunnen zijn: 'home' maar ook 'onze vette actie'
De ruimte tussen de items moet even groot zijn, maar de items zelf mogen niet uitgerekt worden. Dus 'onze vette actie' moet 1 item blijven, dus de tekst dicht bij elkaar. Niet een soort van justify.

als ik een table maak is het gedrag van de table zelf wel goed, maar binnen zo'n cell is de tekst dan left-alignt, en dat betekent weer dat het laaste item niet helemaal rechts tegen de kantlijn aan staat

[ Voor 13% gewijzigd door BasieP op 28-11-2008 18:47 ]

This message was sent on 100% recyclable electrons.

vrijdag 28 november 2008 19:46

Acties:

0 Henk 'm!

McKaamos

Master of the Edit-button

alignment op Justify zetten?

edit: sorry, laat maar, ik lees weer eens niet goed
Kan je het omliggende element geen justify geven, zodat alle span-stukjes verdeeld worden?
En dan de spans align center of een andere (non justify) waarde mee geven.

Zomaar een hersenspinsel, niet getest dus.

[ Voor 110% gewijzigd door McKaamos op 28-11-2008 20:02 ]

Iemand een Tina2 in de aanbieding?

vrijdag 28 november 2008 20:04

Acties:

0 Henk 'm!

Verwijderd

Heeft ieder item een bepaalde breedte?
Want dan valt het in CSS natuurlijk ook zo op te lossen:

Cascading Stylesheet:

#Item1
{position:absolute;
left:0px;
}
/*Afstanden tot rand overige 2 bestanden berekenen*/
#Item4
{position:absolute;
right:0px;
}

Zo krijg je je Item 1 en 2 al zeker tegen de twee buitenste randen. de afstand van de middelste figuren is gemakkelijk te bereken.

vrijdag 28 november 2008 20:08

Acties:

0 Henk 'm!

H004

Heb je aan [CSS] Menu horizontaal spreiden misschien wat?

vrijdag 28 november 2008 20:31

Acties:

0 Henk 'm!

Verwijderd

Beetje smerig, maar zoiets?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Menu</title>
    <style type="text/css" media="screen">
        a {
            text-decoration:none;
        }
        #container {
            position:relative;
            width:800px;
            margin:0px auto;
            height:600px;
            border:1px solid black;
        }
        #txt {
            text-align:justify;
        }
            #justifier {
                visibility:hidden;
            }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="txt">
                <a href="#">BARTdG</a>
                <a href="#">Lorem&nbsp;ipsum</a>
                <a href="#">Piep</a>
                <a href="#">Blaaaaaaaat</a>
                <a href="#">Gallia&nbsp;est&nbsp;omnis&nbsp;divisa</a>
                <span id="justifier">WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span>
            </div>
        </div>
    </body>
</html>

vrijdag 28 november 2008 21:58

Acties:

0 Henk 'm!

H004

Gebruik dan wel de unordered list voor het menu, en ipv onzin in de justifier-element te zetten kun je die beter leeglaten en padding-left: 100% eraan verbinden. Je wil niet dat er opeens allemaal onzinteksten in je html staan, dat geeft mogelijk nogal gekke resultaten in google, bijvoorbeeld...

dus:

Cascading Stylesheet:

ul {    border: 1px solid #000;
    width: 500px;
    text-align: justify;
    height: 1em;
    overflow: hidden;
    margin: 0px;
    padding-left: 0px; 
}
li {    margin: 0px;
    padding: 0px;
    display: inline;
}
li.wrapper{
  padding-left: 100%;
}

HTML:

<ul>
<li><a href="#">tekst</a></li>
<li><a href="#">tekst</a></li>
<li><a href="#">tekst</a></li>
<li><a href="#">tekst</a></li>
<li class="wrapper"></li>
</ul>

[ Voor 46% gewijzigd door H004 op 28-11-2008 22:12 . Reden: Code erbij ]

vrijdag 28 november 2008 22:26

Acties:

0 Henk 'm!

Verwijderd

H004 schreef op vrijdag 28 november 2008 @ 21:58:
Gebruik dan wel de unordered list voor het menu

Ja ja.

en ipv onzin in de justifier-element te zetten kun je die beter leeglaten en padding-left: 100% eraan verbinden.

Dat is een stuk netter ja.

Het ging me om de denkrichting.

zaterdag 29 november 2008 11:24

Acties:

0 Henk 'm!

BasieP

Topicstarter

Tnx H004, (en bartdG) ik denk dat ik met deze trick een heel eind kom

nooit aan een 'opvul' element gedacht

This message was sent on 100% recyclable electrons.

zaterdag 29 november 2008 12:09

Acties:

0 Henk 'm!

BasieP

Topicstarter

1 klein ding...

het werkt niet in chrome....
in IE en FF ziet er er wel perfect uit..

chrome heeft rechts naast het buitenste element nog witruimte. (beetje alsof het een table is met links uitgeleinde tekst)

nu weet ik dat chrome eigenlijk best goed de standaarden volgt, dus dan rijst de vraag:
werkt dit in IE en FF doordat zij de standaarden goed implementeren? of juist omdat ze dat niet doen..

edit,

nog iets leuks:
ik heb eigenlijk een iets ingewikkelder menu, namelijk zo:

HTML:

<ul>
  <li>item</li>
  <li>ITEM 1
    <ul>
      <li>item</li>
      <li>item</li>
    </ul>
  </li>
  <li>ITEM 2
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </li>
</ul>

echter, in IE zet hij het ITEM2 strak achter ITEM1 omdat er in ITEM1 nog een ul binnen de li staat...
dit doet ie zelfs als de ul display: none is...
erg leuk behaivor.
(alleen IE 5.5, 6 en 7 doen dat btw)

[ Voor 61% gewijzigd door BasieP op 29-11-2008 13:58 ]

This message was sent on 100% recyclable electrons.

zondag 30 november 2008 15:28

Acties:

0 Henk 'm!

BasieP

Topicstarter

*kick*

iemand nog tips? hacks? IE werkt nog steeds niet mee

[ Voor 30% gewijzigd door BasieP op 30-11-2008 15:28 ]

This message was sent on 100% recyclable electrons.

zondag 30 november 2008 18:47

Acties:

0 Henk 'm!

BasieP

Topicstarter

whooohoo ik ben er uit.

voor wie nog geinteresseerd was, ik had een gegenereerd menu. Hier zat niet voor een <ul> een whitepace, en op de een of andere manier werkt het dan niet in IE

ik had wel op andere plekken whitespaces, maar het moet dus voor elke ul

soms kots ik echt op IE

This message was sent on 100% recyclable electrons.

Pagina: 1

Reageer