Ergebnis 1 bis 11 von 11
  1. #1
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    Feedback zu meiner CSS Seite

    Hallo,

    Kann sich mal bitte jemand meine Test-Seite ansehen.

    [link removed]

    Ich habe die erste Seite so zusammengebaut damit sie in Firefox 2 (Win) korrekt aussieht. Jetzt habe ich sie aber mal in Firefox 3 (für Mac) geöffnet und dieser wirft das Layout durcheinander. Safari (Mac) kapiert mein CSS völlig falsch.

    Richtig ist es wenn die zwei Container nebeneinander stehen und der grosse Überschrift im grauen Container ist. Wenn das jetzt hier schon nicht so klappt wie ich mir das vorstelle, vergeht mir komplett die Lust daran weiter zu arbeiten.
    Geändert von petz_e (08-10-2008 um 13:45 Uhr)

  2. #2
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Feedback zu meiner CSS Seite

    Zitat Zitat von petz_e Beitrag anzeigen
    Wenn das jetzt hier schon nicht so klappt wie ich mir das vorstelle, vergeht mir komplett die Lust daran weiter zu arbeiten.
    Immer mit der Ruhe, sieht doch gar nicht so schlecht aus. Mit der Prozentrechnung gibt es ein Problem. Habs jetzt nur im FF3 angesehen. Gib dem linken fieldset mal
    PHP-Code:
    fieldset.left  {
        ..
    width52%;
    ...

    Und lass Validome mal drüberlaufen.


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  3. #3
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: Feedback zu meiner CSS Seite

    Safari erkennt auf dem selben Computer die Text-formatierung nicht. D.h. er zeigt eine andere Schrift an, die Grösse und der Zeilenabstand sind zurück auf normal. Was aber noch schlimmer ist, er nimmt meine absolute Positionierung von den Überschriften nicht ernst und setzt diese einfach oben auserhalb der grauen Felder.

  4. #4
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Feedback zu meiner CSS Seite

    Weiß nicht wirklich, warum Du keine normalen Überschriftenelemente wie h1 usw. verwendest. Ich hab mal ein wenig probiert und in Deinem CSS-Bereich INDEX an einigen Stellen etwas geändert. Damit siehts unter Win recht gut aus im FF3, Safari, IE7. Der IE6 müsste aber noch ne extra Behandlung haben, wenn der Rest so bleiben soll:
    PHP-Code:
    /* INDEX -------------------------------------------------------------------- */

    fieldset.left {
        
    positionrelative;
        
    floatleft;
        
    width52%;
        
    margin-right2%;
        
    padding1.75em 4px 4px 4px;
        
    border1px solid #ddd;
        
    background-color#eee;
    }
    fieldset.right {
        
    positionrelative;
        
    width43%;
        
    padding1.75em 4px 4px 4px;
        
    border1px solid #ddd;
        
    background-color#eee;
    }
    fieldset legend {
        
    color#000;
        
    font-familyTahomaArialHelveticasans-serif;
        
    font-size26px;
        
    font-weightbold;
        
    letter-spacing: -1px;
        
    line-height0.9;
        
    text-transformuppercase;
        
    padding:0em 0 0 2.5em;
    }
    legend span{
        
    position:relative;
        
    left.25em;
        
    top.75em;
        
    bottom.5em;
    }
    *+
    html legend span{
        
    position:relative;
        
    top: -.25em;



    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  5. #5
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: Feedback zu meiner CSS Seite

    Ich habe die Seite jetzt mal umbebaut und verzichte auf die ganzen Fieldsets und label und arbeite mit h-headern und div-container. Der Source sieht jetzt auch übersichtlicher aus.

    Webpage

    Ein Problem habe ich aber noch. Internet Explorer 7 setzt das Menu links neben die Seite anstatt direkt unter das Banner. In IE 6 wirds bis jetzt noch korrekt angezeigt.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      
      <title>Webpage</title>
      
      <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    
    <body>
      
      <div id="page">
      
        <div id="header">
    
            <div id="banner"><a href="index.php"><img src="images/banner.jpg" /></a></div>
            <div id="navigation">
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li><a href="gallery.php">Portfolio</a></li>
                    <li><a href="tutorials.php">Tutorials</a></li>
                    <li><a href="about.php">About</a></li>
    
                    <li><a href="contact.php">Contact</a></li>
                    <li><a href="comments.php">Comments</a></li>
                    <li><a href="links.php">Links</a></li>
                </ul>
            </div>
        </div>
        
        <div id="content_default">
    
             <div class="span-1">
                 <h1>Heading 1</h1>
                 <p>Lorem ipsum dolor sit amet, consectetuer (...)</p>
                 <h1>Heading 2</h1>
                 <p>Aenean cursus leo et lorem.(...)</p>
             </div>
             <div class="span-2">
                 <h1>Heading 3</h1>
                 <p>Ut massa risus, iaculis et, aliquet a, (...)</p>
             </div>
             <div class="clear-it"></div>
        
        </div> <!-- Content -->
    
        <div id="footer"><p>copyright Patrick Eischen</p></div>
      </div> <!-- page -->
    
    </body>
    
    </html>
    Patrick

  6. #6
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Feedback zu meiner CSS Seite

    Hi, ich hab mal Deine Angaben zur Navi ein wenig umgestellt
    PHP-Code:
    #navigation {
    positionrelative;
    height34px;
    margin0 4px 0 4px;
    backgroundurl(images/menu.pngrepeat-x;
    }
    #navigation ul {
    top0right10px;
    margin0 0 0 282px;
    padding0;
    font92.5%/1.4 "Arial Black"Tahomasans-serif;
    list-
    style-typenone;
    }
    #navigation ul li {
    positon:relative;
    floatleft;
    margin0;
    padding0;
    }
    #navigation li a {
    floatleft;
    width80px;
    color#fff;
    line-height34px;
    text-aligncenter;
    border-bottom4px solid #fff;
    }
    #navigation li a:hover {
    color#ff9900;
    background#2d3134;
    border-bottom4px solid #ff9900;



    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  7. #7
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: Feedback zu meiner CSS Seite

    Anstatt der absoluter Positionierung am rechten Rand wird mit einem maßgeschneiderten Aussenabstand gearbeitet. Das erfüllt auch seinen Zweck. Doch sollte IE7 nicht auch relative, absolute und static position verstehen?

    Patrick

  8. #8
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Feedback zu meiner CSS Seite

    Zitat Zitat von petz_e Beitrag anzeigen
    Doch sollte IE7 nicht auch relative, absolute und static position verstehen?
    Das kann er das auch:
    position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

    Trotzdem scheint ihm Dein Naviaufbau nicht zu schmecken.

    Sehe gerade, dass ich position hier noch vergessen habe
    PHP-Code:
    #navigation ul {
    positon:relative
    Der 6er kommt mit der PNG-Transparenz nicht zurecht und zeigt deshalb den Rand so deutlich an.
    Abhilfe:
    Transparente PNGs im Internet Explorer 6

    Außerdem schau mal bei Validome nach.


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  9. #9
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: Feedback zu meiner CSS Seite

    Ach so, ja.

    So klappt es aber auch ohne absolute und relative Positionierung:

    Code:
    #navigation {
        height: 34px;
        margin: 0 4px 0 4px;
        background: url(images/menu.png) repeat-x;
    }
    
    #navigation ul {
        float: left;
        margin: 0 0 0 282px;
        padding: 0;
        font: 92.5%/1.4 "Arial Black", Tahoma, sans-serif;
        list-style-type: none;
    }
    
    #navigation ul li {
        float: left;
        margin: 0;
        padding: 0;
    }
    
    #navigation li a {
        float: left;
        width: 80px;
        color: #fff;
        line-height: 34px;
        text-align: center;
        border-bottom: 4px solid #fff;
    }

  10. #10
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Feedback zu meiner CSS Seite

    Zitat Zitat von petz_e Beitrag anzeigen
    So klappt es aber auch ohne absolute und relative Positionierung:
    Schau mal hier nach (IE6 einstellen):
    IE NetRenderer - Browser Compatibility Check -


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  11. #11
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: Feedback zu meiner CSS Seite

    Ieh, wie hässlich. Habs wieder umgebaut

Ähnliche Themen

  1. php script ohne neue seite
    Von weinreich im Forum Serverseitige Programmierung
    Antworten: 12
    Letzter Beitrag: 26-04-2006, 20:39
  2. Anker nach Neuladen einer Seite anspringen
    Von tschroeder im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 06-03-2006, 12:16
  3. Serverseitiges css
    Von H34d im Forum Allgemeines
    Antworten: 4
    Letzter Beitrag: 19-10-2003, 13:42
  4. Antworten: 2
    Letzter Beitrag: 18-04-2002, 20:10
  5. Html Seite vorladen in den Cash
    Von Fränki im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 14-04-2002, 14:18

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •