Hi Sailor,
Also ich habe vor 1 2 Jahren mich mal mit HTML auseinander gesetzt. Und wollte jetzt einfach mal mich an css und danach an java wagen . sprich ich bin Blutiger anfänger weswegen ich über jede Hilfe dankbar bin .
Beiträge von Luca123
-
-
ok das ist echt doof irgendwie ... jetzt habe ich den Hintergrund einfach als Body gemacht . Jetzt gehen zwar die Nav links aber jetzt gehen unten die 2 anderen butten nicht mehr ...
-
danke , Allerdings bei z-index -1 ist das jetzt hinter dem hintergrund bild . Ich teste es jetzt mal wie ich das ohne Fixed Positionen hin bekomme .
-
so nochmal Gude, ich bin Grade dabei mit HTML und css du basteln. Ich habe ein Navigation Menü oben rechts in die Ecke gesetzt und da ging alles. Dann habe ich ein h1 Text in die Mitte der page gemacht und jetzt kann ich die ersten 3 punkte des Navigation Menü nicht mehr anklicken.
HTML code
<html>
<head>
<title>CSS Bilder animation</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="row">
<div class="logo"><img src="logo.png"></div>
<ul class="main-nav">
<li class="aktiv"><a href="index.html">HOME</a></li>
<li><a href="Info.html">ABOUT</a></li>
<li><a href="Bilder.html">GALLERY</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<div class="Hero"><h1>Herzlich Willkommen!</h1>
<div class="Button">
<ul>
<li><a href="Info.html" class="btn btn-one">About us!</a></li>
<li><a href="contact.html" class="btn btn-two">Contact us !</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>
CSS Code
*
{
margin: 0;
padding: 0;
}
header {
background-image: url(wallpaper.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right !important;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: sans-serif;
font-size: 15px;
}
.main-nav li.aktiv a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img
{
width: 120;
height: auto;
float: left;
}
.Welcome {
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
.Hero {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 20px;
}
h1 {
color: white;
text-transform: uppercase;
font-size: 55px;
text-align: center;
margin-top: 310px;
margin-left: 169px;
font-family: sans-serif;
}
.button {
margin-left: 550px;
list-style: none;
margin-top: 30px;
}
.button li {
display: inline-block;
z-index: 1;
}
.button li a
{
border: 1px solid white;
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: sans-serif;
font-size: 15px;
}
.btn-one {
background-color: rgba(10,20,30,50%);
font-family: sans-serif;
}
.btn-two {
font-family: sans-serif;
}
.btn-two:hover {
background-color: sienna;
transition: all 0.5s ease-in;
}
.btn-one:hover {
background-color: sienna;
transition: all 0.2s ease-in;
}