1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

CSS

  • Thonixx
  • 16. Juni 2007 um 22:51
  • Thonixx
    Gast
    • 16. Juni 2007 um 22:51
    • #1

    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.
    König(in)
    Beiträge
    1.015
    • 17. Juni 2007 um 01:40
    • #2

    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.

    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.
    [Blockierte Grafik: http://www.snippr.de/social/img/logo.png]
    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 17. Juni 2007 um 08:27
    • #3

    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.

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • Thonixx
    Gast
    • 17. Juni 2007 um 17:35
    • #4

    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
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 17. Juni 2007 um 20:06
    • #5

    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.

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • Thonixx
    Gast
    • 17. Juni 2007 um 21:14
    • #6

    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
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 17. Juni 2007 um 21:23
    • #7
    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.

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • Thonixx
    Gast
    • 17. Juni 2007 um 21:26
    • #8

    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
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 17. Juni 2007 um 21:40
    • #9
    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.

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • Thonixx
    Gast
    • 17. Juni 2007 um 21:45
    • #10

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

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 17. Juni 2007 um 21:48
    • #11

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

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • Thonixx
    Gast
    • 18. Juni 2007 um 00:31
    • #12

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

    kann geclosed werden!

  • Thonixx
    Gast
    • 18. Juni 2007 um 00:41
    • #13

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

  • Dominikgt
    Prinz(essin)
    Beiträge
    710
    • 18. Juni 2007 um 00:43
    • #14

    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
    Gast
    • 18. Juni 2007 um 00:46
    • #15

    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
    Gast
    • 18. Juni 2007 um 01:43
    • #16

    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

  • forum
  • hilfe
  • www
  • color
  • style
  • background
  • body
  • jpg
  • code
  • php
  • bot
  • bottom
  • div
  • position
  • tisch
  • schrift
  • font
  • border
  • image
  • repeat
  • margin-bottom
  • padding
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche