CitroenDsVier
Lt. Commander
- Registriert
- Dez. 2013
- Beiträge
- 1.896
Hallo zusammen,
ich habe ein für mich unerklärliches Problem. Folgende Situation: Ich habe ein div, in dem mittig Text auf einem Bild als Hintergrund stehen soll. Dieses div soll oben mündig am Seitenrand liegen. Direkt unter diesem div ein menü.
Das funktioniert allerdings nur, wenn ich dem "div mit Hintergrund" in der CSS eine "border: 1px solid" zuweise. Kommentiere ich die border aus, habe ich den im angehängten Bild gezeigten unerwünschten Abstand. Dieser variiert mit der gewählten Größe vom TEXT: Wähle ich font-size vom Text = 50px, ist der Abstand oben in etwa wie eingezeichnet, mache ich den TEXT 0px groß, ist auch der Abstand weg. Woran kann das liegen?
Anbei natürlich noch html und CSS Code.
Ich kann mir das Problem nicht erklären. Aber vielleicht ja jemand von euch.
MfG, V40
Des weiteren habe ich ober- und unterhalb des Menüs einen Abstand von geschätzt 15 Pixeln. In Firefox / Element Untersuchen wird dieser Bereich nicht als Menü 'eingerahmt', aber leicht grünlich hinterlegt, als würde es trotzdem dazugehören (padding oder so, das ists ja aber doch nicht).
Hier ist das Problem nochmal in Form eines Screenshots...
ich habe ein für mich unerklärliches Problem. Folgende Situation: Ich habe ein div, in dem mittig Text auf einem Bild als Hintergrund stehen soll. Dieses div soll oben mündig am Seitenrand liegen. Direkt unter diesem div ein menü.
Das funktioniert allerdings nur, wenn ich dem "div mit Hintergrund" in der CSS eine "border: 1px solid" zuweise. Kommentiere ich die border aus, habe ich den im angehängten Bild gezeigten unerwünschten Abstand. Dieser variiert mit der gewählten Größe vom TEXT: Wähle ich font-size vom Text = 50px, ist der Abstand oben in etwa wie eingezeichnet, mache ich den TEXT 0px groß, ist auch der Abstand weg. Woran kann das liegen?
Anbei natürlich noch html und CSS Code.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Titel</title>
<link rel="stylesheet" href="photo.style.css" type="text/css">
<link>
</head>
<body>
<div id="site">
<div id="header">
<div id="HeaderText"><p>Das ist ein Test</p></div>
</div>
<!-- menu -->
<ul class="menu">
<li><a href="#">Punkt 1</a></li>
<li><a href="#">Punkt 2</a></li>
<li><a href="#">Punkt 3</a>
<ul>
<li><a href="#">Punkt 3.1</a></li>
<li><a href="#">Punkt 3.2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Code:
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
#site {
width: 80%;
margin: 0 auto;
border: 1px solid #FF0000;
}
#header {
/* margin: 0;
padding: 0; */
background-image: url(img2.jpg);
background-size: cover;
height: 155px;
border: 1px solid #fff;
}
#HeaderText {
position: relative;
top: 0px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 50px;
font-variant: small-caps;
text-align: center;
}
/* _menu_ */
ul.menu {
background: #00BCFF;
font-family: 'Roboto', Arial, sans-serif;
position: bottom;
}
ul.menu li {
display: inline-block;
padding: 5px;
color: #000; /* Text */
transition: 0.2s ease;
-o-transition: 0.2s ease;
-webkit-transition: 0.2s ease;
}
ul.menu li:hover {
background: #007FAD; /* dunklere Farbe */
color: #fff; /* kontrast Textfarbe */
cursor: pointer;
text-shadow: blue;
}
ul.menu li a {
text-decoration: none;
color: inherit;
outline: none;
}
ul.menu li ul { /* Untermenü */
position: absolute;
background: #00BCFF;
margin: 5px -5px;
width: 150px;
transition: 0.25s ease;
-o-transition: 0.25s ease;
-webkit-transition: 0.25s ease;
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
}
ul.menu li:hover ul {
height: auto;
padding: 0;
overflow: visible;
opacity: 1;
}
ul.menu li ul li, ul.menu li ul li a {
display: block;
height: inherit;
}
/* end menu */Ich kann mir das Problem nicht erklären. Aber vielleicht ja jemand von euch.
MfG, V40
Ergänzung ()
Des weiteren habe ich ober- und unterhalb des Menüs einen Abstand von geschätzt 15 Pixeln. In Firefox / Element Untersuchen wird dieser Bereich nicht als Menü 'eingerahmt', aber leicht grünlich hinterlegt, als würde es trotzdem dazugehören (padding oder so, das ists ja aber doch nicht).
Ergänzung ()
Hier ist das Problem nochmal in Form eines Screenshots...
Zuletzt bearbeitet:
