Antworten auf deine Fragen:
Neues Thema erstellen

CSS Code für nen Footer

M

michisa86888

Nicht mehr ganz neu hier

Hallo weiss jemand wie ich den Code in CSS schreibe für nen footer.
Soll immer 100% breit sein (witdh: 100%??) und immer ganz unter auf der Seite sein ( so ca. 2cm hoch)
Kann mir jemand helfen??
Danke für eure Hilfe
MFG michisa86888
 

A

Antr4ks

Nicht mehr ganz neu hier

AW: CSS Code für nen Footer

So in etwa?

#footer {
background-color:#00051C;
border-top:1px solid #FF9600;
bottom:0;
color:#FFFFFF;
overflow:hidden;
position:fixed;
text-align:center;
width:100%;
height:2cm;
}
 
H

hubspe

display:schwarzgelb;

AW: CSS Code für nen Footer

Antr4ks schrieb:
So in etwa?

#footer {
background-color:#00051C;
border-top:1px solid #FF9600;
bottom:0;
color:#FFFFFF;
overflow:hidden;
position:fixed;
text-align:center;
width:100%;
height:2cm;
}
Zum Vergrößern anklicken....

ganz bestimmt nicht so! :rolleyes:

Eine dafür zuverlässige und weit verbreitete Technik ist Foot Sticker Alt

cm ist eine für das Web absolut ungeeignete Maßeinheit, weil sie absolut ist.
Blockelemente werden immer so breit wie es geht, deshalb muss man da oft nix angeben.
 
puur

puur

Nicht mehr ganz neu hier

AW: CSS Code für nen Footer

keine ahnung wie du das jetzt meinst.. man köntne folgendes tun:

CSS:
HTML: 
/*************************************************************/
/************************__RESET__****************************/
/*************************************************************/

 * html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
 pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

/*************************************************************/
/*************************************************************/
/*************************************************************/

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
}

#index {
    height: auto !important;
    height: 100%;
    min-height: 100%;
    background: black;
}

#page {
    min-height: 100%;
    margin: 0 auto;
    overflow: hidden;
    background: green;
    padding-bottom: 30px; /* Höhe vom Footer */
    position: relative;
}

#footer {
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 0;
    background: red;
}

index.php
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="default.css" />
    <title>My Photos</title>
</head>

<body>
    <div id="index">
        <div id="page">

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br /><br />
            
        </div>
        
    </div>
    <div id="footer">Footer</div>
</body>
</html>

OODER :

Index.php
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="default.css" />
    <title>My Photos</title>
</head>

<body>
    <div id="index">
        <div id="page">

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br /><br />
            <div id="footer">Footer</div>
        </div>
        
    </div>
    
</body>
</html>
 
M

michisa86888

Nicht mehr ganz neu hier

AW: CSS Code für nen Footer

@
ja das trifft es schon fast. will nur noch das der footer unten an der seite klebt. so wie du es gezeigt hast klebt er immer unten am bildschirm egal wie lang die seite ist. (der footer scollt mit)
MFG
 
saila

saila

Moderatorle

AW: CSS Code für nen Footer

Hi,

das mit fixed funktioniert nicht korrekt. Das geht mit zwei Boxen. Die erste Box hat ein overflow: scoll oder auto und die zweite Box stellt den Footer dar und ist über diesem Weg Bottom und fixed. In der ersten Box wird dann der restliche Inhalt platziert.
 
A

Antr4ks

Nicht mehr ganz neu hier

AW: CSS Code für nen Footer

hubspe schrieb:
ganz bestimmt nicht so! :rolleyes:

cm ist eine für das Web absolut ungeeignete Maßeinheit, weil sie absolut ist.
Zum Vergrößern anklicken....

Sicher? Ich war eigentlich der Meinung ihn richtig verstanden zu haben :rolleyes:

