HTML & CSS Div Problem

nicovod · 10.11.2008

Hallo,
ich hab ein sagen wir kleines Problem

Ich möchte gerne lieber meine Seiten mit Divs darstellen anstatt von Tables. Nur ich hab das Problem in der Verbindung von CSS und HTML.

Beispiel (HTML Datei)

HTML:

<html>
<head> 
<title>Beispiel</title>
</head>
<body> 
<div id="header">
</div>
</body>
</html>

Beispiel (CSS Datei)

HTML:

header { background-image: url(bilder/header.jpg); width:500px; height:100px; }

So, wenn ich nun also das Div "Header" in der HTML datei erstelle wird an dieser stelle aber nicht wie ich in der CSS Datei angeben habe der Header angezeigt.

Wo liegt das Problem ? Ich denke ich habe es falsch verstanden oder ?

Vielen Dank im Vorraus!

xxsiv · 10.11.2008

AW: HTML & CSS Div Problem

nicovod schrieb:
Beispiel (CSS Datei)

HTML:

header { background-image: url(bilder/header.jpg); width:500px; height:100px; }

Es sollte lediglich die # vor header fehlen

HTML:

#header { background-image: url(bilder/header.jpg); width:500px; height:100px; }

Universalattribute werden mit einer vorgestellten # definiert.
HTML-Attribute kannst du einfach so ansprechen, z.B. body ( width:500px; ).

nicovod · 10.11.2008

AW: HTML & CSS Div Problem

achso danke! Top, und was hat oft der punkt vor der css klasse zu tun also zum beispiel .body ?

Tattoomaus78 · 10.11.2008

AW: HTML & CSS Div Problem

Mit dem id-Attribut werden Elemente eindeutig bezeichnet und dürfen nur einmal pro Dokument verwendet werden. Eine Klasse hingegen ist keine eindeutige Bezeichnung, sondern vielmehr eine Zuordnung zu einer Gruppe und kann mehrmals verwendet werden.

also:
css
#header {} = id

html
<div id="header"></div> -> darf nur einmal im html-dokument verwendet werden

css
.spaltelinks {} = class

html
<div class="spaltelinks></div> -> kann mehrfach im html-dokument verwendet werden

genaure Erklärung schau hier -> Die globale Struktur eines HTML-Dokuments

nicovod · 10.11.2008

aso okay danke! Jetzt habe ich es verstanden.

Irgendwie klappt das ganze einfach nicht, ich hab das komplette layout hier mal auf meinen webspace hochgeladen ihr könnt es euch gerne mal runterladen ist eh nur testweise, ich denke ihr werdet verstehen wie das ganze eigentlich dargestellt werden sollte, tuts aber nicht.

(hier könnt ihrs runterladen)

hier könnt ihr sehen wie es aussehen sollte : (soll erstmal net großartig gut aussehen nur test

(footer hab ich noch nicht eingefügt)

Herr_D · 10.11.2008

AW: HTML & CSS Div Problem

html

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" />
<title>Layout</title>
</head>
<body>
<div id="drumrum">
        <div id="header">header</div>
        <div id="sidebarleft">left</div>
        <div id="sidebarright">right</div>
        <div id="content">content</div>
        <div id="clear"></div>
</div>
</body>
</html>

css

Code:

body {
background-color: #000000;
color:#fff;
text-align:center; /* Zentrierung für alte Browser */ }

#drumrum {
width: 811px;
text-align: left;
margin:0 auto;
}

#header {
background-image: url(Bilder/header.png);
width: 811px;
height: 184px;
background-repeat:no-repeat;
}



#sidebarleft {
background-color: #242424;
width: 21px;
height: 765px;
background-repeat:repeat-y;
float:left;
}

#sidebarright {
background-color: #242424;
widht: 177px;
height: 765px;
background-repeat:repeat-y;
float:right;
}

#content {
background-color: #242424;
height: 765px;
background-repeat:repeat-y;
}

#clear {
clear:both 
}

Du solltest auf Fehler achten, da fehlten ein paar Sachen (px z.B.)

Ach ja, den Text kannste natürlich löschen, ist nur für mich zum gucken...

sokie · 10.11.2008

AW: HTML & CSS Div Problem

Du musst einfach etwas sorgfältiger schreiben.
in der CSS Datei sind einige Fehler (Mal das px vergessen,mal wihdt statt width etc.
in der Html Datei ist das was eigentlich im <body>(hier!)</body> stehen sollte irgendwo zwischen head und body...
Um so eine Seite zentriert darzustellen kann man einfach einen div (meinetwegen mit der id="aussen") um das ganze legen, dem die feste Vreite geben, und sein margin auf auto setzen.

nicovod · 10.11.2008

AW: HTML & CSS Div Problem

ok ich danke euch, nur ehrlich gesagt ich hab mir mehrmals den code angeschaut und nirgends Rechtschreibfehler gefunden, ich glaub ich sollte vielleicht mal einen übersichtlicheren Editor benutzen

ich hätte da jetzt noch so ein paar fragen, in der css datei von sokie findet man diese stelle in der style.css

HTML:

*{
    padding: 0;
    margin: 0;
}

was soll das bewirken ? ich wüsste jetzt kein element was * anspricht.

HTML:

#wrapper{
    width: 820px;
    margin: auto;
}

wrapper ist ja das drumherum, aber hier frage ich mich wie du auf die breite von 820px kommts, die seite ist ja 811 px breit, hast du da einfach eine zufällige breite genommen ?

Vielen Dank für eure Hilfe.

Tattoomaus78 · 10.11.2008

AW: HTML & CSS Div Problem

nicovod schrieb:
HTML:

*{ padding: 0; margin: 0; }

was soll das bewirken ? ich wüsste jetzt kein element was * anspricht.

das setzt sämtliche padding- und marginangaben im gesamten Dokument erstmal auf 0 damit du sicher sein kannst, dass jedes element wirklich die von dir eingegebenen Werte hat

wrapper ist ja das drumherum, aber hier frage ich mich wie du auf die breite von 820px kommts, die seite ist ja 811 px breit, hast du da einfach eine zufällige breite genommen ?

die Breite vom wrapper kannst du auf 811px runtersetzen...ich tippe mal darauf, dass sokie da ne zufällige Breite genommen hat...mE kriegt der wrapper die Breite, die das Layout haben soll...so mache ich es zumindest immer...

nicovod · 10.11.2008

AW: HTML & CSS Div Problem

ah okay danke, ich dachte wrapper wär alles um der seite, aber ist also nur wies auch übersetzt heißt eine hülle

ich hätte noch eine frage, ich hab schon ganz css4you durch geschaut aber finde nich das was ich suche, wie kann ich einen text verschieben ? Also es handelt sich nur um eine kleine Größe .
hier könnt ihr euch das ganze mal ansehen, oben "Willkommen auf NamederSeite" möchte ich nur ein bisschen niedriger bekommen so das es in der mitte von diesem grauen balken oben liegt.
http://www.cofilew.de/media/bilder/2008/11/desktop.jpg (Screenshot der Seite)

Tattoomaus78 · 10.11.2008

AW: HTML & CSS Div Problem

nicovod schrieb:
wie kann ich einen text verschieben ?

indem du die Innenabstände zum Rand mittels padding definierst...

gib dem Headertext noch einen padding-top Wert

zB.

<div id="header">
<div class="text">Herzlich Willkommen</div>
</div>

css:
.text {
padding-top: 5px;
}

nicovod · 10.11.2008

AW: HTML & CSS Div Problem

Super danke

Ich hab leider wieder ein Problem..

wenn ich jetzt per CSS das Aussehen der Links veränder mit :

a:link {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a:visited {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a:active {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a:hover {
font-size: 15px;
color: #FFF;
text-decoration: underline;

hab ich das problem das ja alle links so verändert werde, wie kann ich auch spezielle kategorien für links machen ? ich find einfach nicht dazu hab auch schon freunde gefragt aber nichts kam da wirklich bei raus...

Weil ich halt in der Navigation etwas Größere Links möchte und im Footer kleinere mit ner anderen farbe...

Vielen Dank euch allen!

Herr_D · 10.11.2008

AW: HTML & CSS Div Problem

Du solltest dich wirklich mal etwas mehr mit den Grundlagen von css beschäftigen

um unterschiedlich farbige Links zu erzeugen benutzt du .class sprich Klassen für die jeweiligen Links... die class-Angeben baust du in den Link-Tag ein

Beispiel:

Code:

a.weissblau:link {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.weissblau:visited {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.weissblau:active {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.weissblau:hover {
font-size: 15px;
color: #00F;
text-decoration: underline; }



a.weissgruen:link {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.weissgruen:visited {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.weissgruen:active {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.weissgruen:hover {
font-size: 15px;
color: #0FF;
text-decoration: underline; }

HTML:

<a href="linkadresse" class="weissblau">klick mal wird blau</a>

<a href="linkadresse" class="weissgruen">klick mal wird grün</a>

Edith sagt: Ach ja, für jede einzelne .class kannst du völlig unterschiedliche css-Angaben definieren... (Größe, Farbe, Schriftart usw. usf.)

nicovod · 10.11.2008

AW: HTML & CSS Div Problem

Ah Super danke, ja im CSS Teil hatte ich das genauso! Nur hab dann in html das ganze per <span class> gemacht deswegen hats nicht funktioniert danke!

Herr_D · 10.11.2008

AW: HTML & CSS Div Problem

wenn du span einsetzt, dann muß das nach dem link-Tag kommen

<a href="link"><span class="name">Text</span></a>

Ist aber eigentlich nicht nötig, wenn der Link durchgehend gleich aussehen soll...

Wenn du im Linktext etwas anders gestalten willst, dann setzt du span ein

<a href="link" class="blau">Das ist ein Link <span class="gruen">mit</span> Pepp</a>

nicovod · 10.11.2008

AW: HTML & CSS Div Problem

So vielen Dank nochmal das Design ist sozusagen fertig! Ich habe dazu einen Artikel in meinen Blog verfasst dort werdet ihr auch nochmal namentlich erwähnt! Also vorbeischauen und lesen dort könnt ihr auch das "Fertige Design" sehen.

Vielen Dank!

/edit : Würde mich natürlich auch über Kommentare eurerseits freuen!

sokie · 10.11.2008

AW: HTML & CSS Div Problem

Tattoomaus78 schrieb:
die Breite vom wrapper kannst du auf 811px runtersetzen...ich tippe mal darauf, dass sokie da ne zufällige Breite genommen hat...mE kriegt der wrapper die Breite, die das Layout haben soll...so mache ich es zumindest immer...

richtig getippt, und doch...
ich mache den wrapper gern ein paar px grösser, weil bei den floats in alten IEs schnell mal das Layout zerlegt wird, wenn die nicht min. 3px Luft haben.
Dafür habe ich aber (entgegen dem ersten Entwurf) alle floats 'left' gefloatet, damit sie auch bei einem etwas breiteren wrapper nicht nach rechts aussen verspringen.

Tattoomaus78 · 10.11.2008

AW: HTML & CSS Div Problem

sokie schrieb:
richtig getippt, und doch...
ich mache den wrapper gern ein paar px grösser, weil bei den floats in alten IEs schnell mal das Layout zerlegt wird, wenn die nicht min. 3px Luft haben.
Dafür habe ich aber (entgegen dem ersten Entwurf) alle floats 'left' gefloatet, damit sie auch bei einem etwas breiteren wrapper nicht nach rechts aussen verspringen.

aha..ok...danke schön...wieder was gelernt

nicovod · 11.11.2008

AW: HTML & CSS Div Problem

*schäm* problem augetaucht, (ich denke aber das letze xD) Das Design ist nicht wirklich dynamisch, also der content bereich und die sidebar erstreckt sich nicht nach unten sobald mehr inhalt reinkommt

Dem Conten / Sidebar / footer habe ich background-repeat: repeat-y; zugewiesen, ändert tut sich aber nichts, in tables hatte das ganze immer so funktioniert bei mir ich weiss jetzt nicht ob das in divs anders geht, finde auch per google oder auf css4you nichts dazu.

hab grad nochmal was weitergeschaut auf css4you, und position: static; hilft dem ganzen nicht oder hab ich da was falsch verstande? da stand passt sich dem textfluss an...

Ich sollte mir mal ein Buch dazu kaufen, css4you war bis jetzt nicht wirklich eine hilfe...

Tattoomaus78 · 11.11.2008

AW: HTML & CSS Div Problem

zeig mal die aktuelle Version von deinem CSS

in der Version von sokie hat content, rightsidebar und leftsidebar ne feste Höhe von 765px, das liest zB. der FF auch eben als feste Höhe...der IE sollte das jedoch automatisch erweitern wenn mehr Text kommt...

wenn noch nicht geschehen ändere das mal um in

min-height: 765px /*moderne Browser*/
*height: 765px /*IE*/