Website-Platz zwischen Header und Navbar

Als erstes möchte ich das GameOn-Logo ein wenig kleiner. https://gyazo.com/fff20798fa141cfbe4938b9808a45350 Website-Platz zwischen Header und Navbar

Wie Sie im obigen Screenshot hier sehen kann, gibt es eine Menge Raum zwischen dem Header und navbar und ich möchte es an die Spitze, wie ich hier zog:

https://gyazo.com/87a2ee8c373490d224081970d744263e

Hier ist der Code :


 
    
 
    
 
    
 
    
 
/*CSS STYLE SHEET LOGO 
 
/************************** add todd your code ***************/ 
 
     div#header { 
 
     clear: both; 
 
     margin-bottom: 20em; 
 
      /* So you can add space between logos and page contents */ 
 
     } 
 

 
     /* A container for the two logos */ 
 
     div#right_logo_container { 
 
     float:right; 
 
     display: inline-block; 
 
     } 
 
     div#left_logo_container { 
 
     float:left; 
 
     display: inline-block; 
 
     } 
 
     div#center_logo_container { 
 
     display: center; 
 
     } 
 

 
     
 
     div.center { text-align: center;} 
 

 
     /************************** /end ***************/ 
 
     
 
     body {padding-top: 2em;background-color: #c02227;} 
 
     .circle-container {position: relative;perspective: 1000;margin: 0 auto;} 
 
     .circle-container:hover .circle {transform: rotate3d(45, 45, 0, 180deg);} 
 
     .circle-container:hover .outer-ring {transform: rotate3d(45, 0, 0, 180deg);} 
 
     .circle-container:hover .outer-outer-ring {transform: rotate3d(0, 45, 0, 180deg);} 
 
     .circle-container, .front, .back {width: 175px;height: 175px;background-color: rgba(0,0,0,0);} 
 
     .circle, .outer-ring, .outer-outer-ring {transition: 0.5s;transform-style: preserve-3d;transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);} 
 
     .circle {position: absolute;width: 175px;height: 175px;} 
 
     .front, .back {border-radius: 50%;box-shadow: 0px 0px 20px rgba(0,0,0,0.4);backface-visibility: hidden;position: absolute;top: 0;left: 0;} 
 
     .front {background-color: #fff;z-index: 2;} \t \t 
 
     .front p {margin-top: 1.2em;font-family: Impact, Charcoal, sans-serif;font-weight: 900;font-size: 2.8em;text-align: l;color: #c02227;} 
 
     .back {transform: rotate3d(45,45,0,180deg);background-color: #fff;} 
 
     .back-logo {width: 60%;display: block;margin: 2em auto;} 
 
     .outer-ring {position: absolute;top: -10px;left: -10px; 
 
     \t border-radius: 50%;border: 2px solid #fff;width: 191px;height: 191px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 20px rgba(0,0,0,0.4);} 
 
     .outer-outer-ring {position: absolute;top: -20px;left: -20px;border-radius: 50%;border: 2px solid #fff;width: 211px;height: 211px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 20px rgba(0,0,0,0.4);} 
 
     
 
     
 
     
 
     
 
    /************************** STYLESHEET CSS STYLETEST ***************/ 
 
    
 
    <style> 
 
html { 
 
    font-family: sans-serif; 
 
} 
 

 
.columns { 
 
    display: flex; 
 
} 
 

 
.column { 
 
    background: #eee; 
 
    border: 5px solid #ccc; 
 
    display: flex; 
 
    flex: 1; 
 
    flex-direction: column; 
 
    padding: 10px; 
 
} 
 

 
.main-column { 
 
    flex: 2; 
 
} 
 

 
.article { 
 
    background: mediumseagreen; 
 
    border: 5px solid seagreen; 
 
    color: white; 
 
    flex: 1; 
 
    margin: 10px; 
 
    padding: 42px; 
 
} 
 
</style> 
 

 
/************* STYLESHEET CSS STYLE PAGE LAYOUT+MENU***************/ 
 
    
 
<!DOCTYPE html> 
 
<style> 
 

 
body { 
 
    font-family: Verdana,sans-serif; 
 
    font-size: 0.9em; 
 
} 
 

 
div#header, div#footer { 
 
    padding: 10px; 
 
    color: white; 
 
    background-color: red; 
 
} 
 

 
div#content { 
 
    margin: 0px; 
 
    padding: 10px; 
 
    background-color: lightgrey; 
 
} 
 

 
div.article { 
 
    margin: 5px; 
 
    padding: 10px; 
 
    background-color: white; 
 
} 
 
body { 
 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACoCAMAAABt9SM9AAAAA1BMVEUBd7+dGBbBAAAAR0lEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAO8GxYgAAb0jQ/cAAAAASUVORK5CYII="); 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 
</style>

<link rel="stylesheet" type="text/css" href="style.css"> 
 
<link rel="stylesheet" type="text/css" href="styletest.css"> 
 
<link rel="stylesheet" type="text/css" href="logo.css"> 
 
<DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
 
<title>GameOn</title> 
 
<body> 
 

 
    <div id="header" class="center"> 
 
\t 
 
     <div id="right_logo_container"> 
 
     <div class="circle-container"> 
 
     <div class="outer-ring"></div> 
 
     <div class="circle"> 
 
      <div class="front"> 
 
      <p>GameOn</p> 
 
      </div> 
 
\t \t \t <div class="back"> 
 
\t \t \t <img class="back-logo" src="http://thegogame.com/static/media/facebook/Go-Game-Logo.png"/> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     </div> 
 

 
    <div id="left_logo_container">  
 

 
     <div class="circle-container"> 
 
     <div class="outer-ring"></div> 
 
     <div class="circle"> 
 
      <div class="front"> 
 
      <p>GameOn</p> 
 
      </div> 
 
      <div class="back"> 
 
      <img class="back-logo" src="http://thegogame.com/static/media/facebook/Go-Game-Logo.png"/> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
     
 
\t <img id="college_logo" src="https://www.regioinbedrijf.nl/uploads/onderwijsinstelling/Zoomvliet-College-logo-profiel.jpg"> 
 

 

 
    </div><!-- /header --> 
 

 
<style> 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<ul> 
 
    <li style="float:right"><a href="#login">Login</a></li> 
 
    <li style="float:right"><a href="#sign up">Sign up</a></li> 
 
    <li><a class="active" href="index.html">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul> 
 

 
</body> 
 
</html> 
 

 

 
<html> 
 
<div class="columns"> 
 
    <div class="column main-column"> 
 
    <section class="section"> 
 
     Titel Section 
 
    </section> 
 
    <article class="article"> 
 
     Hello World 
 
    </article> 
 
    </div> 
 
    <div class="column"> 
 
    <aside class="aside"> 
 
     Hello World 
 
    </aside> 
 
    <article class="article"> 
 
     Hello World<br> 
 
     Foo Bar 
 
    </article> 
 
    <article class="article"> 
 
     Hello World 
 
    </article> 
 
    </div> 
 
</div> 
 
</html> 
 

 

 
<div id="footer"> 
 
<p>&copy;2017 Frank. All rights reserved.</p> 
 
</div> 
 

 
</body> 
 
</html>

Quelle

2017-10-27 Frank van Hassel

Warum sind Ihre Stil-Tags über dem 'DOCTYPE'? Wenn Sie sich eine andere Website ansehen, werden Sie feststellen, dass der am häufigsten verwendete Ort innerhalb des "head" -Tags liegt, für den Sie das schließende Tag verpasst haben. Ihr HTML ist nicht korrekt formatiert. Mehrere 'html' /' head' * 'body'-Tags .... Auch Ihre CSS-Dateien benötigen nicht die' DOCTYPE' oder 'style' Tags, da sie nur' css' formatierten Inhalt enthalten sollten. Zu viel ist falsch damit für mich zu wissen, wo ich anfangen soll. – NewToJS

yeah, du solltest dein html wirklich zuerst reparieren und dann zurückkommen, wenn das Problem weiter besteht. Du kannst einen Linter dafür verwenden – SourceOverflow

Ich habe den in meiner CSS-Datei geändert und jetzt habe ich diesen Fortschritt hier: P https://gyazo.com/de34e36dae658454f004dbc631f43e3d –

Ihre div Marge b ottom ist auf 20em die ist eine relative Größe entweder auf 0 setzen oder sie es gar nicht gesetzt, und es wird

ändern div # Header

div#header { 
    clear: both; 
    margin-bottom: 0px; 
     /* So you can add space between logos and page contents */ 
    }

Quelle

2017-10-27 21:35:28 PeachyDinosaur

'0' soll ohne verwendet werden Unit – SourceOverflow

Ich habe die in meiner CSS-Datei geändert und jetzt habe ich das hier Fortschritte gemacht: P https://gyazo.com/de34e36dae658454f004dbc631f43e3d –

Bewegen Sie die Style-Tags nach unten befestigt werden. Wenn das nicht funktioniert, setzen Sie den Padding in der Navigationsleiste auf padding-top: 0px; und Rand oben: 0px;

Quelle

2017-10-27 21:36:30 GoofBall101

'0' soll ohne eine Einheit verwendet werden. Warum auch das "Padding-Top" für die Navbar? – SourceOverflow

Ich habe immer 0px gemacht, wenn ich CSS benutze. Das padding-top "manchmal" funktioniert für mich – GoofBall101

Ich habe den in meiner CSS-Datei geändert und jetzt habe ich das hier erreicht: P https://gyazo.com/de34e36dae658454f004dbc631f43e3d –

Website-Platz zwischen Header und Navbar

Antwort

Verwandte Themen