Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Problemlayout - Content soll feste Höhe haben und mehr“

Tattoomaus78

nemesis-artgroup.de

Hallo Ihr Lieben,

ich brauch mal eure Hilfe.

Ein Kunde treibt mich mal wieder in den Wahnsinn :motz:

folgendes Layout:



Ursprungsauftrag lautete: Layout mit fester Breite, flex. Höhe, zentriert...kein Problem...hab ich gemacht...lief alles wunderbar...

nun hätte Kunde jedoch gern genau dieses Layout in flexibler Breite .... *planlosguck

Weiterer wunderbarer Wunsch ist, dass die Höhe nun auch fest sein soll....soll heißen, Header und Footer immer sichtbar und Contentbereich mit Scrollbalken...aber nur der rechte, also Content 2 ....die Sidebar rechts soll ebenfalls eine 100 %ige Höhe haben.

Versteht mich jemand? :uhm:

Lösungsvorschläge sind sehr gern gesehen, weil ich weiss nicht, wie ich an die Sache ran gehen soll.


der derzeitige Code wird nicht wirklich weiter helfen, aber dennoch...

Code:
html, body, h1, h2, h3, h4, ul, li {
margin:0;
padding:0;
}

img {
border:0 none;
}

a {
color:#464544;
}

a:hover {
color:#FFA405;
}

.clear {
clear:both;
}

body {
background:#FFFFFF none repeat scroll 0 0;
color:#464544;
font-family:arial,sans-serif;
font-size:12px;
text-align:center;
}

#wrapper {
margin:auto;
position:relative;
text-align:left;
width:900px;
}

#header {
background:transparent url(images/header.jpg) no-repeat scroll 0 0;
height:301px;
left:0;
position:absolute;
top:0;
width:711px;
}

#sidebar {
background:#5F6A75 none repeat scroll 0 0;
left:711px;
position:absolute;
top:4px;
width:180px;
padding-right:10px;
padding-left:10px;
padding-top:25px;
padding-bottom:25px;
}

#news {
background:#5F6A75 none repeat scroll 0 0;
color:#FFFFFF;
}

#standort {
background:#5F6A75 none repeat scroll 0 0;
color:#FFFFFF;
}

#content {
margin:0 0 0 0;
width:733px;
position:top left;

}
#spacer {
height:301px;
}

#left {
background-color:#FFFFFF;
border-right:2px solid #B3B3B3;
float:left;
margin-left:0;
margin-top:13px;
padding-right:10px;
width:160px;
}
#right {
background-image:url(images/bg.jpg);
background-position:right top;
background-repeat:no-repeat;
float:left;
margin-top:0;
min-height:250px;
*height:250px;
padding-left:10px;
padding-right:10px;
padding-top:15px;
width:514px;
}
.panorama {
margin-bottom:10px;
margin-left:0px;
margin-top:10px;
}

#rechts {
float:left;
padding-right:30px;
padding-top:10px;
}
#mehr {
margin-right:10px;
text-align:right;
}
#mehrsidebar {
margin-right:-5px;
text-align:right;
}
span {
color:#FAC424;
font-weight:bold;
}
#line {
background-image:url(images/line.jpg);
background-repeat:repeat-x;
height:2px;
margin-bottom:20px;
margin-top:20px;
text-align:center;
width:158px;
}

#bild {
margin-left:8px;
}

#inhalt {
margin:25px 10px 0;
width:685px;
}

#navlist {
border:medium none;
font-size:12px;
font-weight:normal;
letter-spacing:0;
margin-left:144px;
margin-top:102px;
padding-left:0;
text-transform:uppercase;
width:148px;
}

#navlist li {
border-bottom:1px solid #FFFFFF;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0.25em;
}

#navlist li a {
color:white;
text-decoration:none;
}

#navlist a:hover {
color:grey;
text-decoration:none;
}

#footer {
background:#FFFFFF none repeat scroll 0 0;
border-top:2px solid;
color:#B3B3B3;
font-size:11px;
margin-bottom:20px;
margin-left:0;
margin-top:20px;
padding:10px 0;
text-align:center;
width:100%;
}

#footer p {
margin:0;
padding:0;
}

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>xxx</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO8859-1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="modul.css" type="text/css" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<div id="wrapper"><!-- TemplateBeginEditable name="sidebar" -->
	<div id="sidebar">
		<div id="news">
			<img src="images/news.jpg" /> 
			<?PHP include('http://xxxxxxxxxxxxxx/content.php?key=31d16f9aa6d064a579758789227c62a1&cs_mid=1');?>
		</div>
 		<div id="line"></div>
		<div id="standort">
  		  <img src="images/standort.jpg" />
			<p><img src="images/lkws.jpg"/></p>
			~Lorem<br />
			~ Ipsum<br />
			~ Dolor<br />
			~ Sit<br />
			~ Amet
			<div id="mehrsidebar"> <img src="images/mehr.jpg" /></div>
		</div>
		<div id="line"></div>
		<div id="standort">
			<p><img src="images/lkws.jpg"/></p>
			<p><span>Consetetur sadi pscing elitr,</span> 
            sed dolores et ea consetetur eirmod Erat, sed diam voluptua dolores et ea consetetur pscing elitr.</p>
			<p>Erat, sed diam voluptua dolores et ea consetetur </p>
			<div id="mehrsidebar"> <img src="images/mehr.jpg" /></div>
		</div>
	</div>
<!-- TemplateEndEditable -->
	<div id="header">
		<div id="navlist">
			<ul>
				<li><a href="index.php">Startseite</a></li>
				<li><a href="produkte.php">Produkte</a></li>
				<li><a href="service.php">Service</a></li>
				<li><a href="technik.php">Technik</a></li>
				<li><a href="mittel.php">F&ouml;rdermittel</a></li>
				<li><a href="kosten.php">Energiekosten</a></li>
				<li><a href="lexikon.php">Energielexikon</a></li>
				<li><a href="fragen.php">Fragen &amp; Antworten</a></li>
			</ul>
		<div class="clear"> </div>
		</div><!--end nav-->
	</div><!--end header-->
	<div id="spacer"> </div>
<!-- TemplateBeginEditable name="content" -->
	<div id="content">
		<div id="inhalt"> 
		</div>   <!-- TemplateEndEditable -->
		
	</div><!--end content-->
    <div id="footer">
    		Startseite | &uuml;ber uns | Leistungen | Service | Kontakt | Impressum <br />
			xxxxxxxxx
		</div>
</div> <!--end wrapper-->
</body>
</html>
 

Tattoomaus78

nemesis-artgroup.de

AW: Problemlayout - Content soll feste Höhe haben und mehr

hö?...hab ich doch so ...okay bis auf das main div..das hab ich noch eingefügt..ändert aber nix an meinem Problem

edit:
also...ich will den footer immer unten haben den Header immer sichtbar oben....der Contentbereich soll sich der Browsergröße anpassen ....und Sidebar soll immer bis ganz an den Bildschirmrand unten gehen

für content 2 geht nicht:

height: sounsoviel px;
overflow: auto;

da der ja keine bestimmte Höhe haben soll, sondern sich ja an die Fenstergröße anpassen soll
 
Zuletzt bearbeitet:
AW: Problemlayout - Content soll feste Höhe haben und mehr

ähm?

das hauptdiv soll 100% nehmen
header(fest)
links(100%?)
content(100%)
footer(fest)
rechts(100%)

das hauptdiv nimmt 100% der höhe weg, danach hat der header und der footer eine feste höhe und der rest nimmt den restlichen bereich weg

edit: position:absolute; ? °_°
als ich mir die seite eben mal nach deinem code aufgebaut und ein paare hintergrund farben eingebaut habe komme ich zu dem schluss: mit welchen fertig-code-programm hast du das erstellt?
du solltest die seite nochmal von grund auf überarbeiten, einige sachen kann man wesentlich besser lösen ;)

edit2:

hauptdiv und andere div auf 100%, den content bereich den man scrollen muss in einem frame packen, die frame höhe dann per php ausrechnen lassen

edit3 sagt: framehöhe müsste auch mit 100% auf die max höhe vom umschließenden div gehen
 
Zuletzt bearbeitet:
S

serverhombre

Guest

AW: Problemlayout - Content soll feste Höhe haben und mehr

Hallo,
so hab mal schnell was zusammen geklatscht (edit was nicht funktioniert sorry) :


Ist alles bisschen grob vor allem der Code. :hmpf:
Gibt leider noch paar Probleme mit der anzeige z.B. im IE. Bei verschiedenen Auflösungen wirds sicher auch noch nicht stimmen:'(

Ich hoffe trotzdem das es Hilft.:rolleyes:
 
Zuletzt bearbeitet von einem Moderator:
AW: Problemlayout - Content soll feste Höhe haben und mehr

Hallo,
so hab mal schnell was zusammen geklatscht:


Ist alles bisschen grob vor allem der Code. :hmpf:
Gibt leider noch paar Probleme mit der anzeige z.B. im IE. Bei verschiedenen Auflösungen wirds sicher auch noch nicht stimmen:'(

Ich hoffe trotzdem das es Hilft.:rolleyes:


wenn man den content runterscrollt bzw hochscrollt, überlagert der sich mit dem footer ;)
 
S

serverhombre

Guest

AW: Problemlayout - Content soll feste Höhe haben und mehr

sorry also dann funktiniert das so auch nicht :rolleyes:
Und das hab ich leider auch übersehen.
für content 2 geht nicht:

height: sounsoviel px;
overflow: auto;

Vieleicht kanns jemand ja besser als ich. :rolleyes:
 
Zuletzt bearbeitet von einem Moderator:

Top_Gun

Aktives Mitglied

AW: Problemlayout - Content soll feste Höhe haben und mehr

Nun soweit ich weiß wird das mit divs nicht gehen...

Mit Frames gäbe es eine Lösung...
 

Top_Gun

Aktives Mitglied

AW: Problemlayout - Content soll feste Höhe haben und mehr

Ich kann dir gar nicht sagen wie dankbar ich über diesen Link bin. Es ist mir wie Schuppen von den Augen gefallen und ich muss so dämlich sein, dass ich nicht selbst drauf gekommen bin... Absolute Positionierung über den Z-Index... AHHHH ich könnt mir in den ***** beißen...

Mal schauen ob ich das Problem damit löse...

Edit: Ich hab jetzt nen HTML 4.01 und CSS 3 validen Quelltext der im IE 6 eine astreine Seite abgibt, macht aber leider im FF 2 und Opera 9 noch Probleme... Kann bitte jemand mal in FF 3 und IE 7 testen?

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Beispiel</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css">
HTML {
    OVERFLOW: hidden
}
BODY {
    BORDER-TOP-WIDTH: 0px;
    PADDING-RIGHT: 10px;
    PADDING-LEFT: 10px;
    BORDER-LEFT-WIDTH: 0px;
    BACKGROUND-COLOR: #f8f8f8;
    BORDER-BOTTOM-WIDTH: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    HEIGHT: 100%;
    BORDER-RIGHT-WIDTH: 0px;
}
 HTML BODY {
    OVERFLOW-Y: scroll;
}
#header {
    DISPLAY: block;
    Z-INDEX: 12;
    RIGHT: 0px;
    BACKGROUND-COLOR: yellow;
    OVERFLOW: hidden;
    WIDTH: 100%;
    POSITION: fixed;
    TOP: 0px;
    HEIGHT: 150px;
}
 HTML #header {
    RIGHT: 17px;
    POSITION: absolute;
}
#content {
    DISPLAY: block;
    Z-INDEX: 2;
    BACKGROUND-COLOR: blue;
    OVERFLOW: hidden;
    WIDTH: 150px;
    POSITION: fixed;
    TOP: 0px;
    MARGIN-TOP: 150px;
    HEIGHT: 100%;
}
 HTML #content {
    LEFT: 3px;
    POSITION: absolute;
}
#scroll_content {
    DISPLAY: block;
    Z-INDEX: 10;
    BACKGROUND-COLOR: red;
    MARGIN: 150px 150px 150px 150px;
    OVERFLOW: hidden;
    POSITION: relative;
}
.text {
    PADDING-RIGHT: 1px;
    DISPLAY: block;
    PADDING-LEFT: 1px;
    FLOAT: left;
    PADDING-BOTTOM: 151px;
    WIDTH: 90%;
    COLOR: #000;
    PADDING-TOP: 1px;
    TEXT-ALIGN: justify;
}
#footer {
    DISPLAY: block;
    Z-INDEX: 12;
    RIGHT: 0px;
    BACKGROUND-COLOR: green;
    OVERFLOW: hidden;
    WIDTH: 100%;
    POSITION: fixed;
    BOTTOM: -1px;
    HEIGHT: 150px;
}
 HTML #footer {
    RIGHT: 17px;
    POSITION: absolute;
}
#sidebar {
    DISPLAY: block;
    Z-INDEX: 22;
    RIGHT: 0px;
    BACKGROUND-COLOR: orange;
    OVERFLOW: hidden;
    WIDTH: 150px;
    POSITION: fixed;
    BOTTOM: -1px;
    HEIGHT: 100%;
}
 HTML #sidebar {
    RIGHT: 17px;
    POSITION: absolute;
}
</style>
</head>
<body>
<div id=header>header</div>
<div id=content>Content</div>
<div id=scroll_content>
<div class=text>
First Row<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanger Satz....<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Last Row
</div>
</div>
<div id=footer>Footer</div>
<div id=sidebar>Sidebar</div>
</body>
</html>
 
Zuletzt bearbeitet:

Tattoomaus78

nemesis-artgroup.de

AW: Problemlayout - Content soll feste Höhe haben und mehr

Jooohny & Top_Gun .... Daaaaaannnnkkkkeeeeee...das hilft mir wirklich weiter.... *verneig
 

Top_Gun

Aktives Mitglied

AW: Problemlayout - Content soll feste Höhe haben und mehr

Wenn du ne Lösung hast die Browserübergreifen funktioniert wäre ich dir sehr verbunden wenn du die mit uns teilen könntest... Würde gerne meinen Horizont erweitern, bin im Selbstversuch aber heute mehrfach gescheitert...
 

Tattoomaus78

nemesis-artgroup.de

AW: Problemlayout - Content soll feste Höhe haben und mehr

ich bin jetzt genauso weit wie du... IE läuft...FF, Opera wollen noch nicht so richtig :(
 

Top_Gun

Aktives Mitglied

AW: Problemlayout - Content soll feste Höhe haben und mehr

:D grandios, dafür habe ich sogar mehrere Möglichkeiten gefunden. Leider keine die in nem anderen Browser funzt...
 

Jooohny

Gesperrt

AW: Problemlayout - Content soll feste Höhe haben und mehr

Wie wen FF und IE gehen geht auch meistens ales andere Opera und KO sind in so sachen doch sehr pflegeleicht :D

Mal ein Pic von verzerungen oder anlichen in anderen Brower und der Quelltext und schon gehts los

let´s rocken roll

gruß:Jooohny
 

Tattoomaus78

nemesis-artgroup.de

AW: Problemlayout - Content soll feste Höhe haben und mehr

Doppelpost :D

....sodele...ich habs...sicher nicht die eleganteste Lösung aber läuft im IE 6 +7, FF 2 + 3, Opera



Code:
html {
height:100%; 
max-height:100%; 
padding:0; 
margin:0; 
border:0; 
background:#fff; 
font-size:76%; 
font-family:"arial", Helvetica, sans-serif;
overflow: hidden; 
}

body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}

#header {
position:absolute;
margin:0;
top:0;
left:0;
display:block;
width:100%;
background-repeat:no-repeat;
z-index:5;
background:red;
height:301px;
overflow:hidden;

}

#foot {
position:absolute; 
margin:0; 
bottom:0; 
left:0; 
display:block; 
width:100%; 
height:20px;
*height:40px;
z-index:5; 
background:blue;
overflow:hidden;
padding:10px 0;
}

* html #content, * html #scrollcontent,  {height:100%; top:0; bottom:0; border-top:300px solid #fff; border-bottom:40px solid #fff;}

#content {
background-color:orange;
bottom:40px;
font-size:1em;
left:0;
margin-left:0px;
overflow:hidden;
padding:10px;
position:absolute;
top:301px;
width:14%;
z-index:4;
}
#scrollcontent {
background:#fff none repeat scroll 0 0;
bottom:40px;
font-size:1em;
left:15%;
overflow-x:hidden;
overflow-y:auto;
position:absolute;
top:301px;
padding:10px;
width:67%;
*width:70%;
z-index:4;
}

#sidebar {
background:green none repeat scroll 0 0;
height:100%;
overflow:hidden;
padding:25px 10px;
position:absolute;
right:0;
top:0;
width:15%;
z-index:10;
}
HTML:
<!-- IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>

<body>
<div id="sidebar"></div>

<div id="content">
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.
</div>

<div id="scrollcontent">
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.   

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, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. 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.   

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.   

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.   

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, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. 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.   

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
</div>

<div id="header"></div>
<div id="foot"></div>
</body>
</html>
 
Zuletzt bearbeitet:

Top_Gun

Aktives Mitglied

AW: Problemlayout - Content soll feste Höhe haben und mehr

Ich sag schon mal: DANKE :D

Werd mir das morgen in Ruhe mal anschauen...

Edit: Ähm, kann es sein, dass du bei deinem Livebeispiel anderen Code verwendest? Der von dir gepostete Quelltext bringt keine funktionelle Lösung im IE 6...
Und in Opera 9 funktioniert dein Livebeispiel auch nicht...
 
Zuletzt bearbeitet:

chillyorker

Weiß_Nix

AW: Problemlayout - Content soll feste Höhe haben und mehr

Mein Vorschlag wäre es hier mit CSS-Hack zu arbeiten:
Im Header
<!--[if lt IE 7]>
<link href="CSS/css.css" rel="stylesheet" type="text/css" media="Schauen_wir_mal" />
<![endif]-->

Das ist bisher die beste Lösung übergreifende perfekte Seite für alle Browser zu proggen!

Nur ein Vorschlag und eine Möglichkeit!

Habe ich es richtig verstanden: Der Scrollbalken, wie dem Code zu entnehmen, ist ganz rechts positioniert.
Den kann man auch in die Mitte setzen. Mit Javascript:
innerHeight

1x für Explorer und 1x für Mozilla.
Mit PHP berechnest du die Differenz und gibst diese an alle anderen Seiten weiter. Somit kann man auch overflow:auto verwenden!

Hier ein Ausschnitt:
..../div>
<div id=scroll_content>
<div style="height:<?php echo (abc-250); ?>px; // abc wurde vorher mit inner.height über document.write ausgegeben nur mozilla - bei Explorer schau einfach hier - W3C DOM Compatibility - CSS Object Model View! - Also, ich habe eine Startseite, die einfach und dezent bleibt- da hole ich mir alle Informationen raus und gebe diese via POST[] weiter! Ist für den Beuscher angenehmer!
overflow: auto;
PADDING-RIGHT: 1px;
PADDING-LEFT: 1px;
FLOAT: left;
PADDING-BOTTOM: 151px;
WIDTH: 90%;
COLOR: #000;
PADDING-TOP: 1px;
TEXT-ALIGN: justify;">
First Row<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
Scroll_Content<br>
.....
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
174.469
Beiträge
2.577.920
Mitglieder
65.951
Neuestes Mitglied
Lunita
Oben