XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   horizonatle Bildausrichtung mit gleichen Abständen (http://xhtmlforum.de/showthread.php?t=68168)

<--steph--> 23.09.2012 13:49

horizonatle Bildausrichtung mit gleichen Abständen
 
Liste der Anhänge anzeigen (Anzahl: 1)
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 23.09.2012 19: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--> 23.09.2012 20: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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:19 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023