Archief - HTML/CSS: Horizontaal menu zonder "spacings"

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
D

Disa

Legacy Member
Ik wil mijn menu, dat bestaat uit verschillende images die net naast mekaar moeten komen, met lists maken.

Als ik het volgende doe:
Code: 
<ul>
  <li><a><img></a></li><li><a><img></a></li><li>......
</ul>

werkt het, ik zou het echter "leesbaarder" willen maken.
Code: 
<ul>
  <li><a><img></a></li>
  <li><a><img></a></li>
  ...
</ul>
[code]

Naar zoiets dus.

Het probleem echter is dat in IE en Opera hij spaties zet tssen de images.
Kheb al de paddings/margins/font-size op 0 gezet maar daar zit het hem niet blijkbaar.



Mijn HTML code:
[code]
<div id="menu">
	<ul>
		<li><a href="/news/" class="amenu"><img src="/templates/Pillars-Blue/img/menu_news.jpg" id="news" onmouseout="hover(this.id,'','')" onmouseover="hover(this.id,'','over')" alt="The newspage" border="0" /></a></li>
		<li><a href="/teams/" class="amenu"><img src="/templates/Pillars-Blue/img/menu_teams.jpg" id="teams" onmouseout="hover(this.id,'','')" onmouseover="hover(this.id,'','over')" alt="Our teams page" border="0" /></a></li>
		<li><a href="/sponsors/"><img src="/templates/Pillars-Blue/img/menu_sponsors.jpg" id="sponsors" onmouseout="hover(this.id,'','')" onmouseover="hover(this.id,'','clear')" alt="Our Sponsors" border="0" /></a></li>
		<li><a href="/register/"><img src="/templates/Pillars-Blue/img/menu_community.jpg" id="community" onmouseout="hover(this.id,'','')" onmouseover= "hover(this.id,'','over')" alt="Community" border="0" /></a></li>
		<li><a href="/forum/"><img src="/templates/Pillars-Blue/img/menu_forum.jpg" id="forum" onmouseout="hover(this.id,'','')" onmouseover="hover(this.id,'','clear')" alt="Forum" border="0" /></a></li>
		<li><a href="/wars/"><img src="/templates/Pillars-Blue/img/menu_results.jpg" id="results" onmouseout="hover(this.id,'','')" onmouseover="hover(this.id,'','over')" alt="Our Results" border="0" /></a></li>
		<li><a href="/events/"><img src="/templates/Pillars-Blue/img/menu_events.jpg" id="events" onmouseout="hover(this.id,'','')" onmouseover="hover(this.id,'','clear')" alt="Our Events" border="0" /></a></li>
		<li><a href="/register/"><img src="/templates/Pillars-Blue/img/menu_media.jpg" id="media" onmouseout="hover(this.id,'','')" onmouseover="hover(this.id,'','over')" alt="Our Media" border="0" /></a></li>
	</ul>
</div>


CSS code:
Code: 
#menu {
	background-image: url('img/menu_line.jpg');
	background-repeat:repeat-x;
	height:32px;
	width:949px;
	border-bottom:1px solid #CDCDCD;
	padding-left: 30px;
	font-size:0px;
	ling-height:0px;
	margin:0px;
}
#menu ul {
	display: inline;
	padding: 0px;
	margin: 0px;
	border: 0px;
	font-size:0px;
}
#menu ul li { 
	display: inline;
	padding: 0px;
	margin: 0px;
	font-size:0px;
}

#menu ul li a
{
	text-decoration: none;
	padding: 0px;
	margin: 0px;
	font-size:0px;
	color: #fff;
}

*Edit: link: http://www.pillars-gaming.com/

Het menu eronder heb ik nog niet aangepast.


Thx,

- Disa
D

Disa

Legacy Member
SveltestSword zei:
da ligt nie aan u code maar aan de graphics zelf geloofk...
Klik om te vergroten...

Kdenk het niet hoor, in FF toont hij het perfect.

Op de images staan die "spatievormen" niet he.

Disa
d

denk

Legacy Member
vraag me toch iets af: je gebruikt Unordered List voor jouw menu te maken? :S rare methode

ik vind de IE look wel beter dan de FF look, in IE heeft elk menuitem precies een beetje dieptje zicht, lijkt op een button :)
Ik zou niets veranderen, niemand zal er echt op letten, want haast niemand gebruikt IE en FF door elkaar (ik gebruik wel beiden, maar het verschil in look is echt miniem)
D

Disa

Legacy Member
denk zei:
vraag me toch iets af: je gebruikt Unordered List voor jouw menu te maken? :S rare methode

ik vind de IE look wel beter dan de FF look, in IE heeft elk menuitem precies een beetje dieptje zicht, lijkt op een button :)
Ik zou niets veranderen, niemand zal er echt op letten, want haast niemand gebruikt IE en FF door elkaar (ik gebruik wel beiden, maar het verschil in look is echt miniem)
Klik om te vergroten...


Mjah zo word(t?) het toch voorgeschreven dacht ik.

Hoe zou jij het dan doen?

Disa
D

Disa

Legacy Member
Kheb het dan toch kunnen oplossen.

Voor diegene die het interesseert:

HTML:
Code: 
<div id="menu">
	<ul id="navlist">
		<li><a href="/news/" class="amenu"><img src="/templates/Pillars-Blue/img/menu_news.jpg" id="news" onmouseout="hover(this.id,'','')" onmouseover="hover(this.id,'','over')" alt="The newspage" border="0" /></a></li>
		<li><a href="/teams/" class="amenu"><img src="/templates/Pillars-Blue/img/menu_teams.jpg" id="teams" onmouseout="hover(this.id,'','')" onmouseover="hover(this.id,'','over')" alt="Our teams page" border="0" /></a></li>
		<li><a href="/sponsors/"><img src="/templates/Pillars-Blue/img/menu_sponsors.jpg" id="sponsors" onmouseout="hover(this.id,'','')" onmouseover="hover(this.id,'','clear')" alt="Our Sponsors" border="0" /></a></li>
		<li><a href="/register/"><img src="/templates/Pillars-Blue/img/menu_community.jpg" id="community" onmouseout="hover(this.id,'','')" onmouseover= "hover(this.id,'','over')" alt="Community" border="0" /></a></li>
		<li><a href="/forum/"><img src="/templates/Pillars-Blue/img/menu_forum.jpg" id="forum" onmouseout="hover(this.id,'','')" onmouseover="hover(this.id,'','clear')" alt="Forum" border="0" /></a></li>
		<li><a href="/wars/"><img src="/templates/Pillars-Blue/img/menu_results.jpg" id="results" onmouseout="hover(this.id,'','')" onmouseover="hover(this.id,'','over')" alt="Our Results" border="0" /></a></li>
		<li><a href="/events/"><img src="/templates/Pillars-Blue/img/menu_events.jpg" id="events" onmouseout="hover(this.id,'','')" onmouseover="hover(this.id,'','clear')" alt="Our Events" border="0" /></a></li>
		<li><a href="/register/"><img src="/templates/Pillars-Blue/img/menu_media.jpg" id="media" onmouseout="hover(this.id,'','')" onmouseover="hover(this.id,'','over')" alt="Our Media" border="0" /></a></li>
	</ul>
</div>

CSS:
Code: 
#menu {
	float: none;
	background-image: url('img/menu_line.jpg');
	background-repeat:repeat-x;
	height:32px;
	width:949px;
	border-bottom:1px solid #CDCDCD;
	padding: 0px 30px 0px 0px;
	font-size:0px;
	ling-height:0px;
	margin:0px;
}

#navlist
{
	height: 32px;
	float: left;
	margin: 0px 0px 0px 30px;
    padding: 0px;
    border: 0px;
	background-image: url('img/menu_line.jpg');
    list-style: none outside;
}

#navlist li
{
	height: 32px;
	font-size: 0em;
	display: block;
	line-height: 26px;
	margin: 0px;
	padding: 0px 0px 0px 0px;
	background: url(../img/nav_separator.gif) no-repeat right top;
	border: 0px;
	float:left;
	position: relative; /* important for full tabs */
}
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan