Bildwechsel mit a:hover?!?

tomstar · 24 März 2009

Hallo zusammen,

ich habe mich jetzt hier angemeldet, weil ich einfach absolut nicht weiter komme.

Habe auf meiner Webseite ein Bild in kleinere Bilder geschnitten um diese gezielt in eine Tabelle einzubauen und zu verlinken.
Nun möchte ich wenn man über einen Link mit der Maus darüber fährt, dass dann das 2. Bild (das ich etwas ausgegraut habe) erscheint.

Ich habe auf selfhtml.org dazu eine Hilfe gefunden.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 <title>Rollover mit CSS - Beispiel 5</title>
 <style>
   a       { display:block;
             background-image:url(button.gif);
             width:120px; height:30px }
   a:hover { background-image:url(button_on.gif); }
 </style>
</head>
<body>
  <h1>Bild-Button mit CSS</h1>
  <p><a href="#">&nbsp;</a></p>
</body>
</html>

Ok das funktioniert so ganz gut, doch wenn ich es auf meiner Seite anwenden möchte mit einer seperaten CSS-Datei wird es absolut nicht umgesetzt und die Bilder werden nicht dargestellt.

Hier meine Pasage auf der HTML Seite mit der Tabelle:

Code:

<table class="angebot" width="798" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="2">
            <img src="bilder/img1_01.gif" width="798" alt=""></td>
    </tr>
    <tr>
        <td rowspan="4">
            <img src="bilder/img1_02.gif" width="553"alt=""></td>
        <td class="bildver">
            <a href="http://www.drexler-immobilien.com" target="_blank">&nbsp;</a></td>
    </tr>
    <tr>
        <td>
            <a href="http://www.drexler-immobilien.com" target="_blank"><img src="bilder/img1_04.gif" width="245" alt="Wohnungen"></a></td>
    </tr>
    <tr>
        <td>
            <a href="http://www.drexler-immobilien.com" target="_blank"><img src="bilder/img1_05.gif" width="245" alt="Gewerbe"></a></td>
    </tr>
    <tr>
        <td>
        <a href="http://www.drexler-immobilien.com" target="_blank"><img src="bilder/img1_06.gif" width="244" alt="Grundstück"></a></td>
    </tr>
</table>

Hier die class=bildver aus der CSS-Datei:

Code:

.bildver a{
display:block;
background-image:url(bilder/img1_03.gif);
width: 245;
height: 90;
}
.bildver a:hover {
background-image:url(bilder/img1_03_silver.gif);
}

Ich weiß echt nicht woran es liegen könnte.
Die Class kann ich doch in den <td> bereich eintragen oder setze ich die Class an der falschen Stelle?

Ich bitte um Hilfe ich komm hier einfach nicht weiter.

Gruß vom Rookie im Board.

Loon3y · 24 März 2009

Willkommen.

Zuersteinmal brauchst du für z.b. dein Menu keine Tabelle, sondern eine Liste. Da dies eine Auflistung von Menupunkten ist.

Und dann hast du class="angebot", was aber nirgends hier im css festgelegt ist.

einfacher wäre es so:

Code:

<ul>
<li> <a href="#"> Punkt 1 </a> </li>
<li> <a href="#"> Punkt 2 </a> </li>
<li> <a href="#"> Punkt 3 </a> </li>
<li> <a href="#"> Punkt 4 </a> </li>
</ul>

und css:

Code:

li { background-image: url(bild_off.jpg); width: 120px; height: 30px; }
li:hover { background-image: url(bild_on.jpg); width: 120px; height: 30px; }

Das ist natürlich nur ein Ansatz...wie du es letzenendes machst, ist dir überlassen.
Wenn du weiteres wissen willst und nicht dahinter kommst, kannst du gerne fragen.

EDIT: natürlich kannst du auch statt li { ... } dein li a { ...} und darausfolgend li a:hover { ... } nehmen.

Gruß
Loon3y

tomstar · 24 März 2009

Ich setzt mal den gesamten code rein.
Da es kein Menü sein soll was ich darstellen möchte.

Ich habe einen head, menü, main, downmenu und footer.
Und im Main ist das zerschnittene Bild.

Hier die HTML-Datei:

Code:

<html>                                                     
  <head>                                                                                         
    <title>Drexler-Immobilien.com                                                                                          
    </title> 
<script type="text/javascript" src="js/sfHover.js"></script>                                                                                 
    <link rel="stylesheet" type="text/css" href="css/css.css">                                                    
  </head>                                                     
  <body>           
    <center>                
      <div class="container">                     
        <div class="head">Der Weg ins Eigenheim ist meist nicht so schwer wie man denkt!           
          <br>Mit uns erreichen Sie es auf alle F&auml;lle unkomplizierter.         
        </div>        
        <table class="tablemenu">
          <tr>
            <td id="nav">       
              <ul><li>
                <a href="angebot.html">Unser Angebot</a></li>          <li>
                <a href="#">Dienstleistung</a>          
                <ul>  <li>                             
                  <a href="#">Verkauf</a></li>  <li>                             
                  <a href="#">Vermietung</a></li>                            
                </ul></li>          
                <li>
                <a href="#">Nebenkosten</a></li>          
                <li>
                <a href="gutschein.html">Gutschein</a></li>                        
              </ul></td>        
          </tr>    
    
        </table>                                                   
 <table class="angebot" width="798" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="2">
            <img src="bilder/img1_01.gif" width="798" alt=""></td>
    </tr>
    <tr>
        <td rowspan="4">
            <img src="bilder/img1_02.gif" width="553"alt=""></td>
        <td class="bildver">
            <a href="http://www.drexler-immobilien.com" target="_blank">&nbsp;</a></td>
    </tr>
    <tr>
        <td>
            <a href="http://www.drexler-immobilien.com" target="_blank"><img src="bilder/img1_04.gif" width="245" alt="Wohnungen"></a></td>
    </tr>
    <tr>
        <td>
            <a href="http://www.drexler-immobilien.com" target="_blank"><img src="bilder/img1_05.gif" width="245" alt="Gewerbe"></a></td>
    </tr>
    <tr>
        <td>
        <a href="http://www.drexler-immobilien.com" target="_blank"><img src="bilder/img1_06.gif" width="244" alt="Grundstück"></a></td>
    </tr>
</table>
      
        <div class="downmenu">                     
          <a href="index.html">Startseite</a>                       
          <a href="impressum.html">Impressum</a>                       
          <a href="kontakt.html">Kontakt</a>                                  
        </div>                 
        <div class="footer">          
          <p>&copy;              
            <a href="http://www.drexler-immobilien.com">http://www.drexler-immobilien.com</a>          
          </p>                 
        </div>                
      </div>         
    </center>        
  </body>
</html>

Hier die CSS:

Code:

/* Mainsite Formation*/
body {
    color: black;
    font-family: verdana;
    font-size: 12px;
    text-align: center;
}
.container {
    width: 800px;
    background-color: white;
    text-align: left;
    border-width: 1;
    border-color: black;
}
.head {
    border-width: 1;
    border-color: black;
    border-left-style: dotted;
    border-right-style: dotted;
    border-top-style: dotted;
    border-bottom-style: dotted;
}
.menu {
    border-width: 1;
    border-color: black;
    border-left-style: dotted;
    border-right-style: dotted;
}
.main {
    border-width: 1;
    border-color: black;
    border-top-style: dotted;
    border-bottom-style: dotted;
    border-left-style: dotted;
    border-right-style: dotted;
  clear: left;
}
.main img {
        width: 100%;
}

/*Tabelle Verkauf*/
.angebot {
    border-width: 1;
    border-color: black;
    border-right-style: dotted;
    border-left-style: dotted;
    border-top-style: dotted;
    border-bottom-style: dotted;
}
.angebot img {
  border: 0;
}
.bildver a{
display:block;
background-image:url(bilder/img1_03.gif);
width: 245;
height: 90;
}
.bildver a:hover {
background-image:url(bilder/img1_03_silver.gif);
}
/*Tabelle Verkauf ENDE*/

/*Downmenü formatierung*/
.downmenu {
    border-width: 1;
    border-color: black;
    border-left-style: dotted;
    border-right-style: dotted;
    border-bottom-style: dotted;
    text-align: right;
}
.downmenu a{
text-decoration: none;
color: black;
}
.downmenu a:hover{
text-decoration: none;
background-color: rgb(255,153,0);
}
/*Fußzeile Formatierung*/
.footer {
    color: black;
    font: 9px arial;
    text-align: center;
}
.footer a{
text-decoration: none;
color: black;
}
.footer a:hover {
    text-decoration: underline;
    background-color: white;
}
/*Impressums Formatierung*/
.impressum {
    border-width: 1;
    border-color: black;
    font: 20px arial;
    text-align: center;
    border-right-style: dotted;
    border-left-style: dotted;
    border-top-style: dotted;
    border-bottom-style: dotted;
}
/*Menue formatierung*/
.tablemenu {
    border-width: 1;
    border-color: black;
      border-right-style: dotted;
    border-left-style: dotted;
    width: 100%;

}
#nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;

}

#nav a {
    display: block;
    width: 180px;
    color: black;
}
#nav a:hover{
text-decoration: none;
background-color: rgb(255,153,0);
}

#nav li { /* all list items */
    float: left;
    width: 180px; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
    position: absolute;
    width: 180px;
    left: -300em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
}

Loon3y · 24 März 2009

html:

- Doctype fehlt
- <center> verwendet man nichtmehr
- <div class="head"> ist "falsch". eine überschrift zeichnet man mit <h1> bis <h6> aus. für den Header wäre doch die überschrift 1. grades angebracht. sprich <h1> ... </h1>
- ein menu in der tabelle? wieso ?
- downmenu ist auch eine auflistung -> <ul> <li> .. </li> </ul>

css:

- sachen wie border-width: 1, border-color: .., usw usf kann man zusammenfassen in: border: 1px solid #000000;
(statt "solid" gehen natürlich auch "dotted", "dashed", ...)
- width und height die angaben, da fehlt die einheit? Was für einheit magst du? äpfel? birnen? px? em?
- du mischt em, dann mal px, dann mal %...leg dich auf was fest =)
- farben gibst du mal mit "red"; mal mit #ff00000; mal mit rgb(xyz); an...wenn du es einheitlich machst besteht mehr übersicht

Beheb erstmal die fehler im html, denn es nützt nichts wenn man fehler im css sucht, wenn der html-part noch nicht valide ist..

grüßli...

tomstar · 24 März 2009

Ich weiß das der code aktuell noch fehler haft ist.
Hängt nur damit zusammen, weil das nur ein rohentwurf der darstellung ist.

Die seite ist gerade erst im aufbau und mein augenmerk lege ich aktuell nur daruaf, warum das nicht funktioniert mit dem Hover.

Wenn das mit drin ist ist mein Darstellungstest und funktion erst mal abgeschlossen und dann geh ich an die Aufräumarbeiten.

Das ist leider meine arbeitsweise sorry.

Bitte legt also nur den blick auf die Funktion mit dem Bild ersetzen durch hover.

Danke!

Loon3y · 24 März 2009

tomstar schrieb:
Ich weiß das der code aktuell noch fehler haft ist.
Hängt nur damit zusammen, weil das nur ein rohentwurf der darstellung ist.

Die seite ist gerade erst im aufbau und mein augenmerk lege ich aktuell nur daruaf, warum das nicht funktioniert mit dem Hover.

---->

Loon3y schrieb:
Beheb erstmal die fehler im html, denn es nützt nichts wenn man fehler im css sucht, wenn der html-part noch nicht valide* ist..

any questions?

Edit: *nicht valide = fehlerhaft

tomstar · 24 März 2009

wieder mal so ein tolles forum wo einem nicht auf die Frage geantwortet wird sondern eher nur grundsätzliche beanstandungen gemacht werden, weil man nicht so arbeitet wie der andere.

Ich find es schwach ich versuch es in einem neuen Forum oder bei Bekannten.

Und tschüss.

Loon3y · 24 März 2009

tomstar schrieb:
wieder mal so ein tolles forum wo einem nicht auf die Frage geantwortet wird sondern eher nur grundsätzliche beanstandungen gemacht werden, weil man nicht so arbeitet wie der andere.

Ich find es schwach ich versuch es in einem neuen Forum oder bei Bekannten.

Und tschüss.

Es geht nicht darum das wir auf deine Frage nicht eingehen, sondern das wir nicht auf deine Frage eingehen können, weil dies nicht möglich, bzw. nicht von nutzen ist, da dein html-teil fehlerhaft ist.

Das ist in keinstem Falle böse gemeint oder abwertend, sondern eine Tatsache. Du kannst dein Auto auch nur in der Werkstatt reparieren lassen wenn sie deinen FAhrzeugschlüssel und die Fahrzeugpapiere haben um Ersatzteile zu bestellen und diese dann einbauen können.

Gruß.

Efchen · 24 März 2009

tomstar schrieb:
wieder mal so ein tolles forum wo einem nicht auf die Frage geantwortet wird sondern eher nur grundsätzliche beanstandungen gemacht werden, weil man nicht so arbeitet wie der andere.

Das hat primär nichts mit der Arbeitsweise zu tun, sondern damit, dass Du bei CSS einen validen und semantisch korrekten HTML-Code zur Basis haben musst, weil das mit CSS sonst nicht anständig funktioniert.
Syntaktische Fehler im HTML- oder CSS-Code führen dazu, dass der Browser nicht weiß, wie er sich verhalten soll, er macht es also auf gut Glück. Dass es da zu Darstellungsunterschieden oder -problemen kommt, ist vorprogrammiert.

Es ist offensichtlich, dass Du Dir dieser Zusammenhänge nicht bewusst bist, dann musst Du aber auch diese Empfehlungen annehmen, und nicht gleich rumschimpfen. Die Antwort kommt nicht von unterschiedlicher Arbeitsweise, sondern beruht auf Erfahrungen. Die Dir fehlen - weswegen Du hier nicht rummotzen solltest, sondern das beherzigen solltest. Sonst kann man Dir nicht helfen.

Ich find es schwach ich versuch es in einem neuen Forum oder bei Bekannten.

Deine Reaktion ist auch nicht anders, schwach.

Aber die direkte Antwort auf Deine Frage wäre die:
In CSS musst Du bei Größenangaben eine Einheit dazu schreiben. "width:245" ist nicht definiert, genausowenig wie "height:90".

In diesem Fall ist dein nicht mehr zeitgemäßer Code noch nicht der Ursprung Deines Problems gewesen. Aber es wird Dich noch einholen.

Grüße,
-Efchen

Loon3y · 24 März 2009

Efchen schrieb:
Aber die direkte Antwort auf Deine Frage wäre die:
In CSS musst Du bei Größenangaben eine Einheit dazu schreiben. "width:245" ist nicht definiert, genausowenig wie "height:90".

In diesem Fall ist dein nicht mehr zeitgemäßer Code noch nicht der Ursprung Deines Problems gewesen. Aber es wird Dich noch einholen.

Grüße,
-Efchen

Erstmal Danke Efchen, hatte schon ein schlechtes Gewissen, dass ich eventuell hochnäsig geklungen habe oder in diese Richtung.

Aber diese Antwort hatte ich auch gegeben, er hätte nur die aufgelisteten Fehler von mir abarbeiten müssen.

Grüßli und fast schönen Feierabend ^^

ingoS · 24 März 2009

Loon3y schrieb:
Erstmal Danke Efchen, hatte schon ein schlechtes Gewissen, dass ich eventuell hochnäsig geklungen habe oder in diese Richtung

Genau, weil Efchen ja (besonders bei den Neulingen) nie hochnäsig ankommt.
Um es auch mal zu sagen: SCNR

Loon3y · 24 März 2009

ingoS schrieb:
Genau, weil Efchen ja (besonders bei den Neulingen) nie hochnäsig ankommt.
Um es auch mal zu sagen: SCNR

Mein Frauchen sagt auch immer ich würde hochnäsig rüberkommen..aber das ist doch jede Person die mehr weiß und wo man sich nicht abfinden kann, bzw zugeben kann "man du hast mehr ahnung..danke" ^^

Efchen · 25 März 2009

Loon3y, Du hast es mit diesem Satz exakt auf den Punkt gebracht.

Jeder Mensch tut sich zunächst mal schwer damit, wenn jemand anders mehr weiß.

ingoS, Du hast völlig recht. Ich hab das noch nie erlebt, dass mich jemand als hochnäsig bezeichnet hätte ;-)

tomstar · 25 März 2009

Loon3y schrieb:
html:

- Doctype fehlt
- <center> verwendet man nichtmehr
- <div class="head"> ist "falsch". eine überschrift zeichnet man mit <h1> bis <h6> aus. für den Header wäre doch die überschrift 1. grades angebracht. sprich <h1> ... </h1>
- ein menu in der tabelle? wieso ?
- downmenu ist auch eine auflistung -> <ul> <li> .. </li> </ul>

so hier mal meine Erklärung zu dem Vorschlag HTML Code Bereinigen:
-Doctype fehlt -> OK der ist aber nicht ausschlaggebend
-<center> verwende ich, da der Mozilla firefox es nicht Zentriert darstellt (für IE ist es mit text-align:center) abgedeckt
-wieso sollte meine div class=head falsch sein. Das ist für mich nur ein Platzhalter, da noch nicht bekannt ist ob eine Überschrift Bild oder ähnliches rein kommt.
-ein menu in einer Tabelle= ganz einfach, wenn keine Tabelle rum gelegt wird, erscheint die dotted border links und rechts nicht.
-downmenu -> Ok man kann es als auflistung machen, dann ist wieder wie beim normalen menü das Problem mit der border.

Loon3y schrieb:
css:

- sachen wie border-width: 1, border-color: .., usw usf kann man zusammenfassen in: border: 1px solid #000000;
(statt "solid" gehen natürlich auch "dotted", "dashed", ...)
- width und height die angaben, da fehlt die einheit? Was für einheit magst du? äpfel? birnen? px? em?
- du mischt em, dann mal px, dann mal %...leg dich auf was fest =)
- farben gibst du mal mit "red"; mal mit #ff00000; mal mit rgb(xyz); an...wenn du es einheitlich machst besteht mehr übersicht

-border zusammenfassung -> ja schön und gut das wusste ich dass ich es zusammenfassen kann, aber wie gesagt das hätte ich am schluss überarbeitet und reduziert.
- width und height -> OK
- ich mische px und % -> da die darstellung mit 100% sich schöner ausgibt, da der border jeweils px wegnehmen.
- Farben -> das ist ansichtssache dem einen stört des den anderen nicht.

Loon3y schrieb:
Beheb erstmal die fehler im html, denn es nützt nichts wenn man fehler im css sucht, wenn der html-part noch nicht valide ist..

grüßli...

-> FAZIT: Mein HTML Code war und ist nicht fehlerhaft.

Loon3y · 25 März 2009

oh man...sowas mag ich ja.

tomstar schrieb:
-Doctype fehlt -> OK der ist aber nicht ausschlaggebend

doch.
Der Quirks Modus :: Stefan Arens

(für dumme, wichtiges sind fett markiert)

Zitat von: http://www.site-check.cc/seiten-optimieren/standard-head.html%5D
Was bedeutet das alles:

"Doctype":
Noch vor dem Head wird normalerweise der Doctype angegeben. Im Doctype wird festgelegt, was für eine Art (X)HTML verwendet wird, sprich: wie es der Browser interpretieren soll. Ohne Doctype schaltet der Browser in den sehr fehlertoleranten "Quirksmode" und steuert damit aber auch einige seiner "speziellen" Eigenheiten bei. .......

tomstar schrieb:
-<center> verwende ich, da der Mozilla firefox es nicht Zentriert darstellt (für IE ist es mit text-align:center) abgedeckt

zentriert wird mit css. html ist nur zur auszeichnung des inhaltes dar nicht zur gestaltung, formatierung oder layoutzwekcne.

tomstar schrieb:
-wieso sollte meine div class=head falsch sein. Das ist für mich nur ein Platzhalter, da noch nicht bekannt ist ob eine Überschrift Bild oder ähnliches rein kommt.

Dein header ist eine ÜBERSCHRIFT. Überschriften werden mit <h1> bis <h6> aufsteigend in der zahl ausgezeichnet. ein <div> ist NUR zur Gruppierung von Elementen da. willst du deine Überschrift denn gruppieren? (hä?)

tomstar schrieb:
-ein menu in einer Tabelle= ganz einfach, wenn keine Tabelle rum gelegt wird, erscheint die dotted border links und rechts nicht.

css -> ul { border left: 1px dotted; border-right: 1px dotted; height: 500px; }

tomstar schrieb:
-downmenu -> Ok man kann es als auflistung machen, dann ist wieder wie beim normalen menü das Problem mit der border.

siehe oben.

Die "Fehlerbehebung" bzw der "Vorschlag" wie du deine CSS-Datei optimieren kannst. Kleinere CSS-Datei bedeutet das es schneller lädt und du bessere Übersicht hast. Ebenso hast du eine bessere Übersicht be einheitlicher Schreibweise. Das war NUR ein Tip, wie schon zich mal erwähnt.

tomstar schrieb:
width und height -> OK

Dein Fehler, den ich laut deiner Aussage nicht besprochen habe.

tomstar schrieb:
- ich mische px und % -> da die darstellung mit 100% sich schöner ausgibt, da der border jeweils px wegnehmen.

hä?

tomstar schrieb:
- Farben -> das ist ansichtssache dem einen stört des den anderen nicht.

Wie gesagt, war nur ein Tip / Vorschlag, kein muss.

tomstar schrieb:
-> FAZIT: Mein HTML Code war und ist nicht fehlerhaft.

Schwachsinn. Lerne HTML und CSS, ich muss meine Zeit nicht aufopfern um mir sowas anzuhören. Du suchst Hilfe und hast sie bekommen und am Ende stellste mich als dumm dar und als "du redest schwachsinn". Wieso suchste überhaupt dann Hilfe wenn du eh alles besser weißt?

Btw. hat dein "Bekannter" dir helfen können oder wieso bist du wieder da?

Etwas wütende Grüße
Loon3y.

tomstar · 25 März 2009

firefox beachtet aber nicht die normale text-align: center.
hast des schon mal probiert?
Das geht nicht!!!

Wieso die ganze zeit die überschrift das ist absolut nicht das thema gewesen. es ist nur für miche in PLATZHALTER nix anderes ich hätte auch ein bild rein setzen können oder was anderes verwenden können so ist es für mich persönlich einfach ersichtlicher, dass da der head bereich hin kommt nix anderes.

Das css -> ul { border left: 1px dotted; border-right: 1px dotted; height: 500px; } hab ich gerade auch selber raus gefunden.

in meiner css ist für main img {width: 100%} eingetragen, wenn ich hier eine px angabe mache sprengen die bilder den rechten rand und es wird nicht sauber eine linie.
P.s: Wenn die seite nicht mehr im aufbaustadium ist kannst dir gern mal den unterschied anschauen wenn du es nicht glaubst.

Loon3y · 25 März 2009

tomstar schrieb:
firefox beachtet aber nicht die normale text-align: center.
hast des schon mal probiert?
Das geht nicht!!!

ja geht und er macht dass, was dafür definiert ist. Elemente zentriert man, indem man ihnen eine feste Breite (width) zuweißt und "margin: 0px auto;" anwendet. Und btw., dass Internet wird nichtnur vom Firefox aufgerufen,s o ndern auch von zich 100 anderen Browsern.

Wieso die ganze zeit die überschrift das ist absolut nicht das thema gewesen. es ist nur für miche in PLATZHALTER nix anderes ich hätte auch ein bild rein setzen können oder was anderes verwenden können so ist es für mich persönlich einfach ersichtlicher, dass da der head bereich hin kommt nix anderes.

auch platzhalter kann man richtig auszeichnen. du kannst in dein <h1> ein Bild rein tun, oder mit css richtig formatieren (height, width, border, ....), solange du dafür noch nicht den Inhalt hast.

Das css -> ul { border left: 1px dotted; border-right: 1px dotted; height: 500px; } hab ich gerade auch selber raus gefunden.

fein. wieso dann die tabelle?

in meiner css ist für main img {width: 100%} eingetragen, wenn ich hier eine px angabe mache sprengen die bilder den rechten rand und es wird nicht sauber eine linie.

webdesign ist nicht printdesign. hier muss alles flexibel sein. D.h. egal bei welchere größe deines Browserfensters, egal welcher Browser da ankommt, es muss immer 101% nutzbar sein.

P.s: Wenn die seite nicht mehr im aufbaustadium ist kannst dir gern mal den unterschied anschauen wenn du es nicht glaubst.

dadrauf bin ich ja gespannt..will jetzt keinen dummen kommentar da lassen..deswegen verkneife ich es mir.

anbei, ich denke, dass es besser ist wenn ich nichtmehr auf dieses Thema hier eingehe. Ich verabeschiede mich erstmal von diesem Thread.

Gruß
Loon3y

Efchen · 25 März 2009

tomstar schrieb:
-<center> verwende ich, da der Mozilla firefox es nicht Zentriert darstellt (für IE ist es mit text-align:center) abgedeckt
-wieso sollte meine div class=head falsch sein. Das ist für mich nur ein Platzhalter, da noch nicht bekannt ist ob eine Überschrift Bild oder ähnliches rein kommt.
-ein menu in einer Tabelle= ganz einfach, wenn keine Tabelle rum gelegt wird, erscheint die dotted border links und rechts nicht.
-downmenu -> Ok man kann es als auflistung machen, dann ist wieder wie beim normalen menü das Problem mit der border.

HTML ist eine Strukturbeschreibungssprache. Mit HTML wird lediglich die Bedeutung Deines Inhalts festgelegt, aber in keiner Weise das Aussehen am Bildschirm. Welche Tags Du verwendest, hängt allein von dem Sinn ab, den Du Deinem Inhalt geben willst. Man verwendet niemals einen Tag, weil der eine bestimmte Ausgabe am Bildschirm erzeugt. Zum einen ist nicht definiert, wie ein Tag ohne CSS dargestellt wird, es gibt nur Empfehlungen, das kann aber jeder Browser machen, wie er will. Zum anderen kannst Du jeden Tag mit CSS umformatieren, ihm das Aussehen geben, was Du willst. Wenn Du ein horizontales Menü haben willst, dann musst Du trotzdem eine Liste zur Auszeichnung verwenden, selbst wenn sie ohne CSS-Formatierung vertikal ist. Mit CSS macht man sie dann horizontal.
Man verwendet auch keine veralteten Tags mehr, die eingeführt wurden, um Layout oder Design zu machen (z.B. <center>). Damals gab es noch kein CSS, deswegen hat man HTML so verhunzt, dass man damit Layout machen konnte. Das ist eigentlich noch nie gewünscht gewesen und seitdem es CSS gibt (ca. 10 Jahre) ist das auch endlich nicht mehr nötig.
Um eine Überschrift zu definieren nimmt man die entsprechenden Überschrifts-Tags. Ein <div id="head"> ist keine Überschrift. Wenn es aber eine sein soll, muss es mit <h1>..<h6> ausgezeichnet sein.

Grundsätzlich gilt bei HTML: Es dient nur der logischen Auszeichnung Deines Inhalts (Semantik), nie aber dem Design. Wähle niemals ein anderes (unpassendes) Tag, weil irgendein optischer Effekt anders/besser erzielt werden kann. Optik machst Du komplett mit CSS.

-> FAZIT: Mein HTML Code war und ist nicht fehlerhaft.

Doch.
Du musst Dir noch über die Bedeutung von HTML im Klaren werden und Inhalt sowie Layout/Design strikt voneinander trennen. Dann klappts auch mit dem HTML-Code.

Loon3y hat schon recht.

Grüße,
-Efchen

P.S.: text-align:center funktioniert auch im Firefox. Aber eben nur für Inline-Elemente. Ich nehme an, Du willst damit Block-Elemente zentrieren. Das macht der IE entgegen dem Standard zwar, aber nur im Quirks Mode. Wobei wir wieder an der Stelle wären, dass der Doctype sehr wohl ausschlaggebend ist. Du sollst ja einen verwenden, der alle Browser in den Standards Mode versetzt, damit es keine Darstellungsunterschiede gibt. Block-Elemente zentriert man mit "margin:0 auto". Dann klappt beides in allen Browsern.

tomstar · 25 März 2009

LOL Ich bedanke mich, dass auf die Ursprüngliche Frage soooooooooo viel eingegangen wird.

Hier der aktuelle Code (vielleicht ist ja jemand anders bereit mir bei meinem a:hover Bildwechsel zu helfen):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>             
  <head>                     
    <meta http-equiv="content-type" content="text/html;     charset=windows-1250">                     
    <title>Drexler-Immobilien.com                   
    </title> 
<script type="text/javascript" src="js/sfHover.js"></script>                                                                                                         
    <link rel="stylesheet" type="text/css" href="css/style.css">                                                                  
  </head>                                                                   
  <body>                
    <center>                                                                
      <div class="container">                                                                 
        <div class="head">Der Weg ins Eigenheim ist meist nicht so schwer wie man denkt! Mit uns erreichen Sie es auf alle F&auml;lle unkomplizierter.                                                     
        </div>                                                                                       
          <ul id="nav"><li>                                                               
            <a href="angebot.html">Unser Angebot</a></li>          <li>                                                               
            <a href="#">Dienstleistung</a>                                                                          
            <ul>  <li>                                                                                                       
              <a href="#">Verkauf</a></li>  <li>                                                                                                       
              <a href="#">Vermietung</a></li>                                                                                            
            </ul></li>                           <li>                                                               
            <a href="#">Nebenkosten</a></li>                           <li>                                                               
            <a href="gutschein.html">Gutschein</a></li>                                                                              
          </ul>                           
        <div class="angebot">                                                                                
          <table cellpadding="0" cellspacing="0">               
            <tr>                     
              <td colspan="2">                           
                <img src="bilder/img1_01.gif" width="798" alt=""></td>               
            </tr>               
            <tr>                     
              <td rowspan="4">                           
                <img src="bilder/img1_02.gif" width="553"alt=""></td>                     
              <td id="bildver">                           
                <a href="http://www.drexler-immobilien.com" target="_blank">&nbsp;</a></td>               
            </tr>               
            <tr>        <td>                           
                <a href="http://www.drexler-immobilien.com" target="_blank">                
                  <img src="bilder/img1_04.gif" width="245" alt="Wohnungen"></a></td>               
            </tr>               
            <tr>        <td>                           
                <a href="http://www.drexler-immobilien.com" target="_blank">                
                  <img src="bilder/img1_05.gif" width="245" alt="Gewerbe"></a></td>               
            </tr>               
            <tr>        <td>                       
                <a href="http://www.drexler-immobilien.com" target="_blank">                
                  <img src="bilder/img1_06.gif" width="244" alt="Grundstueck"></a></td>               
            </tr>        
          </table>        
        </div>                                                                                                   
          <ul id="down"><li>                                                   
            <a href="kontakt.html">Kontakt</a> </li>                               <li>                                                 
            <a href="impressum.html">Impressum</a>       </li>                           <li>                                                 
            <a href="index.html">Startseite</a></li>                                                   
          </ul>                                                                                                                               
        <div class="footer">                                                                
          <p>&copy;                                                                               
            <a href="http://www.drexler-immobilien.com">http://www.drexler-immobilien.com</a>                                                                
          </p>                                                             
        </div>                                                  
      </div>                 
    </center>                               
  </body>  
</html>

Code:

body {
    color: #000000;
    font-family: verdana, arial;
    font-size: 12px;
    text-align: center;
}
.container {
    width: 800px;
    background-color: #FFFFFF;
    text-align: left;
}
.head {
    border: 1px dotted #000000;
}
/*START: Topmenue Formatierung*/
#nav, #nav ul {
/* all lists */
    border-left: 1px dotted #000000;
    border-right: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
    height: 15px;
    padding: 0px;
    margin: 0px;
    list-style: none;
}
#nav a {
    display: block;
    width: 120px;
    color: #000000;
    text-decoration: none;
}
#nav a:hover {
    text-decoration: none;
    background-color: #FF9900;
}
#nav li {
/* all list items */
    float: left;
    width: 120px;
/* width needed or else Opera goes nuts */
}
#nav li ul {
/* second-level lists */
    position: absolute;
    width: 120px;
    left: -300px;
/* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li:hover ul, #nav li.sfhover ul {
/* lists nested under hovered list items */
    left: auto;
}
/*ENDE: Topmenue Formatierung*/
/*START: Mainbereich (Normal)*/
.main {
    border-left: 1px dotted #000000;
    border-right: 1px dotted #000000;
    clear: left;
}
.main img {
    width: 100%;
}
/*ENDE: Mainbereich (Normal)*/
/*START: Mainbereich (Impressum)*/
.impressum {
    border: 1px dotted #000000;
    font: 20px arial;
    text-align: center;
}
/*ENDE: Mainbereich (Impressum)*/
/*START: Mainbereich (Angebotseite)*/
.angebot {
    border-left: 1px dotted #000000;
    border-right: 1px dotted #000000;
    width: 798px;
}
.angebot img {
    border: 0px;
}
#bildver a {
    background-image: url(bilder/img1_03.gif);
    width: 245px;
    height: 90px;
}
#bildver a:hover {
    background-image: url(bilder/img1_03_silver.gif);
}
/*ENDE: Mainbereich (Angebotseite)*/
/*START: Downmenue*/
#down, #down ul {
/* all lists */
border: 1px dotted #000000;
    text-align: right;
    padding: 0px;
    margin: 0px;
    list-style: none;
    height: 13px;
}
#down a {
    display: block;
    width: 120px;
    color: #000000;
    text-decoration: none;
}
#down a:hover {
    text-decoration: none;
    background-color: #FF9900;
}
#down li {
    float: right;
    width: 120px;
}
#down li:hover ul, #down li.sfhover ul {
/* lists nested under hovered list items */
    left: auto;
}
/*ENDE: Downmenue*/
/*START: Fusszeile Formatierung*/
.footer {
    color: #000000;
    font: 9px arial;
    text-align: center;
    clear: right;
}
.footer a {
    text-decoration: none;
    color: #000000;
}
.footer a:hover {
    text-decoration: underline;
    background-color: #FFFFFF;
}
/*ENDE: Fusszeile Formatierung*/

Efchen · 25 März 2009

tomstar schrieb:
Das ist leider meine arbeitsweise sorry.

Mit Deiner Arbeitsweise aus den 1990er Jahren machst Du Dir aber heute sehr viele unnütze Probleme. Es funktioniert seit CSS eben nicht mehr alles so wie früher. In der IT-Branche entwickelt sich manches schneller, als man es lernen kann. Aber man muss in jedem Fall mithalten, wenn man nicht aus der Spur fliegen will.

Du hast mit dieser veralteten Arbeitsweise Probleme, die Du mit moderner Arbeitsweise nicht hättest. Viele Dinge stellen für Dich Probleme dar, die nicht sein müssten. Somit verschwendest Du Zeit, die Du prduktiv nützen könntest.

Außerdem vermischst Du altmodische Arbeitsweise und neumodische, indem Du hie und da ein wenig CSS einstreust, aber ohne die Grundlagen von CSS wirklich zu kennen (Doctype, Inline-Elemente, Block-Elemente).

Es geht mir gar nicht darum, Dir Deine Fehler aufzuzeigen um des Spaßes Willen, sondern darum, Dir zu beweisen, dass es Zeit für Dich ist, Neues zu lernen. Und dass die moderne Methode mit Trennung von Inhalt und Layout und Semantik in HTML deutlich einfacher, logischer und Zeitsparender ist. Außerdem gibts bei korrekter Arbeitsweise gleich sehr gute Nutzbarkeit und Barrierefreiheit inklusive. Alles Dinge, auf die WWW-Nutzer(!) heute Wert legen. Wenn der Webmaster aber nicht mitzieht, dann gerät die Website schnell in Vergessenheit - und das ist ja nicht Sinn einer Website.

Überlegs Dir...hier kann Dir geholfen werden.

Ich schau mir jetzt nochmal Dein Problem an...aber auf jeden Fall ist Dein Doctype nicht korrekt, weil er den IE in den Quirks Mode versetzt. Das musst Du auf jeden Fall ändern, wenn Du Darstellungsprobleme hast.

Hier mal noch was über Doctypes, auf Seite 3 gibts ne wchtige Übersicht:
LANtastic’s Artikel » DTD - Document Type Declaration - Das richtige Doctype

Dein Link "#bildver a" ist kein Block-Element, sondern ein Inline-Element. Daher sind die Angaben width/height nicht erlaubt. Um das zu ermöglichen, musst Du dem Link sagen, dass er sich wie ein Block-Element verhalten soll, das geht mit "display:block".
Wenn dann noch Probleme sein sollten, lad die Seite bitte hoch, dass man sich das Verhalten online ansehen und mit Webdeveloper-Tools austesten kann.

Bildwechsel mit a:hover?!?

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Efchen

Guest

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Efchen

Guest

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest