Hallo zusammen
Ich bin in der HTML-Welt neu und würde gerne eine Webseite erstellen.
Bei dieser Webseite möchte ich als Navigation 5 horizontale Buttons verwenden. Diese Buttons sollen sich je nach Browsergrösse automatisch auf der ganzen Browserbreite verteilen. Dazu sollen sich die Buttons samt Textinhalt verkleinern wenn es nötig ist.
CSS Code:
* {margin: 0px;}
html {height:101%}
body {
background-color: #f5f5f5 ;
}
#kopf {
width: 100%;
height: 100px;
position: absolute;
border:#000000 dashed 1px;
color: #000000;
font-family: Arial;
text-align: center;
font-size: 600%;
}
#navi {
width: 100%;
height: 63px;
margin-top: 200px;
position: absolute;
border:#000000 dashed 1px;
}
a.navi { display:block; float: left; margin-left:5%; text-align:center; width:5%;
padding:20px; text-decoration:none; font-family: Arial; font-size:120%; }
a.navi:link { color:#FFFFFF; background-color:#A52A2A; }
a.navi:visited { color:#FFFFFF; background-color:#A52A2A; }
a.navi:hover { color:#000000; background-color:#A52A2A; }
a.navi:active { color:#000000; background-color:#A52A2A; }
#haupt {
width: 100%;
height: 500px;
margin-top: 300px;
position: absolute;
border:#000000 dashed 1px;
}
HTML Code:
<!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">
<head>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="kopf">
We AM
</div>
<div id="navi">
<div class="navi">
<a class="navi" href="index.html">Home</a>
<a class="navi" href="musik.html">Musik</a>
<a class="navi" href="fotos.html">Fotos</a>
<a class="navi" href="social_streams.html">Social</a>
<a class="navi" href="about.html">About</a></li>
<a class="navi" href="kontakt.html">Kontakt</a>
</div>
</div>
<div id="haupt">
</div>
</body>
</html>
Ich hoffe ihr könnt mir helfen. Bin bis jetzt halb verzweifelt.
LG
Ich bin in der HTML-Welt neu und würde gerne eine Webseite erstellen.
Bei dieser Webseite möchte ich als Navigation 5 horizontale Buttons verwenden. Diese Buttons sollen sich je nach Browsergrösse automatisch auf der ganzen Browserbreite verteilen. Dazu sollen sich die Buttons samt Textinhalt verkleinern wenn es nötig ist.
CSS Code:
* {margin: 0px;}
html {height:101%}
body {
background-color: #f5f5f5 ;
}
#kopf {
width: 100%;
height: 100px;
position: absolute;
border:#000000 dashed 1px;
color: #000000;
font-family: Arial;
text-align: center;
font-size: 600%;
}
#navi {
width: 100%;
height: 63px;
margin-top: 200px;
position: absolute;
border:#000000 dashed 1px;
}
a.navi { display:block; float: left; margin-left:5%; text-align:center; width:5%;
padding:20px; text-decoration:none; font-family: Arial; font-size:120%; }
a.navi:link { color:#FFFFFF; background-color:#A52A2A; }
a.navi:visited { color:#FFFFFF; background-color:#A52A2A; }
a.navi:hover { color:#000000; background-color:#A52A2A; }
a.navi:active { color:#000000; background-color:#A52A2A; }
#haupt {
width: 100%;
height: 500px;
margin-top: 300px;
position: absolute;
border:#000000 dashed 1px;
}
HTML Code:
<!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">
<head>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="kopf">
We AM
</div>
<div id="navi">
<div class="navi">
<a class="navi" href="index.html">Home</a>
<a class="navi" href="musik.html">Musik</a>
<a class="navi" href="fotos.html">Fotos</a>
<a class="navi" href="social_streams.html">Social</a>
<a class="navi" href="about.html">About</a></li>
<a class="navi" href="kontakt.html">Kontakt</a>
</div>
</div>
<div id="haupt">
</div>
</body>
</html>
Ich hoffe ihr könnt mir helfen. Bin bis jetzt halb verzweifelt.
LG
Zuletzt bearbeitet:
