Hallo all

Weet iemaand wat is probleem hier met LIJST,warom die LI image kan niet gewoon in center van link te staan en warom achtegrond color van container niet zichtbaar is?
Ik kan probleem met achtegrond niet vinden...maar hij is HTML/CSS valid!?Hoe kan dat dan??

Link: http://www.vip.asiaparadisehotels.com/index2.html

Graag jullie help

Hier is voorbeeld van layout : http://www.vip.asiaparadisehotels.com/vb.png

mvg
radule

voeg eens een float:left; toe aan de container.

Origineel gepost door DerkVg

voeg eens een float:left; toe aan de container.

Besste Derk,bedankt voor snele reactie!

Met float left is achtegrond color van container wel zichtbar maar hij moet in middle van browser te staan..?

mvg
radule

doe om de container nog een div met margin: 0 auto; en geef dan de container een float mee, dit zou moeten werken.

Origineel gepost door DerkVg

doe om de container nog een div met margin: 0 auto; en geef dan de container een float mee, dit zou moeten werken.

Gelukt! Dankje.

Maar hoe kan ik dan probleem met lijst oplossen?


mvg
radule

Origineel gepost door radule vucetic

Gelukt! Dankje.

Maar hoe kan ik dan probleem met lijst oplossen?


mvg
radule

dat kan volgens mij door de volgende code aan de li door te geven in de css:

Code:

    vertical-align:middle;
    line-height:hoogtevanjeafbeelding;

Vertical-align werkt niet in div...

twee simpele oplossingen:

Om de achtergrond van de container te zien, zet in de css:
overflow:hidden;
(float:left werkt, maar dan moet je weer extra divs maken om het weer te centreren...)

Om de tekst in het midden te zetten ten opzichte van de afbeelding:
zet door middel van css op elke afbeelding: Float:left;
de tekst staan nou los van de afbeelding. Door middel van line-height en padding
kan je dan de tekst in het midden zetten...

Origineel gepost door gast2960

Vertical-align werkt niet in div...

twee simpele oplossingen:

Om de achtergrond van de container te zien, zet in de css:
overflow:hidden;
(float:left werkt, maar dan moet je weer extra divs maken om het weer te centreren...)

Om de tekst in het midden te zetten ten opzichte van de afbeelding:
zet door middel van css op elke afbeelding: Float:left;
de tekst staan nou los van de afbeelding. Door middel van line-height en padding
kan je dan de tekst in het midden zetten...

Die lijst image staat zo : list-style-image: url(../images/li_logo.png);
Hoe kan ik haar dan float: left; geven?

mvg
radule
Aanvullend bericht:

Origineel gepost door DerkVg

dat kan volgens mij door de volgende code aan de li door te geven in de css:

Code:

    vertical-align:middle;
    line-height:hoogtevanjeafbeelding;

Met dit werkt niet.. :(

is het niet gemakkelijker in plaats van een list-style-type op te geven, gewoon een achtergrond mee te geven? die kan je namelijk wel verticaal centeren, en het komt op hetzelfde neer..

Origineel gepost door Lukas Van Orshoven

is het niet gemakkelijker in plaats van een list-style-type op te geven, gewoon een achtergrond mee te geven? die kan je namelijk wel verticaal centeren, en het komt op hetzelfde neer..

Juist,

List-style-image werkt niet goed. In Internet Explorer komt het dan namelijk
er anders eruit te zien dan in bijvoorbeeld Firefox.

Stel de afbeelding in als achtergrond en zet de repeat uit. Daarna kan je door middel
van de line-height of padding de tekst in het midden zetten.

Code:

li {
   background:url(afbeelding.png) no-repeat left top;
   padding:0 0 0 60px; */ afhankelijk van de breedte van de afbeelding */
   line-height:20px;
}

Wil je de tekst iets naar onderen zetten om het in het midden te krijgen, dan
verander je bij padding, de eerste 0 in bijvoorbeeld 4px...

Origineel gepost door gast2960

Juist,

List-style-image werkt niet goed. In Internet Explorer komt het dan namelijk
er anders eruit te zien dan in bijvoorbeeld Firefox.

Stel de afbeelding in als achtergrond en zet de repeat uit. Daarna kan je door middel
van de line-height of padding de tekst in het midden zetten.

Code:

li {
   background:url(afbeelding.png) no-repeat left top;
   padding:0 0 0 60px; */ afhankelijk van de breedte van de afbeelding */
   line-height:20px;
}

Wil je de tekst iets naar onderen zetten om het in het midden te krijgen, dan
verander je bij padding, de eerste 0 in bijvoorbeeld 4px...

GELUKT!
Hartstike Bedankt Gijsbert en allemaal!

mvg
radule