tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
5
ZUGRIFFE
633
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 13.11.11 13:27 #1
    forum-user forum-user ist offline Mitglied Bronze
    Registriert seit
    Apr 2011
    Beiträge
    30
    Hallo Leute, ich steh grad vor dem "Problem" das ich ein 3 Zeilen Layout erstellen will, das einen festen Header und Footer hat. Diese stehen fest oben und unten am Bildschirmrand.
    Der Content Bereich soll sich dem rest anpassen und den Textfluss nur in diesem Bereich haben auch wenn massen Text vorhanden ist.
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>

<link href="template/design.css" rel="stylesheet" type="text/css" media="screen" />
  <!--[if IE 7]>
    <style type="text/css">@import url(template/ie7.css);</style>
  <![endif]-->
</head>

<body>
<div id="header"><img src="template/image/Logo_02.jpg" alt="ALTERNATE" width="252" height="88" hspace="50" /></div>
  <div id="top_middle"><img src="template/image/top_middle_1.jpg" alt="ALTERNATE" /></div>
<div id="conten_wrapper">
  <div id="content">
    <p></p>
 </div>
</div>

<div id="footer">
 <div class="footer_text">
  <ul>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Impressum</a></li>
  </ul>
 </div>
<div class="footer_text">TEST</div>
<div class="footer_text">TEST2</div>
<div class="footer_text">TEST2</div>
<div class="clearfloat"></div>
</div>
</body>
</html>
    Und hier meine CSS
    HTML-Code:
    @charset "utf-8";
/* CSS Document */
body{
	background-color:#100b5d;
	font-size:14px;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}

#header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:110px;
	background:url(image/header_bg.jpg) repeat-x top;
}

#top_middle{
	position:absolute;
	left:50%;
	top:100px;
	margin-left:-375px;
	height:150px;
	width:750px;
}


#conten_wrapper {
	position:absolute;
	top:255px;
	left:50%;
	width:950px;
	margin-left: -475px;
	background-color:#006666;
	min-height:350px;
	overflow:auto;
}

#content{
/*	margin: 0px auto 0 auto;
	width:950px;

	/*overflow:auto;
	background-color:#00CC00;  */
}

#footer{
	position:absolute;
	bottom:0;
	height:121px;
	width:100%;
	left:0;
	background:url(image/footer_bg.jpg) repeat-x top;
}

* #header{
	position:fixed;
}

* #footer {
	position:fixed;
}

* #top_middle{
	position:fixed;
}

* #content_wrapper{
	position:fixed;
}

.footer_text{
	width:25%;
	margin-top:30px;
	float:left;
}

.footer_text ul {
	list-style:none;
	font-size:10px;

}

.footer_text ul li a:link,.footer_text ul li a:visited, .footer_text ul li a:active  {
	font-size:10px;
	font-weight:bold;
	color:#6e6556;
	text-decoration:none;
}

.footer_text ul li a:hover{
	text-decoration:underline;
}

.clearfloat {
   	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

    Nun meine Frage, wo ist hier mein Denkfehler
     
    Zitieren Zitieren
  2. 13.11.11 22:44 #2
    djheke djheke ist offline Mitglied Silber
    Registriert seit
    Sep 2011
    Beiträge
    96
    Hallo,

    versuch's mal so #conten_wrapper bottom:121px ; der Rest kann so bleiben.

    Edit: Warum ist #content_wrapper fixed ? Kannste entfernen. Quatsch.
    Geändert von djheke (13.11.11 um 22:47 Uhr)
     
    Zitieren Zitieren
  3. 15.11.11 20:11 #3
    forum-user forum-user ist offline Mitglied Bronze
    Registriert seit
    Apr 2011
    Beiträge
    30
    halle djheke
    Bei Deiner Variante schiebts mir den Text nun komplett über den Header, das was ja nischt gewollt ist.
     
    Zitieren Zitieren
  4. 15.11.11 22:44 #4
    threadi threadi ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Leipzig
    Beiträge
    478
    Willst Du nicht "position: fixed" verwenden wenn oben und unten immer an der selben Stelle stehen bleiben sollen?
     
    Zitieren Zitieren
  5. 16.11.11 09:41 #5
    djheke djheke ist offline Mitglied Silber
    Registriert seit
    Sep 2011
    Beiträge
    96
    Sorry.

    Hab wohl nicht richtig gelesen.

    Guck mal hier:
    Beispiel
     
    Zitieren Zitieren
  6. 16.11.11 13:50 #6
    forum-user forum-user ist offline Mitglied Bronze
    Registriert seit
    Apr 2011
    Beiträge
    30
    Jo genau sowas, danke Dir. Habe aber auch grad noch bissel an meiner CSS gewerkelt und da kam das raus
    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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

    @charset "utf-8";
/* CSS Document */
body {
    margin:0;
    padding:0;
    background-color:#100b5d;
    font-size:14px;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
}
 
#wrapper {
    position:absolute;
    width:950px;
    left:50%;
    margin-left:-475px;
}
 
