HTML: Wie kann ich meinen Header über die ganze Breite ziehen?

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Das liegt an den Standard-Styles des Browsers. Dieser legt standardmäßig bestimmte Abstände fest. Entferne die negativen Margins:

margin-top: -8px;
margin-left: -8px;
margin-right: -10px;

Schnelle Abhilfe schafft folgender Code:

* {
  margin: 0;
  padding: 0;
}

In der Praxis verwendet man eher einen CSS-Reset oder Normalize.css.

Display: block;
Margin: 0 auto;
Width: 100% (kannst auch mit 100vw probieren)

HMTL/CSS - Wie kann ich ein Img in einem Div zentrieren?

Moin,

hat jemand eine Idee, wie ich über meiner Navbar ein 100px Image mit CSS genau mittig positioniere? Die Ansätze, die ich bis jetzt im Internet gefunden habe, waren nicht besonders hilfreich, was meinen Fall angeht...

Das wäre der html-Ausschnitt...:

<html>
    <body>
        <header>
            <div class="navbar-body">
                <img class="navbar-logo" src="logo_navbar.png"></img>
            </div>
        </header>
    </body>
</html>

...und das der für CSS:

.navbar-body{
    color: FFFFFF;
    background-color: 1F1F1F;
    font-family: Arial Black;
    font-size: 20px;
    height: 80px;
    text-decoration: none;
    text-transform: uppercase;
}
.navbar-logo{
    height: 100px;
    margin: 30px auto 0;
}

Mein Problem ist, dass sich bei "margin: auto" und "display: block" zwar die Grafik mittig positioniert, aber dafür den Nav-Container mit verschiebt. Hat hier jmd eine Lösung parat?
LG

...zur Frage

css vertikales menü aufklappbar nach unten weg wie geht das?

hallo ich möchte gerne in css html und wenn es sein muss auch js ein menü programmieren.Das untermenü soll sich nicht nach rechts oder links wegklappen wie überall im internet beschrieben sondern nach unten. so weit so gut so weit binn ich auch schon aber jetz klapt sich das untermenü über die obermenüpunkte auf wie bekomme ich das hin , dass die nicht passirt und die obermenüpunkte nach unternrutschen ? mein 2 poblem ist das man nicht auf die untermenüpunkte darufdrücken kann were net wenn sich den code jemand mal ansehen kann ich schetze das ist wegen den hover aber ich weis auch nicht wie ich das anders machen soll

nav{
    position:fixed;
    position: absolute;
    top:10.5em;
    left:12em;    
    display:block;
    height:2.5em;
    text-align:left;
    
    
}     

nav li:hover #sub{
    display: block;  
    position:absolute;    
    
   }
   
  nav ul li:hover #sub{
    left:9.375em
    
  } 


nav ul {
    display:block;
    list-style: none;
    margin: 0em;
    padding: 0em;
}

nav ul li {
    position:relative;
    display:block;
    margin: auto;
    
}
nav ul li a {
    color:green;
    font-size: 1.125em;
    line-height:1.5em;
    margin: 0em;
    padding: 0em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
}

nav ul li a:hover {
    border-bottom: 0.15em solid #E7590B;
}
nav ul li a.active {
    border-bottom: 0.15em solid #E7590B;
}        

#sub{
position: absolute;
display: none;
    
}


#sub li a{
    display: block;
    
    
}
    
 
...zur Frage

css hover effekt geht nicht...warum?

Ich bin gerade am html/css/php lernen und bin auf ein total simples Problem gestoßen, welches ich aber bei bestem willen nicht gelöst bekomme.

Die Pseudoklasse :hover will einfach nicht tun....

Das ist die style.css.

.navigation_schrift{
    display:block;
    float:left;
    text-align: center
    font-family: courir;
    font-size:150%;
    width: 100%;height:40px;
    color: red;
    background-image: url("../images/aquabutton1.gif");
    margin: 0px 0px 3px 0px;
    text-decoration:none;
}

.navigation_schrift:hover{
    color: green;
}

und so wird das ganze aufgerufen:

Testtext

Alles andere was ich über CSS mache funktioniert einwandfrei (wenn ich es richtig gemacht habe :D)

Warum wechselt die Schriftfarbe bei mouseover nicht auf grün?

Ich habe sowohl Firefox 5.0.1 als auch IE9 versucht...

Gruß BluBb_mADe

...zur Frage

Wie positioniere ich die Überschrift über dem Text wenn ein Bild daneben ist (HTML und CSS)?

Hallo ich arbeite für die Schule an einer Website und habe einige Bilder in die Datei einer Teilwebsite eingefügt, musste jedoch feststellen, dass die Überschrift "Ressourcen" links von dem Text lag und nicht darüber. Ich es habe versucht indem ich die Überschrift außerhalb der "div class="Eros" gestellt habe, jedoch war der Abstand zwischen dem dazugehörigem Text und der Überschrift zu groß. Ich hoffe Ihr könnt mir helfen.

HTML


<!DOCTYPE html>
<html>

<head>
<title>Asteroiden</title>
     <link rel="stylesheet" type="text/css" href="Deep-Space-Asteroiden.css">
    </head>

    <body>  
    
        <div class="wrapper">
            <nav>
                <ul>
                    <li><a href="#"><i class="fab fa-houzz"></i></a></li>
                    <li><a href="Deep-Space-Main.html">Deep-Space-Coorporation</a></li>
                    <li><a href="Deep-Space-Asteroiden.html">Asteroiden</a></li>
                    <li><a href="#">Mining</a></li>
                    <li><a href="#">&Uuml;ber uns</a></li>
                </ul>
            </nav>
        </div>
    
      
 
    
     <div class="margin">
         
         <h1>Asteroiden</h1>
         <h3>&Uuml;ber Asteroiden</h3>
         
         <p>
            LAAAAAAAAAAAAAAAANGER TEXT
         </p>
        
         
        
         
<div class="Eros">
    
      <h3>Ressourcen</h3>
        
    
         <p>
             Andererseits besitzen Asteroiden aber auch einen Immensen Vorrat an Elementen. So enth&auml;lt der Asteroid 443 Eros, welcher gerade einmal einen Durchmesser von 17 km besitzt, Rohstoffe wie Platin, Gold und Rhodium im Wert von 532 Billionen US Dollar. 
         </p>
               <img src='433eros.jpg' align="right">
          
              
         
</div>
</div>   
         
    
    </body>

</html>



CSS:



.margin{
  margin-top: 70px;
}

body {
  color: white;
  background-color: black;
font-family:"San Francisco", "Helvetica Neue Light", "Helevetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
  margin:0;
  padding:0;
        
}
 
.header {
  font-size: 15px;
  display: grid;
  grid-template-columns: 1fr;
  background-color: black;
  opacity: .96;
  height: 2.7em;
  width: 100%;
  color: white;
  text-align: center;
  align-items: center;
}
 
nav a {
  height: 2.7em;
  line-height: 45px; 
  color: white;
  text-decoration: none;
  transition: 0.3s;
}
 
nav a:hover {
  color: #B8B8B8;
}
 
ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
 
li {
  padding-right: 5.5em;
  padding-left: 5em;
  display:inline;
}
 
li:hover {
  color: #B8B8B8;
}

.Eros {
    display: flex;
    align-items: center;
    text-align: left;
}

.Eros img{
    width: 45%; 
    float: right;
}




h1 {   font-size: 52px; }


h3{   font-size: 25px; } 


Konnte nicht den gesamten Inhalt der Datei eingeben, den es wäre sonst viel zu lang.

Danke

...zur Frage

html / css navbar und dropdown menü?

Hey liebe Community,

ich habe ein kleines html Problem :)

Ich möchte gerne auf einer Website ein Dropdown Menü in der Navbar machen. Hat alles geklappt, bis auf eine sache und zwar wenn ich über "Social Media" fahre, dann werden "Twitter" und "YouTube" zwar richtig angezeigt aber der navbar hintergrund wird bei denen auch noch angezeigt... hat wer eine Lösung für dieses kleine Problemchen? :)

Hier ist das CSS Dokument:

nav {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #383638;
  overflow: hidden;
  list-style-type: none;
  display: block;
}
li {
  float: left;
  display: block;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #008a8a;
}
.active {
  background-color: #025c6c;
}
#socialmedia_dropdown {
  display: none;
}
.nav_right {
  float: right;
}

Hier ist das html Dokument:

<!DOCTYPE html>
<!-- Dieser Teil ist für ALLE html Seiten vorgesehen -->
<html lang="de">
  <head>
    <title>
      Projekt-Z3ro.de
    </title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
    <script href="scripts.js"></script>
  </head>
  <body>
    <nav>
      <li><a href="#" class="active">Test</a></li>
        <span><li id="dropdown">
          <a id="socialmedia" onmouseover="socialmedia()" onmouseout="socialmediaout()" href="#">Social Media</a>
          <div id="socialmedia_dropdown">
            <a onmouseover="socialmedia()" onmouseout="socialmediaout()" href="#">Twitter</a>
            <a onmouseover="socialmedia()" onmouseout="socialmediaout()" href="#">YouTube</a>
          </div></li></span>
          <li><a href="#">Impressum</a></li>
          <li class="nav_right"><a href="#" class="register">Registrieren</a></li>
          <li class="nav_right"><a href="#" class="login">Einloggen</a></li>
    </nav>

    <script>     function socialmedia() {       document.getElementById("socialmedia_dropdown").style.display = "block";     }     function socialmediaout() {       document.getElementById("socialmedia_dropdown").style.display = "none";     }     </script> <!-- Dieser Teil ist für ALLE html Seiten vorgesehen -->   </body> </html>

...zur Frage

Was möchtest Du wissen?