mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 21.07.2024 09:14 Benutzername: Passwort: Auto-Login

Thema: CSS Container vertikal unten bündig ausrichten vom 09.09.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Container vertikal unten bündig ausrichten
Seite: 1, 2  Weiter
Autor Nachricht
melon
Threadersteller

Dabei seit: 09.09.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 09.09.2011 14:51
Titel

CSS Container vertikal unten bündig ausrichten

Antworten mit Zitat Zum Seitenanfang

Hi,
ich habe ein Hauptcontainer und rechts daneben 3 weitere untereinenader. Diese 3 variieren je nach Inhalt in der Höhe.
Wie schaffe ich es mittels CSS, dass der Hauptcontainer mit den 3 rechts daneben unten bündig ist?
Ich habe es mit faux columns versucht, aber das scheint in meinem fall nicht zu funktionieren.


  View user's profile Private Nachricht senden
DesignKater

Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 09.09.2011 18:28
Titel

Antworten mit Zitat Zum Seitenanfang

Das kannst du ganz einfach faken ohne großes überlege. Du legst einen Wrapper um den Hauptcontainer und die Sidebar und legst da eine Hintergrundgrafik fest, in deinem Beispiel in Grün und so breit wie dein Hauptcontainer und 1px hoch. Diese lässt du dann auf der y-Achse kacheln. Fertig.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Mark-Korb

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Sa 10.09.2011 01:19
Titel

Antworten mit Zitat Zum Seitenanfang

Alternative: Warum keine Festhöhe? oder min-height?
  View user's profile Private Nachricht senden
melon
Threadersteller

Dabei seit: 09.09.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 10.09.2011 21:12
Titel

Antworten mit Zitat Zum Seitenanfang

wenn ich es per container um alle 4 mache und css...

.wrapper {
background: url(../bilder/wrapper.png) repeat-y;
}

dann wiederholt sich die hintergrundgrafik nicht. ich stehe irgendwie auf dem schlauch. dabei ist es bestimmt einfach.

festhöhe kann ich nicht machen, denn die 3 container rechts variieren ja in der höhe je nach inhalt.
  View user's profile Private Nachricht senden
easteregg

Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht: Männlich
Verfasst Sa 10.09.2011 21:18
Titel

Antworten mit Zitat Zum Seitenanfang

Das mit dem Hintergrund könnte daran liegen, dass deine Haupt- und Seitencontainer alle floaten? Dann könnte z.B. im .wrapper ein clear: both; helfen.
Ansonsten zeig doch mal auch den Code deiner Boxen, die du wrappst.
  View user's profile Private Nachricht senden
melon
Threadersteller

Dabei seit: 09.09.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 10.09.2011 21:48
Titel

Antworten mit Zitat Zum Seitenanfang

nee, zwar sind alle 4 container auf float (hauptcontainer left, die anderen 3 right), aber auch mit clear: both; keine änderung.

<div class="wrapper">
<div class="hauptcontainer">...</div>
<div class="rechts_1">..</div>
<div class="rechts_2">..</div>
<div class="rechts_3">..</div>
</div>

-------------------------------------------------------------

.wrapper {
background: url(../bilder/wrapper.png) repeat-y;
clear: both;
}

.hauptcontainer {
width: 580px;
background-color: #333;
display: inline;
float: left;
margin: 6px 0 0 6px;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px 0 20px 10px;
}

.rechts_1 {
width: 330px;
background-color: #333;
float: right;
margin: 6px 6px 10px 0;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px 0 15px 10px;
}

.rechts_2 {
width: 330px;
background-color: #333;
float: right;
margin: 6px 6px 10px 0;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px 0 15px 10px;
position: relative;
}

.rechts_3 {
width: 330px;
background-color: #333;
clear: right;
float: right;
margin: 6px 6px 10px 0;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px 0 15px 10px;
}
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Sa 10.09.2011 21:49
Titel

Antworten mit Zitat Zum Seitenanfang

http://www.google.de/search?q=css+equal+height+columns
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
melon
Threadersteller

Dabei seit: 09.09.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 10.09.2011 22:17
Titel

Antworten mit Zitat Zum Seitenanfang

danke m, aber das habe ich schon gesehen. es funktioniert einfach nicht, in keinem browser.
  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS Container 100% Vertikal ausrichten
container horizontal und vertikal ausrichten.
CSS: Container im Container Vertikal zentrieren
CSS: mittleren Container vertikal strecken
Dreamweaver - Horizontal und vertikal ausrichten
[css] list-style-image - vertikal ausrichten
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.