Dokument Höhe höher wegen der relativen Position

Ich arbeite mit 2 divs relativ zueinander positioniert und einander mit einer Position von oben: -400px.Dokument Höhe höher wegen der relativen Position

Der gesamte Inhalt darunter hat eine Spitze von -800px, so dass der Inhalt nach oben schiebt. Alles zeigt an, dass am unteren Rand der Seite 800 Pixel Platz sind, weil der Browser immer noch denkt, dass der Inhalt so weit unten liegt, wenn er tatsächlich -400 Pixel hoch ist.

Hilfe?

Hier ist mein Code für Sie zu lesen: http://theproagency.com/WeddingHub

ich für einen CSS-Update suchen - ich dies bereits mit JS mit document.height beheben = document.height - 800px oder wir

Alle Hilfe wird geschätzt.

Danke

p.s. Ich würde auch gerne wissen, wie man das in allen Situationen beheben kann. Was ist, wenn dies in zukünftigen Situationen passiert, wenn ich Webseiten erstelle? Ich dachte, ich hätte Erfahrung darin, Webseiten zu erstellen, aber diese hat mich in einer Essiggurke erwischt.

Quelle

2017-02-08 Kyle Scott

Warum sind sie so positioniert? Sie müssen nur auf natürliche Weise positioniert werden, anstatt den unteren auf den oberen zu verschieben. – TricksfortheWeb

Platzierst du alles so mit negativen Spitzenpositionen, dass du den Schieberegler über ".flowerBG" setzen kannst? –

+ Michael Coker - Ja das ist richtig. Ich habe auch einen undurchsichtigen schwarzen BG über den Blumen, um ihre Helligkeit zu ändern, während mehr Bereiche meines photoshop Entwurfs die gleichen Blumen bei den verschiedenen undurchsichtigen Werten wieder heller und dunkler wiederverwenden. –

Ich habe einige Änderungen vorgenommen. Bitte kopieren Sie nur diesen Text in Ihren Code. Sie sollten ein Backup haben.

<body> 
<header class="topBar"> 
<div class="wrapper"> 
    <div class="socialMedia"><a href="#"><img src="images/fbico.jpg" width="29" height="30" alt=""></a><a href="#"><img src="images/linkedinico.jpg" width="30" height="30" alt=""></a><a href="#"><img src="images/twitterico.jpg" width="30" height="30" alt=""></a></div> 
    <nav class="secondaryNav"> 
     <ul> 
      <li><a href="mailto:[email protected]">[email protected]</a></li> 
      <li class="phoneNumberBTN teal"><a href="tel:1-360-870-1081" class="telLarge">1 (360) 870-1081</a></li> 
     </ul> 
    </nav> 
    <div class="clearfloat"></div> 
</div> 
</header> 
<div class="aboveSlider"> 
<div class="wrapper"> 
    <nav class="topNav"> 
     <ul> 
      <li class="logo"><a href="index.html"><img src="images/logo.jpg" width="148" height="60" alt=""></a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Packages</a></li> 
      <li><a href="#">Blog</a></li> 
      <li><a href="#">Designs</a></li> 
      <li><a href="#">We Can Help</a></li> 
     </ul> 
    </nav> 
</div> 
</div> 
<!--I removed your class="opaqueOverlay". And also I included wrapper class to flowerBG class. --> 
<div class="flowerBG"> 
<div class="wrapper"> 
    <div class="slider"> 
     <hgroup> 
      <h1>Wedding websites &amp; invitations</h1> 
      <h5>We specialize in websites &amp; invitations for the special day.</h5> 
     </hgroup> 
     <a href="#"> 
      <div class="getStartedBTN">Get Started</div> 
     </a> </div> 
</div> 
</div> 

<!--end wrapper and slider --> 
<!--begin mainContent .wrapper --> 
<main role="main" class="mainContent wrapper"> 
<article> 
    <header> 
     <hgroup class="us"> 
      <h1 class="weare">The Wedding Specialists</h1> 
      <h2 class="wedo">Invites, designs &amp; more.</h2> 
     </hgroup> 
    </header> 
    <p class="contentLeft"> Hello,<br> 
     <br> 
     We are weddinghubs.com and we specialize in websites &amp; invitations for fiances 
     and newly weds. Our service is invaluable for any new couple who is planning on 
     marriage. We handle everything from domain registration, page creation and even let you choose when you want the website and service to go live. We also have password protection services and auto account creation for digital invitee’s so only select guests will be able to see your beautiful website. Away from the eyes of the public. Though if you would like a public website - we will do and handle that too. As we understand weddings are amazing milestones. The start to the next chapter of your life and people around you.<br> 
     <br> 
     <strong>Regards,</strong><br> 
     <span class="signature">Kyle L.Scott</span><br> 
     WeddingHubs.com Owner </p> 
    <aside class="information"> 
     <h1>Website Features</h1> 
     <ul> 
      <li>RSVP Tracker</li> 
      <li>Photosharing</li> 
      <li>Wedding Countdown</li> 
      <li>Unique Designs</li> 
      <li>Driving Directions</li> 
      <li>and so much more.</li> 
     </ul> 
    </aside> 
</article> 
</main> 
</body>

Und auch habe ich einige Änderungen von class = "flowerBG" in CSS. Ich habe die oberen Bereiche entfernt. Ich habe CSS3 Farbverläufe verwendet.

.flowerBG { 
height: 400px; 
position: relative; 
background: linear-gradient(rgba(0, 0 ,0 , .55), rgba(0, 0 ,0 , .55)), url(../images/banner.jpg);}

Änderungen der Klasse = "Slider" in CSS. Ich habe die oberen Bereiche entfernt.

.slider { 
height: 400px; 
position: relative;

}

Änderungen von maincontent Klasse in CSS. Ich habe die oberen Bereiche entfernt.

.mainContent { 
position: relative; 
}

Ich hoffe, Sie haben jetzt eine Lösung. Vielen Dank!

Quelle

2017-02-08 06:07:34

Dokument Höhe höher wegen der relativen Position

Antwort

Verwandte Themen