tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
706
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 01.03.05 14:24 #1
    Atmosphinx Atmosphinx ist offline Mitglied
    Registriert seit
    Mar 2005
    Beiträge
    11
    Hi,

    Wie wohl Allen bereitet auch mir die Umstellung von Tabellen- auf CSS-Layouts einige Schwierigkeiten. Ich habe einen Header, in dem ich drei Div's platzieren möchte, einen Container ganz links, einen ganz rechts und den dritten genau in der Mitte der anderen.

    Definiere ich die Div's so, dass sie aneinander liegen, habe ich Probleme mit den unterschiedlichen Breiteninterpretationen der Browser. Der IE etwa kippt das rechte Element beim Verkeinern des Fensters allzu gerne eine Zeile nach unten. Darum möchte ich eine kumulierte Breite von vielleicht 90-95 Prozent.

    Wie "zentriere" ich das mittlere Element ?

    oder:

    Wie lässt es sich sonst vermeiden, dass das rechte Element nach unten rutscht?


    Vielen Dank für Eure Ideen ...
    Atmosphinx


    Code :
    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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

    <html>
<head>
<title>Layout mit drei längenvariablen Div's</title>
<style type="text/css" media="all">
 
#header {
margin-left: auto;
margin-right: auto;
padding: 5px;
height: 150px;
width: 100%;
max-width: 950px;
width:expression(document.body.clientWidth > 950? "950px": "auto" );
min-width: 500px;
width:expression(document.body.clientWidth < 500? "500px": "auto" );
border: 2px solid black;
float: none;
}
 
#header-left {
margin: 0px;
height: 100%;
width: 24%;
float: left;
clear: none;
display: block;
background-color: yellow;
}
 
#header-center {
margin-left: auto;
margin-right: auto;
height: 100%;
width: 45%;
float: left;
clear: none;
display: block;
background-color: orange;
}
 
#header-right {
margin: 0px;
height: 100%;
width: 24%;
float: right;
clear: none;
display: block;
background-color: yellow;
}
 
</style>
</head>
 
<body style="padding: 20px">
 
<div id="header">
<div id="header-left">links</div>
<div id="header-center">wie zentriere ich dieses Element?</div>
<div id="header-right">rechts</div>
</div>
 
</body>
</html>
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Layout mit drei längenvariablen Div's-beispiel.jpg  
     
  2. 01.03.05 14:59 #2
    Avatar von Leola13
    Leola13 Leola13 ist offline
    tutorials.de Premium-User
    Registriert seit
    Jan 2003
    Ort
    tiefstes Ostwestfalen
    Beiträge
    2.606
    Hai,

    vielleicht hilft dir ja dies

    Ciao Stefan
     
    Eine weitere sinnlose Page im weltweiten Netz. www.leola13.de
    Wenn du eine weise Antwort verlangst, musst du vernünftig fragen !
    Man sollte die Tatsachen kennen, bevor man sie verdreht !
  3. 01.03.05 15:14 #3
    Avatar von hela
    hela hela ist offline Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Hallo Atmosphinx,

    ... indem du dem header-center-Selektor die Eigenschaft "margin-left: 3.5%;" gibst.
     
« Textformatierung bzw. -ausrichtung im Container | Div-Box nach unten unendlich »

Ähnliche Themen

  1. aus drei mach eins: drei ver. Quellen für ein SQL-Script, aber wie?
    Von abtronic im Forum Relationale Datenbanksysteme
    Antworten: 2
    Letzter Beitrag: 18.07.08, 23:32
  2. CSS-Layout Frage (div's zentrieren)
    Von pÄd im Forum CSS
    Antworten: 7
    Letzter Beitrag: 23.10.07, 17:05
  3. CSS-Layout aus drei Zeilen, dritte soll immer unten bleiben
    Von elecfuture im Forum CSS
    Antworten: 9
    Letzter Beitrag: 31.07.06, 15:23
  4. Drei-Spalten-Layout mit CSS
    Von Metha im Forum CSS
    Antworten: 6
    Letzter Beitrag: 22.06.06, 06:41
  5. Drei Spalten Layout
    Von Neral im Forum CSS
    Antworten: 1
    Letzter Beitrag: 26.07.05, 16:25