horizonatle Bildausrichtung mit gleichen Abständen

<--steph--> · #1 (**permalink**) 23.09.2012, 12:49

Hallo,

bin neu hier im Forum und beschäftige mich auch noch nicht allzu lang mit html und css - möchte mir aber im Selbststudium erste Schritte für eine spätere Seite erarbeiten.

Ich möchte ich 4 Listenelemente (Bilder) horizontal ausrichten, sodass sowohl das linke Bild und auch das Rechte am jeweiligen Rand "klebt", die Abstände dazwischen aber gleich groß sind.

Ja, ich habe schon die Suchfunktion in diesem Forum verwendet, leider war mir dieser Eintrag schon etwas fortgeschritten bzw. hab ich ihn nicht ganz verstanden:

http://xhtmlforum.de/62200-5-element...m-abstand.html

Anbei ein kurzer Screenshot von meinem "Problem" sowie die dazugehörigen html und css texte:

HTML-Code:

<div id="wrapper">
<div class="header">
<h1>Chéz Steve</h1>
</div><!--header-->

<div class="headerII">
<h2>Variations</h2>
</div><!--headerII-->

<div class="navi">
 <ul>
  <li><a href="soups.html">Soups</a></li>
  <li><a href="vegi.html">Vegi</a></li>
  <li><a href="steak.html">Steak</a></li>
  <li><a href="sweats.html">Sweats</a></li>
  <span><!----></a></span>
 </ul>
</div><!--navi-->

und hier noch der CSS code

Code:

div#wrapper {
width: 78em;
margin: 10% auto;
border: 2px solid #484848;
padding: 1em 1em;
}

div.header h1 {
font-size: 4em;
font-weight: bold;
color: #FD5100;
line-height: 120%;
}/* Rahmen um Menü Variations*/

div.headerII {
background-image: url(tracht_70.png);
color: #FD5100;
border: 2px solid #484848;
font-family: "Calibri";
font-size: 2em;/* Abstand zwischen Zeilen*/
margin-bottom: 20px;/* Abstand zwischen H2 und Navi Bereich*/
}

div.navi {
border: 2px solid #484848;
height: 16em;
}

div.navi a:hover {
background-image: url(tracht_70.png);
color: #FD5100;
}

div.navi ul {
list-style: none;
background-image: url(tracht_grau.png);
}


div.navi ul li a {
float: left;
text-decoration: none;
font-size: 4em;
text-align: center;
background-image: url(tracht_grau.png);
width: 4em;
height: 4em;
color: #000000;
font-weight: bold;
margin: 0 0.85em 0 0;
}

Danke vorab, Stephan

PowerNerd · #2 (**permalink**) 23.09.2012, 18:59

Dein Problem hängt mit dem Verhalten von Elementen zusammen und ist ein Teil der CSS Grundlagen, die du dir aneignen solltest.

3.4 Block- und Inline-Elemente - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller)

9.1 Einfache horizontale Navigation: display: inline - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller)

<--steph--> · #3 (**permalink**) 23.09.2012, 19:21

mmhh.... danke zunächst für deine Antwort. hab mal einen kurzen Blick in die Links geworfen: soweit mache ich ja alles richtig (arbeite mit Listen d.h. Blockelementen) verwende dann aber statt display: inline die float-Technik.

Werde später am abend noch basteln, ob display: inline statt float klappt.

LG

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Abständen	DaHood12	CSS	4	18.04.2010 19:42
Bild und Text in einem DIV mit unterschiedlichen Abständen? Geht das?	haupi	CSS	1	16.03.2010 22:54
IE: Problem mit Abständen und Positionierungen	Mulma	CSS	5	05.05.2006 13:07
Allgemeine Fragen zu Abständen	schrenz	CSS	3	19.10.2005 15:19
Probleme mit Abständen zwischen div´s....	darvida	CSS	4	09.07.2005 18:48