zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Problem mit overflow: hidden;

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.12.2010, 11:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2010
Beiträge: 8
Robin-Hood befindet sich auf einem aufstrebenden Ast
Standard Problem mit overflow: hidden;

Hallo!

Ich habe eine Webseite erstellt und habe folgendes Problem:

Wenn ich nun auf ABDENDEN klicke, wird mein Layout
um 114px nach oben verschoben - so das wichtige Teile des Layouts nicht mehr zu sehen sind!

Wo muß ich ansetzen damit ich dieses Problem lösen kann?

Für eventuelle Hilfe wäre ich Dankbar!



HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml" lang="de"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Kontakt</title>
<link rel="stylesheet" type="text/css" media="all" href="kontakt-Dateien/default.css">
</head>
<body>
<div id="grey"></div>
<div id="wrapper">
<div id="navigation">
<ul id="navisub">
<li><a href="index.html">START</a></li>
<li><a href="unternehmen.html">UNTERNEHMEN</a></li>
<li><a href="kompetenzen.html">KOMPETENZEN</a></li>
<li><a href="aktuelle-projekte.html">AKTUELLE PROJEKTE</a></li>
<li><a href="referenzen.html">REFERENZEN</a></li>
<li><a href="kontakt.html">KONTAKT</a></li></ul></div>
<div id="oben">
<div id="subnav"><ul id="subnavbar"><li><a href="2.html" title="Deutsch">DEUTSCH</a></li><li><a href="index-2.html" title="Englisch">ENGLISH</a></li></ul></div>
</div>
<div id="logo"></div>
<div id="image"></div>
<div id="subnav2"><ul id="subnavbar2"><li><a href="impressum.html" title="Impressum">IMPRESSUM</a></li><li><a href="disclaimer.html" title="Disclaimer">DISCLAIMER</a></li></ul></div>
    <div class="column">
<div class="textcontainer">
		<div class="ce"><div id="c64" class="csc-default">
	<div class="tx-powermail-pi1">
		
	<div class="tx-powermail-pi1_confirmation">
		<p>Sind diese Angaben korrekt?</p>
		
		<table class="powermail_all powermail_all_table">
		
			<tbody><tr class="powermail_all powermail_all_tr">
				<td class="powermail_all powermail_all_td" valign="top"><b>Name</b></td> 
				<td class="powermail_all powermail_all_td" valign="top">Max Mustermann</td>
			</tr>
		
			<tr class="powermail_all powermail_all_tr">
				<td class="powermail_all powermail_all_td" valign="top"><b>Email</b></td> 
				<td class="powermail_all powermail_all_td" valign="top">max.mustermann@googlemail.com</td>
			</tr>
		
			<tr class="powermail_all powermail_all_tr">
				<td class="powermail_all powermail_all_td" valign="top"><b>Telefon</b></td> 
				<td class="powermail_all powermail_all_td" valign="top">040 1715864</td>
			</tr>
		
			<tr class="powermail_all powermail_all_tr">
				<td class="powermail_all powermail_all_td" valign="top"><b>Ihre Nachricht</b></td> 
				<td class="powermail_all powermail_all_td" valign="top">Nachricht</td>
			</tr>
		
	</tbody></table>
		
		<form name="kontaktformular_confirmation_back" action="kontakt.html" method="post" class="tx_powermail_pi1_formconfirmation_back">
			<input value="Zurück" class="tx-powermail-pi1_confirmation tx-powermail-pi1_confirmation_back" type="submit">
		</form>
		<form name="kontaktformular_confirmation_submit" action="kontakt.html?&amp;tx_powermail_pi1[mailID]=64&amp;tx_powermail_pi1[sendNow]=1&amp;cHash=6da94bdc9e2acef7387c23ca5b4bb0b9#c64" method="post" class="tx_powermail_pi1_formconfirmation_submit">
			<input value="Angaben abschicken" class="tx-powermail-pi1_confirmation tx-powermail-pi1_confirmation_submit" type="submit">
		</form>
	</div>
	</div>
	</div></div>
</div>
<div class="clear"></div>
<div id="footer">
		<p>Strategien. Performance. Perspektiven.</p>
	</div>
</div>
</div>
</body></html>
die css Datei:

HTML-Code:
@charset 'utf-8';
@import url(reset.css);
@import url(text.css);
html,body{background-color:#fff;color:#444;font-family:Helvetica,Arial,sans-serif;sans-serif;font-size:14px;font-style:normal;height:100%;/* Streckt den Anzeigebereich auf 100% */ padding-left:8px;}
body{overflow-y:scroll;}
a{text-decoration:none;color:#023681;}
a:hover{text-decoration:underline;color:#023681;}
a img{border:0;}
/*--------------------weiße Deckflaeche--------------------*/
#oben{position:absolute;z-index:4;top:0px;height:38px;left:0px;width:100%;background-color:#fff;}
/*--------------------graue Hintergrundflaeche--------------------*/
#grey{
	background-color:#999900;
	width:100%;
	height:396px;
	top:120px;
	left:0px;
	position:absolute;
	z-index:0;
}
/*--------------------Wrapper--------------------*/
#wrapper{
	background-image:url(kontakt-Dateien/bg-1x904.gif);
	background-repeat:repeat-y;
	width:904px;
	min-height:100%;				/* Mindesthöhe für moderne Browser */
	height:auto !important;			/* Important Regel für moderne Browser */
	height:100%; 					/* Mindesthöhe für den IE */
	overflow:hidden; !important;	/* FF Scroll-leiste */ 
	top:0px;
	left:50%;
	margin-top:0px;/*das ist die hälfte der höhe... nur im minusbereich*/
	margin-left:-452px;/*das ist die hälfte der breite... nur im minusbereich*/
	position:absolute;
	z-index:3;
}
/*--------------------Logo--------------------*/
#logo{
	position:absolute;
	z-index:4;
	top:48px;
	height:93px;
	left:214px;
	width:216px;
	background-color: #990000;
}
/*--------------------Bildbereich--------------------*/
#image{
	position:absolute;
	z-index:2;
	top:121px;
	height:100%;
	left:483px;
	width:405px;
	margin-bottom: 40px;
	background-color: #0099FF;
}
/*--------------------Textbereich--------------------*/
.column{padding-bottom:200px;width:600px;margin-top:250px;margin-right:0px;margin-bottom:0px;margin-left:150px;height:100%;}
.textcontainer{margin-bottom:40px;padding-left:23px;width:300px;font-size:12px;float:left;margin:0px 0 100px 0;position:relative;height:100%;}
/*--------------------Subnavigation1--------------------*/
#subnav{height:20px;width:169px;top:23px;left:735px;position:absolute;z-index:8;}
#subnavbar li{display:inline;list-style-type:none;}
#subnavbar a:link,#subnavbar a:visited{float:left;font-size:11px;margin:0 7px 4px 7px;text-decoration:none;color:#9db4c2;}
#subnavbar a.active:link,#subnavbar a:hover{color:#1f4157;}
/*--------------------Subnavigation2--------------------*/
#subnav2{left:710px; position:absolute; z-index: 8; bottom:0;width:400px;height:26px;/* Höhe der Navigation*/}
#subnavbar2 li{display:inline;list-style-type:none;}
#subnavbar2 a:link,#subnavbar2 a:visited{float:left;font-size:11px;margin:0 7px 4px 7px;text-decoration:none;color:#fff;}
#subnavbar2 a.active:link,#subnavbar2 a:hover{color:#1f4157;}
/*--------------------Hauptnavigation--------------------*/
#navigation{
	height:auto;
	width:134px;
	top:275px;
	left:16px;
	position:absolute;
	z-index:8;
	background-color:#A9A700;
	padding-bottom:15px;
}
#navisub ul{list-style:none;margin-right:8px;padding-left:16px;}
#navigation li a:link,#navigation li a:visited{margin-right:8px;font-size:11px;display:block;text-align:right;padding:0.4em 0 0.4em 0.5em;color:#fff;text-decoration:none;}
#navigation li a:hover{color:#1f4157;}
#navigation ul ul{margin:0px;}
#navigation ul ul li{margin:0;}
/*--------------------Hauptnavigation Submenue Farbe--------------------*/
#navigation ul ul a:link,#navigation ul ul a:visited{color:#5b7a8d;}
#navigation ul ul a:hover{color:#1f4157;}
.active{color:#1f4157;text-decoration:none;}
/*--------------------Footer--------------------*/
#footer{position:absolute;bottom:0;width:400px;height:30px;/* Höhe des Footers */}
#footer p{color:#023681;font-family:"Times New Roman",Times,serif;letter-spacing:2pt;word-spacing:0pt;sans-serif;font-size:13px;font-style:normal;margin:0;padding-left:18px;}
/*--------------------Teamliste--------------------*/
ul.liste{font-size:13px;line-height:18px;padding-bottom:20px;}
li.listenelement{font-size:12px;font-weight:normal;font-style:normal;line-height:19px;}
.image-01{height:102px;width:101px;top:0px;left:0px;position:relative;float:left;}
.clear {
  clear: both;
}

/* Powermail */
	/* Form */
span.powermail_mandatory {
	/* Color of mandatory error message */
	color: red;
}
input.validation-failed,
textarea.validation-failed {
	/* Background color if validation failed 
	background-color: red;*/
	background-image: url(/typo3conf/ext/powermail/img/icon_exclamation.gif);
	background-repeat: no-repeat;
	background-position: 98% 2px;
	border:none;
}
div.powermail_mandatory_js {
	/* DIV container of errormessage */
	color: red;
	margin: 3px 0 5px 0px;
}
fieldset.tx-powermail-pi1_fieldset {
	/* Fieldset */
	background-color: #f2f2f6;
	padding: 0px; /*links ausrichten*/
	padding-top: 6px;
}
fieldset.tx-powermail-pi1_fieldset legend {
	/* legend of Fieldset */
	padding-left: 0;
	margin-left: 0;
	font-weight: bold;
	color: #f2f2f6;
}
fieldset.tx-powermail-pi1_fieldset label {
	/* label */
	display: block;
	width: 200px;
	float: left;
	clear: both;
	font-weight: normal;
	padding-bottom: 4px;
}
fieldset.tx-powermail-pi1_fieldset input.powermail_text,
fieldset.tx-powermail-pi1_fieldset textarea.powermail_textarea,
fieldset.tx-powermail-pi1_fieldset select.powermail_select {
	/* Input and textarea */
	width: 287px;
	border:none;
}	
fieldset.tx-powermail-pi1_fieldset input.powermail_text{
		height:  20px;
}
fieldset.tx-powermail-pi1_fieldset div.tx_powermail_pi1_fieldwrap_html_radio input.powermail_radio {
	/* Radiobuttons */
	margin: 5px 0;
}
div.tx_powermail_pi1_fieldwrap_html {
	/* DIV container arround every field */
	margin-top: 10px;
	margin-bottom: 10px;
	/*margin: 10px 0;*/
}
fieldset.tx-powermail-pi1_fieldset input.powermail_submit {
	/* submit button */
	margin: 0px 0 10px 186px;
	font-weight: normal;
}
p.tx_powermail_pi1_fieldwrap_html_checkbox_title,
p.tx_powermail_pi1_fieldwrap_html_radio_title {
	margin: 0;
	padding: 0;
	font-weight: bold;
}
div.countryzone {
	margin: 10px 0 0 200px;
}
div.tx_powermail_pi1_fieldwrap_html label a,
div.tx_powermail_pi1_fieldwrap_html p a {
	/* Description */
	cursor: help;
	text-decoration: none;
}
div.tx_powermail_pi1_fieldwrap_html label a dfn,
div.tx_powermail_pi1_fieldwrap_html p a dfn {
	/* Description */
	display: none;
	text-decoration: none;
}
div.tx_powermail_pi1_fieldwrap_html label a:hover dfn,
div.tx_powermail_pi1_fieldwrap_html p a:hover dfn {
	/* Description on mouseover */
	display: block;
	position: absolute;
	width: 250px;
	padding: 5px;
	background-color: #ddd;
	border: 1px solid red;
	color: black;
	text-decoration: none;
	font-size: 0.8em;
	text-decoration: none;
}
div.tx_powermail_pi1_fieldwrap_html img.icon_info {
	/* Description icon */
	padding: 2px 2px 0 2px;
}
fieldset.tx-powermail-pi1_fieldset div.even {
	background-color: #f2f2f6;
}


	/* Confirmation */
td.powermail_all_td {
	padding: 3px 10px 3px 0;
}

	/* THX */
td.powermail_all p.bodytext {
	margin: 0;
}
Danke für eventuelle Antworten!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.12.2010, 12:20
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Stell lieber einen Link rein. Ohne Grafiken kann sich das eh keiner nachbauen.

Auf den ersten Blick --> alles mit position:absolute zugepflastert.
I.d.R. überflüssig bzw. Murks.

Manfred
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.12.2010, 12:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2010
Beiträge: 8
Robin-Hood befindet sich auf einem aufstrebenden Ast
Standard Link

Hallo Manfred62,
ich weiss, dass der Code nicht ganz sauber ist.
Das Problem taucht bei einer TYPO3 Seite in einem Kontaktformular auf!
Deshalb ist das hier auch etwas unsauber. Weil ich versucht habe das Problem nachzuvollziehen.

Hier der Link zur Seite:

Kontakt
Mit Zitat antworten
  #4 (permalink)  
Alt 09.12.2010, 12:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Beim Absenden wird der Anker #c64 angesprungen. Die einzig sinnvolle Lösung dürfte sein, auf overflow:hidden zu verzichten.

Auch durch deine Art der Zentrierung mit abs. Pos. werden die Inhalte (= Navigation) bei schmalem Viewport unzugänglich. Nicht gut.
Mit Zitat antworten
  #5 (permalink)  
Alt 09.12.2010, 13:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2010
Beiträge: 8
Robin-Hood befindet sich auf einem aufstrebenden Ast
Standard Ich kann leider nicht auf overflow:hidden verzichten

Ich kann leider nicht auf overflow:hidden verzichten, denn das ist ein wesentlicher Bestandteil der fertigen Webseite.
Das Problem ist erst nach der erstmaligen Verwendung von Powermail (TYPO3 Extention aufgetreten)
Mit Zitat antworten
  #6 (permalink)  
Alt 09.12.2010, 13:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Robin-Hood Beitrag anzeigen
Ich kann leider nicht auf overflow:hidden verzichten, denn das ist ein wesentlicher Bestandteil der fertigen Webseite.
Das kann ich kaum glauben.
Was ist der Zweck, außer den überstehenden blauen Teil abzuschneiden?

Zitat:
Das Problem ist erst nach der erstmaligen Verwendung von Powermail (TYPO3 Extention aufgetreten)
Dann hast du halt vorher keine Anker angesprungen.
Mit Zitat antworten
  #7 (permalink)  
Alt 09.12.2010, 13:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2010
Beiträge: 8
Robin-Hood befindet sich auf einem aufstrebenden Ast
Standard

Ich habe die ganze CSS Datei mit Firebug untersucht!
Wenn ich overflow:hidden ausschalte, wird das Layout zerstört!
Grüße
Mit Zitat antworten
  #8 (permalink)  
Alt 09.12.2010, 13:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

"zerstört" ist keine Fehlerbeschreibung.

Es hilft alles Jammern nichts -- das Problem mit Ankern und overflow:hidden ist nicht vernünftig lösbar.
Wie Manfred bereits angedeutet hat: Das Grundproblem ist die exzessive (überflüssige) absolute Positionierung. Etwas anderes, als das ganze neu aufzubauen, kann man dir wohl nicht raten.
Wenn du optisch gleich hohe Spalten willst hilft z.B. die Faux-Columns-Methode. Siehe dazu FAQ Punkt 1 im CSS-Bereich (dort gehören Darstellungsprobleme hin). Um Elemente nebenander zu setzen hilft Float -- im UNterschied zu abs. Pos. kann man dann wieder einen Zusammenhang zw. den Elementen herstellen.
Ansonsten kann man anhand der leeren Elemente und Farbflächen nicht mehr zu einer sinnvollen Layoutumsetzung sagen.
Mit Zitat antworten
  #9 (permalink)  
Alt 09.12.2010, 14:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2010
Beiträge: 8
Robin-Hood befindet sich auf einem aufstrebenden Ast
Standard Danke

Danke - Werde ich wohl machen müssen!
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
inhalt verschiebt sich, overflow

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
steuerung von horizontalen scrollbars (overflow: hidden, visible) Vogelgrippe CSS 2 15.05.2011 12:16
z-index hoch, dennoch grafik nicht ganz oben bergg CSS 6 27.10.2010 16:02
Firefox display bug: overflow und javascript Rauno (X)HTML 0 05.08.2008 12:40
FF overflow Problem 3-spaltiges Layout smartt CSS 14 26.07.2006 18:11
Overflow Problem Firefox / IE SURE612 CSS 11 14.07.2006 14:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:41 Uhr.