|
|||
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> </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> 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; } |
Sponsored Links |
|
|||
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. |
Sponsored Links |
|
|||
Vielen dank, es hat funktioniert, so einfach und schnell kann es gehen. Was meinst du mit...
und wie mache ich das ? |
|
|||
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; } |
|
|||
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">
HTML-Code:
<!DOCTYPE html>
Zitat:
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. |
Stichwörter |
bilder, css |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |