hallo789: html/css Layout prozentual

Beitrag lesen

SELF-Forum

html/css Layout prozentual

hallo789
– Informationen zu den Bewertungsregeln

Hallo, ich baue gerade ein Layout und habe da ein paar Probleme mit der prozentualen Skalierung. Wahrscheinlich habe ich da sowiso sehr viele Anfängerfehler drin, wäre also nett wenn ihr mich darauf aufmerksam machen würdet :) Das eigentliche Problem was ich habe, ist, dass ich gerne den Logo "Block" und die Navigation auf einer Höhe nebeneinander hätte. Die Navigation soll neben dem Logo liegen und unten mit dem Logo bündig beginnen, aber eben nur ca. 1/4 so hoch sein wie das Logo. Das habe ich mit den Prozentualen Angaben leider nicht hinbekommen.

Danke

<html>
<head>
<title>Titel der Seite</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
<div id="all">
		<div id="logo"> </div>
		<div id="nav">
			<ul>
				<li class=""><a href="" >Home</a>
				<li class=""><a href="" >Home</a>
				<li class=""><a href="" >Home</a>
				<li class=""><a href="" >Home</a>
				<li class=""><a href="" >Home</a>
				<li class=""><a href="" >Home</a>
			</ul>
		</div>

<div id="line"></div>
<img src="screen.png" id="screenbild">
<div id="content">
		<div id="content_a">
			<div id="content_a_1">
				<h1>Hallo</h1>
				<p class="text">Hallo, safdsf dsf sdfsd fs fs fsd f sdf sdfsdfsdfdsf sdf sd fsd  sdfsd f sdf sdfsdf </p>
			</div>
			<div id="content_a_2">
				<h1>Hallo</h1>
				<p class="text">Hallo, safdsf dsf sdfsd fs fs fsd f sdf sdfsdfsdfdsf sdf sd fsd  sdfsd f sdf sdfsdf </p>
			</div>
		</div>
		<div id="content_b">
			<h1>Hallo</h1>
				<p class="text">Hallo, safdsf dsf sdfsd fs fs fsd f sdf sdfsdfsdfdsf sdf sd fsd  sdfsd f sdf sdfsdf </p>
		</div>
	</div>
<div id="footer"></div>
</div>
</html>



body{
	background-color:#254441;
}
#all{
	padding: 0;
	width: 80%;
	margin: 0% 10% 0 10%;
}
h1{
	margin: 2% 2% 2% 2%;
	font-family: Arial;
	color: #254441;
	font-size: 20px;
	font-weight: bold;
}
.text{
	margin: 2% 2% 2% 2%;
	font-family: Arial;
	color: #254441;
	font-size: 100%;
}
#top{
	padding: 0;
	height: 20%;
	width: 100%;
	margin: 0;
	float: left;
	background-color: green;
}
#logo{
	padding: 0;
	height: 20%;
	width: 40%;
	margin: 0;
	float:left;
	background-color: red;
}
#nav{
	margin-top: 10%;
	padding: 0;
	height: 5%;
	width: 60%;
	float: left;
}
#nav ul {
	margin: 0;
	padding: 0;
}

#nav li {
	float: left;
	position: relative;
	list-style: none;
}

#nav ul li a {
	text-decoration: none;
	text-align: center;
	height: 100%;
	width: 20%;
	display: block;
	font-family: Arial;
	font-weight: bold;
	text-decoration: none;
	color: white;
	margin-left: 20%;
}
#line{
	background-color: #ef3054;
	padding: 0;
	height: 1%;
	width: 100%;
	margin: 0;
	float: left;
}
#screenbild{
	width: 100%;
	max-width: 1000px;
	height: width*0.4;
	max-height: 400px;
}
#content{
	padding: 0;
	width: 100%;
	margin: 2% 0;
	float: left;
}
#content_a{
	padding: 0;
	width: 69%;
	margin: 0;
	float: left;
}
#content_a_1{
	background-color: white;
	padding: 0;
	width: 100%;
	margin: 0;
	float: left;
}
#content_a_2{
	background-color: white;
	padding: 0;
	width: 100%;
	margin: 2% 0;
	float: left;
}
#content_b{
	background-color: white;
	padding: 0;
	width: 29%;
	margin: 0 0 0 2%;
	float: left;
}
#footer{
	background-color: green;
	width: 100%;
	height: 10%;
	float: left;
	padding: 0;
	margin: 2% 0;
}
Beitrag melden
–
Informationen zu den Bewertungsregeln