CSS

Thonixx

kann dieser css funktionieren? ich bin da nicht so versiert...
wenn was falsch ist, was denn?

Code

body {
   margin-top:0px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:0px;
   padding-top:0px;
   padding-right:0px;
   padding-bottom:0px;
   padding-left:0px;
   border-top-width:0px;
   border-right-width:0px;
   border-bottom-width:0px;
   border-left-width:0px;
   border-top-style:none;
   border-right-style:none;
   border-bottom-style:none;
   border-left-style:none;
   font-family:Arial;
   font-size:12px;
   font-weight:normal;
   font-style:normal;
   color:black;
   background-image:url('http://home.arcor.de/michael-tanner/technetium/images/bg.jpg');
   background-repeat:repeat;
   background-attachment:scroll;
   background-position:0px 0px;
}




div {
   margin-top:0px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:0px;
   padding-top:0px;
   padding-right:0px;
   padding-bottom:0px;
   padding-left:0px;
   border-top-width:0px;
   border-right-width:0px;
   border-bottom-width:0px;
   border-left-width:0px;
   border-top-style:none;
   border-right-style:none;
   border-bottom-style:none;
   border-left-style:none;
   font-family:Arial;
   font-size:12px;
   color:black;
   background-image:url('http://home.arcor.de/michael-tanner/technetium/images/bg.jpg');
   background-repeat:repeat;
   background-attachment:fixed;
   background-position:0px 0px;
}




h1 {
   margin-top:0px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:0px;
   padding-top:0px;
   padding-right:0px;
   padding-bottom:0px;
   padding-left:0px;
   border-top-width:0px;
   border-right-width:0px;
   border-bottom-width:0px;
   border-left-width:0px;
   border-top-style:none;
   border-right-style:none;
   border-bottom-style:none;
   border-left-style:none;
   font-family:Arial;
   font-size:12px;
   color:black;
   background-image:url('http://home.arcor.de/michael-tanner/technetium/images/bg.jpg');
   background-repeat:repeat;
   background-attachment:fixed;
   background-position:0px 0px;
}




p {
   margin-top:0px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:0px;
   padding-top:0px;
   padding-right:0px;
   padding-bottom:0px;
   padding-left:0px;
   border-top-width:0px;
   border-right-width:0px;
   border-bottom-width:0px;
   border-left-width:0px;
   border-top-style:none;
   border-right-style:none;
   border-bottom-style:none;
   border-left-style:none;
   font-family:Arial;
   font-size:12px;
   background-image:  ;
   background-position:0px 0px;
}




a:link {
   margin-top:0px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:0px;
   padding-top:0px;
   padding-right:0px;
   padding-bottom:0px;
   padding-left:0px;
   border-top-width:0px;
   border-right-width:0px;
   border-bottom-width:0px;
   border-left-width:0px;
   border-top-style:none;
   border-right-style:none;
   border-bottom-style:none;
   border-left-style:none;
   font-family:Arial;
   font-size:12px;
   background-color:silver;
   color:green;
   background-image:  ;
   background-position:0px 0px;
}




a:visited {
   margin-top:0px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:0px;
   padding-top:0px;
   padding-right:0px;
   padding-bottom:0px;
   padding-left:0px;
   border-top-width:0px;
   border-right-width:0px;
   border-bottom-width:0px;
   border-left-width:0px;
   border-top-style:none;
   border-right-style:none;
   border-bottom-style:none;
   border-left-style:none;
   font-family:Arial;
   font-size:12px;
   background-color:silver;
   color:green;
   background-image:  ;
   background-position:0px 0px;
}




a:hover {
   margin-top:0px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:0px;
   padding-top:0px;
   padding-right:0px;
   padding-bottom:0px;
   padding-left:0px;
   border-top-width:0px;
   border-right-width:0px;
   border-bottom-width:0px;
   border-left-width:0px;
   border-top-style:none;
   border-right-style:none;
   border-bottom-style:none;
   border-left-style:none;
   font-family:Arial;
   font-size:12px;
   background-color:silver;
   color:#  00cb00;
   background-image:  ;
   background-position:0px 0px;
}




a:active {
   margin-top:0px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:0px;
   padding-top:0px;
   padding-right:0px;
   padding-bottom:0px;
   padding-left:0px;
   border-top-width:0px;
   border-right-width:0px;
   border-bottom-width:0px;
   border-left-width:0px;
   border-top-style:none;
   border-right-style:none;
   border-bottom-style:none;
   border-left-style:none;
   font-family:Arial;
   font-size:12px;
   background-color:silver;
   color:green;
   background-image:  ;
   background-position:0px 0px;
}

Alles anzeigen

K.Y.L.T.

Hi, nur mal eine Frage zwischendurch, warum machst du es dir so kompliziert, margin und padding für jede Seite einzeln zu setzen?

Nagut es kann zwar funktionieren, aber zum einen ist das extrem viel Tiparbeit und zum anderen siehts selten gut aus...

Hab es nur mal kurz überflogen, müsste so gehen, aber wieso probierst du es nicht einfach aus ?? - Im enteffekt kann fast jeder Browser darauf ja noch anders reagieren.

sejuma

Du kannst vieles stark vereinfachen, indem du Überflüssiges weglässt:

Alt:

Code

div {
   margin-top:0px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:0px;
   padding-top:0px;
   padding-right:0px;
   padding-bottom:0px;
   padding-left:0px;
   border-top-width:0px;
   border-right-width:0px;
   border-bottom-width:0px;
   border-left-width:0px;
   border-top-style:none;
   border-right-style:none;
   border-bottom-style:none;
   border-left-style:none;
   font-family:Arial;
   font-size:12px;
   color:black;
   background-image:url('http://home.arcor.de/michael-tanner/technetium/images/bg.jpg');
   background-repeat:repeat;
   background-attachment:fixed;
   background-position:0px 0px;
}

Alles anzeigen

Neu:

Code

div {

}

Wenn du keine margins und paddings brauchst, kannst du die Angabe auch weglassen. Beim Body macht es dagegen wegen unterschiedlicher Browserinterpretation Sinn. Dann aber kürzer:

Code

body {margin: 0; padding: 0;}

Gliches gilt für den border: Wenn du keinen brauchst, musst du ihn auch nicht definieren.
Wenn das background-image identisch ist mit dem des body: weglassen.
background-repeat und position 0 sind ebenfalls Standardeinstellungen. Kannst also auch weglassen.
Da die Schrift bereits im Body definiert ist, muss sie in den nachfolgenden Elementen nicht erneut angegeben werden; außer sie soll vom body abweichen.

Ergebnis: Für den div bleibt in diesem Fall nichts übrig. Verwende ihn deshalb zur Positionierung, z.B. mit margin, und Breitenangaben.

Sieh dir am Besten mal die Layoutbeispiele in den FAQ's an.

Thonixx

könntet ihr mir vielleicht eine verbesserte variante geben?

und den css habe ich mit nem assistenten von opera erstellt und ich wollte eigentlich nur das hineinschreiben, weil ich wissen will ob man sich darauf verlassen kann!

sejuma

Es kommt immer darauf an, wie sich die CSS-Angaben auf den HTML-Teil auswirken sollen. Von daher besteht ein direkter Zusammenhang mit dem HTML-Code.
Als Faustregel gilt jedoch folgendes:

Alles was im body definiert ist, brauchst du in den nachfolgenden Elementen nicht gesondert zu definieren. Außer du willst dort abweichende Formate (Farben, Hintergründe etc.) haben.

Wenn du keine Außen- und Innenabstände (margin und padding) brauchst, dann ist es nicht erforderlich, diese auf 0px zu setzten. Diese Angaben machen nur Sinn, wenn sie einen Wert ungleich Null haben.

Wenn du alle Rahmenangaben auf Null setzt ist das ebenfalls überflüssig, da dies bereits die Standardeinstellung ist.

Ich kenne zwar den Opera-Assistenten nicht, aber was er da produziert hat, ist ziemlicher Schwachsinn, da zum Großteil überflüssig.

Mach dir doch mal eine Skizze, wie deine HP aussehen soll. Dnach kannst du die einzelnen Elemente wie z.B. Header, Navi, Content mit CSS positionieren und die Style-Angaben wie Rand, Farben usw. definieren.

Thonixx

also es ist so:

ich möchte dass die allgemeine schriftart arial, 12px und schwarz ist. der link muss 12px arial sein und grün sein der hoverlink sollte hellgrün sein und auch arial 12px schwarz. der besuchte link soll so wie der normale sein!

sejuma

Code

body
{
 font-family:Arial;
 font-size:12px;
 color:#000;
 }


a:link, a:visited
{color: #008B00; text-decoration: none;}


a:hover
{color: #00CD00; text-decoration: none;}

Alles anzeigen

hover hellgrün und gleichzeitig schwarz geht nicht. Andere Farbnuancen müsstest du ggf. noch ändern.

Thonixx

ach so:

gleichzeitig geht natürlich nicht. hab mich verschrieben meinte wohl hellgrün arial 12 px und grün arial 12px

aber noch:

der hintergrund der seite sollte noch fixed sein also nicht mitscrollen und sich auf der ganzen seite x-mal wiederholen!

die url ist: http://home.arcor.de/michael-tanner/technetium/images/bg.jpg

sejuma

Code

body
{
 font-family:Arial;
 font-size:12px;
 color:#000;
 background-image: url( http://home.arcor.de/michael-tanner/technetium/images/bg.jpg);
 background-position: fixed;
 }

Allerdings ist unter der genannten Adresse wohl kein Bild hinterlegt.
Beachte: Der IE bis 6 kennt position: fixed; nicht, der IE 7 nur bedingt.

Thonixx

vielen dank und das bild wäre dann nicht jpg sondern .gif

sejuma

Das spielt keine Rolle, außer dass jpg eine bessere Qualität haben kann. Kommt drauf an, wie du's abgespeichert hast.

Thonixx

aber s'ist mit .gif abgespeichert. vielen dank noch!

kann geclosed werden!

Thonixx

könnte mans auch machen, dass sich der linkhover fett macht und über- und unterstreicht?

Dominikgt

text-decoration: bold,underline,overline; würd ich so ausm bauch heraus sagen. sonst guck am besten mal bei css4you.de .da stehts garantiert

Thonixx

ah vielen dank für die hilfe werd dort mal vorbeischauen!

ich schreib dann noch die endgültige page mit link hierhinein, wenns noch nich geclosed ist und wenns fertig ist

Thonixx

hier hätte ich dann noch meinen endgültigen css:

Code

body
{
 font-family:Arial;
 font-size:17px;
 color:#000;
 background-image: url( http://home.arcor.de/michael-tanner/technetium/images/bg.gif);
 background-attachment: fixed;
 }


a:link, a:visited
{color: #008B00;
 text-decoration: none;}


a:hover
{color: #00CD00;
 text-decoration: underline overline;}

Alles anzeigen

Tags