HTML problem mit css

Frame · 13.11.2008, 20:34

Hey leute....
ich habe folgendes problem.
Ich möchte mit css boxen erstellen und zwar hab ich eine überschriftbox und eine für den kram darunter...
Zu der unteren Box...
enthalten sind 3 andere boxen ...eine links(inhaltsverzeichnis width:20%)
eine mitte(text width:70%)
eine rechtes (links width:10%)
das problem ist nur das die 3. rechte box unter den anderen beiden boxen ist und man so runter scrollen muss.
Ich möchte aber dass die 3 boxen schön nebeneinander sind und man nur die textbox scrollen musst(overflow:scroll)
die boxen sehen ca so aus
I-------------I------------------------------------I

I___________I________________________________I
I I

I_________I

ES SOLL ABER SO SEIN
I-------I------------------------------I-----------I

I______I__________________________I__________I
villeicht kann mich einer helfen.
Schonmal im voraus danke sehr

MFG Frame

Anzeige

Schau dir mal diesen Bereich an. Dort ist für jeden was dabei!

Das_Es · 13.11.2008, 23:48

das einfachste wäre Absolute positionierte Divs, es gibt zwar noch die möglichkeit mit floateten* aber da ist es schwieriger die höhe fest zu legen.
mit Bsp. Text

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" />
<title>Unbenanntes Dokument</title>

<style type="text/css">
	#box1 {
		position:absolute;
		left:0%;
		width:20%;
	}
	#box2 {
		position:absolute;
		left:20%;
		width:70%;
		height:100%;
		overflow:scroll;
	}
	#box3 {
		position:absolute;
		left:90%;
		width:10%;
	}
	#rest { 
		position:absolute; 
		top:20%; 
		left:0px; 
		width:100%;
		height:80%;
	}
	</style>
</head>

<body>
<div id="überschrift"><h1>Meine Überschrift</h1></div>
<div id="rest">
	<div id="box1">Inhaltsverzeichnis</div>
    <div id="box2"><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.</p>
            
    <p>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.</p>
      
            
    <p>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.</p>  
            
    <p>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. </p>
            
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>   
            
    <p>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.</p>   
            
    <p>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</p></div>
    <div id="box3">links</div>
</div>

</body>
</html>

ohne beispiel text

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" />
<title>Unbenanntes Dokument</title>

<style type="text/css">
	#box1 {
		position:absolute;
		left:0%;
		width:20%;
	}
	#box2 {
		position:absolute;
		left:20%;
		width:70%;
		height:100%;
		overflow:scroll;
	}
	#box3 {
		position:absolute;
		left:90%;
		width:10%;
	}
	#rest { 
		position:absolute; 
		top:20%; 
		left:0px; 
		width:100%;
		height:80%;
	}
	</style>
</head>

<body>
<div id="überschrift"><h1>Meine Überschrift</h1></div>
<div id="rest">
	<div id="box1">Inhaltsverzeichnis</div>
    <div id="box2">Inhalt</div>
    <div id="box3">links</div>
</div>

</body>
</html>

*)

das problem ist nur das die 3. rechte box unter den anderen beiden boxen ist und man so runter scrollen muss.

der Satz deutet darauf hin das du versuchst zu floaten. Ich tippe mal darauf das du bei den boxen noch weitere angaben gemacht hast wie z.b. Boarder, padding, margin ect. einige von denen werden zu der Breite berechnet. Heist also das du nicht mehr 100% hast sonder 100%+6px (als beispiel). sollte das der fall sein, einfach in den div ein weiteres div machen z.b. <div class="sub"> und im CSS #box1 .sub { boarder 1px solid #f0f }

martin-josef · 14.11.2008, 00:06

[QUOTE=Das_Es;2042506]das einfachste wäre Absolute positionierte Divs, es gibt zwar noch die möglichkeit mit floateten* aber da ist es schwieriger die höhe fest zu legen.
mit Bsp. Text

[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>

Hallo
nur mal so aus Neugier. Deine Weberstellung erfolgt mittels MS Expressions Web oder...
gruß
martin-josef

Das_Es · 14.11.2008, 00:10

nein.
Das was Zitiert wurde ist im übrigen eine art Standard Einleitung. Das Doctype und das xmlns schreiben vor dass das Dokument im XHTML Standard ist (z.b. jeder tag hat ein end-tag oder ein / am ende, Atribute sind werden immer klein geschrieben usw.)

Frame · 14.11.2008, 09:12

Ihr seid die bestren

ich danke euch für die hilfe
Aber wenn ich jetzt overflow:scroll; angebe dann is da der scrollbalken aber der bringt nichts weil der die ganze seite scrollen will Oo
hat dazu wer ne lösung?
MFG Frame