Was mache ich falsch??

HTML_Neuling · 15. Juli 2009

Ich wollte die Website mit css wie beschrieben (<a class="postlink" href="http://www.html-seminar.de/pro_css.htm">http://www.html-seminar.de/pro_css.htm</a>) nachbauen...

So jetzt habe ich die anleitubg befolgt.Nun folgendes zwischen dem Kopfbereich und der steuerung iste es weiß und nicht abschlißend wie beschrieben... Was mache ich falsch???

<a class="postlink" href="http://img339.imageshack.us/img339/1146/neubitmap.png">http://img339.imageshack.us/img339/1146/neubitmap.png</a>

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>Titel</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)" />




    <style type="text/css">
    <!--
      * {
  margin:0;
  padding:0;}
    #kopfberreich {
     background: url(test/indextestbild2.gif) no-repeat left top;
     height:150px;
    }
    #Steuerung {
        background-color:#393939;
    }
    #schatten {
        background-color:green;
    }
    #inhalt {
        background-color:blue;
    }










    -->
    </style>
</head>




<body>
         <div id="kopfberreich"  >
         <p> test </p>
         </div>




         <div id="Steuerung">
         Steuerung
         </div>




         <div id="schatten">
         Hier kommt der schatten sp&auml;ter
         </div>




         <div id="inhalt">
         <p>Hier kommt sp&auml;ter der Inhalt</p>
         </div>










</body>
</html>

Alles anzeigen

Danke für eure Mithilfe

Carsten

lauras · 16. Juli 2009

Schau mal ob

indextestbild2.gif

wirklich 150px hoch ist.

Das ist die Höhe, die du für den kopfbereich definierst. Wird die durch das Hintergrundbild nicht ausgefüllt, bleibt der Rest weiß.

Greetz
Laura

Axel · 16. Juli 2009

Ist wahrscheinlich die Lösung, was Laura schon sagte.

Schritt für Schritt Videos für genau die Aufgabe gibt es unter:
http://www.youtube.com/view_play_list?p=D08919661927D875

Gruß
Axel

HTML_Neuling · 16. Juli 2009

Ersteinmal danke für eure sehr schnelle und gute hilfe.So jetzt habe ich das nächste Problem und zwar habe ich ein grafik wo auch eine überschrift direkt eingefügt ist...

Wie kann ich diese korrekt d.h. im vollem darstellen?
<a class="postlink" href="http://img223.imageshack.us/img223/1538/neubitmapm.png">http://img223.imageshack.us/img223/1538/neubitmapm.png</a>

Wäre echt nett... Schönen Abend noch

Freu mich schon Carsten

lauras · 16. Juli 2009

Wenn du dir Überschrift mit einem Grafikprogramm auf das Bild draufmachst (eher unsinnvoll, wenn doch Bild nciht im Hintergrund, sondern per img einbinden, da es dann Inhalt enthält), das Bild oder die Schrift so in der Breite verkleinern, dass alles drauf ist.

Zweite Methode:

Bild als Hintergrund, Überschrift mit h1 einbinden.
Dann solltest du h1 definieren, z.B.:

h1 {
font-size: 25px;
font-family: ... usw.

Dann musst du eine Schriftgröße wählen, die passt - fertig!

Liebe Grüße
Laura

HTML_Neuling · 16. Juli 2009

Hallo ich habe, ihr dürft raten schon wieder ein problem und zwar zeigt der browser mein kopfbild nicht mehr an obwohl ich die pfade usw. alle richtig angegeben habe...

Selbst wenn ich alle schritte aus dem tutorial befolge passiert nichts...
Gestern war das nicht so!

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>Titel</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)" />




    <style type="text/css">
    <!--
      * {
  margin:0;
  padding:0;}
    #kopfberreich {
     background: url(test/indextestbild2.gif) no-repeat left top;
     height:150px;
    }
    #Steuerung {
        background-color:#393939;
    }
    #schatten {
        background-color:green;
    }
    #inhalt {
        background-color:blue;
    }










    -->
    </style>
</head>




<body>
         <div id="kopfberreich"  >
         <p> test </p>
         </div>




         <div id="Steuerung">
         Steuerung
         </div>




         <div id="schatten">
         Hier kommt der schatten sp&auml;ter
         </div>




         <div id="inhalt">
         <p>Hier kommt sp&auml;ter der Inhalt</p>
         </div>










</body>
</html>

Alles anzeigen

<a class="postlink" href="http://img339.imageshack.us/img339/9664/testsyx.jpg">http://img339.imageshack.us/img339/9664/testsyx.jpg</a>

Danke schon mal!

Carsten

lauras · 16. Juli 2009

Hm. Komisch, schau mal, ob dein Bild wirklich die Endung *.gif hat!

Und probier es mal in mehreren Browsern.

HTML_Neuling · 16. Juli 2009

Ja es hat die Endung gif

Es funktioniert in keinem browser(MF,IE)

Ich verzweifele...

lauras · 16. Juli 2009

Dann guck, ob die Groß- und Kleinschreibung stimmt.

Ansonsten pack mal alle Dateien in einen Ordner und gib nur die Dateinamen an.

Wenn das nicht klapp, weiß ich auch nicht.

HTML_Neuling · 16. Juli 2009

Danke erstmal hat jetzt alles geklappt...

Eine frage hab ich noch wie verschieb ich die links in der steuerung in die mitte??

Muss ich das in css oder html machen??

Danke schonmal...

Carsten

lauras · 16. Juli 2009

Du hast eine horizontale Steuerung, oder?

Da die Links dann gefloated sind, ist das etwas schwierig.

Schau mal hier:

http://www.ohne-css.gehts-gar.net/0063.php

Dort wird das ganz gut erkärt, funktioniert auch.

LG

HTML_Neuling · 16. Juli 2009

und noch eine frage :roll:

wie kann ich denn einstellen das die homepage einen abstand nach oben unten und zu den seiten wie auf <a class="postlink" href="http://www.ohne-css.gehts-gar.net">http://www.ohne-css.gehts-gar.net</a> ohne das zwischen den boxen(header Inhalt usw...) lücken enstehen??

Carsten

lauras · 16. Juli 2009

z.B.,

indem du dir einen solchen Wrapper wie auf der Seite bastelst.

Dem gibst du dann margin-Werte, fertig.

LG
Laura

HTML_Neuling · 16. Juli 2009

ich bin es schon wieder

Ich wollte jetzt meinen html hintergrund farbig machen und nun das ...

Code

*{
  margin:0;
  padding:0;
  background-color:blue;




}







#wrapper{
    width:950px;
    background:#f00;
margin:0px auto;




}







#kopf{ background-image: url(test/indextestbild.gif);
height:90px; }













#steuerung{
background-color: orange;
}
li{ display: inline;
    border-right: 1px solid black;
    padding-left:1em;
    padding-right:1em;
    margin-right:1em;
}










#inhalt{
    background-color: white;
      padding-left:2em;
      padding-right:2em;
}

Alles anzeigen

<a class="postlink" href="http://img520.imageshack.us/img520/9319/test2m.jpg">http://img520.imageshack.us/img520/9319/test2m.jpg</a>

danke schon mal lauras :wink:

Carsten

Ich hab doch noch eine wie kann ich die inhaltsbox größer machen damit auch wenn nichts drin steht die box angezeigt wird???

lauras · 16. Juli 2009

1. Frage:

* gilt für alles.
Wenn du nur einen farbigen Hintergrund willst, muss du die background-color-eigenschaft body zuordnen.

2. Frage:

entweder, indem du ihm eine definierte höhe gibst (wenn der inhalt jedes mal ungefähr gleich ist) oder mit

min-height: 200px;

(Beispiel)

Geht aber glaub ich nicht in allen Browsern.

Liebe Grüße
Laura

PS: Nur der CSS Code nützt meist nüscht xD

Was mache ich falsch??

Jetzt mitmachen!

Teilen