Počeo sam da pravim svoj portfolio, i imam probleme, sve je bilo dobro dok nisam krenuo da postavljam pozdravnu poruku "Welcome to my portfolio", tada se deo "aside" prvobitno se povukao skroz desno, pa sam promenio na right:0px i ispravio se, ali je top deo pobegao ka dole, bukvalno je ceo aside deo potonuo, pokušao sam da podignem preko top:0px; ali ništa
Ovo je prvi sajt gde sam radim dizajn, uglavnom sam programirao php, c#.net(asp).
slika
html kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<header>
<img src="images/logo.png" width="250" height="100" style="margin-top:3px" />
<nav>
<a href="index.php">Home</a> <a href="about.php">About</a> <a href="contact.php">Contact</a>
</nav>
</header>
<section>
<div id="welcome"><h1>Welcome to my portfolio</h1></div>
<aside>
</aside>
</section>
<footer>
<div id="copyright">
<footer>
<div id="copyright2"> Copyright© 2012 Web developer and designer: Nezic Srdjan. All rights reserved.
</div>
<div id="soc_net"> <img src="images/facebooklogo.png" width="35" height="35" /> <img src="images/twitterlogo.png" width="35" height="35" /> <img src="images/google-plus.png" width="38" height="40" /><img src="images/LinkedInlogo.png" width="35" height="35" style="margin-right:5px;" /></div>
</footer>
</div>
</footer>
</body>
</html>
CSS kod
@charset "utf-8";
/* CSS Document */
html, body{
max-width:1000px;
max-height:548px;
height:549px;
width:100%;
height:100%;
vertical-align:central;
}
header{
width: 100%;
height:70px;
background-color:#575a6b;
}
nav{
float:right;
font-family:"Times New Roman", Times, serif;
font-size:22px;
margin-right:0px;
margin-top:40px;
border:1px solid #fff;
border-bottom:none;
border-right:none;
padding-top:5px;
padding-left:10px;
padding-right:10px;
padding-bottom:0px;
color:#FFF;
}
a:link{
color:#FFF;
}
a:visited{
color:#FFF;
}
a:hover{
color:#0F0;
}
section{
width:100%;
height:530px;
border-left:1px solid #575a6b;
background-color:#F3F3F3;
}
#welcome{
width:440px;
height:50px;
text-align:center;
border:3px solid #FFF;
border-radius:5px;
position:relative;
top:20px;
left:150px;
background-color:#D9FFD9;
color:#0F0;
}
aside{
width:254px;
height:100%;
border:1px solid #575a6b;
border-bottom:none;
border-top:none;
position:relative;
top:0px;
right:0px;
float:right;
background-color:#EBEBEB;
overflow:scroll;
}
footer{
width:100%;
height:30px;
position:relative;
bottom:0px;
background-color:#575a6b;
}
#copyright{
color:#CCC;
padding-top:16px;
}
#soc_net{
float:right;
position:relative;
bottom:33px;
}
|