BlackBoard » Design, Programmierung & Entwicklung » Webdesign » CSS CSS Problem » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag Druckvorschau | An Freund senden | Thema zu Favoriten hinzufügen
Neues Thema erstellen Antwort erstellen
Zum Ende der Seite springen CSS Problem
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
phlox81 phlox81 ist männlich
Bote des Lichts und Moderator


images/avatars/avatar-2264.jpg

Dabei seit: 19.10.2002
Beiträge: 3.028
Herkunft: Irgendwo im Nirgendwo

CSS Problem       Zum Anfang der Seite springen

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

__________________
Intelligenz ist eine Illusion des Menschen

phlox81.de | codenode.de
08.04.2008 14:32 phlox81 ist offline E-Mail an phlox81 senden Homepage von phlox81 Beiträge von phlox81 suchen
LX LX ist männlich
El Comandante en Jefe


images/avatars/avatar-2290.gif

Dabei seit: 25.11.2001
Beiträge: 5.372
Herkunft: Berliner Bronx

Achtung       Zum Anfang der Seite springen

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).

__________________
JS-Games.de - Misled Scripting Skills Gone Mad | Meine Filmkritiken | Urban Photography
Kommt mal in den IRC-Channel: irc.eu.freenode.net | Port 6667 | #blackboard

"Ever tried. Ever failed. No matter.
Try again. Fail again. Fail better."
- Samuel Beckett

09.04.2008 00:22 LX ist offline E-Mail an LX senden Homepage von LX Beiträge von LX suchen
phlox81 phlox81 ist männlich
Bote des Lichts und Moderator


images/avatars/avatar-2264.jpg

Dabei seit: 19.10.2002
Beiträge: 3.028
Herkunft: Irgendwo im Nirgendwo

Themenstarter Thema begonnen von phlox81
      Zum Anfang der Seite springen

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;
}


__________________
Intelligenz ist eine Illusion des Menschen

phlox81.de | codenode.de
09.04.2008 19:08 phlox81 ist offline E-Mail an phlox81 senden Homepage von phlox81 Beiträge von phlox81 suchen
AtKiN
Aufsteiger


Dabei seit: 25.07.2007
Beiträge: 32

      Zum Anfang der Seite springen

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

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von AtKiN: 11.04.2008 10:27.

11.04.2008 10:26 AtKiN ist offline E-Mail an AtKiN senden Beiträge von AtKiN suchen
Witja Witja ist männlich
Aufsteiger


images/avatars/avatar-2177.gif

Dabei seit: 25.06.2003
Beiträge: 27
Herkunft: Kasachstan

      Zum Anfang der Seite springen

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
11.04.2008 11:42 Witja ist offline E-Mail an Witja senden Beiträge von Witja suchen
phlox81 phlox81 ist männlich
Bote des Lichts und Moderator


images/avatars/avatar-2264.jpg

Dabei seit: 19.10.2002
Beiträge: 3.028
Herkunft: Irgendwo im Nirgendwo

Themenstarter Thema begonnen von phlox81
      Zum Anfang der Seite springen

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

__________________
Intelligenz ist eine Illusion des Menschen

phlox81.de | codenode.de
11.04.2008 15:30 phlox81 ist offline E-Mail an phlox81 senden Homepage von phlox81 Beiträge von phlox81 suchen
Baumstruktur | Brettstruktur
Gehe zu:
Neues Thema erstellen Antwort erstellen
BlackBoard » Design, Programmierung & Entwicklung » Webdesign » CSS CSS Problem

Forensoftware: Burning Board 2.3.6, entwickelt von WoltLab GmbH