PSD to CSS Resim Konumu Değiştirme

bilalbakirci · 19 Mart 2015

PSD to CSS öğrendim. Herşey tamam söyle bir sorunum var: 5 resimi ortaya nasıl koyucam ? Benim tasarımım:

Resim:

Ama gerçek tasarım böyle:

Html Ve Css Kodlarım.

Style.css kodlarım

PHP:

*{
  margin:0;
  padding:0;
}
body {
    background:url(../images/bg.png)
}
#logo, #menu, #footer-sol {
       width:825px;
  margin:0 auto;
}
#logo {
    padding:50px 0;
    position:relative;
}
p {
flotat:right;
}
#menu {
menu {overflow:hidden;}
menu {float:left; margin-right:20px;}
img {border:2px solid #000;}
.clear {clear: both}
}
#footer-sol
img {
float:left;
border:100px
}
#footer-sol p {
margin-right: auto;
margin-left: auto;
}
#menu img {
    height: auto;
    width: auto;
    margin: 1px;
margin-right: auto;
margin-left: auto;
padding:2px;
border:1px;
    margin:0 4px 4px 0;
}
#footer-sol {
 
    margin: 1px;
margin-right: auto;
margin-left: auto;
padding:10px;
border:10px;
}
#menu iletisim {
width:100px;height:100px;background:green;float:left;margin-left:5px;
}

HTML kodlarım:

HTML:

<html>
<head>
<meta http-equiv="Content - Type" content="text/html"; charset=utf-8">
<title> Bilal Bakırcı </title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="logo">
   <a href="index.html"><img src="images/logo.png" alt="logo" />
</div>
<div id="menu">
  <a href="index.html"><img src="images/anasayfa.png" alt="logo" />
  <a href="index.html"><img src="images/hakkimda.png" alt="logo" />
  <a href="index.html"><img src="images/kisiselbilgi.png" alt="logo" />
  <a href="index.html"><img src="images/resimler.png" alt="logo" />
  <div class="iletisim"><a href="index.html" clas="iletisim"><img src="images/iletisim.png" alt="logo" />
   <a href="index.html"><img src="images/projeler.png" alt="logo" />
   <a href="index.html"><img src="images/blog.png" alt="logo" />
   <a href="index.html"><img src="images/mail.png" alt="logo" />
</div>
<div id="footer-sol">
<a href="index.html"><img src="images/f.png" alt="logo" />
<a href="index.html"><img src="images/t.png" alt="logo" />
<a href="index.html"><img src="images/g.png" alt="logo" />
<div id="footer-sag">
<p> Bilal Bakırcı Candır Can </p>
</div>
</div>
</body>
</html>

Şimdiden yardımlarınız için teşekkürler.

PSD to CSS Resim Konumu Değiştirme

bilalbakirci

Hectopat