Menu
Hello folks
I tried to design this page for myself:
[B][URL=”http://www.8pic.ir/images/rtnr610nod5lv6uqntqb.jpg”]FIRST PICTURE
And I did, but the problem is my page is kinda stretching. How can I fix it? It looks like this:
[B][URL=”http://www.8pic.ir/images/3lcx1o6txm4xrglbgpro.jpg”]SECOND PICTURE
But I want it to be just like the first picture. I tried fixing it with testing different “width” and adding “div style”, but it didn’t help.
here’s my code, first HTML and second CSS:
[code]
<!DOCTYPE html>
<html lang=”ar” dir=”rtl”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title></title>
<link rel=”stylesheet” href=”css/page.css” media=”screen”>
</head>
<body>
<div id=”container”>
<div id=”header”>
<div id=”header-content-top”>
TEST
</div><!– end #header-content-top –>
<div id=”header-content-bottom”>
<ul id=”social”>
<li><a href=”http://www.gmail.com”>
<span style=”position: absolute; right: 7px; top: 24px; width: 46px; height: 46px”></span></a></li>
<li><a href=”http://www.yahoo.com”>
<span id=”yah” style=”position: absolute; right: 3px; top: 25px; width: 46px; height: 46px”></span></a></li>
<li><a href=”http://www.google.com”>
<span id=”goo” style=”position: absolute; right: -3px; top: 25px; width: 46px; height: 46px”></span></a></li>
<li><a href=”http://www.rss.com”>
<span id=”rss” style=”position: absolute; right: -8px; top: 25px; width: 46px; height: 46px”></span></a></li>
</ul>
</div><!– end #header-content-bottom –>
</div><!– end #header –>
<div id=”content”>
<p>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
</p>
</div><!– end #content –>
<ul id=”navigation”>
<li><a href=””>TEST</a></li>
<li><a href=””>TEST</a></li>
<li><a href=””>TEST</a></li>
<li><a href=””>TEST</a></li>
</ul><!– end #navigation –>
</div><!– end #container –>
</body>
</html>
[code]
html,body {
height:100%;
margin:0;
direction:rtl;
font: 16px Tahoma, sans-serif;
}
#container {
min-height:100%;
background-color:#fcdfb3;
background-image:url(../images/container-bg.png);
background-size:25% 1px;
background-position:100% 0;
background-repeat:repeat-y;
overflow:hidden;
}
#header {
height:213px;
padding:0 1.5%;
background-color:#fff;
background-image:url(../images/header-bg.png);
background-repeat:repeat-x;
font-size:200%;
color:#d68533;
}
#header-content-top {
line-height:89px;
margin-bottom:48px;
}
#header-content-bottom {
height:46px;
padding:15px 0;
}
#social {
padding:0;
margin:0;
list-style-type:none;
}
#social li {
float:left;
margin:0 2px;
}
#social a,#social span {
position:relative;
display:block;
width:46px;
height:46px;
font-size:40%;
}
#social span {
position:absolute;
top:0;
left:0;
background-image:url(../images/social-bg.png);
}
#social a:hover {
opacity:0.6;
}
#yah {
background-position:-46px 0;
}
#goo {
background-position:0 -46px;
}
#rss {
background-position:-46px -46px;
}
#content {
float:left;
width:47%;
padding:1.5%;
margin:20px 12.5%;
border-radius:15px;
box-shadow:inset 0 0 2px #301409;
background-color:#ecbd75;
font-size:100%;
color:#41251a;
}
#content h1 {
text-align:center;
}
#navigation {
float:right;
width:25%;
padding:0;
margin:0;
list-style-type:none;
}
#navigation li {
border-bottom:1px solid #d68533;
}
#navigation a {
display:block;
line-height:42px;
background-color:#41251a;
font-size:100%;
color:#d68533;
text-decoration:none;
text-align:center;
}
#navigation a:hover {
background-color:#d68533;
color:#41251a;
}
Thanks