Autor |
Nachricht |
theMaya
Threadersteller
Dabei seit: 21.06.2006
Ort: Frankfurt
Alter: 35
Geschlecht:
|
Verfasst Mi 21.06.2006 11:18
Titel [HTML] Abstände zwischen Bildern (Liste) |
|
|
Hi!
Dies ist mein erster Post/Thread auf diesem Board .
Ich versuche mich im Mom. am Webdesign. Ich kenne
mich mit Photoshop gut aus und will jetzt mit der HTML-/Web-
realisierung anfangen. Dazu sammel ich jetzt nur ein paar
Basics.
Mein Problem : Ich will ein Menü mithilfe einer horizontalen Auf-
zählung (Liste) erstellen. Mein bisheriger Quellcode :
Code: | <html>
<head>
<style type="text/css">
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul li { display: inline; }
</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><img src="button_home.jpg"></li>
<li><img src="menu_spacer_green.jpg"></li>
<li><img src="button_news.jpg"></li>
</ul>
</div>
</body>
</html>
|
Wenn ich die HTML-Seite im Browser aufrufe, dann
sind zwischen den Bildern allerdings kleine Abstände.
Ich nehme an so um die 3 px . Weiss jemand, wie ich
die Wegbekomme, oder ob es eine bessere Lösung gibt,
ums so ein Menü zu erstellen?
danke,
mfg maYa!
|
|
|
|
|
213db
Dabei seit: 20.09.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 21.06.2006 11:40
Titel Re: [HTML] Abstände zwischen Bildern (Liste) |
|
|
Code: | <html>
<head>
<style type="text/css">
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul>* {
display: inline;
padding: 0;
margin: 0;
border: 0;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><img src="button_home.jpg"></li>
<li><img src="menu_spacer_green.jpg"></li>
<li><img src="button_news.jpg"></li>
</ul>
</div>
</body>
</html>
|
|
|
|
|
|
Anzeige
|
|
|
theMaya
Threadersteller
Dabei seit: 21.06.2006
Ort: Frankfurt
Alter: 35
Geschlecht:
|
Verfasst Mi 21.06.2006 11:46
Titel Re: [HTML] Abstände zwischen Bildern (Liste) |
|
|
213db hat geschrieben: | Code: | <html>
<head>
<style type="text/css">
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul>* {
display: inline;
padding: 0;
margin: 0;
border: 0;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><img src="button_home.jpg"></li>
<li><img src="menu_spacer_green.jpg"></li>
<li><img src="button_news.jpg"></li>
</ul>
</div>
</body>
</html>
|
|
Nein. Das funktioniert auch nicht. Habe ich auch schon
probiert.
mfg maYa
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mi 21.06.2006 11:56
Titel
|
|
|
ich würde vorschlagen, wenn du vorhast eine derartige navigation mit bildern zu machen, die bilder innerhalb der stylsheet definitionen zu verwenden und in der eigentlichen navigation mit (nicht sichtbarem) echttext zu arbeiten. das ist im zweifelsfall barriereärmer und gibt dir den vorteil, die bilder auch einfacher mit entsprechenden highlight stati versehen zu können.
an deinem beispiel sähe das ganze dann so aus:
Code: |
<html>
<head>
<style type="text/css">
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/* li enthält den seperator zwischen den buttons */
#navcontainer ul li {
display: inline;
margin: 0;
padding: 0 6px 0 0; /* innenabstand nach rechts für den seperator */
background: url(menu_spacer_green.jpg) top right no-repeat;
}
/* links als block level element anzeigen */
#navcontainer ul li a {
display: block;
border: none;
}
/* echttext der links verbergen */
#navcontainer ul li a span {
display: none;
}
/* navigationspunkt "home" mit entsprechendem hintergrundbild */
#navcontainer ul li a.home {
background: url(button_home.jpg) top left no-repeat;
width: 123px;
height: 123px;
}
/* bei überfahren mit der mouse hintergrundbild ändern */
#navcontainer ul li a.home:hover {
background: url(button_home_hover.jpg) top left no-repeat;
width: 123px;
height: 123px;
}
/* navigationspunkt "news" mit entsprechendem hintergrundbild */
#navconntainer ul li a.news {
background: url(button_news.jpg) top left no-repeat;
}
/* bei überfahren mit der mouse hintergrundbild ändern */
#navcontainer ul li a.news:hover {
background: url(button_news_hover.jpg) top left no-repeat;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><a class="home" href="home.html"><span>Home</span></li>
<li><a class="news" href="news.html"><span>News</span></li>
</ul>
</div>
</body>
</html>
|
Zuletzt bearbeitet von sahnemuh am Mi 21.06.2006 12:00, insgesamt 2-mal bearbeitet
|
|
|
|
|
theMaya
Threadersteller
Dabei seit: 21.06.2006
Ort: Frankfurt
Alter: 35
Geschlecht:
|
Verfasst Mi 21.06.2006 15:00
Titel
|
|
|
Dankeschön für deine Antwort, aber ich werde
es jetzt doch als Tabelle machen, da ich mich
mich mit CSS eh noch nicht so gut auskenne.
Da ist das für mich am Anfang ein bisschen viel.
Ich verstgehe den Code zwar, aber ist für mich
im mom ein bisschen verwirrend
Ist ja eh nur zum testen
danke,
mfg maYa
|
|
|
|
|
|
|
|
Ähnliche Themen |
HTML/CSS - Problem mit Liste
Liste in html mit tabs ertsellen
ol ul li / Historie mit Jahreszahlen als HTML Liste
HTML-Liste mit Nested Sets erstellen
[Hilfe] Formatierung von HTML-Liste/Menü
Outlook 2013 unter WIndows 8.1 und HTML Mails mit Bildern
|
|