Beiträge von zwick88

zwick88

Danke MrMurphy,

ich hab leider den Falschen CSS Code gepostet. Ich hab bisschen experimentiert mit den Positionen

zwick88

Hallo Zusammen.

ich bin am verzweifeln mit css.

Ich habe ein Design erstellt, welches 3 Header enthält (Header für Text, Header für Logo und Header für Benutzerinfos) eine Navigationsbar an der linken Seite und einenen Content bereich. Jetzt möchte ich die Höhe der Navigationsbar und die Höhe des Contents berechnen lasse, sodass min-height folgendes ergibt.
min-height: 100% - header1.height - header3.heigth;

Und gleichzeitig möchte ich berechnen, wie breit der Content sein darf (width= 100% - navbar.width)

Im Anhang ein Screenshot zur Verdeutlichung

Hier der HTML Code

HTML

<html>
	<head>
		<title>Hier steht der Titel</title>
		<!-- title and meta -->
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<link rel="stylesheet" href="/css/main.css" />

	</head>
	<body>		
		<div id="wrapper">
			<!-- Logo -->
			<div id="logo">
					<img src="images/logo.jpg">	
			</div>

			<!-- Header -->
			<div id="header">
				Reporter
			</div>

			<!-- User Informationen -->
			<div id="userinfo">

			</div>

			<!-- Navigation -->
			<div id="navbar">
				<ul>
					<li>Neuer Bericht</li>
					<li>Bericht löschen</li>
					<li>Bericht ändern</li>
					<li>Bericht anzeigen</li>
					<li>Alle Berichte anzeigen</li>
					<li>Home</li>
				</ul>
			</div>

			<!-- Content -->
			<div id="content">
			<ul>
					<li>Neuer Bericht</li>
					<li>Bericht löschen</li>
					<li>Bericht ändern</li>
					<li>Bericht anzeigen</li>
					<li>Alle Berichte anzeigen</li>
					<li>Home</li>
				</ul>
			</div>
		</div>
	</body>
</html>

Alles anzeigen

Hier der CSS Code

CSS

body
{
	/*background: #000000;*/
	background: transparent;
	font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}




h1
{
	font-size: 36px;
	text-align: center;
	color: #ffffff;
	padding-top: 100px;
}




h2
{
	font-size: 20px;
	text-align: center;
	color: #ffffff;
}




#login
{
	color: #ffffff;
	width: 200px;
	margin-left: 30%;
}




table
{
	color: #ffffff;
}
/*-------------------------------------------------------------- */




#wrapper 
{
	width:device-width;

}




#logo
{

	width: 100%;
	background: transparent;
	text-align: right;
	position: absolute;
}




#logo img
{
	width: 30%;
	min-width: 300px;
}




#header
{
	height: 15%;
	min-height: 85px;
	width: 100%;
	background: #000000;
	text-align: left;
	color: #ffffff;
	font-size: 36px;
}







#userinfo
{
	height: 25px;
	width: 100%;
	background: #555555;
}




#navbar
{
	position:absolute;
	height:auto !important;
	width: 18%;
	background: #00ff00;


}




#navbar ul
{
	list-style-type: none; 
	margin-top: 50px;
	margin-left: -30px;
	line-height: 2;
}




#content
{
	position:absolute;
	height: 100%;
	width: 82%;
	background: #ff0000;	
	left:18%;
}




/* =Extras
-------------------------------------------------------------- */
.clearfix:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
}

Alles anzeigen

Kann mir jemand bitte Helfen?

Beiträge von zwick88

height und width in Abhängigkeit von...

height und width in Abhängigkeit von...