larry: CSS am lebenden Beispiel

0 21

CSS am lebenden Beispiel

larry
  • css
  1. 0
    MudGuard
    1. 0
      larry
      1. 0
        Fabian Transchel
        1. 0
          larry
      2. 0
        MudGuard
        1. 0
          larry
          1. 0
            MudGuard
            1. 0
              larry
              1. 0
                Daniel
                1. 0
                  larry
                  1. 0
                    larry
                  2. 0
                    Daniel
                    1. 0
                      larry
  2. 0
    larry
    1. 0
      wahsaga
      1. -1
        larry
        1. 0
          wahsaga
          1. 0
            larry
            1. 0
              wahsaga
              1. 0
                larry
SELF-Forum

CSS am lebenden Beispiel

larry
– Informationen zu den Bewertungsregeln

Hallo, ich bin neu auf dem CSS-Gebiet. Ich habe folgenden Quelltext zusammengestrickt und da bleiben noch einige Fragen offen, was einige Problemlösungen angeht...

Hier mal der komplette Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
    body {
        color: black;
        font-size: 80.01%;
        font-family: Arial,Helvetica,sans-serif;
        margin: 0;
        background-color: #d8dcd3;
        height: 100%;
    }

.menu {text-decoration: none; color: black; font-weight: bold;}
 .menu_active {text-decoration: none; color: red; font-weight: bold;}
 .menu:visited {color: black}
 .menu:hover {color: blue}

.angebot {text-decoration: none; border-bottom: 1px dotted #373}
 .angebot:visited {background: transparent; color: #373}
 .angebot:hover {background: #C9D8B3; color: black}

div#all {
        width: 800px;
    }
    div#logo {
        float: left;
        width: 220px;
        height: 40px;
        background-color: #ffffff;
        background-image: url(images/logo.png); image-width:255px; image-height:25px;
        background-repeat:no-repeat;
        background-position:5px 5px;
    }
    div#left {
        float: left;
        width: 220px;
        background-color: #d8dcd3;
    }
    div#navi_top {
        float: left;
        height: 40px;
        background-color: #d8dcd3;
        width: 580px;
        text-align: center;
    }
    div #menu {

}
    #main {
        float: left;
        width: 450px;
        background-color: #ffffff;
        height: 75%;
        padding: 20px;
    }
    .centeredImage
    {
        text-align:center;
        margin-top:0px;
        margin-bottom:0px;
        padding:0px;
    }
    p {
        margin: 2px;
    }
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        text-align: right;
    }
    li {
        padding: 10px;
    }
    div#navi_top li {
        padding: 10px;
        padding-left: 15px;
        float: left;
    }
    div#footer {
        clear: left;
        /*background-color: blue;*/
        padding-top: 5px;
        width: 730px;
    }
    div#left_footer {
        float: left;
        /*background-color: green;*/
        width: 220px;
    }
    div#right_footer {
        float: left;
        text-align:center;
        /*background-color: red;*/
        width: 510px;
    }
</style>
</head>
<body>

<div id="all">

<div id="top">
<div id="logo">
</div>
</div>

<div id="navi_top">
<ul>
<li><a class="menu_active" href="#">Navi 1 (aktiv)</a></li>
<li><a class="menu" href="#">Navi 2</a></li>
<li><a class="menu" href="#">Navi 3</a></li>
<li><a class="menu" href="#">Navi 4</a></li>
<li><a class="menu" href="#">Navi 5</a></li>
<li><a class="menu" href="#">Navi 6</a></li>
</ul>
</div>
</div>

<div id="middle">
<div id="left">
<div style="text-align:center; padding-top: 10px; padding-bottom: 10px;">
<strong>Hang 12&nbsp;&nbsp;12345 Freiburg<br />
Telefon (01234) 9876 - <font style="color:#d8dcd3;">1</font>0<br />
Telefax (01234) 9876 - 10</strong>
</div>
<div id="menu">
<ul><li><a class="menu_active" href="#">Navi 1.1 (aktiv)</a></li>
<li><a class="menu" href="#">Navi 1.2</a></li>
<li><a class="menu" href="#">Navi 1.3</a></li>
<li><a class="menu" href="#">Navi 1.4</a></li>
<li><a class="menu" href="#">Navi 1.5</a></li>
</ul>
</div>
</div>

<div id="main">
<div style="color:white; background-color: red; width: 470px; font-size: 1.8em; font-weight: bold; text-align:center;">ANGEBOT DER WOCHE</div>
<p class="centeredImage"><img src="images/angebot.jpg" border="0" height="240" width="320" alt="Bild zeigt aktuelles Angebot" /></p>
<p style="font-weight:bold;">Headline Headline Headline Headline Headline Headline Headline Headline Headline</p>
Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext </p>
<p style="font-weight:bold;">Preis: EUR 300,-</p>
<p style="margin-left:20px; text-align:center; padding-top:20px;"><a class="angebot" href="#">Angebot anfordern</a></p>
</div>
</div>

</div>

<div id="footer">
<div id="left_footer"></div>
<div id="right_footer">
<a class="angebot" href="#">Navi 7</a>&nbsp;
<a class="angebot" href="#">Navi 8</a>
</div>
</div>
</body>
</html>

Nun zu meinen Fragen:
(Für weitere Anregungen bin ich natürlich stets dankbar!!!)

  1. ich habe das Gefühl, dass mein Logo oebn links nicht ganz zentriert wird...gibt es da bessere Möglichkeiten statt meiner bisherigen Lösung?

  2. Die horizontale Navigation möchte ich gerne auch horizontal zentrieren, hier stimmen wohl ausserdem die width-Werte des div-Tags nicht so ganz im Vergleich zu den anderen Seiten

  3. wie würdet ihr denn alles variabel strukturieren, sprich welche Werte für % und em sind in diesem Projekt zu empfehlen? Sind denn auch Bilder skalierbar, wenn der User die Schrift vergrössern will, dies wäre optimal für meine Bedürfnisse!

  4. im IE werden die Punkte vom Link (Navi7 und Navi8) nicht angezeigt, obwohl dies bei "Angebot anfordern" richtig funktioniert...im Mozilla wird das auch richtig angezeigt

  5. im Mozilla wird der weisse Text auf rotem Hintergrund falsch zentriert und wandert etwas nach rechts...wie schafft man hier Abhilfe, etwa durch display:block???

  6. Auch im Mozilla werden die Footer-Links (s. Punkt 4) nicht zentriert, im IE aber schon, wie es sein sollte...

Danke für Eure Mühen!

Gruss,
larry

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS am lebenden Beispiel

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    div#logo {
            float: left;
            width: 220px;
            height: 40px;
            background-color: #ffffff;
            background-image: url(images/logo.png); image-width:255px; image-height:25px;

    Wo ziehst Du denn image-width und image-height her?
    CSS-Eigenschaften können nicht beliebig erfunden werden.

    background-repeat:no-repeat;
            background-position:5px 5px;

    Du erwartest, daß das Logo zentriert wird, setzt es aber 5px vom oberen und linken Rand fest.

    }

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS am lebenden Beispiel

      larry
      – Informationen zu den Bewertungsregeln

      Wo ziehst Du denn image-width und image-height her?
      CSS-Eigenschaften können nicht beliebig erfunden werden.

      habe mal auspobiert, ob das funktioniert...ausserdem eine Info an alle, wie die Höhe und Breite des images aussehen...

      background-repeat:no-repeat;
              background-position:5px 5px;

      Du erwartest, daß das Logo zentriert wird, setzt es aber 5px vom oberen und linken Rand fest.

      ich habe ja nach alternativen gefragt...meine Lösung finde ich nicht optimal, vor allem, wenn sich mal was ändern sollte, dann müsste man die position ja immer manuell nachbessern...gibt es da bessere Möglichkeiten?

      }
      cu,
      Andreas

      CU!larry

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS am lebenden Beispiel

        Fabian Transchel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo larry,

        Wo ziehst Du denn image-width und image-height her?
        CSS-Eigenschaften können nicht beliebig erfunden werden.

        habe mal auspobiert, ob das funktioniert...ausserdem eine Info an alle, wie die Höhe und Breite des images aussehen...

        Dann verwende Kommentare anstatt invalide Codeschnipsel zu ersinnen.

        Grüße aus Barsinghausen,
        Fabian

        --
        "It's easier not to be wise" - < http://www.fabian-transchel.de/kultur/philosophie/ialone/>
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. CSS am lebenden Beispiel

          larry
          – Informationen zu den Bewertungsregeln

          Hallo Fabian,

          Dann verwende Kommentare anstatt invalide Codeschnipsel zu ersinnen.

          ich werde das für die Zukunft beherzigen...Danke!

          Grüße aus Barsinghausen,
          Fabian

          Gruss,
          larry

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. CSS am lebenden Beispiel

        MudGuard Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        Du erwartest, daß das Logo zentriert wird, setzt es aber 5px vom oberen und linken Rand fest.
        ich habe ja nach alternativen gefragt...meine Lösung finde ich nicht optimal, vor allem, wenn sich mal was ändern sollte, dann müsste man die position ja immer manuell nachbessern...gibt es da bessere Möglichkeiten?

        Natürlich. background-position erlaubt auch andere Werte als Längenangaben.

        Wenn das bei image-width die tatsächliche Breite des Bildes ist (255px), wie soll das in einem div mit einer Breite von nur 220px reinpassen?

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. CSS am lebenden Beispiel

          larry
          – Informationen zu den Bewertungsregeln

          Hallo

          Natürlich. background-position erlaubt auch andere Werte als Längenangaben.

          meinst Du text-align=center und vertical-align=center, um das Logo genau zu zentrieren?

          Wenn das bei image-width die tatsächliche Breite des Bildes ist (255px), wie soll das in einem div mit einer Breite von nur 220px reinpassen?

          stimmt, hatte mich da verschrieben, da kommt 210px hin, das Logo ist also 210px breit...

          cu,
          Andreas

          Gruss,
          larry

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. CSS am lebenden Beispiel

            MudGuard Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hi,

            Natürlich. background-position erlaubt auch andere Werte als Längenangaben.
            meinst Du text-align=center und vertical-align=center, um das Logo genau zu zentrieren?

            Wenn ich von Werten von background-position schreibe, meine ich Werte von background-position. Und nicht text-align oder vertical-align (nebenbei: zwischen Eigenschaft und Wert steht bei CSS der Doppelpunkt, nicht das Gleichheitszeichen).

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            Schreinerei Waechter
            Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. CSS am lebenden Beispiel

              larry
              – Informationen zu den Bewertungsregeln

              Wenn ich von Werten von background-position schreibe, meine ich Werte von background-position. Und nicht text-align oder vertical-align (nebenbei: zwischen Eigenschaft und Wert steht bei CSS der Doppelpunkt, nicht das Gleichheitszeichen).

              da bin ich wohl etwas vom css-weg abgekommen und falsch bei html abgebogen...

              also, dann tippe ich mal auf background-position: center center;

              cu,
              Andreas

              Gruss,
              larry

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. CSS am lebenden Beispiel

                Daniel
                – Informationen zu den Bewertungsregeln

                Ahoi larry,

                also, dann tippe ich mal auf background-position: center center;

                tippen ist nicht gut. warum schaust du nicht in den CSS bereich von
                SELFHTML? und dort bei Hintergrund? http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position

                MfG

                --
                Alle Angaben wie immer ohne Gewähr
                PPPS: ich trinke gerne ab und an mal eine tote Tante.
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. CSS am lebenden Beispiel

                  larry
                  – Informationen zu den Bewertungsregeln

                  Ahoi,

                  genau da war ich schon:
                  background-position: center center; war genau das, was ich gesucht habe.

                  Gruss,
                  larry

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. CSS am lebenden Beispiel

                    larry
                    – Informationen zu den Bewertungsregeln

                    Nachdem sich das einige Probleme gelöst haben, bleiben noch einige Fragen offen:
                    ich habe die Seite jetzt mal unter http://www.fresh-content.de/angebot/ für alle sinsehbar gestellt...

                    (Für weitere Anregungen bin ich natürlich stets dankbar!!!)

                    1. Die horizontale Navigation möchte ich gerne auch horizontal zentrieren, hier stimmen wohl ausserdem die width-Werte des div-Tags nicht so ganz im Vergleich zu den anderen Seiten

                    2. wie würdet ihr denn alles variabel strukturieren, sprich welche Werte für % und em sind in diesem Projekt zu empfehlen? Sind denn auch Bilder skalierbar, wenn der User die Schrift vergrössern will, dies wäre optimal für meine Bedürfnisse!

                    3. im IE werden die Punkte vom Link (Navi7 und Navi8) nicht angezeigt, obwohl dies bei "Angebot anfordern" richtig funktioniert...im Mozilla wird das auch richtig angezeigt

                    4. im Mozilla wird der weisse Text auf rotem Hintergrund falsch zentriert und wandert etwas nach rechts...wie schafft man hier Abhilfe, etwa durch display:block???

                    5. Auch im Mozilla werden die Footer-Links (s. Punkt 4) nicht zentriert, im IE aber schon, wie es sein sollte...

                    Danke für Eure Mühen!

                    Gruss,
                    larry

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                  2. CSS am lebenden Beispiel

                    Daniel
                    – Informationen zu den Bewertungsregeln

                    Ahoi larry,

                    background-position: center center; war genau das, was ich gesucht habe.

                    und als aufmerksamer leser hast du diesen hinweis auch gelesen:

                    center center kann als center zusammengefasst werden

                    MfG

                    --
                    Alle Angaben wie immer ohne Gewähr
                    PPPS: ich trinke gerne ab und an mal eine tote Tante.
                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. CSS am lebenden Beispiel

                      larry
                      – Informationen zu den Bewertungsregeln

                      Ahoi,

                      und als aufmerksamer leser hast du diesen hinweis auch gelesen:

                      center center kann als center zusammengefasst werden

                      in der Zwischenzeit, während ich auf weitere Postings warte, lese ich natürlich aufmerksame die Texte durch und komme dann auch zu dieser Erkenntnis - habe die Änderung bereits online gestellt...

                      Gruss,
                      larry

                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln

  2. CSS am lebenden Beispiel

    larry
    – Informationen zu den Bewertungsregeln

    Nachtrag:

    wie sieht mein Projekt denn mit anderen Browsern aus, wenn ihr gerade andere zur Hand habt und den Quellcode mal anschauen möchtet - gibt es irgenwelche Hacks, die ich unbedingt mit einbeziehen muss, damit alles so angezeigt werden soll, wie es gedacht ist...?

    Bitte, wenn ihr Lust habt, jede einzelne Zeile analysieren und falls nötig, kritisieren bzw. Verbesserungsvorschläge machen - ich bin da sehr offen, neugierig und lernwillig, auch sehr kritikfähig...

    Vielen Dank für Eure Mühen!

    larry

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS am lebenden Beispiel

      wahsaga Homepage des Autors
      – Informationen zu den Bewertungsregeln

      hi,

      wie sieht mein Projekt denn mit anderen Browsern aus, wenn ihr gerade andere zur Hand habt und den Quellcode mal anschauen möchtet

      dein posting hier im selfforum sieht mit allen mir zur verfügung stehenden testbrowsern recht gut aus.
      (deine seite habe ich mir natürlich nicht angesehen, dazu fehlt ja der link.)

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS am lebenden Beispiel

        larry
        −1 Informationen zu den Bewertungsregeln

        Hallo wahsaga

        dein posting hier im selfforum sieht mit allen mir zur verfügung stehenden testbrowsern recht gut aus.
        (deine seite habe ich mir natürlich nicht angesehen, dazu fehlt ja der link.)

        Leider beachtet hier kaum jemand, dass ich CSS-Neuling bin, ich habe den Quellcode bereits in meinem ersten Post preisgegeben, die Seite selbst erstelle ich lokal, kann also nicht darauf verlinken...

        Ich habe gehofft, dass die immer so gewünschte Eigeninitiative auch etwas belohnt wird und finde diese Kommentare eher unqualifiziert...

        gruß,
        wahsaga

        Gruss,
        larry

        Beitrag melden
        −1
        Informationen zu den Bewertungsregeln

        1. CSS am lebenden Beispiel

          wahsaga Homepage des Autors
          – Informationen zu den Bewertungsregeln

          hi,

          Leider beachtet hier kaum jemand, dass ich CSS-Neuling bin, ich habe den Quellcode bereits in meinem ersten Post preisgegeben, die Seite selbst erstelle ich lokal,

          und deshalb erwartest du, dass alle anderen hier sich auch eine version deiner seite "lokal" erstellen?

          kann also nicht darauf verlinken...

          dann lade sie halt irgendwo hoch.

          gruß,
          wahsaga

          --
          /voodoo.css:
          #GeorgeWBush { position:absolute; bottom:-6ft; }
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. CSS am lebenden Beispiel

            larry
            – Informationen zu den Bewertungsregeln

            Hallo,

            dann lade sie halt irgendwo hoch.

            hier noch einmal für alle:
            http://www.fresh-content.de/angebot/

            Leider hatte ich vorher keine Gelegenheit, die Seite online zu stellen und so musste erstmal lokal herhalten ;-)

            Gruss,
            larry

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. CSS am lebenden Beispiel

              wahsaga Homepage des Autors
              – Informationen zu den Bewertungsregeln

              hi,

              hier noch einmal für alle:
              http://www.fresh-content.de/angebot/

              hm, da lässt sich zwar noch nicht allzu viel zu sagen - aber so eine vertreute navigation ist m.E. alles andere als hilfreich.

              oben drüber "Navi 1" bis "Navi 6", am linken rand dann "Navi 1.1" bis "Navi 1.5" - und unten drunter noch mal "Navi7", "Navi 8"?
              selbst wenn das jetzt mal mit sinnvollen, beschreibenden linktexten ausgestattet wäre, finde ich diese zerstückelung suboptimal. oder darf man davon ausgehen, dass unten nur noch links wie "Impressum" oder "Kontakt" hin kommen werden, die in der eigentlichen navigation nicht so wichtig sein sollen?

              derzeit ist oben "Navi 1" als "aktiv" ausgezeichnet, und auch links "Navi 1.1" - das finde ich widersinnig, aktiv ist immer nur genau ein menüpunkt. und der sollte dann auch kein link mehr sein, weil ein verlinken auf die aktuelle seite unsinnig ist.

              ansonsten gibt's, wie gesagt, noch nicht viel zu sagen - ob das optisch was "hermacht", lässt sich wohl erst sagen, wenn die ausgestaltung etwas differenzierte ist.

              gruß,
              wahsaga

              --
              /voodoo.css:
              #GeorgeWBush { position:absolute; bottom:-6ft; }
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. CSS am lebenden Beispiel

                larry
                – Informationen zu den Bewertungsregeln

                stimmt, unten stehen nur Kontakt und Impressum...

                ansonsten beinhaltet das horizontale Menü die Hauptmenüpunkte, wählt man dort einen aus, landet man auf der entsprechenden Unterseite, also daher Punkt 1.1, würde man z.B. Hauptpunkt 2 auswählen, so erhält man verkitak das Submenü 2.1, 2.2 etc.

                Ausserdem erscheint das Submenü (1.1 etc.) nicht auf der Startseite, sondern erst, nachdem man Hauptpunkte gedrückt hat...

                An der Navi soll vorerst nichts geändert werden, mir wäre es aber wichtig, zu erfahren, worin die anderen Probleme bestehen und Wege zu finden, diese zu lösen...

                Danke für Deine bisherige Unterstützung!

                Gruss,
                larry

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln