I'm trying to build a website like the image in link below... I confused about using multiple DIVs and my code doesn't work well... I googled this issue and found some guides about using WRAPPER stuff, but I don't know how to use this method... one of my biggest problem in my code is that I can't set a background-image for my MAIN DIV, and the background-image starts from behind slideshow div...but i want it started after my slideshow... in the image of website structure, Div 4, Div 5 and div 6, contain social networks embedded codes... I will appreciate if someone help me through this issue...
@font-face {
font-family: 'Myriad Pro Bold';
font-style: normal;
font-weight: normal;
src: url('../Fonts/MYRIADPRO-BOLD.woff') format('woff');
}
body
{
width: 100%;
background-image: url('../Images/bg.jpg');
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
}
#HeaderDiv
{
position: relative;
width: 100%;
height: 70px;
line-height: 75px;
z-index: 10;
margin-top: -410px;
background-image: url('../Images/Header.png');
background-repeat: repeat;
color: White;
font-family: 'Myriad Pro Bold';
font-size: 26pt;
text-align: center;
}
.GalHead
{
font-size: 100px;
font-family: Arial;
color: #fff;
margin-top: 150px;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
/************************************************************************
*************************************************************************/
nav
{
max-width: 1024px;
margin: 0 auto;
padding: 30px 0;
margin-top: 370px;
}
nav ul
{
text-align: center;
width: 100%;
}
nav ul li
{
display: inline-block;
}
nav ul li a
{
margin: 10px;
padding: 5px;
font-family: Arial;
font-weight: 600;
color: #000;
font-size: 22px;
text-decoration: none;
display: block;
}
nav ul li a:hover
{
outline: 3px solid #890e10;
}
/************************************************************************
*************************************************************************/
#OutterVimeo
{
position: relative;
width: 1024px;
margin-left: auto;
margin-right: auto;
margin-top: -30px;
height: 370px;
background-image: url('../Images/Wopacity.png');
background-repeat: repeat;
border: 1px solid #666666;
}
#InnerVimeo
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 625px;
height: 350px;
margin: auto;
}
#SpecterDiv
{
position: relative;
width: 1024px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
height: 150px;
background-image: url('../Images/Wopacity.png');
background-repeat: repeat;
border: 1px solid #666666;
text-align: justify;
font-family: Arial;
font-weight:bold;
padding: 0;
}
#OutterSocial
{
position: relative;
width: 1024px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
margin-bottom: 15px;
height: 650px;
background-image: url('../Images/Wopacity.png');
background-repeat: repeat;
border: 1px solid #666666;
}
#FooterDiv
{
width: 100%;
height: 100px;
background-image: url('../Images/Header.png');
background-repeat: repeat;
border-top: 4px solid #890e10;
color: White;
font-family: Arial;
line-height: 50px;
}
.twitter-timeline
{
width: 225px;
height: 600px;
}
#content
{
width:100%;
height:100%;
border-style: solid;
border: 3px;
border-color: Black;
}
.column
{
margin-top: 30px;
float: left;
position: relative;
width: 315px;
margin-left: 20px;
background: #fff;
height: 600px;
border-style: solid;
border: 5px;
border-color: Black;
}
<body>
<script> (function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
<form id="form1" runat="server">
<center>
<div class="center">
<ul class='aviaslider' id="frontpage-slider">
<li><img src="images/slides/1.jpg" alt="" /></li>
<li><img src="images/slides/2.jpg" alt="" /></li>
<li><img src="images/slides/3.jpg" alt="" /></li>
<li><img src="images/slides/4.jpg" alt="" /></li>
<li><img src="images/slides/5.jpg" alt="" /></li>
</ul>
<div id="main">
<!-- end center-->
</div>
</div>
</center>
<div id="HeaderDiv">
<a href="http://ift.tt/ieOZPP"><img src="Images/Kickstarter.png" alt="KickStarterlogo"></a>
</div>
<div id="Menu">
<nav>
<ul>
<li>
<a href="#">ABOUT</a>
</li>
<li>
<a href="#">FILM MAKERS</a>
</li>
<li>
<a href="Gallery.aspx">GALLERY</a>
</li>
<li>
<a href="#">PRESS</a>
</li>
<li>
<a href="#">NEWS</a>
</li>
<li>
<a href="#">DONORS WALL</a>
</li>
</ul>
</nav>
</div>
<div id="OutterVimeo">
<center>
<div id="InnerVimeo">
<iframe src="" width="623" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</center>
</div>
<div id="SpecterDiv">
<p style="text-align: center;">
<strong><span style="font-size:20px;"><span style="font-family: arial,helvetica,sans-serif;"><big><span style="color: rgb(178, 34, 34);">SPECTER :</span></big></span></span></strong><br />
<span style="font-size:17px;"><span style="font-family: arial,helvetica,sans-serif;"></span>
</span>
</p>
</div>
<div id="OutterSocial">
<div id="content">
<div class="column">
<a class="twitter-timeline" href="https://twitter.com/" data-widget-id="495829350265012224">Tweets by </a>
<script> !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } } (document, "script", "twitter-wjs");</script>
</div>
<div class="column" style="background:none;"><iframe frameborder="0" height="100%" scrolling="no" src="" width="310"></iframe></div>
<div class="column"><div class="fb-like-box" data-href="http://ift.tt/g8FRpY" data-width="315" data-height="600" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="false"></div></div>
</div>
</div>
<div id="FooterDiv">
<center>
© 2014 All Right Reserved
<br />
Developed By
</center>
</div>
</form>
</body>
Aucun commentaire:
Enregistrer un commentaire