Welcome to WebmasterWorld Guest from 54.196.214.35

Forum Moderators: not2easy

Message Too Old, No Replies

Float DIV Links not working

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

New User

joined:July 4, 2011
posts: 3
votes: 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 July 4, 2011 (gmt 0)

Senior Member from US 

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

joined:Apr 9, 2011
posts:12720
votes: 244


:: 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 July 4, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


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 July 5, 2011 (gmt 0)

New User

joined:July 4, 2011
posts:3
votes: 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 July 5, 2011 (gmt 0)

New User

joined:July 4, 2011
posts:3
votes: 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 July 5, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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

And welcome to WebmasterWorld too :)