mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 11.12.2016 09:07 Benutzername: Passwort: Auto-Login

Thema: [hilfe] DIV layout vom 26.07.2004


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [hilfe] DIV layout
Seite: 1, 2  Weiter
Autor Nachricht
gtz
Threadersteller

Dabei seit: 15.04.2002
Ort: -
Alter: 41
Geschlecht: Männlich
Verfasst Mo 26.07.2004 15:16
Titel

[hilfe] DIV layout

Antworten mit Zitat Zum Seitenanfang

hossa.
ich versuche, folgendes layout mit divs umzusetzen, aber bin kläglich gescheitert:




den code dazu hatte ich mir im groben so vorgestellt:

Code:

<div class="outer">

  <div class="rosa_und_blau" style="width:100%">
    <div class="rosa" style="width:100%; height: 100%"; float: left;">
      whatever
    </div>
    <div class="blau" style="width:254px; height: 100%"; float: right;">
      whatever
    </div>
  </div>

  <div class="gruen" style="width:100%">
    whatever
  </div>

  <div class="gelb_und_rot" style="width:100%">
    <div class="gelb" style="width:100%; height: 100%"; float: left;">
      whatever
    </div>
    <div class="rot" style="width:254px; height: 100%"; float: right;">
      whatever
    </div>
  </div>

</div>


die höhe der gelb_und_rot soll durch die höhe von gelb oder rot bestimmt werden, je nachdem,welches höher is. rosa_und_blau analog dazu.

kann mir jemand von euch da unter die arme greifen? ich kriegs nich geregelt.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
matt

Dabei seit: 06.05.2003
Ort: Köln
Alter: 35
Geschlecht: Männlich
Verfasst Mo 26.07.2004 15:20
Titel

Antworten mit Zitat Zum Seitenanfang

Mit der Höhe das ist immer so eine Sache.

Wie soll denn der Hintergrund der DIVS sein? Man könnte den nebeneinanderliegenden einfach dasselbe Hintergrundbild mit der ganzen Breite geben und den Contentbereich mit PADDING auf den gewünschten Platz beschränken. Dann sollten beide gleich hoch aussehen. Wenn die allerdings einen BORDER haben sollen geht's so nicht.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
gtz
Threadersteller

Dabei seit: 15.04.2002
Ort: -
Alter: 41
Geschlecht: Männlich
Verfasst Mo 26.07.2004 15:24
Titel

Antworten mit Zitat Zum Seitenanfang

so einfach is das nich, denn die höhe der einzelnen div (mit ausnahme des grünen) wird erst zur laufzeit durch die höhe des inhaltes bestimmt.

aber ich hab grade ne idee...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
p.ro

Dabei seit: 21.05.2004
Ort: bochum
Alter: 47
Geschlecht: Männlich
Verfasst Mi 28.07.2004 07:35
Titel

Antworten mit Zitat Zum Seitenanfang

gtz hat geschrieben:
... aber ich hab grade ne idee...


Und? Hat`s geklappt?
  View user's profile Private Nachricht senden
Account gelöscht


Ort: -
Alter: -
Verfasst Mi 28.07.2004 07:49
Titel

Antworten mit Zitat Zum Seitenanfang

Vielleicht kann dir das hier beispielhaft weiterhelfen (Spukte noch in meinen Bookmarks rum).

http://www.pixy.cz/blogg/clanky/css-3col-layout/
 
Blumenwiese

Dabei seit: 04.07.2004
Ort: Darmstadt
Alter: -
Geschlecht: -
Verfasst Mi 28.07.2004 08:11
Titel

Antworten mit Zitat Zum Seitenanfang

machs doch mit css. kannste den overflow controllieren.
und jeweils ne area erstellen --> hier würd ich id anstatt class nehmen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Account gelöscht


Ort: -
Alter: -
Verfasst Mi 28.07.2004 08:14
Titel

Antworten mit Zitat Zum Seitenanfang

Das IST CSS *zwinker*
 
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 28.07.2004 08:36
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
<HTML>
  <HEAD>
    <TITLE>test</TITLE>
  </HEAD>
  <STYLE TYPE="text/css">
  body {
     margin: 0;
     padding: 0;
     height: 100%;
     }
  .topcontainer {
     width: 100%;
     background-color: #387623;
   }
  .topleft {
    float: left;
     width: 100%;
     right: 294px;
     margin-right: -294px;
    background-color: #349764;
     }
  .topright {
     float: right;
   width: 294px;
   background-color: #765498;
   right: 0;
   }
  .bottomcontainer {
     width: 100%;
     height: 100%;
     background-color: #387623;
   }
  .bottomleft {
    float: left;
     width: 100%;
     height: 100%;
     right: 294px;
     margin-right: -294px;
    background-color: #349764;
     }
  .bottomright {
     float: right;
   width: 294px;
   background-color: #765498;
   right: 0;
   height: 100%;
   }
   .clear {
   clear: both;
   margin: 0;
   padding: 0;
   line-height: 1px;
   font-size: 1px;
   }
  </STYLE>
  <BODY>
<DIV CLASS="topcontainer">
   <DIV CLASS="topleft">
      content oben

   </DIV>
            <DIV CLASS="topright">
            content oben rechts   
         </DIV>
</DIV>
<DIV CLASS="clearer">&nbsp;</DIV>
<DIV CLASS="bottomcontainer">
   <DIV CLASS="bottomleft">
      content unten links

   </DIV>
            <DIV CLASS="bottomright">
            content unten rechts   
         </DIV>
</DIV>DIV>
</DIV> 

</BODY></HTML>



Blumenwiese hat geschrieben:
machs doch mit css. kannste den overflow controllieren.
und jeweils ne area erstellen --> hier würd ich id anstatt class nehmen.

total sinentleert und in etwa so hilfreich, wie wenn jemand sagt "da musst du noch was an der typo machen"

€: achso.. ist getestet im firefox 0.9.2 und IE 5.5, NS6 und NS7 auf PC.. Opera 7 zerlegts leider etwas (das clearer div ist da riesig.. müsstest du evtl. noch etwas rumschrauben)


Zuletzt bearbeitet von sahnemuh am Mi 28.07.2004 09:04, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen 3-spaltiges div-Layout in festem div macht Probleme
Probleme mit Layout - div im layout height="100%"
dreispaltiges div layout
... ein vernünftiges Div-Layout.
Umsetzung Layout Tab./DIV
div-Layout variabel gestalten?
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.