Problem Homepage Horizontale Nav- Leiste Hover Effekt - boote-forum.de

Green Devil · #1 11.03.2011, 21:49

Moin Moin...

ich bastel mir gerade n Homepage (nicht schlagen für den chaotischen Quellcode). Bin jetzt auf folgendes Problem gestoßen. Irgendwie bekomme ich das mit der Horizontalen Navigationsleisten nicht hin.

Meine Idee 5 Kategorien. Jede Kategorie habe ich in Photoshop als Button gestaltet mit einem kleinen Texteffekt. Für die erste Kategorie "Startseite" habe ich das hin bekommen... aber wenn ich die nächste Kategorie einfügen möchte, setzt sich der Button unter den "Startseite-Button" anstatt rechts daneben.

Könnt ihr mir da weiter helfen?

Quellcode HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="nautik.css" />
</head>
<body>

<div class="wrapper">

<div class="pageheader">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="left" valign="top" class="title"></td>
</tr>
</table>
</div>


<div class="pagecontent">

<table width="100%" border="0" cellspacing="0 20 0 0" cellpadding="0">
<tr>

<td width="177" valign="top" class="leftside">

<p style="text-align: center"><font color="#FFFFFF" style="font-size: 11pt">%navigation%</a></font><font color="#FFFFFF" size="2">

</font>

<a style="text-align: left"><font color="#FFFFFF">

<center>
<FORM>

<a style="text-align: center"><font color="#ff9900">
<a style="font-size: 11pt">Nützliche Seiten

</FORM>
</center>
<br>

<h2 style="text-align: center"><a target="_blank" href="http://www.beluga-group.com/de/"><img title="BELUGA SHIPPING GmbH" border="0" alt=""
src="images/beluga-shipping.gif" /></a> </h2>

<br>

<h2 style="text-align: center"><a target="_blank" href="http://www.sea-academy.de"><img title="BELUGA SEA ACADEMY" border="0" alt=""
src="images/sea-academy.gif" /></a> </h2>

<br>

<h2 style="text-align: center"><a target="_blank" href="http://www.fh-oow.de/"><img title="FH OOW" border="0" alt=""
src="images/jade-hs.jpg" /></a> </h2>


</font>
</td>


<td align="left" valign="top" class="rightside">

<IfArchivePage>
<div class="entry"><a href="#" class="foto-link1 foto11"></a></div>
<div class="archivetitle"><h2>%titel%</h2></div>
</div>

</IfArchivePage>
<IfMainPage>
<Entry>
<div class="entry">

<div class="entrydate">

<br>

<font size="2">%content%</font></div>

</div>
</Entry>
</IfMainPage>

</td>
</tr></table>

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle"><div class="copyright">
<p style="text-align: center"></p>
</div>
</td>
</tr>
</table>

</body>
</html>

Quellcode CSS

@charset "utf-8";
/* CSS Document */
html,body {
margin:0px;
padding:0px;
}
body {
font-size:12px;
background-color:#071a21;
color:pink;
font-family:Tahoma, Arial, sans-serif
margin:0px;
}
.wrapper {
width:1000px;
margin:0 auto 0 auto;
text-align:left;
border-left:solid 12px #FFF;
border-right:solid 12px #FFF;
}
.pageheader {
height:250px;
padding:0px;
border-bottom:0px;
background-image:url(http://c444288.r88.cf2.rackcdn.com/images/header.jpg)
}
.title {
width:820px;
text-align:left;
padding:12px;
}
.pagecontent {
background-color:#071a21;
color:#6F0;
text-align:left;
padding:12px 0 12px 0;
}
.leftside {
padding:0;
}
.rightside {
padding:0 12px 0 12px;
}
.image {
padding:12px;
text-align:center;
}
.imageborder {
border:solid 2px #FFF;
}
.sidebartitle {
font-size:14px;
color:#C0F;
text-transform:uppercase;
font-weight:600;
padding:6px 0 6px 12px;
margin:4px 0;
}
.description {
color:#300;
line-height: 115%
padding:0 0 12px 0;
}
.entrydate {
font-size:12px;
color:#300;
padding:7px 0 12px 0;
}
.entrytitle {
padding-bottom:7px;
}
.archivetitle {
padding:7px 0 7px 0;
}
.entry {
color: #FFF;
line-height: 135%;
padding: 0 0 12px 0;
border-bottom: solid 1px #FFF;
}
.foto-link1
{
width: 104px;
height: 17px;
display: block;
margin: 0;
}
.foto11
{
background: url(http://c444288.r88.cf2.rackcdn.com/i...ite_button.jpg) no-repeat;
}
.foto-link1:hover
{
background-position: 0 -17px;
}
.foto-link2
{
width: 104px;
height: 17px;
display: block;
margin: 114px;
}
.foto12
{
background: url(http://c444288.r88.cf2.rackcdn.com/i...ort_button.jpg) no-repeat;
}
.foto-link2:hover
{
background-position: 0 -17px;
}

.category {
font-size: 11px;
color: #7EE66D;
letter-spacing: 1px;
padding: 7px 0 0 0;
text-transform: uppercase;
}

.comments {
font-size: 11px;
color: #FFF;
}

.author {
font-size: 11px;
color: #7EE66D;
padding: 7px 0 0 0;
}

.comments a:link,.comments a:visited,.comments a:active,

.category a:link,.category a:visited,.category a:active {
color: #B8CF01;
text-decoration: none;
}

.comments a:hover, .category a:hover {
color: #FFF;
text-decoration: underline;
}

.default {
font-size: 12px;
color: #FFF;
line-height: 135%;
padding: 7px 0 4px 0;
}

blockquote {
text-decoration: none;
}

h1 {font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;
font-size: 24px;
color: #FFF;
font-weight: 600;
margin: 0;
padding: 0;
}

h2 {font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;
font-size: 16px;
color: #FFF;
font-weight: 600;
margin: 0;
padding: 0;
}

h3 {font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;
font-size: 14px;
color: #FFF;
font-weight: 600;
margin: 0;
padding: 0;
}

.paginate {
font-size: 11px;
color: #FFF;
padding: 4px 0 4px 0;
}

.menu {
width: 100%;
text-align: left;
margin: 0;
}

.menu a {
display: block;
padding: 5px 4px 5px 12px;
}

.menu a:link, .menu a:visited, .menu a:active {
color: #FFF;
text-decoration: none;
}

.menu a:hover {
background-color: #6E798B;
color: #FFF;
text-decoration: none;
}

.copyright {
font-size: 11px;
text-align: right;
padding: 7px 12px 0 0;
}

.copyright a:link, .copyright a:visited, .copyright a:active {
color: #FFF;
text-decoration: none;
}

.copyright a:hover {
color: #FFF;
text-decoration: underline;}

Bartho · #2 11.03.2011, 22:09

postition bei :hover ?

Schau mal hier

Green Devil · #3 11.03.2011, 22:13

Das mit dem Hover Effekt klappt soweit ja. Jedoch ist die Anordung der Elemente nicht nebeneinander, sondern untereinander...

Bartho · #4 11.03.2011, 22:14

Zitat:

Zitat von Green Devil

Das mit dem Hover Effekt klappt soweit ja. Jedoch ist die Anordung der Elemente nicht nebeneinander, sondern untereinander...

Float Left mal getestet

oder die Navigation in ein <div> tag und diesen die attribute Float left geben

oder clear:both ?

Green Devil · #5 11.03.2011, 22:17

Zitat:

Zitat von Bartho

Float Left mal getestet

oder die Navigation in ein <div> tag und diesen die attribute Float left geben

oder clear:both ?

Kannste das ein bisschen genauer erklären... hab doch nich so viel Plan davon ;)

Jan-Maat-79 · #6 11.03.2011, 22:17

Moinsen!

Wenn sich bis morgen Abend, keine Lösung gefunden hat.
Lass ich mal dann mal ´nen Kumpel draufschauen.
Der verdient seine Brötchen mit Web-Design.

Quasi als bremische Nachbarschaftshilfe!

Gruß aus Woltmershausen!

oktobernull2 · #7 11.03.2011, 22:48

#steuerungkopf ul {
height: 1.4em;
}

#steuerungkopf li {
/*background-color: yellow;*/
display: inline;
/*border-right: 1px solid red;*/
}

#steuerungkopf a {
/*background-color: green;*/
display: block;
width: 175px;
float: left;
line-height: 1.4em;
text-align: center;
color: white;
text-decoration: none;
}

#steuerungkopf a:hover {
background-image: url(/images/grau-50.png);

display: inline; fehlt mir da in der Steuerung......

RalphB · #8 11.03.2011, 22:54

http://www.css4you.de/

Gruß Ralph
(... gutes Gelingen)

Green Devil · #9 12.03.2011, 00:31

Also... bevor ich mich in dem ursprünglichen Code- Chaos ganz "verwurschtel" hab ich die Seite von vorne aufgebaut. Hatte den Ursprungscode von einer alten Seite die per Baukasten generiert wurde...

Nun ist das ganze für mich ein wenig übersichtlicher. Stellt sich ein zusätzliches Problem. Für den Fall dass die linke Navigation länger ist als der eigentliche Seiteninhalt, werden die beiden Rahmen nicht mit verlängert (siehe Bild). Woran liegt das, bzw. wie kann ich das ändern?

LG

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portal Homepage</title>
<link rel="stylesheet" type="text/css" href="nautikneu.css"
</head>
<body>
<div class="wrapper">

<div class="pageheader">

</div>

<div class="navigation_left" align="center">
Navigation
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
usw...
</div>

<div class="horizontal_navigation" align="center">
Horizontale Navigation
</div>

<div class="pagecontent">
Seiteninhalt
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
usw...
</div>
</div>

</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */
hmtl , body {
background-color:green;
margin:0px;
padding:0px;
}
.wrapper {
width:1000px;
margin:0 auto 0 auto;
text-align:left;
border-left:solid 12px #FFF;
border-right:solid 12px #FFF;
}
.pageheader {
background-image:url(https://cdn.boote-forum.de/images/header.jpg);
width:1000px;
height:250px;
padding:0px;
margin:0px;
}
.pagecontent {
background-color:#071a21;
color:red;
text-align:left;
padding:0;
margin:0 0 0 180px
}
.navigation_left {
background-color:yellow;
width:180px;
float:left;
margin:0px;
padding:0px;
}
.horizontal_navigation {
background-color:blue;
top:150px;
left:180px;
margin:0 0 0 180px;
padding:0px;
}

oktobernull2 · #10 12.03.2011, 09:23

2 Spalten Layout in HTML und CSS

Freeware HTML-Editor Scriptly

Green Devil · #11 12.03.2011, 09:52

Moin Moin...

danke für das Tut... werde ich mir mal bei Gelegenheit anschauen... Aber ansich bin ich ja mit der Anordnung der "Boxen" zufrieden... nur das mit dem Rahmen nervt mich... vielleicht kann ja einer etwas in meinem Code ändern.

MFG

oktobernull2 · #12 13.03.2011, 09:37

wenn du einen footer einfügst bist du deine ersten Sorgen los- noch eleganter wird es wenn der "content"container im "navigation"container integriert ist.

part 11 des tut

hier noch ein Link- brandneu von einem Profi

index.html

</div>
<div id="footer">
<a href="">© home-made-boat.de</a>
</div>
</div>
</body>
</html>

style.css

/* footer */
#footer {
clear: both;
text-align: center;
border-top: 1px dashed #696969;
padding: 15px 0px 50px 0px;
/*background-color: orange;*/
}

Green Devil · #13 05.04.2011, 15:19

Moin Moin...

also ich hab jetzt schon einiges geschafft, was vorher nicht geklappt hat (zwar mit einigen Kompromissen... aber vll. kommen die Feinheiten noch später).

