Как остановить сетку от сбрасывания на себя при изменении размера окна браузера?

Я создаю веб-сайт, чтобы продемонстрировать некоторые из моих работ, и у меня возникла проблема с развалом сетки при изменении размера окна браузера на меньший размер.Как остановить сетку от сбрасывания на себя при изменении размера окна браузера?

Я по-прежнему очень люблю кодирование, поскольку я начал изучать html и css неделю назад, поэтому не могу понять, как это исправить. Я пробовал различные методы, которые я нашел для подобных проблем, но безрезультатно. О, и я использую платформу bootstrap, если это помогает. Вот HTML-коды и CSS:

HTML:

<body> 

<div class="container"> 

<!-- Header begin --> 

     <div class="row"> 
      <div id="divider1a" class="span12">divider1a</div> 
     </div> 

     <div class="row"> 
      <div id="divider1b" class="span12">divider1b</div> 
     </div>    

     <div class="row">   
      <div id="head" class="span12"> 
       <div class="row"> 
        <div id="logo" class="span4"><a href="index.html"><img src="images/Logo.png" width="305" height="100" /></a></div> 
        <div id="socialmedia" class="span8"><ul> 
                  <li><img src="images/rss.png" width="48" height="48" /></li> 
                  <li><a href="http://www.linkedin.com/profile/view?id=203116454&trk=tab_pro"><img src="images/linkedin.png" width="48" height="48" /></a></li> 
                  <li><img src="images/vimeo.png" width="48" height="48" /></li> 
                  <li><a href="https://www.youtube.com/user/burnwesten"><img src="images/youtube.png" width="48" height="48" /></a></li> 
                 </ul></div> 
        <div id="navbar" class="span8"><ul> 
                 <li><a href="about.html">About</a></li> 
                 <li><a href="reel.html">Demo Reel</a></li> 
                 <li><a href="portfolio.html">Portfolio</a></li> 
                 <li><a href="contact.html">Contact</a></li> 
                </ul></div> 
       </div>  
      </div> 
     </div>     

<!-- Header end --> 



<!-- Middle begin --> 

     <div class="row"> 
      <div id="divider2a" class="span12">divider2a</div> 
     </div> 

     <div class="row"> 
      <div id="divider2b" class="span12">divider2b</div> 
     </div>     

     <div class="row"> 
        <div id="imgbanner" class="span12"><img src="images/imgbanner_comingsoon.png" /></div>  
     </div>  



     <div class="row">    
      <div id="slidebanner" class="span12">   
       <div class="row"> 
        <div id="arrowleft" class="span3"><img src="images/arrowleft_comingsoon.png" /></div> 
        <div id="imgslide" class="span2"><img src="images/imgsquare_comingsoon.png" /></div> 
        <div id="imgslide" class="span2"><img src="images/imgsquare_comingsoon.png" /></div> 
        <div id="imgslide" class="span2"><img src="images/imgsquare_comingsoon.png" /></div> 
        <div id="arrowright" class="span3"><img src="images/arrowright_comingsoon.png" /></div> 
       </div>  
      </div> 
     </div> 

     <div class="row"> 
      <div id="divider3" class="span12">divider3</div> 
     </div>    

     <div class="row"> 
      <div id="welcome-news" class="span12"> 
       <div class="row"> 
        <div id="welcome" class="span8"><h2>Name</h2> 
                <h2>Job title</h2> 
                <p>Welcome to my site! 
                 Lorem ipsum dolor sit amet, option fabellas mel et, at has doctus noluisse ullamcorper, no facete probatus evertitur 
                 vim. Est id mutat lobortis. Cu ius omnesque apeirian interesset. Quo putent consequuntur at. Mel soluta sadipscing 
                 te. Ea sed impetus patrioque, sed inani vitae ea, sea ne labore prodesset. 

                 Nam in ipsum detracto disputando, sea ei habeo aliquam scripserit, vide simul graeco pri eu. Unum possit ea duo, 
                 maiorum partiendo has ut. Per tamquam omnesque cu. Sed veniam ancillae luptatum te. Sea repudiare euripidis 
                 posidonium ne, ex elit saperet qui.</p></div> 
        <div id="news" class="span4"><h3>Latest News</h3> 
               <h4>News Title</h4> 
               <p>Lorem ipsum dolor sit amet, option fabellas mel et, at has doctus noluisse ullamcorper, no facete probatus evertitur 
                vim. Est id mutat lobortis. Cu ius omnesque apeirian interesset. Quo putent consequuntur at. Mel soluta sadipscing 
                te. Ea sed impetus patrioque, sed inani vitae ea, sea ne labore prodesset. 

                Nam in ipsum detracto disputando, sea ei habeo aliquam scripserit, vide simul graeco pri eu. Unum possit ea duo, 
                maiorum partiendo has ut. Per tamquam omnesque cu. Sed veniam ancillae luptatum te. Sea repudiare euripidis 
                posidonium ne, ex elit saperet qui.</p> 
               <p>dd/mm/yy</p></div> 
       </div>  
      </div> 
     </div> 

<!-- Middle end --> 



<!-- Footer begin --> 

     <div class="row"> 
      <div id="divider4" class="span12">divider4</div> 
     </div> 

     <div class="row"> 
      <div id="copyright" class="span12"><p>Copyright note</p></div> 
     </div> 

<!-- Footer end -->   

</div> <!-- Container end --> 



<script src="http://code.jquery.com/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</body>

CSS:

.container { backgound: #28383f; 
     margin: 0 auto; 
     width: 940px; }      

#divider1a { background: #051d32; 
     height: 10px; 
     width: 940px; 
     margin-left: 30px ; 
     margin-right: 0px ; } 

#divider1b { background: #051d32; 
     height: 10px; 
     width: 940px; 
     margin-left: 30px ; 
     margin-right: 0px ; } 

#logo { background: #28383f; 
    color: white; 
    height: 105px; 
    width: 310px; 
    margin-right: 0px; } 

#socialmedia { background: #28383f; 
      color: white; 
      height: 52.5px; 
      width: 630px; 
      margin-left: 0px; } 

#navbar { background: #28383f; 
     color: white; 
     height: 52.5px; 
     width: 630px; 
     margin-left: 0px; } 

#divider2a { background: #051d32; 
     height: 10px; 
     width: 940px; 
     margin-left: 30px ; 
     margin-right: 0px ; } 

#divider2b { background: #051d32; 
     height: 10px; 
     width: 940px; 
     margin-left: 30px ; 
     margin-right: 0px ; } 

#imgbanner { background: #051d32; 
     color: white; 
     height: 340px; 
     width: 940px; 
     margin-left: 30px; } 

#slidebanner { background: #051d32; 
      height: 190px; 
      width: 940px; 
      margin-left: 30px; 
      margin-right: 0px; }         

#arrowleft { background: #051d32; 
     color: white; 
     height: 190px; 
     width: 110px; 
     margin-left: 30px; 
     margin-right: 0px; } 

#arrowright { background: #051d32; 
     color: white; 
     height: 190px; 
     width: 110px; 
     margin-right: 0px; 
     margin-left: 0px; } 

#imgslide { background: #051d32; 
     color: white; 
     height: 170px; 
     width: 170px; 
     margin-left: 35px; 
     margin-right: 35px; 
     margin-top: 10px; 
     margin-bottom: 10px; } 

#divider3 { background: #051d32; 
     height: 10px; 
     width: 940px; 
     margin-left: 30px ; 
     margin-right: 0px ; } 

#welcome-news { margin-left: 120px; 
     margin-left: 30px; }    

#welcome { background: #28383f ; 
     color: white; 
     height: 500px; 
     width: 630px; } 

#news { background: #344349; 
    color: white; 
    height: 500px; 
    width: 310px; 
    margin-left: 0px; 
    margin-right: 30px; } 

#divider4 { background: #051d32; 
     height: 10px; 
     width: 940px; 
     margin-left: 30px ; 
     margin-right: 0px ; }  

#copyright { background: #051d32; 
     color: white; 
     height: 50px; 
     width: 940px; 
     margin-left: 30px; }

Любая помощь будет принята с благодарностью.

Кроме того, вы могли бы заметить в коде css, что у многих div есть маржа слева: 30px; страница не центрируется должным образом, если у тех divs нет 30px левого поля по какой-либо причине. Поэтому любая помощь по этой теме тоже помогла бы. Спасибо :)

Edit *

Вот как это выглядит в браузере в полноэкранном режиме:

http://i1051.photobucket.com/albums/s426/AnimationStudent/breakingproblemsfullscreen_zps57543528.png

И это то, что происходит при изменении размера окна:

http://i1051.photobucket.com/albums/s426/AnimationStudent/breakingproblemsresized1_zps4a1d66a0.png

источник

2013-05-16 user2388447

Знаете ли вы, что такое [Отзывчивый веб-дизайн] (http://en.wikipedia.org/wiki/Responsive_web_design)?TBS основан на RWD. –

Создайте файл JSFiddle. Тогда вам будет легко помочь. –

Как насчет вас использовать маржу: 0 auto; ? – bot

Приятно видеть, что вы пытаетесь узнать что-то новое. Я предлагаю вам ознакомиться с учебными пособиями из таких мест, как nettuts+ и несколько других, так как это поможет. Также всегда старайтесь задавать вопросы, так как это единственный реальный способ, которым вы научитесь. Теперь на ваше затруднительное положение;

Теперь мне кажется, что вы пытаетесь создать статический дизайн вместо гибкого дизайна. Я предполагаю, что вы хотите, чтобы он не ищет то же самое, независимо от того, что экран так попробовать

.container { backgound: #28383f; 
     margin: 0 auto; 
     min-width: 940px; !important}

Как это с игнорировать любые другие суб постановления (даже @media Ones).

Если вам нужен отзывчивый дизайн, могу ли я предложить избегать использования фиксированной ширины (пикселей) и двигаться в направлении чувствительной ширины (%).

Причина, по которой это может произойти, заключается в том, что ваш код работает. Под этим я подразумеваю, что у вас есть span4 и два span8 в одной строке. Поэтому, когда экран сжимается, может возникнуть проблема с руинами. Что касается вопроса о центрировании ... unsure, поскольку не видно рабочего примера, поэтому не могу сказать, почему это может произойти в этом проекте.

Edit *

Основываясь на фотографии вы только прикрепленными, это, кажется, немного нечистого и довольно суматоху дизайна. Под этим я подразумеваю, что я не вижу смысла в двух div и в верхней или нижней части заголовка div. Кроме того, почему вы ссылаетесь на идентификаторы, а не на классы для стилизации, как по личным предпочтениям, я стараюсь избегать использования идентификаторов, поскольку они лучше подходят для ссылок и классов для стилизации.

источник

2013-05-16 09:42:42

спасибо. У меня было ощущение, что код не течет должным образом и как таковой вызывает проблемы. Я попытаюсь исправить то, что вы упомянули, и если он все еще не работает, я могу просто выбрать более простой дизайн. – user2388447

Я постараюсь вам помочь в более аккуратном подходе в ближайшее время! –

Как остановить сетку от сбрасывания на себя при изменении размера окна браузера?

ответ

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