Backfighter
Neues Mitglied
Hallo ich bin neu im Forum und auch neu in die Welt des html eingetreten :grin:
Ich sitze gerade an meiner ersten website und dabei hab ich ein Problem, nähmlich habe ich eine Menüleiste am oberen Bildschirmrand, wenn man die Seite vergößert dann geraten die Menüeintäge auf Grund von Platzmangel untereinander dabei überlappen sie sich. Deshalb habe ich vor sie mit Hilfe von magin zu trennen, ich habe es eingegeben, aber es hatte keine Auswirkung :???:
Hier mein index code:
Und hier, was in dem Fall wichtiger ist den css code fü den Style:
Ich sitze gerade an meiner ersten website und dabei hab ich ein Problem, nähmlich habe ich eine Menüleiste am oberen Bildschirmrand, wenn man die Seite vergößert dann geraten die Menüeintäge auf Grund von Platzmangel untereinander dabei überlappen sie sich. Deshalb habe ich vor sie mit Hilfe von magin zu trennen, ich habe es eingegeben, aber es hatte keine Auswirkung :???:
Hier mein index code:
HTML:
<!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" lang="de">
<head>
<title>Meine erste Hompage!</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="Styles/style.css" />
</head>
<body>
<div class="box">
<a href="./index.html" class="MenüReiter">Hauptseite</a>
<a href="./index.html" class="MenüReiter">Projekte</a>
<a href="./index.html" class="MenüReiter">Downloads</a>
<a href="./index.html" class="MenüReiter">Sonstiges</a>
<a href="./index.html" class="MenüReiter">Über Mich</a>
</div>
<ul>
<div class="box2">
<li><a href="./index.html" class="Rubrik">News</a></li>
<li><a href="./index.html" class="Rubrik"></a></li>
<li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
<li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
<li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
<li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
<li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
<li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
</div>
</ul>
<h1 id="Top">Überschrift</h1>
<h2 id="Liste">Eine Liste</h2>
<a href="mailto:[email protected]" title="Kontaktiert mich über meine Mail Ardresse">
<p>Kontaktieren</p>
</a>
<p>all rights reserved by Peter Werner ©</p>
</body>
</html>Und hier, was in dem Fall wichtiger ist den css code fü den Style:
Code:
body {
background-color: rgb(30,30,30);
background-attachment: fixed;
background-position: center center;
}
p {
font: 100% sans-serif;
color:rgb(1,38,214);
text-align: left;
border: 2px outset black;
margin-right:100px;
margin-left:250px;
padding-right:100px;
}
h1 {
font: bold 500% sans-serif;
color:rgb(1,38,214);
text-align: center;
text-transform: capitalize;
padding-left:130px;
}
h2 {
font: bold 350% sans-serif;
color:rgb(1,38,214);
text-align: center;
padding-left:130px;
}
h3 {
font: bold 150% sans-serif;
color:rgb(1,38,214);
text-align: center;
text-decoration: underline;
padding-left:130px;
}
th {
font: bold 150% sans-serif;
color:rgb(1,38,214);
text-align: center;
}
td {
font: 100% sans-serif;
color:rgb(1,38,214);
text-align: center;
}
img{
margin-top:15px;
}
a.MenüReiter {
font-family: sans-serif;
font-weight: bold;
font-size: 270%;
text-decoration: none;
text-align: left;
color:rgb(1,38,214);
padding-right: 20px;
margin: 40px 0px 0px 0px;
background-color: rgb(70,70,70);
border: 8px groove black;
}
a.Rubrik {
font-family: sans-serif;
font-weight: bold;
font-size: 150%;
text-decoration: none;
color:rgb(1,38,214);
}
a {
font-family: sans-serif;
font-weight: bold;
font-size: 100%;
text-decoration: none;
color:rgb(21,0,121);
}
a:hover {
font-size: 120%;
}
a:hover.MenüReiter {
font-size: 300%;
background-color: rgb(80,80,80);
}
a:hover.Rubrik {
border: 3px dashed black;
font-size: 170%;
}
div.box{
padding: 20px 0px 130px 10px;
background-color:rgb(40,40,40);
border: 5px ridge black;
background-image: url("Bilder/PW-Games.png");
background-repeat: no-repeat;
}
div.box2{
position:absolute;
left: 8px;
padding: 80px 50px 1000px 30px;
width: 130px;
background-color:rgb(40,40,40);
border: 5px ridge black;
}
#PWGamesLogo{
width: 100%;
}