tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
732
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 27.04.10 18:26 #1
    Fantasmo Fantasmo ist offline Mitglied Gold
    Registriert seit
    Feb 2007
    Beiträge
    175
    Hallo,

    ich habe mal wieder ein Layoutproblem. Dabei habe ich schon allen überflüssigen Code rausgeschmissen, um den Fehler einzuengen, aber ich kann partout nicht finden woran es liegt.

    Mein Layout hat im "body" ein div "Container" und daraunter eins "footer".
    Ich will nämlich im Container (fester Breite) alles zentrieren und der Footer soll komplett über die ganze Breite gehn.

    Es scheint auch alles richtig, wenn man das Browserfenster normal groß hat, wenn man es aber in der Breite ganz dünn zusammenschiebt, wird auf einmal der "footer" schmaler als "content". Ich hab gesehen, dass es an "body" zu liegen scheint, denn "body" und "footer" sind gleichermaßen zu schmal.

    Ich hab schon verschiedene Sachen probiert, mit "overflow:hidden" "width: 100%" aber irgendwie funktioniert nichts.

    Vielleicht kann mal jemand drüber gucken?! Der Code samt CSS liegt unter http://rapidshare.com/files/38082473...seite.zip.html

    Hier mal als Codeschnipsel
    HTML
    HTML-Code:
    <!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Testseite</title>
	<link href="basic.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>

  <div id="container">
    <div id="header">
      <h1>Headline</h1>
      <ul>
         <li><a href="#">Eins</a></li>
        <li><a href="#">Zwei</a></li>
        <li><a href="#">Drei</a></li>
        <li><a href="#p">Vier</a></li>
      </ul>     
    </div> <!--header-->
    
    <div id="content">
      <div id="sidebar">
          <p>Sidebar - Bereich</p>    
      </div><!--sidebar-->
      <div id="main"> 
         <p>Main Content - Bereich</p>
      </div><!--main-->
    </div><!--content-->            
  </div> <!--container-->
           
  <div id="footer">
    <div id="footerinfo">
    <p>Footer - Bereich</p> 
    </div>           
  </div> <!--footer-->
          
</body>
</html>

    CSS
    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
143
144
145
146
147
148
149

    /*------------------- CSS RESET ---------------------
---------------------------------------------------*/
* {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
 
ul,
ol {
list-style: none;
}
 
b,
strong {
font-weight: bold;
}
 
img,
a img {
border: none;
}
 
a:link, a:visited {
text-decoration: none;
}
 
a:hover, a:active, a:focus {
text-decoration: none;
}
 
 
/*------------------- FONTS ---------------------
------------------------------------------------*/
body {
font-size: 100%;
}
 
 
h1, h2, h3, h4 {
color: #59b4e1;
font-family: "Trebuchet MS", "Times New Roman", serif;
font-weight: bold;
}
 
p {
font-family: Verdana, Arial;
font-size: 0.7em;
margin-bottom: 1.0em;
color: #828282;
}
 
/*------------------- MAIN LAYOUT ---------------------
-------------------------------------------------*/
 
 
#container {
margin: 0 auto;
width: 980px;
position: relative;  
border: 1px solid black;
}
 
#header {
overflow: hidden;
height: 130px;
border: 1px dashed green;
}
 
#header h1 {
float: left;
}
 
#header ul {
float: right;
margin-right: 151px;
margin-top: 100px;
}
 
#header li {
display: inline;
float: left;
margin-right: 25px;
color: #59b4e1;
font-family: "Trebuchet MS", Verdana, Arial;
}
 
#header li a {
font-weight: bold;
color: #59b4e1;
}
 
#header h1 a {
width:235px;
height:129px;
display: block; 
text-indent: -1000em; 
z-index: 1000; /* IE Fix*/
}
 
#content {
margin-top: 20px;
padding: 5px 5px 20px 5px;
width: 980px;
overflow: hidden;
height: 100%;
border: 1px solid red;
}
 
#sidebar {
float: left;
width: 250px;
border: 1px dashed blue;
}
 
#main {
float: right;
width: 670px;
border-left:2px solid #EBEBEB;
padding-left:25px;
border: 1px dashed magenta;
}
 
#footer {
/*height: 100px;*/
background-color: yellow;
color: #fff;
padding: 15px 0 15px 0;
border: 1px solid blue;
}
 
#footerinfo {
width: 980px;
margin: 0 auto;
overflow: hidden;
height: 100%;
border: 1px solid lightblue;
}
 
#footerinfo ul{
margin-left: 315px;
}
 
#footerinfo li a{
color: #fff;
font-family: "Trebuchet MS", Verdana, Arial;
font-size: 0.8em;
}

    Und wie gesagt, dass der "footer" zu schmal wird, sieht man erst wenn man das Browserfenster in der Breite ganz schmal macht.
     
    Zitieren Zitieren
  2. 27.04.10 18:31 #2
    Maik Tutorials.de Gastzugang
    Hi,

    warum postest du deine Frage im HTML-Forum, wenn hier offensichtlich ein CSS-Problem vorliegt?

    Eine Mindestbreite min-width:980px für #footer wird das Problem aus der Welt schaffen.

    mfg Maik
     
    Zitieren Zitieren
  3. 27.04.10 18:44 #3
    Fantasmo Fantasmo ist offline Mitglied Gold
    Registriert seit
    Feb 2007
    Beiträge
    175
    ...entschuldigung, da hab ich jetzt irgendwie falsch gedacht.
    Sorry. Du kannst den Thread meinetwegen auch löschen.
     
    Zitieren Zitieren
  4. 27.04.10 18:46 #4
    Maik Tutorials.de Gastzugang
    Zitat Zitat von Fantasmo Beitrag anzeigen
    Du kannst den Thread meinetwegen auch löschen.
    Warum das denn?

    Kein Grund, hier gleich zu trollen.

    mfg Maik
     
    Zitieren Zitieren
« Input Field und Input Submit gleiche Breite geben? | div(s)webseite zentrieren »

Ähnliche Themen

  1. Wenn "include" verwendet wird hab ich keine "body" Ansicht mehr
    Von solala123 im Forum PHP
    Antworten: 12
    Letzter Beitrag: 07.11.10, 19:51
  2. preg-match gibt immer "0" zurück, auch wenn es "1" sein müsste
    Von alexbot im Forum PHP
    Antworten: 7
    Letzter Beitrag: 09.04.10, 20:57
  3. Links in iFrames IMMER "global" laden? (Wie bei target="_top")
    Von HAL im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 25.06.08, 14:17
  4. "IsValid" bleibt immer auf "false"
    Von Saber im Forum .NET Archiv
    Antworten: 8
    Letzter Beitrag: 03.02.04, 23:31
  5. <meta name="robots" content="noindex"> Nähere Fragen
    Von Avariel im Forum HTML & XHTML
    Antworten: 1
    Letzter Beitrag: 08.10.03, 16:42