Geschrieben von the-red-dragon am 22.09.2005, 17:03

wer keine lusst hat immernoch mit frames zu arbeiten da sie zu unflexiebel sind und noch viele weitere

nachteile haben sollte einfach css benutzen...

die vorteile liegen auf der hand...das größte is, dass css sich an die grafikeinstellund eines jeden users

anpasst, wodurch pixelgenaues anordnen von grafiken auf einer hp möglich wird

zu css muss noch erwähnt werden die einzelnen "boxen" wieich sie weiterhin bezeichnen werde, verhalten

sich ähnlich wie frames, nur mit dem unterschied, dass man ihnen noch einige zusatzoptionen geben kann

und nu..wie es geht!

das ist erstmal die grundbasis am besten schreibt man den text zwischen den </head> und dem <body> tags

zumindest muss er vor eurer eigendlichen webseite stehn

<style type="text/css"> //sagt das nun ein css script verwendet
wird
<!--
.logo { background-color:#000000; //das .logo benennt die erste "box" der
punt davor MUSS da stehn
float: left //float sagt, wie sich die "box"
erhalten soll (float: left bewirkt dass
die box immer am linken rand der seite
klebt)
}
.top { background-color:#000000;
height: 320px; //height gibt die höhe der "box" an
}
.navbar { background-color:#000000;
float: left;
clear: both; //clear: both bewirkt, dass sich die
"box" nich an der vorherigen
"box" orientiert, wie ormalerweise,
sondern, dass sie eben wieder vom
nullpunkt ausgeht
}
.body { background-color:#000000; //wenn ihr wie hier keine größe angibt,
also weder höhe noch
breite, dann ist die "box" flexiebel
und die größe hängt vom inhalt
(z.B. dem text oder der grafik)ab
}
.footer { background-color:#000000;
float: right;
clear: left //clear: left bewirkt, dass sich die
"box" nur am linken rand neu orientiert
}
-->
</style>

das waren jetzt die grundeinstellungen für die 5 "boxen" eine für das logo, eine für überschrifften, eine

zur navigation eine für den eigendlichen seiteninhalt und eine für den footer eben

so kommen wir nun dazu die "boxen" mit inhalt zu füllen =)

<div class="logo"> //bei div class kommt dann eben der name
der box, welche mit inhalt gefüllt
werden soll, aba diesmal ohne den "."
<img src="images/logo.gif" alt="">
</div> //dann wird die "box" wieder geschlossen

<div class="top" align="center">
<font color="white"><h1>Welcome</h1></font>
</div>

<div class="navbar">
<img src="images/navbar.gif">
</div>

<div class="body" align="center">
<font color="white"><h1>der seitentext</h1></font>
</div>

<div align="right" class="footer"> //was ihr in die "boxen" tut ist
egal..grafiken text...was ihr wollt
<img src="images/footer.gif" alt="">
</div>

ich hoffe ich konnte euch mit diesem tutorial weiterhelfen, ich selbst habe sehr lange nach einem tutorial

gesucht, welches diese thema verständlich erklärt und auch dass, wodurch ich es dann verstanden habe,

warmir nich gut genug und ich hoffe ich kann hiermit einigen die ewige suche in google erspaaren

viel spaß und bleibt lima-city imma treu =)

ps.: wer will kannsich gern mal meine hp anschauen, da wird auch diese css angewendet...damit ihr das auchmal in aktion seht die seite is

http://www.the-red-dragon.de.tt

Bewertung Anzahl
6
9,1 %
1 Bewertungen
5
36,4 %
4 Bewertungen
4
36,4 %
4 Bewertungen
3
18,2 %
2 Bewertungen