zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bilder untereinander + nächste Spalte...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.08.2011, 12:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.08.2011
Beiträge: 3
mikemichel befindet sich auf einem aufstrebenden Ast
Standard Bilder untereinander + nächste Spalte...

Hallo CSS Profis,

vorab ich bin was CSS angeht überhaupt kein Profi, möchte auch nichts kompliziertes anstellen damit sondern nur ein paar einfache Dinge, aber genau da scheitere ich.
Folgendes Problem habe ich.
Wie ihr im Code sehen könnt habe ich 5 DVD Cover angefangen von DVD 1 bis 5.
In einer Reihe passen 4 DVDs rein jetzt möchte ich das die 5 DVD unter der ersten ist, also auch linksbündig, irgendwie bekomme ich das nicht hin.
Für die erste Reihe habe ich <div class="figure">
Jetzt dachte ich das es für die 2te Reihe auch so geht, klappte aber nicht, also habe ich für die 2te Reihe eine extra <div class="figure1"> gemacht, klappte aber auch nicht.
In den style.css habe ich auch die <div class="figure1"> angegeben.
Was mache ich falsch ?
Wäre über jede Hilfe dankbar.
Anbei mein HTML Code
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Anal Teen Cream - Cherry Vision</title>
<META content="Anal Teen Cream ist eine Pornodvd Serie von Cherry Vision. Hier finden Sie alle Teile von Anal Teen Cream auf einen Blick." name=description>
<link rel="canonical" href="http://www.dvduncuts.com/dvd-serie/anal-teen-cream-cherry-vision-dvd-serie.html" />
<meta name="robots" content="index,follow" />
<meta name="language" content="de" />
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-22146778-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<link rel="stylesheet" type="text/css" href="/style.css">  
</head>
<body>

<div id="Seite">
  <p><a href="http://www.dvduncuts.com"><img src="http://www.dvduncuts.com/images/directors-banners.jpg" alt="DVDuncuts.com" width="952" height="148" border="0"></a></p>
  <p><a href="http://www.dvduncuts.com">Startseite</a> - <a href="http://www.dvduncuts.com/hersteller-studio.html">Porno Studio / DVD-Serie</a> - Anal Teen Cream</p>
  <p>&nbsp;</p>

<div id="Inhalt">
    <h1>Anal Teen Cream</h1>
    <p>von <a href="http://www.dvduncuts.com/?manu=m134_Cherry-Vision.html">Cherry Vision </a></p>
    <div class="figure">
  <p><img src="http://www.dvduncuts.com/images/product_images/info_images/6284_0.jpg" alt="Anal Teen Cream 1"><a href="http://www.dvduncuts.com/product_info.php?info=p6284_An-l-Teen-Cream-1.html">Anal Teen Cream 1</a></div>
<div class="figure">
  <p><img src="http://www.dvduncuts.com/images/product_images/info_images/6040_0.jpg" alt="Anal Teen Cream 2"><a href="http://www.dvduncuts.com/product_info.php?info=p6040_An-l-Teen-Cream-2.html">Anal Teen Cream 2</a></div>
<div class="figure">
  <p><img src="http://www.dvduncuts.com/images/product_images/info_images/6285_0.jpg" alt="Anal Teen Cream 3"><a href="http://www.dvduncuts.com/product_info.php?info=p6285_An-l-Teen-Cream-3.html">Anal Teen Cream 3</a></div>
<div class="figure">
  <p><img src="http://www.dvduncuts.com/images/product_images/info_images/6924_0.jpg" alt="Anal Teen Cream 4"><a href="http://www.dvduncuts.com/product_info.php?info=p6924_An-l-Teen-Cream-4.html">Anal Teen Cream 4</a></div>
<div class="figure1">
  <p><img src="http://www.dvduncuts.com/images/product_images/info_images/7219_0.jpg" alt="Anal Teen Cream 5"><a href="http://www.dvduncuts.com/product_info.php?info=p7219_An-l-Teen-Cream-5.html">Anal Teen Cream 5</a></div>
