При использовании CSS, как я могу предотвратить совпадение своих DIVs при сокращении моего браузера?

Я здесь новый, поэтому, пожалуйста, не ешь меня живым. Это место пугает.При использовании CSS, как я могу предотвратить совпадение своих DIVs при сокращении моего браузера?

В любом случае, я собираю файл index.php с использованием HTML и CSS. Это выглядит великолепно - за исключением того, что когда мой браузер становится очень маленьким, мои DIV будут работать друг с другом. Включая фотографию ниже, вместе с моим CSS и HTML-кодом.

Любая помощь будет очень признательна !!!

JSFiddle:

https://jsfiddle.net/chrisbclark/3naymjh3/

Изображение перекрытия Я пытаюсь исправить:

CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans); 
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, 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, footer, header, 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; 
} 



body { 
    line-height: 1; 
    background: url("bk.jpg"); 
    background-size:cover; 
} 

.container{ 
    font-family: 'Open Sans', sans-serif; 
    overflow: auto; 

} 
#head_wrap{ 
    position:fixed; 
    width:100%; 
    /* height of header */ 
    height:auto; 
    /* end height of header */ 
    margin:0px auto; 
    padding:4px; 
    /* thickness of long red line */ 
    border-bottom:2px solid #FFFFFF; 
    overflow: auto; 
    /* end thickness of long red line */ 

} 
#header{ 
    overflow: auto; 

} 
#form1{ 
    float:right; 
    padding:10px; 
} 

.centered{ 
    position:absolute; 
    background-color:white; 
    font-family: 'Open Sans', sans-serif; 
    font-size:small; 
    margin-top: 25%; 
    margin-left: 50%; 
    opacity: 0.8; 
    /* bring your own prefixes */ 
    transform: translate(-50%, -50%); 

} 
#loginform{ 
    padding:20px; 
    box-shadow: 3px 3px 3px #E7E7E7; 
} 

p { 
    color:#000000 
}

HTML:

<!DOCTYPE html> 

<html> 
    <head> 
     <title>snostream</title> 
    <link rel="stylesheet" href="styles/style2.css" media="all"> 
    </head> 


<body> 
    <!--container starts--> 
<div class="container"> 
     <!-- begin head wrap --> 
     <div id="head_wrap"> 
      <!-- begin header --> 
      <div id="header"> 
      <img src="images/logo.png"> 
      <form method="post" action="" id="form1"> 
       <input type="text" name="email" placeholder="Email"> 
       <input type="password" name="pass" placeholder="********"> 
       <input type="submit" name="sub" value="Login"> 
      </form> 
      </div> 
      <!-- end header --> 
     </div> 
     <!-- head wrap ends here --> 

     <!--- main body ---> 

</div> 

    <!--container ends--> 
<div class="centered" id="loginform"> 
    <div id="thebox"> 
     <form action="" method="post"> 
      <table> 
      <p> 
      <h2>Registration:</h2> 
      <br><br> 
       <tr> 
        <td>Name:</td> 
        <td> 
        <input type="text" name="u_name"> 
        </td> 
       </tr> 

       <tr> 
        <td>Email:</td> 
        <td> 
        <input type="text" name="u_email"> 
        </td> 
       </tr> 

       <tr> 
        <td>Choose Password:</td> 
        <td> 
        <input type="text" name="u_pass" 
        </td> 
       </tr> 

       <tr> 
        <td>Select Gender:</td> 
        <td> 
        <select name="u_gender"> 
         <option>Select a Gender</option> 
         <option>Male</option> 
         <option>Female</option> 
        </select> 
       </tr> 

       <tr> 
        <td>Select Network:</td> 
        <td> 
        <select name="u_network"> 
         <option>Select a Network</option> 
         <option>North Carolina</option> 
         <option>South Carolina</option> 
         <option>New York</option> 
         <option>California</option> 
        </select> 
       </tr> 

       <tr> 
        <td>Birthday:</td> 
        <td> 
        <input type="date" name="u_birthday"> 
        </td> 
       </tr> 

        </td> 
       <tr> 
        <td colspan="6"> 
        <center><br><br><button name="sign_up">Submit</button> 
        </td> 
       </tr> 
       </p> 
      </table> 
     </form> 
    </div> 
</div> 
</body> 
</html>

источник

2016-02-17 cbclark

Можете ли вы поместить свой код в jsfiddle? –

** Не используйте абсолютное позиционирование **. Абсолютное позиционирование - это ** очень плохой способ выкладки веб-страниц. Он чрезвычайно негибкий, и есть намного лучшие и более гибкие варианты. Проверьте [** LearnLayout.com **] (http://learnlayout.com/) –

Вы должны прочитать о «отзывчивом дизайне», чтобы ваш сайт был готов для мобильных устройств (а также для сокращения браузеров). Если вы хотите протестировать поведение своего сайта на разных экранах, я предлагаю вам [troy.labs] (http://troy.labs.daum.net/). –

установить ширину в соответствии с процентами вместо точек и пикселей.

Общая ширина полосы не должна превышать 100% для общей длины строки.
Что я имею в виду здесь, так это то, что если 3 DIV лежат в одном ряду, их ширина должна быть 100%
Пример: DIV # 1: 40%, DIV # 2: 20%, DIV # 3: вы догадались это 40%.

Другим способом контроля над этим является то, что никогда не используйте положение: относительный, его глаз отбрасывается только в отношении вашего браузера, ваша сеть будет работать по-разному на каждом устройстве.

источник

2016-02-17 14:53:44

При использовании CSS, как я могу предотвратить совпадение своих DIVs при сокращении моего браузера?

ответ

Смежные вопросы