das irst Letter-Element war nur zum Testen noch drin, und ich habs aus Versehen nicht rausgenommen... aber trotzdem danke für den Hinweis.
Bzgl. der divs nebeneinander, hab ich im Buch nachgelesen, dass dies wohl nicht gehen würde, weil dies nur Blöcke definiert, die dann hintereinander gezeigt werden (egal, was jetzt drin erscheint).
Ist so nicht richtig. Dazu verwendest Du eben die float-Anweisungen. Eben float:left oder float:right. Nach dem zugewiesenen Div sollte aber mit clear:both die floatoption aufgehoben werden.
Am besten Du schaust Dir mal fertige oder angehende Tutorials an. Da versteht man eher das zusammenspiel der vielen Attribiute und Formatierungen!
Nimm Dir ein Grundgerüst einer Beispielsseite her und experimentiere damit. Du wirst sehen, wie schnell man hinter einigen Kniffs oder Problemen kommt. ;O)
Ich schreibe aus Erfahrung.^^
http://css.talky.de
http://barrierefrei.e-workers.de/
http://www.css4you.de/
Nun wünsche ich viel Spaß beim Stöbern und Probieren.
gruß saffi
so... mensch bin ich bescheuert... zumindest teilweise:
<HTML>
<head>
<link href="css/css.css" rel="stylesheet" type="text/css">
</link>
</head>
<body>
<p>Hier ist dann der erste Text im Dokument eingetragen</p>
<div id="header">
<div id="header_logo_links">
<p>hier kommt das LOGO rein</p>
</div>
<div id="header_spacer">
<p>hier käme eine Spacer rein</p>
</div>
<div id="header_search">
<p>hier käme später das Suchfeld rein</p>
</div>
</body>
und css: body{
valign:center;
width:780px;
border=1px;
color:white;
background-color:black}
#header {
height:70px}
#header_logo_links {
background:red;
width:250px;
color:aqua;
align=LEFT}
#header_spacer {
background:green;
width:200px;
color:Fuchsia}
#header_search{
background:aqua;
width:400px;
color:red;
align:RIGHT}
kleine Probleme noch:
1.) ich hab dem Header die Höhe übergeben und dies dann in der Theorie vererbt an die eingebauten DIV's mit entsprechenden id's.
Mach ich es so, sind die Divs nur Zeilengroß, wie die Texte sind innerhalb der Divs... geb ich den einzelen Div/Id die Height vor, dann klappt es.
Wo ist da noch der Denkfehler?
2.) jetzt sind die Divs noch, wie ich vermutet hab untereinander... wo wird das Float eingebaut. im HTML oder in der CSS? Und wie meinst du das mit aufgehoben?
3.) Ihr dürft mich hauen... ja ich hab immer die # vergessen vor den id, daher wurde das Layout auch nicht umgesetzt... und ich hab immer gedacht, ich mach nen Denkfehler... ne richtig gedacht hab ich schon, nur falsch umgesetzt... und da keine Fehlermeldung wie beim Kompilieren von Programmiersprachen kommen (ja es wird nicht kompiliert sondern interpretiert) ist mir sowas natürlich nicht aufgefallen... mensch steht man auf dem Schlauch.
Ich hoffe, jetzt kann ich mich richtigen css-Problemen widmen... und davon kommen wohl auch noch genug ;-)
Danke üfr eure Hilfe
danke schon mal...
4 Fehler sind noch drin, die mach ich gleich raus.
aber das grundsätzliche Problem wg. den div-Blöcken ist damit noch nicht geklärt.
Hab das Float jetzt noch mal eingebaut... aber das ändert auch nicht wirklich viel... weil der Spacer da noch drin ist... der in den Center müsste... aber nicht geht
und was das float auflösen gemeint ist, ist auch noch nicht klar.
Danke aber bislang
richtig, div definiert einen block. (p beansprucht z.b. auch eine zeile) dem kannst aber mit
display:inline;
abhelfen.float auflösen ist hier ein schöner link:
http://www.andreas-kalt.de/webdesign/tutorials/float-theorie
funzt wenn unter das letzte floatende div z.b. noch ein div mit
clear:both;
setzt.(mag sich für dich stupide lesen, ist aber dafür da um dem browser wirklich .....ensicher mitzuteilen wie man das halt gern hätte)
so... mal wieder etwas weiter.
Damit ich immer nur ein bisschen Fehler suchen muss für einen Anfänger, mach ich immer nur div für div hintereinander eingefügt ;-)
css:
/*
HTML-Tags-Formatierungen
*/
body{
width:100%;
color:black;
background-color:white;
border:1px;
border-width:thin;
border-style:dashed }
/*
Grundlayouts
*/
#header {
height:70px;
cursor:pointer;
background-color:lime;
border:2px;
border-width:thin;
border-style:dotted}
#breadcrumbs {
height:25px;
cursor:none;
background-color:purple;
border:1px;
border-width:thin;
border-style:groove
}
/*
Elemente innerhalb der Grundlayouts
*/
#header_logo_links {
background:red;
width:250px;
color:aqua;
height:70px;
float:left}
#header_search{
background:aqua;
width:400px;
color:red;
height:70px;
float:right}
/*
allgemeines
*/
#whiteline {
width:100%;
height:2px;
clear:both
}
.text-shadow {
text-shadow: #ffffff 3px 3px 5px
}
und html:<HTML>
<head>
<link href="css/css.css" rel="stylesheet" type="text/css">
</link>
</head>
<body>
<div id="header">
<div id="header_and_spacer">
<div id="header_logo_links">
<p>hier kommt das LOGO rein</p>
</div>
<div id="header_search">
<p>hier käme später das Suchfeld rein</p>
</div>
</div>
</div>
<div id=whiteline"></div>
<div id="breadcrumbs">
<p>hier kommen dann später die breadcrumbs rein</p>
</div>
</body>
1. Frage: warum ist die whiteline nicht zu sehen, obwohl die 1, oder in anderen Tests auch mal 2 oder 3 px gross ist.2.) warum ist der text in breadcrumbs nicht innerhalb vom block / div... sondern bei mir wird er auf der unteren linie vom div angezeigt.
3.) ihr habt mal geschrieben, man muss nicht so verschachteln wie Tabellen... kann man das in diese Beispiel auch schon einhalten?
Danke euch
Bei sowas mach ich immer das betreffene Element ganz groß und bunt und wenn man es dann immernoch nicht sehen kann, dann schau ich ob ich mich verschrieben habe (oder ein Anführungszeichen vergessen habe oder sowas).
1. Frage: warum ist die whiteline nicht zu sehen, obwohl die 1, oder in anderen Tests auch mal 2 oder 3 px gross ist.
das liegt daran, dass der Absatz (<p>) typischerweise mit margin/padding vordefiniert ist. setz mal beides auf 0
2.) warum ist der text in breadcrumbs nicht innerhalb vom block / div... sondern bei mir wird er auf der unteren linie vom div angezeigt.
p{
margin:0;
padding:0;
}
dann siehts gut aus.
3.) ihr habt mal geschrieben, man muss nicht so verschachteln wie Tabellen... kann man das in diese Beispiel auch schon einhalten?
Das hast Du doch schon ganz gut hinbekommen. Du musst nur alles, was in einem div sein soll auch in dieses div reinschreiben und alles was nicht drin sein soll schreibst Du halt dahinter.
ok, das mit dem <p> hab ich in der css-Datei mal mit margin:0;padding:0 gefüllt. Jetzt geht's ;-) Danke dafür.
bzgl. der whiteline hab ich die height mal mit 20px oder so gefüllt, mal ohne clear:both, mal mit... egal, was ich mach, es wird nicht angezeigt.
irgendwo hab ich da noch nen Bug drin ;-)
« tabellencode erstellen | Brauche DRINGEND! Hilfe bei HomePage » | ||