Изменения размеров сайта

Question

Изменения размеров сайта

0

Привет, я работаю над созданием веб-сайта. Проблема заключается в размерах изменения веб-сайта на компьютере. Экран компьютера имеет разные размеры, а некоторые - разные браузеры. Например, панель навигации изменит ширину, и она также будет перекрываться на некоторых компьютерах. Он также отобразит изображения на одном компьютере и использует Internet Explorer, но на другом компьютере с Chrome (и другом размере экрана) изображения не отображаются. Я не знаю, почему это так, пожалуйста, помогите!

Мой HTML:

    <!DOCTYPE html>
<html>
<head>
    <title>
    Drippr
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1 id="title">Drippr</h1>
    <div id="navbar">

        <a href="http://drippr.me/" class="boxtext">
            <div id="box1">
                <p> Dripps </p>
                <img src="http://drippr.me/images/paper.svg" style="height: 40px">
            </div>
        </a>

        <a href="http://drippr.me/" class="boxtext">
            <div id="box2">
                <p> Bucket </p>
                <img src="http://drippr.me/images/bucket.svg" style="height: 40px">
            </div>
        </a>

        <a href="http://drippr.me/" class="boxtext">
            <div id="box3">
                <p> Settings </p>
                <img src="http://drippr.me/images/settings.svg" style="height: 40px">
            </div>
        </a>

    </div>

    <div id="hometop">
        <ul id="hometoplist">
            <li>TEST</li>
        </ul>
    </div>

    <table>
        <tr>
            <td>
                <div class="bubbles">
                </div>
            </td>

            <td>
                <div class="bubbles">
                </div>
            </td>
        </tr>
    </table>

    <div id="footer">

    </div>

</body>
</html>

Мой CSS:

#title {
    color: #1c63ff;
    text-align: center;
    font-size: 35px;
    position: absolute;
    margin: auto;
    border: 1px solid white;
    margin-left: 45%;
    width: 120px;
    height: 45px;
    background-color: white;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

#navbar {
    height: 100%;
    width: 10%;
    background-color: #D1ECFF;
    border-radius: 0;
    position: fixed;
    margin-left: -10;
    top: -1;
    border: 2px solid #A1C6FF;
}

.boxtext {
    color: darkblue;
    font-weight: bold;
    text-align: center;
    margin: auto;
    text-decoration: none;
    font-size: 22px;

}

.boxtext:hover {
    color: darkblue;
    font-weight: bold;
    font-size: 25px;
}

#box1 {
    height: 18%;
    width: 90%;
    background-color: #5CBDFF;
    border: 2px solid #3385FF;
    border-radius: 8px;
    text-align: center;
    margin: auto;
    top: 5px;
    margin-left: 6.5px;
    position: absolute;
}

#box1:hover {
    background-color: #79AEFF
}

#box2 {
    height: 18%;
    width: 90%;
    background-color: #5CBDFF;
    border: 2px solid #3385FF;
    border-radius: 8px;
    text-align: center;
    margin: auto;
    top: 145px;
    margin-left: 6.5px;
    position: absolute;
}

#box2:hover {
    background-color: #79AEFF
}

#box3 {
    height: 18%;
    width: 90%;
    background-color: #5CBDFF;
    border: 2px solid #3385FF;
    border-radius: 8px;
    text-align: center;
    margin: auto;
    top: 285px;
    margin-left: 6.5px;
    position: absolute;
}

#box3:hover {
    background-color: #79AEFF
}

#hometop {
    height: 50%;
    width: 100%;
    background-color: #D7D7D7;
    border-bottom: 2px solid gray;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
}

.bubbles {
    height: 200px;
    width: 200px;
    border-radius: 100px;
    background-color: #99C2FF;
    border: 2px solid #1975FF;
    margin: auto;
    margin-top: 20px;
    margin-left: 160px;
}

#hometoplist {
    text-align: right;
    margin: auto;
    margin-top: px;
}

#footer {
}

Michael Jones 04 май 2014, в 06:09

Источник

0

Данный «размер пикселя» будет казаться больше (при меньших разрешениях) и меньше (при более высоких разрешениях). Например, изображение размером 100x100 пикселей может выглядеть ОГРОМНЫМ при 800x600 ... и ОДНО ЖЕ изображение может выглядеть крошечным при 1280x1024. Я подозреваю, что это проблема, которую вы испытываете.
FoggyDay 04 май 2014, в 03:43

Теги:

html

css

1 ответ

Ещё вопросы

Данный «размер пикселя» будет казаться больше (при меньших разрешениях) и меньше (при более высоких разрешениях). Например, изображение размером 100x100 пикселей может выглядеть ОГРОМНЫМ при 800x600 ... и ОДНО ЖЕ изображение может выглядеть крошечным при 1280x1024. Я подозреваю, что это проблема, которую вы испытываете.

The One and Only ChemistryBlob · Answer 1 · 2014-05-04T02-30-00.000Z

Я считаю, что проблема с навигационной панелью обусловлена различными разрешениями экрана на разных дисплеях. Поскольку минимальная ширина для большинства пользователей составляет> = 1024 px, попробуйте установить ширину 1024 px для вашего сайта <body> или обертку div вокруг всего, что находится в теле сайта.

Кроме того, я помню, что у IE есть изображения, граничащие по умолчанию... попробуйте добавить к вашему css:

img {
    border:0;
    outline:none;
}

Как я мог это исправить, чтобы это не имело значения по разрешению экрана? Спасибо [PS изображения исправлены!]
Как я уже упоминал в своем ответе, вы могли бы сделать одну вещь - разместить весь визуализированный контент вашего сайта (то есть вещи, которые пользователь видит на вашем сайте) в div шириной 1024px ... обычно такой div помещается сразу после открывающий тег тела и закрываемый непосредственно перед закрывающим тегом тела