kostenloser Webspace werbefrei: lima-city

Problem mit CSS

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   php-oop

   php-oop hat kostenlosen Webspace.

   16:35, 6.2.2012

   Ich habe ein kleines Problem mit einer Box für Rezepte.
   
   Zurzeit sieht es so aus: http://php-oop.lima-city.de/1.png
   Es soll aber so aussehen (ohne den Inhalt): http://php-oop.lima-city.de/2.png
   
   Ich habe den Code:
   
   

   <div style="rezept_container">
   			<div class="rezeptbild">
   				<a href="rezepte.php?rezept=' . $rezept ['id'] . '">
   				<img class="rezeptbild" src="' . $rezept ['bild'] . '" alt="' . $rezept ['rezeptname'] . '" /></a>
   			</div>
   			<div class="rezeptlink">
   				<a class="rezepttitel" href="rezepte.php?rezept=' . $rezept ['id'] . '">' . $rezept ['rezeptname'] . '</a>
   			</div>
   		</div>
   			<hr class="linie" />

   
   
   und den CSS Code:
   
   

   hr.linie {border-style: dotted; border-color: black;}
   
   .rezept_container {width:100%;}
   .rezeptbild {max-width:100px;}
   .rezeptlink {width:600px; float: right;}
   .rezepttitel {color: #f4a100; font-size: 14px; font-weight: bold;}
   
   .linie {
   height: 1px;
   margin-bottom: 10px;
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 10px;
   width: 100%;
   border-style: dotted;
    }

   
   
   Ich will 3 Spalten, eine für das Bild, eine für den Titel, eine für Bewertung o.ä.
   
   Könnt Ihr mir helfen, sodass es ungefähr wie hier aussieht: http://php-oop.lima-city.de/2.png ??

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. sonok

   Moderator

   sonok hat kostenlosen Webspace.

   16:43, 6.2.2012

   Entweder Du machst es mit divs und float oder mit Tabellen.
4. Autor dieses Themas

   php-oop

   php-oop hat kostenlosen Webspace.

   16:46, 6.2.2012

   sonok schrieb:
   Entweder Du machst es mit divs und float oder mit Tabellen.

   
   
   Hallo !
   
   Ich würde es gerne mit divs machen.
   
   Oben habe ich meinen Code gepostet, wie ich es versucht habe.
   Es funktioniert aber noch nicht richtig.

5. sonok

   Moderator

   sonok hat kostenlosen Webspace.

   16:53, 6.2.2012

   <div style="clear:both;">
   <div style="float:left; background-color:#330099; height:200px; width:200px;"></div>
   <div style="float:left; background-color:#339999; height:200px; width:200px;"></div>
   <div style="float:left; background-color:#3300FF; height:200px; width:200px;"></div>
   </div>
   <div style="clear:both;">
   <div style="float:left; background-color:#330099; height:200px; width:200px;"></div>
   <div style="float:left; background-color:#339999; height:200px; width:200px;"></div>
   <div style="float:left; background-color:#3300FF; height:200px; width:200px;"></div>
   </div>

   
   
   also das geht, glaub ich.
6. Autor dieses Themas

   php-oop

   php-oop hat kostenlosen Webspace.

   17:00, 6.2.2012

   sonok schrieb:
   

   <div style="clear:both;">
   <div style="float:left; background-color:#330099; height:200px; width:200px;"></div>
   <div style="float:left; background-color:#339999; height:200px; width:200px;"></div>
   <div style="float:left; background-color:#3300FF; height:200px; width:200px;"></div>
   </div>
   <div style="clear:both;">
   <div style="float:left; background-color:#330099; height:200px; width:200px;"></div>
   <div style="float:left; background-color:#339999; height:200px; width:200px;"></div>
   <div style="float:left; background-color:#3300FF; height:200px; width:200px;"></div>
   </div>

   
   
   also das geht, glaub ich.

   
   
   Danke, das funktioniert.

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?