</div>
</body>
</html>
Und hier der Code für die style.css
Code:
body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }

  div#Seite {
	text-align: left;      /* standardkonforme horizontale Zentrierung */
	width: 952px;
	padding: 0.5em;
	border: 2px ridge silver;
	height: 1000px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
  }

  ul#Navigation {
    font-size: 0.80em;
    float: left; width: 22em;
    margin: 0; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: #666; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black; background-color: white;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Inhalt {
    margin-left: 1em;
    padding: 0 1em;
    border: 0px dashed silver;
  }
  div#Inhalt h1 {
    font-size: 1.5em;
    margin: 0 0 1em;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0 0 1em;
  }
  div#Inhalt p {
    font-size:1em;
    margin: 1em 0;
  }
  div.figure {
  float: left;
  width: 23%;
  border: 1px dashed silver;
  margin: 0.2em;
  padding: 0.2em;
  }
  div.figure1 {
  float: left;
  width: 23%;
  border: 1px dashed silver;
  margin: 0.2em;
  padding: 0.2em;
}

div.figure p {
  text-align: center;
  font-style: Helvetica,Arial,sans-serif;
  font-size: smaller;
  text-indent: 0;
}
Bei der style.css sind es die letzen drei div´s die für das ganze geschehen zuständig sind.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.08.2011, 12:45
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Es wäre ganz nett gewesen, für das Beispiel neutrale Bilder zu verwenden. Das Forum hier ist öffentlich zugänglich.

Dein Problem ist, dass die Floats (genauer: die Bilder darin) nicht gleich hoch sind. Dadurch floatet das fünfte Element nur soweit nach links, bis es an die rechte Kante des dritten Floats anstößt. Das Float wird dann nicht nach unter verschoben, weil höhere Positionen vor denen weiter links vorrang haben.

Du kannst nun entweder jedem fünften Element die clear-Eigenschaft verpassen, oder mit inline-block arbeiten, was besser wäre, da die Elemente dann flexibler sind.

Nebenbei: Stell den Doctype auf Strict um und validiere danach
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.08.2011, 13:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.08.2011
Beiträge: 3
mikemichel befindet sich auf einem aufstrebenden Ast
Standard

Vielen dank, es hat funktioniert, so einfach und schnell kann es gehen. Was meinst du mit...

Zitat:
Zitat von gato Beitrag anzeigen

Nebenbei: Stell den Doctype auf Strict um und validiere danach
und wie mache ich das ?
Mit Zitat antworten
  #4 (permalink)  
Alt 28.08.2011, 14:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.08.2011
Beiträge: 3
mikemichel befindet sich auf einem aufstrebenden Ast
Standard Geht doch nicht so ganz...

Hallo nocmal ich,

also es geht aber nur im Firefox beim IE sind die DVD Cover jetzt untereinander
folgendes steht in der style.css
Code:
  div.figure {
  display: inline-block; 
  width: 23%;
  border: 1px dashed silver;
  vertical-align: top;
  margin: 0.2em;
  padding: 0.2em;
  }
  div.figure p {
  text-align: center;
  font-style: Helvetica,Arial,sans-serif;
  font-size: smaller;
  text-indent: 0;
}
Was ist falsch ?
Mit Zitat antworten
  #5 (permalink)  
Alt 28.08.2011, 15:17
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von mikemichel Beitrag anzeigen
und wie mache ich das ?
Du liebe Zeit, lern die Grundlagen ;)
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Oder alternativ, da einfacher zu merken:
HTML-Code:
<!DOCTYPE html>
Und dann an den Validator übergeben.

Zitat:
Zitat von mikemichel Beitrag anzeigen
also es geht aber nur im Firefox beim IE sind die DVD Cover jetzt untereinander

Was ist falsch ?
Es gibt keinen IE. Es gibt höchstens IE7, IE8 oder andere Versionen. Berücksichtige das bitte. Da gibt es sehr große Unterschiede!

Nun, du scheinst eine Uralt-Version wie IE7 oder älter zu verwenden. Darauf wird in dem Artikel eingegangen.

Die alten IE-Versionen benötigen display:inline; und hasLayout, das zu am einfachsten mit zoom: 1; vergeben kannst.
Mit Zitat antworten
Antwort

Stichwörter
bilder, css

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
bilder so positionieren, dass sie immer untereinander auftauchen vikingosegundo CSS 3 22.10.2008 19:11
Bilder wollen einfach nicht direkt untereinander sein derMatze CSS 7 01.10.2008 09:18
Bilder untereinander - wie richtig gelöst? Steakfred CSS 1 17.05.2008 21:31
bilder untereinander ohne abstand zitronenbaum CSS 1 13.07.2006 13:39
Bilder direkt untereinander xitrox (X)HTML 3 25.01.2006 16:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:35 Uhr.