• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrund mittig, Bilder mittig - und trotzdem ungleich.

A

anti

Neues Mitglied
Hallo nochmal! Ich habe gerade ein weiteres Problem entdeckt.. Und zwar zeigt Internet Explorer alles schief an, obwohl Firefox alles so anzeigt, wie es sein soll.

Zu meinem Problem:
Ich habe ein Design erstellt, das ein weißes Viereck mit abgerundeten Ecken auf einem dunklen Hintergrund darstellt. Es sieht ungefähr wie folgt aus:

[Header mit abgerundeten Ecken]
|__________Content__________|
|__________Content__________|
|__________Content__________|
[Footer mit abgerundeten Ecken]

Alles ist mittig. Ich habe also die Seiten links und rechts durchgehend als mittigen Bg.

Die Bilder habe ich auch mittig gesetzt, so dass der Übergang von den Rändern vom Header.jpg. auf die Ränder vom bg.jpg passen. Bei Firefox ist alles super, passt alles! Bei InternetExplorer ist der Bg aber um eins weiter rechts...?! Warum auch immer..
Ich verstehe nicht, wo das Problem liegt. Ich gebe euch einfach mal den Code.. ich hoffe, jemand kann mir helfen.

Dankeschön!

Code: 
<style type="text/css">    

    body {
        margin: 0;
        padding: 0;
        background-color: #808080;
                background-image:url("bg.jpg");
                background-repeat:repeat-y;
                background-position:center;
        color: #959595;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12;
    }
</style>
Style-Code; Bg ist mittig eingestellt.

Code: 
<div align=center>
<img src="header01.jpg">
Code für meinen Header.

ALLES ist gleich breit .. warum verschiebt IntEx es dann, wenn ich es übereinanderlege?
 
Hallo anti!

Wäre nett, wenn du uns auch noch den CSS-Teil für Footer und Header, sowie die wichtigen Teile des HTML-Codes zeigen würdest, denn so lässt sich nur schwer eine Aussage machen.

Gruß,
fiedel
 
Okay! Und schon mal danke. Hier ist der gesamte Code in einem:

Code: 
<!-- HEADER -->
<html>
<title>xxx</title>
<head>
<style type="text/css">    

    body {
        margin: 0;
        padding: 0;
        background-color: #808080;
                background-image:url("bg.jpg");
                background-repeat:repeat-y;
                background-position:center;
        color: #959595;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12;
    }

        td {
        color: #959595;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12;
        }

        .copyright {
        color: #959595;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 9;
    
    a {    
        color:#9ac4ab;
    }
</style>
</head>
<body>

<div align=center>
<img src="header01.jpg"><br>

<table border="0" cellpadding="0" cellspacing="0" width="838">
  <tr>
    <td>
    <img src="header02.jpg">
    </td>

    <td style="vertical-align:top;">
    <img src="header03.jpg">
    </td>
  </tr>
</table><br>
<!-- HEADER ENDE -->

<table border="0" cellpadding="14" cellspacing="0" width="818">
  <tr>
    <td width="600">
    <!-- CONTENT -->
    TEST!
    <!-- CONTENT ENDE -->
    </td>

    <td width="218">
    <!-- MENU -->
    TEST2!
    <!-- MENU ENDE -->
    </td>
  </tr>
</table>

<!-- FOOTER -->
<p class="copyright">LALA</p>
<img src="footer.jpg">
</body>
</html>
<!-- FOOTER ENDE -->
Nicht wundern: Ich habe den Header in 3 Teile aufgeteilt. Etwa so:

[Header01]
[H02_][H3]

Passt alles perfekt im Firefox. Im IntEx passt es nicht auf den Bg.. obwohl alles die gleiche Breite etc. hat. :sad:

Bin für jede Hilfe dankbar!
Liebe Grüße.
 
Ahh...! Diese Zeilen habe ich schon oft in Quelltexten gesehen, doch konnte ich nie etwas damit anfangen. Irgendwie bin ich beim HTML-Lernen nie darauf gestoßen. So eine Zeile muss gaaanz am Anfang von meinem Code? Schon vor <html>? Oder erst danach? Und was für eine Zeile genau? Ich werde mir die Seite genaustens durchlesen [bin nur gerade auf dem Sprung aus der Tür heraus..] - danke!

Liebe Grüße.
 
Da du hier kein xHTML verwendest, empfehle ich dir HTML 4.01 (Strict):
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Das alleine genügt natürlich nicht! Du musst auch stets dafür sorgen, dass der Code entsprechend diesem Doctype valide ist, sonst bringt's nichts!
Ein nützliches Tool ist dieser Validator.

Hat jetzt mit deinem Problem nur indirekt was zu tun: die von dir verwendeten Tabellen sind semantisch nicht korrekt gesetzt! Tabellen werden zum Auswerten von tabellarischen Daten verwendet und nicht für Layouts.

Ich würde dir deshalb folgenden Aufbau empfehlen:


PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <title>Seitentitel</title>
 </head>
 <body>
   <h1 class="header"><img src="header.jpg" alt="Titel der Seite"></h1>
   <div class="content">
     <h2>Überschrift des Inhalts</h2>
     <p>Inhalt...</p>
     <p>Inhalt...</p>
   </div>
   <div class="footer">
     <p>Dies ist der Footer</p>
   </div>
 </body>
</html>
CSS:
Code: 
h1.header, div.content, div.footer {
width:838px;
margin:0 auto
}
 
Danke für die Antwort!

Zum Strict:
Wenn ich diese Zeile vor meinen Code knalle, haut der irgendwie meinen Code teilweise kaputt. Die Schriftgröße ist nicht mehr definiert & auf die Standard-nicht angegebene-Schriftgröße gesetzt.

"Das alleine genügt natürlich nicht! Du musst auch stets dafür sorgen, dass der Code entsprechend diesem Doctype valide ist, sonst bringt's nichts!"
D.h.? Wenn ich im Validator meine .php-Datei hochlade, zeigt er mir die richtige Anfangszeile an oder wie? Ich kenne mich mit diesem Doctype gar nicht aus, sorry... :(

Zum Layout:
Die Tabellen habe ich dafür verwendet, dass ich Content und Menü direkt nebeneinander platzieren kann. Wie kriege ich die denn nebeneinander, ohne Tabellen zu benutzen? Dein Code gefällt mir, aber um Content & Menü nebeneinander zu kriegen, würde ich selbst da Tabellen benutzen... :oops:

//edit: Ich versuche mal das gesamte Layout auf andere Weise zu coden. Wenn ich fertig bin, stelle ich es nochmals rein! Danke für eure Geduld. (: Frage 1 (zum Strict) gilt aber nach wie vor!
 
Zuletzt bearbeitet:
('tschuldigung für Doppelpost, aber so ist es, denke ich, übersichtlicher.. :|)

Sooo. Da ich gemerkt habe, dass der andere Code eher trash als sonst was war, habe ich es auf GANZ andere Weise versucht zu coden. Jetzt wird es im Firefox und im IntEx beides perfekt angezeigt. Ich habe auch einen Doctype am Anfang drin! Und ich arbeite zwar noch mit Tabellen, aber es ist nur mehr eine - ich weiß nicht, wie ich Menü & Content sonst nebeneinander stellen könnte..

Ich weiß nicht, ob es zu viel verlangt ist, aber ich vertraue euch irgendwie so sehr und wäre sooo dankbar, könnte jemand mal ein Kommentar über diesen Code abgeben. (: Sei es nur "Warum hast du das so umständlich gemacht..?!". Bin für alles dankbar! Ich will ja Fortschritte machen.

Dankeschön!!

Und hier ist der Code:
(manchmal sehr eingerückt und deswegen sehr breite Zeile, ich hoffe, das ist okay - das könnte ich für hier auch nochmal abändern.)

Code: 
<!-- HEADER -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>xxx</title>
<head>
<style type="text/css">    
    #layout {
        margin: 0;
        width:818px;
        font-size:12px;
        color: #959595;
        font-family: Verdana, Arial, Helvetica, sans-serif;
}

    #layout #header {
        background-image: url('header.jpg'); 
        background-repeat: no-repeat; 
        height:198px;
}

    #layout #content {
        font-size:12px;
        color: #959595;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        line-height: auto;
}

    #layout #menu {
        font-size:12px;
        color: #959595;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        line-height: auto;
}

    .copyright {
        font-size:10px;
        color: #959595;
        font-family: Verdana, Arial, Helvetica, sans-serif;
}

</style>

</head>
<body>


<body bgcolor="#808080">


<div align="center">
<div id="layout">

    <div style="background-image: url('header001.jpg'); width:100%; height:26px;"></div>
    
    <div style="background-image: url('bg001.jpg'); background-repeat: repeat-y; display:block;"> 
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="838px" valign="top">
                <div style="margin:0;">
                <div id="header">
                    <div style="padding:25px 0px 0px 600px;" align="center">
                    LOGIN
                    </div>                
                </div>

</div>

<table cellspacing="11" cellpadding="0" border="0" width="100%">


        <td width="600" id="content" valign="top">
<!-- HEADER ENDE -->


        <!-- CONTENT -->
        TEST
        <!-- CONTENT ENDE -->


        <!-- MENU -->
        </td>


        <td id="menu" valign="top" align="center">
        <div style="padding:0px 15px 0px 0px;" align="center">

            <img src="menu_rot.jpg" height="35"><div style="background-image: url('menu_bg.jpg'); background-repeat: repeat-y; display:block;"> 
                Link<br>
                Link<br>
                Link<br>
                Link
            </div>
            <img src="menu_ende.jpg" height="16">

            <br><br><br>

            <img src="menu_rot.jpg" height="35"><div style="background-image: url('menu_bg.jpg'); background-repeat: repeat-y; display:block;"> 
                Link<br>
                Link<br>
                Link<br>
                Link<br>
                Link<br>
                Link<br>
                Link
            </div>
            <img src="menu_ende.jpg" height="16">
        </div>
        </td>
</table>
        <!-- MENU ENDE -->

    <!-- FOOTER -->
    <div align=center>
    <p class="copyright">Impressum | Nutzungsbedingungen | Datenschutz
    <br>Optimiert für Mozilla Firefox | © 2009 xxx</p>
    <div style="background-image: url('footer001.jpg'); width:100%; height:80px;"></div>
    </body>
    </html>
    <!-- FOOTER ENDE -->
 
alsooo...

dann fange ich mal an deinen code aseinander zu nehmen.

erstmal zu deine oben schon angesprochenen problem. du missbrauchst tabellen für layoutzwecke, weil du die richtigen css eigenschaften anscheinend nicht kennst. diese lautet in diesem fall float. gib z.B. dem menu (links) ein float:left; und dem inhalt der rechts daneben stehen soll auch ein float:left; danach musst du allerdings noch clearen.
das machst du mit der css eigenschaft clear:both;
und diese gibst du dem element welches nach den gefloateten kommt.

solltest du das jetzt nicht verstanden haben ist das nicht schlimm. googel hilft ;-) suche einfach nach float und clearen und setzte geschickter weise noch ein css vor diese suchbegriffe^^

weiter im text...
du benutzt design attribute in html. dafür ist html aber nicht da. html dient nur dazu, dass du deinen inhalt valide und semantisch korrekt auszeichnest. design wird ausschließlich mit css gemacht. am besten in einem ausgelagerten stylesheet.
d.h. alle design attribute, wie bgcolor, align, valign ... solltest du durch entsprechende css eigenschaften austauschen.
noch etwas. du missbrauchst den <br> tag um abstände zu erzeugen. diese regelt man aber über die ss eigenschaft margin. und wie ich an deinen css angaben erkenne kennst du sie auch schon. also verwende sie auch ;-)

zum thema menu.
ein menu ist eine liste (auflistung von links). also zeichne es als solche aus.

Code: 
<ul id="menu">
   <li><a href="seite1.php">Seite1</a></li>
   <li><a href="seite2.php">Seite2</a></li>
   <li><a href="seite3.php">Seite3</a></li>
   <li><a href="seite4.php">Seite4</a></li>
   <li><a href="seite5.php">Seite5</a></li>
</ul>

ausschlaggebend für die css formatierung ist noch, dass du weißt was block- und was inlineelemente sind.
blockelemente, wie div werden untereinander dargestellt und inlineelemente, wie z.B. a werden in linie dargestellt und befinden sich in einem blockelement.
mit der css eigenschaft display kann man den einzelnen elementen sagen, wie sie sich verhalten sollen. display:block; macht aus dem element z.B. ein blockelement.

alle bilder die du in html einfügst benötigen ein alt attribut. also alt="bezeichnung des bildes"
ist ein hase dargestellt, dann schreibst du alt="Hase"
dieses attribut ist sehr wichtig für blinde, die z.B. den text auf websiten vorgelesen bekommen. sie hören dann das alt attribut.

ganz allgemein. du neigst zur div suppe. überlege dir was du mit deinem inhalt ausdrücken willst. ist es text, dann nimm <p>, ist es eine ungeordnete liste, dann nimm <ul>, sind es tabellarische daten, dann nimm <table> ...
es gibt immer ein entsprechendes tag in html.
die semantische bedeutung von div ist übrigens gruppieren. d.h. mit div gruppierst du mehrere elemente und kannst sie somit auch leichter mit css formatieren.

du hast also noch viel vor dir. aber mit ergeiz, selbstengagement und vieeel einsicht schaffst du das ;-)

grüße hokage
 
Erstmal vielen, vielen Dank für die Mühe! Ich habe mir all deine Kritik zu Herzen genommen. Ich habe die Tabelle entfernt. Danke, float hatte ich vorher wirklich noch nie gehört und stand wohl deswegen sehr auf dem Schlauch. Die design-Attribute habe ich ins css gepackt. Margin habe ich nun auch verwendet, genauso wie die Menüs in <ul> und <li> geschrieben. Das alt= werde ich auch noch hineincoden, aber erstmal habe ich wieder Fragen, bevor ich ans Feincoding gehe ..

1. Es existieren immer noch div-Codes in meinem Code; ich hoffe aber, es ist keine div-Suppe mehr? Wäre wieder superlieb, könntest du oder jemand anderes ein Auge darauf werfen! Ich beantworte auch gerne Fragen, warum ich etwas so wie es ist gemacht habe, etc..

2. Ich habe wieder ein Problem bei der Ausgabe im Internet Explorer. Dieser gibt das menu_bg.jpg hinter den Menüpunkten nicht mehr aus. Anstelle dessen ist dahinter nur eine weiße Lücke zu sehen. Weiß jemand Rat? Ich wäre sehr dankbar!

Nun, hier mein Code:
Code: 
<!-- HEADER -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>xxx</title>
<head>
<style type="text/css">    

    body {
        background-color:#808080;
        margin:auto;
        text-align:center;
}

    #layout {
        margin:auto;
        text-align:center;
        width:818px;
        font-size:12px;
        color: #959595;
        font-family: Verdana, Arial, Helvetica, sans-serif;
}

    #layout #header {
        background-image: url('header.jpg'); 
        background-repeat: no-repeat; 
        height:198px;
        text-align: left;
        padding:25px 0px 0px 600px;
        margin:0;
}

    #layout #content {
        font-size:12px;
        color: #959595;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        line-height: auto;
        float:left;
        width:578px;
        text-align: left;
        margin:11px;
        valign:top;
}

    #layout #menu {
        font-size:12px;
        color: #959595;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        line-height: auto;
        float:left;
        width:191px;
        valign:top;
        margin:10px 0px 30px 7px;
}

    #menu_bg {
        font-size:12px;
        color: #959595;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        line-height: auto;
        text-align:left;
        margin:auto;
        background-image: url('menu_bg.jpg');
        background-repeat: repeat-y;
                background-position:center;
        display:block;
}

    .copyright {
        font-size:10px;
        color: #959595;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        clear:both;
        text-align:center;
        margin:auto;
}

</style>

</head>
<body>


<div id="layout">

    <div style="background-image: url('header001.jpg'); width:100%; height:26px;"></div>
    
    <div style="background-image: url('bg001.jpg'); background-repeat: repeat-y; display:block;"> 
                        

                <div id="header">
                    LOGIN
                </div>




        <div id="content">
<!-- HEADER ENDE -->


        <!-- CONTENT -->
        TEST 
        <!-- CONTENT ENDE -->


        <!-- MENU -->
        </div>


        <div id="menu">

            <img src="menu_rot.jpg" height="35"><ul id="menu_bg">
                <br>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
            </ul>
            <img src="menu_ende.jpg" height="16">

            <br><br><br>

            <img src="menu_rot.jpg" height="35"><ul id="menu_bg"> 
                <br>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
            </ul>
            <img src="menu_ende.jpg" height="16">

        </div>
        <!-- MENU ENDE -->

    <!-- FOOTER -->
    <p class="copyright">Impressum | Nutzungsbedingungen | Datenschutz
    <br>Optimiert für Mozilla Firefox | © 2009 xxx</p>
    <div style="background-image: url('footer001.jpg'); width:100%; height:80px;"></div>
    </body>
    </html>
    <!-- FOOTER ENDE -->

Dankeschön!! :smile:
 
also bgeim überfliegen des codesfällt mir auch, dass du immernoch den <br> tag dazu missbrauchst um abstände zu erzeugen. er hat aber die semantische bedeutung einen zeilenumbruch in einem text zu erzeugen. verwende für außenabstände von elemente die css eigenschaft margin.

du kochst in einigen fällen noch div suppe, aber wenn du weist was du mit deinem inhalt ausdrücken willst, dann kannst du dir die frage eigentlich selber beantworten.

warum z.B. machst du ein leeres div dem du ein hintergrundpic mit css gibst. wenn du mit deinem bild irgendetwas aussagen willst, dann setzte es doch einfach in <img ... />

aber noch etwas. dein code ist noch relativ fehlerhaft. dir die ganzen fehler aufzuzeigen möchte ich jetzt aber nicht^^ faul und so :D
es gibt da allerdings eine tolle website die dir deine fehler zeigt.

The W3C Markup Validation Service

du gibst einfach die internetadresse deiner seite ein und dir werden alle invaliden elemente angezeigt.

grüße hokage

ps: ich würd dir raten dein stylesheet im header in eine normale .css datei auszulagern. wenn du nicht weist wie das geht, dann google nach "css stylesheet auslagern"
somit kannst du dein layout direkt auf alle seiten übertragen und dein quellcode wird übersichtlicher.
 
Für die 2. Frage wäre eine Liveansicht nützlich...

Ansonsten, was mir noch so auffällt: Du schreibst in deinem Quellcode...
Optimiert für Mozilla Firefox | © 2009
Zum Vergrößern anklicken....
Das meinst du hoffentlich nicht ernst! :)
Du meinst wohl "Optimiert für den Webdesigner"! Schau dir diese Seite mal an: Best Viewed with / Optimiert für ... Browser

Außerdem scheinst du nicht zu wissen, dass CSS auch Kurzschreibweisen bietet (ist mir v.a. bei "background-image" aufgefallen):
Code: 
background: transparent url(bg001.jpg) scroll repeat-y 0 0;
Siehe: background: Hintergrundbilder: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Weitere Kurzschreibweisen: CSS-Kurzschreibweise » Peruns Weblog

Das verstehe ich nicht ganz:
Code: 
    <p class="copyright">Impressum | Nutzungsbedingungen | Datenschutz
    <br>Optimiert für Mozilla Firefox | © 2009 xxx</p>
    <div style="background-image: url('footer001.jpg'); width:100%; height:80px;"></div>
...ich würds so machen:
Code: 
   <div class="footer">
    <p>Impressum | Nutzungsbedingungen | Datenschutz | © 2009</p>
   </div>
Den Absatz (<P>aragraph) der Klasse "copyright" sprichst du dann per CSS auf diese Weise an:
Code: 
.footer p {[I]css-Eigenschaften[/I]}

Gruß,
fiedel
 
anti schrieb:
Code: 
<!-- HEADER -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Zum Vergrößern anklicken....
Das solltest Du so nicht machen. Ältere Internet Explorer haben ein Problem damit, wenn vor dem Doctype noch irgendwas kommt und sei es auch nur ein Leerzeichen oder Zeilenumbruch. Sie schalten dann in den Quirks Mode, und dann hast Du das selbe Problem, wie ohne Doctype. Denn den nutzt du ja, um alle Browser in den Standards Mode zu schalten, um Darstellungsunterschiede zu minimieren.
Du solltest also den Kommentar unbedingt entfernen.
 
Oookay. Danke erstmal an alle User, die mir geantwortet haben & helfen wollen. :-P
Ich arbeite mich mal von vorne nach hinten druch.

@ hokage555
1) br-Tag: Die zwei br-Tags habe ich im Menü drin, weil ich zwischen Kategorie und Unterpunkt einen gewissen Zeilenabstand haben wollte. Im Endeffekt werde ich die beiden Tags aber eh rausstreichen, weil ich den Abstand nicht mehr brauche..

2) div-Suppe: Ich verwende divs für zum Beispiel als Login-Fläche. "div id="header"" - dort kommt dann das Coding einer Login-Schaltfläche hinein. "div id="content"" - dort kommt dann das gesamte Coding des Contents hinein, was allesmögliche sein könnte. Würdest du mir anderes vorschlagen?

3) Leeres div mit Bg: Ich will, dass man es nicht als Bild sieht, sondern als Hintergrund. Deswegen habe ich es mir sozusagen "komplizierter gemacht als nötig". Wenn man mit der Maus darüber geht, soll dort nichts zum Markieren sein.

4) .css-Datei: Das hatte ich ohnehin vor. :smile: Habe ich bei anderen meiner Seiten auch immer so gemacht. So, wie es hier ist, dachte ich mir nur, dass es übersichtlicher für's Forum ist. Eigentlich sind es ja auch 5 Dateien und nicht nur eine - ich habe nur alles in einen Code geschrieben. (css, header, content, menu, footer)

5) Den Service gucke ich mir gerne an, danke!

@ fiedel
1) Liveansicht: Daran dachte ich auch schon... Ich denke, ich lade es noch hoch, wäre wohl klüger, da hast du Recht. Mache ich noch. Dann kann man mir wahrschl auch leichter helfen.
- werde ich heute noch alles hochladen!

2) Optimierung: Naja, eigentlich meinte ich es schon ernst.. :oops: wie man in meinen vorigen Posting bemerkt, bemühe ich mich stets darum, dass es im InternetExplorer GENAUSO aussieht wie im Firefox, dass ja keine Fehler entstehen, egal welcher Browser benutzt wird, .. von daher könnte ich diesen Satz auch weglassen. Der Satz hat mir nur irgendwie gefallen & hat mir eine gewisse Sicherheit vermittelt, da alles im Ff eben perfekt angezeigt wird .. okay, darüber sollte ich nochmal nachdenken!

3) Kurzschreibweisen: Sind die denn wichtig oder besser? Die "Langschreibweisen" funktionieren ja anscheinend auch. (:

4) Footer: Stimmt, das ist viel logischer und schlichter! Danke dafür, das werde ich gleich umsetzen!

Irgendwie mache ich mir alles immer so kompliziert..

@ Efchen
Der Kommentar dient nur für den jetzigen Status zur Übersicht. Den Header (der beim "HEADER"-Kommentar anfängt und beim "HEADER ENDE"-Kommentar aufhört) will ich anschließend in eine sperate Datei einfügen und schließlich in die index-Datei includen. Das gleiche gilt für Menu, Content, usw. Das dient nur zu meiner Übersicht. Die Kommentare werden natürlich entfernt! Aber trotzdem danke. :smile:


- - Datei zum Angucken folgt! Damit ihr euch ein Bild machen könnt. (= [Ich hoffe heute noch, ich habe nur jetzt noch 2 wichtige Termine. Später oder abends also. Spätestens Morgen..]

Ich danke euch allen für eure Hilfe und bin bemüht, jede Kritik umzusetzen! Schmeißt mir also ruhig noch mehr an den Kopf.

Liebe Grüße,
anti.
 
anti schrieb:
1) br-Tag: Die zwei br-Tags habe ich im Menü drin, weil ich zwischen Kategorie und Unterpunkt einen gewissen Zeilenabstand haben wollte.
Zum Vergrößern anklicken....
Einen Abstand definiert man nur per CSS mit margin/padding, niemals mit einem HTML-Tag.

2) div-Suppe: Ich verwende divs für zum Beispiel als Login-Fläche. "div id="header"" - dort kommt dann das Coding einer Login-Schaltfläche hinein. "div id="content"" - dort kommt dann das gesamte Coding des Contents hinein, was allesmögliche sein könnte. Würdest du mir anderes vorschlagen?
Zum Vergrößern anklicken....
Das kann Sinn machen als logische Einteilung. Ohne den Code jetzt gesehen zu haben, sind solche divs aber oftmals überflüssig und verführen Webmaster oft zu unsauberem Arbeiten. Wenn mindestens 2 Elemente in Deinen divs drin sind, dann sind sie wahrscheinlich auch sinnvoll, denn div dient ja in vor allem zum Gruppieren mehrerer Elemente.

3) Leeres div mit Bg: Ich will, dass man es nicht als Bild sieht, sondern als Hintergrund. Deswegen habe ich es mir sozusagen "komplizierter gemacht als nötig". Wenn man mit der Maus darüber geht, soll dort nichts zum Markieren sein.
Zum Vergrößern anklicken....
Für eine Grafik, die nicht zum Content gehört, eine legitime Methode.

Der Satz hat mir nur irgendwie gefallen & hat mir eine gewisse Sicherheit vermittelt, da alles im Ff eben perfekt angezeigt wird .. okay, darüber sollte ich nochmal nachdenken!
Zum Vergrößern anklicken....
Der Satz ist eigentlich nur peinlich. Damit vermittelst Du dem Nutzer, dass Du eigentlich keine Ahnung hast.

Der Kommentar dient nur für den jetzigen Status zur Übersicht.
Zum Vergrößern anklicken....
Es ist egal, zu was er dient. Er schaltet den IE in den Quirks Mode, was Du tunlichst vermeiden solltest, wenn Du keine Darstellungsunterschiede willst.
 
Kurzschreibweisen: Sind die denn wichtig oder besser? Die "Langschreibweisen" funktionieren ja anscheinend auch.
Zum Vergrößern anklicken....
Das ist richtig, die Langschreibweisen funktionieren genauso gut und letzten Endes bleibt es auch dir überlassen, wie du es machst!
Nur ich verwende halt lieber Kurzschreibweisen, weil sie meist, wie der Name schon sagt, kürzer sind (das spart Zeit beim Coden und ich kann mehr Beiträge schreiben!!☺)!
Außerdem werden die Ladezeiten gesenkt, zwar nicht viel, aber das summiert sich und Besucher mit ISDN danken's mir, denke ich, auch!

Gruß,
fiedel
 
@ Efchen:
Oh, verdammt! Daran hätte ich denken sollen, dass ich bei der "Probe"-php-Datei alles ohne den Kommentar "HEADER" ansehen sollte.. danke. Weil er in den Quirks-Modus geschalten ist, hat er es nämlich falsch angezeigt. Und ich frage mich auch noch so lange, woran es liegen könnt, obwohl ihr es mir schon desöfteren indirekt gesagt habt .. :oops: Dankeschön!!

@ fiedel:
Oh, die Ladezeiten werden gesenkt? Dann, denke ich, ist es wirklich wert, mal auf die Abkürzungen einen Blick zu werfen. Danke, nehm ich mir zu Herzen, da informiere ich mich gleich mal ein wenig!



Also - der Bg der Menüzeilen wird nun auch beim IntEx angezeigt. Juhu! Nur ist der Text nicht so schön eingerückt wie beim Firefox. Mh. Wenn ich es mit margin einrücke, rückt der Bg leider mit.. Hat jemand eine Idee?

Hier der versprochene Liveview! (mit ausgeblendeten Graphiken :-o)
xxx
(@ Efchen: Das "Optimiert für" habe ich weggemacht, du hast Recht.. (: - ist aber bei der hochgeladenen Datei noch drin, nicht wundern)

Liebe Grüße!
Eure begeisterte anti, die gerne jede Hilfe annimmt.
 
Also - der Bg der Menüzeilen wird nun auch beim IntEx angezeigt. Juhu! Nur ist der Text nicht so schön eingerückt wie beim Firefox. Mh. Wenn ich es mit margin einrücke, rückt der Bg leider mit.. Hat jemand eine Idee?
Zum Vergrößern anklicken....
Ja, denn mit margin ergeugt man einen unsichtbaren Rahmen, der das gesamte Element verschiebt, da du aber nur den Inhalt verschieben willst, musst du padding nehmen!

Was mir auffällt ist, dass es sehr große Differenzen zwischen den einzelnen IEs gibt, siehe selbst: My DebugBar | IETester / HomePage

Fehler hat die Seite auch noch: [Invalid] Markup Validation of http://antitcg.an.funpic.de/test/index4.php - W3C Markup Validator
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben