mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 08.12.2016 01:11 Benutzername: Passwort: Auto-Login

Thema: CSS Div Problem vom 15.09.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Div Problem
Autor Nachricht
Krisslinger
Threadersteller

Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 15.09.2006 08:47
Titel

CSS Div Problem

Antworten mit Zitat Zum Seitenanfang

Hallo Leute,

ich hab ein kleines Problem. Und zwar besteht das Layout der zu gestaltenden Website aus 5 Divs, Header, Footer, einem großen Content auf der linken Seite und neben dem Content zwei weitere Divs zu Navigation und Subnavigation. Diese liegen aber nicht nebeneinander, sondern übereinander.
Zum besseren Verständnis, es geht nur um den Content Bereich, der eine feste Höhe von 400px hat und rechts daneben zwei Navigations Divs die zusammen auch die Höhe von 400px haben.

Ich komm nicht drauf, wie ich die Divs anordnen, floaten oder clearen soll, dass es meinen Vorstellungen entspricht.

Vielen Dank
  View user's profile Private Nachricht senden
Spladder

Dabei seit: 26.05.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Fr 15.09.2006 08:52
Titel

Antworten mit Zitat Zum Seitenanfang

Schick mal die URL damit man sich den Quelltext anschauen kann, oder poste den hier, aber bitte inklusive CSS!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Krisslinger
Threadersteller

Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 15.09.2006 09:12
Titel

Antworten mit Zitat Zum Seitenanfang

Also das ist nur ein Entwurf, aber es will nicht so richtig klappen. Auch hab ich bis auf die wichtigsten Angaben noch nichts erstellt. Es geht nur um die Posiionierung!

Edit

Also die frische Luft scheint mir gut getan zu haben. Jetzt funktionierts, würd nur gern wissen, ob die Lösung in Ordnung ist, oder ob das nur ne schlechtere Notlösung ist:

CSS:

Code:

body {

   margin: 0px;
   padding: 0px;
   font: 0.7em arial, helvetica, sans-serif;
   text-align: center;
   color: #FFFFFF;
   background-color: #000000;
    }   
   
#container {

   margin: 1em auto;
   width: 1000px;
   background-color: #000000;
    }
   
#header {

   height: 125px;
   background-color: #FFFFFF;
   }
   
#navi {

   height: 20px;
   background-color: #ee7f00;
   }

#content {
   
   float: left;
   height: 410px;
   width: 700px;
   background-color: 4f4f4f;
   }

#subnavi {

     margin-left: 700px;
   height: 250px;
   width: 300px;
   background-color: #FFFFFF;
   }

#navi2 {

   margin-left: 700px;
   height: 160px;
   width: 300px;
   background-color: #8e6e38;
   }

#footer {
   
   clear: both;
   height: 30px;
   width: 1000px;
   background-color: #FFFFFF;
   }



HTML:

Code:
 
<body>

   <div id="container">
    <div id="header"></div>

    <div id="navi"></div>
   
    <div id="content"></div>
   
    <div id="subnavi"></div>
   
    <div id="navi2"></div>

   <div id="footer"></div>

   </div>

  </body>


Zuletzt bearbeitet von Krisslinger am Fr 15.09.2006 09:23, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Spladder

Dabei seit: 26.05.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Fr 15.09.2006 10:00
Titel

Antworten mit Zitat Zum Seitenanfang

Soll dass dann so aussehen!?

Kopier mal einfach in die Datei!

<style type="text/css">
<!--
body {

margin: 0px;
padding: 0px;
font: 0.7em arial, helvetica, sans-serif;
text-align: center;
color: #FFFFFF;
background-color: #000000;
}

#container {

margin: 1em auto;
width: 1000px;
background-color: #000000;
}

#header {
position:relative;
height: 125px;
background-color: #FFFFFF;
}

#navi {
position:relative;
height: 20px;
background-color: #ee7f00;
}

#content {
position:relative;
float: left;
height: 410px;
width: 697px;
background-color: 4f4f4f;
}

#subnavi {
position:relative;
float: left;
height: 250px;
width: 300px;
background-color: #FFFFFF;
}

#navi2 {
position:relative;
float: left;
height: 160px;
width: 300px;

background-color: #8e6e38;

}

#footer {
position:relative;
clear: both;
height: 30px;
width: 1000px;
background-color: #FFFFFF;
}

-->
</style>
</head>

<body>

<div id="container">
<div id="header">asdasdasdasdsa</div>

<div id="navi">asdasdasd</div>

<div id="content">asdasdsad</div>

<div id="subnavi">aqqqqqqqqqqqqqqqqasd</div>

<div id="navi2">asasdadasdxcyyxcyxyxccyxycxad</div>

<div id="footer">asdasdsa</div>

</div>

</body>

Greez Mattes
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Krisslinger
Threadersteller

Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 15.09.2006 10:21
Titel

Antworten mit Zitat Zum Seitenanfang

Danke, genau das brauch ich.
Mich würd jetzt noch interessieren, in wie fern sich dein Vorschlag von meiner Lösung unterscheidet, die ja auch funktioniert? Und was bringt mir das position: relative?

Danke für die schnelle Hilfe
  View user's profile Private Nachricht senden
Spladder

Dabei seit: 26.05.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Fr 15.09.2006 10:28
Titel

Antworten mit Zitat Zum Seitenanfang

hattes bei der subnavi margin-left auf 700 gesetzt. da das aber neben dem content stehen soll brauchste keine margin left sondern nur das float left.

Würde die Schriftfarbe in den weißen feldern noch mit color:#000000; ändern, da man die ja sonnst nicht sieht.

Sind halt immer Kleinigkeiten, damit sowas funktioniert!

Greez
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Krisslinger
Threadersteller

Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 15.09.2006 10:34
Titel

Antworten mit Zitat Zum Seitenanfang

Ok, vielen Dank.

Die weißen Felder bleiben nicht weiß, da kommen noch Graphiken rein. Außerdem muss ich dem CSS eh noch einiges hinzufügen, so wie jetzt wird ja eigentlich nichts dargestellt außer den Begrenzungen.
Was mir das position:relative hier bringt würd mich trotzdem noch interessieren *g*

Super Sache hier. Vielen Dank


Zuletzt bearbeitet von Krisslinger am Fr 15.09.2006 10:35, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Spladder

Dabei seit: 26.05.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Fr 15.09.2006 11:27
Titel

Antworten mit Zitat Zum Seitenanfang

schau mal hier

für die position:relative;
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [css] Problem mit div Höhe
DIV-Problem bei Druckansicht mit CSS
[CSS] Div-Problem einer Anfängerin
CSS & DIV Problem
[CSS] Div mit Tabellen Problem
[CSS] Div-Größen Problem
Neues Thema eröffnen   Neue Antwort erstellen
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.