• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Größe von mehreren Divs bestimmen

A

Airwolf89

New member
Hi Leute,

habe mal wieder nen kleines Problem: Ich will die Größe von divs definieren. Eigentlich kein Problem, jedoch funktioniert es einfach nicht.

habe folgendes vor: Ein div über die ganze Seite, der wrapper, dann oben ein div mit 100% Breite und 25% höhe.
Dadrunter zwei Divs die jeweils die restlichen 75% der Höhe einnehmen. Das eine ist dann 40% groß, das daneben soll 60% groß sein.

Geht einfach nicht. Habe die alle mit Rahmen versehen um zu schauen ob ales klappt, habe dann einen schönen dicken grauen Strich am oberen Bildschirmrand.

Code sieht so aus:

HTML: 
<div id="wrapper" style="width: 100%; height: 100%;">
            	
                <form name="formhead">
                    <div id="head" style="float: top; width: 100%; height: 25%; border: 1px solid silver;">
					
                    </div>
                </form>              
             
                <form name="formEins">
                    <div id="tabBar" style="width: 40%; height: 75%; float: left; border: 1px solid silver; display: block;">
                        
                    </div>
                </form>		
				
                <div id="imgDiv" style="float: right; border: 1px solid silver; width: 60%; height: 75%">
                </div>
            </div>

Was lief da schief? Muss ich da andere Attribute reinsetzen?

Danke im voraus.
 
Zuletzt bearbeitet:
Da gibt's mehrere Möglichkeiten, z.B.
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Divs</title>

<style type="text/css">

html, body {
	background: #fff;
	margin:0px;
	padding:0px;
	height:100%;
	overflow:auto;
}

#header {
	width:100%;
	height:25%;
	border: 1px solid silver;
	color:#000;
	margin:0;
}

#tabBar {
	width:40%;
	float:left;
	margin:0px;
	display:block;
}

#navi {
	padding:40px;
	color:#000;
}

#imgDiv {
	padding:0;
	color:#000;
	border:1px solid silver;
	margin-left:40%;
	height:75%;
}

</style>
</head>

<body>
<div id="header">Hier ist der Header</div>
		<div id="tabBar">
			<div id="navi">link<br>link<br>link</div>
		</div>
<div id="imgDiv">
		<img src="http://annaland.de/images_winter/mwsf-3-thumb.jpg" alt="Foto" style="padding:20px; border:0">
</div>
</body>
</html>

Vorlagen gibt's hier:
intensivstation :: CSS Templates :: Templates
 
Hilft mir auch nit. bzw. funktionierts nit wirklich.

Es kann doch verdammich nochmal nit so schwer sein da nen paar scheiß divs reinzupacken dessen größe in % angegeben ist dammit sich mein Layout nicht bei verschiedenen Auflösungen zerscheißt. Ist doch nichts exotisches...
 
Du hast zwar keine Beschreibung geliefert, was Du denn gerne änders hättest, habe aber nochmal ne Version aufgesetzt, die übergroße Inhalte abschneidet. Wenn Du da ne Scrollleiste haben willst, musst Du statt hidden einfach auto einsetzen.
PHP: 
<!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="de" lang="de">
<head>
<title>3 Divs</title>
<style type="text/css">
html, body {
	padding: 0;
	margin: 0;
	background-color: #eee;
	height: 100%;
}
#wrapper {
	width: 100%;
}
#header {
	width: 100%;
	min-height: 25%;
	max-height: 25%;
	height: auto !important;
	height: 25%;
	background-color: #000;
	color: #fff;
	display: block;
	overflow: hidden;
}
#links {
	float: left;
	min-height: 75%;
	max-height: 25%;
	height: auto !important;
	height: 75%;
	min-width: 40%;
	display: block;
	overflow: hidden;
	position: absolute;
}
*+html #links {
	position: relative;
}
* html #links {
	position: relative;
}
#box {
	margin-left:40%;
	border:1px dotted black;
	min-height: 75%;
	max-height: 25%;
	height: auto !important;
	height: 75%;
	display: block;
	overflow: hidden;
}
</style>
</head>
<body>
	<div id="header">	Das ist der Header
	</div>
		<div id="links">Inhalt links
		</div>
		<div id="box">rechte Box</div>
</body>
</html>
Geht bei mir in den Standardbrowsern und den IEs.
 
OK,
ich dachte es funktioniert, hat es auch, aber nur auf meinem Laptop Monitor. Auf meinem anderen Monitor funktioniert das leider nicht so gut. Da verschiebt sich einiges. Habe aber fast die Befürchtung dass das an meinen Input Feldern in dem einen Div liegt, die haben ja nunmal ne feste größe. Ich glaube daran kann man nix machen, oder?
 
Versteh ich nicht. Bei meinem Beispiel in Post 6 kannst Du gut ein form mit inputs reinnehmen und Buttons danebenstellen und was weiß ich sonst noch. Was nicht dargestellt wird im Viewport, wird abgeschnitten (Alternative wie im Post beschrieben). Und damit es schön zusammenbleibt, schreibst Du ins CSS
PHP: 
form {
white-space:nowrap;
}
 
Hmm ja, hab mich bissl falsch ausgedrückt, meinte eigentlich nur dass die Inhalte entweder abgeschnitten werden, oder halt der Scrollbalken erscheint. Find ich halt doof, sieht doof aus. Aber dagegen kann man sicher nix machen. Wäre jetzt zwar zu umständlich nehme ich an, aber wäre es möglich das irgendwie von der Auflösung des Monitors abhängig zu machen? Also beispielsweise in nem switch case oder so ne andere css datei zu laden oder ähnliches? Geht sowas?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben