zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE Scrollbar erzeugen Layout bruch

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.04.2013, 18:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2011
Beiträge: 18
napoli befindet sich auf einem aufstrebenden Ast
Frage IE Scrollbar erzeugen Layout bruch

Hi,
habe soeben ein Layout fertig gestellt. Nur leider habe ich einen Fehler drin.

Wenn der Text bzw. content im
HTML-Code:
<div class="content-textarea">
länger wird als der Browser hoch ist, sodass scrollbars entstehen, dann wird mir mein container etwas nach links versetzt.
So siehts bei wenig content aus:


So siehts mit viel content aus:


Der gesamte Quelltext (css in html) befindet sich hier:

HTML-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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>test</title>
<style type="text/css">
* {
border:0px solid #eee;
list-style:none;
}html, body {
//background: url(bg.jpg) no-repeat;
//background-position: center center;
//background-attachment: fixed;
//background-color: grey;
top: 0px;
margin: 0px;
paddin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#bg-trans {
background: url(img/w55.png) repeat;
//background-color: white;
width: 100%;
min-height: 100%; 
height: auto;
top: 0px;  
left: 0px; 
margin-top: 0px;
margin-left: 0px;
position: absolute;
}
#main {
background-color: green;
width: 900px;
//height: auto;
//min-height: 500px;
//margin-top: 0px;
		//position:absolute;
		//left: 50%;
		//margin-left:-450px;

position: relative;
margin: 0 auto;

//margin-left: auto;
//margin-right: auto;
font-family: "Arial Narrow", Arial, sans-serif;
//overflow:hidden;
}
#logo {
background: url(img/logo.png) no-repeat;
margin-top: 15px;
margin-left: 15px;
margin-right: 30px;
width: 196px;
height: 60px;
display: block;
float: left;
}
#header {
background-color: white;
width: 900px; 
height: 90px;
top: 0px;  
left: 50%; 
margin-top: 0px;
margin-left: -450px;
position: fixed; 
}
#nav {
//background-color: white;
width: 100%;
height: 100%;
text-transform: uppercase;
}
.nav-item {
margin-top: 25px;
margin-right: 25px;
float: left;
}
#header-flow {
background: url(img/h2.png) repeat-x;
width: 100%;
height: 25px;
}
#main-content {
background: url(img/w85.png) repeat;
//background-color: blue;
width: 900px;
height: auto;
min-height: 380px;
padding: 0px;
margin-top: 90px;
}
.content-textarea {
width: auto;
height: auto;
min-height: 380px;
padding: 10px;
}
#footer {
width: auto;
height: 25px;
padding: 25px;
text-align: center;
}

/*bg-size*/
#bg,#bg table,#bgtd,#content {

width:100%;

height:100%;

overflow:hidden;
display: block;

}



#bg div {

position:absolute;

width:200%;

height:200%;

top:-50%;

left:-50%;

}


#bg img {

min-height:50%;

min-width:50%;

margin:0 auto;

display:block;

}


#content {

position:absolute;

top:0;

left:0;

z-index: 100;

overflow:auto;
}
/*bg-size*/
</style>

<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="style_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>
<body>




<div id="content">

	<!-- <div id="bg-trans"> -->
		<div id="main">
			<div id="main-content">
				<div class="content-textarea">
					<p>Hello<br />
						<img alt="background" src="img/bg.jpg" height="250px" width="400px" style="padding: 0px 25px 10px 0px; float: left" />
							Wir sind bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
							bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
					</p>
					<p><strong>TEST &amp; TEST:</strong> Sie haben eine Idee?</p>
					<p><strong>TEST &amp; TEST:</strong> Sie haben eine Idee?</p>

				</div>
			</div>
			<div id="footer">Impressum
			</div>
		</div>
	<!-- </div> -->

	<div id="header">
		<a id="logo" href="www.google.de" target="_self"></a>
		<div id="nav">
			<div class="nav-item">
				<a href="http://www.google.de" target="_self">Link</a>
			</div>
			<div class="nav-item">
				<a href="http://www.google.de" target="_self">Link</a>
			</div>
			<div class="nav-item">
				<a href="http://www.google.de" target="_self">Link</a>
			</div>
			<div class="nav-item">
				<a href="http://www.google.de" target="_self">Link</a>
			</div>
			<div class="nav-item">
				<a href="http://www.google.de" target="_self">Link</a>
			</div>
		</div>
	<div id="header-flow">
	</div>
	</div>