Und das mit der Zentimeter-Angabe ist mir durchaus bewusst, das sollte auch nur der Funktionalität dienen, der Threadersteller hätte diesen Wert sicher noch angepasst.
 
saila

saila

Moderatorle

AW: CSS Code für nen Footer

Antr4ks schrieb:
Sicher? Ich war eigentlich der Meinung ihn richtig verstanden zu haben :rolleyes:

Und das mit der Zentimeter-Angabe ist mir durchaus bewusst, das sollte auch nur der Funktionalität dienen, der Threadersteller hätte diesen Wert sicher noch angepasst.
Zum Vergrößern anklicken....
Auch wenn du die Fragestellung richtig verstanden hast, so verwendet man als Maßeinheit innerhalb CSS auf keinen Fall cm sondern px oder em bzw. %.
 
Ernasina

Ernasina

Nicht mehr ganz neu hier

AW: CSS Code für nen Footer

Wirklich sicher bin ich mir nicht was du eigentlich haben willst aber vllt hilft dir ja das weiter.
So erst einmal der css code...
HTML: 
/* Footer */
		#Footertr       { background-image:url(dein Bild am besten ein .png Bild) ; width:100%; height:40px; }
		.footer			{ color: #FFB959; text-align:left; width: 100%;  padding-left: 27%; clear:both}
		#footer a		{ color: #FFB959; }
		#footer	p		{ color: #FFB959; margin: 0; padding: 0 18px 10px; }
		#footer li		{ display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }

und nun die HTML einbindung:
HTML: 
			<p id="footer">Hier kannst du ja noch irgentwelche zusatz infos reinpacken!</p>

Noch mal nebenbei bemerkt es würde nicht schaden wenn due folgendes grundsätzlich auf deiner Seite einbaust.

<!---
Wir distanzieren uns hiermit ausdrücklich
von allen Inhalten und der Gestaltung
aller gelinkten Seiten auf unserer dieser
gesamten Website inkl. aller Unterseiten
--->


MfG
 
M

michisa86888

Nicht mehr ganz neu hier

AW: CSS Code für nen Footer

Also hab jetzt den Footer aber er klebt immer am unteren Bildschirmrand. Will ihn aber am unteren Seitenrand. Weiss jemand wo der Fehler liegt. Ausserdem finde ich auf meiner Seite keinen Scollbalken zum runterscollen.
Hier mal die CSS und die HTML Datei

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"/>
    <meta name="description" content="Zisch Klack Wegg Hobby Fussballmannschaft"/>
    <meta name="keywords" content="Fleischwangen" />
    <meta name="author" content="Michael Schmid" />
    <link rel="shortcut icon" href="favicon.ICO" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="style/style.css" media="screen" />
    <title>Zisch Klack und Wegg</title>
</head>


<body>

<div id="framecontentLeft">
<div class="innerhalb">
<center><img src="http://www.psd-tutorials.de/modules/Forum/images/logo.jpg" width="119" height="100" /></center>
<ul id="Navigation">
  <li><a href="index.html">Home</a></li>
    <li><a href="geschichte.html">Geschichte</a></li>
    <li><a href="mannschaft.html">Mannschaft</a></li>
    <li><a href="termine.html">Termine</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="http://artyhuette.ar.funpic.de/index.php">Fotos</a></li>
    <li><a href="gästebuch.html">Gästebuch</a></li>
    <li><a href="impressum.html">Impressum</a></li>


  </ul>
</div>
</div>

<div id="framecontentRight">
<div class="innerhalb">
<a href="http://www.nic.de.vu" target="_blank">
<img border="0" src="http://www.nic.de.vu/banner/b100x100.gif" alt="de|nic|vu - Kostenlose Domains für alle!"></a></div>
</div>

<div id="framecontentTop">
<div class="innerhalb">
<center><img src="http://www.psd-tutorials.de/modules/Forum/images/zkw.jpg" width="650" height="100" /></center>
</div>
</div>


<div id="maincontent">
<div class="innerhalb">
Hier entsteht die Webseite von ZISCH KLACK UND WEGG
</div>
</div>
<div id="footer">
</div>
</body>

</html>
CSS
Code: 
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontentLeft, #framecontentRight{
position: absolute; 
top: 0; 
left: 0; 
width: 200px; /*breite der linken box*/
height: 100%;
overflow: hidden;  
background-image: url(images/hintergrund.jpg); 
color: white;
}

#framecontentRight{
left: auto;
right: 0; 
width: 150px; /*breite der rechten box*/
overflow: hidden;
background-color: black;
color: white;
}

#framecontentTop{
position: absolute;
top: 0;
left: 200px; /*linke box breite*/
right: 150px; /*rechte box breite*/
width: auto;
height: 200px; /*höhe der oberen box*/
overflow: hidden; 
background-image: url(images/hinteroben.jpg); 
color: yellow;
}

#maincontent{
position: fixed; 
top: 200px; /*wert von oberen box*/
left: 200px; /*wert von linker box*/
right: 150px; /*wert von rechter box*/
bottom: 0;
overflow: auto; 
background: #33F;
}

.innerhalb{
margin: 15px; /*text usw abstand nach inner innerhalb der boxen*/
}

* html body{ /*IE6 hack*/
padding: 120px 150px 0 200px; /*werte  aller boxen*/
}


* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

* html #framecontentTop{ /*IE6 hack*/
width: 100%;
}

/*Navigation*/
ul#Navigation {
    top: 200px;
    position: absolute;
    width: 9em;
    margin: 0; 
    padding: 0.8em;
    border: 1px solid black;
    background-color: #53a6ea;
  }
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    width: 10em;
    padding-left: 0;
    padding-left: 0.8em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0.4em; 
    padding: 0;
  }

  ul#Navigation a {
    display:block;
    padding: 0.2em;
    text-decoration: none; 
    font-weight: bold;
    border: 1px solid black;
    border-left-color: white; 
    border-top-color: white;
    color: black; 
    background-color: blue;
  }
  * html ul#Navigation a {  /* Breitenangaben nur fuer IE */
    width: 100%;
    w\idth: 8.8em;
  }
  ul#Navigation a:hover {
    border-color: white;
    border-left-color: black; 
    border-top-color: black;
    color: white; 
    background-color: Blue;
  }
#footer {
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 0;
    background: blue;
}


Habs hier mal hochgeladen
http://zkw.piranho.de/
Damit ihr euch ein Bild machen könnt.
 
Zuletzt bearbeitet:
GaMbIt_

GaMbIt_

Noch nicht viel geschrieben

AW: CSS Code für nen Footer

Ja.. das ist eigentlich recht einfach ...
Du hast kein Element das sich größer ausdehnen kann als der Viewport des Browsers...

Ausserdem ist die Eigenschaft max-height nicht so ganz das Wahre...
Damit begrenzt Du die Höhe auf das Browserfenster ...

Ein lieber Kollege hat das mal in seinem Blog ausführlich beschrieben...
 
Ernasina

Ernasina

Nicht mehr ganz neu hier

AW: CSS Code für nen Footer

na und hat die etwas davon geholfen? Wenn nicht oder ganz generell kann man auch sehr sehr sehr viel über Google finden!! Es gibt viele seiten die sich mit css, html, java, php etc auseinander setzte und durchaus kompetent erklären und Beispiele geben..;)

Nicht das eure Hilfen nicht gut wären ganz im gegenteil! Es ist ein super beispiel um zu zeigen das es keine ultimative Lösung gibt denn jeder brauch es anders..am besten ist es einfach wenn man versucht es selbst zu lösen, denn genau in dem Moment lernst du ungeheuer viel!!!!:D
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 202 (Mitglieder: 6, Gäste: 196)
Robots: 1.052

Statistik des Forums

Themen
118.564
Beiträge
1.538.064
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben