Dynamische div's

Diskutiere und helfe bei Dynamische div's im Bereich Webmaster Support, Scripts, etc im SysProfile Forum bei einer Lösung; Ich will 3 div Container nebeneinander platzieren. Dabei sollen die beiden äußeren eine dynamische Breite erhalten. Der mittlere hat eine feste Größe.... Dieses Thema im Forum "Webmaster Support, Scripts, etc" wurde erstellt von Willforce, 8. Februar 2010.

  1. Willforce
    Willforce Profi-Schrauber
    Registriert seit:
    6. September 2007
    Beiträge:
    301
    Zustimmungen:
    7
    1. SysProfile:
    4915

    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.:)
     
  2. LaG astrau
    LaG astrau Hardware-Wissenschaftler
    Registriert seit:
    2. Februar 2010
    Beiträge:
    443
    Zustimmungen:
    18
    Name:
    Andre
    1. SysProfile:
    125232

    AW: Dynamische div's

    Hi Willforce,

    guck mal ob hier was bei ist:

    http://intensivstation.ch/templates/
     
    #2 LaG astrau, 8. Februar 2010
  3. Willforce
    Willforce Profi-Schrauber
    Themenstarter
    Registriert seit:
    6. September 2007
    Beiträge:
    301
    Zustimmungen:
    7
    1. SysProfile:
    4915
    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.
     
  4. mitcharts
    mitcharts Wandelnde HDD
    Registriert seit:
    23. Januar 2007
    Beiträge:
    11.682
    Zustimmungen:
    551
  5. LaG astrau
    LaG astrau Hardware-Wissenschaftler
    Registriert seit:
    2. Februar 2010
    Beiträge:
    443
    Zustimmungen:
    18
    Name:
    Andre
    1. SysProfile:
    125232
    AW: Dynamische div's

    Wenn ich heute zwischendurch Zeit habe, kann ich das aber auch eben schribseln. So als Angebot. Sag eben Bescheid!
     
    #5 LaG astrau, 9. Februar 2010
  6. Spacerat
    Spacerat ٩(̾●̮̮̃̾•̃̾)۶ /dev/null
    Registriert seit:
    25. Dezember 2006
    Beiträge:
    8.597
    Zustimmungen:
    196
    Name:
    Christian
    1. SysProfile:
    11226
    Steam-ID:
    Spacerat2911
    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! ;)
     
  7. mitcharts
    mitcharts Wandelnde HDD
    Registriert seit:
    23. Januar 2007
    Beiträge:
    11.682
    Zustimmungen:
    551
    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.
     

    Anhänge:

    #7 mitcharts, 9. Februar 2010
    Zuletzt bearbeitet: 9. Februar 2010
  8. Spacerat
    Spacerat ٩(̾●̮̮̃̾•̃̾)۶ /dev/null
    Registriert seit:
    25. Dezember 2006
    Beiträge:
    8.597
    Zustimmungen:
    196
    Name:
    Christian
    1. SysProfile:
    11226
    Steam-ID:
    Spacerat2911
    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 :)
     
  9. Willforce
    Willforce Profi-Schrauber
    Themenstarter
    Registriert seit:
    6. September 2007
    Beiträge:
    301
    Zustimmungen:
    7
    1. SysProfile:
    4915
    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.
     
    #9 Willforce, 9. Februar 2010
    Zuletzt bearbeitet: 9. Februar 2010
  10. mitcharts
    mitcharts Wandelnde HDD
    Registriert seit:
    23. Januar 2007
    Beiträge:
    11.682
    Zustimmungen:
    551
    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. ;)
     
  11. Willforce
    Willforce Profi-Schrauber
    Themenstarter
    Registriert seit:
    6. September 2007
    Beiträge:
    301
    Zustimmungen:
    7
    1. SysProfile:
    4915
    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. :)
     
  12. mitcharts
    mitcharts Wandelnde HDD
    Registriert seit:
    23. Januar 2007
    Beiträge:
    11.682
    Zustimmungen:
    551
    AW: Dynamische div's

    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.
     
  13. LaG astrau
    LaG astrau Hardware-Wissenschaftler
    Registriert seit:
    2. Februar 2010
    Beiträge:
    443
    Zustimmungen:
    18
    Name:
    Andre
    1. SysProfile:
    125232
    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!
     

    Anhänge:

  14. Willforce
    Willforce Profi-Schrauber
    Themenstarter
    Registriert seit:
    6. September 2007
    Beiträge:
    301
    Zustimmungen:
    7
    1. SysProfile:
    4915
    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?!?! :D */
     
  15. mitcharts
    mitcharts Wandelnde HDD
    Registriert seit:
    23. Januar 2007
    Beiträge:
    11.682
    Zustimmungen:
    551
    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?
     
    #15 mitcharts, 9. Februar 2010
    Zuletzt bearbeitet: 9. Februar 2010
Thema:

Dynamische div's

Die Seite wird geladen...

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

Forum Datum

Partition nur dynamisch erweitern?

Partition nur dynamisch erweitern?: Hallo Ich versuche eine Partition die Daten drauf hat zu erweitern mit 13GB. Die 13GB Partition ist Leer, sprich nicht zugeordnet. Aber jedesmal wenn ich die Partition mit Daten drauf (918GB)...
Festplatten, SSDs & Wechselmedien 10. Januar 2024

tado: aWATTar mit dynamischem Stromtarif, Lademanagement-App für E-Autos und...

tado: aWATTar mit dynamischem Stromtarif, Lademanagement-App für E-Autos und...: tado: aWATTar mit dynamischem Stromtarif, Lademanagement-App für E-Autos und Wärmepumpensteuerung Im Zuge der Neuankündigungen der IFA 2023 tut sich da nun was und der Zukauf trägt weitere...
User-Neuigkeiten 30. August 2023

Windows 11: Startseite der Einstellungen wird interaktiv und dynamisch

Windows 11: Startseite der Einstellungen wird interaktiv und dynamisch: Windows 11: Startseite der Einstellungen wird interaktiv und dynamisch In einem kürzlich ausgerollten Update für Windows Insider im Beta-Kanal (Windows 11 Insider Preview Build 22621.2262 und...
User-Neuigkeiten 25. August 2023

Fire TV Omni QLED bekommt neue dynamische Kunstsammlungen

Fire TV Omni QLED bekommt neue dynamische Kunstsammlungen: Fire TV Omni QLED bekommt neue dynamische Kunstsammlungen Dynamic Art nutzt einen Algorithmus, um sich an die aktuelle Umgebung anzupassen und so personalisierte Kunstwerke zu erstellen, die sich...
User-Neuigkeiten 1. August 2023

Konsumklima in Deutschland erholt sich weiter, aber mit abnehmender Dynamik

Konsumklima in Deutschland erholt sich weiter, aber mit abnehmender Dynamik: Konsumklima in Deutschland erholt sich weiter, aber mit abnehmender Dynamik Allerdings nimmt die Dynamik ab. Zum sechsten Mal in Folge ist es also in Sachen Verbraucherstimmung besser geworden,...
User-Neuigkeiten 1. April 2023

Tesla: Tarife für dynamisches Aufladen am Supercharger angepasst

Tesla: Tarife für dynamisches Aufladen am Supercharger angepasst: Tesla: Tarife für dynamisches Aufladen am Supercharger angepasst In diesem Zuge hatte man einen ermäßigten Nachttarif zwischen 22 und 6 Uhr eingeführt. Tesla gibt nun eine Ausweitung dieses...
User-Neuigkeiten 15. November 2022

iPad Pro 2022 hat dynamische Lautstärketasten

iPad Pro 2022 hat dynamische Lautstärketasten: iPad Pro 2022 hat dynamische Lautstärketasten Mit iPadOS 15.4 hat Apple eine Funktion eingeführt, die dafür sorgen kann, dass ihr natürlicher die Lautstärke regeln könnt. Die Einstellung findet...
User-Neuigkeiten 7. November 2022

Amazon Alexa: Dynamische Sprachauswahl für Android-Nutzer

Amazon Alexa: Dynamische Sprachauswahl für Android-Nutzer: Amazon Alexa: Dynamische Sprachauswahl für Android-Nutzer Dies macht es für zweisprachige Kunden vielleicht einfacher, nahtlos mit Alexa zu kommunizieren.. . Amazon Alexa: Dynamische...
User-Neuigkeiten 12. September 2022

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 18. Mai 2022

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 16. Mai 2022

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
Dynamische div's solved
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden