css

Eure Probleme (wenn's sein muss auch persönliche ^^)

Moderator: Zersteudler

User avatar
Thrall Bombadil
JYPD-Member
Posts: 818
Joined: 10.July.2005, 20:52:42
Location: Daheime
Contact:

css

Post by Thrall Bombadil »

Nein nicht das spiel sondern css das mit hmtl dingst bilderchen erscheinen lässt. Mal ne frage kennt sich da jmd aus?
ich will nämlich ein Disign machen allerdingst bin ich zu faul mir gute tutorials zu suchen...deswegen hab ich mir bis jetzte nur quellcodes von anderen disign abgeguckt um daraus schlauer zu werden.
So meine Frage Wie bau ich die css datei richtig in die html datei ein oder wie kann ich dann mit welchen befehlen meine bilder positionieren?
Bei mir verschieb sich irgendwie immer alles.
Das disign will ich für eine Lanparty die evtl auf meiner schule stattfinden wird verwenden. Hier ist das was ich bisher geschafft hab
www.laninmeissen.de.vu
wen es interessiert die bilder hab ich mit paint.net gemacht
www.archlinux...........
User avatar
Killgore
Mapper
Mapper
Posts: 263
Joined: 08.December.2004, 16:20:40
Location: Marburg
Contact:

Post by Killgore »

ach schau dir einfach die von mir verfassten style sheets an^^

das ist z.B. das von der jypd seite
<style type="text/css">
<!--
body { margin-top:100px; background-color:#8597A5; background-image: url('graphics/Bild2.JPG'); background-repeat: no-repeat; background-position:50% 10px;}
td,p { font-size:8pt; line-height:14pt; font-family:Tahoma,Arial,sans-serif; color:#B8B1AD; vertical-align:top;}
#footer { width:650px; text-align:center; border-top:solid 1px #1E2122; font-size:8px; font-size:8px; font-family:"Small Fonts"; letter-spacing:2px; line-height:14pt; text-align:center; clear: both; margin-bottom:30px; margin-top:20px; color:#666666; padding:8px;}
#newsinfo { float: right; width: 110px; height:100%; background-color:#1A1816; border-style: solid; border-color: #1E2122; border-width:1px; padding:4px;}
table#navigation a:hover { text-decoration:none; font-weight:normal; color:#FFFFFF;}
.newsheader { font-weight:bold; margin-bottom:8px; border-bottom:solid 1px #1E2122;}
.newstext { margin-left: 10px; margin-right: 10px;}
.newsautor { margin-top:10px; border-top:solid 1px #1E2122; text-align:right; clear: both;}
.linktable { border-style: solid; border-color: #1E2122; border-width:1px; background-color:#2E3336; padding:0px;}
.linkmain { width:104px; background-color:#1E2122; padding:0px; padding-left:16px; border-bottom:solid 4px #2E3336; cursor:pointer;}
.linkleiste { padding:0px; padding-left:10px; font-size:8px; font-family:"Small Fonts"; letter-spacing:2px; color:#666666;}
.maintable { padding:0px; table-layout:fixed; width:790px; margin: 0px;}
.tableback { border-style: solid; padding:4px; border-color: #1E2122; border-width:1px; background-color:#2E3336;}
.boxentry { background-color:#3F4549; border-style: solid; border-color:#1E2122; border-width:1px; margin:4px; margin-top:0px; line-height:12pt; padding:4px; padding-left:8px;}
.linkbox{ background-color:#2E3336; border-style: solid; border-color:#1E2122; border-width:1px; margin:4px; margin-top:0px; line-height:12pt; padding:0px; padding-top:4px;}
a:link { text-decoration:none; font-weight:normal; color:#FFFFFF; }
a:visited { text-decoration:none; font-weight:normal; color:#FFFFFF; }
a:hover { text-decoration:underline; font-weight:normal; color:#FF0000; }
a:active { text-decoration:none; font-weight:normal; color:#CC3300; }
-->
</style>
sonen style sheet wird einfach unter den <title></title>-tags eingefügt

die reihenfolge wie du dein sheet aufbaust ist egal

musst halt immer ein objekt wie zum beispiel "body" hinschreiben, und dahinter in geschweiften klammern jeweils durch ein ";" getrennt die eigenschaften.
so sieht z.B. ne schwarze hintergrundfarbe im style sheet so aus:
body {background-color:black;}
sonen hintergrundbild das nicht wiederholt wird sondern an na festen position irgendwo hängt (wie z.B. auf jypd.de) sieht so aus:
body {background-image: url('Bild Url'); background-repeat: no-repeat; background-position:x-Wert y-Wert;}
falls dir das nicht weiterhilft kommst du glaub ich nicht drum rum dir nen tutorial durchzulesen

schau am besten unter http://de.selfhtml.org/
White
JYPD-Member
Posts: 1354
Joined: 18.December.2004, 11:26:14
Location: Dresden
Contact:

Post by White »

de.selfhtml.org habe ich ihm schon gesagt ^^
User avatar
Thrall Bombadil
JYPD-Member
Posts: 818
Joined: 10.July.2005, 20:52:42
Location: Daheime
Contact:

Post by Thrall Bombadil »

thx ...das wird schon weiterhelfen
www.archlinux...........
User avatar
Thrall Bombadil
JYPD-Member
Posts: 818
Joined: 10.July.2005, 20:52:42
Location: Daheime
Contact:

Post by Thrall Bombadil »

so mein erstes selbstgeprogtes Disign ist fast fertig


http://www.laninmeissen.de.vu/
www.archlinux...........
User avatar
DarKK Shadow
Co-Clanleader
Posts: 2715
Joined: 09.December.2004, 12:58:58
Location: Bern/CH
Contact:

Post by DarKK Shadow »

hm, ganz ehrlich:
mir zu dunkel, farbkombination ungünstig, da schlecht lesbar - keine kontraste, nimm lieber andere farben
banner ist auch nicht das gelbe vom ei, und die navigation sieht aus wie ein fertigbaukasten

nimms mir nicht übel, ich kann es keinen meter besser, aber ich will lieber ehrlich sein, als es schönzureden :wink:
Image
User avatar
Thrall Bombadil
JYPD-Member
Posts: 818
Joined: 10.July.2005, 20:52:42
Location: Daheime
Contact:

Post by Thrall Bombadil »

na ja mir ist auch lieber wenn jmd was sagt was ich ich besser machen kann oder soll....kannst du mir evtl noch ein paar tipps geben wie ich was verändern sollte?
den gesamten code bilder etc....hab ich ohne baukasten gebastelt....ich mal den test hyperlink dingst zeug wech
www.archlinux...........
User avatar
Killgore
Mapper
Mapper
Posts: 263
Joined: 08.December.2004, 16:20:40
Location: Marburg
Contact:

Post by Killgore »

ganz so schlecht find ich die seite nicht

ich würde nur die schrift bei dem menü ändern .. nimm ne schrift wie arial oder ähnliches, die gut lesbar ist, und vor allem besser in die vorgefertigten hover schaltflächen reinpasst

ansonsten müssen halt noch die restliche probleme die noch drin sind berichtigt werden (wie zum beispiel positionierung fußzeile).

dann wird die seite sicher schon gaanz anders aussehen

zu den farben: die seite ist ein bisschen dunkel und gleichzeitig einfarbig geworden (den fehler hab ich auch schon öfters begangen).
kannst die farben natürlich erstmal so lassen .. find ich jetzt nicht allzuschlimm
User avatar
Thrall Bombadil
JYPD-Member
Posts: 818
Joined: 10.July.2005, 20:52:42
Location: Daheime
Contact:

Post by Thrall Bombadil »

thx erstmal..ich schau mal was sich machen lässt...
also ich hab irgendwie ein problem und zwar das der IE die fußzeile
ein bisl verschiebt
worauf muss ich achten dass Mozilla Opera und IE die Abstände nahe zu gleich anzeigen also die positionen größen etc...?
www.archlinux...........
User avatar
Thrall Bombadil
JYPD-Member
Posts: 818
Joined: 10.July.2005, 20:52:42
Location: Daheime
Contact:

Post by Thrall Bombadil »

so ich hab jetzte wieder was verändert.....es ist wirklich ein bsil einfarbig
aber es ist ja auch noch mein erstes design :lol:

hab nochmal was verändert ..gefällt mir inzwischen selbst sogar nen bisl
http://www.laninmeissen.de.vu/
www.archlinux...........
User avatar
Thrall Bombadil
JYPD-Member
Posts: 818
Joined: 10.July.2005, 20:52:42
Location: Daheime
Contact:

Post by Thrall Bombadil »

kann etvl jetzte mal nochmal sagen wie euch die hp gefällt oder was ich noch ändern sollte
www.archlinux...........
User avatar
DarKK Shadow
Co-Clanleader
Posts: 2715
Joined: 09.December.2004, 12:58:58
Location: Bern/CH
Contact:

Post by DarKK Shadow »

Gefällt mir schon besser :wink:
Image
User avatar
Thrall Bombadil
JYPD-Member
Posts: 818
Joined: 10.July.2005, 20:52:42
Location: Daheime
Contact:

Post by Thrall Bombadil »

DarKK Shadow wrote:Gefällt mir schon besser :wink:
mir auch :-D
www.archlinux...........
User avatar
japi
Manager
Manager
Posts: 1853
Joined: 08.December.2004, 15:26:01
Location: Hessen Kronberg
Contact:

Post by japi »

wow.. hat sich echt stark verbessert :D

Ich finds gut ^^
Image
User avatar
tonga
WarOrga
Posts: 440
Joined: 08.August.2006, 22:04:59
Location: Duisburg

Post by tonga »

hm vieleicht kannst du ja machen das der vordergrund am rand verwischt ..
falls du weisst was ich mein xD
Post Reply