This how the page look liike in regular computer:
https://i.imagesup.co/images2/83d44ebd26a8d65586a8dca77544d6ae04f47241.png
And this is the problem in mobile version:
When I try to set the div witdh to 100 precent or 100vw or position this elment , it's like it doesn't fit to the real beginning (right side) and the element think the beginning is somewhere in the middle.
I talk about the second white box ("AboutWhite").
You can see here how it look like:
https://i.imagesup.co/images2/af732e6868a68765a8abafdadce0ab5049506e4a.png
Why it's different from the the first white box ?
Thank you very much for help !!!
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HomePage</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="hover.css">
<link rel="stylesheet" href="WhiteBox.css">
<link rel="stylesheet" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
</head>
<body>
<header>
<img class="img-center" id="img-main" src="http://thestarsetsociety.org/wp-content/uploads/2019/09/assasn-14li-banner-800x300.jpg" alt="E=MC^2"/>
<img class="img-center" id="img-below" src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frainerzitelmann%2Ffiles%2F2019%2F06%2FE0MG76-e1560965378507-1200x1270.jpg" alt="Albert"/>
<h1>אלברט איינשטיין</h1>
<h2>פיזיקאי תיאורטי</h2>
<div id="DivIcons">
<div id="flex-mobile1">
<img id="MobileHover" class="icons" src="https://cdn2.iconfinder.com/data/icons/thin-line-color-1/21/13-512.png" alt="Moblie Icon">
<img class="icons" src="https://img.icons8.com/ultraviolet/452/whatsapp.png" alt="What'sapp Icon">
<img class="icons" src="https://www.trzcacak.rs/myfile/full/311-3111799_social-media-computer-icons-logo-blue-area-png.png" alt="Instagram Icon">
</div>
<div id="flex-mobile2">
<img class="icons" src="https://cdn2.iconfinder.com/data/icons/basic-thin-line-color/21/20-512.png" alt="Email Icon">
<img class="icons" src="https://thebrightwork.com/wp-content/uploads/2014/04/facebook-icon-blue.png" alt="Facebook Icon">
<img class="icons" src="https://cdn4.iconfinder.com/data/icons/social-media-logos-6/512/10-waze-512.png" alt="Waze Icon">
</div>
</div>
<div id="FirstWhite"></div> <!--Only for Design - White Box-->
</header>
<article>
<h3>
קצת עלי
</h3>
<b>
<p>
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק.
</p>
</b>
<p>
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק.
</p>
<p>
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק.
</p>
</article>
<div id="AboutWhite"></div> <!--Only for Design - White Box-->
</body>
</html>
Css style:
body {
margin: auto 0;
direction: rtl;
background-color:#F0F0F0;
}
.img-center {
display: block;
margin: 0 auto;
}
#img-below {
border: 5px solid white;
border-radius: 100%;
height: 8%;
width: 8%;
position: relative;
bottom: 80px;
}
h1 {
color:#0099ff;
text-align: center;
position: relative;
bottom: 120px;
font-size: 50px;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
h2 {
color: gray;
font-size: 30px;
text-align: center;
font-size: 30px;
position: relative;
bottom: 157px;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
.icons {
height: 50px;
width: 50px;
border: #0099ff 5px solid;
padding: 5px;
border-radius: 100%;;
margin-right: 15px;
}
#DivIcons {
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
bottom: 170px;
}
p {
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 15px;
}
article {
width: 160px;
margin-bottom: 5px;
position: relative;
bottom: 455px;
right: 397px;
}
h3 {
font-family: 'M PLUS Rounded 1c', sans-serif;
}
Css white boxes:
#FirstWhite{
width: 750px;
height: 320px;
background-color: white;
margin: 0 auto;
position: relative;
bottom: 460px;
z-index: -1;
margin-bottom: 5px;
}
#AboutWhite {
width: 200px;
height: 650px;
background-color: white;
position: relative;
bottom: 1113px;
right: 385px;
z-index: -1;
}
Mobile css:
#media screen and (max-width:768px)
{
#img-main {
width: 100vw;
height: 200px;
}
#img-below {
width: 30vw;
height: 30vh;
margin-bottom: 10px;
}
h1, h2 {
font-size: 7vw;
position: relative;
bottom: 100px;
margin: 0 auto;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
#flex-mobile1 {
display: flex;
flex-direction: row;
position: relative;
top: 70px;
right: 120px;
margin-top: 10px;
}
#flex-mobile2 {
display: flex;
flex-direction: row;
position: relative;
top: 150px;
left: 133px;
margin-top: 10px;
}
#FirstWhite{
width: 100vw;
height: 500px;
background-color: white;
display: block;
margin: 0 auto;
position: relative;
bottom: 460px;
z-index: -1;
margin-bottom: 5px;
}
#AboutWhite {
width: 100vw;
height: 500px;
background-color: white;
position: relative;
left: 1000px;
}
}
Related
I am working on my laptop in VSCode, after I make my site, I go to stylizing him and after I make this after my pleasure, when I minimize Google, it doesn't keep his resolution.
This is full screen on google chrome.
And this is google chrome minimized.
What could I do for websites keep his style as I put him in full screen?
HTML:
<!--HTML SOURCE--!>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title> </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
</head>
<header>
<div class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Proiecte</li>
<li>Staff</li>
<li>Contact</li>
</ul>
<img class="background" src="casey-horner-O0R5XZfKUGQ-unsplash.jpg">
</div>
</header>
<body>
<h1 class="titlu"> Titlu </h1>
<div>
<img class="h" src="Other-html-5-icon.png">
<img class="c" src="CSS.png">
</div>
<div class="cards">
<img class="x" src="pngegg.png">
<img class="y" src="pngegg.png">
<img class="z" src="pngegg.png">
</div>
<div class="faicon">
<i class="fa fa-line-chart" aria-hidden="true"></i>
</div>
<div class="textfaicon">
<h1> Economisire </h1>
<p><b>Economisesti timp si mai ales,<br>
economisesti bani! Cat astepti sa<br>
cauti o echipa care sa iti poata <br>
crea site-ul dorit, noi iti suntem<br>
aproape. Cerem foarte putin pentru<br>
serviciile pe care le oferim!</b>
</p>
</div>
</body>
</html>
CSS:
/* CSS */
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
body{
margin: 0px;
padding: 0px;
font-family: 'Roboto', sans-serif;
}
* {
box-sizing:
border-box;
}
.background {
position: absolute;
width: 100%;
height: 120%;
padding-left: 0%;
padding-bottom: 10%;
-webkit-filter: brightness(50%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.titlu{
position: relative;
color: white;
padding-left: 45%;
padding-top: 15%;
font-size: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(31, 37, 77);
opacity: 100%;
letter-spacing: 2px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: block;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #0c3a55;
}
.h{
position: relative;
height: 300px;
width: 300px;
bottom: -270px;
margin-bottom: 10%;
padding: 0%;
left: 8%;
}
.c{
position: relative;
height: 300px;
width: 220px;
bottom: -100px;
margin-bottom: 0%;
padding: 0%;
left: 50%;
}
.x{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.y{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.z{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.cards{
position: relative;
bottom: -150px;
left: 13%;
padding: 0%;
margin: 0%;
width: 200;
}
.faicon{
position: relative;
text-align: center;
right: 2%;
bottom: 290px;
font-size: 40px;
}
.textfaicon{
text-align: center;
position:relative;
color:#0c3a55;
font-size: 10px;
bottom: 280px;
right: 2%;
letter-spacing: 2px;
}
I suggest you to try bootstrap, it will make your page responsive to all types of devices and you will write less CSS. Good luck.
I'm trying to make my first portfolio, but I encountered this problem that I can't manage to solve. I'm still trying to make all the elements resize correctly, but the navigation bar is my priority. Indeed, whenever I reduce the width of the page, the navigation bar goes up, out of the screen. Hopefully someone knows how to solve this, thanks in advance for your help . This is the code.
#import url(//db.onlinewebfonts.com/c/4aa3e37e571255737e5e6d4e9d9770a5?family=Rockwell);
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
*{
margin: 0;
padding: 0;
}
.wrapper{
margin-left: auto;
margin-top: auto;
width: 100%;
}
body{
background-color: #222326;
}
.nav-bar{
margin-top: 100px;
transform: translateY(-870px);
background-color: #0C0C0D;
width: 380px;
padding: 18px;
border-radius: 50px;
margin-left: 33%;
}
.nav-bar>a{
text-decoration: none;
color: #3A3B40;
padding-left: 4%;
position: relative;
}
.nav-bar>a>h4{
display:inline;
font-family: 'Raleway', sans-serif;
}
.contactme-link{
border-right: 1px solid #88898C;
margin-left: 1%;
margin-right: 2%;
padding-right: 3%;
}
.skills-link{
border-right: 1px solid #88898C;
padding-right: 3%;
}
.myworks-link{
margin-left: 2%;
}
.bg{
background: url('background.jpg');
position: relative;
padding-right: 100%;
padding-bottom: 66.6%;
background-repeat: no-repeat;
background-size: contain;
z-index: -2;
border-radius: 0 0 70px 70px;
}
.layer{
background-color: rgba(34,35,38,.6);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 0 0 70px 70px;
}
.me{
margin-left: 25%;
margin-top: 20px;
transform: translateY(-870px);
}
.face{
background: url('face-bw.jpg');
background-repeat: no-repeat;
background-size: contain;
height: 590px;
border-radius: 60px;
margin-left: 75px;
width: 475px;
}
.black-box{
background-color: #0C0C0D;
width: 585px;
text-align: center;
padding: 25px 20px 25px 20px;
border-radius: 50px;
margin-top: -115px;
}
.black-box>h1{
color: #D9D9D9;
font-family: 'Rockwell', sans-serif;
font-size: 68px;
}
.black-box>h4{
font-family: 'Raleway', sans-serif;
font-size: 20px;
color: #3A3B40;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Andrea Testini Portfolio</title>
</head>
<body>
<div class="wrapper">
<div class="presentation">
<div class="bg">
<div class="layer"></div>
</div>
<div class="nav-bar">
<a href="#contact-me" class="contactme-link">
<h4>CONTACT ME</h4>
</a>
<a href="#skills" class="skills-link">
<h4>SKILLS</h4>
</a>
<a href="#my-works" class="myworks-link">
<h4>MY WORKS</h4>
</a>
</div>
<div class="me">
<div class="face"></div>
<div class="black-box">
<h1>Andrea Testini</h1>
<h4>Programmer and Web Developer</h4>
</div>
</div>
</div>
</div>
</body>
</html>
<!---->
Change width: 380px; to max-width: 380px; in .nav-bar and you will be fine
I am trying to make a div a clickable link and was told it is better to put the link inside the div rather than around the div. I noticed that whenever I mouseover one of the divs the webpage suddenly gains an extra 500 or so pixels on the right.
The page isn't supposed to be scrollable, and you can only scroll by holding the middle mouse button and dragging. This happens in Chrome 41.0.2272.101 and Opera 28, but NOT in Firefox 36.0.4.
Here is my code.
HTML5:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>John Doe</title>
<link type='text/css' rel='stylesheet' href='stylesheet.css'/>
<script type='text/javascript' src='jquery-1.11.2.js'></script>
<script type='text/javascript' src='scripts.js'></script>
<meta charset='utf-8'>
<meta name='description' content='Portfolio website displaying projects by John Doe.'>
<meta name='keywords' content='Portfolio, John Doe, Projects, Software'>
<meta name='author' content='John Doe'>
</head>
<body>
<!-- Top welcome bar. Holds name and description of profession(s). -->
<div id='welcome_bar'>
<div id='welcome_bar_name'>John Doe</div>
<p id='welcome_bar_description'>Software Engineer</p>
</div>
<!-- Holds all the navigation "blocks" leading to the about, portfolio,
contact, and [unused page] pages. -->
<div id='nav_block'>
<div id='block_list'>
<div class='block_container'>
<div id='left_out' class='block'>
<a href='webpages/about/about.html'>
<!-- Short description of page this block leads to "who I am". -->
<div id='about_description' class='block_description'>
<p>who I am</p>
</div>
<p class='block_title'>About Me</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/about_icon.png' alt='about_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='left_in' class='block'>
<a href='#'>
<!-- Short description of the page this block leads to "what I am proud of". -->
<div id='portfolio_description' class='block_description'>
<p>what I am proud of</p>
</div>
<p class='block_title'>Portfolio</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/portfolio_icon.png' alt='portfolio_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='right_in' class='block'>
<a href='#'>
<div id='sparepage_description' class='block_description'>
<p>stuff stuffs</p>
</div>
<p class='block_title'>Stuff Stuff</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/stuffstuff_icon.png' alt='stuffstuff_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='right_out'class='block'>
<a href='#'>
<div id='contact_description' class='block_description'>
<p>let's chat</p>
</div>
<p class='block_title'>Contact</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/contact_icon.png' alt='contact_icon.png'/>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS3:
html {
margin: 0;
padding: 0;
max-width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
max-width: 100%;
height: 100%;
background-color: white;
}
#welcome_bar {
position: relative;
top: 10%;
left: 12.5%;
padding: 0;
width: 75%;
height: 10%;
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
}
#font-face {
font-family: "Roboto Regular";
src: url("fonts/Roboto-Regular.ttf");
}
#welcome_bar_name {
position: relative;
left: 5px;
top: 5px;
padding-left: 10px;
width: 75%;
height: 50%;
font-family: Roboto Regular;
color: rgba(0, 0, 0, 0.65);
font-size: 3em;
}
#welcome_bar_description {
position: relative;
left: 8px;
top: -15px;
padding-left: 10px;
width: 35%;
height: 20%;
font-family: Roboto Regular;
color: rgba(0, 0, 0, 0.5);
font-size: 1.5em;
}
#nav_block {
position: relative;
top: 12%;
left: 12.5%;
padding: 0;
width: 75%;
height: 68%;
}
#block_list {
display: table;
position: relative;
top: 5%;
padding: 0;
width: 100%;
height: 90%;
}
.block_container {
display: table-cell;
width: 22%;
height: 100%;
}
.block {
height: 100%;
position: relative;
}
.block a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
z-index: 10;
}
#left_out {
width: 99%;
background-color: #00AE93;
}
#left_in {
width: 98%;
margin-left: 1%;
margin-right: 1%;
background-color: #9CA645;
}
#right_in {
width: 98.5%;
margin-left: 1%;
margin-right: 1%;
background-color: #EDB613;
}
#right_out {
width: 99%;
margin-left: 1.2%;
background-color: #D55435;
}
#about_description {
position: relative;
top: 10%;
width: 90%;
height: 5%;
background-color: white;
}
#portfolio_description {
position: relative;
top: 20%;
width: 90%;
height: 5%;
background-color: white;
}
#sparepage_description {
position: relative;
top: 10%;
width: 90%;
height: 5%;
background-color: white;
}
#contact_description {
position: relative;
top: 25%;
width: 90%;
height: 5%;
background-color: white;
}
#font-face {
font-family: "Ubuntu M";
src: url("fonts/Ubuntu-M.ttf");
}
#about_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #00AE93;
}
#portfolio_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #9CA645;
}
#sparepage_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #EDB613;
}
#contact_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #D55435;
}
.block_icon_container {
top: 48%;
position: relative;
margin: 0 auto;
padding: 3px;
}
#font-face {
font-family: "Ubuntu L";
src: url("fonts/Ubuntu-L.ttf");
}
.block_title {
position: relative;
max-width: 100%;
top: 45%;
height: auto;
color: white;
font-size: 1.5em;
font-family: Ubuntu L;
text-align: center;
}
.block_icon {
margin: 0;
padding: 0;
max-width: 100%;
opacity: 0.6;
}
Under .block a, I noticed that if you remove the width, the page doesn't expand when you mouse over the block. The size of the percentage seems to effect how far the page is expanded as well.
This bug probably wouldn't be noticed unless visitors randomly scrolled using the middle mouse button, but it bugs me.
I have a bit of an issue with Firefox(v30). I'm making a site, using jQuery Fullpage scroller and the whole site works in Chrome(v35), IE(11), Opera(v22), but not in firefox. Some of the stylings appear, like the font and colors, but none of the images or the backgrounds and even the Sections are not displaying properly. Could you look at it please, because I have made another site with the Fullpage script and it's working under firefox and I've used the same method everywhere and now it just doesn't want to work. The address is: http://sikitomi.hopto.org/bts
Here is my index file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" lang="en" content="">
<meta name="robots" content="INDEX,FOLLOW">
<title>Body Training Solutions</title>
<link rel="stylesheet" href="./css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./css/jquery.fullPage.css" type="text/css" media="screen" />
<!-- <link href="favicon.ico" rel="icon" type="image/x-icon" /> -->
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.easings.min.js"></script>
<script type="text/javascript" src="./js/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="./js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
loopTop: true,
loopBottom: true
});
});
</script>
</head>
<body>
<div id="fullpage">
<div class="section" id="section0">
<div class="left">
<p><img src="./img/logo.png" alt=""/></p>
<p>FULL SITE</p>
<p>COMING SOON</p>
</div>
<div class="arrow">
<img src="./img/arrow.png" alt=""/>
</div>
</div>
<div class="section" id="section1">
<h1>UPCOMING EDUCATION COURSES</h1>
<div class="arrow">
<img src="./img/arrow.png" alt=""/>
</div>
</div>
<div class="section" id="section2">
<div class="bg"></div>
<h1>OUR CLASSES</h1>
<div class="arrow">
<img src="./img/arrow.png" alt=""/>
</div>
<ul>
<li class="trx"><img src="./img/trx.png" alt="TRX"/></li>
<li class="trx"><img src="./img/trigger.png" alt="TriggerPoint"/></li>
<li class="trx"><img src="./img/ankorr.png" alt="Ankorr"/></li>
</ul>
</div>
<div class="section" id="section3">
</div>
</div>
</body>
</html>
And here's the style.css I've made:
/* Font */
#font-face
{
font-family: 'canterbold';
src: url('canter_bold-webfont.eot');
src: url('canter_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('canter_bold-webfont.woff') format('woff'),
url('canter_bold-webfont.ttf') format('truetype'),
url('canter_bold-webfont.svg#canterbold') format('svg');
font-weight: normal;
font-style: normal;
}
/* Defaults */
html, body, p, h1, h2, h3, h4, h5, h6, div, ul
{
padding: 0;
margin: 0;
font-weight: normal;
list-style: none;
}
img
{
border: 0;
width: auto;
height: 100%;
}
p img
{
width: auto;
height: auto;
}
/* Customisations */
body
{
background: #fff;
font-family: 'canterbold';
color: #fff;
}
#section0
{
display: inline-block;
background: url('../img/slide01bg.jpg') no-repeat center center;
background-size: cover;
}
#section0 .left
{
position: absolute;
top: 5%;
left: 0px;
width: 36%;
height: 95%;
text-align: center;
font-size: 10vh;
font-size: 600%;
}
#section0 p
{
padding: 2% 0px;
}
#section0 .arrow
{
position: absolute;
right: 0px;
bottom: 2%;
left: 0px;
width: 36%;
height: 12%;
text-align: center;
}
#section1
{
background: url('../img/slide02bg.jpg') no-repeat center top;
background-size: cover;
}
#section1 h1
{
position: absolute;
top: 4%;
left: 2%;
display: inline;
text-align: left;
font-size: 8vh;
font-size: 480%;
}
#section1 .arrow
{
position: absolute;
right: 0px;
bottom: 2%;
left: 0px;
height: 12%;
text-align: center;
}
#section2
{
background: url('../img/slide03bg.jpg') center bottom;
background-size: cover;
text-align: center;
}
#section2 h1
{
position: absolute;
top: 1%;
left: 5%;
display: inline;
text-align: left;
font-size: 8vh;
font-size: 480%;
color: #3c3c3c;
z-index: 10;
}
#section2 .bg
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 70%;
background: url('../img/slide03middle.png') no-repeat center center;
background-size: contain;
z-index: 0;
text-align: center;
}
#section2 .arrow
{
position: absolute;
right: 0px;
bottom: 2%;
left: 0px;
height: 12%;
z-index: 10;
text-align: center;
}
#section2 ul
{
display: block;
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 37%;
}
#section2 li
{
width: 33%;
height: 35%;
display: inline-block;
font-size: 0;
}
#section3
{
background: url('../img/slide04bg.jpg') center bottom;
background-size: cover;
}
Any help appreciated, because this is really driving me nuts at this stage... :(
Thanks a lot!
the doctype is missing, try adding <!DOCTYPE html>before the <html> tag
I can't set the height of the clickeable areas of <a> elements. I've already written display: block; in the CSS sheet, but it doesn't work.
HTML sheet:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="dprenav">
<p id="prenav">Olive</p>
<div>
<a id="fblogo" href="http://www.facebook.com" target="_blank"><img id="imgfblogo" src="f_logo.png"></a>
</div>
<div>
<a id="right-corner" href="http://www.youtube.com" target="_blank"><img src="corner_banner.png"></a>
</div>
<div>
</div>
</div>
</body>
</html>
CSS sheet:
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive !important;
font-size: 25px !important;
color: white !important;
}
#dprenav {
background-color: #97BB55;
height: 50px;
width: 3000px;
margin: -7px;
padding-left: 5px;
position: relative;
}
#right-corner {
position: fixed;
cursor: pointer;
top: 0px;
right: 0px;
z-index: 99999;
}
#twitter-follow-button {
display: block;
position: absolute;
top: -85px;
left: 80px;
display: block;
height: 0px;
width: 0px;
}
#fblogo {
position: absolute;
top: -80px;
left: 145px;
display: block;
height: 0px;
width: 0px;
}
#imgfblogo {
height: 40px;
}
The width of the clickeable areas o the <a> elements is alright, but i cannot set the height, it's to big and I can set it in a small size.
Since you're setting the images inside the anchors height: 0px; width: 0px;, the anchors need to have defined measurements to compensate for the lack of children providing said measurements.
Something like this should work:
#dprenav a {
height: 50px;
}