Beiträge von DiiDii

DiiDii

Perfekt =)
Dankeschöön

DiiDii

Also ich hab folgendes Problem:
Ich mach meine Navi mit Bildern... weiß nicht ob das modern ist oder ob es bessere Lösungen gibt. Wenn ich die Bilder mit folgendem Code einfügte, ist zwischen jedem Bild eine kleine Lücke... die soll weg... wie mach ich das?

Hier der Code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>
    <title>Die Betten Fanpage</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="style.css" type="text/css" rel="stylesheet" />
</head>




<body>




<div id="seitenbereich">




    <div id="header">




    </div>




    <div id="navi">
         <img src="./images/links.jpg"/>
         <img src="./images/startseite.jpg"/>
         <img src="./images/geschichte.jpg"/>
         <img src="./images/bettformen.jpg"/>
         <img src="./images/bettgroessen.jpg"/>
         <img src="./images/kontakt.jpg"/>
         <img src="./images/impressium.jpg"/>
         <img src="./images/rechts.jpg"/>
    </div>




    <div id="inhalt">




    </div>







</div>
</body>
</html>

Alles anzeigen

und der CSS Code:

Code

html, body
{
    background-image: url(./images/background.jpg);
    height: 100%;




}




#seitenbereich {
    width: 1000px;
    height: 900px;
    margin: 0px auto;




}




#header {
    width: 1000px;
    height: 251px;
    background-image: url(./images/header.jpg);




}




#navi {
    height:35px;




}




#inhalt {
    background-image: url(./images/inhalt.jpg);
    width: 1000px;
    height: 706px;
    margin-bottom: 20px;
}

Alles anzeigen

Wenn einer helfen kann wäre ich sehr dankbar =)

Mfg Hummeropfer

DiiDii

Perfekt =)
Dankeschööön :mrgreen:

DiiDii

Also ich habe ein Bild als Link benutzt.
Jetzt ist aber ein Rand um das Bild. Da ich den wegbekommen möchte frage ich euch, wie ich das schaffe.
Zur Verdäutlichung habe ich noch ein Bild angehängt:

[Blockierte Grafik: http://s5.directupload.net/images/100823/qc4q4tig.jpg]
Das eher dunkelrötliche soll weg... nur ich weiß nicht wie ich das schaffe...

Über jede Antwort bin ich froh
Mfg DiiDii

DiiDii

Ja klar es stimmt zwar noch nicht zu 100 % aber es passt =)

DiiDii

Man war das eine schwere Geburt
Danke für eure Hilfe und euer Durchhaltevermögen

Danke

DiiDii

Also ich hab jetzt die beiden Codes verglichen... der einzigste Unterschied zwischen meiner Fußzeile und deiner ist, dass ich "background-color" habe. Außerdem habe ich alle html, body befehle von dir zusammengefasst. War das mein Fehler?

Also hier nochmal mein CSS Code:

Code

* {
      padding: 0;
      margin: 0;
   }




html, body
{
        height: 100%;
        text-align: center;
        min-width: 55.1em;
        background-color: black;
        font-family: sans-serif;




}
h1 {
    text-align:center;
    border-bottom-style: dotted;
    border-width:4px;
    border-color:#4C4C4C;




}







h4 {
    background-color:#999999
}










#seitenbereich {
         min-height: 100%;
         height: auto;
         height: 100%;
         margin: 0 auto -4em;
         width: 1000px;
         text-align: left;
         background-color: #333333;
}




#middle {
  margin: 0 200px 0 13em;
  background-color:#999999;
  text-align:center;
  margin-top:19px;
}




#infokasten {
  float:right;
  width: 12em;
  background-color:#333333;
  text-align:center;




}




#fusszeile, {
    background-color:#999999;
    width:1000px;
    border-top:2px solid black;
    text-align:center;
    height: 4em;
    clear: both;
}







#navi {
   float:left;
   width:200px;
   text-align:left;
   margin-top:10px;
   margin-bottom:10px;




 }




 #navi ul {
   list-style:none;
 }




 #navi li {
   background-color:#999999;       /* Hintergrundfarbe   */
   border-top:1px black solid;    /* Rahmenfarbe Auflistungpunkt oben */
   border-left:25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom:1px red solid;   /* Rahmenfarbe unten  */
   border-right:2px blue solid;   /* Rahmenfarbe unten  */
   margin-top:10px;
   padding-top:8px;
   padding-bottom:8px;
   padding-left:8px;
   padding-right:8px;
 }







#kopfzeile {
    height: 200px;
    width: 1000px;




}










