DIV bewegt, wenn Zoom-in in browse (Stiftung Rahmen)

Meine div um sich bewegt, wenn sie in das Zoomen, und es geht unter die NavigationDIV bewegt, wenn Zoom-in in browse (Stiftung Rahmen)

Bild des Problems http://store2.up-00.com/2016-08/1470571909991.png

Ich versuchte min einstellen -Breite aber es hat nicht funktioniert !.

Beachten Sie, dass ich Foundation Framework für CSS verwende! HTML -

<?php include 'core/init.php';?> 
<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Social Site</title> 
    <link rel="stylesheet" href="css/foundation.css"> 
    <link rel="stylesheet" href="css/app.css"> 
    <link rel="stylesheet" href="css/home_style.css" media="all" /> 
</head> 
<body> 
    <div class="wrapper"> 
    <header> 
     <div class="row clearfix"> 
      <div class="large-8 columns"> 
       <ul class="menu"> 
        <li>Home</li> 
        <li>Members</li> 
        <li>Topics:</li> 
        <?php $get_topics = "SELECT * FROM `topics`"; 
          $run_topic = mysqli_query($con, $get_topics); 
          while ($topics = mysqli_fetch_array($run_topic)){ 
            $topic_id = $topics['topic_title']; 
            $topic_title = $topics['topic_title']; 
           echo "<li><a href='home.php?topic=$topic_id'>$topic_title </a></li>"; 
          } 
        ?> 
       </ul> 
      </div> 
      <div class="large-4 columns right" > 
       <form action="" method="post" class="search"> 
        <label>Search</label> 
        <input type="text" name="search" class="search_input"> 
        <input type="submit" name="search_b" value="Search"> 
       </form> 
      </div> 
     </div> 
    </header> 

</div> 
    <script src="js/vendor/jquery.js"></script> 
    <script src="js/vendor/what-input.js"></script> 
    <script src="js/vendor/foundation.js"></script> 
    <script src="js/app.js"></script> 
</body> 
</html>

CSS:

.wrapper { 
    width: 100%; 
    min-width: 1300px; 
    background: #eee; /* Fills the page */ 
    position: relative; /* Fix for absolute positioning */ 
} 

header { 
    height: 70px; 
    width: 100%; 
    background-color: #5f5f5f; 
    font-weight: bold; 

} 

header ul.menu li { 
    display: inline-block; 
    margin-left: 25px; 
    line-height: 60px; 
} 


.search { 
    margin-top: 12px; 
} 
.search_input { 
    display: inline; 
} 
.search input[type=text] { 
    width: 200px; 
} 

.search label { 
    display: inline; 
} 




/*REMOVE FOUNDATION STYLE*/ 
.menu > li > a { 
    padding: 0; 
} 



html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
}

Quelle

2016-08-07 Ahmadz Issa

Schauen Sie sich Ihre header Stil ... height: 70px; ist Ihr Problem. Ihr Browser versucht, das Element unter andere zu verschieben, aber es hat Höhe festgelegt, so dass Ihr Element in nichts schwebt. Versuchen Sie, dieses Attribut zu entfernen.

Quelle

2016-08-07 12:21:50 PDKnight

Vielen Dank. Nachdem ich die Höhe entfernt habe, geht es unter das ul li Menü http://store1.up-00.com/2016-08/1470572498261.png, aber ich möchte es behoben werden und nicht bewegen, wenn ich hineinzoomen. Ich habe es benutzt Min-Breite, um das zu erreichen, aber es hat nicht funktioniert, wie ich schon sagte. –

@AhmadzIssa Nun, selbst wenn du hineinzoomst, werden deine Elemente größer werden, also wird einer von ihnen immer unter andere kommen. Was willst du bekommen? Wenn Sie die Breite des Containers mit allen Links einstellen, sehen Sie immer noch einige Elemente, die unter anderen schweben. – PDKnight

Vielen Dank für den Tipp, ich habe gerade "div-8-small-8" zum div hinzugefügt, nachdem ich "it" gelesen habe wird größer "und es funktioniert jetzt gut. Danke. –

DIV bewegt, wenn Zoom-in in browse (Stiftung Rahmen)

Antwort

Verwandte Themen