Моя веб-страница не будет сохранять свою ширину при сужении

Question

Моя веб-страница не будет сохранять свою ширину при сужении

0

и спасибо за проверку или помощь в решении этой проблемы! В настоящее время я пытаюсь создать простую веб-страницу на неделе http://www.code.org Computer Science! Я пытаюсь создать фон на основе изображения для моей панели навигации в верхней части страницы.

Это то, что у меня есть до сих пор:

HTML5 CODE

    <!DOCTYPE html>
    <html>
    <head>
<title>Welcome</title>
<link rel="stylesheet" type="css/text" href="CSstylesheet.css"
    </head>
    <body>
<div>
    <img src="binarybanner.png" id="bannerimg" />
</div>
<div class="h3setup">
    <a href=""><h3 id="GI">General Information</h3></a>
    <a href=""><h3 id="BC">Benefits to Coding</h3></a>
    <a href=""><h3 id="CT">Coding Types</h3></a>
</div>
<div>
    <img src="siteMapButton.png" id="siteMapButton"/>
</div>
    </body>
    </html>

CSS3 КОД

    /* CSS STYLESHEET */

    h3{
display: inline;
    }
    div.h3setup{
left: 195px;
top: 145px;
position: absolute;
display: inline;
width: 100%;
    }
    div.h3setup a{
text-decoration: none;
    }
    #GI{
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
    }
    #GI:hover{
text-shadow: 3px 3px 3px #99FF66;
    }
    #BC{
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
    }
    #BC:hover{
text-shadow: 3px 3px 3px #99FF66;
    }
    #CT{
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
    }
    #CT:hover{
text-shadow: 3px 3px 3px #99FF66;
    }
    #bannerimg{
height: 200px;
width: 100%;
display: inline;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
    }
    #siteMapButton{
height: 35px;
width: 35px;
float: right;
margin-right: 1px;
    }

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

Zulfe 27 нояб. 2013, в 02:11

Источник

Теги:

html

css

html5

width

stretch

1 ответ

Ещё вопросы

Josan Iracheta · Accepted Answer · 2013-11-27T00-32-00.000Z

Вам нужна оболочка div которая содержит все элементы вашей страницы и добавляет min-width. Это предотвратит слишком малую страницу, когда окно будет сведено к минимуму.

<div id="wrap">
<div class="h3setup">
<ul>
    <li><a href=""><h3 id="GI">General Information</h3></a></li>
    <li><a href=""><h3 id="BC">Benefits to Coding</h3></a></li>
    <li> <a href=""><h3 id="CT">Coding Types</h3></a></li>
</div>
<div>
<img src="siteMapButton.png" id="siteMapButton"/>
</div>
</div<!--end wrap-->

#wrap{
width:100%;
min-width:900px;
margin:0 auto;
}

Что касается остальной части вашей страницы, вместо того, чтобы иметь img элемент в качестве фонового изображения, вы должны использовать background:url('img.png'); чтобы изображение было фоном в этом конкретном элементе.

Например:

  .h3setup{
background:url('img.png') no-repeat;
height:200px;
width: 100%;
}

СМОТРИТЕ ЗДЕСЬ