Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

Unterschiedlich grosse Grafiken floaten

Antwort erstellen

Unterschiedlich grosse Grafiken floaten

Beitragvon speedy » 15.10.2010, 17:19

Hallo CSSfreaks,

ich habe folgendes Problem:
Die Startseite meiner Website besteht aus teilweise unterschiedlich grossen Grafiken (Quadraten bzw. Rechtecken). Ein Teil (im Beispiel GELB) sind Fotos, die grauen Teile sind die Navigationsbuttons bzw in der Mitte das Logo.
Jetzt wollte ich diese Grafiken alle floaten lassen. Aber - natürlich klappte das alles nur bis zur ersten größeren Grafik und dann hing die nachfolgende Grafik fest und sprang wieder zurück in die nächste Reihe..... usw. Die gifs stehen alle gemeinsam in einem div.
Ich habe dann versucht, all die Grafiken, die unterwegs 'hängengeblieben' sind mit einer relative-Zuordnung auszutricksen. Das gelang mir auch fast bei allen, ausser den dreien in der linken 4. Reihe unter der horizontalen Navi.
Ich weiss mir jetzt keinen anderen Rat. Ich denke, mit floats sind die Grafiken nicht anzuordnen oder habt ihr einen Lösungsvorschlag. Oder wie kann ich die Grafiken anderweitig einfügen?
Unten seht ihr eine Skizze meiner Seite.
Bin für jeden Tipp sehr dankbar!
speedy
Dateianhänge
skizze_startseite_cc.gif
Hier die Skizze
skizze_startseite_cc.gif (4.5 KiB) 274-mal betrachtet
Remember: amateurs built the Arche Noah - professionals built the Titanic
speedy
neu hier
 
Beiträge: 6
Registriert: 23.08.2010, 22:31
Nach oben

Re: Unterschiedlich grosse Grafiken floaten

Beitragvon sejuma » 15.10.2010, 17:35

Versuch mal, alees in drei Spalten (divs) aufzuteilen und diese jeweils mit float: left zu versehen.
Darein packst du dann die einzelnen Kästchen, ebenfalls mit float-Angaben, siehe Grafik.
grafik.gif
grafik.gif (6.5 KiB) 309-mal betrachtet
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46
Nach oben

Re: Unterschiedlich grosse Grafiken floaten

Beitragvon speedy » 15.10.2010, 17:49

Hallo sejuma,

das hört sich sehr vielversprechend an!!! :lol:
Auf geht's, ich werde es ausprobieren und berichten!
Danke erst einmal,
speedy
Remember: amateurs built the Arche Noah - professionals built the Titanic
speedy
neu hier
 
Beiträge: 6
Registriert: 23.08.2010, 22:31
Nach oben

Re: Unterschiedlich grosse Grafiken floaten

Beitragvon speedy » 15.10.2010, 21:59

Hallo sejuma, da bin ich noch einmal.

Also, nachdem ich alles so gemacht habe, wie Du es vorgeschlagen hast, funktionierte es auch wunderbar in meinem editor. Nur im Browser, waren die 3 Spalten jeweils über die gesamte Breite dargestellt, als hätte ich keine px-Begrenzungen angegeben. :(
Ich vermute, dass ich irgendwo einen Denkfehler gemacht habe, aber woooooo...?
Ich wäre für einen Blick auf meine html- und css-Datei dankbar.
Vielleicht fehlt mir im Augenblick der nötige Abstand, um auf Simples zu stossen.
DANKE

Code: Alles auswählen
[size=85]<body>
<div id="wrapper"><a href class="skiplink">Zum Inhalt</a>
<div id="1">
<img src="grafiken/1_1.gif" width="110" height="110" alt="tuch" />
<img src="grafiken/1_2.jpg" width="110" height="110" alt="schal" />
<img src="grafiken/1_3.jpg" width="110" height="110" alt="schal" />
<img src="grafiken/2_1.gif" width="110" height="110" alt="schal" />
<img src="grafiken/2_2.jpg" width="110" height="110" alt="schal" />
<img src="grafiken/2_3.jpg" width="110" height="110" alt="tuch" />
<img class="navilang"  src="grafiken/schals.gif" alt="navi schals" width="230" height="110"/>
<img src="grafiken/3_1.gif" width="110" height="110" alt="tuch" />
<img src="grafiken/4_1.gif" width="110" height="110" alt="tuch" />
<img src="grafiken/4_2.jpg" width="110" height="110" alt="tuch" />
<img src="grafiken/4_3.gif" width="110" height="110" alt="tuch" />
<img src="grafiken/5_1.jpg" width="110" height="110" alt="tuch" />
<img src="grafiken/messe.gif" width="110" height="110" alt="navi messe" />
<img src="grafiken/5_2.jpg" width="110" height="110" alt="messestand" />
<img src="grafiken/6_1.gif" width="110" height="110" alt="tuch" />
<img src="grafiken/6_2.gif" width="110" height="110" alt="schal" />
<img src="grafiken/6_3.jpg" width="110" height="110" alt="schal" />
<img src="grafiken/7_1.gif" width="110" height="110" alt="schal" />
<img src="grafiken/7_2.jpg" width="110" height="110" alt="schal" />
<img src="grafiken/ueberuns.gif" width="110" height="110" alt="navi ueber uns" />
</div>
<div id="2">
<img class="navilang" src="grafiken/accessoires.gif" width="230" height="110" alt="navi accessoires" />
<img src="grafiken/1_4.jpg" width="110" height="110" alt="muetze" />
<img src="grafiken/2_4.gif" width="110" height="110" alt="strumph" />
<img src="grafiken/2_5.jpg" width="110" height="110" alt="haare" />
<img src="grafiken/2_6.gif" width="110" height="110" alt="tasche" />
<img class="logo" src="grafiken/logo.gif" width="230" height="230" alt="logo" />
<img src="grafiken/3_2.jpg" width="110" height="110" alt="kosmetikkoffer" />
<img src="grafiken/4_4.jpg" width="110" height="110" alt="nagellacke" />
<img src="grafiken/5_3.jpg" width="110" height="110" alt="muetze" />
<img src="grafiken/5_4.gif" width="110" height="110" alt="handschuh" />
<img src="grafiken/5_5.gif" width="110" height="110" alt="muetzen" />
<img src="grafiken/6_4.gif" width="110" height="110" alt="stiefel" />
<img src="grafiken/saison.gif" width="110" height="110" alt="navi saisonaccessoires" />
<img src="grafiken/6_5.gif" width="110" height="110" alt="schal" />
<img src="grafiken/7_3.jpg" width="110" height="110" alt="muetze" />
<img src="grafiken/7_4.gif" width="110" height="110" alt="tuch" />
<img src="grafiken/7_5.gif" width="110" height="110" alt="handschuh" />
</div>
<div id="3">
<img src="grafiken/1_5.jpg" width="110" height="110" alt="tasche" />
<img src="grafiken/1_6.jpg" width="110" height="110" alt="nagellacke" />
<img src="grafiken/kosmetik.gif" width="110" height="110" alt="navi kosmetik" />
<img src="grafiken/2_7.jpg" width="110" height="110" alt="lidschatten" />
<img src="grafiken/3_3.gif" width="110" height="110" alt="pinsel" />
<img src="grafiken/3_4.jpg" width="110" height="110" alt="kosmetikkoffer" />
<img src="grafiken/4_5.jpg" width="110" height="110" alt="parfum" />
<img src="grafiken/duefte.gif" width="110" height="110" alt="navi duefte" />
<img src="grafiken/5_6.jpg" width="110" height="110" alt="nagelschmuck" />
<img src="grafiken/5_7.jpg" width="110" height="110" alt="lidschatten" />
<img class="navihoch" src="grafiken/displays.gif" width="110" height="230" alt="navi displays" />
<img src="grafiken/6_6.jpg" width="110" height="110" alt="staender" />
<img src="grafiken/7_6.gif" width="110" height="110" alt="strumpf" />
</div>
</div><!-- Ende wrapper -->
</body>
----------------------------------------------
Css-Code

*    {
   padding: 0;
   margin: 0;
   color: #666666;  /* Schriftfarbe */
   text-decoration: none;
   }

html  {
   height: 101%;
   }


body {
   background-color: #f68fb6;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #666666;
    }

#wrapper {
   float: left;
   color: #333333;
   background-color: #F2F2F2;
   width: 960px; /* Breite des Inhaltsbereiches */
   margin: 10px 0 10px 3px;
   } 
      
#1  {
   float:left;
   width: 360px;
   height:auto;
    }

#2  {
   float:left;
   width: 360px;
   height: auto;
    }
   
#3 {
   float:left;
   width: 240px;
   height: auto;
    }   
   
#1 img {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   width: 110px;
   height: 110px;
   }
   
#2 img {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   width: 110px;
   height: 110px;
   }
   
#3 img {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   width: 110px;
   height: 110px;
   }
   
#2 img.logo  {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   width: 230px;
   height: 230px;
   }
   
#1 img.navi {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   width: 110px;
   height: 110px;
   }
   
#2 img.navi {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   width: 110px;
   height: 110px;
   }
   
#3 img.navi {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   width: 110px;
   height: 110px;
   }
   
#1 img.navilang {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   width: 230px;
   height: 110px;
   }
   
#2 img.navilang {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   width: 230px;
   height: 110px;
   }

#3 img.navihoch  {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   width: 110px;
   height: 230px;
   }
      
.skiplink  {display: none;
   }[/size]
Remember: amateurs built the Arche Noah - professionals built the Titanic
speedy
neu hier
 
Beiträge: 6
Registriert: 23.08.2010, 22:31
Nach oben

Re: Unterschiedlich grosse Grafiken floaten

Beitragvon sejuma » 16.10.2010, 07:51

Seltsam, dass dieser Fehler ausgerechnet von den Besuchern dieses Boards immer wieder gemacht wird :hammer:

Selektorenbezeichnungen dürfen nicht mit Zahlen anfangen.
#1, #2, #3 sind also unzulässig.

Nimm also andere Bezeichnungen, z.B. #eins, #zwei, #drei oder #a1, #b2 usw.
Das musst du dann überall ändern, also im CSS und HTML-Teil.
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46
Nach oben

Re: Unterschiedlich grosse Grafiken floaten

Beitragvon speedy » 16.10.2010, 09:45

OHA, daran hätte ich nun gar nicht gedacht! Obwohl ich intuitiv ursprünglich an Bezeichnungen wie links, mitte, rechts gedacht hatte...... Mir dann die Zahlen doch besser gefielen. :(

DANKE! Da hätte ich viel ausprobieren können ohne drauf zu kommen.

Speedy
Remember: amateurs built the Arche Noah - professionals built the Titanic
speedy
neu hier
 
Beiträge: 6
Registriert: 23.08.2010, 22:31
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Unterschiedlich grosse Grafiken floaten"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de
cron