Variable Tabellenbreite oder so

[mhel]

Ich habe mal bissel weiter an meiner Seite gebastelt.

Momentan sieht es so aus, dass ich 3 Spalten habe die per css definiert sind. Die beiden äußeren sind also fest und die mittlere passt sich an den restlich verfügbaren Platz an.

So nun habe ich aber in der mittleren Spalte eine Tabelle drinne (zur Anordnung von Thumbnails). Bei 1280x1024 sieht das auch mit 4 Zellen pro Zeile gut aus aber wenn man ne kleinere Auflösung hat kommt das nun aber alles erst nach dem Ende der rechten Spalte und das ganze Design haut also nicht mehr hin.

Gibt es da jetzt irgendwelche Möglichkeiten das sich die Tabellenzellen automatisch, je nach Platz, nebeneinander anordnen? Oder sonst was, was nen ähnlichen Effekt hat?

[Mascha]

Du kannst die Bilder ohne Tabelle nebeneinanderstellen:

http://test.internet-webmaster.de/galerie.html

Wenn du Untertitel o.ä. möchtest, könntest du jedes Bild in ein div tun und mit display:inline arbeiten.

[Aiun]

soweit ich ausprobiert habe funktioniert das nicht mit Untertitel oder schrift dazu.

Mit Display: inline steht der Text immer neben dem Bild, mit einem <br /> im Div, ist jedes Bild in einer neuen Zeile. Dazu bräuchte man inline-block und das gibts noch nicht.

[Mascha]

Ich habe die Testseite neu hochgeladen, mit float:left kommt es dem schon näher?

[geloescht_JesterDay]

Mit Display: inline steht der Text immer neben dem Bild, mit einem <br /> im Div, ist jedes Bild in einer neuen Zeile.

Du könntest ein Div im Div für den Titel machen, ung. so:

<div class="rahmen">

  <img src="..." />

  <div class="untertitel">

    Das Bild

  </div>

</div>

Im Unterschied zu einem <br /> wird hier ein neues Blockelement eingefügt und nicht der Text (bzw. die Textposition) verändert.

[mhel]

Ja das sieht schon so ungefähr aus wie ich mir das vorstelle bzw wie es im Moment in der Tabelle aussieht. Allerdings sollte die Schrift halt unter dem Bild sein.

Ich werd das heute Abend mal probieren ob es dann im Endeffekt so aussieht wie ich mir das vorstelle.

[mhel]

Ja also mit den beiden div klappt es. Außer das er bei einem zu schmalen Bild die Bilder komisch unter der rechten Spalte anordnet aber da muss ich nochmal schauen wenn das komplett ist.

Eins stört mich jetzt nur noch bissel und zwar ist das jetzt ja alles linksbündig ausgerichtet. Da ich für Symetrie bin *g* sollt es aber alles mittig sein. Ist jetzt bestimmt nur ein einfaches "center" was irgendwo rein muss aber ich find das jetzt nicht wo es rein soll. Klappt irgendwie nicht.

[Mascha]

.untertitel {

text-align:center;

}

[mhel]

Ne der Text ist schon zentriert. Geht mir um das ganze an sich. Bei der Tabelle waren halt links und rechts noch paar Pixel frei und jetzt sind (bei 1280x1024 Auflösung) die 4 Thumbnails links und rechts ist halt noch ein größeres Stück Platz:

|------|

| oooo |

|----- |

Und nun:

|------|

|oooo |

|----- |

[mhel]

Abgesehen von den oben genannten Problem mit der Zentrierung habe ich das andere näher bestimmen können.

Meine rechte Spalte ist im Moment sehr kurz (3/4 Bildschirm oder sowas in der Drehe). Wenn die Spalte zuende ist ordnet er die Bilder in der mitte zu dynamisch an so dass sie über das eigentlichle Haupt div der Spalte kommen.

Ne andere länge für die rechte Spalte festlegen ist blöd weil andere Seite nicht so lang sind und man dann scrollen müsste.

Innenabstand festlegen oder vergrößern bringt auch nix, die Bilder sind trotzdem über dem Rand hinaus.

Mehr fällt mir jetzt aber nicht ein und bei selfhtml habe ich auch nicht wirklich was gefunden.

Vielleicht nützt es was aber meine css sieht jetzt folgendemaßen aus:

body, p a {

margin: 1; padding: 0em;

min-width: 41em;

}

div#banner {

margin-botton: 0em; text-align: center;

}

ul#Navigation {

font-size: 0.95em;

float: left; width: 8em;

margin: 0; padding: 0;

border: 0px dashed white;

text-align: left;

}

ul#Navigation li {

list-style: none;

margin-top: 0; padding: 0.4em;

}

ul#Navigation a {

display: block;

padding: 0.2em;

font-weight: bold;

}

ul#Navigation a:link {

text-decoration:none;

color: black;

}

ul#Navigation a:visited {

text-decoration:none;

color: #00008b;

}

ul#Navigation a:hover {

text-decoration:none;

color: white; background-color: blue;

}

ul#Navigation a:active {

text-decoration:none;

color: #00008b;

}

div#News {

font-size: 0.9em;

float: right; width: 12em;

margin: 0; padding: 0.4em;

border: 1px dashed silver;

text-align: left;

height:0em;

}

div#News strong {

font-size: 1.33em;

margin: 0.5em;

}

div#News p {

font-size: 1em;

margin: 0.5em;

}

div#Inhalt {

margin: 0 12em 0 8em;

padding: 0 0 0 0em;

border: 1px dashed silver;

text-align: left;

}

div#Inhalt h1 {

font-size: 30px;

margin: 0 0 0em;

text-align: center;

}

div#Inhalt h2 {

font-size: 1.1em;

margin: 0.2em 0;

}

div#Inhalt h3 {

font-size: 18px;

margin: 0.2em 0;

}

div#Inhalt p {

font-size: 1em;

}

.galerie {

border:0px;

float:left;

}

.untertitel {

text-align:center;

}

p#Fusszeile {

clear: both;

font-size: 0.9em;

margin: 0; padding: 0.1em;

text-align: center;

border: 0px solid silver;

}

[geloescht_JesterDay]

Innenabstand festlegen oder vergrößern bringt auch nix, die Bilder sind trotzdem über dem Rand hinaus.

Was daran liegt, dass du mit dem float dein Div aus dem Textfluß nimmst. Ein Float ist etwas anderes als ein Text-align. Du musst dir das so vorstellen:

Dein Div ist ein Kasten. Der Kasten kann einen Abstand außen, einen Rand und einen Abstand innen haben. Und ganz innen im Kasten steht dann der Text bzw. der Inhalt. Die Abstände und die Rahmendicke addieren sich alle. Um also vom den Abstand des Inhalts (nach links z.B.) zu bestimmen, werden äußerer Rand links, Breite des Rahmens links und innerer Rand links addiert. Dann folgt erst der Inhalt. Mit einem text-align wird der Inhalt dann entsprechend der verfügbaren Fläche ausgerichtet.

Wenn der Inhalt aber per Float links oder rechtsbündig ausgerichtet wird, wird der Inhalt praktisch aus dem Kasten rausgehoben und darüber gelegt. Wie du dir jetzt denken kannst, haben die Abstände des Kastens auf den Inhalt jetzt keinen Einfluß mehr. Der Inhalt fängt jetzt soweit links an, wie es geht (bzw. soweit wie der äußere Rand der Box links (oder rechts)).

Um einen Abstand des floatenden Inhalts von links hinzubekommen, muss dem Abstand ein linker Rand zugewiesen werden.

Das ganze bezieht sich aber jeweils auf das jeweilige Bezugssystem (also die Box um die floatende Box).

Naja, bevor ich dich noch mehr verwirre... meinst du vielleicht sowas?

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>

    <title>New Document</title>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

<!--

#gallerie { width: 50%; padding: 3em; }

.vorschau {  float: left; border: 1px solid #000000; width: 175px; height: 175px; text-align: center; }

.untertitel { text-align: center; }

.bild { height: 150px; width: 150px; background-color: #ff0000; margin: 0px auto; }

//-->

</style>

  </head>

  <body>

  <div id="gallerie">

    <div class="vorschau">

	<div class="bild">

	  Bild1

	</div>

     <div class="untertitel">

	   blabla

	 </div>

    </div> 


    <div class="vorschau">

	<div class="bild">

	  Bild2

	</div>

     <div class="untertitel">

	   blubb

	 </div>

    </div>


    <div class="vorschau">

	<div class="bild">

	  Bild3

	</div>

     <div class="untertitel">

	   blabla

	 </div>

    </div>


    <div class="vorschau">

	<div class="bild">

	  Bild4

	</div>

     <div class="untertitel">

	   blubb

	 </div>

    </div>

  </div>

  </body>

</html>

Ach ja... Da ein floatendes Element aus dem Textfluß ist, vergrößert es auch nicht die Höhe des Parent-Elementes (es liegt ja drauf, nicht drin).

Einfach mal background-color: #00ff00; zur id gallerie hinzufügen.

Wie oben schonmal angesprochen, wird der inline-block vieles viel besser machen, aber der wird bisher nur von Opera unterstützt (nicht von keinem, wie oben angedeutet ).

[mhel]

Hm sowas am frühen morgen. Ich habe schon gewußt wieso ich mir alle arten von Programmieren nicht antun wollte *g*

Also der erste Text zum div ist jetzt soweit erstmal klar. Den Code den ich jetzt mal auf die schnelle in meinen reingetan hab, hat auf anhieb nicht so funktioniert. Mag aber sicherlich mit an den unterschiedlichen Bezeichnungen usw liegen. Werd das heut abend mal in ruhe reinfriemeln und dann nochmal schauen.

Schonmal danke für die hilfe.

Und wann kommt der inline block? IE7?

[geloescht_JesterDay]

Und wann kommt der inline block? IE7?

Wann können Schweine fliegen?

Also ich hab was gehört, inline-block wäre in CSS3 enthalten. Da er aber schon lange z.B. hier zu finden ist und auch in Opera erkannt wird, bin ich der Meinung, den gibt es länger.

Kann aber sein, dass er aber CSS3 erst so richtig kommt... und wenn du bedenkst, dass heute noch nichtmal alle Browser (keiner AFAIK) CSS2 komplett können... Beantwortet das deine Frage?

[mhel]

OK also drauf zu warten fällt als alternative weg.