Mein nächstes Problem steckt in meiner vertikalen Navleiste im Bereich "Nautik"

http://andre-nautik.de/nautik.html

Undzwar gibt es wie gewöhnlich nach dem anklicken einen Rahmen, der anzeigt dass der Link angeklickt wurde... bei dem 2. Hauptpunkt "2.Praxissemester" ist der Rahmen aber viel zu groß (siehe Bild). In der Entwurfsansicht sieht das auch irgendwie so aus. Kann vielleicht einer einmal kurz meinen CSS Code checken... der HTML Code müsste eigentlich passen...

Code:

hmtl, body {
 font-family:Tahoma, Geneva, sans-serif;
 color:#FFF;
 background-color:#0097be;
 margin:0px;
 padding:0px;
}
p, a, h1, h2, {
 font-family:Tahoma, Geneva, sans-serif;
 color:#000;
}
h1 {
 border-bottom:1px solid #FFF;
 margin:0px 0px 15px 0px;
}
h2 {
 border-bottom:1px solid #FFF;
 margin:30px 0px 0px 0px;
}
p {
 text-align:justify;
 line-height:22px
}
a:link {color:#FFF}
a:visited {color:#FFFFFF}
a:hover {color:#999999}
a:active {color:#FFFFFF}
.antifloat {
 clear:both
}
/*Anfang Wrapper*/
#wrapper {
 width:1000px;
 background-color:#0097be;
 margin:0 auto 0 auto;
 border left:12px #FFF;
 border right:12px #FFF;
 
}
/*Ende Wrapper*/
/*Anfang Header*/
#header {
 height:250px;
 background-color:#071a21;
 /*background-image:url(https://cdn.boote-forum.de/images/header.jpg);*/
}
/*Ende Header*/
/*Anfang Navigation*/
#navigation {
 background-color:#071a21;
 
}
#navigation ul{
 float:left;
 width:200px;
 padding:54px 0px 0px 0px;
 margin:0;
 /*background-color:maroon;*/
}
#navigation ul li{
 /*border:1px solid lime;*/
 list-style:none;
 padding: 5px 5px 5px 10px;
 
}
#navigation ul li a{
 display:block;
 text-decoration:none;
 font-weight:bolder;
 border-bottom:1px solid #FFF;
 /*border:1px solid red;*/
 padding:0px 0px 5px 5px
}
#navigation ul li a:hover{
 color: #999999;
 padding:0px 0px 5px 5px;
 
}
#navigation ul li ul{
 float:left;
 width:190px;
 padding:0px 0px 0px 0px;
 margin:0;
 /*background-color:maroon;*/
}
#navigation ul li ul li{
 /*border:1px solid lime;*/
 list-style:none;
 padding: 5px 5px 5px 20px;
 
}
#navigation ul li ul li a{
 display:block;
 text-decoration:none;
 font-weight:bolder;
 border-bottom:1px solid #FFF;
 /*border:1px solid red;*/
 padding:0px 0px 5px 5px
}
#navigation ul li ul li a:hover{
 color: #999999;
 padding:0px 0px 5px 5px;
 
}
/*Ende Navigation*/
/*Anfang Navigation2*/
#navigation2 {
 float:right;
 width:800px;
 heigth:21px;
 background-color:#071a21;
 font-weight:bolder;
}
#navigation2 ul{
 padding:0px 0px 0px 20px;
 margin:0;
 /*background-color:maroon;*/
}
#navigation2 ul li{
 /*border:1px solid lime;*/
 list-style:none;
 display: inline;
 padding: 5px 5px 5px 10px;
 
}
#navigation2 ul li a{
 text-decoration:none;
 /*border:1px solid red;*/
}
/*Ende Navigation2*/
/*Anfang Content*/
#content {
 float:left;
 width:750px;
 padding:25px;
 background-color:#071a21;
 
}
/*Ende Content*/
/*Anfang Footer*/
#footer {
 clear:both;
 text-align:center;
 height:50px;
 /*padding: 15px 0px 50px 0px;*/
 background-color:#071a21;
}
/*Ende Footer*/

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>www.andre-nautik.de</title>
    <meta name="keywords" content="Nautik, Waassersport" />
    <meta name="description" content="Das ist meine erste Homepage" />
    <meta name="robots" content="index, follow" />
    
    <link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body>
 <a name="top"></a>
 <div id="wrapper"><!--Anfang Wrapper-->
     <div id="header"><img src="images/header.jpg" width="1000" height="250" alt="Bild Header" /></div><!--Header-->
        <div id="navigation2"><!--Anfang Navigation2-->
         <ul>
            <li><a href="index.html">Startseite</a></li>
            <li><a href="wassersport.html">Wassersport</a></li>
            <li><a href="nautik.html">Nautik</a></li>
            <li><a href="about.html">&Uuml;ber mich</a></li>
            <li><a href="guestbook.html">G&auml;stebuch</a></li>
            </ul>
        </div><!--Ende Navigation2-->
        <div id="navigation"><!--Anfang Navigation-->
         <ul>
               <li><a href="1praxissemester.html">1. Praxissemester</a>
       <ul>
                    <li><a href="schiff1.html">Das Schiff</a></li>
                <li><a href="route1.html">Die Reiseroute</a></li>
                   </ul>
                   </li>
                            <div id="spaceholder"><ul></ul></div>
               <li><a href="2praxissemester.html">2. Praxissemester</a>
                <ul>
                   <li><a href="schiff2.html">Das Schiff</a></li>
                <li><a href="route2.html">Die Reiseroute</a></li>
                   </ul>
                   </li>
            </ul>
        <div id="content"><!--Anfang Seiteninhalt-->
        
         <h1>Nautik</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet   clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,    
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  
        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem 
        ipsum dolor sit amet.
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril  
     delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,    
        vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod  
        tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
            </p>
            <a href="#top">nach oben</a>
            <a name="link_1"></a>
            <h2>Das ist meine &Uuml;berschrift 2</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet   clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,    
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  
        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem 
        ipsum dolor sit amet.
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril  
     delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,    
        vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod  
        tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
            </p>
            <a href="#top">nach oben</a>
            <a name="link_2"></a>
            <h2>Das ist meine &Uuml;berschrift 3</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet   clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,    
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  
        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem 
        ipsum dolor sit amet.
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril  
     delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,    
        vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod  
        tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
            </p>
            <a href="#top">nach oben</a>
            <a name="link_3"></a>
            <h2>Das ist meine &Uuml;berschrift 4</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet   clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,    
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  
        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem 
        ipsum dolor sit amet.
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril  
     delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,    
        vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod  
        tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
            </p>
            <a href="#top">nach oben</a>
            <a name="link_4"></a>
        </div><!--Ende Seiteninhalt-->
        <div class="antifloat"</div>
</div><!--Ende Navigation--> 
        <div id="footer"><img src="images/footer.jpg" width="1000" height="50" alt="Bild Footer" /></div><!--Footer--> 
    </div><!--Ende Wrapper-->
</body>
</html>

Superpapa · #14 05.04.2011, 17:23

Hi,
mit dem Internet-Explodierer kann man Dein Problemchen nachvollziehen, beim Feuerfuchs gibts keine Rahmen. Andere Browser habe ich nicht getestet.
Besuch doch mal die Seite http://validator.w3.org , da wird auch am html-Code was bemeckert.
Auch der http://jigsaw.w3.org/css-validator/ bemeckert einiges.
Wenn das fehlerfrei (bzw. fehlerarm) abläuft, liegen Deine weiteren Probleme auch daran, dass der Herr Winzigweich der Meinung ist, sich nicht an Standards halten zu müssen. Dann sollen Deine Kunden eben standardkonforme Browser verwenden oder Du musst mit trial & error die Ansicht erträglich gestalten.
Gruß
Michael