Jump to content
php.lv forumi

PROBLĒMA/CSS/HTML


L4URO

Recommended Posts

Čau. 

Bildē var redzēt,kad uzeju uz izvelnes linkiem backgrounda krasa nomainās melna,bet kāpēc ne līdz pašai augšai un līdz lejai?

HTML5 KODS

 

 

<!doctype html>
<html lang="en">
<head>
     <meta charset="utf-8" />
     <title>Lauris website</title>  
<link rel="stylesheet" href="SAITS.css" />
</head>
<body>
   <div id="container">
     <h1>Lauris web</h1>
   <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
 
</ul>
<section>
<img id="pic" src="max.jpg">
<img id="hand" src="hand.jpg">
<h3>My name is Lauris Skraucis.I will graduate art school this year.
I got really good results in art Olympiads. I enjoy programming and 
making web sites.One thing that i really love is football.That is my favourite sport.
</h3>
   </section>
  
   </div>
</body>
</html>
 
CSS 3 KODS
body{
background-image:url('b5.png');
 
}
 
#container{
width:960px;
margin:0px auto;
height:905px;
}
h1{
font:4em SF Distant Galaxy;
text-shadow:3px 3px 5px black;
text-align:center;
padding:15px;
}
.menu{
font:1em SF Distant Galaxy;
list-style:none;
padding:0;
margin:0;
background:#fff;
border-top-right-radius:10px;
border-top-left-radius:10px;
border-bottom:3px solid black;
border-top:1px solid #ddd;
text-align:center;
}
.menu li{
display:inline-block;
padding:5px 15px 4px 15px;
zoom:1;
*display:inline;
}
.menu li a{
text-decoration:none;
color:black;
line-height:1.6em;
font:1.6em SF Distant Galaxy;
 
}
.menu li a:hover{
color:#B2B2B2;
background:black;
}
section{
 
border:2px solid black;
background:white;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
}
h3{
font:1.2em SF Distant Galaxy;
color:white;
text-align:center;
background:black;
padding:25px;
position:absolute;
bottom:203px;
width:908px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
opacity:0.6;
}
#pic{
width:670px;
height:510px;
display:block;
margin-right:auto;
margin-left:auto;
position:relative;
}
 
#hand{
position:absolute;
top:393px;
left:1253px;
-webkit-transform:rotate(50deg);
width:9%;
border-top-right-radius:50px;
border-bottom-left-radius:130px;
}
 
 
 
 
Paldies par uzmanību,tagad pasmaidat par manu bildi xD
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...