Welcome to WebmasterWorld Guest from 54.145.209.107

Forum Moderators: not2easy

Float DIV Links not working

   
6:59 am on Jul 4, 2011 (gmt 0)



Hey guys,

Usually im pretty sweet with html/css but this has got me ripping my hair out...

I have 3 main divs in the main content section of the page, they're inside a mainContent div and they all have float: left;
One has a bunch of youtube video, one is just a news feed that i manually update and the third contains twitter and facebook scripts

here is the main problem code (full code below)
<div class="news-article">
<h3>MW(DJ)</h3><br> Fridays & Saturdays @ <a class="newsArticle" href="http://example.com"> Lenin </a> <br> Auckland, New Zealand.
</div>

the Lenin link just doesnt work, hover or anything doesn't register :\

for some reason links in the middle div just dont want to work, when i put the link code just before the div it works fine but in each div, they dont work :\

=====================HTML CODE=========================
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="new.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<meta name="description" content="The official website"/>
<meta name="keywords" content="new zealand"/>
<link rel="shortcut icon" href="favicon.ico" />
<title>My Title</title>
</head>
<body>
<div id="bgwrapper">
<div id="bodywrapper">
<div id="bodyheader">

<a href="http://www.example.com"><img src="images/bg/MWmainlogo.png" alt="" /></a>
<div id="fb-root">
<script src="http://connect.facebook.net/en_US/all.js#appId=example&am
p;xfbml=1"></script><fb:like
href="http://www.facebook.com/example" send="true"
layout="button_count" width="450" show_faces="false"
font="arial"></fb:like></div>
</div><!-- header -->

<div id="bannercontents">
<!-- slider start -->
<div class="slider-wrap">
<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href="http://itunes.apple.com/nz/album/example">
<img id="slide-img-1"
src="images/Banners/bubblegum-websitebanner.png" alt="" /></a>
<a href=""><img id="slide-img-2" src="images/Banners/lemesipbanner.png" alt="" /></a>
<a href="http://example.com/"><img id="slide-img-3" src="images/Banners/june-
premixbanner.png" alt="" /></a>

<div id="slide-controls">
<p id="slide-client" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-
1","client":"example","desc":"example"},{"id":"slide-img-
2","client":"example","desc":"example"},{"id":"slide-img-
3","client":"example","desc":"example"}];
</script>
<!-- {"id":"slide-img-3","example":"example","desc":"add your
description here"},{"id":"slide-img-4","client":"nature
beauty","desc":"add your description here"},{"id":"slide-img-
5","client":"nature beauty","desc":"add your description here"},
{"id":"slide-img-6","client":"nature beauty","desc":"add your
description here"},{"id":"slide-img-7","client":"nature
beauty","desc":"add your description here"} -->
</div><!-- slider end -->
<div id="musicplayer">

<object type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
data="OriginalMusicPlayerPlaylist.swf" width="230"
height="190"><param name="movie"
value="OriginalMusicPlayerPlaylist.swf" /><param name="FlashVars"
value="firstColor=6ccff7&secondColor=00bff3&backColor=000000&playlistX
mlPath=playlist.xml" /></object>

</div>

</div><!-- banner contents -->

<div align="center" class="menunavigation">
<a class="mainnavSelected" href="" title="Home">HOME</a>
<a class="mainnav" href="example.html" title="Remixes">REMIXES</a>
<a class="mainnav" href="example.html" title="Gigs">GIGS</a>
<a class="mainnav" href="example.html" title="Bio">BIO</a>
<a class="mainnav" href="http://www.youtube.com/example" target="_blank" title="Blog">YOUTUBE</a>
<a class="mainnav" href="http://www.example.com/" target="_blank" title="Blog">Example</a>
<a class="mainnav" href="http://www.facebook.com/example" target="_blank" title="Blog">FACEBOOK</a>
</div>

<div id="mainContent">
<!-- LEFT COLUMN -->
<div id="youtube-container">
<div class="module-header">
Latest remixes
</div>

<div class="youtube-module">
<b>Example</b>
<iframe title="YouTube video player" width="200" height="200" src="http://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>
</div>

<div class="youtube-module">
<b>Example</b>
<iframe title="YouTube video player" width="200" height="200"
src="http://www.youtube.com/embed/example" frameborder="0"
allowfullscreen></iframe>
</div>

<div class="youtube-module">
<b>Example</b>
<iframe title="YouTube video player" width="200" height="200"
src="http://www.youtube.com/embed/example" frameborder="0"
allowfullscreen></iframe>
</div>

<div class="youtube-module">
<b>Remix</b>
<iframe title="YouTube video player" width="200" height="200"
src="http://www.youtube.com/embed/example" frameborder="0"
allowfullscreen></iframe>
</div>

<div class="youtube-module">
<b>Mash </b>
<iframe title="YouTube video player" width="200" height="200"
src="http://www.youtube.com/embed/example" frameborder="0"
allowfullscreen></iframe>
</div>
</div>

<!-- MIDDLE COLUMN -->
<div id="news-module">
<div class="module-header">
News
</div>

<div class="news-article">
<h3>MW(DJ)</h3><br> Fridays & Saturdays @ <a class="newsArticle" href="http://www.example.com"> Example</a> <br> Auckland, New Zealand.
</div>

<div class="news-article">
<h3>New Remix out!</h3> <br>
Example
<iframe title="YouTube video player" width="330" height="220"
src="http://www.youtube.com/embed/example" frameborder="0"
allowfullscreen></iframe>

</div>
</div>

<!-- RIGHT COLUMN -->
<div class="right-module">
<div><!--TWITTER MODULE -->
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 350,
height: 150,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#05e2ff'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('MikaelWills').start();
</script>

</div>

<div id="fbmodule">
<div id="fbfeed">

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%
2F%2Fwww.facebook.com%
2Fexample&amp;width=350&amp;colorscheme=dark&amp;show_faces=t
rue&amp;border_color&amp;stream=true&amp;header=true&amp;height=720"
scrolling="no" frameborder="0" style="border:none; overflow:hidden;
width:350px; height:720px;" allowTransparency="true"></iframe>

</div>
</div>
</div>

</div><!-- mainContent -->
</div><!-- bodywrapper -->
</div><!-- bgwrapper -->
</body>
</html>

==========================CSS=========================
body {
background-color: black;
margin: 0 auto;
padding: 0px;
text-align: center;
display: block;
}

#bgwrapper{background-image: url('images/bg/newmainbg.jpg');
background-repeat: no-repeat; background-attachment: initial;
background-position: 50% 0%; background-origin: initial; background-
clip: initial; min-width:1000px; height: 2000px; text-align: center;
display: blocks;}

#bodywrapper {
margin:0 auto;
width:1000px;
text-align: left;
display: block;
}

#bodyheader{ width:1000px; clear:both; min-height:340px; }
#fb-root{ float:left; width:1000px; height:35px; }

#bannercontents { margin-top: 12px; padding: 20px; height: 190px; width:964px; }
#bannercontents:hover { border-color: black;}
#musicplayer{float:right; }

div.menunavigation{text-align: center; width:1000px; height:50px;}
a{border-style:none; border: 0; margin:0px; padding:0px;}
a.mainnav, a.mainnav:visited { color: #477ea5; font-family: Arial;
display: block; float:left; text-align: center; overflow:hidden; text-
decoration: none; width: 108px; font-size: 15px; padding: 15px;}
a.mainnav:hover {color: white;}
a.mainnavSelected {color: white; font-family: Arial; display: block;
float:left; text-align: center; overflow:hidden; text-decoration:
none; width: 108px; font-size: 15px; padding: 15px;}

#mainContent{
width: 964px; clear:both; padding: 18px; }
#fbfeed{ width:350px; height:765px; margin-top: 20px; float:right;
padding 10px; border-bottom-style: solid; border-bottom-width: 1px;
border-bottom-color: white; border-right-style: solid; border-right-
width: 1px; border-right-color: white;}

#bio{ color: #b3b3b3; text-align: left; font-family: Arial; font-
size: 12px; width: 1000px;}
#biowords { padding-right: 40px; padding-left: 20px;}
img.floatLeft {float: left; padding-right: 20px; }

#youtube-container{padding: 0px; text-align: center;float:left;width:
200px;height: 400px;margin-right: 25px;}
#news-module{padding: 0px;margin-right: 25px;text-align:
center;float: left;width: 360px;height: 400px; }
#right-module{padding: 0px;margin-right: 25px;text-align:
center;float: left; }
.news-article {
text-decoration: none;
font-style: normal;
font-weight: normal;
text-align: left;
width: 320px;
padding: 20px;
word-wrap: break-word;
color: #b3b3b3;
font-size: small;
font-family: sans-serif;
border-bottom-style: solid;
border-bottom-color: #b3b3b3;
border-bottom-width: 1px;
}

a.newsArticle {
text-decoration: none;
color: white;
}
a.newsArticle:hover {
text-decoration: underline;
}

.module-header{
text-align: Left;
vertical-align: middle;
font-family: sans-serif;
font-size: 18px;
color: white;
width: 300;
height: 40px;
border-bottom-style: solid;
border-bottom-color: #b3b3b3;
border-bottom-width: 1px;
}

.youtube-module {
text-decoration: none;
font-style: normal;
font-weight: normal;
text-align: center;
width: 200px;
height: 260px;
padding-top: 20px;
word-wrap: break-word;
display:inline-block;
color: #b3b3b3;
font-size: small;
font-family: sans-serif;
border-bottom-style: solid;
border-bottom-color: #b3b3b3;
border-bottom-width: 1px;
}

#sponsor-container{ width: 230px;padding-top: 15px; }
#fbfeed{ width:300px; height:765px; margin-top: 20px; float:left;
padding 10px; border-bottom-style: solid; border-bottom-width: 1px;
border-bottom-color: white; border-right-style: solid; border-right-
width: 1px; border-right-color: white;}
#soundcloud-player{ margin-top: 30px;}

/* ================= Gig List ================*/
ul.gigList{margin: 0 -38px; width: 100%;}
ul.gigList li { margin: 0 0 15px 0; border-bottom: solid gray thin;
height: 160px; font-family: "Arial"}
ul.gigList li .gigImg { float: left; }
ul.gigList li .gigText{ margin-left: 120px; color: gray; text-align:
left; font-size: small;}
ul.gigList li .gigDate{ float: right; color: white; vertical-align:
bottom; height: 50px;}
ul.gigList li h3 {}
ul.gigList li a{ color: #0a5ec3; text-transform: uppercase; text-
decoration: none; text-align: left; font-family: "Arial Black"}
ul.gigList li a:hover{ color:white;}
footer{margin-left: -10px;width:100%;height: 70px; }
a.slide { }
div.wrap {
width:702px;
margin : 0 auto;
text-align : left;
float: left;
}
div#top div#nav {
float : left;
clear : both;
width:533px;
height : 52px;
margin : 22px 0 0;
}
div#top div#nav ul {
float : left;
width : 700px;
height : 52px;
list-style-type : none;
}
div#nav ul li {
float : left;
height : 52px;
}
div#header {
margin : -1px 0 0;
}
div#video-header {
height : 189px;
margin : -1px 0 0;
}
div#header div.wrap {
height : 189px;
background : url(images/header-bg.png) no-repeat 50% 0;
}
div#header div#slide-holder {
z-index : 40;
width : 702px;
height : 189px;
position : absolute;
}
div#header div#slide-holder div#slide-runner {
width : 700px;
height : 189px;
overflow : hidden;
position : absolute;
}
div#header div#slide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#header div#slide-holder div#slide-controls {
left : 0;
bottom : 150px;
width : 700px;
height : 46px;
display : none;
position : absolute;
background : url(images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text {
float : left;
color : #fff;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 15px 0 0 20px;
text-transform : uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav {
float : right;
height : 24px;
display : inline;
margin : 11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
margin : 0 5px 0 0;
line-height : 24px;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
color : #fff;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
background-image : url(images/slider/slide-nav.png);
}
div#nav ul li a {
background : url(images/nav.png) no-repeat;
}
: inline;
font-size : 11px;
margin : 0 5px 0 0;
line-height : 24px;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
color : #fff;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
background-image : url(images/slider/slide-nav.png);
}
div#nav ul li a {
background : url(images/nav.png) no-repeat;
}

Any help would be greatly appreciated!

Thanks
Mikael

[edited by: alt131 at 12:14 pm (utc) on Jul 5, 2011]
[edit reason] Side Scroll [/edit]

8:59 am on Jul 4, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



:: peering into crystal ball ::

There's something invisible sitting on top of (that is, covering) the area with the links, so mouse activity isn't recognized.
9:43 am on Jul 4, 2011 (gmt 0)

10+ Year Member



Looks like right module should be floated with a width otherwise the background of static elements stretch across the other divs.

.right-module{float:right;width:350px}

It also seems that #fbfeed has the wrong width and perhaps should have a border all around or there is a gap.

You should also remove the height form your columns as content should dictate the height and then make sure #mainContent contains its floated children (either by setting overflow:hidden (if visible overflow isn't required) or by using the clearfix technique).
11:03 am on Jul 5, 2011 (gmt 0)



ohk so it is the right module that is somehow covering the middle one, after taking out the code for the right module the link worked. also when i put a border around all 3 modules the right one didnt show up where it should..
11:30 am on Jul 5, 2011 (gmt 0)



omg wow i feel like an idiot.... in the html i had <div class="right-module"> when in the css i had #right-module... i switched the <div class= to <div id="right-module" and everything seems to be working now... dam facepalm! lol sorry
12:20 pm on Jul 5, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi MIkaelw, you won't be the first - or last - to do that ;) Pleased you got it sorted.

And welcome to WebmasterWorld too :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month