• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Feedback zu meiner CSS Seite

P

petz_e

New member
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.
 
Zuletzt bearbeitet:
petz_e schrieb:
Wenn das jetzt hier schon nicht so klappt wie ich mir das vorstelle, vergeht mir komplett die Lust daran weiter zu arbeiten.
Zum Vergrößern anklicken....

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: 
fieldset.left  {
    ..
width: 52%;
...
}

Und lass Validome mal drüberlaufen.
 
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.
 
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: 
/* 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;
}
 
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
 
Hi, ich hab mal Deine Angaben zur Navi ein wenig umgestellt
PHP: 
#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;
}
 
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
 
petz_e schrieb:
Doch sollte IE7 nicht auch relative, absolute und static position verstehen?
Zum Vergrößern anklicken....

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: 
#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.
 
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;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben