Hey guys,
Other members, advisors, and mentors of the CSS forum helped me come up with this layout.
Something I noticed is that links are not clickable or not working in this layout?
I other words, they are not opening at all.
I understand ho this could be an html problem, but since posters of the sitepoint css forum helped me make this, I was wondering if members of the css forum or anyone can help me fix this. It could be an HTML issue or I wonder if it is possible that some styling is causing the links to not work?
The code that makes this page, is below and I hope that someone can help me because I have never encountered this issue and think it is quite peculiar.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0065)http://www.pmob.co.uk/temp/roundshadow-oneimage-centred-nav-2.htm -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Transparent Shadow all around with one image - (Not IE6)</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#999;
}
p {
margin:0 0 1em
}
h1 {
text-align:center;
margin:0 0 20px;
}
#wrap {
min-width:800px;
max-width:1500px;
margin:auto;
clear:both;
}
#middle {
min-height:0;
overflow:hidden;
padding:0 30px 0 0;
}
.a, .d, .c b, .c span, .c i {
position:relative;
background: url(images/teamround.png) no-repeat;
width:100%;
}
.a {
margin:15px auto 40px;
clear:both;
min-width:300px;
width:auto;
}
.d {
background-position:100% 100%;
position:relative;
top:30px;
left:30px;
}
.content {
padding:20px;
min-height:0;
text-align:justify;
position:relative;
top:-11px;
left:-11px;
margin:0 8px 9px 0;
min-height:410px;
}
.c {
width:100%;
position:absolute;
left:0;
top:0;
right:0;
height:100%;
}
.c span, .c b {
width:32px;
height:32px;
background-position:100% 0;
}
.c span {
float:right;
margin:-19px -19px 0 0
}
.c b {
position:absolute;
left:-19px;
bottom:-11px;
background-position:0 100%;
clear:both
}
.c i {
position:absolute;
left:-2px;
bottom:15px;
background-position:-18px 99%;
height:80px;
width:15px;
}
/* left and right columns */
#left, #right {
float:left;
width:210px;
background:red;
border:1px solid #000;
min-height:450px;
margin:30px 10px 0;
display:inline;
}
#right {
float:right;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
* html .content {zoom:1.0;padding:25px 45px 25px 25px}
* html .c, * html .c * {
display:none;
}
* html #wrap,* html #middle{zoom:1.0;padding:0}
* html #middle{ margin:0 220px 0 220px;}
* html .a {background:#fff;border:1px solid #000;}
* html .d{background:none;}
.c b {
left:-19px;
bottom:-20px;
}
.c i {
left:-2px;
bottom:6px;
height:80px;
}
</style>
<![endif]-->
<style type="text/css">
/* navigation with equal spread - Erik J's method */
.nav {
margin:auto;
border:3px outset #66f;
padding:0;
min-width:40em;
width:98%;
height:44px;
overflow:hidden;
background:#039;
text-align:justify;
font-size:93%;
}
.nav li {
display:inline;
list-style:none;
}
.nav li.last {
margin-right:100%;
}
.nav li a, .nav li span {
display:inline-block;
padding:13px 1px 0;
height:31px;
color:#ddd;
vertical-align:middle;
text-decoration:none;
text-transform:capitalize;
}
.nav li a:hover {
margin:-3px;
border:3px inset #66f;
color:#ff6;
background:#36c;
}
</style>
</head>
<body>
<h1>Transparent Shadow all around with one image - (Not IE6)</h1>
<div id="wrap">
<!-- Navigation Start here -->
<ul id="globalnav" class="nav">
<li id="gn-home"><a href="http://apple.com/">Home</a></li>
<li id="gn-about"><a href="http://store.apple.com/">About</a></li>
<li id="gn-groups"><a href="http://apple.com/mac/">Groups</a></li>
<li id="gn-media"><a href="http://apple.com/ipod/">Media</a></li>
<li id="gn-outreach"><a href="http://apple.com/iphone/">Outreach</a></li>
<li id="gn-resources"><a href="http://apple.com/ipad/">Resources</a></li>
<li id="gn-sponsors"><a href="http://apple.com/itunes/">Sponsors</a></li>
<li id="gn-support"><a href="http://apple.com/support/">Blog</a></li>
<li id="globalsearch" class="last"><span>
<input type="search" name="q" id="sp-searchtext" class="g-prettysearch applesearch" accesskey="s">
</span> </li>
</ul>
<div id="left">
<p>left content</p>
</div>
<div id="right">
<p>right content</p>
</div>
<div id="middle">
<div class="a">
<div class="d">
<div class="content">
<p>Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli enim tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. In at Maecenas porttitor dui libero vel eros et quis condimentum. Et tempor ac vitae ut Vestibulum fa</p>
<p>Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli enim tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. In at Maecenas porttitor dui libero vel eros et quis condimentum. Et tempor ac vitae ut Vestibulum fa</p>
<p>Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli enim tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. In at Maecenas porttitor dui libero vel eros et quis condimentum. Et tempor ac vitae ut Vestibulum fa</p>
<p>Have you ever wanted to know the most helpful place for webdesign? <a href="http://sitepoint.com/forums">Check out site point forums today!</a></p>
<div class="c"><span></span><b></b><i></i></div>
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
I would appreciate any help or ideas very much. Especially because I am using this layout in multiple of my sites and when I was adding content, I noticed this mistake. And links tend to be essential in a website.
Thanks in Advance & Best Regards,
Team 1504
