Dynamische div's

Willforce · 8. Februar 2010

Ich will 3 div Container nebeneinander platzieren. Dabei sollen die beiden äußeren eine dynamische Breite erhalten. Der mittlere hat eine feste Größe.
Am Ende sollen die drei die volle Breite im Browserfenster ausfüllen.
Wer hat einen Lösungsvorschlag?
Ich will das nur mit CSS machen. Mit Javascript geht das auch, will ich aber nicht.

LaG astrau · 8. Februar 2010

AW: Dynamische div's

Hi Willforce,

guck mal ob hier was bei ist:

http://intensivstation.ch/templates/

Willforce · 8. Februar 2010

AW: Dynamische div's

Alles dabei, nur nicht das was ich brauche.
Ich werde wohl oder übel auf eine 3-spaltige Tabelle zurückgtreifen müssen. Auch wenn mir das nicht gefällt.

mitcharts · 8. Februar 2010

AW: Dynamische div's

Natürlich ist das was du suchst mit dabei ... ansatzweise.

http://intensivstation.ch/files/templates/3/intensivstation-template-3-07.html

Du musst das Stylesheet nur entsprechend anpassen.

LaG astrau · 9. Februar 2010

AW: Dynamische div's

Wenn ich heute zwischendurch Zeit habe, kann ich das aber auch eben schribseln. So als Angebot. Sag eben Bescheid!

Spacerat · 9. Februar 2010

AW: Dynamische div's

Code:

.linkercontainer {
   float: left;
   width: 200px;
}

.mittlerercontainer {
   float: left;
}

.rechtercontainer {
   float: right;
   width: 200px;
}

<div class="linkercontainer">Inhalt 1</div>
<div class="mittlerercontainer">Inhalt 2</div>
<div class="rechtercontainer">Inhalt 3</div>

Das hier mal ungetestet!

mitcharts · 9. Februar 2010

AW: Dynamische div's

@spacey
Die beiden äußeren Container sollen eine dynamische Breite erhalten und keine feste!

Edit:
Ich hätte da etwas für dich willforce:

CSS-Code:

Code:

/* *** css by miss monorom www.intensivstation.ch *** */
/* css released under Creative Commons License -  http://creativecommons.org/licenses/by/2.0/deed.en  */

body {
	background-color: #e1ddd9;
	font-size: 0.8em;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color:#564b47;
	padding:0;
	margin:0;
}
a {color: #DB7093;}
a:visited {color:#DB7093;}
a:hover {color: #000000;}
a:active { color:#000000;}


h1 {
	font-size: 2em; 
	font-weight: normal;
 }

h2 {
	font-size: 1.7em;
	font-weight: normal;
}

img.download {vertical-align:middle;}

/* ----------navigation u. banner-------------- */
#banner {
	margin: 0;
	padding: 0;
	background-color: #EBD3E0;
}
#banner p{
	margin-left: 15em;
	padding: 10px;
}
#mainnavi {
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: #E0A3B7;
}

#mainnavi p{
	margin-left: 15em;
	padding: 0 10px;
}

/* ----------container zentriert das layout-------------- */
#container1 {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

#container2 {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

/* -----------------Inhalt--------------------- */
#content {
	width: 1000px;
	min-height: 600px;
	background-color: #ffffff;
	padding: 0;
	margin: 0 auto;
}

/* --------------left navigavtion------------- */
#left {
	float: left;
	/*width: 15em;*/
	margin: 0;
	padding:0;
	color:#ffffff;
}

/* --------------right navigavtion------------- */
#right {
	float: right;
	/*width: 15em;*/
	margin: 0;
	padding: 0;
	color:#ffffff;
}

/* -----------footer--------------------------- */
#footer {
	clear: both;
	background-color: #ffffff;
	text-align: center;
	padding: 0;
	margin: 0 auto;
}

HTML-Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="willforce.css" rel="stylesheet" media="screen" />
<title>willforce</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<!-- Basic template by monorom at www.intensivstation.coh -->

<div id="container1">
	<div id="banner">
		<img src="banner.gif" alt="" border="0"/>
	</div>
	<div id="mainnavi" >
 		Plaltzhalter Hauptnavigation
	</div><!-- end mainnavi -->
</div>
<div="container2">
	<div id="left">links dynamisch
	</div><!-- end menu left -->
	<div id="right">rechts dynamisch
	</div><!-- end menu right -->
	<div id="content">
		Mitte fest auf 500px Breite
	</div><!-- end content -->
</div><!-- end container -->
<div id="footer">footer</div><!-- end footer -->
</body>
</html>

Das Gesamtpaket findet sich im Anhang.

Quelle war das von mir schon verlinkte Layout, ich hab es entsprechend angepasst.

Spacerat · 9. Februar 2010

AW: Dynamische div's

Argh, dann hab ich ads nur verdreht, bin halt übermüdet die width's zu versetzen in den mittleren Container sollte ja kein Ding sein

Willforce · 9. Februar 2010

AW: Dynamische div's

@all

Danke für eure Hilfe!
Bin heute Früh bereits selbst darauf gekommen, nachdem ich mich in voller Frische vor dem Rechner gesetzt habe.
Man sollte halt einfach mal zwischendurch ne Pause machen.

Meine Lösung:

Code:

head_out    {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    }

.head_left    {
    position:relative;
    float:left;
    margin:0;
    padding:0;
    height:363px;
    width:50%;
    background:url(../images/design/head_left.png) repeat-x;
    z-index:100;
    }

.head_mid    {
    position:relative;
    width: 865px;
    height: 363px;
    padding: 0;
    margin: 0 auto;
    background:url(../images/design/head_mid.jpg);
    z-index:200;
    }

.head_right    {
    position:relative;
    float:right;
    margin:0;
    padding:0;
    height:363px;
    width:50%;
    background:url(../images/design/head_right.jpg) repeat-x;
    z-index:100;
    }

Code:

<div class="head_out">
 <div class="head_left"></div>
 <div class="head_right"></div>
 <div class="head_mid"></div>
</div>

Um es bildlich zu veranschaulichen, schaut euch den Head an.

mitcharts · 9. Februar 2010

AW: Dynamische div's

Du weißt aber schon, dass du innerhalb des head_out-Containers mit einer 100%igen Breite und einer zusätzlichen Breite von 865px arbeitest!?
Das Ganze wird nur durch den z-index "verschleiert".

Die Variante ist nicht wirklich sauber.

Schau dir mal meines an.

Willforce · 9. Februar 2010

AW: Dynamische div's

Ich weiß dass es nicht die sauberste variante ist. Funktioniert aber.

Bei deiner Variante sind die beiden äußeren divs nur so breit wie der Inhalt es vorgibt.
Ich brauche sie aber in einer Breite, so dass bei jeder Auflösung die volle Breite gegeben ist.
Ich könnte es alternativ mit Javascript oder einer Tabelle lösen, wobei die Tabelle das einfachste wäre.
Ich will aber UNBEDINGT eine CSS Lösung haben.

mitcharts · 9. Februar 2010

AW: Dynamische div's

Zitat von Willforce: ↑

Dabei sollen die beiden äußeren eine dynamische Breite erhalten. Der mittlere hat eine feste Größe.
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Zitat von Willforce:

Ich brauche sie aber in einer breite, so dass bei jeder Auflösung die volle Breite gegeben ist.
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Merkste was ... !?

Die beiden äußeren Container bei mir sind so groß wie es der mittlere Container vorgibt, sprich 100% - Größe mittlerer Container.
Also genau nach deinen ursprünglichen Angaben.

LaG astrau · 9. Februar 2010

AW: Dynamische div's

Im 8er IE mit aktiviertem Kompatibilitätsmodus (also sowas wie dem 7er) zerhauts das Design. (Anhang)

Safari, Firefox, IE8 normal, Chrome, Flock, Opera, .. sahen gut aus.

PS: Mitcharts Beispiel passt doch!

Willforce · 9. Februar 2010

AW: Dynamische div's

Hmmm, muss ich nochmal schaun. Werde dass schon noch hinbekomen.
Werde als Übergang erstmal eine Tabelle verwenden, da ich noch nicht weiß ob das ganze überhaupt so angenommen wird.

/* Der scheiß IE muss immer Probleme machen!
Wann wird der endlich abgeschafft?!?! */

mitcharts · 9. Februar 2010

AW: Dynamische div's

Ob es angenommen wird oder nicht, sei mal dahingestellt ... aber mein Beispiel (ja, ich reite darauf rum ...) funktioniert sowohl im IE als auch im Firefox!

Schaust du dir überhaupt an, was man dir bietet?

Dynamische div's - Similar Threads - Dynamische div's	Forum	Datum
Microsoft-Remotedesktop für iOS: Nun mit dynamischer Änderung der Anzeige Microsoft-Remotedesktop für iOS: Nun mit dynamischer Änderung der Anzeige: Microsoft-Remotedesktop für iOS: Nun mit dynamischer Änderung der Anzeige Die größte Änderung in der neuen Version ist, dass Nutzer jetzt die Ausrichtung (Querformat und Hochformat) der...	User-Neuigkeiten	Mittwoch um 08:23 Uhr
Xbox Dashboard: Offenbar Editor für dynamische Hintergründe geplant Xbox Dashboard: Offenbar Editor für dynamische Hintergründe geplant: Xbox Dashboard: Offenbar Editor für dynamische Hintergründe geplant Während ihr auch eigene, statische Hintergrundbilder wählen könnt, seid ihr bei den dynamischen Pendants auf vorgefertigte...	User-Neuigkeiten	Montag um 11:03 Uhr
Android 12: Material You und dynamische Farbgebung bald für mehr Android-12-Geräte verfügbar Android 12: Material You und dynamische Farbgebung bald für mehr Android-12-Geräte verfügbar: Android 12: Material You und dynamische Farbgebung bald für mehr Android-12-Geräte verfügbar Darunter befinden sich demnach dann auch Geräte von Xiaomi, Samsung , OnePlus und mehr. Die dynamische...	User-Neuigkeiten	11. Februar 2022
Android 12 soll bald Unterstützung von dynamischen Themes voraussetzen Android 12 soll bald Unterstützung von dynamischen Themes voraussetzen: Android 12 soll bald Unterstützung von dynamischen Themes voraussetzen orientiert an anderen visuellen Elementen, anpassen kann. Wie es aussieht, hält man bei Google sehr viel von diesem Feature....	User-Neuigkeiten	9. Februar 2022
Equinox hilft beim Erstellen von dynamischen Hintergrundbildern für macOS Equinox hilft beim Erstellen von dynamischen Hintergrundbildern für macOS: Equinox hilft beim Erstellen von dynamischen Hintergrundbildern für macOS . . Equinox hilft beim Erstellen von dynamischen Hintergrundbildern für macOS	User-Neuigkeiten	18. Dezember 2021
Govee Glide Wandleuchte angeschaut: Auf Wunsch bunt und dynamisch Govee Glide Wandleuchte angeschaut: Auf Wunsch bunt und dynamisch: Govee Glide Wandleuchte angeschaut: Auf Wunsch bunt und dynamisch Mein Sohn (7 Jahre alt) ist weitaus größerer Fan bunter Beleuchtung, aber natürlich schaue ich mir so etwas auch ganz gerne für...	User-Neuigkeiten	26. September 2021
Philips Hue: So funktionieren die neuen dynamischen Szenen Philips Hue: So funktionieren die neuen dynamischen Szenen: Philips Hue: So funktionieren die neuen dynamischen Szenen Mit Spotify hat man einen neuen Hue-Sync-Partner parat, der es euch erlaubt, eure Beleuchtungseffekte auf Musik abzustimmen....	User-Neuigkeiten	19. September 2021
Windows 11 bekommt dynamische Bildwiederholrate Windows 11 bekommt dynamische Bildwiederholrate: Windows 11 bekommt dynamische Bildwiederholrate Über zahlreiche Details und Neuerungen haben wir schon berichtet – und sicherlich wird im Laufe der Entwicklung da noch einiges passieren. Eine der...	User-Neuigkeiten	29. Juni 2021
Plex mit neuem, dynamisch anpassbaren Startbildschirm Plex mit neuem, dynamisch anpassbaren Startbildschirm: Plex mit neuem, dynamisch anpassbaren Startbildschirm Der Medienserver und -streamer dürfte einigen Lesern ein Begriff sein. Plex bietet eine ansprechende und einfache Möglichkeit Medien zu...	User-Neuigkeiten	23. April 2021
Dynamisches Laufwerk mit Betreibssystem zu Basis konvertieren Dynamisches Laufwerk mit Betreibssystem zu Basis konvertieren: Hallo Leute, ich habe einen Fehler begangen. Ich habe einen alten Laptop mit Windows 7 und einen Desktop PC mit Windows 10. Ich habe die Festplatte des Laptops an meinen Desktop PC angeschlossen...	Windows 7	19. Januar 2021
Amazon Alexa: Dynamische und ereignisbasierte Erinnerungen starten in den USA Amazon Alexa: Dynamische und ereignisbasierte Erinnerungen starten in den USA: Amazon Alexa: Dynamische und ereignisbasierte Erinnerungen starten in den USA Auch bei dieser Meldung ist, wie (leider) so oft, als Ausblick zu verstehen, was es jenseits des Atlantiks so an...	User-Neuigkeiten	16. Januar 2021
Kontrast typisch/dynamisch? Kontrast typisch/dynamisch?: Was bedeutet "typisch" und "dynamisch" bei Kontrast? Ist ein höherer Wert jeweils sinnvoll? Macht es Unterschiede ob der typische Kontrast 1000:1 statt 3000:1 ist??...	Monitore, TV-Geräte & Beamer	8. Dezember 2020
Opera GX integriert dynamische Hintergrundmusik Opera GX integriert dynamische Hintergrundmusik: Opera GX integriert dynamische Hintergrundmusik Der Browser wird als Gaming-Browser beworben. So könnt ihr etwa festlegen, wie viele Ressourcen sich die Software genehmigen darf. Opera GX...	User-Neuigkeiten	16. September 2020

Dynamische div's

Anhänge:

willforce.zip

Anhänge:

willforce.jpg

Dynamische div's

Dynamische div's - Similar Threads - Dynamische div's

Microsoft-Remotedesktop für iOS: Nun mit dynamischer Änderung der Anzeige

Xbox Dashboard: Offenbar Editor für dynamische Hintergründe geplant

Android 12: Material You und dynamische Farbgebung bald für mehr Android-12-Geräte verfügbar

Android 12 soll bald Unterstützung von dynamischen Themes voraussetzen

Equinox hilft beim Erstellen von dynamischen Hintergrundbildern für macOS

Govee Glide Wandleuchte angeschaut: Auf Wunsch bunt und dynamisch

Philips Hue: So funktionieren die neuen dynamischen Szenen

Windows 11 bekommt dynamische Bildwiederholrate

Plex mit neuem, dynamisch anpassbaren Startbildschirm

Dynamisches Laufwerk mit Betreibssystem zu Basis konvertieren

Amazon Alexa: Dynamische und ereignisbasierte Erinnerungen starten in den USA

Kontrast typisch/dynamisch?

Opera GX integriert dynamische Hintergrundmusik

Dynamische div's solved

SysProfile Windows Foren

Hardware Foren