• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div mit variabler Größe mittig

xxluke

xxluke

Neues Mitglied
Hi,
ich habe leider ein etwas komplexeres Problem welches ich nicht durch googlen lösen konnte :(.
Ziel:
Ich möchte mit CSS folgenes machen: Ich habe sozusagen 3 Spalten nebeneinander. Die mittlere Spalte ist ein Bild und keine Größe ist fest, also Breite und Höhe können sich ändern. Diese Spalte soll genau in der Mitte sein. Die beiden Spalten am Rand sind logischerweise gleich groß (wenn die Mitte mittig ist ;)) und sind verlinkt. Die Höhe der Randspalten ist genauso hoch wie die der mittleren Spalte, also auch Abhängig vom Inhalt der Mitte.

Mein Ansatz war jetzt, dass man zwei Link-Flächen mit jeweils 50% Breite nebeneinander hat und die mittlere Spalte darauf legt. Der Code sieht bislang so aus:
(Rot: Mitte; Grün: Linker Link; Blau: Rechter Link)
HTML: 
<div style="width:1000px;background-color:#ff0000;position:relative;">
    <a style="width:50%;height:100%;background-color:#00ff00;float:left;" href="#links"></a>
    <a style="width:50%;height:100%;background-color:#0000ff;float:right;" href="#rechts"></a>
    <div style="width:432px;height:123px;background-color:#ff0000;float:left;position:absolute;">Mitte</div>
</div>
(Die Werte 432px und 123px sind nur irgendwelche Werte, die sich aber verändern könnten)
Das Problem daran ist, dass die Spalte, die in der Mitte sein soll, nicht in der Mitte ist und dass die Randspalten sich nicht an die Höhe der mittigen, roten Spalte anpassen :(.

Ich hoffe jemand kann helfen.
 
Wenn du drei Spalten nebeneinander setzen willst, dann solltest du das auch so schreiben, und wenn diese Spalten Werte für Höhe und Breite erhalten, dann müssen es Blockelemente sein, also bsw. drei Div-Container.

Mach dir erst einmal Gedanken darüber, wie breit das mittlere Element und die beiden äußeren werden sollen.
 
Ich habe jetzt zumindest die <a> durch <div> ersetzt, aber das ändert trotzdem noch nichts.
Tronjer schrieb:
Mach dir erst einmal Gedanken darüber, wie breit das mittlere Element und die beiden äußeren werden sollen.
Zum Vergrößern anklicken....
Das ist ja mein Problem, dass die Breite des mittleren Elementes Bildgrößenbedingt ist und diese variiert :(
 
xxluke schrieb:
Das ist ja mein Problem, dass die Breite des mittleren Elementes Bildgrößenbedingt ist und diese variiert :(
Zum Vergrößern anklicken....

Das beantwortet die Frage nach der Breite der drei Elemente aber nicht.

Möglicher Ansatz:

- Drei Div-Container (links: 10%, mitte: 80%, rechts: 10%) mit float left.
- Platzieren des Spalten-Contents in den Divs (links float:right, mitte margin:auto, rechts float:left).
- Der Spalten-Content erhält eine min-width in Pixeln.
 
Versuch's mal so.
Code: 
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.container {
 position:relative;
 width:80%;
 margin:20px auto;
 background:#aaa;
 overflow:hidden;
}

.container a.links , .container a.rechts {
 position:absolute;
 top:0;
 bottom:0;
 width:50%;
 background:#dee;
}

.container a.links  {
 left:0;
}

.container a.rechts {
 right:0;
 text-align:right;
}

.container img {
 position:relative;
 z-index:99;
 margin:0 auto;
 display:block;
}

</style>
</head>

<body>

<div class="container">
<a class="links" href="#">links</a>
<a class="rechts" href="#">rechts</a>
<img src="bild1.jpg"/>
</div>

<div class="container">
<a class="links" href="#">links</a>
<a class="rechts" href="#">rechts</a>
<img src="bild1.jpg" width="700"/>
</div>
</body>
</html>
http://www.gipspferd.de/forumhilfe/div-mit-variabler-groesse-mittig/
 
Zuletzt bearbeitet:
@Tronjer: Hab ich noch mal so versucht aber klappt nicht :(.

@djheke: Ich habe es noch ein bisschen angepasst aber es funktioniert auf jeden Fall :)

Vielen Dank an euch beide für die Hilfe :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben