mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 21:07 Benutzername: Passwort: Auto-Login

Thema: [HTML] Abstände zwischen Bildern (Liste) vom 21.06.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [HTML] Abstände zwischen Bildern (Liste)
Autor Nachricht
theMaya
Threadersteller

Dabei seit: 21.06.2006
Ort: Frankfurt
Alter: 35
Geschlecht: Männlich
Verfasst Mi 21.06.2006 11:18
Titel

[HTML] Abstände zwischen Bildern (Liste)

Antworten mit Zitat Zum Seitenanfang

Hi!
Dies ist mein erster Post/Thread auf diesem Board Lächel .

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!
  View user's profile Private Nachricht senden
213db

Dabei seit: 20.09.2005
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mi 21.06.2006 11:40
Titel

Re: [HTML] Abstände zwischen Bildern (Liste)

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden
Anzeige
Anzeige
theMaya
Threadersteller

Dabei seit: 21.06.2006
Ort: Frankfurt
Alter: 35
Geschlecht: Männlich
Verfasst Mi 21.06.2006 11:46
Titel

Re: [HTML] Abstände zwischen Bildern (Liste)

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mi 21.06.2006 11:56
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
theMaya
Threadersteller

Dabei seit: 21.06.2006
Ort: Frankfurt
Alter: 35
Geschlecht: Männlich
Verfasst Mi 21.06.2006 15:00
Titel

Antworten mit Zitat Zum Seitenanfang

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 Grins
Ist ja eh nur zum testen Lächel

danke,
mfg maYa
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.