gaRRyk
http://xaa.su/7RY
Всем доброго времени суток. Недавно начал знакомиться с html, css. Посмотрите на код подскажите ошибки, в принципе всё получается, в menu1 и остальных не выравнивает текст по вертикали, у меня есть подозрения, что я с отступами и флоатами, что-то не так сделал.
index.html
<html>
<head>
<title> zadanie 2</title>
<link href="css/index.css" rel="stylesheet" />
</head>
<body id="telo">
<div id="main">
<div id="header">
</div>
<div id="body">
</div>
<div id="menu1">
412
</div>
<div id="menu2">
cvbvb
</div>
<div id="menu3">
</div>
<div id="menu4">
</div>
<div id="menu5">
</div>
<div style="clear:both"></div>
<div id="foot">
</div>
</div>
</body>
</html>
index.css
@font-face {
font-family: 'Drakkar';
src: url('/font/Drakkar.woff') format('woff');
font-weight:normal;
font-style:normal;
}
#telo {
background-image:url(/img/bckgfond.jpg);
background-size: 100% 100%;
}
#main {
width:1000px;
height:160%;
margin:40px auto 0 auto;
}
#header {
border: 1px solid;
border-color:#302d2d;
width:100%;
height:20%;
background-color:#dbfcde;
margin-bottom:5px;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}
#body {
border: 1px solid;
border-color:#302d2d;
width:792px;
height:52.61%;
background-color:#dbfcde;
float:right;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}
#menu1 {
border: 1px solid;
border-color:#302d2d;
width:200px;
height:10%;
background-color:#dbfcde;
background-image:url(/img/menu.png);
float:left;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
font-family: Drakkar;
text-align: center;
}
#menu2 {
border: 1px solid;
border-color:#302d2d;
width:200px;
height:10%;
background-color:#dbfcde;
background-image:url(/img/menu.png);
float:left;
margin-top:5px;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
font-family: Drakkar;
}
#menu3 {
border: 1px solid;
border-color:#302d2d;
width:200px;
height:10%;
background-color:#dbfcde;
background-image:url(/img/menu.png);
float:left;
margin-top:5px;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
font-family: Drakkar;
}
#menu4 {
border: 1px solid;
border-color:#302d2d;
width:200px;
height:10%;
background-color:#dbfcde;
background-image:url(/img/menu.png);
float:left;
margin-top:5px;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
font-family: Drakkar;
}
#menu5 {
border: 1px solid;
border-color:#302d2d;
width:200px;
height:10%;
background-color:#dbfcde;
background-image:url(/img/menu.png);
float:left;
margin-top:5px;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
font-family: Drakkar;
}
#foot {
border: 1px solid;
border-color:#302d2d;
width:100%;
height:15%;
background-color:#dbfcde;
margin-top:5px;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}
index.html
<html>
<head>
<title> zadanie 2</title>
<link href="css/index.css" rel="stylesheet" />
</head>
<body id="telo">
<div id="main">
<div id="header">
</div>
<div id="body">
</div>
<div id="menu1">
412
</div>
<div id="menu2">
cvbvb
</div>
<div id="menu3">
</div>
<div id="menu4">
</div>
<div id="menu5">
</div>
<div style="clear:both"></div>
<div id="foot">
</div>
</div>
</body>
</html>
index.css
@font-face {
font-family: 'Drakkar';
src: url('/font/Drakkar.woff') format('woff');
font-weight:normal;
font-style:normal;
}
#telo {
background-image:url(/img/bckgfond.jpg);
background-size: 100% 100%;
}
#main {
width:1000px;
height:160%;
margin:40px auto 0 auto;
}
#header {
border: 1px solid;
border-color:#302d2d;
width:100%;
height:20%;
background-color:#dbfcde;
margin-bottom:5px;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}
#body {
border: 1px solid;
border-color:#302d2d;
width:792px;
height:52.61%;
background-color:#dbfcde;
float:right;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}
#menu1 {
border: 1px solid;
border-color:#302d2d;
width:200px;
height:10%;
background-color:#dbfcde;
background-image:url(/img/menu.png);
float:left;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
font-family: Drakkar;
text-align: center;
}
#menu2 {
border: 1px solid;
border-color:#302d2d;
width:200px;
height:10%;
background-color:#dbfcde;
background-image:url(/img/menu.png);
float:left;
margin-top:5px;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
font-family: Drakkar;
}
#menu3 {
border: 1px solid;
border-color:#302d2d;
width:200px;
height:10%;
background-color:#dbfcde;
background-image:url(/img/menu.png);
float:left;
margin-top:5px;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
font-family: Drakkar;
}
#menu4 {
border: 1px solid;
border-color:#302d2d;
width:200px;
height:10%;
background-color:#dbfcde;
background-image:url(/img/menu.png);
float:left;
margin-top:5px;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
font-family: Drakkar;
}
#menu5 {
border: 1px solid;
border-color:#302d2d;
width:200px;
height:10%;
background-color:#dbfcde;
background-image:url(/img/menu.png);
float:left;
margin-top:5px;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
font-family: Drakkar;
}
#foot {
border: 1px solid;
border-color:#302d2d;
width:100%;
height:15%;
background-color:#dbfcde;
margin-top:5px;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}