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&width=350&colorscheme=dark&show_faces=t
rue&border_color&stream=true&header=true&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]
