/* CSS Document */
body {
/* background-color:#81C9AC; */
background-image:url(http://store6.up-00.com/2017-02/148773426400995.jpg);
background-repeat: no-repeat;
background-size:cover;
width:100%;
height:100%;
}
.theVeryTop5{
height: 15%;
width: 68.5%;
background-color:white;
opacity: 0.15;
left: 31.5%;
top: 4%;
}
#cands{
height: 5%;
width: 10%;
background-color:58B48F;
border: 2px solid #E8E8E8;
border-radius: 30%;
font-family:BankGothic Lt BT;
color:#FFFFFF;
font-size:2vw;
text-align: center;
}
.service{
left: 80%;
top: 5.5%;
}
.contact{
left: 80%;
top: 12.5%;
}
.testimonials{
height: 5.5%;
width: 18%;
background-color:#161412;
opacity: 0.95;
font-family:BankGothic Lt BT;
font-size:2vw;
text-align: center;
color:#FFFFFF;
left: 31.5%;
top: 19%;
}
.about{
font-family:BankGothic Lt BT;
color:white;
font-size:3vw;
left: 9.5%;
top: 40%;
text-align: justify;
}
.about2{
height: 40%;
width: 25%;
font-family:Century Gothic, sans-serif;
color:white;
font-size:1.2vw;
text-align: center;
left: 3%;
top: 50%;
}
div {
/*border-radius: 5px;*/
/*border: 2px solid black;*/
position: absolute;
}
.header {
height: 100%;
width: 31.50%;
background-color:#161412;
opacity: 0.95;
border: 1px solid #black;
left: 0%;
top: 0%;
}
.piano {
height:10%;
width:35%;
left: 50%;
top: 70%;
position: absolute;
}
.we{
height:35%;
width:16%;
left: 7%;
top: 5%;
position: absolute;
border-radius: 50%;
}
#social{
height: 5.5%;
width: 3%;
border-radius: 50%;
position: absolute;
}
.fbcircular{
left: 92.25%;
top: 24%;
}
.pcircular{
left: 92.25%;
top: 31%;
}
.ycircular{
left: 92.25%;
top: 38%;
}
label {
font-family: BankGothic Lt BT;
}
.bla{
font-family:Edwardian Script ITC;
color:#FFFFFF;
font-size:8vw;
text-align: center;
left: 50%;
top: 45%;
}
.Service{
font-family:DejaVu Sans Light;
color:#FFFFFF;
font-size:2vw;
text-align: center;
left: 70%;
top: 61%;
}
.call{
font-family:BankGothic Lt BT;
color:#FFFFFF;
font-size:2vw;
text-align: center;
left: 58%;
top: 85%;
}<!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">
<!-- https://www.youtube.com/watch?v=0kX1wB8qil4 javascript-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" rel="stylesheet" href="pianostyle.css"/>
<title>Untitled Document</title>
<style type="text/css">
<!--
.style2 {color: #E08249}
-->
</style>
</head>
<body>
<div class="header"\> </div>
<img src="http://store6.up-00.com/2017-02/148773426418566.png" class="we" />
<div class="about"> About </div>
<div class="about2"> Hello my name is <span class="style2">Bla Bla</span>. I'm a blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla . <br/>
</br>
Distinguished blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla </div>
<div class="theVeryTop5"></div>
<div id="cands" class="service"> services </div>
<div id="cands" class="contact"> contact </div>
<div class="testimonials"> "testimonials"</div>
<img id="social" class="fbcircular" src="http://store6.up-00.com/2017-02/148773426378573.jpg" alt="facebook" />
<img id="social" class="pcircular" src="http://store6.up-00.com/2017-02/14877342636672.png" />
<img id="social" class="ycircular"src="http://store6.up-00.com/2017-02/148773426391924.png" alt="yelp" />
<img class="piano" src="http://store6.up-00.com/2017-02/1487734263541.jpg" alt="piano image" />
<div class="bla">
Blaaa Blaaa
</div>
<div class="Service">
whatever service
</div>
<div class="call"> 000-0000-0000 </div>
</body>
</html>everything is in the place I want
Hello, this is my first post in here.
I keep using: position:absolute; and percentages. "I don't know how else I can control an element position and size"
it works for me and I can put lots of things in the place I want. but I wonder, if its the right way?
========================== also ===============================
can I use percentages with font size? so it stays fixed and in the same place when the screen size changes.
