HTML / CSS разрывает div при уменьшении

0

Я проектирую веб-сайт для своего отца, и до сих пор я на середине страницы индекса. Что меня раздражает, когда я уменьшаю примерно до 30% (просто ради тестов). Разрывы разбиты, и они оказываются неуместными (покажет вам пример). Также даже divs не остаются одной "целой сущностью"

Я пробовал в основном все, минимальную ширину (что составляет 965 пикселей). Есть ли способ сделать его округленным? Процентный мудрый вид? Если да, то как это сделать, учитывая, что ширина max-width должна быть 965px?

Мой сайт в основном предназначен для ПК.

Также я использую HTML5 и CSS3

Существует один внешний div, который ставит все тело в "коробку",

Предупреждение: Мой заголовок находится в PHP, поэтому нижний колонтитул, а затем я просто загружаю их. Я буду размещать как header.php, так и общий background CSS

Код CSS:

@charset "utf-8";
/* CSS Document */

body
{
    background:url(pics/bg.jpg) no-repeat center center fixed;

    background-color:#282828;
    font-family: 'Sancreek', cursive;
    min-width:965px;
    margin: 0 auto;
}
.bodyoutline
{
    min-width:100%  ;
}
div.upperbody
{
    background:url('pics/topbg.png') no-repeat center center;
    width:965px;
    height:100px;
    margin: 0 auto;
}
div.body
{
    background:url('pics/divbg.png') no-repeat center center fixed;
    width:965px;
    height:1304px;
    margin: 0 auto;
    margin-top:-25px;
    }

div.header
{
    background:url('pics/header.png');  
    width:965px;
    margin: 0 auto;
    height: 319px;
    overflow:hidden;    
}

div.logo
{
    background:url('pics/logo.png');
    width: 220px;
    height: 215px;
    float:left;
    margin-left:20px;
    margin-top:20px;    
}

div.groupPhoto
{
    background:url('pics/group.png');
    float:right;
    margin-right:30px;
    width:552px;
    height:244px;
    margin-top:30px;
    transform: rotate(12deg);
    -ms-transform: rotate(12deg); /* IE 9 */
    -webkit-transform: rotate(12deg); /* Safari and Chrome */
}

div.mainContent
{
    width:965px;
    margin: 0 auto;
    float:left;
}

div.menuLinks
{
    width:965px;
    margin: 0 auto;
    text-align:center;
}


ul,li.menuLinks
{
    width:965px;
    margin: 0 auto;
    display:inline;
    font-size: 38px;    
    padding: 10px;
    color: #39100a;
    font-weight:bold;
}
div.separator
{
    width:965px;
    text-align:center;
    margin:0 auto;
    height:50px;
}

div.box
{
    width:965px;
    margin: 0 auto;

}

div.updec
{
    background:url('pics/updec.png') center no-repeat;
    width: 965px;
    height: 202px;
}

h1.titles
{
    margin-left:75px;
    font-size:30px;
}
h1.ePhotos
{
    float:left;
    font-size:18px;
    text-decoration:underline;
    margin-left:25px;
}

.position
{
    margin-left:90px;
    margin-top:-130px;
}

a:visited
{
    text-decoration:none;
    color:#000; 
}
a:hover
{
    text-outline:#000;
    outline-color:#000;
    outline-width:2px;
    margin: 0 auto;
}

header.php

<!DOCTYPE>

<html>
<head>  


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Copyright" content=" Dorienne Grech (DodoSerebro), All Rights Reserved ">
<meta name="description" content ="Forever Friends Official Website. All the Latest Dances Walkthroughs, Videos of Recent Events, Photos, Contacts and More regarding Forever Friends Linedancers will be found here!, latest Dances">  
<meta name="keywords" content="">
<title>Forever Friends Lineadancers Official Site</title>
<link rel="stylesheet" type="text/css" href="generalbackground.css">
<link rel="stylesheet" type="text/css" href="accordion.css">
<link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>


</head>

<body>
<div class="bodyoutline">
<div class="upperbody"></div>
<div class="body">

    <div class="header"> <!-- Header containing Logo and Group Photo -->
        <div class="logo"></div> <!-- Logo -->
        <div class="groupPhoto"></div> <!-- end of groupPhoto -->
    </div> <!--End of header -->

    <div class="mainContent"> <!--Main Body Consisting of Links / Video/Photo and others -->

        <div class="menuLinks"> <!-- Menu Links -->
            <ul class="menuLinks">
                <li class="menuLinks"><a href="index.php">Home</a></li>
                <li class="menuLinks"><a href="about.php">About</a></li>
                <li class="menuLinks"><a href="dances.php">Dances</a></li>
                <li class="menuLinks"><a href="videos.php"> Videos </a></li>
                <li class="menuLinks"><a href="events.php">Events </a></li>
                <li class="menuLinks"><a href="contact.php">Contact</a></li>
             </ul>
         </div> <!-- end of mainContent -->

Результат увеличения до 30%

http://imageshack.us/photo/my-images/571/y1bw.jpg/

PS: BROWSER В настоящее время тестирование и использование - GOOGLE CHROME: Версия 29.0.1547.66 m

благодаря

Теги:
zoom

2 ответа

0
Лучший ответ

То, что я нашел лучших людей, - это использовать МЕДИА-ЗАПРОСЫ

Просто добавив

@media (max-width: 600px)
{
  //All the CSS [classes] to be effected by the change in screen will be written here for e.g
h1
{
  font-size:20px;
}
}

Когда экран имеет размер 600 пикселей или меньше (или уменьшен), размер шрифта h1 изменится на 20 пикселей, тогда как ВСЕ другой CSS останется как первоначально записанный (так как он является родительским)

Другими словами:

Запросы в СМИ будут ТОЛЬКО влиять на классы, написанные между медиа-запросами (перезаписывают оригинал)

Поделиться
0

наилучшей практикой будет

.bodyoutline
{
    position: relative;
    min-width: 1366px;
    max-width: 2048px;
    margin: 0px auto; 
    width: 100%;
}

Это сделает все ваши элементы в div и всегда выровнены независимо от увеличения или уменьшения.

Поделиться
  • 0
    Это все еще нарушает содержимое div, как на картинке ...
  • 0
    @DodoSerebro Я думаю, что главная проблема в том, что вы не указали какую-либо связь между divs.on на обычном экране, который выглядит правильно, но при увеличении / уменьшении. Это временный псевдо-взгляд, который вы получаете. Попробуйте дать отношения как position: absolute; position: относительна поплавок: слева;
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню