Erstes css layout - bitte einschätzen

nosam · 13. März 2008

Hi!
ich bin seit heute Krankgeschrieben und habe mich mal dran gemacht endlich mal layouten mit css zu lernen

nach ca 8 stunden lesen und rumprobieren ist dann das hier rausgekommen:
http://thunderofwar.th.ohost.de/mason/home.htm

würde von euch gerne mal ein feedback haben ob ich schon gut gelernt hab =D
(ich möchte keine aüßerungen über die einzelnen grafiken... die hab ich eh nur schnell hingeklickt =D)

hab ich das grundprinzip verstanden?
gibts an der form was zu bemängeln?
hab ich mir einige sachen zu umständlich gemacht?

bitte postet dann auch die entsprechen codestellen und die verbesserungen (vllt auch mit zeilenangabe ^.^)

für die suchfaulen unter euch hier noch der direktlink zur css datei:
http://thunderofwar.th.ohost.de/mason/piczo.css

und wie gesagt war mein allererstes css layout also seid bitte nicht zu hart in der kritick *liepgugg*

bw für objektive und hilfereiche tips is ehrensache =D

greetz nosam

Heute: Deals & Sale mit stark reduzierten Angeboten finden.

GaYlORd · 13. März 2008

AW: Erstes css layout - bitte einschätzen

sers!

abgesehn von den verwendenten grafiken is es doch vom code her weitesgehend ok.

du musst nicht margin:none; angeben. du kannst das weg lassen!
font-family:"Arial Black", Arial; <-- wieso is das Arial Black in "" zeichen?

das bei #text:

Code:

border-style:solid;
border-top-style:none;
border-color:#FFFFFF;
border-width:3px;

kannst du auch so machen:
border: solid 3px #FFF;
border-top: 0px;

is weniger und besser

Code:

top:0px;
left:0px;

kannst du auch weglassen. weil er, wenn nichts angegeben ist, von 0 ausgeht.
und allgemein, wenn du z.b. die farbe weiß hast, musst du nicht #FFFFFF machen, sondern da reicht auch #FFF. Also wenn quasi alle 6 zeichen gleich sind

bei: #334455 sollte #345 auch gehn.

hab grad 3 maß (maß = 1l bier) intus, aalso falls iwas sinnlos is, ignorieren

gruß
gl

Murdoc · 13. März 2008

AW: Erstes css layout - bitte einschätzen

du hast bei <link rel="stylesheet" ... das / am ende vergessen,
ansonsten ned so der brüller.

bei css-layouts ist es eigentlich gang und gebe sachen wie <h1>, <h2> [...] zu verwenden, weil du sie ja mit css optimal anpassen kannst.

wenn du so weitermachst bist bald bei ner div-suppe gewürzt mit a weng span

nosam · 13. März 2008

AW: Erstes css layout - bitte einschätzen

ach ja das war ja die sache mit den kürzer schrieben ^.^ wusste da war noch was aber danke nochmal für den hinweis ^^

"arial black" macht programm automatisch ^.^ ka wieso aber geht auch so

und wie viel nen maß is weiß ja wohl jeder =P

danke dir trotzdem

soll mir was sagen?

ja mit h1 h2 xD stimmt eigendlich ...
werde ich mal morgen noch ändern ^^

GaYlORd · 14. März 2008

AW: Erstes css layout - bitte einschätzen

dass soll heißen, dass du keine ahnung mehr hast, welche class oder id zu was gehört!
mit h1 etc... is es logisch und das weißt du immer.

maß is feminin!!

welches prgramm benutzt du?
Hoffentl. kein dreamweaver oder adobe golive?
Wobei golive zum css schreiben, total angenehm is!

eXuZ · 14. März 2008

AW: Erstes css layout - bitte einschätzen

DreamWeaver ist fürs CSS/HTML/PHP schreiben doch auch angenehm? Syntax-Highlighting usw... (wenn man nicht gerade die "Zusammenklick-Methode" verwendet, sondern den Code schön selber schreibt) ?

MakenX · 14. März 2008

AW: Erstes css layout - bitte einschätzen

1. Also zum einen schließe ich mich dem validator.w3.org an, was seine Kritik an deine Codes angeht.
2. Entscheide dich bitte ob du HTML oder xHTML schreibst.
3. CSS - Shorthands un semantisches HTML sind natürlich um einiges schöner.

Also da kannst du noch einiges machen, zumal ein WYSIWYG - Editor zu nutzen, nix mit "CSS lernen" zu tun hat .... imho ... und nein Dreamweaver ist alles andere als angenehm, weil der WYSIWYG nur :poop:

zusammenbaut und selbst beim Arbeiten am Code, schafft es Dreamweaver bei unerfahrenen Nutzern, die Codierung etc. zu verhauen.

nosam · 14. März 2008

AW: Erstes css layout - bitte einschätzen

also dann doch lieber editor nutzen?^^

kleine dummbatz zwischenfrage:
wenn ich h1 und h2 etc einführen will:
leiber als sub class von den id oder nur h1 ... definieren?

eXuZ · 14. März 2008

AW: Erstes css layout - bitte einschätzen

wenn du nochmal zwischen den h1's und h2's unterscheiden willst, dann mit id's und class's...

Wann mit id, wann mit class:
Wenn etwas mehrmals vorkommt, dann class, z.b. class="content"!
Bei einmaliger verwendung reicht die id, z.b. id="newcontent".

Wenn z.b. die gleiche ID 2x vorkommt ist es nicht mehr valide, desswegen stattdessen classes!

Murdoc · 14. März 2008

AW: Erstes css layout - bitte einschätzen

du kannst h1 und h2 [..] auch direkt ansprechen mit

Code:

h1 { color: red; }
h2 { color: green; }

eXuZ · 14. März 2008

AW: Erstes css layout - bitte einschätzen

Ja klar, aber ich meinte jetzt, falls er noch verschiedene h1's z.B. unterscheiden möchte!

GaYlORd · 14. März 2008

AW: Erstes css layout - bitte einschätzen

eben keinen benutzen^^
benutz einen der dir syntax highlighting unterstüzt, mehr aber auch nicht!
z.b. ultraedit!!

gruß
gl

nosam · 14. März 2008

AW: Erstes css layout - bitte einschätzen

ok ma mit ultraedit probieren weil syntax highlight is mir schon recht wichtig^^

so hab jetzt nochmal alles etwas überarbeitet und hoffe das jetzt nicht mehr ganz so viele fehler drinn sind
wie gesagt bin froh wennich was lerne...

links sind die selben geblieben:
http://thunderofwar.th.ohost.de/mason/home.htm
http://thunderofwar.th.ohost.de/mason/piczo.css

um gleich mal was vorzubeugen
die klasse .box hab ich eingeführt wegen der randgestaltung (also der abstand den der text von dem rand da hält...) mit padding hat sich dass rechts dann immer breitgezogen oder gibts da ne einfachere möglichkeit auf die ich nur nich gekommen bin ?

€dit:
ein problem hab ich allerdings noch :
der macht nach der überschrift nen zeilenumbruch der nich sein soll xD wie bekommich das weg?

Murdoc · 14. März 2008

AW: Erstes css layout - bitte einschätzen

h1, h2, h3, h4, h5 und h6 sind überschriften.

ließ mal bei selfhtml den unterschied von inline-elementen und block-elementen.

kurz: block-elemente (u.a. auch h1, h2 ...) können nur in <body> der anderen block-elementen vorkommen.

span ist ein inline-element, h1 oder h2 darf deshalb nicht darin vorkommen.

block-elemente zeichnen sich dadurch aus dass sie eine ganze zeile einnehmen. inline-elemente nehmen nur den start- und end-bereich ein.

bsp:

HTML:

<div>block elemente</div>dieser text befindet sich UNTER dem div-element
<span>inline-element</span>dieser text befindet sich NEBEN dem inline-element

falsch wäre z.b.:

HTML:

<span>inline-element <div>block-element in inline-element!</div></span>

nosam · 14. März 2008

AW: Erstes css layout - bitte einschätzen

ja gut jeze hab ich des wenigstens ma gerafft xD (bzw. ich hoffe es xD)
..
manchmal frag ich mich echt wo mein hinr is xD

nochmals geändert und hoffe dass diesma nix zu meckern gibt ;D
http://thunderofwar.th.ohost.de/mason/home.htm
http://thunderofwar.th.ohost.de/mason/piczo.css

GaYlORd · 15. März 2008

AW: Erstes css layout - bitte einschätzen

naja...
mit h1 etc... beschreibst du eben eher die überschriften!
also nich so wirklich was mit margin und so und vor allem nichts mit width und height!!!!

dein navi a und navi a hover, kannst du zusammenfassen in navi und dann die teile, die NUR fürs navi a gelten, sollten in navi a gehn und nur die die fürs navi a:hover gelten ins navi a hover!!

die sachen zu h1 würd ich mir nochmal genauer anschaun

gruß
gl

nosam · 15. März 2008

AW: Erstes css layout - bitte einschätzen

sonochma kleine minimale änderungn...

aber viel mehr kannich die navi a hover konnte ich gar nicht weiter aufteilen...

außerdem ist die höhenangabe bei h1 nru drin, weil sonst nich die ganze hintegrund-grafik gezeigt wird...

die annderen paddings/margins in den h's / in p hab ich nur um die einzelnen einschübe schon vorzudefinieren und ich kann mir nich erklären was daran so verwerflich is ^.^

Gilmohr · 17. März 2008

AW: Erstes css layout - bitte einschätzen

Hallo, bin auch noch net so erfahren mit css,
hab grad ne frage bezüglich der definition von <h1> <h2> ...

kann ich die irgendwie verwenden ohne das ich später in der Ausgabe vom Browser die zeilenumbrüche habe??
das nervt mich immer. zb wenn ich mit <h1> ne überschrift festlegen will die aber direkt über am textinhalt etc stehen soll ohne leerzeile dazwischen?
vielen dank schonmal im vorraus

MakenX · 17. März 2008

AW: Erstes css layout - bitte einschätzen

Es tut mir leid, aber es wäre schon angebracht den Thread auch richtig zu lesen, etwas weiter oben ... Und wenn ich als Leser über solche Textfehler wie deine stolper, ist meine Motivation noch geringer ...

Zitat von Murdoc: ↑

h1, h2, h3, h4, h5 und h6 sind überschriften.

ließ mal bei selfhtml den unterschied von inline-elementen und block-elementen.

kurz: block-elemente (u.a. auch h1, h2 ...) können nur in <body> der anderen block-elementen vorkommen.

span ist ein inline-element, h1 oder h2 darf deshalb nicht darin vorkommen.

block-elemente zeichnen sich dadurch aus dass sie eine ganze zeile einnehmen. inline-elemente nehmen nur den start- und end-bereich ein.

bsp:
HTML:
<div>block elemente</div>dieser text befindet sich UNTER dem div-element
<span>inline-element</span>dieser text befindet sich NEBEN dem inline-element
falsch wäre z.b.:
HTML:
<span>inline-element <div>block-element in inline-element!</div></span>
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Gilmohr · 17. März 2008

AW: Erstes css layout - bitte einschätzen

ich habe den ganzen threat gelesen !!! meine frage ist ja, ob ich mit irgend einem zusatz die leerzeile von dem block-element unterdrücken kann, oder festlegen kann das einfach das folgende element eine zeile höher anfängt ...was weis ich, mit margin - irgendwas ...

geht so etwas oder ist das nicht möglich und ich muss es anderst festlegen, zb so wie oben erklärt !! das ist die frage...war evtl bisl undeutlich ausgedrück vorher, sorry

nosam · 17. März 2008

AW: Erstes css layout - bitte einschätzen

is eigendlich relativ simpel ^^

beim nach der überschrit folgenden element margin-top:-14px; (oder was auch immer deine schriftgröße is ... probier am besten ein bisschen rum ...

weiß jetzt nicht ob die lösung sehr galant is aber funktioniert ^^

vllt gibts ja auch noch was besseres?
*frage einfach so ganz frech in den raum werf*

btw hättest du meine css datei mal gelesen wär dir des sicher auch inne augen gesprungen (schau dir mal #content .box an) aber naja wayne ... probiers einfach mal wird schon klapen ^^

Murdoc · 17. März 2008

AW: Erstes css layout - bitte einschätzen

Code:

h1 { margin: 0; }

h1, h2, h4 und h4 haben ein margin-top und ein margin-bottom
h5 nur noch ganz gering und h6 garnicht mehr.

Gilmohr · 17. März 2008

AW: Erstes css layout - bitte einschätzen

Alles klar, dankeschön ! habt auch alle Bewertung

animearnold · 28. März 2008

AW: Erstes css layout - bitte einschätzen

ich find den hintergrund nich so gut ^^ und der aufbau da könne ma ein richtigen header machen wo die überschrift steht sonst nice

nosam · 30. März 2008

AW: Erstes css layout - bitte einschätzen

ok ^^ hab ja auch gesagt absehen von den grafiken =D
bin nich so der gfxer

Erstes css layout - bitte einschätzen

Anzeige

Videos zum Thema

El Salvador verbietet als erstes Land Edelmetall-Abbau

Erstes Tattoo auf Brust - Schmerzen?

Chile züchtet legal Cannabis als erstes Land Südamerikas

[CSS] Mein erstes CSS Template

Mein erstes CSS-USP-Video

Annonce

Annonce

Nützliche Suchen

Erstes css layout - bitte einschätzen

Anzeige

Videos zum Thema

El Salvador verbietet als erstes Land Edelmetall-Abbau

Erstes Tattoo auf Brust - Schmerzen?

Chile züchtet legal Cannabis als erstes Land Südamerikas

[CSS] Mein erstes CSS Template

Mein erstes CSS-USP-Video