#header{
    background:url(image/header_bg.jpg) repeat-x;
    height:110px;
    width:100%;
    display:block;
    min-width:950px;
}
 
#header_nav{
    float:right;
    width:500px;
    height:50px;
    margin:30px 50px 0 0;
    display:block;
    line-height:50px;
}
 
#header_nav ul { 
    margin:0; 
    padding:0; 
    list-style:none; 
}
 
#header_nav li { 
    float:left; 
    margin:0 0 0 40px ; 
    padding:0; 
}
 
#header_nav ul li a:link,#header_nav ul li a:visited, #header_nav ul li a:active  {
    font-size:16px;
    font-weight:bold;
    text-decoration:none;
    color:#6e6556;
}
 
#header_nav ul li a:hover{
    text-decoration:underline;
}
 
#top_middle{
    top:100px;
    left:0;
    right:0;
    width:100%;
    text-align:center;
}
 
* #top_middle{
    position:fixed;
}
 
#content_wrapper {
    position:absolute;
    min-width:950px;
    width:100%;
    top:260px;
    left:0;
    bottom:130px;
    overflow:auto;
}
 
* #content_wrapper {
    position:fixed;
}
 
 
#content{
    width:900px;
    margin:auto;
}
 
#footer {
    position:absolute;
    background:url(image/footer_bg.jpg) repeat-x;
    width:100%;
    height:121px;
    bottom:0;
    min-width:950px;
}
 
.footer_text{
    width:25%;
    margin-top:30px;
    float:left;
    color:#6e6556;
}
 
.footer_text ul {
    list-style:none;
    font-size:10px;
 
}
 
.footer_text ul li a:link,.footer_text ul li a:visited, .footer_text ul li a:active  {
    font-size:10px;
    font-weight:bold;
    text-decoration:none;
    color:#6e6556;
}
 
.footer_text ul li a:hover{
    text-decoration:underline;
}
 
 
* #header{
    position:fixed;
}
 
* #wrapper {
    position:fixed;
}
 
* #footer{
    position:fixed;
}
 
.clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
     
    Zitieren Zitieren
« hover | Image-Link Hover spielt verrückt! »

Ähnliche Themen

  1. Sticky Footer DIV überdeckt darüberliegende DIVs wenn Footer-Inhalt zu viele Zeilen
    Von soezkan im Forum CSS
    Antworten: 0
    Letzter Beitrag: 12.05.11, 14:29
  2. 3 Zeilen Layout mit Content über den 3 Zeilen
    Von Moe078 im Forum CSS
    Antworten: 8
    Letzter Beitrag: 09.02.10, 17:44
  3. Problem mit Layout (Header, Sidenav, Content und Footer) - 100% Höhe
    Von DeMoehn im Forum CSS
    Antworten: 4
    Letzter Beitrag: 19.11.07, 17:54
  4. JXL ... Footer und Header
    Von takidoso im Forum Java
    Antworten: 0
    Letzter Beitrag: 17.05.06, 15:13
  5. Div Layout, Header, Content (variable Größe?), Footer
    Von versuch13 im Forum CSS
    Antworten: 7
    Letzter Beitrag: 29.03.05, 21:12