Header hat unerklärliche Höhe

Ich weiß nicht warum, aber meine h3 scheint eine enorme Höhe zu haben, ich habe eine zweite h3 weiter unten auf der Seite, die dieses Problem überhaupt nicht hat, egal, welche Marge oder Polsterung Ich setze auf die Spitze von h3, es wird immer irgendwo über dem Bildhintergrund sein, wo das Nav ist?Header hat unerklärliche Höhe

HTML

<header> 
<div class="fixed"> 
    <h1>Title</h1> 
    <nav id="menu"> 
     <ul> 
      <li><a href="../index.html">Home</a></li> 
      <li><a href="work/index.html">Portfolio</a></li> 
      <li><a href="travel/index.html">Blog</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
    </nav> 
</div> 

    <div class="picture"> 
     <h2>Text</h2> 
     <h2 class="name">Betti</h2> 
    </div> 
</header> 

<main> 

    <h3>Website Project</h3> 
    <p>coded in HTML &amp; CSS</p> 

    <div class="project"> 
     <a href="../project1/index.html" target="_blank"> 
     <img class="box" id="project1" src="../project1/img/project1.jpg" alt="project1"></a> 
    </div>

CSS

.fixed{ 
position: fixed; 
background-color: white; 
top: 0px; 
left: 0px; 
width: 100%; 
border-bottom: dashed; 
border-color: #666666; 
} 

.picture{ 
background: url("../img/london.jpg") no-repeat; 
background-size: 100%; 
margin-top: 0%; 
width: 100%; 
float: left; 
border-left: solid #a5053d; 
border-width: 15px; 
} 

h1{ 
padding: 1% 0 0 4%; 
text-transform: uppercase; 
float: left; 
left: 0; 
} 

h2{ 
padding: 0 4%; 
color: white; 
float: left; 
margin-top: 3%; 
} 

h3{ 
text-transform: uppercase; 
font-size: 50px; 
text-align: center; 
margin-bottom: -20px; 
margin-top: 0; 
} 

#project1, #project2{ 
margin-top: 0px; 
margin-left: 20%; 
margin-right: auto; 
width: 60%; 
text-align: center; 
border: 1.9px solid #a5053d; 
margin-bottom: 4%; 
} 

.project{ 
clear: both; 
float: none; 
overflow: none; 
position: center; 
width: 100%; 
}

Quelle

2017-01-27 heartcube

Haben Sie eine Live-Schaltung der Website haben? –

@AndrewLyndem - Den Code hier in eine Geige einzufügen ist ausreichend, um das Problem zu reproduzieren, das das OP beschreibt. – BSMP

@BSMP Ja, es ist ausreichend, das Problem zu reproduzieren, aber ich bevorzuge es, bestimmte CSS-Probleme (wie diese) auf Live-Seiten selbst zu debuggen, wenn möglich. Wenn es dem OP nicht möglich ist, den Link bereitzustellen, können die bereitgestellten Code-Snippets verwendet werden. –

Sie sind nur Raum zu sehen, dass main up nimmt. Es verbraucht all diesen Speicherplatz, weil das Element davor header floated Kinder hat und header kein Clearfix hat. So main technisch beginnt, wo header endet, ist aber unter den Kindern in header.

Sie können das beheben, indem Sie die Gleitkommazahlen in header löschen, dann wird main nicht so groß angezeigt und wird tatsächlich beginnen, wo header endet. Ich habe overflow: auto; zu header hinzugefügt, aber es gibt auch andere Möglichkeiten, Floats zu löschen.

http://codepen.io/anon/pen/EZbmKV

header { 
 
    overflow: auto; 
 
} 
 

 
.fixed{ 
 
position: fixed; 
 
background-color: white; 
 
top: 0px; 
 
left: 0px; 
 
width: 100%; 
 
border-bottom: dashed; 
 
border-color: #666666; 
 
} 
 

 
.picture{ 
 
background: url("../img/london.jpg") no-repeat; 
 
background-size: 100%; 
 
margin-top: 0%; 
 
width: 100%; 
 
float: left; 
 
border-left: solid #a5053d; 
 
border-width: 15px; 
 
} 
 

 
h1{ 
 
padding: 1% 0 0 4%; 
 
text-transform: uppercase; 
 
float: left; 
 
left: 0; 
 
} 
 

 
h2{ 
 
padding: 0 4%; 
 
color: white; 
 
float: left; 
 
margin-top: 3%; 
 
} 
 

 
h3{ 
 
text-transform: uppercase; 
 
font-size: 50px; 
 
text-align: center; 
 
margin-bottom: -20px; 
 
margin-top: 0; 
 
} 
 

 
#project1, #project2{ 
 
margin-top: 0px; 
 
margin-left: 20%; 
 
margin-right: auto; 
 
width: 60%; 
 
text-align: center; 
 
border: 1.9px solid #a5053d; 
 
margin-bottom: 4%; 
 
} 
 

 
.project{ 
 
clear: both; 
 
float: none; 
 
overflow: none; 
 
position: center; 
 
width: 100%; 
 
}

<header> 
 
<div class="fixed"> 
 
    <h1>Title</h1> 
 
    <nav id="menu"> 
 
     <ul> 
 
      <li><a href="../index.html">Home</a></li> 
 
      <li><a href="work/index.html">Portfolio</a></li> 
 
      <li><a href="travel/index.html">Blog</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 
</div> 
 

 
    <div class="picture"> 
 
     <h2>Text</h2> 
 
     <h2 class="name">Betti</h2> 
 
    </div> 
 
</header> 
 

 
<main> 
 

 
    <h3>Website Project</h3> 
 
    <p>coded in HTML &amp; CSS</p> 
 

 
    <div class="project"> 
 
     <a href="../project1/index.html" target="_blank"> 
 
     <img class="box" id="project1" src="../project1/img/project1.jpg" alt="project1"></a> 
 
    </div>

Quelle

2017-01-27 21:40:10

Header hat unerklärliche Höhe

Antwort

Verwandte Themen