Hi, i was wondering how can i try to make a banner that takes all the background on a webpage, and all its surfaces are clickable and link to the same page.
Thank You very much, what if I want to put in a simple scrollable table, kind of a blog-type of thing, keeping the clickable background, could i proceed with css?
If yes, how could it be?
if you want to suggest some useful know how tutorial links, feel free.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
html,body {
height:100%;
margin:0;
background-image: url(http://coothead.co.uk/images/buddha.jpg);
background-attachment:fixed;
background-size:100%;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
}
#link {
position:absolute;
width:100%;
height:100%;
}
#link a {
display:block;
height:100%;
text-indent:-9999px;
}
#container {
position:relative;
z-index:1;
width:740px;
min-height:100%;
padding:20px;
border-right:1px solid #321;
border-left:1px solid #000;
margin:auto;
background-color:#fed;
}
#container p {
padding:10px 0;
margin:0;
color:#321;
text-indent:20px;
}
#container p:first-letter {
font-family:'times new roman',serif;
font-size:220%;
font-weight:bold;
color:#f93;
line-height:0.8;
text-shadow:1px 1px #000,0 0 2px #000;
}
</style>
</head>
<body>
<div id="link">
<a href="http://www.webdeveloper.com/">www.webdeveloper.com</a>
</div>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
fermentum tellus nec lacus tempor in fringilla augue imperdiet.
Maecenas id velit non turpis luctus sollicitudin vitae eget dolor.
Aliquam id leo velit, ac luctus eros. *** sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Nunc tristique
venenatis urna in varius. Morbi eu ipsum ac arcu dapibus bibendum.
Nullam eros leo, placerat iaculis adipiscing id, tincidunt a leo.
Fusce a augue in erat aliquet posuere in sed dui. Nam quis lacus augue.
Cras eget lacus urna. Aliquam erat volutpat. Etiam consequat laoreet
tellus, ut tincidunt neque cursus quis. Aliquam malesuada odio a augue
tincidunt fringilla in sed ligula. Sed mollis elementum nibh, eu porta
ligula egestas eu. Proin urna neque, volutpat vitae ornare in, semper
vitae massa.
</p><p>
Morbi dictum aliquet risus, ac tincidunt leo vulputate quis. Praesent
accumsan tortor at nisi placerat dignissim. Aliquam porttitor tristique
dui. Suspendisse viverra dictum libero, at porta nunc congue ut. Morbi
sem lorem, posuere ut tempor et, convallis at leo. Ut fermentum erat
aliquet lectus fermentum mollis. Aliquam erat volutpat. Curabitur
placerat convallis hendrerit. Nulla fermentum pretium varius. Donec
pulvinar dui nec tortor fringilla pharetra. Maecenas at urna vel risus
varius varius. Aenean vitae volutpat quam. Curabitur suscipit porta
turpis vel malesuada. Integer vel purus ut velit condimentum luctus sed
in eros. Integer sed libero et orci adipiscing dictum vitae quis justo.
Nullam risus velit, hendrerit eget adipiscing a, tincidunt ac diam.
</p><p>
Vivamus ultrices nisi non sapien commodo pulvinar. Nullam tristique
lectus ac risus vestibulum mollis. Fusce non odio eget libero interdum
dictum at a lorem. Nulla dictum justo rutrum leo dictum dapibus. In hac
habitasse platea dictumst. Donec aliquam lectus ut ipsum bibendum
pharetra. Vestibulum consectetur ornare ipsum, a malesuada velit
pellentesque ac. Duis tincidunt, libero in auctor tincidunt, lacus arcu
viverra nisi, ac malesuada ipsum diam id nisl. Curabitur semper arcu
eget nisi tristique eget rhoncus eros laoreet. Donec aliquet sapien nec
lacus pulvinar a rutrum diam eleifend. Sed in sapien arcu, vitae feugiat
ligula.
</p><p>
Curabitur quis urna nibh. Duis laoreet nunc eu diam ultrices et tempus
felis feugiat. Aliquam viverra interdum ligula, id vulputate arcu porta
eu. Aenean facilisis ipsum in tortor ullamcorper in iaculis orci eleifend.
Aliquam a diam id orci hendrerit auctor eu ut massa. In nulla ligula,
scelerisque eu sollicitudin a, ullamcorper non leo. Vestibulum fringilla
facilisis ante, et suscipit elit scelerisque vitae. Vivamus bibendum
consectetur sem, sed suscipit dolor gravida tempor. Nam leo mi, viverra
id venenatis sit amet, laoreet in nunc.
</p>
</div>
</body>
</html>
I had just set the top variable to 200px to the container, that's because i wanted to have a header at the beginning of the page.
The container slided down correctly but what happens now is that just the first half of the background image is clickable while the bottom half is not anymore.
I was searching the net for a hint but did not find it, i will be glad if you could help me again.
If you can link me a nice tutorial or any kind of good web info dealing with css IDs and variables and how to manage them, please let me know i'll check them out.
Thank you
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
html,body {
height:100%;
margin:0;
background-image: url(image1.jpg);
background-attachment:fixed;
background-size:100%;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
}
#link {
position:absolute;
width:100%;
height:100%;
}
#link a {
display:block;
width:100%;
height:100%;
text-indent:-9999px;
}
#container {
position:relative;
z-index:1;
width:740px;
min-height:100%;
padding:20px;
border-right:1px solid #321;
border-left:1px solid #000;
margin:auto;
background-color:#fed;
top:400px
}
#container p {
padding:10px 0;
margin:0;
color:#321;
text-indent:20px;
}
#container p:first-letter {
font-family:'times new roman',serif;
font-size:220%;
font-weight:bold;
color:#f93;
line-height:0.8;
text-shadow:1px 1px #000,0 0 2px #000;
}
</style>
</head>
<body>
<div id="link">
<a href="http://www.commpla.com/">www.commpla.com</a>
</div>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
fermentum tellus nec lacus tempor in fringilla augue imperdiet.
Maecenas id velit non turpis luctus sollicitudin vitae eget dolor.
Aliquam id leo velit, ac luctus eros. *** sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Nunc tristique
venenatis urna in varius. Morbi eu ipsum ac arcu dapibus bibendum.
Nullam eros leo, placerat iaculis adipiscing id, tincidunt a leo.
Fusce a augue in erat aliquet posuere in sed dui. Nam quis lacus augue.
Cras eget lacus urna. Aliquam erat volutpat. Etiam consequat laoreet
tellus, ut tincidunt neque cursus quis. Aliquam malesuada odio a augue
tincidunt fringilla in sed ligula. Sed mollis elementum nibh, eu porta
ligula egestas eu. Proin urna neque, volutpat vitae ornare in, semper
vitae massa.
</p><p>
Morbi dictum aliquet risus, ac tincidunt leo vulputate quis. Praesent
accumsan tortor at nisi placerat dignissim. Aliquam porttitor tristique
dui. Suspendisse viverra dictum libero, at porta nunc congue ut. Morbi
sem lorem, posuere ut tempor et, convallis at leo. Ut fermentum erat
aliquet lectus fermentum mollis. Aliquam erat volutpat. Curabitur
placerat convallis hendrerit. Nulla fermentum pretium varius. Donec
pulvinar dui nec tortor fringilla pharetra. Maecenas at urna vel risus
varius varius. Aenean vitae volutpat quam. Curabitur suscipit porta
turpis vel malesuada. Integer vel purus ut velit condimentum luctus sed
in eros. Integer sed libero et orci adipiscing dictum vitae quis justo.
Nullam risus velit, hendrerit eget adipiscing a, tincidunt ac diam.
</p><p>
Vivamus ultrices nisi non sapien commodo pulvinar. Nullam tristique
lectus ac risus vestibulum mollis. Fusce non odio eget libero interdum
dictum at a lorem. Nulla dictum justo rutrum leo dictum dapibus. In hac
habitasse platea dictumst. Donec aliquam lectus ut ipsum bibendum
pharetra. Vestibulum consectetur ornare ipsum, a malesuada velit
pellentesque ac. Duis tincidunt, libero in auctor tincidunt, lacus arcu
viverra nisi, ac malesuada ipsum diam id nisl. Curabitur semper arcu
eget nisi tristique eget rhoncus eros laoreet. Donec aliquet sapien nec
lacus pulvinar a rutrum diam eleifend. Sed in sapien arcu, vitae feugiat
ligula.
</p><p>
Curabitur quis urna nibh. Duis laoreet nunc eu diam ultrices et tempus
felis feugiat. Aliquam viverra interdum ligula, id vulputate arcu porta
eu. Aenean facilisis ipsum in tortor ullamcorper in iaculis orci eleifend.
Aliquam a diam id orci hendrerit auctor eu ut massa. In nulla ligula,
scelerisque eu sollicitudin a, ullamcorper non leo. Vestibulum fringilla
facilisis ante, et suscipit elit scelerisque vitae. Vivamus bibendum
consectetur sem, sed suscipit dolor gravida tempor. Nam leo mi, viverra
id venenatis sit amet, laoreet in nunc.
</p>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
html,body {
height:100%;
margin:0;
background-image: url(http://coothead.co.uk/images/buddha.jpg);
background-attachment:fixed;
background-size:100%;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
}
#link {
position:absolute;
width:100%;
height:100%;
}
#link a {
display:block;
height:100%;
text-indent:-9999px;
}
#container {
position:relative;
z-index:1;
width:740px;
min-height:100%;
padding:20px;
border-right:1px solid #321;
border-left:1px solid #000;
margin:auto;
background-color:#fed;
}
#header {
height:200px;
border:1px solid #f93;
background-color:#2d4555;
color:#ccf;
text-align:center;
line-height:200px;
}
#container p {
padding:10px 0;
margin:0;
color:#321;
text-indent:20px;
}
#container p:first-letter {
font-family:'times new roman',serif;
font-size:220%;
font-weight:bold;
color:#f93;
line-height:0.8;
text-shadow:1px 1px #000,0 0 2px #000;
}
</style>
</head>
<body>
<div id="link">
<a href="http://www.commpla.com/">www.commpla.com</a>
</div>
<div id="container">
<div id="header">
This is the header section.
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
fermentum tellus nec lacus tempor in fringilla augue imperdiet.
Maecenas id velit non turpis luctus sollicitudin vitae eget dolor.
Aliquam id leo velit, ac luctus eros. *** sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Nunc tristique
venenatis urna in varius. Morbi eu ipsum ac arcu dapibus bibendum.
Nullam eros leo, placerat iaculis adipiscing id, tincidunt a leo.
Fusce a augue in erat aliquet posuere in sed dui. Nam quis lacus augue.
Cras eget lacus urna. Aliquam erat volutpat. Etiam consequat laoreet
tellus, ut tincidunt neque cursus quis. Aliquam malesuada odio a augue
tincidunt fringilla in sed ligula. Sed mollis elementum nibh, eu porta
ligula egestas eu. Proin urna neque, volutpat vitae ornare in, semper
vitae massa.
</p><p>
Morbi dictum aliquet risus, ac tincidunt leo vulputate quis. Praesent
accumsan tortor at nisi placerat dignissim. Aliquam porttitor tristique
dui. Suspendisse viverra dictum libero, at porta nunc congue ut. Morbi
sem lorem, posuere ut tempor et, convallis at leo. Ut fermentum erat
aliquet lectus fermentum mollis. Aliquam erat volutpat. Curabitur
placerat convallis hendrerit. Nulla fermentum pretium varius. Donec
pulvinar dui nec tortor fringilla pharetra. Maecenas at urna vel risus
varius varius. Aenean vitae volutpat quam. Curabitur suscipit porta
turpis vel malesuada. Integer vel purus ut velit condimentum luctus sed
in eros. Integer sed libero et orci adipiscing dictum vitae quis justo.
Nullam risus velit, hendrerit eget adipiscing a, tincidunt ac diam.
</p><p>
Vivamus ultrices nisi non sapien commodo pulvinar. Nullam tristique
lectus ac risus vestibulum mollis. Fusce non odio eget libero interdum
dictum at a lorem. Nulla dictum justo rutrum leo dictum dapibus. In hac
habitasse platea dictumst. Donec aliquam lectus ut ipsum bibendum
pharetra. Vestibulum consectetur ornare ipsum, a malesuada velit
pellentesque ac. Duis tincidunt, libero in auctor tincidunt, lacus arcu
viverra nisi, ac malesuada ipsum diam id nisl. Curabitur semper arcu
eget nisi tristique eget rhoncus eros laoreet. Donec aliquet sapien nec
lacus pulvinar a rutrum diam eleifend. Sed in sapien arcu, vitae feugiat
ligula.
</p><p>
Curabitur quis urna nibh. Duis laoreet nunc eu diam ultrices et tempus
felis feugiat. Aliquam viverra interdum ligula, id vulputate arcu porta
eu. Aenean facilisis ipsum in tortor ullamcorper in iaculis orci eleifend.
Aliquam a diam id orci hendrerit auctor eu ut massa. In nulla ligula,
scelerisque eu sollicitudin a, ullamcorper non leo. Vestibulum fringilla
facilisis ante, et suscipit elit scelerisque vitae. Vivamus bibendum
consectetur sem, sed suscipit dolor gravida tempor. Nam leo mi, viverra
id venenatis sit amet, laoreet in nunc.
</p>
</div>
</body>
</html>
I have put the header outside the container beacause i didn't want the background image to be covered by the header.
The issue is still there, as i scroll the page, the bottom of the background loses its "clickability"
In the meanwhile i have tried two solutions which lead to other strange issues:
1) the first is to add a 200% to the height attribute of the #link a {} object, but it's a forced solution, maybe not the most correct, and adds a footer that shouldn't be there.
2) Another solution i have tried is to change the position attribute of the #link{} object from absolute to fixed, but this way it doesn't scoll anymore until i use the scroll bar. It won't scroll with the track pad.
Thank You
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
html,body {
height:100%;
margin:0;
background-image: url(image1.jpg);
background-attachment:fixed;
background-size:100%;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
}
#link {
position:absolute;
width:100%;
height:100%;
}
#link a {
display:block;
width:100%;
height:100%;
text-indent:-9999px;
}
#container {
position:relative;
z-index:1;
width:740px;
min-height:100%;
padding:20px;
border-right:1px solid #321;
border-left:1px solid #000;
margin:auto;
background-color:#fed;
}
#header {
height:400px;
}
#container p {
padding:10px 0;
margin:0;
color:#321;
text-indent:20px;
}
#container p:first-letter {
font-family:'times new roman',serif;
font-size:220%;
font-weight:bold;
color:#f93;
line-height:0.8;
text-shadow:1px 1px #000,0 0 2px #000;
}
</style>
</head>
<body>
<div id="link">
<a href="http://www.webdeveloper.com/">www.webdeveloper.com</a>
</div>
<div id="header">
</div>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
fermentum tellus nec lacus tempor in fringilla augue imperdiet.
Maecenas id velit non turpis luctus sollicitudin vitae eget dolor.
Aliquam id leo velit, ac luctus eros. *** sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Nunc tristique
venenatis urna in varius. Morbi eu ipsum ac arcu dapibus bibendum.
Nullam eros leo, placerat iaculis adipiscing id, tincidunt a leo.
Fusce a augue in erat aliquet posuere in sed dui. Nam quis lacus augue.
Cras eget lacus urna. Aliquam erat volutpat. Etiam consequat laoreet
tellus, ut tincidunt neque cursus quis. Aliquam malesuada odio a augue
tincidunt fringilla in sed ligula. Sed mollis elementum nibh, eu porta
ligula egestas eu. Proin urna neque, volutpat vitae ornare in, semper
vitae massa.
</p><p>
Morbi dictum aliquet risus, ac tincidunt leo vulputate quis. Praesent
accumsan tortor at nisi placerat dignissim. Aliquam porttitor tristique
dui. Suspendisse viverra dictum libero, at porta nunc congue ut. Morbi
sem lorem, posuere ut tempor et, convallis at leo. Ut fermentum erat
aliquet lectus fermentum mollis. Aliquam erat volutpat. Curabitur
placerat convallis hendrerit. Nulla fermentum pretium varius. Donec
pulvinar dui nec tortor fringilla pharetra. Maecenas at urna vel risus
varius varius. Aenean vitae volutpat quam. Curabitur suscipit porta
turpis vel malesuada. Integer vel purus ut velit condimentum luctus sed
in eros. Integer sed libero et orci adipiscing dictum vitae quis justo.
Nullam risus velit, hendrerit eget adipiscing a, tincidunt ac diam.
</p><p>
Vivamus ultrices nisi non sapien commodo pulvinar. Nullam tristique
lectus ac risus vestibulum mollis. Fusce non odio eget libero interdum
dictum at a lorem. Nulla dictum justo rutrum leo dictum dapibus. In hac
habitasse platea dictumst. Donec aliquam lectus ut ipsum bibendum
pharetra. Vestibulum consectetur ornare ipsum, a malesuada velit
pellentesque ac. Duis tincidunt, libero in auctor tincidunt, lacus arcu
viverra nisi, ac malesuada ipsum diam id nisl. Curabitur semper arcu
eget nisi tristique eget rhoncus eros laoreet. Donec aliquet sapien nec
lacus pulvinar a rutrum diam eleifend. Sed in sapien arcu, vitae feugiat
ligula.
</p><p>
Curabitur quis urna nibh. Duis laoreet nunc eu diam ultrices et tempus
felis feugiat. Aliquam viverra interdum ligula, id vulputate arcu porta
eu. Aenean facilisis ipsum in tortor ullamcorper in iaculis orci eleifend.
Aliquam a diam id orci hendrerit auctor eu ut massa. In nulla ligula,
scelerisque eu sollicitudin a, ullamcorper non leo. Vestibulum fringilla
facilisis ante, et suscipit elit scelerisque vitae. Vivamus bibendum
consectetur sem, sed suscipit dolor gravida tempor. Nam leo mi, viverra
id venenatis sit amet, laoreet in nunc.
</p>
</div>
</body>
</html>
Reply With Quote
Bookmarks