</div>



<div id="bg">

	<div>

		<table cellpadding="0" cellspacing="0">
			<tr>

				<td>

					<img alt="background" src="img/bg.jpg" />

				</td>

			</tr>

		</table>

	</div>

</div>


</body>
</html>
Mittels google bin ich hierauf gestoßen, was mir allerdings auch nicht viel weiter hilft. Weiß jmd von euch wie ich das lösen kann?

Liebe Grüße

Geändert von napoli (22.04.2013 um 18:57 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.04.2013, 19:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2011
Beiträge: 18
napoli befindet sich auf einem aufstrebenden Ast
Standard

Wenn man "overflow:auto;" im "#content" rauslöscht, ist zwar die Verschiebung nicht mehr vorhanden, jedoch kann man nicht mehr scrollen.

Geändert von napoli (22.04.2013 um 19:35 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.04.2013, 11:06
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Ich frag mich, warum du ein solches Layout mit einer absoluten Positionierung realisieren willst? Die ist doch hier nicht nötig.
Mit Zitat antworten
  #4 (permalink)  
Alt 23.04.2013, 14:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2011
Beiträge: 18
napoli befindet sich auf einem aufstrebenden Ast
Standard

wenn ich aber bei
#content
das
position:absolute;
rauslösche, befindet sich mein contentbereich im nicht sichtbaren bereich.
Mit Zitat antworten
  #5 (permalink)  
Alt 23.04.2013, 14:44
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Du benutzt etliche Positionierungen, wenn du die alle bis auf die Navi löscht, sieht es schon besser aus. Ich hab' aber jetzt nicht versucht dein Layout komplett umzubauen, es ist nur so, dass diese Art des Layouts an sich keine absoluten Positionierungen benötigt. Lediglich deine Navi braucht diese - da kann man vielleicht drüber diskutieren, ob die im HTML Code an's Ende muss, finde ich aber nicht grundsätzlich verkehrt - der Rest läßt sich aber ohne Probleme anordnen.
Mit Zitat antworten
  #6 (permalink)  
Alt 24.04.2013, 16:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2011
Beiträge: 18
napoli befindet sich auf einem aufstrebenden Ast
Standard

hi,
also ich bekomme es wirklich nicht hin.
ich muss dem BG konstrukt das absolute geben, da das BG Bild sich der Browsergröße anpasst (ohne JS).

Wenn jmd zeit hat, kann ja jmd mal sich daran versuchen das Template zu korrigieren.
Mit Zitat antworten
  #7 (permalink)  
Alt 24.04.2013, 17:51
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

du solltest deinen Versuch mal online stellen. Ohne Bilder macht sich hier niemand die Mühe, das alles nachzubauen. Eigentlich ist das ein simples Layout, welches man viel einfacher (wie oben) aufbauen kann?
Mit Zitat antworten
Antwort

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
2 spaltiges Layout, unabhängig scrollbar Plasm CSS 6 15.02.2008 11:31
3-spaltiges Layout, 2 Spalten scrollbar - Hilfe ! GizmotroniX CSS 2 11.07.2007 10:20
Layout: Dynamische Ränder + Kopf, Menü, Content, Fuss + Scrollbar sailing-alex CSS 2 08.02.2007 15:53
CSS Layout mit scrollbar?? carly CSS 1 13.12.2006 18:07
Strict / Transitional erzeugen unterschiedliches Layout? Anotherone (X)HTML 3 29.09.2005 18:10


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:39 Uhr.