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

Problem mit Link

F

franzfinke

Neues Mitglied
Hallo,
Ich habe mal wieder ein kleines Problem.Ich habe versucht eine kleine Web mit CSS zu schreiben, das hat auch bis jetzt ganz gut geklappt, aber jetzt stehe ich vor einem neuem Problem.

Das Problem ist:
Wenn ich die Website in Firefox öffne ist sie normal so wie sie eigentlich angezeigt werden soll, aber sobald ich auf einen Link aus dem Navigationsmenu drücke wird die Zielseite normal geöffnet bis auf das alles größer ist.Diesen unschönen Fehler möchte ich gerne beheben.

Hier der Code meiner html-Seite

Code: 
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" media="screen,projection"href="style.css" />
    <title>Lunar-Bytes - Home - Willkommen auf Lunarbytes!</title>
    
      
    

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
    <div id="kopfbereich">
      <h1>Lunar-Bytes</h1>
      <p></p>
    </div>
    
    <div id="inhalt"> <h2>Willkomen auf Lunar-Bytes</h2>
    <p>Willkommen auf unserer Seite Lunar-Bytes.</p>
    
    </div>
   
    <div id="navigation"><h2>Navigation</h2>
    <p><a href="index.htm" id="homelink" class="link">Home</a></p>
    <p><a href="info.htm" id="infolink" class="link">&Uuml;ber uns..</a></p>
    <p><a href="downloads.htm" id="downlink" class="link">Downloads</a></p>
    

    
    </div>
    
    <div id="sidebar"><h2>Aktuelles</h2>
    <p>4Etudo, fames ac pax Ardor solemnitas rutila, ars Nusquam, benevolentia orbis monstro redeo, arx te evangelium. Emo se profundum pes sesquimellesimus Socors ango abeo promitto, pro infecundus re Quid .</p>
    
    </div>
    
    <div id="footer"><h2>O. Deluo. Iuguolo p.</h2>
    <p>5Etudo, fames ac pax Ardor solemnitas rutila, ars Nusquam, benevolentia orbis monstro redeo, arx te evangelium. Emo se profundum pes sesquimellesimus Socors ango abeo promitto, pro infecundus re Quid .</p>
    
    </div>
    

  </body>
</html>
Und hier der CSS-Code:

Code: 
body {
margin:0;
padding:0;
font:15px arial,serif;
line-height:1.4;
background:#000066;
}
h1,h2 {
font-family:'trebuchet ms',sans.serif;
font-weight:normal;
margin-top:0;
margin-bottom:0px;
}
h1{
font-size:25px;
line-height:25px;
margin-left:170px;
}
h2{
font-size:20px;
line-height:20px;
}
#kopfbereich, #inhalt, #navigation, #sidebar, #footer{
padding:10px;
background:#eeeeee;
border:1px solid #cccccc;
}
#navigation, #sidebar {
position:absolute;
top:95px;
width:195px;
border:1px solid:#990000;
padding-bottom:15px;
background:#eeeeee;
}
#sidebar {
right:15px
}
#navigation {
left:15px
}
#inhalt, #footer {
margin-left:247px;
margin-right:247px;
}
#inhalt {
padding:15px;
background:#eeeeee;
margin-top:28px;
margin-bottom:20px;
border:1px solid #cccccc
}
#inhalt h2 {
border-bottom:1px solid #000033;
border-left:10px solid #000033;
padding-left:5px;
}
#inhalt p {
padding-left:15px;
}
#kopfbereich {
margin-bottom:20px;
background:#000099 url(logo_mond.png) no-repeat left center;
color:#ffffff;
padding:25px 15px;
}
#kopfbereich p {
display:none;
}
#navigation h2 , #sidebar h2 {
background:#000033;
font-size:15px;
font-weight:bold;
color:#ffffff;
padding:2px 15px;
}
.link{

font-size:15px;
padding:2px 15px;
background-color:#999999;
display:block;
}
.link:hover{
background:#cbcbcb url(moon.gif) 90% 6px no-repeat;
}
/*ul#navigation{
list-style-type:none;
margin-left:0;
padding-left:0;
}
ul#navigation li{
margin-bottom:0.2em;
}
ul#navigation li a{
background-color:#cbcbcb;
display:block;
padding:0.4em;
width:100px;
}
ul#navigation li a:hover{
background:#cbcbcb url(star.gif) 90% 6px no-repeat;
}*/
Und hier die Bilder:


Vorher:



Nachher:
 
Zuletzt bearbeitet:
sry ich hab zweimal das gleiche genommen .
Hast du eine Idee voran es liegen könnte oder hast du zumindest eine Vorstellung von meinem Problem?

jetzt hab ich nochmal das richtige Hochgeladen.
 
Zuletzt bearbeitet von einem Moderator:
kopier den html code aus der 1. seite in alle anderen seiten und füg dort wieder den unterschiedlichen "inhalt" ein. damit sollte der fehler verschwinden.
wenn nicht musst du schaun ob der inhalt das layout verändert.
 
franzfinke schrieb:
Hier der Code meiner html-Seite
Zum Vergrößern anklicken....
Da sind noch einige Fehler drin, die solltest Du als erstes beseitigen.

Code: 
<?xml version="1.0"?>
Der Prolog ist für XHTML eigentlich zwar richtig, versetzt den IE aber in den Quirks Mode. Deswegen solltest Du ihn weglassen.

Code: 
<link rel="stylesheet" type="text/css" media="screen,projection"href="style.css" />
Da fehlt ein Leerzeichen zwischen dem letzten " von media und href.

Code: 
    <div id="navigation"><h2>Navigation</h2>
    <p><a href="index.htm" id="homelink" class="link">Home</a></p>
    <p><a href="info.htm" id="infolink" class="link">&Uuml;ber uns..</a></p>
    <p><a href="downloads.htm" id="downlink" class="link">Downloads</a></p>
Kein Syntaxfehler, aber einer semantischer Natur. Ein Menü entspricht am ehesten einer Liste, also zeichne es als Liste aus. Du zeichnest die einzelnen Links als Textabsatz aus. "Home" als einzelnes Wort ist aber sicher kein Textabsatz.
 
danke für eure Antworten ich werde es sofort ausprobieren.


@FoXMorayn
eigentlich habe schon den ganzen Code in die anderen Dateien übernommen, deswegen hab ich mich ja auch gewundert

@Efchen
Danke, die Fehler sind beseitigt, aber leider Funktioniert es immer noch nicht.
:)

Im Internet Explorer wird alles richtig angezeigt, bis auf in Firefox.Kann es etwas damit zutun haben ,das ich die Größe der Elemente nicht absolut definiert habe?
http://www.html.de/members/efchen.html
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben