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

Komplexer Content

P

Philastan

Mitglied
Guten Tag liebe html.de Community,

ich knobel grad an einer etwas komplexen Umsetzung einer Website von mir. Um zu veranschaulichen was ich machen möchte, folgt hier nun ein kleines Bild :)

websiteaufbau2.png


Wichtig ist dabei folgendes:
  • Content_top und Content_bottom haben eine feste Breite, während sich die äußeren Boxen dynamisch der Browserfensterbreite anpassen.
  • Der Content hat keine feste Höhe.
  • Content_bottom_left und Content_bottom_right dürfen den Content nicht unterschneiden, da alles Teile leicht transparent sind.
Ich bin aktuell noch an der oberen Leiste, komme da aber schon nicht weiter. Ich denke wenn ich diese habe, ist der Rest ein Kinderspiel.

Folgender Code ist bereits geschrieben:

HTML: 
<div class="content_wrapper">
<div class="content_top_left"></div>
<div class="content_top"></div>
<div class="content_top_right"></div>
<div class="content"></div>
</div>

HTML: 
.content_wrapper {    
height: auto;    
min-height: 400px;    
width: 100%;    
margin-top:-300px;
}

.content_top_left {    
height:52px;    
width:50%;    
margin-left:-8px;    
position:absolute;    
background-image:url(../img/content_top_left.png);    
z-index:-1;
}

.content_top {    
margin:auto;    
height:52px;    
width:1280px;    
background-image:url(../img/content_top.png);
}

.content_top_right {    
height:52px;    
width:50%;    
margin-left:50%;    
margin-top: -52px;    
background-image:url(../img/content_top_right.png);    
z-index:-1;    
position:absolute;
}

Das ist aber totaler Schwachsinn... und erfüllt seinen Zweck quasi gar nicht. Ich stehe wirklich total auf dem Schlauch. Habt ihr Ideen, wie ich das lösen könnte?

LG

Phil
 
Such mal nach "CSS dreispaltiges Layout". Die Eigenschaft float ist dafür das richtige. Und am Besten in Zusammenhang damit auch gleich "clear" anschauen. (ich weiß nicht, ob es mit CSS3 mittlerweile "einfacher" geht... Aber mit float würde ich es machen)
 
Ich weis nicht ob ich es richtig ausgedrückt habe, aber die äußeren Boxen sind am Rand des Browsers und sollen in der Größe variabel sein. Floaten ist mir bekannt, nur leider ist das eigentliche Problem eher, das Content_top_left die Lücke zwischen Content_top und Browserseite auffüllen soll und ich nicht weis wie ich die richtige Größe definiere.

| <---------- Content_top_left ----------> |---------------- Content_top ----------------| <---------- Content_top_right ----------> |

Also der Content ist zentiert und hat eine feste Breite, während die beiden äußeren Boxen ihre Breite immer anpassen.
 
Such mal nach "CSS dreispaltiges Layout".
Zum Vergrößern anklicken....
Warum soll er danach suchen, das ist doch gar nicht gefordert, da es in der mitte keine 3 Spalten gibt.

Hier mal ein Beispiel in HTML5:
HTML: 
<!DOCTYPE html>
<html>                   
    <head>                                   
        <meta charset="utf-8">                                      
        <title>Demo Layout                           
        </title>                          
        <link rel="stylesheet" type="text/css" href="style2.css">                          
                  
     <style>
          html, body{ margin:0; padding:0; }
          header { height:52px; border:0; }
          div.a, div.c { float:left;width:20%; min-width:100px; height:52px; background:red; border:0;}
          div.b { float:left; width:60%; height:52px; background:yellow;border:0;}
          section { clear:both; min-height:300px; background:grey; border:0; }
     </style>
    </head>
    <body>                          
       
       <header>
            <div class=a>
            </div>
            <div class=b>
            </div>
            <div class=c>
            </div>
       </header> 
       
       <section>
       </section>
       
       <footer>
            <div class=a>
            </div>
            <div class=b>
            </div>
            <div class=c>
            </div>
       </footer>
        
    </body>
</html>

Die Hintergrundfarben, sind zur Verdeutlichung des Beispiels gedacht. Funktioniert in allen modernen Browsern.
Für den IE in alten Versionen bitte das JavaScript Create Elements einbinden und die CSS-Deklarationen für die Elemente header, section und footer hinzufügen.
 
Der Vorschlag von Wustersoss ist leider auch nicht der Schlüssel zum Kern des Problems, denn: Content_top (in deinem Beispiel <div class=b></div>) hat eine feste Größe und keine prozentuale Angabe. Dies ist leider zwingend notwendig… und genau das ist das Problem, an dem ich nicht weiter komme :)

lg
 
Und wo ist jetzt das Problem einen Wert von 60% auf 900 oder was auch immer für einen Pixelwert zu ändern.
 
Ganz einfach: die beiden äußeren Boxen bleiben 20% Breit und passen sich somit nicht der Browsergröße an. Das heist, sie tun es schon, allerdings ist 1. der Content nicht zentriert und 2. geht der rechte Container nicht bis zum Rand.
 
Das ist zu gross und macht keinen Sinn, da auf Vieports mit nur 1240px schon die mittlere box nicht reinpasst, wie soll dann platz sein für die äusseren Ränder?
 
Die äußeren Ränder sind auch nur für Auflösungen die GRÖSSER als 1280px sind. Zum Beispiel hat mein Bildschirm eine Auflösung von 2560x1440px. Somit macht es sehr wohl Sinn. Falls du das mit Vieports meinst...
Außerdem behaupte ich ja auch nicht das der eigentlich Content, sprich Textboxen usw. 1240px breit werden. Das ganze hat nur was mit der Gestaltung der Website zu tun :)

lg
 
Sorry, aber habe nur einen Laptop. Und da ist bei Abzug der Ränder und Scrolleiste nur 1240Pixel Platz.
Mit einem Smartphone darf man deine Seite ja dann gar nicht betrachten, aber soll man wohl auch nicht.
Da kann ich dir leider nicht helfen.
 
Philastan schrieb:
Die äußeren Ränder sind auch nur für Auflösungen die GRÖSSER als 1280px sind. Zum Beispiel hat mein Bildschirm eine Auflösung von 2560x1440px.
Zum Vergrößern anklicken....
und bei der Auflösung hast du die Fenster immer maximiert? Was für eine Verschwendung, da passen doch prima zwei Anwendungen nebeneinander.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben