Hintergrund (CSS) wird nicht angezeigt

Darkxor

Ich habe mich hierran gehalten und wollte somit ein Hintergrundbild nur horizontal anzeigen.
Jedoch hat der Browser anscheinend anderes vor.

HTML

<html>
<head>
<title>hierTitel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">




<style type="text/css">
background-image:url(backgrounds/bg1.gif);
background-repeat:repeat-x;
</style>


</head>
<body>


<center>
<br>
<table width="731".....

Alles anzeigen

Kennt wer von euch woraum er das Bild nun gar nicht anzeigt?
Und als es eben noch ging obwohl ich eigentlich gar nichts danach
verändert hatte, da wurde nach dem automatischen Verlängern der
Inhaltstabelle der Hintergrund nochmal horizontal angezeigt was auch
nicht sein sollte :?.

Elvis

Hättest Du Dich daran gehalten, dann würde Dein Quelltext so aussehen:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>background</title>
<style type="text/css">
#mithintergrund {
background:url(backgrounds/bg1.gif) repeat-x;
}
</style>
</head>
<body>
<div id="mithintergrund">.....

Alles anzeigen

Richtig wäre aber:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>background</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 100.1%;
}
#mithintergrund {
background:url(backgrounds/bg1.gif) repeat-x;
margin-top:1.5em;
}
</style>
</head>
<body>
<div id="mithintergrund">.....

Alles anzeigen

sejuma

Du musst die genannten Eigenschaften auch noch einem Element zuweisen.
Wenn es in deinem Fall die Tabelle ist, kannst du das so lösen:

Code

<style type="text/css">
#content {
background-image:url(backgrounds/bg1.gif);
background-repeat:repeat-x;
}
</style>

Und dann im body-Teil:

Zitat

<table id="content" width="731".....

Allerdings solltest du für reine Layout-Zwecke die Tabelle nicht missbrauchen. Sie dient nur einer strukturierten, tabellarischen Darstellung, wie z.B. einer Adressliste mit Name, Straße, Ort usw.
Besser wäre, wenn du ein CSS-Layout verwendest.

Elvis

Zitat von sejuma

wie z.B. einer Adressliste mit Name, Straße, Ort usw.

Man sollte dies aber nicht mit der Auszeichnung einer einzelnen Adresse vertauschen. Hierzu gibt es den Tag <address>. Nur mal so als Ergänzung.

Darkxor

Hallo ich hoffe mal damit verstoße ich nicht gegen irgendwelche Gesetze
wenn ich dies nun so regle:

HTML

<style type="text/css">




#content {
background-image:url(backgrounds/bg.gif);
background-repeat:repeat-x;
}




#nav {
    a:link {color:23292C; text-decoration:underline}
    a:visited {color:23292C; text-decoration:underline}
    a:active {color:23292C; text-decoration:underline}
    a:hover {color:136CAE; text-decoration:underline}
}
</style>

Alles anzeigen

Und dann im Body für den Hintergrund:

HTML

<body id="content">

Ebenso fällt euch bestimmt der Punkt #nav auf. Damit wollte ich nun
nur der Navigation einen Sytle zuweisen.

HTML

<table border="0" width="456" height="41" background="Bilder/index_03.png" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <center>
                        <span style="font-size:10pt;"><font face="Tahoma">
                        <div id="nav">
                        <a href="#">Home</a>
                        </div>
                        </font></span>
                        </center>
                    </td>
                </tr>
            </table>

Alles anzeigen

Ich habe es einmal mit der div versucht wie oben zu sehen und einmal mit:

HTML

<table border="0" width="456" height="41" background="Bilder/index_03.png" cellpadding="0" cellspacing="0" id="nav">

Bei beiden Versuchen wurde der Style nicht angenommen

sejuma

Dem body würde ich keinen id zuweisen. Das kannst du direkt so machen:

Code

body {
background-image:url(backgrounds/bg.gif);
background-repeat:repeat-x;
}

Bei den Links musst du dem Farbcode noch eine Raute voranstellen:

Zitat

a:link {color: #23292C; text-decoration:underline}

Darkxor

Hallo,
danke für den Hinweis leider geht es immer noch nicht.
Habe mir schon deine Seite angesehn:
http://www.ohne-css.gehts-gar.net/0003.php
Ich habe es nun genauso wie dort beschrieben und mit der
id wie mir es oben gezeigt wurde, jedoch wird der Standardstyle
vom Firefoix (Blau a:link / visited=lila...) immer noch angezeigt

Elvis

Anstelle immer nur andere Seiten zu verlinken, solltest Du lieber mal einen Link zu Deiner Problemseite posten.

Darkxor

Hallo,
ich habe die Seite nicht online sondern nur lokal.
Die Teile, die mit dem Problem zu tun haben, habe ich
bereits gepostet und wenn gewünscht wird alles zu sehen,
hier die komplette HTML Datei:

HTML

<html>
<head>
<title>xxxxxxxxxxxxxxxx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<style type="text/css">




body {
background-image:url(backgrounds/bg.gif);
background-repeat:repeat-x;
}




#nav {
    a:link {color:#23292C; text-decoration:underline}
    a:visited {color:#23292C; text-decoration:underline}
    a:active {color:#23292C; text-decoration:underline}
    a:hover {color:#136CAE; text-decoration:underline}
}
</style>






</head>
<body>


<center>
<br>
<table width="731" height="488" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="3">
            <img src="Bilder/index_01.png" width="258" height="86" alt=""></td>
        <td colspan="2">
            <img src="Bilder/index_02.png" width="473" height="34" alt=""></td>
    </tr>
    <tr>
        <td>
            <table border="0" width="456" height="41" background="Bilder/index_03.png" cellpadding="0" cellspacing="0" id="nav">
                <tr>
                    <td>
                        <center>
                        <span style="font-size:10pt;"><font face="Tahoma">
                        <a href="#">Home</a>

                        </font></span>
                        </center>
                    </td>
                </tr>
            </table>
        </td>
        <td rowspan="2">
            <img src="Bilder/index_04.png" width="17" height="52" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/index_05.png" width="456" height="11" alt=""></td>
    </tr>
    <tr>
        <td  colspan="3">
            <table border="0" width="731" background="Bilder/index_06.png" cellpadding="0" cellspacing="0">
                <tr align="left" valign="top">
                    <td>
                        <center>
                        <table border="0" width="690" height="377" cellpadding="0" cellspacing="0">
                            <tr align="left" valign="top">
                                <td>
                                <span style="font-size:12pt;"><font face="Tahoma" color="#333333">
                                    <table border="0" width="690" cellpadding="0" cellspacing="0">
                                        <tr align="left" valign="top">
                                            <td width="406">
                                                <p><strong><font color="#4B90C2">Herzlich Willkommen auf meiner Internetseite! </font></strong></p>

                                            </td>
                                            <td width="284">
                                                xxxxxxxxxxxxxxxxxxxxx
                                            </td>
                                        </tr>
                                    </table>    
                                </font></span>
                                </td>
                            </tr>
                        </table>
                        </center>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="Bilder/index_07.png" width="731" height="25" alt=""></td>
    </tr>
</table>
</center>
</body>
</html>

Alles anzeigen

sejuma

Ganz nach Beispiel ist das auch nicht.
So sollte es klappen:

Code

#nav a {
color:#23292C;
}


#nav a:hover {
color:#136CAE;
}

Zum Verständnis:
Die erste Angabe bedeutet: Gilt für alle Links und alle Linkzustände innerhalb von #nav.
In der zweiten Angabe wird definiert, was bei hover von der ersten Angabe abweichen soll. Das ist nur die Farbe.
Text-decoration: underline ist Stadard und kann man deshalb auch weglassen.

Elvis

Zitat von Darkxor

Die Teile, die mit dem Problem zu tun haben, habe ichbereits gepostet und wenn gewünscht wird alles zu sehen,hier die komplette HTML Datei:

Wieso postest Du eigentlich immer Links zu Seiten wo man was lernen sollte, änderst aber die Fehler die Dir aufgezeigt werden nicht? Sowas kann ich immer nicht verstehen.

Hintergrund (CSS) wird nicht angezeigt

Tags

Benutzer online in diesem Thema