tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
1524
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 08.05.10 15:40 #1
    FunkFlex FunkFlex ist offline Mitglied Silber
    Registriert seit
    May 2010
    Beiträge
    86
    Hi, ich bin neu hier und habe ein großes Problem.
    Für ein Layout einer Website habe ich geplant, diese in 4 Bereiche aufzuteilen.
    Um noch etwas dazu zu sagen, die 4 boxen befinden sich alle in einer Großen wrapper Box.
    Die boxen sollen sie wie folgt verhalten.
    Links oben befindet sich ein Firmenlogo, rechts daneben mit selber Höhe ein Header wo mal ein Bild rein soll.
    Unter dem Firmenlogo soll eine Navigationsbox die genauso breit is wie das Firmelogo, daneben ein Textbereich, der letztliche "Anzeigebereich", der wieder so breit is wie der header.
    Ich hab nur versucht es schon mit float und clear float auszurichten, dann mit den Positionsangaben top,left right etc.
    Nun hab ich die Variante die hier in den FAQ stehen ausprobiert. Nur leider funktioniert garnichts von all dem.
    In der Live Ansicht von Dreamweaver, stehen die verschiedenen Boxen nur wirr nebeneinander, bzw. man sieht manche garnicht.
    Könnt ihr mir bitte helfen?
    Hier mein Code:
    Erst Html:
    HTML-Code:
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="home_css.css">

</head>

<body>
<div id="wrapper">

   <div id="mecklogo">

   </div>
    
   <div id="navigation">
   
   </div>
 
  
   <div id="header">
  
   </div>
	
   <div id="metainformation">	

   </div>
  
 </div>  
</body>
</html>
    Und hier CSS:
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

    #wrapper {
    margin: 0 auto;
    width: 960px;
}
    
 
#mecklogo {
    float:left;
    height: 192px;
    width: 192px;
    background-color:#0F3;
    margin: 0;
    padding: 0;
    }
#navigation {
    clear:left;
    position:fixed;
    height:auto;
    width: 192px;
    background-color:#999;
    margin: 0 ;
    padding: 0 ;
    }
 
#header {
    float:left;
    height: 192px;
    width: 768px;
    background color:#39C;
    margin: 0 ;
    padding:0 ; 
}
 
#metainformation {
clear:left;
height: auto;
width: 768px;
background-color:#C3C;
margin: 2%;
padding: 2%;
}

    Is jetz bisschen lange aber ich hoffe mir kann jemand helfen!
    Vielen Dank schonmal!
    Gruß
    FunkFlex
    Geändert von Maik (08.05.10 um 15:50 Uhr) Grund: Quellcode in [html] [/html] / [css] [/css]-Tag eingefügt
     
    Zitieren Zitieren
  2. 08.05.10 15:49 #2
    Maik Tutorials.de Gastzugang
    Hi,

    ich empfehle dir, zwei weitere DIV-Blöcke einzurichten (hier: #leftCol u. #rightCol ), die in deinem Seitenkonzept den linken und rechten Spaltenblock für die genannten Seitenbereiche bilden:
    HTML-Code:
    <div id="wrapper">

   <div id="leftCol">
      <div id="mecklogo"></div>
      <div id="navigation"></div>
   </div><!-- / #leftCol -->

   <div id="rightCol">
      <div id="header"></div>
      <div id="metainformation"></div>
   </div><!-- / #rightCol -->

</div><!-- / #wrapper -->

    Die beteiligten Blöcke werden dann wie folgt formatiert:
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

    /*linkerSpaltenblock */
#leftCol {
float:left;
width:192px;
}
#mecklogo {
height: 192px;
background-color:#0F3;
margin: 0;
padding: 0;
}
#navigation {
height:auto;
background-color:#999;
margin: 0;
padding: 0;
}
 
/* rechter Spaltenblock */
#rightCol {
float:left;
width:768px;
}
#header {
height: 192px;
background color:#39C;
margin: 0;
padding:0;
}
#metainformation {
background-color:#C3C;
margin: 0;
padding: 0;
}


    mfg Maik
     
    Zitieren Zitieren
  3. 08.05.10 16:20 #3
    FunkFlex FunkFlex ist offline Mitglied Silber
    Registriert seit
    May 2010
    Beiträge
    86
    Also jetz richten sie sich wunderbar nebeneinander aus, dankeschön! Aber die Navileiste und die Metainfo sind relativ klein. Kann ich diese dann mit height auto machen oder soll ich ne feste Größe festlegen?
    Gruß FunkFlex
     
    Zitieren Zitieren
  4. 08.05.10 16:23 #4
    Maik Tutorials.de Gastzugang
    Von einer festen (absoluten) Höhenangabe solltest du absehen, wenn der Inhaltsumfang recht groß ist, und zukünftig auch anwachsen wird. Überschreitet nämlich der Inhalt die festgelegte Boxenhöhe, läuft er über den unteren Rand seines Elternelements hinaus.

    Du hast jedoch mit der Eigenschaft min-height die Möglichkeit, für die Boxen eine Mindesthöhe vorzusehen, die dann bei zunehmenden Inhalt auch mitwächst.

    mfg Maik
     
    Zitieren Zitieren
  5. 11.05.10 17:42 #5
    FunkFlex FunkFlex ist offline Mitglied Silber
    Registriert seit
    May 2010
    Beiträge
    86
    alles klar vielen dank!
     
    Zitieren Zitieren
« Layoutproblem bei flexibler Breite | h1 Tag verursacht Abstand »

Ähnliche Themen

  1. Zwei Boxen/Panels nebeneinander ausrichten
    Von BastianW im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 3
    Letzter Beitrag: 25.05.09, 11:22
  2. Simples Layout - 2 Div Boxen nebeneinander
    Von Axor im Forum CSS
    Antworten: 7
    Letzter Beitrag: 27.03.09, 12:16
  3. Ebene boxen nebeneinander verschieben sich
    Von afterwhoru im Forum CSS
    Antworten: 0
    Letzter Beitrag: 06.11.07, 10:42
  4. Div-Boxen nebeneinander
    Von schiese im Forum CSS
    Antworten: 1
    Letzter Beitrag: 08.08.06, 16:28
  5. Div boxen nebeneinander
    Von limk im Forum CSS
    Antworten: 2
    Letzter Beitrag: 28.08.05, 19:00