Contenhintergrund

xeniox · 01.08.2010

Hallo,

mein Problem ist: Ich bekomme es nicht hin, dass der Contenthintergrund bis zum Fuss reicht. Siehe hier meinen screen.

http://www.myimg.de/?img=hilfe40f62.jpg

Wenn ich in der css beim Content- und Navibereit die Hintergrundfarbe eingebe, dann ist der rechte obere Teil überdeckt.
Ändere ich die Höhe, dann rutscht der Fuß ist unendliche.

/* text content links */

#sp1 {
width:560px;
height:500px;
background-color:#;
padding-left: 20px;
padding-right:20px;
padding-top: 20px;
padding-bottom: 30px;
text-align:justify;
font-size: 12px;
letter-spacing: 1px;
line-height: 125%;
font-family: "Trebuchet MS", arial, helvetica, verdana, tahoma, sans-serif;
color: #cab888;

}

/* text content rechts - hier navi */

#sp2 {
width:160px;
height:500px;
border-left:solid 0px #ffd800;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 10px;
padding-right:10px;
background-color:#;
}

Ich probiere schon eine ganze Zeit und habe auch versucht im im Netz schlau zu machen. Die meisten Seiten sind auf englisch und bei der Seite selfhtml komme ich auch nicht klar.

Kann mir jemand helfen ? Habt ihr einen Denkanstoß für mich wie ich das hinbekommen kann ?

Schon mal vielen Dank

Ladyan · 01.08.2010

AW: Contenhintergrund

wie hast du denn den Fuß an die beiden divs angeschlossen?

cebito · 01.08.2010

AW: Contenhintergrund

Warum gibst du überhaupt eine Höhe an? Dein Content befindet sich deswegen schon teilweise außerhalb des div. Überlass es ihm doch selbst, mit seinem Inhalt mitzuwachsen.

xeniox · 01.08.2010

AW: Contenhintergrund

@Ladyan
Hmmmm ich weiß nicht was du meinst

der Fuß wird auch in der css generiert.

@cebito
ich möchte gern, dass z.B. wenn wenig im Content steht--- dieser nicht in der Luft hängt. Ich meine der Fuß soll bei wenigem Text immer ganz unten stehen.

cebito · 01.08.2010

AW: Contenhintergrund

xeniox schrieb:
ich möchte gern, dass z.B. wenn wenig im Content steht--- dieser nicht in der Luft hängt. Ich meine der Fuß soll bei wenigem Text immer ganz unten stehen.

CSS Sticky Footer

xeniox · 01.08.2010

AW: Contenhintergrund

Oh das probier ich gleich einmal aus......

hoffentlich gelingt es mir

vielen Dank

PS: tja... wenn man weiß wie was heißt kann man auch auf die Suche gehen.

Hiiiiiiiiiiilllllllfeeeeeeeee lauf nicht weg ja ?
Ich habe den StickyFooter jetzt eingesetzt, auch darauf geachtet, dass nirgendwo margin steht nun habe ich den oberen Teil meiner HP, dann kommt lange lange nichts und dann irgendwann der Text der oben gestanden hat mit dem Fuss. Worauf muss ich denn noch achten ?
Muss ich evtl. auch in der html margin suchen ?

cebito · 01.08.2010

AW: Contenhintergrund

xeniox schrieb:
hoffentlich gelingt es mir

Hoff ich doch, wenn nicht gibts ja noch das Forum

xeniox schrieb:
Hiiiiiiiiiiilllllllfeeeeeeeee lauf nicht weg ja ?
Ich habe den StickyFooter jetzt eingesetzt, auch darauf geachtet, dass nirgendwo margin steht nun habe ich den oberen Teil meiner HP, dann kommt lange lange nichts und dann irgendwann der Text der oben gestanden hat mit dem Fuss. Worauf muss ich denn noch achten ?
Muss ich evtl. auch in der html margin suchen ?

Poste doch mal deinen kompletten code incl. css hier rein, dann kann man dir auch helfen. Noch besser wäre ein Link zur Seite, falls die schon irgendwo online ist.

xeniox · 01.08.2010

AW: Contenhintergrund

Ich möchte ja gar nicht, dass ihr für mich die Arbeit macht... nur vielleicht eine Hilfestellung, was ich alles falsch gemacht habe. Das währe sehr sehr nett.

Und schau bitte einmal.... die BG-Farbe läuft nicht mit

Dies ist nun mein wohl völlig vermasselter css-code

Code:

body
{
padding-top: 0px;  
padding-left: 0px; 
padding-right: 0px;
padding-bottom: 0px; 
background-color: #231d07; 
padding:0px;
background-image:url(images/bg-ganz-oben.jpg);
background-repeat:repeat-x;
background-position:50% 0%;
width:100%;
}


#top {
background-image: url(images/);
background-repeat: repeat-y;
height: 249px;
border-right: solid 0px #bbbbbb;
border-left: solid 0px #bbbbbb;
border-top: solid 0px #bbbbbb;
}




/* text in tabellen */

table,td {
font-size: 12px;
letter-spacing: 1px;
font-family: "Trebuchet MS", arial, helvetica, verdana, tahoma, sans-serif;
color: #cab888;
}




/* hauptgerüst */

#main {
border-right: solid 0px #F6B926;
border-left: solid 0px #F6B926;
}




/* text content links */

#sp1 {
width:560px;

background-color:#;
padding-left: 30px;
padding-right:40px;
padding-top: 30px;
padding-bottom: 30px;
text-align:justify; 
font-size: 12px;
letter-spacing: 1px;
line-height: 125%;
font-family: "Trebuchet MS", arial, helvetica, verdana, tahoma, sans-serif;
color: #cab888;

}


/* text content rechts - hier navi */

#sp2 {
width:160px;

border-left:solid 0px #ffd800;
padding-top: 20px; 
padding-bottom: 30px;
padding-left: 10px;
padding-right:10px;
background-color:#;
}





#fussb {
font: normal 11px verdana, sans-serif; 
color: #d6d6d6; 
padding: 2px;
height: 48px;
text-align: center;
background-color: #F6B926;
background-image:url(images/fuss.jpg);
}




/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* Du musst margin auf 0 fÃ¼r alle Elemente setzen und immer padding statt margin
fÃ¼r vertikale AbstÃ¤nde (top und bottom) verwenden, anderenfalls werden diese margin-
Werte zur GesamthÃ¶he addiert und der Footer wird zu weit nach unten geschoben, was
vertikale Scrollbalken im Browser erzeugt. */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 48px;}  /* Muss genau so hoch sein wie der Footer */

#footer {
    position: relative;
    margin-top: -48px; /* Negativer Wert der Footer-HÃ¶he */
    height: 48px;
    clear:both;
}

/* CLEAR FIX */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}

/* Bereich nicht fÃ¼r IE-mac Anfang \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* Bereich nicht fÃ¼r IE-mac Ende */





























/* menue  */

#menu1 a , #menu1 a:visited , #menu1 a:active {
display:block;
background-color:#;
color:#cab888;
font: normal 11x verdana, sans-serif;
font-size:11px;
line-height:11px;
height:11px;
text-decoration:none ;
padding-left:20px;
width:90%;
padding-bottom:5px;
padding-top:5px;
margin-bottom:0px;
background-image:url(images/button.gif);
background-repeat:no-repeat;
background-position: 0% 50%;
}

#menu1 a:hover{
background-color:transparent;
color:#ffd800;
text-decoration:none;
background-image:url(images/button2.gif);
}

#menu1 a span , #menu1 a:visited span{
color:#800000;
font-style:italic;
}
#menu1 a:hover span{
color:#000000;
}






/* allgemeine links im text */

a:link, a:visited, a:active{
text-decoration: none;
font-family: "Trebuchet MS", arial, helvetica, verdana, tahoma, sans-serif;
color:#cab888;
font-size: 12px;
letter-spacing: 1px;
line-height: 125%;
}

a:hover{ 
text-decoration: none;
background-color: #363d1b;
color: #cab888;
font-size: 12px;
letter-spacing: 1px;
line-height: 125%;
}




/* scrolleiste internet explorer ab vers.5.5 */

body{
scrollbar-arrow-color: #737b66; 
scrollbar-base-color: #F5F8F3;
scrollbar-highlight-color : #737b66; 
scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #e6e6e6;
}

und dies hier meine html-Seite

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="Urlaub, Urlaubsbilder, Bild, Bilder, Fotos, Urlaubsfotos, Photos, Urlaubsphotos, Reise, Reisen, Urlaubsreise, Urlaubsreisen, private Hompage">
<meta name="description"
content="homepage, dokument, webpage, page, web, netz" >
<title>Andrea und Jürgen Brand</title>