#navi a:link    { color:blue;   text-decoration:none; }
#navi a:visited { color:black;  text-decoration: none; }
#navi a:focus   { color:green;  text-decoration:overline; }
#navi a:hover   { color:red;    text-decoration:none; }
#navi a:active  { color:orange; text-decoration:underline; }

Alles anzeigen

DiiDii

ok... hab mal dein tutorial genommen... es klappt jetzt alles außer das mit der fußzeile... sie wird bei meiner website nicht richtig angezeigt... da sieht man dann nur den text... ist das normal? oder hab ich was vergessen?

zum anschauen: <a class="postlink" href="http://zocker006.zo.funpic.de/">http://zocker006.zo.funpic.de/</a>

DiiDii

sooo jetzt ist mir mal das mittelding egal... denn es gibt
ein noch größeres problem ... im firefox wird die fußzeilfarbe nicht angezeigt (siehe <a class="postlink" href="http://zocker006.zo.funpic.de/">http://zocker006.zo.funpic.de/</a> ). Wieso ist das so und wie kann man das ändern?

DiiDii

Ja kopieren ist leicht gesagt... ich muss ja auch wissen, was bei mir das "nonfooter" und "content" ist... und wenn ich den seitenbereich vor der fußzeile beende, ist die fußzeile breiter wie sonst und nach rechts versetzt...

DiiDii

Also so sieht es gerade aus:

[Blockierte Grafik: http://s10.directupload.net/images/100617/temp/2ah64272.jpg]

wie bekomme ich jetzt den mittleren teil runter? ich habe es mit dem code von deiner seite versucht aber damit ging es nicht... was genau muss ich ändern?

hier nochmal der CSS Code:

Code

html, body
{
font-family: sans-serif ;
color: black;
text-align: center;
background-color:black;
height:100%;
margin: 0;
padding: 0;




}
h1 {
    text-align:center;
    border-bottom-style: dotted;
    border-width:4px;
    border-color:#4C4C4C;




}







h4 {
    background-color:#999999
}










#seitenbereich {
  width: 1000px;
  background-color:#333333;
  text-align:left;
  margin: 0 auto;
  height:100%;
  position: relative;
  min-height: 100%;
  height: auto
}










#middle {
  margin: 0 200px 0 13em;
  background-color:#999999;
  text-align:center;










}




#infokasten {
  float:right;
  width: 12em;
  background-color:#333333;
  text-align:center;




}




#fusszeile, {
    clear: both;
    background-color:#999999;
    border-top:2px solid black;
    text-align:center;
    height:25px;
    margin-top: -25px;
    position: absolute;
    width: 100%;
    bottom: 0;




}







#navi {
   float:left;
   width:200px;
   text-align:left;
   margin-top:10px;
   margin-bottom:10px;




 }




 #navi ul {
   list-style:none;
 }




 #navi li {
   background-color:#999999;       /* Hintergrundfarbe   */
   border-top:1px black solid;    /* Rahmenfarbe Auflistungpunkt oben */
   border-left:25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom:1px red solid;   /* Rahmenfarbe unten  */
   border-right:2px blue solid;   /* Rahmenfarbe unten  */
   margin-top:10px;
   padding-top:8px;
   padding-bottom:8px;
   padding-left:8px;
   padding-right:8px;
 }







#kopfzeile {
    height: 200px;
    width: 1000px;




}










#navi a:link    { color:blue;   text-decoration:none; }
#navi a:visited { color:black;  text-decoration: none; }
#navi a:focus   { color:green;  text-decoration:overline; }
#navi a:hover   { color:red;    text-decoration:none; }
#navi a:active  { color:orange; text-decoration:underline; }

Alles anzeigen

Und der Quellcode:

HTML

<!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" xml:lang="de" lang="de">




<head>
    <title>Zocker 06 - Startseite</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="style.css" type="text/css" rel="stylesheet" />
</head>




<body>







<div id="seitenbereich">




    <div id="kopfzeile">
        <img src="kopfzeile.jpg" />
    </div>










    <div id="navi">




                        <ul>
                            <li><a href="index.html">Startseite</a></li>
                            <li><a href="gruendung.html">Die Gr&uuml;ndung</a></li>
                            <li><a href="mannschaft.html">Die Mannschaft</a></li>
                            <li><a href="fans.html">Unsere Fans</a></li>
                            <li><a href="turnier.html">Das Turnier</a></li>
                            <li><a href="statistiken.html">Statistiken</a></li>
                            <li><a href="links.html">Links</a></li>
                            <li><a href="kontakt.html">Kontakt</a></li>
                            <li><a href="partner.html">Partner</a></li>
                        </ul>




    </div>




    <div id="infokasten">
                    <br /><h4>Unsere Sponsoren:</h4>




    </div>










    <div id="middle">
                    <h1>Zocker 06</h1>
                    <b>Herzlich Willkommen bei den Zockern aus Dahenfeld.<br />
                    Hier erfahren Sie alles &uuml;ber uns.  <br />
                    Viel Spa&szlig; =)</b>
    </div>







    <div id="fusszeile">
        Lob oder Kritik?













    </div>




</div>
</body>
</html>

Alles anzeigen

DiiDii

Also manchmal kann sich ein Mensch dumm anstellen oder? xDD
Naja ich bin gerade das beste beispiel gewesen
Danke lauras =) Ich habs geschafft die Fußzeile nach unten zu versetzen...

Soweit so gut... Jetzt fehlt mir nur noch eins... das mittelstück (hellgrau) soll bis zur fußzeile nach unten rutschen... ich werds mal versuchen bin aber nicht sicher ob ichs schaffe...

€dit: nach langem herumprobieren hab ichs leider noch nicht geschafft... brauche mal wieder eure hilfe =)

Nächstes Problem: Beim FIrefox wird die Fußzeile nicht angezeigt und mein Datum/Uhrzeit wird nicht in der Mitte angezeigt... um zu verstehen was ich meine --> <a class="postlink" href="http://zocker006.zo.funpic.de/">http://zocker006.zo.funpic.de/</a>

DiiDii

Zitat von "lauras"

In dem Tut was ich dir geposted habe steht doch der Code drin?

Ja schon, aber das Problem ist, ich weiß nicht was bei mir der "nonfooter" ist und wo das hinkommt in der HTML datei...
Sry aber ich versteh das nicht :oops:

DiiDii

mmhh bei mir will dass nicht... kann mir einer sagen, was ich genau machen muss? Also wo muss "height:100%" überall hin? Evtl. Falls es nichts ausmacht, könntet ihr es ja einmal erklären, indem ihr alles bei mir einfügt (erst aber wenn ichs gar nicht kapiere weil ich wills verstehen )...
Vielen Dank schonmal für eure antworten =)

DiiDii

Also Footer Stick hab ich schon probiert, aber ich kapier das leider nichit... ich hab mehrere Seiten durchgelesen aber iwie will das nicht funktionieren... kann mir einer erklären (ggf. mit code) wie das funktioniert? Wäre sehr nett

DiiDii

Zitat von "Basiii"
Soll der Inhalt mitwachsen oder soll nur die Fußzeile unten sein?

Nur Fußzeile unten:
Code
div#footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 50px;
   background-color: pink;
   border-top: 1px solid lightred;
}
Code
 
      <div id="footer"></div>
   
Edit:

Habe mich verlesen, soll nachrücken, da weiß ich gerade nicht wie das heißt aber NeoAramis kann dir da auf jeden Fall weiterhelfen.

Danke schonmal =)

Also das "herzlich willkommen" usw. soll schon da oben bleiben, nur der hell-graue teil soll bis zur fußzeile nach unten nachrücken... die fußzeile soll dann unten an den browser "festgenagelt" werden...

Allerdings wenn ich jetzt den code von dir noch nemme kommt das hier raus:
[/img]

Das Ergebnis soll nacher so sein: (bearbeitet)

[/img]

DiiDii

Also ich habe folgendes Problem:

Ich möchte meine Website in die länge ziehen. In dem Bild sieht man es am besten:

[Blockierte Grafik: http://s1.directupload.net/images/100615/qy3ibcdp.jpg]

Leider weiß ich nicht wie ich dass machen muss weil ich HTML und CSS erst seit wenigen Tagen hier auf der Seite gelernt habe =)

Mfg DiiDii

Beiträge von DiiDii

Bilder aneinander machen

Bilder aneinander machen

Link unsichtbar machen

Link unsichtbar machen

Fußzeile unten an Browser heften

Fußzeile unten an Browser heften

Fußzeile unten an Browser heften

Fußzeile unten an Browser heften

Fußzeile unten an Browser heften

Fußzeile unten an Browser heften

Fußzeile unten an Browser heften

Fußzeile unten an Browser heften

Fußzeile unten an Browser heften

Fußzeile unten an Browser heften

Fußzeile unten an Browser heften

Fußzeile unten an Browser heften

Fußzeile unten an Browser heften