homepage Welcome to WebmasterWorld Guest from 54.196.195.158
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Float DIV Links not working
MIkaelw




msg:4334682
 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]

 

lucy24




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

:: 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.

Paul_o_b




msg:4334720
 9:43 am on Jul 4, 2011 (gmt 0)

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).

MIkaelw




msg:4335072
 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..

MIkaelw




msg:4335081
 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

alt131




msg:4335098
 12:20 pm on Jul 5, 2011 (gmt 0)

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

And welcome to WebmasterWorld too :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved