tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
7
ZUGRIFFE
396
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 22.10.07 18:36 #1
    pÄd pÄd ist offline Grünschnabel
    Registriert seit
    Oct 2007
    Beiträge
    4
    Hi,

    ich habe eine Frage bezüglich meines Layouts. Und zwar wollte ich, dass das Layout sich in der Mitte von der Seite befindet. Ich habe schon einiges versucht aber bin nicht zu einer Lösung gekommen.

    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

    html,body {
height:100%;
margin-top: 0;
}
 
#center {
    position:absolute;
    left:50%;
}
 
#main {
position:absolute;
min-height:100%;
width:734px;
background-color:#898989;
}
 
 
#top {
position:absolute;
top:0;
left:2px;
width:730px;
height:191px;
background-position: center;
background-image: url(images/index_02.jpg);
}
 
#topbar {
position:absolute;
top:191px;
left:2px;
width:730px;
height:24px;
background-image: url(images/index_04.jpg);
}
 
 
#content {
position:absolute;
top:215px;
left:2px;
bottom:67px;
width:730px;
background-image: url(images/index_06.jpg);
}
 
#footer {
position:absolute;
bottom:0;
left:2px;
width:730px;
height:67px;
background-image: url(images/index_07.jpg);
}

    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>untitled</title>
		<link rel="stylesheet" href="style.css" type="text/css"> 
</head>

<body bgcolor="#111111">

<div id="center">
	<div id="main">
		<div id="top"></div>
		
		<div id="topbar">
			<div></div>
		</div>
		
		<div id="content">
			<div></div>
		</div>
		
		<div id="footer"></div>
	</div>
</div>
	
</body>
</html>

    Achso und ich wollte dass jeder Browser die Page richtig darstellt, aber im IE verhaut es das Layout total.. bis jetzt konnte ich nur IE und FF ausprobieren..
     
  2. 22.10.07 18:39 #2
    Maik Tutorials.de Gastzugang
    Hi,

    das Stylesheet funktioniert in allen mir zur Verfügung stehenden Browsern:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    body {
background:#111111;
}
 
#main {
position:absolute;
left:50%;
min-height:100%;
height:auto !important;
height:100%;
width:734px;
margin-left:-367px; /* negative Hälfte von width:734px */
background-color:#898989;
}

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    <body>
 
<div id="main">
    <div id="top"></div>
        
    <div id="topbar">
        <div></div>
    </div>
        
    <div id="content">
        <div></div>
    </div>
        
    <div id="footer"></div>
</div>
    
</body>
     
  3. 22.10.07 18:50 #3
    pÄd pÄd ist offline Grünschnabel
    Registriert seit
    Oct 2007
    Beiträge
    4
    Vielen Dank!

    Das Problem im Firefox wurde behoben
    Jetzt fehlt nurnoch der Internet-Explorer.. der zeigt es immernoch falsch an.

    MfG
     
  4. 22.10.07 18:55 #4
    Maik Tutorials.de Gastzugang
    Versuch es mal mit diesem Stylesheet:

    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
64
65
66
67
68

    html,body {
height:100%;
margin:0;
padding:0;
}
 
body {
background:#111111;
}
 
#main {
position:absolute;
left:50%;
min-height:100%;
height:auto !important;
height:100%;
width:734px;
margin-left:-367px; /* negative Hälfte von width:734px */
background:#898989;
}
 
#top {
position:absolute;
top:0;
left:2px;
width:730px;
height:191px;
background:url(images/index_02.jpg) center;
z-index:2;
}
 
#topbar {
position:absolute;
top:191px;
left:2px;
width:730px;
height:24px;
background:url(images/index_04.jpg);
z-index:2;
}
 
#content {
position:absolute;
top:215px;
left:2px;
bottom:67px;
width:730px;
background:url(images/index_06.jpg);
}
 
/* Für IE */
* html #content {
top:0;
height:100%;
border-top:215px solid #898989;
border-bottom:68px solid #898989;
z-index:1;
}
 
#footer {
position:absolute;
bottom:0;
left:2px;
width:730px;
height:67px;
background:url(images/index_07.jpg);
z-index:2;
}
     
  5. 23.10.07 07:00 #5
    pÄd pÄd ist offline Grünschnabel
    Registriert seit
    Oct 2007
    Beiträge
    4
    Also jetzt wird schonmal alles im IE angezeigt. Aber Wenn ein langer Text kommt dann verschiebt er den Footer nicht nach unten sonder der Footer überdeckt einen Teil vom Text und der Text geht dann unten Weiter.

    Nochmals Danke
    MfG
     
  6. 23.10.07 07:10 #6
    Maik Tutorials.de Gastzugang
    Hi,

    in diesem Fall muss das Layout grundsätzlich anders konzipiert werden, denn deine Variante eignet sich für einen scrollfähigen Inhaltsbereich #content.

    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

    html,body {
height:100%;
margin:0;
padding:0;
}
 
body {
background:#111;
}
 
#main {
position:relative;
left:50%;
min-height:100%;
height:auto !important;
height:100%;
width:730px;
padding:0 2px;
margin-left:-367px;
background:url(images/index_06.jpg) 2px 0 repeat-y;
}
 
#top {
width:730px;
height:191px;
background:url(images/index_02.jpg) center;
}
 
#topbar {
width:730px;
height:24px;
background:url(images/index_04.jpg);
}
 
#content {
width:730px;
padding-bottom:68px;
}
 
#footer {
position:absolute;
bottom:0;
left:2px;
width:730px;
height:67px;
background:url(images/index_07.jpg);
}
     
  7. 23.10.07 16:58 #7
    pÄd pÄd ist offline Grünschnabel
    Registriert seit
    Oct 2007
    Beiträge
    4
    Ok, Vielen Dank für deine Zeit die du dir für mich genommen hast. Nun geht alles!
     
  8. 23.10.07 17:05 #8
    Maik Tutorials.de Gastzugang
    Zitat Zitat von pÄd Beitrag anzeigen
    Ok, Vielen Dank für deine Zeit die du dir für mich genommen hast.
    Kein Problem, dafür bin ich doch da
     
« Schriftgrößen Sprung | Zeilenumbrüche im Firefox »

Ähnliche Themen

  1. Container mit float-Div's zentrieren
    Von hermanhass im Forum CSS
    Antworten: 1
    Letzter Beitrag: 22.04.09, 08:12
  2. gesamtes Layout zentrieren?
    Von scrotum im Forum CSS
    Antworten: 5
    Letzter Beitrag: 16.04.05, 21:34
  3. mit DIV Layout zentrieren
    Von DanielBodensee im Forum CSS
    Antworten: 9
    Letzter Beitrag: 28.03.05, 22:24
  4. Layout mit drei längenvariablen Div's
    Von Atmosphinx im Forum CSS
    Antworten: 2
    Letzter Beitrag: 01.03.05, 15:14
  5. Div's zentrieren
    Von Jorgi im Forum CSS
    Antworten: 2
    Letzter Beitrag: 25.07.04, 21:29