li item naast elkaar

[gerr01]

Goedemiddag,

Ik ben bezig met een slice. enkelt moet ik nu nog de listed items naast elkaar krijgen. Iemand enig idee hoe ik dit met verwezelijken?

Dit is wat ik tot nu toe heb.

<div id ="dienstenlijst">
				<ul>
				<li id = "prints">Prints&Media</li>
				<li id = "webontwerp">Web ontwerpen</li>
				<li id = "design">Design concepten</li>
				<li id = "custom">Custom advies</li>
				<li id = "applicatie">Applicatie ontwerpen</li>
				<li id = "internet">Internetmarketing</li>
				</ul>
		</div>

#dienstenlijst { 
	height: 400px;
	width: 400px;
	position: absolute;
}
#prints { 
	list-style-image:url('images/star.jpg');
}

#webontwerp {
list-style-image:url('images/finger.jpg');
}

#design {
list-style-image:url('images/shuffle.jpg');
}

#custom {
list-style-image:url('images/play.jpg');
margin-left: 200px;


}

#applicatie {
list-style-image:url('images/square.jpg');
margin-left: 200px;


}

#internet {
	list-style-image:url('images/sphere.jpg');
	margin-left: 200px;
	
}

Custom, applicatie en internet moet dus naast de rest komen.

Alvast bedankt!

 

[quintoo]

toevoegen aan css :

#dierenlijst ul li {float:left;}

html:

<div id="dienstenlijst">
                <ul>
                <li id="prints">Prints&Media</li>
                <li id="webontwerp">Web ontwerpen</li>
                <li id="design">Design concepten</li>
                <li id="custom">Custom advies</li>
                <li id="applicatie">Applicatie ontwerpen</li>
                <li id="internet">Internetmarketing</li>
                </ul>
        </div>
<div style="clear:both"></div>

Zou moeten werken!

 

[grumbkow]

toevoegen aan css :

#dierenlijst ul li {float:left;}

html:

<div id="dienstenlijst">
                <ul>
                <li id="prints">Prints&Media</li>
                <li id="webontwerp">Web ontwerpen</li>
                <li id="design">Design concepten</li>
                <li id="custom">Custom advies</li>
                <li id="applicatie">Applicatie ontwerpen</li>
                <li id="internet">Internetmarketing</li>
                </ul>
        </div>
<div style="clear:both"></div>

Zou moeten werken!

Alleen moet je de & even vervangen voor &

 

[rolfohtar]

Naast

float: left;

kun je ook gebruik maken van

display: inline-block;

Dit kan beter werken voor Responsive websites.

 

[quintoo]

Naast

float: left;

kun je ook gebruik maken van

display: inline-block;

Dit kan beter werken voor Responsive websites.

Alleen het vervelende aan

display:inline-block;

is dat het pas werkt op IE vanaf IE8. Dus dan heb je weer problemen in IE7.

 

[grumbkow]

Alleen het vervelende aan

display:inline-block;

is dat het pas werkt op IE vanaf IE8. Dus dan heb je weer problemen in IE7.

IE7 bezit nog 0.7% van alle internet gebruikers.
Tenzij je je website specifiek maakt voor die hele kleine doelgroep, niet over nadenken en pas vanaf IE8 ondersteunen. Moeten ze maar upgraden.