BlackBoard (http://www.black-board.net/index.php)
- Design, Programmierung & Entwicklung (http://www.black-board.net/board.php?boardid=55)
-- Webdesign (http://www.black-board.net/board.php?boardid=19)
--- CSS CSS Problem (http://www.black-board.net/thread.php?threadid=23297)

Geschrieben von phlox81 am 08.04.2008 um 14:32:

  CSS Problem

Hab auf meiner HP ein kleines CSS Problem.

Ich habe einen Header, einen footer und dann dazwischen links ein Menü und rechts den Content.
Das ganze wird meistens erst sichtbar, wenn man das Fenster verkleinert.

Nun ist der Footer leider nicht immer ganz glücklich positioniert. So das er teilweise den Content überdeckt. Genau das will ich aber nicht.
Ich will einfach nur, das der Footer immer unten die Seite abschließt, aber darüber all der nötige Content ist. Keine Scrollbars, nichts verdeckt.

Das ist zur Zeit die CSS Definition des Footers:
code: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

#footer
{
padding:10px;
position:fixed;
bottom:0px;
left:0px;
font-size:30px;
text-align:left;
height:30px;
line-height:30px;
width:100%;
background-color:#FF3333;
border:0px solid #606060;
}


phlox


Geschrieben von LX am 09.04.2008 um 00:22:

Achtung

Vorausgesetzt, du nimmst das text-align: center mal raus (wird sowieso nicht benötigt), sollten folgende Styles für die 4 Bereiche ausreichen:

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:

#header {
  height: 100px;
  width: 100%;
  background-color: #f33;
}

#header img {
  margin: 10px; /* statt padding im #header */
}

#menucontainer {
  float: left;
  width: 200px; /* feste Breite, sonst überfließen Navigation und Inhalt bei schmalen Fenstern */
  padding-bottom: 50px; /* unten soviel Padding wie Footer hoch ist */
}

#content {
  margin-left: 200px; /* wenn Inhalt länger ist als Navigation, dann nicht drumrumfließen */
  padding-bottom: 50px; /* unten soviel Padding wie Footer hoch ist */
}

#footer {
  padding: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 30px;
  line-height: 30px;
  background-color: #f33;
}


Mit Paddings solltest du sparsam umgehen und sie vermeiden, wenn du mit relativen Breiten (z.B. 100%) arbeitest. Padding wird auf die Breite immer draufgerechnet, 100% Breite mit 10px Padding sind also breiter als dein Browserfenster und verursachen eine horizontale Scrollbar, die keiner braucht (und die unschön aussieht).


Geschrieben von phlox81 am 09.04.2008 um 19:08:

 

Danke das macht schon mal vieles besser.

Allerdings ist der Footer jetzt beim IE7 nicht mehr unten, sondern "unter" dem Content.

Ich hätte aber gerne, das der Footer immer ganz unten ist.

So bekomm ich ihn zwar nach unten, aber er ist dann ganz links in der Ecke.

code: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

#footer {
  padding: 10px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  font-size: 30px;
  line-height: 30px;
  background-color: #f33;
}


Geschrieben von AtKiN am 11.04.2008 um 10:26:

 

also ich habe nicht wirklich ahnung davon,

aber wenn du mit posotion:absolute arbeitest
und dann überhaupt keine werte eingibst is das doch
nicht Sinn der Sache oder ? versuche doch mal mit
dem Wert left rumzuspielen. Sowohl im Plus als auch
im Minus bereich.

smile


Geschrieben von Witja am 11.04.2008 um 11:42:

 

Du brauchst eigentlich nur den Doctype richtig hinzuschreiben dann wird deine Website beim IE7 richtig dargestellt.

HTML

code: 
1:

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


->
code: 
1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


IE7 Nachher





Optional

Falls du validen Code schreiben willst. ^^

code: 
1:

<style>body { margin:0px;  }</style>


muss so aussehen
code: 
1:

<style type="text/css">body { margin:0px;  }</style></head><body>


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

<div id="button">
			 <a href="/index.php?kat_id=1&lang=0" class="menu">[ Unternehmung ]</a><br>
  </div>  
			 <div id="button">
			 <a href="/index.php?kat_id=2&lang=0" class="menu">[ Service ]</a><br>
  </div>  
			 <div id="button">

			 <a href="/index.php?kat_id=3&lang=0" class="menu">[ Technologie ]</a><br>
  </div>  
			 <div id="button">
			 <a href="/index.php?kat_id=14&lang=0" class="menu">[ Kontakt ]</a><br>
  </div>



Hier musst du class einsetzen, ids mit gleichen Namen solltest du nämlich nicht benutzen.

code: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

<div class="button">
			 <a href="http://codenode.de/index.php?kat_id=1&amp;lang=0" class="menu">[ Unternehmung ]</a><br>
  </div>  
			 <div class="button">
			 <a href="http://codenode.de/index.php?kat_id=2&amp;lang=0" class="menu">[ Service ]</a><br>
  </div>  
			 <div class="button">
			 <a href="http://codenode.de/index.php?kat_id=3&amp;lang=0" class="menu">[ Technologie ]</a><br>
  </div>  
			 <div class="button">
			 <a href="http://codenode.de/index.php?kat_id=14&amp;lang=0" class="menu">[ Kontakt ]</a><br>
  </div>




CSS

code: 
1:

#button


in ".button" ändern
code: 
1:

.button


Geschrieben von phlox81 am 11.04.2008 um 15:30:

 

Zitat:
Original von Witja
Du brauchst eigentlich nur den Doctype richtig hinzuschreiben dann wird deine Website beim IE7 richtig dargestellt.

HTML

code: 
1:

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


->
code: 
1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


IE7 Nachher


Hm, das war ja einfach smile Jetzt funktionierts auch im IE7.

Für den Rest fehlt mir gerade leider die Zeit. Aber ich werd die Seite wohl eh bald noch mal anpassen müssen, da ich dann einige neue Seiten online stelle.

phlox


Forensoftware: Burning Board 2.3.6, entwickelt von WoltLab GmbH