Anzeige:
Ergebnis 1 bis 3 von 3

Thema: css: div & float & clear

  1. #1
    Registrierter Benutzer
    Registriert seit
    08.07.2002
    Beiträge
    377

    Question css: div & float & clear

    Es handelt sich um folgenden Code:
    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" lang="en">
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta name="description" content=""/>
    		<meta http-equiv="content-language" content="en" />
    		<link rel="icon" type="image/img" href="include/theme/default/img/icon.png" />
    		<link rel="stylesheet" type="text/css" media="all" href="include/theme/default/css/default.css" charset="utf-8" />
    
    	</head>
    
    <body>
    	<div id="pagetop">
    	top
    </div>
    	<div class="index"> 
    		<div class="index_menu">
    			<div id="loginarea">
    	<br />
    ...
    	test <br>
    </div>		</div>
    		<div class="index_main">
    			<div class="index_content">
    			bla bla bla
    	<br><br><br>
    	fdaf;
    	...
    	<br>
    
    	dffa
    </div>		</div>
    	</div>  
    	
    	<div id="pagebottom">
    	bottom
    </div>	<br />
    </body>
    
    </html>
    in verbindung mit folgendem CSS-Style:
    Code:
    div#pagetop {
    	color:				#000000;
    	background-color:		#40538b;
    	border-bottom: 			1px solid #000000;
    	height:				130px;
    }
    
    div#pagebottom {
    	background-color:		#bcbbcb;
    	border-top:			1px solid #000000;
    	color:				#000000;
    	clear: 				both;
    	height:				100px;
    	width:				100%;
    }
    
    div.index { /* <<<                                                        Problem */
    	border:				2px solid #FFFFFF;
    	margin-left:			25px;
    	margin-right:			25px;
    	margin-top:			30px;
    	margin-bottom:			30px;
    /*	position:			absolute; */
    }
    
    div.index_menu {
    	float: left;
    	width: 160px;
    }
    
    div.index_main {
    	float: 				right;
    	text-align: 			left;
    	width:				84%;
    }
    und nun zu meinem Verlangen: Wie man sieht verwende ich hier <div>-Elemente, um die einzelnen Bereiche auf meiner Seite voneinander zu trennen. Nun hab ich aber ein Problem mit dem <div> mit der Klasse index.

    Und zwar enthaelt dieses <div> zwei weitere Element. Die beiden inneren Elemente werden aber nur Innen angezeigt, wenn ich im div.index die position auf absolut setze.
    Nur springt dann das div.pagebottom nach ganz oben unters div.pagetop.

    Ich hoffe das war jetzt halbwegs verstaendlich erklaert. Sein sollen die zwei divs (index_menu und index_main) wirklich im div.index und div.pagebottom soll unter dem div.index Element erscheinen.

    Ich benutze hier Firefox, kann also nicht wirklich sagen, ob das jetzt beim IE anders ist, aber waere trotzdem nett, wenn mir jemand sagen koennte, wie ich mein Problem loesen kann.

    mfg
    nul
    Amilo D - 2,8 Ghz - ATI Radeon 9000
    Debian GNU/Linux 3.1 (Sarge)

  2. #2
    Registrierter Benutzer
    Registriert seit
    22.08.2002
    Ort
    Nürnberg
    Beiträge
    638
    Zwei Dinge, über die Du Dir Gedanken machen müsstest.

    - Erstens, wenn Du float zur Positionierung des Hauptinhalts oder des Menüs verwendest, kann Du es nicht mehr richtig im Inhalt selbst verwenden. Der Text kann keine Bilder oder Tabellen mehr umfließen. Sicherlich kann man es weiterverwenden, aber wundere Dich dann nicht über irgendwelche komischen Effekte.

    - Zweitens das Attribute position. Es kann verschiedene Auszeichnungen haben. Das Standardverhalten ist relative. Hierbei berechnet der Browser zuerst die Position des Elementes, wo es normalerweise hinkommen würde, wenn alles hintereinander geschrieben wird und rechnet es dann anhand der Positionsangaben (top, bottom, left oder right) um. Bei absolute nimmt er hingegen die Position des Elternelementes. Bei fixed nimmt der Browser als Ausgangswerte die Position des Fensters.
    Homepage: www.pingu.info

  3. #3
    Registrierter Benutzer
    Registriert seit
    08.07.2002
    Beiträge
    377
    Hm, ok, bin ein wenig weiter!

    Hab aber jetzt ein anderes Problem, folgender Code:
    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" lang="en">
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta name="description" content=""/>
    		<meta http-equiv="content-language" content="en" />
    		<link rel="icon" type="image/img" href="include/theme/default/img/icon.png" />
    		<link rel="stylesheet" type="text/css" media="all" href="include/theme/default/css/default.css" charset="utf-8" />
    
    	</head>
    <body>
    	<div class="container">
    		<div id="pagetop">
    	top
    </div>
    
    <div id="pagepath">
    	path
    </div>
    		<div class="content">
    
    			<div class="icontent">
    				<div class="index_content">
    ...
    </div>			</div>
    
    			<div class="inavigation">
    				<div id="loginarea">
    	<br />
    ...
    </div>			</div>
    
    					</div>
    
    
    		
    		<div id="pagebottom">
    	bottom
    </div>	</div>
    
    </body>
    
    </html>
    und

    Code:
    div.container {
    	margin-top: 			5px;
    	margin-left:			auto;
    	margin-right:			auto;
    	border: 			1px solid #D7D7D2;
    	padding: 			3px;
    	width:				90%;
    }
    
    div.content {
    	position: relative;
    	height:	300px;
    
    	border: 			1px solid #000000;
    	margin: 			0 auto;
    	padding: 			10px;
    }
    div.icontent {
    	position: absolute;
       right: 0;
    	width:				75%;
    }
    
    div.inavigation {
    	position: absolute;
       	left: 0;
    	width:				15%;
    }
    Durch die angabe mit absolute und left & right muss ich fuer div.content die groesse angeben, damit der footer wirklich auch unterhalb des Elements bleibt.

    wie kann ich das umgehn, dass die groesse auch dynamisch angepasst wird?

    mfg
    Amilo D - 2,8 Ghz - ATI Radeon 9000
    Debian GNU/Linux 3.1 (Sarge)

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •