63130
Goto Top

Text verschiebt sich ungewollt nach unten

Ich schreibe gerade an einer Seite auf welcher ich eine neue Navigation im Registerkarten-Stil teste. Dabei verschiebt sich der Text in der Registerkarte allerdings ungewollter Weise nach unten.

Hier erstmal ein Screenshot der Seite:


Oben in den Registerkarten verschiebt sich der Text "Test" weiter nach unten, sogar aus dem DIV raus. Der Text sollte mit dem "Testlink" auf einer höhe liegen.

Hier der Quelltext der Seite:

<html>

	<head>
		<title>Testseite</title>
		<link rel="stylesheet" type="text/css" href="styles/style.css">  
	</head>
	
	<body bgcolor="FFE8D6">  
		<!-- Außenrand-->
<table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">   
  <tr> 
    <td valign="middle">  
		
		<div class="outerdiv">  
		
		<img src="images/header.png">  
		
				<div align="center" class="naviyes"><p class="navi">Test</p></div><div align="center" class="navino"><a class="navi" href="index.html">Testlink</a></div><div class="navino" align="center"><p class="navi">Test</p></div><div align="center" class="navino"></div>		  
		
				<div class="innerdiv">  
				<p>Testtesttest.<br></div>

		</div>
	</td></tr></table>
	</body>

</html>


und hier das CSS:

div.outerdiv {
	background-image: url(../images/png.png);
	background-repeat:no-repeat;
	background-position:center;
	margin: 5em 5em 5em 5em;
	padding-left:50px;
	padding-right:170px;
	width:730px;
	height: 580px;
	border:1px solid EE6C39;
	margin: auto;}

div.navino {
	float: left;
	position: relative;
	width:182px;
	height:35px;
	border-bottom:1px solid EE6C39;
	border-top:1px transparent;
	border-left:1px transparent;
	border-right:1px transparent;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px}
	
div.naviyes {
	float: left;
	position: relative;
	width:182px;
	height:35px;
	background-image: url(../images/white_t.png);
	border-bottom:1px transparent;
	border-top:1px solid EE6C39;
	border-left:1px solid EE6C39;
	border-right:1px solid EE6C39;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px}
	
div.innerdiv {
	position: absolute;
	font-family: Arial;
	font-size: 13px;
	background-image: url(../images/white_t.png);
	width:628px;
	height: 300px;
	border-bottom:1px solid EE6C39;
	border-left:1px solid EE6C39;
	border-right:1px solid EE6C39;
	border-top:0px transparent;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 36px;}
	
p.navi {
	font-family: Arial;
	font-size: 20px;
	color: #EE6C39;}

a.navi:hover {
	font-family: Arial;
	font-size: 20px;
	color: #EE6C39;
	text-decoration: none;}

a.navi:visited {
	font-family: Arial;
	font-size: 20px;
	color: #F9A870;
	text-decoration: none;}

a.navi:link {
	font-family: Arial;
	font-size: 20px;
	color: #F9A870;
	text-decoration: none;}

Kann mir da jemand helfen? Ich hab schon alles probiert.

Danke schonmal,

Grüße,
Max aka v3rtico

Content-Key: 102145

Url: https://administrator.de/contentid/102145

Ausgedruckt am: 28.03.2024 um 23:03 Uhr

Mitglied: solverone
solverone 19.11.2008 um 10:11:03 Uhr
Goto Top
<div align="center" class="navino">
<p class="navi"><a class="navi" href="index.html">Testlink</a></p>

</div>

hat bei mir im firefox funktioniert...

wenn ich mich recht erinnere gab es da irgendeine einschränkung, was im <div> verschaltet werden darf... oder so ähnlich...

vielleicht hilft es ja weiter...

gruss, mike
Mitglied: 63130
63130 19.11.2008 um 10:26:02 Uhr
Goto Top
Ich hab mir jetzt einfach n workaround ausgedacht mit dem es klappt: Ich hab n Table in das div gesetzt mit valign="middle"

Danke trotzdem