0
Когда я изменяю размер страницы, элементы в моей навигационной панели перекрываются и искажаются. Я хочу либо сохранить макет, как он, и оставаться неподвижным, либо изменять размер, сохраняя все в порядке, не перекрывая друг друга. Часть этого, что я знаю, будет включать в себя изменение строки поиска при изменении размера экрана, но я не знаю, как это сделать. Пожалуйста помоги! лол, спасибо тебе!Как я могу получить, чтобы макет навигации оставался неизменным и не перекрывался при изменении размера экрана?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website</title>
<style>
html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders **/
background:#fff; /*color background - only works in IE */
/* hide overflow:hidden from IE5/Mac */
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%;
max-height:100%;
overflow-y:scroll;
padding:0;
margin:0;
border:0;
font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
font-weight:bold;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
padding-left:100px;
position:relative;
z-index:3;
word-wrap:break-word;
top:45px;
}
#head {
position:absolute;
margin:0;
top:0;
display:block;
width:100%;
height:40px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent;
}
#settings {
left:75%;
position:fixed;
width:40px;
height:40px;
color:red;
}
#home {
left:85%;
position:fixed;
width:40px;
height:40px;
color:blue;
}
#logo a {
background: url(logo.gif) no-repeat scroll 20px 9px;
color: #ffffff;
display: block;
height: 35px;
margin-right: 5px;
outline: medium none;
text-indent: -9999px;
width: 140px;
float:left;
}
.searchbox{
-moz-border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 1px 0 #444444;
background: none repeat scroll 0 0 #666666;
border: 1px solid black;
color: #CCCCCC;
font: 13px Arial,sans-serif;
padding: 6px 25px 4px 6px;
width: 215px;
border-radius:15px;
float:right;
position:relative;
top:-33px;
left:-275px;
}
.searchbox:focus {
background: none repeat scroll 0 0 #eeeeee;
border: 1px solid #999999;
}
#news a { margin:30px; padding-left:25%; }
.nav { display:inline;}
.nav a { padding-left:20px; color:#BABABA; text-decoration:none; font-size:24px;}
.nav a:hover { color:#FFFFFF; }
</style>
</head>
<body>
<div id="head">
<div id="logo">
<a href="#"></a>
</div>
<div class="nav" id="news"><a href=#">News</a>
</div>
<div class="nav" id="settings"><a href="#" title="Settings"><img src="redbox.gif" /> </a>
</div>
<div class="nav" id="home"><a href="#" title="Home"><img src="bluebox.gif" /></a>
</div>
<form>
<input class="searchbox" type="text"/>
</form>
</div>
</body>
</html>
http://css-tricks.com/video-screencasts/100-lets-write-semantic-markup/ –