<link rel="stylesheet" href="format.css" type="text/css">
<link rel="stylesheet" type="text/css" href="anylinkcssmenu.css" />
<script type="text/javascript" src="anylinkcssmenu.js"></script>
<script type="text/javascript">

//anylinkcssmenu.init("menu_anchors_class") ////Pass in the CSS class of anchor links (that contain a sub menu)
anylinkcssmenu.init("anchorclass")
/***********************************************
* AnyLink CSS Menu script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/
</script>

</head>

<body>
<table align="center" width="100%"  cellspacing="0" cellpadding="0" border="0" height="249">
    <tr>
    <td width="780" valign="bottom" id="top" height="249">
    &nbsp;</td>
    </tr>
</table>
<!--ende top-->



<div align="center">



<table width="800" id="main" border="0" cellpadding="0" cellspacing="0">



    <tr>
    <td valign="top" id="sp1" width="560">

Ursprünglich hatten wir mit dieser Seite ja etwas anderes im Sinn, 
        aber mittlerweile haben wir es auf einige wenige Links und Bilder 
        reduziert.<br>
<br>
<br>
        Wir hoffen aber dennoch, dass diese Seiten gefallen.<p>Für Anregungen 
        und Vorschläge, aber auch Konstruktive Kritik sind wir jederzeit offen. 
        Diese kann selbstverständlich per mail über den Button &quot;Kontakt&quot; an uns 
        gesandt werden.<p>&nbsp;<p>Ansonsten bleibt uns nur zu sagen:<p>Wir wünschen viel Spaß beim Surfen auf unseren Seiten.<br>
<br>
&nbsp;<p>
<br>
        PS:<br>
        Über einen Eintrag in unser Gästebuch freuen wir uns natürlich auch</td>
<!-- ende inhalt-->
</td>


<td id="sp2" valign="top" style="height: 500px" width="168">

<div align="left">

<table align="left" width="100%" id="menu1"  border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="35">
&nbsp;</td>
</tr>
<tr>
<td>
<a href="index.html">Home</a></td>
</tr>
<tr>
<td>
<a href="index.html">über uns</a></td>
</tr>
<tr>
<td>
<a href="links-freunde.html">Freunde</a></td>
</tr>
<tr>
<td>
<a href="mailto:webmaster@jabra.de">Kontakt</a></td>
</tr>
<tr>
<td>
<a target="_blank" href="http://cgi03.puretec.de/cgi-bin/gb_shw?clsid=321eb6ef95e031dedf5683355b745baf">Gästebuch</a></td>
</tr>
<tr>
<td>
<a href="impressum.html">Impressum</a></td>
</tr>
<tr>
<td>
<a href="spiele.html">Spiele</a></td>
</tr>
<tr>
<td>
<a target="_blank" href="http://www.jabra.com/Sites/Jabra/DE-DE/pages/Home.aspx">
Jabra Headsets</a></td>
</tr>
<tr>
<td>
<!--1st anchor link and menu -->

<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Bilder</a></p>

                                                    
<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="harleys.html">Harleys</a></li>
<li><a href="http://www.cssdrive.com">vom Fliegen</a></li>
<li><a href="http://www.javascriptkit.com">Verwandtschaft</a></li>
<li><a href="http://www.codingforums.com">Malediven</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Miami</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Nilkreuzfahrt</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Kreuzfahrt 2007</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Nagoya</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Chicago</a></li>
</ul>
</div>
</td></td>
</tr>
<tr>
<td height="15">
</td></td>
</tr>
<tr>
<td bgcolor="#A37036" width="90%">
<img src="http://www.wetter.com/home/woys/woys.php?38d64310bc00a11694c990844e27583f,C,1,WORLD,31755" border="0" alt=""></td>
</tr>

</table>

</div>

</td>
</tr>
<tr>
<td colspan="2" id="fussb"  width="796">

<font face="Verdana">hghghgh</font></td>
</tr>


</table>

</div>
<div id="wrap">

    <div id="main" class="clearfix" style="width: 1261px; height: 48px">

    </div>

</div>

<div id="footer">

</div>
</body>

</html>

cebito · 01.08.2010

AW: Contenhintergrund

Autsch, da ist ja alles durcheinandergewürfelt - das du da überhaupt nicht mehr weißt, wo was hinsoll kann ich gut nachempfinden. Da is nich mal eben schnell was "repariert", hier hilft nur der absolute Neuanfang, so hart das auch klingen mag.

xeniox · 01.08.2010

AW: Contenhintergrund

Ok, vielen dank für deine Mühe. Dann wird es wohl nichts mit der Seite... ich weiß gar nicht wo ich neu anfangen soll. Ich hätte gerne Dein Wissen

Ein schönes restliches Wochenende.

Ladyan · 01.08.2010

AW: Contenhintergrund

Ich denke mal, das Hauptproblem ist, dass du Tabellenlayout mit CSS vermischt hast.

Versuch doch mal, die Seite aus reinen Divs aufzubauen und die Tabellen loszuwerden. Dann dürften wir der Sache ein ganzes Stück näher kommen.

Lg

xeniox · 01.08.2010

AW: Contenhintergrund

Ich werde mich dann wohl einlesen müssen... ich bin doch ein Noob und verstehe so viele Dinge nicht.. und das mit den div´s ist für mich wie eine ausländische Sprache. Vielleicht finde ich ja im Netz eine freeware-Seite die ich für meine HP nutzen kann. Muss mal suchen. Dann kann ich mir mal eine css-Datei die ok ist ansehen

Danke dir.

LG
XenioX

cebito · 01.08.2010

AW: Contenhintergrund

Mal ganz auf die Schnelle, Tabellenlos und valide, verschiedene Sachen müsstest du natürlich noch per css stylen und die css auslagern, hab ich jetzt nicht extra gemacht, damit ich nicht zwischen den Dateien switchen muss. Und die Hauptnavi ebenfalls als Liste anlegen...

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="keywords" content="Urlaub, Urlaubsbilder, Bild, Bilder, Fotos, Urlaubsfotos, Photos, Urlaubsphotos, Reise, Reisen, Urlaubsreise, Urlaubsreisen, private Hompage" />
<meta name="description" content="homepage, dokument, webpage, page, web, netz" />
<title>Andrea und Jürgen Brand</title>

<style type="text/css">

* {margin:0;padding:0;}

html, body, #wrap {height: 100%;}

html{background:#231D07 url(bg2.png) top center repeat-y;}

body{background:url(bg1.png) top center no-repeat;}

body > #wrap {height: auto; min-height: 100%;}

#top {height:249px;}

#main {padding-bottom: 48px; width:777px;
   margin-left:auto;
   margin-right:auto;}

#content {float:left; width:580px; padding:10px;}

#navi{float:right; width:157px; padding:66px 10px 10px 10px;}

#footer {
   position: relative;
   width:777px;
   margin-top: -48px;
   height: 48px;
   clear:both;
   background:url(bg3.png) repeat-x;
   margin-left:auto;
   margin-right:auto;
}

.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

.clearfix {display: inline-block;}

* html .clearfix { height: 1%;}
.clearfix {display: block;}
</style>

</head>
<body>

   <div id="wrap">

      <div id="top">

      </div>

      <div id="main" class="clearfix">

      <div id="content">

        <p>Ursprünglich hatten wir mit dieser Seite ja etwas anderes im Sinn,
                aber mittlerweile haben wir es auf einige wenige Links und Bilder
                reduziert.</p>
        <p>Wir hoffen aber dennoch, dass diese Seiten gefallen.</p>

        <p>Für Anregungen
                und Vorschläge, aber auch Konstruktive Kritik sind wir jederzeit offen.
                Diese kann selbstverständlich per mail über den Button &quot;Kontakt&quot; an uns
                gesandt werden.</p>
        <p>Ansonsten bleibt uns nur zu sagen: </p>
        <p>Wir wünschen viel Spaß beim Surfen auf unseren Seiten.</p>

        <p>PS: </p>

        <p>Über einen Eintrag in unser Gästebuch freuen wir uns natürlich auch freuen</p>


      </div> <div id="navi">

      <ul>
<li><a href="harleys.html">Harleys</a></li>
<li><a href="http://www.cssdrive.com">vom Fliegen</a></li>
<li><a href="http://www.javascriptkit.com">Verwandtschaft</a></li>
<li><a href="http://www.codingforums.com">Malediven</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Miami</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Nilkreuzfahrt</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Kreuzfahrt 2007</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Nagoya</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Chicago</a></li>
</ul>


      </div>

      </div>

   </div>

   <div id="footer">inhalt

   </div>

</body>
</html>

Die Hintergrundbilder müssten für dieses Beispiel dann ungefähr so aussehen...