 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Daxi
Threadersteller
Dabei seit: 01.09.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 01.09.2009 14:01
Titel Tabelle - kein Abstand zwischen Zeilen bei Opera |
  |
|
Hallo zusammen,
gerade bin ich dabei eine Homepage zu programmieren und ich verzweifle im Moment ein wenig.
Ich habe eine Seite mit drei Frames (ja, ich weiß´, dass man das eigentlich mit divs macht). Links soll eine Navigationsleiste mit animierenten Buttons in einer Tabelle dargestellt werden.
Der IE und Firefox interpretieren die Tabelle so, wie ich das haben möchte - und zwar mit Abstand zwischen den Zeilen. Nur bei Opera "kleben" die einzelnen Zeilen zusammen, sodass es nicht mehr gut aus sieht.
Hier Bilder zum Vergleich:
IE: http://img12.imageshack.us/i/20440724.jpg/
Firefox: http://img12.imageshack.us/i/firefoxw.jpg/
Opera: http://img12.imageshack.us/i/operau.jpg/
Meine Frage ist jetzt: wie muss ich den Code ändern, damit es auch bei Opera so aussieht wie im IE oder bei Firefox. Versuche mit margin und/oder padding bzw. cellspacing haben nicht fuktioniert, da es dann bei Opera zwar richtig aussah, aber im IE und Firefox zu groß für meinen Frame (Breite 125px) wurde und zwei störende Scrollleisten entstanden sind.
Hier der Code:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body { background-color:#7b68ee}
table { width:102px; padding:0px; text-align:center; margin-left: auto; margin-right:auto; }
h1 { text-align:center; color:#424242; }
h3 { text-align:center; text-decoration:underline; margin-bottom:5px; margin-top:0px; }
a:link { color:#000000; }
a:visited { color:#009700; }
a:active { color:#000000; }
#besucher { width:100px; height:auto; border: 1px solid blue; text-align:center; margin-bottom:0px; margin-top:0px; padding-bottom:5px; }
#bild { width:100px; }
</style>
<title>Abschleppdienst Kümmel, Inhaber Dietmar Schreiber</title>
<base target="main">
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "buttons/home1.jpg";
Highlight1 = new Image();
Highlight1.src = "buttons/home2.jpg";
Normal2 = new Image();
Normal2.src = "buttons/beruns1.jpg";
Highlight2 = new Image();
Highlight2.src = "buttons/beruns2.jpg";
Normal3 = new Image();
Normal3.src = "buttons/anfahrt1.jpg";
Highlight3 = new Image();
Highlight3.src = "buttons/anfahrt2.jpg";
Normal4 = new Image();
Normal4.src = "buttons/leistungen1.jpg";
Highlight4 = new Image();
Highlight4.src = "buttons/leistungen2.jpg";
Normal5 = new Image();
Normal5.src = "buttons/service1.jpg";
Highlight5 = new Image();
Highlight5.src = "buttons/service2.jpg";
Normal6 = new Image();
Normal6.src = "buttons/partner1.jpg";
Highlight6 = new Image();
Highlight6.src = "buttons/partner2.jpg";
Normal7 = new Image();
Normal7.src = "buttons/fuhrpark1.jpg";
Highlight7 = new Image();
Highlight7.src = "buttons/fuhrpark2.jpg";
Normal8 = new Image();
Normal8.src = "buttons/gastebuch1.jpg";
Highlight8 = new Image();
Highlight8.src = "buttons/gastebuch2.jpg";
Normal9 = new Image();
Normal9.src = "buttons/kontakt1.jpg";
Highlight9 = new Image();
Highlight9.src = "buttons/kontakt2.jpg";
Normal10 = new Image();
Normal10.src = "buttons/impressum1.jpg";
Highlight10 = new Image();
Highlight10.src = "buttons/impressum2.jpg";
function Bildwechsel (Bildnr, Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>
</head>
<body>
<br>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="home.html"
onmouseover="Bildwechsel(0, Highlight1)"
onmouseout="Bildwechsel(0, Normal1)"><img id="bild" src="buttons/home1.jpg" alt="home" title="">
</a>
</td>
</tr>
<tr>
<td>
<a href="beruns.html"
onmouseover="Bildwechsel(1, Highlight2)"
onmouseout="Bildwechsel(1, Normal2)"><img id="bild" src="buttons/beruns1.jpg" title="" alt="Über uns">
</a>
</td>
</tr>
<tr>
<td>
<a href="anfahrt.html"
onmouseover="Bildwechsel(2, Highlight3)"
onmouseout="Bildwechsel(2, Normal3)"><img id="bild" src="buttons/anfahrt1.jpg" title="" alt="Anfahrt">
</a>
</td>
</tr>
<tr>
<td>
<a href="leistungen.html"
onmouseover="Bildwechsel(3, Highlight4)"
onmouseout="Bildwechsel(3, Normal4)"><img id="bild" src="buttons/leistungen1.jpg" title="" alt="Leistungen">
</a>
</td>
</tr>
<tr>
<td>
<a href="service.html"
onmouseover="Bildwechsel(4, Highlight5)"
onmouseout="Bildwechsel(4, Normal5)"><img id="bild" src="buttons/service1.jpg" title="" alt="Service">
</a>
</td>
</tr>
<tr>
<td>
<a href="partner.html"
onmouseover="Bildwechsel(5, Highlight6)"
onmouseout="Bildwechsel(5, Normal6)"><img id="bild" src="buttons/partner1.jpg" title="" alt="Partner">
</a>
</td>
</tr>
<tr>
<td>
<a href="fuhrpark.html"
onmouseover="Bildwechsel(6, Highlight7)"
onmouseout="Bildwechsel(6, Normal7)"><img id="bild" src="buttons/fuhrpark1.jpg" title="" alt="Fuhrpark">
</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.onlex.de/_gbuch.php4?username=Daxi"
onmouseover="Bildwechsel(7, Highlight8)"
onmouseout="Bildwechsel(7, Normal8)"><img id="bild" src="buttons/gastebuch1.jpg" title="" alt="Gästebuch">
</a>
</td>
</tr>
<tr>
<td>
<a href="kontakt.html"
onmouseover="Bildwechsel(8, Highlight9)"
onmouseout="Bildwechsel(8, Normal9)"><img id="bild" src="buttons/kontakt1.jpg" title="" alt="Kontakt">
</a>
</td>
</tr>
<tr>
<td>
<a href="impressum.html"
onmouseover="Bildwechsel(9, Highlight10)"
onmouseout="Bildwechsel(9, Normal10)"><img id="bild" src="buttons/impressum1.jpg" title="" alt="Impressum">
</a>
</td>
</tr>
<tr>
<td>
<br>
<div id="besucher">
<h3>Besucher:</h3>
<script language="JavaScript" type="text/javascript" src="http://www.onlex.de/_counter.php4?username=Daxi"></script>
</div>
</td>
</tr>
</table>
</body>
</html> |
|
|
| |
  |
 |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: 
|
Verfasst Di 01.09.2009 14:20
Titel Re: Tabelle - kein Abstand zwischen Zeilen bei Opera |
|
|
| Daxi hat geschrieben: | | Ich habe eine Seite mit drei Frames (ja, ich weiß´, dass man das eigentlich mit divs macht). |
Naja, missbrauchte Tabellen ersetzt man durch divs, Frames dagegen macht man einfach gar nicht  (Alternativen: wenn's um die Inhalte geht per PHP, wenn's um fixe Positionen geht per CSS.)
| Daxi hat geschrieben: | | Links soll eine Navigationsleiste mit animierenten Buttons in einer Tabelle dargestellt werden. |
Und Du weißt auch, dass man dafür eine ul nimmt? Ich habe hier ein ausführliches Tutorial verfasst, das auch ein (barrierearmes) Grafik-Menü erklärt (Abschnitt 15).
Zuletzt bearbeitet von heiko_rs am Di 01.09.2009 14:22, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
Daxi
Threadersteller
Dabei seit: 01.09.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 01.09.2009 18:32
Titel
|
|
|
Hey,
danke erstmal für die schnelle antwort.
Denke, ich werde die Frames irgendwann mal durch divs ersetzen, wenn ich zeit hab. Aber das ist jetzt erst mal mein zweitrangiges Problem.
Jetzt wo du sagst, dass man Navigationsleisten mit Listen erstellt, klingelt da auch ganz weit hinten bei mir wieder was. Ist ja auch irgendwie logisch.
Gesagt-getan: Ich hab jetzt also die Links aus der Tabelle in eine Liste geschrieben. Jedoch hab ich immer noch haargenau das gleiche Problem mit den Abständen bei Opera. Also sieht in allen Browsern 1:1 wie mit der Tabelle aus.
Ich hoffe auf Hilfe, wie ich auch bei Opera die Abstände zwischen den einzelnen -nun- Listenpunkten erschaffen kann, ohne dass die Abstände im IE und bei Firefox größer werden.
Hier der neue Code:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body { background-color:#7b68ee}
#navi{ list-style:none; padding:0; margin:0; text-align:center; }
h1 { text-align:center; color:#424242; }
h3 { text-align:center; text-decoration:underline; margin-bottom:5px; margin-top:0px; }
a:link { color:#000000; }
a:visited { color:#009700; }
a:active { color:#000000; }
#besucher { width:100px; height:auto; border: 1px solid blue; text-align:center; margin-bottom:0px; margin-top:10px; padding-bottom:5px; margin-left:auto; margin-right:auto; }
#bild { width:100px; }
</style>
<title>Abschleppdienst Kümmel, Inhaber Dietmar Schreiber</title>
<base target="main">
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "buttons/home1.jpg";
Highlight1 = new Image();
Highlight1.src = "buttons/home2.jpg";
Normal2 = new Image();
Normal2.src = "buttons/beruns1.jpg";
Highlight2 = new Image();
Highlight2.src = "buttons/beruns2.jpg";
Normal3 = new Image();
Normal3.src = "buttons/anfahrt1.jpg";
Highlight3 = new Image();
Highlight3.src = "buttons/anfahrt2.jpg";
Normal4 = new Image();
Normal4.src = "buttons/leistungen1.jpg";
Highlight4 = new Image();
Highlight4.src = "buttons/leistungen2.jpg";
Normal5 = new Image();
Normal5.src = "buttons/service1.jpg";
Highlight5 = new Image();
Highlight5.src = "buttons/service2.jpg";
Normal6 = new Image();
Normal6.src = "buttons/partner1.jpg";
Highlight6 = new Image();
Highlight6.src = "buttons/partner2.jpg";
Normal7 = new Image();
Normal7.src = "buttons/fuhrpark1.jpg";
Highlight7 = new Image();
Highlight7.src = "buttons/fuhrpark2.jpg";
Normal8 = new Image();
Normal8.src = "buttons/gastebuch1.jpg";
Highlight8 = new Image();
Highlight8.src = "buttons/gastebuch2.jpg";
Normal9 = new Image();
Normal9.src = "buttons/kontakt1.jpg";
Highlight9 = new Image();
Highlight9.src = "buttons/kontakt2.jpg";
Normal10 = new Image();
Normal10.src = "buttons/impressum1.jpg";
Highlight10 = new Image();
Highlight10.src = "buttons/impressum2.jpg";
function Bildwechsel (Bildnr, Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>
</head>
<body>
<br>
<ul id="navi">
<li>
<a href="home.html"
onmouseover="Bildwechsel(0, Highlight1)"
onmouseout="Bildwechsel(0, Normal1)"><img id="bild" src="buttons/home1.jpg" alt="home" title="">
</a>
</li>
<li>
<a href="beruns.html"
onmouseover="Bildwechsel(1, Highlight2)"
onmouseout="Bildwechsel(1, Normal2)"><img id="bild" src="buttons/beruns1.jpg" title="" alt="Über uns">
</a>
</li>
<li>
<a href="anfahrt.html"
onmouseover="Bildwechsel(2, Highlight3)"
onmouseout="Bildwechsel(2, Normal3)"><img id="bild" src="buttons/anfahrt1.jpg" title="" alt="Anfahrt">
</a>
</li>
<li>
<a href="leistungen.html"
onmouseover="Bildwechsel(3, Highlight4)"
onmouseout="Bildwechsel(3, Normal4)"><img id="bild" src="buttons/leistungen1.jpg" title="" alt="Leistungen">
</a>
</li>
<li>
<a href="service.html"
onmouseover="Bildwechsel(4, Highlight5)"
onmouseout="Bildwechsel(4, Normal5)"><img id="bild" src="buttons/service1.jpg" title="" alt="Service">
</a>
</li>
<li>
<a href="partner.html"
onmouseover="Bildwechsel(5, Highlight6)"
onmouseout="Bildwechsel(5, Normal6)"><img id="bild" src="buttons/partner1.jpg" title="" alt="Partner">
</a>
</li>
<li>
<a href="fuhrpark.html"
onmouseover="Bildwechsel(6, Highlight7)"
onmouseout="Bildwechsel(6, Normal7)"><img id="bild" src="buttons/fuhrpark1.jpg" title="" alt="Fuhrpark">
</a>
</li>
<li>
<a href="http://www.onlex.de/_gbuch.php4?username=Daxi"
onmouseover="Bildwechsel(7, Highlight8)"
onmouseout="Bildwechsel(7, Normal8)"><img id="bild" src="buttons/gastebuch1.jpg" title="" alt="Gästebuch">
</a>
</li>
<li>
<a href="kontakt.html"
onmouseover="Bildwechsel(8, Highlight9)"
onmouseout="Bildwechsel(8, Normal9)"><img id="bild" src="buttons/kontakt1.jpg" title="" alt="Kontakt">
</a>
</li>
<li>
<a href="impressum.html"
onmouseover="Bildwechsel(9, Highlight10)"
onmouseout="Bildwechsel(9, Normal10)"><img id="bild" src="buttons/impressum1.jpg" title="" alt="Impressum">
</a>
</li>
<li>
<div id="besucher">
<h3>Besucher:</h3>
<script language="JavaScript" type="text/javascript" src="http://www.onlex.de/_counter.php4?username=Daxi"></script>
</div>
</li>
<ul>
</body>
</html>
|
|
|
| |
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst Di 01.09.2009 19:17
Titel
|
|
|
|
sufu: reset styles
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 01.09.2009 19:23
Titel
|
|
|
Ohne Deinen Code ausprobiert zu haben, kann ich sagen, dass Du auch noch margin & padding von li auf Null setzen solltest, und am besten gleich für alle Elemente auf der Seite per
| Code: | * {
margin: 0;
padding: 0;
} |
Dann sollte die Unterlänge Deiner img verschwinden, am besten per display: block; (das kann a auch gleich bekommen).
Aber Deine Lösung mit Deko-Grafiken im Markup ist wirklich alles andere als gut - sie gehören ins CSS (Trennung von Inhalt & Design), und Du brauchst Dich nicht von JS abhängig zu machen, um einen Hover-Effekt zu bekommen, und außerdem hast Du durch Deine vielen Grafiken unnötig viele HTTP-Anfragen (bei der Variante in meinem Tutorial dagegen nur eine), was die Perfomance Deiner Website verschlechtert.
Ich weiß, dass man die von mir erklärte Variante nicht in 5 Minuten rüberkopiert und angepasst hat, aber das bisschen Mühe sollte man sich machen, um nicht auf dem Stand von 1999 zu arbeiten
Zuletzt bearbeitet von heiko_rs am Di 01.09.2009 19:25, insgesamt 3-mal bearbeitet
|
|
| |
|
|
Daxi
Threadersteller
Dabei seit: 01.09.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 01.09.2009 19:25
Titel
|
|
|
| Zitat: | | sufu: reset styles |
???
Kann damit leider gar nichts anfangen.
Könntest du mit das vll noch mal erklären.
Danke
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 01.09.2009 19:27
Titel
|
|
|
Das ist der Code, den ich danach gepostet habe (kommt an den Anfang Deines CSS.) Und sufu heißt Suchfunktion
Zuletzt bearbeitet von heiko_rs am Di 01.09.2009 19:29, insgesamt 2-mal bearbeitet
|
|
| |
|
|
Daxi
Threadersteller
Dabei seit: 01.09.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 01.09.2009 22:26
Titel
|
|
|
Ich hab versucht die Abstände sowohl bei li auf null zu setzen, als auch komplett. macht leider keinen unterschied.
Hat jemand noch ne andere Idee??
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Fehler?: XHTML 1.1 erzeugt Abstand nach Bild in Tabelle
Höhe aus Tabelle auslesen und in andere Tabelle einfügen
3 Zeilen Layout
ASP.NET datagrid Zeilen einfärben?!
PHP Absatz: alle 4 Zeilen
Tabellenspalten werden zu Zeilen
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
