Hello.
I want to make advertisement like that, with support to screen size. I mean, if the advertisement will “eat” the website (will be above it), it will not show it…
Presumably your two ads each have an id. To hide them when the browser width is so narrow that they would overlap the content you’d set up a media query that thests whether the browser width is big enough to hold both ads and the content and if it isn’t then style both ids with display:none.
HI,
If you want the ads to hug the layout and slide off screen without causing a scrollbar you can do this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
h1, p { margin:0 0 1em }
#page {
width:760px;
margin: auto;
text-align:left;
background:red;
position:relative;
z-index:2;
}
#adholder {
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index:1;
}
#adinner {
width:760px;
margin:auto;
}
.adright, .adleft {
width:160px;
position: relative;
margin:0;
float:left;
height:600px;
overflow: hidden;
background:#52b502;/* for testing */
display:inline;
}
.adright {
float:right;
left:170px;
}
.adleft { left:-170px }
</style>
</head>
<body>
<div id="adholder">
<div id="adinner">
<div class="adright">Advert goes here</div>
<div class="adleft">Advert goes here</div>
</div>
</div>
<div id="page">
<h1><a href="#">Centred page content goes here</a></h1>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</body>
</html>
If you want the ads at the edge then you will need to hide them with media queries (ie9+) as Fellgal mentions above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
h1, p { margin:0 0 1em }
#page {
width:760px;
margin: auto;
text-align:left;
background:red;
position:relative;
z-index:2;
}
#adholder {
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index:1;
}
.adright, .adleft {
width:160px;
position: relative;
margin:0;
float:left;
height:600px;
overflow: hidden;
background:#52b502;/* for testing */
display:inline;
}
.adright {
float:right;
}
@media screen and (max-width:1080px) {
#adholder {display:none}
}
</style>
</head>
<body>
<div id="adholder">
<div id="adinner">
<div class="adright">Advert goes here</div>
<div class="adleft">Advert goes here</div>
</div>
</div>
<div id="page">
<h1><a href="#">Centred page content goes here</a></h1>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</body>
</html>
Yeah but I mean
if the user has screen size of 860X600, the ads will be all over his screen. My question is how I’m doing it that it will not cause a problem to low-resolution users
edit:
checked it and ur code worked really fine, but somehow nothing was clickable in the website when the ads were on
Then you missed the part where position:relative and z-index 2 was added to the main page section.
#page {
width:760px;
margin: auto;
text-align:left;
background:red;
[B]position:relative;
z-index:2;[/B]
}
Both these are fine as shown by the example links I placed in them.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
h1, p { margin:0 0 1em }
#page {
width:760px;
margin: auto;
text-align:left;
background:red;
position:relative;
z-index:2;
}
#adholder {
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index:1;
}
#adinner {
width:760px;
margin:auto;
}
.adright, .adleft {
width:160px;
position: relative;
margin:0;
float:left;
height:600px;
overflow: hidden;
background:#52b502;/* for testing */
display:inline;
}
.adright {
float:right;
left:170px;
}
.adleft { left:-170px }
a:hover{background:#000;color:#fff}
</style>
</head>
<body>
<div id="adholder">
<div id="adinner">
<div class="adright"><a href="www.google.com">Advert goes here</a></div>
<div class="adleft"><a href="www.google.com">Advert goes here</a></div>
</div>
</div>
<div id="page">
<h1><a href="www.google.com">Centred page content goes here</a></h1>
<p>test</p>
<p>test</p>
<p>test</p>
<p><a href="www.google.com">test link</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
h1, p { margin:0 0 1em }
#page {
width:760px;
margin: auto;
text-align:left;
background:red;
position:relative;
z-index:2;
}
#adholder {
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index:1;
}
.adright, .adleft {
width:160px;
position: relative;
margin:0;
float:left;
height:600px;
overflow: hidden;
background:#52b502;/* for testing */
display:inline;
}
.adright { float:right; }
a:hover{background:#000;color:#fff}
@media screen and (max-width:1080px) {
#adholder { display:none }
}
</style>
</head>
<body>
<div id="adholder">
<div id="adinner">
<div class="adright"><a href="www.google.com">Advert goes here</a></div>
<div class="adleft"><a href="www.google.com">Advert goes here</a></div>
</div>
</div>
<div id="page">
<h1><a href="www.google.com">Centred page content goes here</a></h1>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p><a href="www.google.com">Test Link</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</body>
</html>
You just have to ensure that the absolute element that holds the adverts has a lower z-index than your main content. Remember that only positioned elements can have a z-index so that’s why position:relative is added to the no positioned content wrapper.
Thanks everything is working great
but how I can make the ads go down and stay on the screen when the user scrolls down?
Hi,
You could set them to positioned fixed so that they don’t scroll.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
h1, p { margin:0 0 1em }
#page {
width:760px;
margin: auto;
text-align:left;
background:red;
position:relative;
z-index:2;
}
#adholder {
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index:1;
}
#adinner {
width:760px;
margin:auto;
}
.adright, .adleft {
width:160px;
position: relative;
margin:0;
float:left;
height:600px;
overflow: hidden;
display:inline;
}
.adright {
float:right;
left:170px;
}
.adleft { left:-170px }
a:hover {
background:#000;
color:#fff
}
.fixed{
height:600px;
width:160px;
position:fixed;
overflow: hidden;
background:#52b502;/* for testing */
}
@media screen and (max-height:600px){
.fixed{position:static}
}
</style>
</head>
<body>
<div id="adholder">
<div id="adinner">
<div class="adright"><div class="fixed"><a href="www.google.com">Advert goes here</a></div></div>
<div class="adleft"><div class="fixed"><a href="www.google.com">Advert goes here</a></div></div>
</div>
</div>
<div id="page">
<h1><a href="www.google.com">Centred page content goes here</a></h1>
<p>test</p>
<p>test</p>
<p>test</p>
<p><a href="www.google.com">test link</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p><a href="www.google.com">test link</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p> <p>test</p>
<p>test</p>
<p>test</p>
<p><a href="www.google.com">test link</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p> <p>test</p>
<p>test</p>
<p>test</p>
<p><a href="www.google.com">test link</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</body>
</html>
I put in a media query so that when the viewport is less than 600px high (the ad height) then it no longer becomes fixed because you would be unable to see all of it otherwise. If you don’t want that behaviour then remove the media query.
Sane example but for the edge of screen version.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
h1, p { margin:0 0 1em }
#page {
width:760px;
margin: auto;
text-align:left;
background:red;
position:relative;
z-index:2;
}
#adholder {
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index:1;
}
.adright, .adleft {
width:160px;
position: relative;
margin:0;
float:left;
height:600px;
overflow: hidden;
background:#52b502;/* for testing */
display:inline;
}
.adright { float:right; }
a:hover {
background:#000;
color:#fff
}
@media screen and (max-width:1080px) {
#adholder { display:none }
}
.fixed {
height:600px;
width:160px;
position:fixed;
overflow: hidden;
background:#52b502;/* for testing */
}
@media screen and (max-height:600px) {
.fixed { position:static }
}
</style>
</head>
<body>
<div id="adholder">
<div id="adinner">
<div class="adright">
<div class="fixed"><a href="www.google.com">Advert goes here</a></div>
</div>
<div class="adleft">
<div class="fixed"><a href="www.google.com">Advert goes here</a></div>
</div>
</div>
</div>
<div id="page">
<h1><a href="www.google.com">Centred page content goes here</a></h1>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p><a href="www.google.com">Test Link</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p><a href="www.google.com">Test Link</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p> <p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p><a href="www.google.com">Test Link</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</body>
</html>