zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden horizonatle Bildausrichtung mit gleichen Abständen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.09.2012, 13:49
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2012
Beiträge: 50
<--steph--> befindet sich auf einem aufstrebenden Ast
Standard horizonatle Bildausrichtung mit gleichen Abständen

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
Angehängte Grafiken
Dateityp: jpg html.JPG (85,9 KB, 17x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.09.2012, 19:59
Neuer Benutzer
neuer user
 
Registriert seit: 05.05.2012
Beiträge: 14
PowerNerd befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.09.2012, 20:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2012
Beiträge: 50
<--steph--> befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Stichwörter
bilder, gleicher abstand, horizontale ausrichtung

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:16 Uhr.