nicht angemeldet
html/css Layout prozentual
Matthias Apsel
Matthias ScharwiesHallo, 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;
}
-
Hallo hallo789,
Nur ganz schnell, bevor die Gartenarbeit ruft:
- verwende dieses Grundgerüst
- verwende semantisch passende Elemente
bodymuss ein wenig mehr enthalten- kannst du ein online-Beispiel bereit stellen?
Bis demnächst
Matthias -
Servus!
Herzlich willkommen bei Selfhtml!
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 :)
Ja, aber nichts, was man nicht schnell verbessern könnte. :-)
In den Kopf müssen diese Angaben:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0;" /> <title>Titel der Seite</title> <link rel="stylesheet" href="style.css"> </head>siehe auch: Wiki: HTML5-Grundgerüst
<html> <head> ... </head> <body> </body> <div id="all"> ...Du darfst den body nicht gleich wieder schließen, sondern dort alles notieren, was angezeigt werden soll.
Verwende ruhig HTML5-Elemente:
<body> <div id="logo"> </div> <nav id="navigation"> <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> </nav> <main> <article id="content_a"> <section 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> </section> <section 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> </section> </article> <aside> <h1>Hallo</h1> <p class="text">Hallo, safdsf dsf sdfsd fs fs fsd f sdf sdfsdfsdfdsf sdf sd fsd sdfsd f sdf sdfsdf </p> </aside> </main> <footer></footer>> </body>siehe auch: Wiki HTML5-Seitenstrukturierung
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.
Entweder floatest Du Dein Logo links und hast die Navigation rechts daneben (würde ich nicht machen) oder Du verwendest display:tablecell.
Ich würde dir hier Flexbox empfehlen:
Wiki: flexibles Layout
Das dort erwähnte Beispiel hat den Vorteil, dass es bei kleinen Geräten doch untereinander und nur bei genügend großen Bildschirmen nebeneinander dargestellt wird.
Herzliche Grüße
Matthias Scharwies