Feedback zu meiner CSS Seite

**petz_e** · 18-09-2008, 01:59

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.

**anna55** · 18-09-2008, 08:38

Zitat von petz_e

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  {

    ..

width: 52%;

...

}

Und lass Validome mal drüberlaufen.

**petz_e** · 18-09-2008, 13:03

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.

**anna55** · 18-09-2008, 22:42

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 {

    position: relative;

    float: left;

    width: 52%;

    margin-right: 2%;

    padding: 1.75em 4px 4px 4px;

    border: 1px solid #ddd;

    background-color: #eee;

}

fieldset.right {

    position: relative;

    width: 43%;

    padding: 1.75em 4px 4px 4px;

    border: 1px solid #ddd;

    background-color: #eee;

}

fieldset legend {

    color: #000;

    font-family: Tahoma, Arial, Helvetica, sans-serif;

    font-size: 26px;

    font-weight: bold;

    letter-spacing: -1px;

    line-height: 0.9;

    text-transform: uppercase;

    padding:0em 0 0 2.5em;

}

legend span{

    position:relative;

    left: .25em;

    top: .75em;

    bottom: .5em;

}

*+html legend span{

    position:relative;

    top: -.25em;

}

**petz_e** · 22-09-2008, 17:09

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

**anna55** · 22-09-2008, 20:06

Hi, ich hab mal Deine Angaben zur Navi ein wenig umgestellt

PHP-Code:


#navigation {

position: relative;

height: 34px;

margin: 0 4px 0 4px;

background: url(images/menu.png) repeat-x;

}

#navigation ul {

top: 0; right: 10px;

margin: 0 0 0 282px;

padding: 0;

font: 92.5%/1.4 "Arial Black", Tahoma, sans-serif;

list-style-type: none;

}

#navigation ul li {

positon:relative;

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;

}

#navigation li a:hover {

color: #ff9900;

background: #2d3134;

border-bottom: 4px solid #ff9900;

}

**petz_e** · 22-09-2008, 22:12

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

**anna55** · 22-09-2008, 22:35

Zitat von petz_e

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.

**petz_e** · 22-09-2008, 23:06

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;
}

**anna55** · 22-09-2008, 23:21

Zitat von petz_e

So klappt es aber auch ohne absolute und relative Positionierung:

Schau mal hier nach (IE6 einstellen):
IE NetRenderer - Browser Compatibility Check -

**petz_e** · 23-09-2008, 01:11

Ieh, wie hässlich. Habs wieder umgebaut

Thema: Feedback zu meiner CSS Seite

LinkBack

Themen-Optionen

Anzeige

Feedback zu meiner CSS Seite

AW: Feedback zu meiner CSS Seite

AW: Feedback zu meiner CSS Seite

AW: Feedback zu meiner CSS Seite

AW: Feedback zu meiner CSS Seite

AW: Feedback zu meiner CSS Seite

AW: Feedback zu meiner CSS Seite

AW: Feedback zu meiner CSS Seite

AW: Feedback zu meiner CSS Seite

AW: Feedback zu meiner CSS Seite

AW: Feedback zu meiner CSS Seite

Ähnliche Themen

php script ohne neue seite

Anker nach Neuladen einer Seite anspringen

Serverseitiges css

selbständiges neuladen einer 2. Seite nach vollständigem download der 1.

Html Seite vorladen in den Cash

Lesezeichen

Lesezeichen

Berechtigungen

Swiper Slide Activ ID auslesen

Swiper Slide Activ ID auslesen

Swiper Slide Activ ID auslesen