Warum kostenlos registrieren?

Nur als registriertes Mitglied hast Du vollen Zugriff auf alle Funktionen unserer Website. So kannst Du eigene Fragen stellen und hast die volle Übersicht über neue interessante Themen im Forum.
Jetzt kostenlos registrieren.

Login


Probleme mit neuem Banner

Fragen oder Probleme mit HTML, PHP oder CSS?

Probleme mit neuem Banner

Beitragvon Wackelpudding am 09.11.2007, 16:29

Hey there,

ich bastle gerade einen neuen Banner für meine Website.

Der Quelltext sieht folgendermassen aus:

Code: Alles auswählen
<html>
<head>
<title>Kelly Bishop. An unofficial Website.</title>
<style type="text/css">
h1 {font-size:13pt; font-weight:bold; padding-left:15px;}
h2 {font-size:11pt; font-weight:bold; padding-left:50px;}
h3 {font-size:8pt; font-weight:bold; padding-left:50px;}
p {padding-right:15px; padding-left:50px;}
body {background-color:#7F7F7F; margin:0px;}
a:link {color:#000000;}
a:visited {color:#000000;}
a:focus {color:#000000;}
a:hover {color:#000000;}
a:active {color:#000000;}
</style>
</head>
<body>
<div align="center">
<div style="background-color:#FFFFFF; color:#000000; font-family:verdana; font-size:11pt; width:800px; margin-top:50px; text-align:left; text-align:justify; padding-bottom:15px;">
<img src="../Pictures/kbb.jpg" alt="kellybishop.de.vu">
<div style="position:relative; top:-22px; left:346px; width:537px;">
<map name="Navigation">
<area shape="rect" coords="8,1,80,19" href="../neu.html" alt="life">
<area shape="rect" coords="82,1,126,19" href="../life.html" alt="life">
<area shape="rect" coords="128,1,190,19" href="../work.html" alt="work">
<area shape="rect" coords="192,1,270,19" href="../media.html" alt="media">
<area shape="rect" coords="272,1,342,19" href="http://www.kbnetwork.de.vu/" target="http://www.kbnetwork.de.vu/" alt="forum">
<area shape="rect" coords="344,1,400,19" href="../links.html" alt="links">
<area shape="rect" coords="402,1,450,19" href="../site.html" alt="site">
</map>
<img src="../Pictures/navi.gif" alt="Navigation" usemap="#Navigation" style="border:none;">
</div>
<h1>News &amp; Updates</h1>
<h2>11.09.2007</h2>
<p>Test
</p>
<p style="text-align:center">
<a href="../updatesarchive.html">Archive</a>
</p>
</div>
</div>
</body>
</html>


Und während mit Mozilla auch alles so aussieht wie es soll, ist die Navigationsleiste beim Öffnen der Seite mit Internetexplorer verschoben.

Hat eventuell jemand eine Ahnung woran das liegen könnte?

Hier noch der Link zu der Testseite:

http://flyingmaniac.compi-01.de/neu.html
Wackelpudding
 
Beiträge: 28
Registriert: 30.04.2006, 10:45


Beitragvon FireFoxFan am 10.11.2007, 12:48

Hallo,

habe mir das mal angeschaut. Der IE positioniert die Navigationsleiste irgendwie um 3px anders, ich sehe gerade auch nicht warum.

Probiere mal folgenden Code:
Code: Alles auswählen
<html>
<head>
<title>Kelly Bishop. An unofficial Website.</title>
<style type="text/css">
h1 {font-size:13pt; font-weight:bold; padding-left:15px;}
h2 {font-size:11pt; font-weight:bold; padding-left:50px;}
h3 {font-size:8pt; font-weight:bold; padding-left:50px;}
p {padding-right:15px; padding-left:50px;}
body {background-color:#7F7F7F; margin:0px;}
a:link {color:#000000;}
a:visited {color:#000000;}
a:focus {color:#000000;}
a:hover {color:#000000;}
a:active {color:#000000;}

img {
   border: none;
}

div#container{
   margin: 0 auto;
   background-color: #FFFFFF;
   color: #000000;
   font-family: verdana;
   font-size: 11pt;
   width: 800px;
   margin-top: 50px;
   padding-bottom: 15px;
}

div#navi {
   position: relative;
   bottom: 22px;
   left:   173px;
   width: 454px;
}

* html div#navi {   /* IE HACK */
   bottom: 25px;
}

</style>
</head>
<body>
<div align="center">
  <div id="container">
    <img src="http://flyingmaniac.compi-01.de/Pictures/kbb.jpg" alt="kellybishop.de.vu">

    <div id="navi">
       <map name="Navigation"><area shape="rect" coords="8,1,80,19" href="../neu.html" alt="life"><area shape="rect" coords=         "82,1,126,19"   href="../life.html" alt="life"><area shape="rect" coords="128,1,190,19" href="../work.html" alt="work"><area shape="rect" coords="192,1,270,19" href="../media.html" alt="media"><area shape="rect" coords="272,1,342,19" href="http://www.kbnetwork.de.vu/" target="http://www.kbnetwork.de.vu/" alt="forum"><area shape="rect" coords="344,1,400,19" href="../links.html" alt="links"><area shape="rect" coords="402,1,450,19" href="../site.html" alt="site">
       </map>

       <img src="http://flyingmaniac.compi-01.de/Pictures/navi.gif" alt="Navigation" usemap="#Navigation">
    </div>

   <h1>News &amp; Updates</h1>
    <h2>11.09.2007</h2>
   <p>Test</p>
   <p style="text-align: center;">
   <a href="../updatesarchive.html">Archive</a>
   </p>
  </div>
</div>
</body>
</html>

Ich habe deinen ein bisschen umgeschrieben, und bei mir zeigen sowohl FireFox als auch IE7 das ganze korrekt an.
Ich habe im CSS-Teil einen sogenannten CSS-Hack für den Internet Explorer eingefügt: Der Internet Explorer positioniert das jetzt um 3px anders als alle anderen Browser.

Probiere mal, ob das klappt...

PS: Der gesamte Quelltext ist immernoch ziemlich unübersichtlich und(teilweise) ungünstig geschrieben (z.B. Mischung aus CSS-Klassen und style-Angaben, die Positionierung ist nicht wirklich flexibel etc. ...). Aber ich wollte nicht des gesamte Layout neu aufsetzen, sondern dir erstmal auf die Schnelle einen Lösungsvorschlag anbieten...
FireFoxFan
 
Beiträge: 172
Registriert: 23.04.2006, 10:40

Beitragvon Wackelpudding am 09.12.2007, 13:06

Danke! Wie könnt ich den Quelltext denn vereinfachen?
Wackelpudding
 
Beiträge: 28
Registriert: 30.04.2006, 10:45



Ähnliche Themen


Zurück zu HTML, PHP & Co.

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste