CSS will nicht.

Ok, nun hab ich mich nun hab ich ferien und wollte dieses verfluchte CSS zeugs lernen, von dem hier immer alle faseln.

ich hab mir ein paar tut durchgelsen, ein Buch aus der Bibliothek (CSS für Dummies oder so....) und was versucht.

aber funktioniert überhaupt NICHTS.

ich schaffs nicht, ein div zu formatieren, sodass es funktioniert -.-

hier kommt der code.

eine seite, die eine css datei importiert.
darin:

Code:

---

<div id="header">
 hier kommt was hin
 </div>

---

jetzt der stylesheet

Code:

---

header {
                width: 500px;
                height: 200px;
                background: #CCCCCC;
                border: thick #000000;
                color: #0066FF
                }

---

angezeigt wird nichts außer dem rahmen für das div tag in dreamweaver.

die normalen dinger, wie body, p etc kann ich formatieren, aber so ein div tag stellt sich stur......

sagt mir bitte was ich falsch mache, oder ich muss meine Seiten mein Leben lang mit Tabellen designen >.>

Du verwechselst da etwas:
header { ... } formatiert <header>...</header>
div#header { ... } formatiert <div id="header">...</div>
Dann sollte das klappen ;)

Dreamweaver stinkt im CSS Bereich - da muss man CSS können, sonst gibts komischen Dreamweaver Code.

So, zu Deinem Code:

Code:

---

<div id="header">
 hier kommt was hin
 </div>

---

wird zu

Code:

---

<div class="header">
 hier kommt was hin
 </div>

---

und

Code:

---

header {
                width: 500px;
                height: 200px;
                background: #CCCCCC;
                border: thick #000000;
                color: #0066FF
                }

---

wird zu

Code:

---

.header {
                width: 500px;
                height: 200px;
                background: #CCCCCC;
                border: thick #000000;
                color: #0066FF
                }

---

Dennis

es gibt nen header tag???
das hab ich noch nie gehört.

so natürlich auch klar, was da falsch war -.-

ich machs einfach mal als
mein_header :D

dennis:

wieso class und ned id?

ich hab bei diesem css zen garten dings geschaut, die machen das auch mit id's^^

und was soll der punkt?


danke euch beiden.

Freierfall

edit:
strange.
ohne den punkt vor dem namen in der css datei macht ers nicht.
wofür ist der?
macht der das zu ner 'class' oder was?^^


edit:
wie zentriere ich son div dings relativ zum bildschirmrand? align scheint der ned zu kennen....

Die Dinge, die du im CSS-Stylesheet für .name definiert hast, werden auf alle HTML-Elemente angewandt, bei denen ein class="name" definiert ist. Diejenigen, die im CSS für #name definiert sind, werden auf das Element mit der id="name" angewandt. Das, was du im CSS z.B. für a definierst, wird dann eben auf alle Links angewandt.

Was die Zentrierung angeht ... nun, da kannst du ganz normal mit HTML arbeiten, also <div align="center"> schreiben. Mit CSS sähe das in etwa so aus:

HTML-Code:

---

.meine_div
{
  position: absolute;
  width: 400px;
  margin: 0px; margin-left: -200px;
  left: 50%;
}

---

Ist also schon etwas komplizierter, daher bietet sich die HTML-Variante doch eher an ;)

Zitat:

---

Zitat von Freierfall

es gibt nen header tag???
das hab ich noch nie gehört.

---

Den gibt es auch nicht wirklich. In den meisten Browsern würde das ber trotzdem funktionieren ;)

Zitat:

---

Zitat von Freierfall

wieso class und ned id?

ich hab bei diesem css zen garten dings geschaut, die machen das auch mit id's^^

---

IDs verwendet man für Style-Definitionen, die nur einmal verwendet werden. Es darf nur ein Element mit der selben ID in einem HTML-Dokument geben. Klassen können aber beliebig verwendet werden.

Zitat:

---

Zitat von Freierfall

und was soll der punkt?

---

Der Punkt sagt dem Parser, dass was nun folgt ein Klassenname ist. Du machst es somit im Prinzip zu einer Klasse. Da kannst auch Elementspezifische Klassen verwenden, also zB:

HTML-Code:

---

div.bla {
...
}

---

Das gilt dann nur für <div>s mit dieser Klasse, aber nicht für andere Elemente wie zB <a>

Zitat:

---

Zitat von Freierfall

edit:
strange.
ohne den punkt vor dem namen in der css datei macht ers nicht.
wofür ist der?
macht der das zu ner 'class' oder was?^^

---

Siehe oben ;)

Zitat:

---

Zitat von Freierfall

edit:
wie zentriere ich son div dings relativ zum bildschirmrand? align scheint der ned zu kennen....

---

Versuchs mal mit

HTML-Code:

---

margin: 0px auto;

---

Ok, neue Frage:
wie kann ich ein Div element, das innerhalb eines anderen ist, immer an den unteren Rand des Div's zwingen?
Mit margin gehts nicht, da er den abstand nicht vom oberen rand des elementes nimmt, sondern von ende des textes, hier z.b. den headers.


außerdem hab ich nochn zweites porb:

firefox zeigts nicht so an, wie ich möchte. und wie der ie, der die automatische vorschau in dreamweaver stellt.....

die divs haben ne hintergrund farbe.
wenn der inhalt im ie darüber hinausgeht, wird die farbe bis zum ende fortgesetzt, in firefox hört die farbe auf.


seitentext:

Code:

---

<div class="gesamtinhalt">
 
  <div class="mein_header">a</div>
  <div class="headernavi">a</div>
 
 
  <div class="navi"> 
    * Ut sagittis tempus mauris. <br />
    * Nulla congue leo id nisi.<br />
  </div>
       
       
        <div class="eigentlicher_inhalt">

 Lorem ipsum dolor sit amet, </div>
 
 
</div>

---

der stylesheet:

Code:

---

.gesamtinhalt {
                width:60%;
                height:100%;
                /*border:thin;
                background:#FFFFFF;*/
                margin: 0px auto;
                }
               
.mein_header {
                height: 170px;
                background: #CCCCCC;
                color: #0066FF;

                }
               
.headernavi {
                height: 30px;
                background: #CCCCCC;
                color: #0066FF;

                }
                       

                       
               
.navi {
                background:#FFFFCC;
                float:left;
                width:20%;
                height:250px;
                }
               
.eigentlicher_inhalt {
                background: #CCFFCC;
                float:right;
                width:80%;
                height:350px;
                }

---

Problem 1:
Versuche es mal so:

HTML-Code:

---

position: relative;
bottom: 0px;

---

Problem 2:
Benutze min-height bzw. min-width. Eventuell brauchst du auch ncoh eine Browserweiche ;)