DIV not working with different resolutions - javascript

This might have been answered before, my searching hasn't led me to any answers, so I apologize in advance if there's already a thread that might be able to help.
Here's a fiddle
I realize that what the page looks wonky, it looks much better from my own PC. I'm really just having trouble with the navbar not centering on the slideshow when it comes to differing resolutions.
HTML:
</div>
<div id="schedule">
<p> </p>
</div>
<div id="wrap">
<ul class="navbar">
<li>Courses
</li>
<li>Faculty
</li>
<li>Programs and Athletics
</li>
<li>Information ▽
<ul>
<li><a target="_blank" href="https://parentlink.ccsd.net/html/ContentBase/Content/Home/Login">ParentLink</a>
</li>
<li><a target="_blank" href="https://twitter.com/">Twitter</a>
</li>
<li><a target="_blank" href="https://www.facebook.com/">Facebook</a>
</li>
<li>Important Handouts
</ul>
</li>
</ul>
</div>
<br />
<div id="slide_background">
<!-- Start WOWSlider.com BODY section id=wowslider-container4 -->
<div id="wowslider-container4">
<div class="ws_images">
<ul>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
</ul>
</div>
<div class="ws_bullets">
</div>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine4//wowslider.js"></script>
<script type="text/javascript" src="engine4//script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
CSS:
/* CSS Document */
body {
background-image:url(images/images/banner_repeat_01.jpg);
width:auto;
height:auto;
background-repeat:repeat-x;
}
footer {
background-color:#c3c3c3;
background-repeat:repeat-x;
background-position:bottom;
width:100%;
left:0;
right:0;
position:absolute;
}
#banner {
width:auto;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
color:white;
text-shadow: 2px 2px 5px #000;
font-family:"Times New Roman", Times, serif;
}
#schedule {
color:white;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:2.9em;
}
#slide_background {
background-color:#c3c3c3;
margin-left:auto;
margin-right:auto;
width:100%;
position:absolute;
left:0;
right:0;
}
#slides {
background-color:#000;
margin-left:auto;
margin-right:auto;
text-align:center;
height:13em;
width:70%;
margin-top:-1em;
color:white;
}
#frontpage {
margin-left:auto;
margin-right:auto;
width:100%;
color:#333;
margin-top:23em;
}
#banner hr {
width:15em;
margin-top:-1.8em
}
#frontpage table th {
color:#333;
border-collapse:collapse;
font-size:2em;
text-decoration:underline;
font-variant:small-caps;
}
#frontpage table td {
color:#161616;
border-collapse:collapse;
font-size:1.3em;
}
h1 {
font-size:2.8em;
margin-top:-.1em;
}
h3 {
font-variant:small-caps;
margin-top:-.2em;
letter-spacing:4px;
}
a:link {
text-decoration: none;
color:black;
}
a:visited {
text-decoration:none;
font-weight:bold;
color:black;
}
a:active {
text-decoration:underline;
color: #00F;
}
table a:hover {
text-decoration:underline;
font-weight:bold;
color:#33F;
}
a h3 {
color: #FFF;
text-decoration: none;
}
a h1 {
color: #FFF;
text-decoration: none;
}
table {
font-family:"Times New Roman", Times, serif;
font-size:1em;
margin-left:auto;
margin-right:auto;
letter-spacing:2px;
margin-top:-.5em;
}
td:nth-child(1) {
border-right:solid thin;
}
td:nth-child(2) {
border-right:solid thin;
}
td:nth-child(3) {
border-right:solid thin;
}
#frontpage td:nth-child(3) {
border-right:none;
}
.schedule_day {
font-weight:bold;
font-size:1.3em;
text-decoration:underline;
color:black;
font-variant:small-caps;
}
#banner a h1 {
text-decoration: none;
}
#wowslider-container4 {
zoom: 1;
position: relative;
max-width:960px;
margin:0px auto 0px;
z-index:90;
border:none;
text-align:left;
/* reset align=center */
font-size: 10px;
}
* html #wowslider-container4 {
width:960px
}
#wowslider-container4 .ws_images ul {
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#wowslider-container4 .ws_images ul li {
width:1%;
line-height:0;
/*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#wowslider-container4 .ws_images {
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#wowslider-container4 .ws_images a {
width:100%;
display:block;
color:transparent;
}
#wowslider-container4 img {
max-width: none !important;
}
#wowslider-container4 .ws_images img {
width:100%;
border:none 0;
max-width: none;
padding:0;
margin:0;
}
#wowslider-container4 a {
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container4 .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
#wowslider-container4 .ws_bullets div {
position:relative;
float:left;
}
#wowslider-container4 .wsl {
display:none;
}
#wowslider-container4 sound, #wowslider-container4 object {
position:absolute;
}
#wowslider-container4 .ws_bullets {
padding: 9px;
}
#wowslider-container4 .ws_bullets a {
width:11px;
height:11px;
background: url(./bullet.png) left top;
float: left;
text-indent: -4000px;
position:relative;
margin-left:5px;
color:transparent;
}
#wowslider-container4 .ws_bullets a:hover {
background-position: 0 50%;
}
#wowslider-container4 .ws_bullets a.ws_selbull {
background-position: 0 100%;
}
#wowslider-container4 a.ws_next, #wowslider-container4 a.ws_prev {
position:absolute;
display:block;
top:50%;
margin-top:-2em;
z-index:60;
height: 4.5em;
width: 4.5em;
background-image: url(./arrows.png);
opacity: 0.8;
background-size: 200%;
}
#wowslider-container4 a.ws_next {
background-position: 100% 0;
right:2.1em;
}
#wowslider-container4 a.ws_prev {
left:2.1em;
background-position: 0 0;
}
#wowslider-container4 a.ws_next:hover {
opacity: 1;
}
#wowslider-container4 a.ws_prev:hover {
opacity: 1;
}
/*playpause*/
#wowslider-container4 .ws_playpause {
display:none;
width: 4.5em;
height: 4.5em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -2em;
margin-top: -2em;
z-index: 59;
background-size: 100%;
}
#wowslider-container4:hover .ws_playpause {
display:block;
}
#wowslider-container4 .ws_pause {
background-image: url(./pause.png);
}
#wowslider-container4 .ws_play {
background-image: url(./play.png);
}
#wowslider-container4 .ws_pause:hover, #wowslider-container1 .ws_play:hover {
background-position: 100% 100% !important;
}
/* bottom center */
#wowslider-container4 .ws_bullets {
bottom: -26px;
left:862px;
}
#wowslider-container4 .ws_bullets div {
left:-50%;
}
#wowslider-container4 .ws-title {
position:absolute;
display:block;
bottom: 1.7em;
left: 0;
margin: 0.9em;
margin-left: 0;
margin-right: 0.9em;
padding:0.8em;
background:#FFFFFF;
color:#5D5D5D;
z-index: 50;
font-family:'Open Sans', Arial, Helvetica, sans-serif;
border-radius:0.5em;
-moz-border-radius:0 1em 1em 0;
border-radius:0 1em 1em 0;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-box-shadow: 0 0 0.2em #5D5D5D;
box-shadow: 0 0 0.2em #5D5D5D;
}
#wowslider-container4 .ws-title div {
padding-top:0.25em;
font-size: 1.4em;
}
#wowslider-container4 .ws-title span {
font-size: 1.8em;
}
#wowslider-container4 .ws_images ul {
animation: wsBasic 20s infinite;
-moz-animation: wsBasic 20s infinite;
-webkit-animation: wsBasic 20s infinite;
}
#keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
#-moz-keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
#-webkit-keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
#wowslider-container4 .ws_images img {
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#wowslider-container4 .ws_effect img {
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#wrap {
width: 100%;
/* Spans the width of the page */
height: 3.8em;
margin: 0;
/* Ensures there is no space between sides of the screen and the menu */
z-index: 99;
/* Makes sure that your menu remains on top of other page elements */
position: absolute;
background-color:#FFF;
left:-3px;
right:0;
top: 153px;
margin-left:auto;
margin-right:auto;
}
body {
width:100%;
height:100%;
}
.navbar {
height: .5em;
padding: 0;
margin-left: 40em;
margin-right: auto;
position: absolute;
/* Ensures that the menu doesn't affect other elements */
width: auto;
left: 0 top: 0px;
min-width:800px;
}
.navbar li {
height: 1.5em;
;
width: 10em;
/* Each menu item is 150px wide */
float:left;
text-align: center;
/* All text is placed in the center of the box */
list-style: none;
/* Removes the default styling (bullets) for the list */
font:"Times New Roman", Times, serif;
font-size:1em;
padding: 0;
margin:0;
border-left:thin solid #000;
border-right:thin solid #000;
}
.navbar a {
padding: 0;
/* Adds a padding on the top and bottom so the text appears centered vertically */
text-decoration: none;
/* Removes the default hyperlink styling. */
color: #000;
/* Text color is white */
display: block;
}
.navbar li ul {
display: none;
/* Hides the drop-down menu */
height: auto;
margin: 0;
/* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block;
/* Displays the drop-down box when the menu item is hovered over */
border: none;
padding: .7em;
}
li:nth-child(1) {
border-right:solid thin;
}
li:nth-child(2) {
border-right:solid thin;
}
li:nth-child(3) {
border-right:solid thin;
}
li:nth-child(4) {
border-right:solid thin;
}
.navbar li ul li {
border:none;
background-color:#CCC;
border:thin solid #000;
padding:5px;
width:130px;
}
.navbar li ul li a:hover {
background-color: #CCC;
}
Thank you!

add this to your #wrap id
#wrap { text-align: center; }
and remove your .navbar code. paste this instead
.navbar { display: inline-block; }
fiddle demo

Hy Harin
If I understood you right, it's all about centering the navigation?
then try these:
.navbar {
margin: 10px auto;
width: 800px;
}
set a fixed with of your navbar UL. then set a margin: 0 auto. that means 0 margin on top and bottom and auto margin on the left and right side = it will be centered.
this won't work correctly, if the screen width is smaler than 800px ;)

Related

Hambuerguer menu not working online but working in xampp/localhost

I am having a problem with a responsive menu. While I'm in my offline server, the responsive menu works fine in mobile format, but when It's in the real server, it does not work. I've been struggling with this for hours. Here is my code:
HTML
<div class="menu">
<div class="menu_bar">
<img id="logo-mobile" src="design/logo-titol-prova-1.PNG">
<span class="icon-menu"></span>
</div>
<nav>
<img id="logo" src="design/logo-titol-prova-1.PNG">
<ul>
<li class="first">About</li>
<li>Surf/Kitesurf</li>
<li>The Tour</li>
<li>Lodging</li>
<li>Testimonials</li>
<li>Reserve Now</li>
</ul>
</nav>
</div>
CSS
/*Menu*/
.menu{
width: 100%;
position:fixed;
top:0;
margin:0 auto;
padding: 0;
box-sizing: border-box;
font-size: 15px;
text-align: center;
background-color: transparent;
-webkit-transition: background-color .5s;
z-index:1000;
}
.menu nav {
display: table;
max-width:1200px;
max-width:100%;
margin:0 auto;
padding: 20px;
box-sizing: border-box;
text-align: center;
z-index:1000;
-webkit-transition: margin-left .5s;
}
.menu_bar {
display:none;
}
.menu nav ul {
width:100%;
overflow:hidden;
margin: 0;
padding: 0;
display: inline;
list-style:none;
text-align: center;
}
.menu nav ul li {
display: inline;
width:100%;
margin: 0;
padding: 0;
padding-left: 30px;
text-align: center;
background: url(design/list.png) left no-repeat;
}
.menu nav ul li.first {
background:none;
}
.menu nav ul li a {
display: inline-block;
margin:15px 15px 0 15px;
padding:15px 0;
color:#303030;
font-family: 'Dosis';
font-style: normal;
font-weight: 400;
text-transform: uppercase;
text-decoration:none;
letter-spacing:1px;
}
.menu nav ul li a:hover {
color:#ffc000;
text-decoration: none;
transition: all .5s linear;
-o-transition: all .5s linear;
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
}
.menu nav ul li a:active {
color:#71e1b0;
}
section {
padding:20px;
}
img#logo{
float:left;
display: block;
margin:0;
padding:0;
-webkit-transition: width .5s;
}
#media screen and (max-width:1100px){
img#logo{
max-width:300px;
margin-left: 10px;
}
.menu{
width: 100%;
padding-top:10px;
padding:0;
font-size:15px;
float:right;
}
.menu nav ul li a {
margin:10px 15px 0 15px;
}
.menu nav {
width:100%;
max-width:100%;
margin:0 auto;
text-align: center;
z-index:1000;
}
#media screen and (max-width:800px){
img#logo{
display:none;
}
.menu nav {
max-width:250px;
height:100%;
right:-100%;
margin:0;
position: fixed;
background: #fff;
}
.menu nav ul li {
display:block;
float:none;
padding:0;
background:none;
}
.menu nav ul li a {
display:block;
padding:20px 20px 20px 0;
margin:0;
color:#303030;
font-family: 'Dosis', sans-serif;
font-size: 15px;
font-weight:400;
text-align: right;
text-transform: uppercase;
background: none;
border-right:4px solid #71e1b0;
}
.menu nav ul li a:hover {
color:#71e1b0;
text-decoration: none;
border-bottom:none;
}
.menu_bar {
display:block;
max-width:100%;
padding:15px;
background:#fff;
}
.menu_bar .bt-menu {
display:block;
padding:20px;
color:#33e873;
text-decoration:none;
text-align:right;
font-weight:bold;
font-size:27px;
}
img#logo-mobile{
float:left;
max-width:200px;
margin: 7px 0 0 10px;
padding:0;
}
menu.js
$(document).ready(main);
var contador = 1;
function main(){
$('.bt-menu').click(function(){
// $('nav').toggle();
if(contador == 1){
$('nav').animate({
right: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
right: '-100%'
});
}
});
}
script-menu.js
$(document).ready(function(){
$("#banner").css({"height":$(window).height() + "px"});
var flag = false;
var scroll;
$(window).scroll(function(){
scroll = $(window).scrollTop();
if(scroll > 100){
if(!flag){
$("#logo").css({"width": "200px"});
$(".menu").css({"top":"0", "margin":"0 auto", "padding":"0", "background-color": "#fff", "box-shadow": "0 1px 1px #71e1b0"});
flag = true;
}
}else{
if(flag){
$("#logo").css({"width": "400px",});
$(".menu").css({"top":"0", "margin":"0 auto", "padding":"0", "background-color":"transparent", "box-shadow": "none"});
flag = false;
}
}
});
});
This is the website: http://marsurftours.com/. I've tried everything and spent many hours trying to find a solution. If you know how to solve this issue, I would appreciate it. Thanks for the help!
I think you forgot to add js/ before menu.js
So instead
<script src="menu.js"></script>
Try
<script src="js/menu.js"></script>
You are trying to link a file in system storage , you need to link a url
example: www.stackoverflow.com/navigation.js

How to Widen My Website Without Recoding Everything

So, I'm not going to lie. I'm not a professional coder, I've learned everything I know from forums and I don't do things according to the book. I kind of cheat the system. Anyway, I've been editing a website on Enjin, it's a gaming platform where you can insert html/css modules that alter the layout and design. I've coded the entire thing, using divs and what-not for my friend's server. Once again I want to reiterate that I'm not a professional, I do it for fun and for free. Now, I'm in a predicament. I want to widen everything I've done, without going in and recoding all my divs since I used px to define them all. Here is my code, and I'll insert a link to the site. Any help will be appreciated..
[Here's the site] http://www.terracrafters.net/test
.m_minecraftserverstatus_new.preset_43030555 {
background-color: #1e2124;
opacity: .9;
border-radius: 0px;
border: 0px solid #ffffff;
margin-top: 10px;
}
BODY {
overflow-x:hidden;
}
.breaker {
opacity: 0;
}
.m_minecraftserverstatus_new.preset_43030555 .top-area {
background-color: #1e2124;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.body-wrap-3 {
background-repeat: no-repeat;
background-position: top;
background-image: url(https://assets-cloud.enjin.com/themes/1487945582_Background.png);
}
.body-wrap-3, #page {
min-width: 0 !important;
max-width: none !important;
}
#page-wrap {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
max-width: 1100px;
margin: 60px auto 30px;
}
.logo {
z-index: 10000000;
margin-top: -1px;
margin-left:38%;
margin-bottom: -65px;
}
.container {
margin-top: -16px;
}
body #site-body {
min-height: 750px;
max-width: 1100px !important;
margin: 0 auto;
background-image: url(https://scontent-iad3-1.xx.fbcdn.net/v/t35.0-12/17521938_1421397851215990_1860950770_o.png?oh=a7575fe8a4e2aca7bc01d19f859148e0&oe=58D973CA);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 2000px;
background-position-y: -260px;
background-position-x: 0px;
}
a, p, div, h1, h2, h3, h4, span {
font-family: MedievalSharp; sans-serif;
}
.abmpro {
background: transparent;
float: right;
margin-left: 800px;
margin-top: 105px;
z-index: 10000000;
position: absolute;
}
.navbar {
background-color: #1f4636;
height: 15px;
text-align: left;
color: black;
text-transform: uppercase;
padding: 25px;
font-size: 15px;
font-weight: 0px;
margin-bottom: -4%;
width: 67.35%;
margin-left: -.7%;
margin-top: 90px;
display: inline-block;
}
.navbar img{
left: 50%;
margin-top: -250px;
position: relative;
transform: translateX(-255.5%) translateY(40%);
}
.navbar a{
-webkit-text-emphasis-color: black;
color: white;
text-transform: uppercase;
padding: 25px;
height: 35px;
}
.navbar a:hover {
color: antiquewhite;
background-color:#1a1a1a;
text-transform: uppercase;
text-decoration:none;
width: 0;
transition: 0.4s ease-in;
-o-transition: 0.4s ease-in;
-ms-transition: 0.4s ease-in;
-moz-transition: 0.4s ease-in;
-webkit-transition: 0.4s ease-in;
overflow: hidden;
padding: 25px;
height: 35px;
}
.navbar p {
margin-bottom: -5px;
}
.abmhomeconent {
background-color: #452121;
margin-left: -11px;
margin-right: -11px;
margin-top: -5.1%;
margin-bottom: -39px;
}
.simple-ss {
border-bottom-left-radius: 5em;
border-bottom-right-radius: 5em;
width: 1100px;
height: 300px;
background-color: black;
margin-top: 23px;
margin-left: -11px;
background-image: url("http://i.imgur.com/vqs1TBE.jpg");
background-position: 0;
background-repeat: no-repeat;
background-size: cover;
animation-name: slide;
animation-duration: 10s;
animation-direction: normal;
animation-timing-function: linear;
animation-iteration-count: 1;
float: right;
margin-right: 470px;
margin-bottom:-5px;
animation-fill-mode:forwards;
}
#keyframes slide {
0% {background-position: 0 -100;}
50% {background-position: 0 -50px;}
100% {background-position: 0 0px;}
}
#enjin-bar .left {
display:inherit;
z-index:50000;
}
.m_html p {
min-height: 1.25em;
margin-bottom: -64px;
line-height: 1.25;
margin-left: 405px;
}
#enjin-bar {
right: .0%;
top: 7.55%;
text-transform: uppercase;
text-decoration: none;
font-family: 'Lato', sans-serif;
color: #8a8a8a;
position: absolute;
z-index:50000;
}
#page-footer {
display:none;
}
#page-footer left {
display: none;
}
#page-footer right {
display: none;
}
.container_body {
margin-top:-.2%;
margin-left:-.1%;
margin-right:-.1%;
}
.m_news.main {
position: relative;
margin-top: 10px;
}
.m_news {
background-color: #1e2124;
margin-left: .1%;
margin-right: 1%;
opacity: .9;
}
.m_news.main .float-manage,.m_news.main .float-rss {
margin-top:0px;
}
.m_news .heading {
background:#D8D8D8;
height:25px;
padding:20px;
}
.m_news.main .article.first .heading {
margin-right:0!important;
}
.m_news.main .heading .title, .m_news.viewarticle .heading .title {
font-size: 20px;
text-transform: uppercase;
padding-top: 2px;
margin-top: -5px;
}
.m_news .heading .title a {
color:#000;
font-weight:300!important;
}
.m_news .heading .info {
visibility:hidden;
}
.m_news .heading .info .date {
visibility:visible;
float:right;
position:relative;
top:-30px;
font-size:22px;
text-transform:uppercase;
color:#fff;
}
.m_news .article .article-content {
font-size:14px;
line-height:20px;
text-align:justify;
padding-bottom:10px;
}
.m_news.viewarticle .m_plugin_comment {
width:94%;
margin:50px auto 0 auto;
}
.m_news.viewarticle .m_plugin_comment .block-title {
background:transparent;
border-bottom:2px solid #FFA62F;
color:#FFA62F;
}
.m_news .article .heading .element_avatar {
margin-top: -2.4%;
margin-left:-6px;
}
.post_interact_like_list {
width:100px;
}
.post_interact_like_list_hidden{
width:100px;
}
#boot_admin{
margin-top:0px;
}
#boot_admin a:nth-child(1){
display:none;
}
#boot_profile{
height:30px;
}
#boot_profile .element_username{
color: black !important;
text-decoration:none !important;
}
#boot_profile span:hover{
background-color: transparent;
color: rgb(51, 51, 51) !important;
text-decoration: none;
}
/*Changes our enjin dropdown caret to something that is close to twitter's caret object(Part 2 for border)*/
#enjin-bar .arrow:after{
border-top:6px solid transparent;
border-top-color:rgba(255, 255, 255);
border-right:6px solid transparent;
border-bottom:6px solid transparent;
border-left:6px solid transparent;
top:3px;
}
/*Changes the style of our entire dropdown box to mimick Boot strap style*/
.element_dropdown_menu.element_popup.enjinbar-menu{
margin-top:26px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
border:1px solid #ccc;
border:1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
z-index:99999;
color:black;
}
/*Our inner elements of our entire enjin drop down*/
.element_popup .inner {
background-color: white !important;
margin-left:10px;
text-decroation:none;
padding:0px 0;
margin:-1px -25px 0;
list-style:none;
border:solid gray 1px;
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box;
color:black;
}
/*Text - Our inner elements of our entire enjin drop down*/
.element_popup .inner li a{
color:#333;
font-size:12px;
font-family:Arial;
padding:6px 20px !important;
}
/*Text - Hover - Our inner elements of our entire enjin drop down*/
.element_popup .inner .menu-link:hover{
text-decoration:none;
color:#ffffff;
background-color:#0081c2;
background-image:-moz-linear-gradient(top, #0088cc, #0077b3);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);
background-image:-o-linear-gradient(top, #0088cc, #0077b3);
background-image:linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
/*Enjin Divider lines to look...better*/
.element_popup .inner .menu-divider-line{
background-color: #E5E5E5 !important;
border-bottom: 1px solid white !important;
height:1px !important;
opacity:0.4;
}
/*Profile drop down item hover events*/
.element_popup .inner .item:hover{
background-color: rgb(0, 129, 194);
background-image: linear-gradient(to bottom, rgb(0, 136, 204), rgb(0, 119, 179));
}
/*Profile drop down text style*/
.element_popup .inner .item a{
text-decoration:none;
font-weight: normal;
margin-bottom:-5px; /*Reduces some spacing..since menu is huge*/
color: rgb(51, 51, 51);
font-family:arial;
}
/*Profile drop down text style - hover*/
.element_popup .inner .item a:hover{
color: rgb(255, 255, 255);
}
/*Font,text - Our site box at bottom of profile dropdown*/
.sitebox a {
font-size:10px !important;
color:#333;
margin-left:-20px;
background-color:transparent;
}
/*Font,text, make less default space - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox{
margin-bottom:10px;
}
/*That damn gear! - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox .gear {
background-position: 40px 0px; /*Removes Enjin's mysterious extra icons*/ }
/*Text for site urls - Our site box at bottom of profile dropdown*/
.sitebox .url{
color:#333;
}
/*Our visible username text*/
#enjin-bar .element_username{
color:#000;
text-decoration:none;
}
/*Removes our likes etc.*/
#enjin-bar #enjin-bar-likes{
display:none !important;
}
/*Removes site info,site name and our admin gear*/
#enjin-bar .left a:nth-of-type(1),#enjin-bar .left a:nth-of-type(2),#enjin-bar .left a:nth-of-type(3){
display:none !important;
}
/*creates a default right position for our admin, fixed, position manually on your fixed nav*/
#enjin-bar .left{
margin-top:8px;
z-index:9999;
margin-left:530px;
position:fixed;
}
/*Our admin text on hover*/
#enjin-bar .left a:hover{
color: rgb(51, 51, 51);
text-decoration:none;
}
.sitebox {
display:none;
}
/*END Enjin bar nav positioning*/
/*profile*/
.v2_system_social .widget_owner {
padding: 5px;
font-size: 14px;
padding-bottom: 25px;
}
.v2_system_social .middle_inner, .v2_system_social .sidebar_widget_inner, .v2_system_social .profile_menu .menu_popup_inner {
border: 0px;
border-color: transparent;
padding: 1px;
}
.v2_system_social table.header .cover {
display: inline-block;
vertical-align: middle;
text-align: left;
width: 100%;
height: 173px;
max-width: 898px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0.2);
background-repeat: no-repeat;
background-position: -1px -1px;
position: relative;
}
.v2_system_social table.header .avatar {
width: 173px;
height: 173px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0.2);
background-repeat: no-repeat;
background-position: -1px -1px;
}
.v2_system_social .middle {
margin: 0 400px 0 78px;
border-radius: 0px;
min-height: 600px;
}
.v2_system_social .sidebar_widget {
width: 383px;
border-radius: 0px;
margin-bottom: 15px;
}
.sidebar_widget {
background-color: #613D41;
}
body.liquid .v2_system_social {
max-width: 1090px;
min-width: 954px;
margin: 0 auto;
width: 1067px;
}
#avatar img {
max-width: 100%;
border-style: solid;
border-width: 0px;
/* float: right; */
z-index: 1;
margin-top: -2.8%;
/* margin-left: 700px; */
float: right;
position: relative;
}
.m_pointsdisplay {
display:none;
}
.v2_system_social .wall .share_closed, .v2_system_social .wall .share, .v2_system_social .wall .share_add_container {
background-color: #ffffff;
border: 1px solid;
border-color: #1a1a1a;
width: 67%;
}
.v2_system_social .widget_owner .logo {
float: left;
width: 74px;
margin-right: 10px;
border-radius: 0px;
overflow: hidden;
}
.container_body .container_right {
/* background-image: url(https://assets-cloud.enjin.com/themes/1350633694_re.png); */
/* width: 13px; */
/* background-color: transparent; */
}
.m_shoutbox {
width: 100%;
background-color: #1e2124;
opacity: .9;
}
#media screen and (min-width: 1024px)
(index):477
#enjin-bar .left {
display:none;
}
#boot_admin{
margin-top:0px;
}
#boot_admin a:nth-child(1){
display:none;
}
#boot_profile{
height:30px;
}
#boot_profile .element_username{
color: black !important;
text-decoration:none !important;
}
#boot_profile span:hover{
background-color: transparent;
color: rgb(51, 51, 51) !important;
text-decoration: none;
}
/*Changes our enjin dropdown caret to something that is close to twitter's caret object(Part 2 for border)*/
#enjin-bar .arrow:after{
border-top:6px solid transparent;
border-top-color:rgba(255, 255, 255);
border-right:6px solid transparent;
border-bottom:6px solid transparent;
border-left:6px solid transparent;
top:3px;
}
/*Changes the style of our entire dropdown box to mimick Boot strap style*/
.element_dropdown_menu.element_popup.enjinbar-menu{
margin-top:26px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
border:1px solid #ccc;
border:1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
z-index:99999;
color:black;
}
/*Our inner elements of our entire enjin drop down*/
.element_popup .inner {
background-color: white !important;
margin-left:10px;
text-decroation:none;
padding:0px 0;
margin:-1px -25px 0;
list-style:none;
border:solid gray 1px;
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box;
color:black;
}
/*Text - Our inner elements of our entire enjin drop down*/
.element_popup .inner li a{
color:#333;
font-size:12px;
font-family:Arial;
padding:6px 20px !important;
}
/*Text - Hover - Our inner elements of our entire enjin drop down*/
.element_popup .inner .menu-link:hover{
text-decoration:none;
color:#ffffff;
background-color:#0081c2;
background-image:-moz-linear-gradient(top, #0088cc, #0077b3);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);
background-image:-o-linear-gradient(top, #0088cc, #0077b3);
background-image:linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
/*Enjin Divider lines to look...better*/
.element_popup .inner .menu-divider-line{
background-color: #E5E5E5 !important;
border-bottom: 1px solid white !important;
height:1px !important;
opacity:0.4;
}
/*Profile drop down item hover events*/
.element_popup .inner .item:hover{
background-color: rgb(0, 129, 194);
background-image: linear-gradient(to bottom, rgb(0, 136, 204), rgb(0, 119, 179));
}
/*Profile drop down text style*/
.element_popup .inner .item a{
text-decoration:none;
font-weight: normal;
margin-bottom:-5px; /*Reduces some spacing..since menu is huge*/
color: rgb(51, 51, 51);
font-family:arial;
}
/*Profile drop down text style - hover*/
.element_popup .inner .item a:hover{
color: rgb(255, 255, 255);
}
/*Font,text - Our site box at bottom of profile dropdown*/
.sitebox a {
font-size:10px !important;
color:#333;
margin-left:-20px;
background-color:transparent;
}
/*Font,text, make less default space - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox{
margin-bottom:10px;
}
/*That damn gear! - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox .gear {
background-position: 40px 0px; /*Removes Enjin's mysterious extra icons*/ }
/*Text for site urls - Our site box at bottom of profile dropdown*/
.sitebox .url{
color:#333;
}
/*Our visible username text*/
#enjin-bar .element_username{
color:#000;
text-decoration:none;
}
/*Removes our likes etc.*/
#enjin-bar #enjin-bar-likes{
display:none !important;
}
/*Removes site info,site name and our admin gear*/
#enjin-bar .left a:nth-of-type(1),#enjin-bar .left a:nth-of-type(2),#enjin-bar .left a:nth-of-type(3){
display:none !important;
}
/*creates a default right position for our admin, fixed, position manually on your fixed nav*/
#enjin-bar .left{
margin-top:8px;
z-index:9999;
margin-left:530px;
position:fixed;
}
/*Our admin text on hover*/
#enjin-bar .left a:hover{
color: rgb(51, 51, 51);
text-decoration:none;
}
/*END Enjin bar nav positioning*/
I think it's safe to say no one is going to read allllll that css ;) but having a quick look at your site, there are two obvious things to change. This is all of course dependent on what you mean by widen everything. But you have both body #site-body and #page-wrap set to max-width:100px.
You could remove this, or alter it, and it will stretch your main content across the page. I suspect there is something for higher up the page too with the image and menu.
I would also look to reduce the amount of !importants you have in there as they can get you into all sorts of hassles with trying to work out your styling. Hope that helps!

navigation on media cant get 100% width

My navigation cant get a full width on media, I tried every way and cant locate where my mistake is, so I attached you the code, please if any one have an idea how to solve this, and set the width to full width = 100%?
The HTML
<nav class="navi" id="target">
<div class="menu" id="header">
<li><a class="link-1" href="#">home</a></li>
<li><a class="link-1" href="#">second</a></li>
<li><a class="link-1" href="#">third</a></li>
<div class="logo">
<li><img alt="Brand" src="logo.png" height="40px" width="60px"><li>
</div>
</div>
<div class="handle"><p>menu</p></div>
</nav>
The CSS:
nav {
width:100%;
margin-top: 0;
padding: 10px;
text-align: center;
font-family: arial;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
position:fixed;
text-align:right;
z-index:10;
}
nav li{
display: inline;
}
nav ul{
min-height:20px;
}
.navi{
background: rgba(0,0, 0, 0.5);
}
.navi:hover{
background-color: rgba(0,0,0, 1);
}
.link-1 {
transition: 0.3s ease;
color: #fff;
font-size: 16px;
text-decoration: none;
border-top: 1px solid ;
text-align:right;
padding: 20px 0px;
margin: 0 20px;
font-weight: italic;
letter-spacing:2px;
}
.link-1:hover {
border-top: 2px solid #fff;
text-decoration: none;
color:#fff;
padding: 3px 6px;
}
.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;
}
.menu {display:block;
}
.handle {display:none;}
/*media try*/
#media (max-width: 580px) {
#target{
}
nav {
width:100%;
margin-top: 0;
display:block;
max-height:0;
margin-top:-20px;
padding-top:18px;
padding-right:-20%;
}
nav li{
display:block;
padding:10px;
background:#000;
}
.navi{
background: rgba(0,0, 0, 0.9);
text-align:center;
border:0;
background:#000;
}
.navi:hover{
background-color: rgba(0,0,0, 1);
border:0;
}
.link-1 {
border:0px solid #bbb;
font-size:18px;
}
.link-1:hover {
text-decoration:underline;
border:0px solid #bbb;
}
.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;
display: none;
}
.menu {display:none;
}
.handle {display:block;
color:#fff;
font-size:40px;
text-decoration:none;
text-align:right;
}
.handle:hover{
}
.handle p{
color:#fff;
cursor: pointer;
-webkit-text-stroke: 1px black;
-webkit-font-smoothing: antialiased;
}
}
I fixed the HTML.
Add box-sizing: border-box; for nav.
ul tag is missing in your html.
Also make sure to remove the default padding and margin for ul.
nav ul{ padding: 0; margin:0;}
To stretch menu to full width of the window, apply the bg colour for nav, Or remove the padding:10px from nav.

changing the button movement on scroll using css and js

I have tried a lot and have reached till here. what wrong is going on i don't understand. where i am missing. please see to it. I want the button request a proposal to change its position form horizontal to vertical when we scroll down.I want that css class .vertical-pos and .head__get-in-touch-wrap to change by function. Thanks in advance
$(function() {
var span = $(".head__get-in-touch-wrap");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
span.removeClass('head__get-in-touch-wrap').addClass("vertical-pos");
} else {
span.removeClass("vertical-pos").addClass('head__get-in-touch-wrapr');
}
});
});
html, body {
height: 100%;
-webkit-font-smoothing: subpixel-antialiased;
}
body {
background: white;
display: block;
margin: 0px;
}
.main-menu {
float: right;
padding-top: 2%;
padding-right: 5%;
padding-left: 0;
margin: -90px 235px 0 0 !important;
list-style: none;
transition: opacity .6s 2.5s;
font-weight: 700;
}
.navbar--inverted .main-menu__item {
color: #000;
}
.main-menu__item {
display: inline-block;
margin: 0 10px;
font: 400 15px/20px 'Oswald',sans-serif;
letter-spacing: .5px;
word-spacing: 1px;
text-transform: uppercase;
color: #fff;
transition: opacity .3s ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.main-menu__item--request {
border:1px solid black;
cursor:pointer;
display:inline-block;
margin-right:0;
padding:15px 30px;
}
.main-menu__item > a {
color:black;
text-decoration:none;
font-weight: 700;
}
a {
background-color:transparent;
text-decoration:none;
}
a:active, a:hover {
outline:0;
color:#C1C1C1;
}
.menu-toggle {
position: absolute;
right: 4%;
display: none;
width: 44px;
height: 56px;
background: 0 0;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
border: 0 none;
padding: 4% 0 20px 20px;
z-index: 1;
align-items: flex-start;
}
.menu-toggle:hover{
color:#C1C1C1;
}
.logo{
margin:20px;
}
.main-block__line {
background:#171717;
display:none;
height:5px;
left:5%;
margin-left:15px;
position:absolute;
top:550px;
width:20px;
z-index:10;
}
.head__menu-btn__wrap {
display:block;
margin:-25px -40px 0 0;
position:fixed;
right:5%;
top:47px;
width:226px;
z-index:999;
}.head__menu-btn {
-webkit-transition:all 0.1s ease;
background-image:url(../pixster/menu-btn.png);
background-position:0 0;
background-repeat:no-repeat;
background-size:45px 45px;
cursor:pointer;
display:block;
height:45px;
position:absolute;
right:0;
top:0;
transition:all 0.1s ease;
width:45px;
z-index:999;
}
.head__get-in-touch-wrap {
-webkit-transform-origin:203px 23px 0 !important;
-webkit-transition-duration:0.5s!important ;
-webkit-transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21)!important ;
display:block;
height:45px;
left:0;
position:absolute !important;
top:0;
transform-origin:203px 23px 0;
transition-duration:0.5s;
transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21);
width:146px;
}
.vertical-pos{
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.head__get-in-touch {
-webkit-transition:all 0.1s ease;
background-color:#0072F6;
border:none;
color:#FFFFFF;
display:block;
font-size:12px;
font-weight:600;
letter-spacing:2.5px;
margin-top:0;
padding:15px 0;
text-align:center;
text-transform:uppercase;
transition:all 0.1s ease;
width:146px;
}
<header class="logo">
<img src="../pixster/logo.png" alt="Pixster Studio" />
</header>
<span class="main-block__line">
</span>
<div class="head__menu-btn__wrap">
<span class="head__menu-btn open-main-menu-button">
</span>
<span class="head__get-in-touch-wrap">
Request a proposal
</span>
</div>
<ul class="main-menu in-view">
<li class="main-menu__item">About</li>
<li class="main-menu__item">Services</li>
<li class="main-menu__item">Work</li>
<li class="main-menu__item">Blog</li>
<li class="main-menu__item">Contact</li>
</ul>
<button data-menu-button="" type="button" class="menu-toggle">
<span class="menu-toggle__lines"></span>
</button>
See the fiddle : http://jsfiddle.net/sachinkk/p3x9k67d/
Change the css to:
.head__get-in-touch-wrap {
display: inline-block;
-webkit-transform-origin:203px 23px 0 !important;
-webkit-transition-duration:0.5s!important ;
-webkit-transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21)!important ;
display:block;
height:45px;
left:0;
position:absolute !important;
top:0;
transform-origin:203px 23px 0;
transition-duration:0.5s;
transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21);
width:146px;
}
JS to :
$(function() {
var span = $(".head__get-in-touch-wrap");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 10) {
span.addClass("vertical-pos");
} else {
span.removeClass("vertical-pos");
}
});
});
snippet code : ignore
$(function() {
var span = $(".head__get-in-touch-wrap");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 10) {
span.addClass("vertical-pos");
} else {
span.removeClass("vertical-pos");
}
});
});
html, body {
height: 100%;
-webkit-font-smoothing: subpixel-antialiased;
}
body {
background: white;
display: block;
margin: 0px;
}
.main-menu {
float: right;
padding-top: 2%;
padding-right: 5%;
padding-left: 0;
margin: -90px 235px 0 0 !important;
list-style: none;
transition: opacity .6s 2.5s;
font-weight: 700;
}
.navbar--inverted .main-menu__item {
color: #000;
}
.main-menu__item {
display: inline-block;
margin: 0 10px;
font: 400 15px/20px 'Oswald',sans-serif;
letter-spacing: .5px;
word-spacing: 1px;
text-transform: uppercase;
color: #fff;
transition: opacity .3s ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.main-menu__item--request {
border:1px solid black;
cursor:pointer;
display:inline-block;
margin-right:0;
padding:15px 30px;
}
.main-menu__item > a {
color:black;
text-decoration:none;
font-weight: 700;
}
a {
background-color:transparent;
text-decoration:none;
}
a:active, a:hover {
outline:0;
color:#C1C1C1;
}
.menu-toggle {
position: absolute;
right: 4%;
display: none;
width: 44px;
height: 56px;
background: 0 0;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
border: 0 none;
padding: 4% 0 20px 20px;
z-index: 1;
align-items: flex-start;
}
.menu-toggle:hover{
color:#C1C1C1;
}
.logo{
margin:20px;
}
.main-block__line {
background:#171717;
display:none;
height:5px;
left:5%;
margin-left:15px;
position:absolute;
top:550px;
width:20px;
z-index:10;
}
.head__menu-btn__wrap {
display:block;
margin:-25px -40px 0 0;
position:fixed;
right:5%;
top:47px;
width:226px;
z-index:999;
}.head__menu-btn {
-webkit-transition:all 0.1s ease;
background-image:url(../pixster/menu-btn.png);
background-position:0 0;
background-repeat:no-repeat;
background-size:45px 45px;
cursor:pointer;
display:block;
height:45px;
position:absolute;
right:0;
top:0;
transition:all 0.1s ease;
width:45px;
z-index:999;
}
.head__get-in-touch-wrap {
display: inline-block;
-webkit-transform-origin:203px 23px 0 !important;
-webkit-transition-duration:0.5s!important ;
-webkit-transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21)!important ;
display:block;
height:45px;
left:0;
position:absolute !important;
top:0;
transform-origin:203px 23px 0;
transition-duration:0.5s;
transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21);
width:146px;
}
.vertical-pos{
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.head__get-in-touch {
-webkit-transition:all 0.1s ease;
background-color:#0072F6;
border:none;
color:#FFFFFF;
display:block;
font-size:12px;
font-weight:600;
letter-spacing:2.5px;
margin-top:0;
padding:15px 0;
text-align:center;
text-transform:uppercase;
transition:all 0.1s ease;
width:146px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="logo">
<img src="../pixster/logo.png" alt="Pixster Studio" />
</header>
<span class="main-block__line">
</span>
<div class="head__menu-btn__wrap">
<span class="head__menu-btn open-main-menu-button">
</span>
<span class="head__get-in-touch-wrap">
Request a proposal
</span>
</div>
<ul class="main-menu in-view">
<li class="main-menu__item">About</li>
<li class="main-menu__item">Services</li>
<li class="main-menu__item">Work</li>
<li class="main-menu__item">Blog</li>
<li class="main-menu__item">Contact</li>
</ul>
<button data-menu-button="" type="button" class="menu-toggle">
<span class="menu-toggle__lines"></span>
</button>
try add to the span an id attribute, so you can reach it more clearly,the id stays while you change the class
<span class="head__get-in-touch-wrap" id="foo">
also attach the scroll event to the window with on():
var span = $("#foo");
$(window).on("scroll", function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
span.removeClass('head__get-in-touch-wrap').addClass("vertical-pos");
} else {
span.removeClass("vertical-pos").addClass('head__get-in-touch-wrapr');
}
});

Div pushing sibling Div's contents

I have 2 divs nested in the body (a) and (b). Div (b) has a negative top margin so it sits on top of div (a).
Everything's fine except the content's of div (b) are stuck a the bottom, below div (a) as it would appear the css properties of their parent have not affected them.
Here's the html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
<script src="js/jquery-1.9.1.min.js"></script>
<link href="css/carousel.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-menu">
<div class="container">
<div class="logo"><img src="img/logo.png" alt="logo"></div>
<ul class="nav">
<li>who we are</li>
<li>what we do</li>
</ul>
<input type="text" placeholder="login/register" class="header-login">
<button type="submit" class="header-btn"></button>
<span class="za"><img src="img/south-africa.png"></span>
<span class="sng"><img src="img/singapore.png"></span>
</div>
</div>
<div class="carousel-main">
<div id="myCarousel" class="carousel slide">
<div class="container">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
<div class="carousel-inner home-carousel">
<div class="item active">
<img src="img/1.jpg">
<div class="container">
<div class="carousel-caption">
<h3>Risk Management and<br>
Business Finance made simple. </h3>
</div>
</div>
</div>
<div class="item">
<img src="img/2.jpg">
<div class="container">
<div class="carousel-caption">
<h3>Manage my company.</h3>
</div>
</div>
</div>
<div class="item">
<img src="img/3.jpg">
<div class="container">
<div class="carousel-caption">
<h3>Investing my money.</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sub-menu">
<ul>
<li>finance</li>
<li>Manage</li>
<li>invest</li>
</ul>
</div>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 9000
});
$('#myCarousel').carousel('pause');
});
</script>
</body>
</html>
Here's the style.css
#charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900);
html, body
{
width:100%;
height:100%;
font-family: 'Source Sans Pro', sans-serif !importantsa;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.top-menu
{
height:70px;
width:100%;
}
.logo
{
height:100%;
width:277px;
float:left;
}
.logo img
{
height:100%;
}
.container
{
width:960px;
margin:0 auto;
position:relative;
}
.top-menu .nav
{
float:left;
}
.top-menu ul li
{
display:inline-block;
padding:30px 10px;
text-transform:uppercase;
font-family: 'Source Sans Pro', sans-serif;
color:#808184;
}
.header-login
{
font-family: 'Source Sans Pro', sans-serif;
margin:25px;
padding-left:10px;
font-size:17px;
text-transform:uppercase;
background-color:#ededed;
border:none;
max-width:140px;
float:left;
}
.header-btn
{
height:30px;
width:30px;
background-image:url(../img/login.png);
background-color:transparent;
border:none;
margin-top:22px;
margin-left:-20px;
margin-right:30px;
float:left;
}
.top-menu span
{
margin-top:27px;
float:left;
margin-left:10px;
}
.sub-menu
{
width:100%;
height:170px;
margin-top:-280px;
background-color:rgba(247,148,30,0.6);
z-index:2;
}
.sub-menu ul
{
margin:0 auto;
width:600px;
height:100%;
}
.sub-menu ul li
{
display:inline-block;
height:200px;
width:190px;
text-transform:uppercase;
color:#fff;
}
Here's the carousel.css:
#charset "UTF-8";
/* CSS Document */
.carousel {
margin-bottom: 20px;
line-height: 1;
float:left;
z-index:-1;
}
.carousel-inner {
position: relative;
width: 100%;
height:700px;
overflow: hidden;
z-index:-1;
}
.carousel-inner > .item {
position: relative;
display: none;
overflow: hidden;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
height:100%;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-indicators {
position: absolute;
top:600px;
right:0;
z-index: 5;
margin: 0 auto;
list-style: none;
}
.carousel-indicators li {
display: block;
float: left;
width: 20px;
height: 20px;
margin-left: 5px;
text-indent: -999px;
background-image:url(../img/indicator.png);
background-repeat:no-repeat;
opacity:0.6;
}
.carousel-indicators .active {
opacity:1;
}
.slider
{
height:700px;
width:800px;
margin: 0 auto;
margin-bottom:20px;
}
.slider img
{
width:100%;
}
.carousel-main
{
height:700px;
background-color: transparent;
margin: 0 auto;
width:100%;
}
.home-carousel > .item > img, .home-carousel > .item > a > img {
display: block;
line-height: 1;
min-height:100%;
width:100%;
max-height:100%;
}
.inner-carousel > .item > img, .inner-carousel > .item > a > img {
display: block;
line-height: 1;
height:350px;
width:800px;
}
.carousel-caption {
position: absolute;
top: -400px;
font-family: 'Source Sans Pro', sans-serif;
}
.carousel-caption h3 {
font-weight:900;
font-size:45px;
line-height:44px;
letter-spacing:-1px;
color:#fff;
text-shadow: rgba(0,0,0, 0.5) 1px 1px 2px;
}
.carousel-caption p {
font-weight:100;
font-size:18px;
line-height:38px;
margin-top:-30px;
}
.carousel-main #myCarousel
{
width:100%;
height:700px;
margin: 0 auto;
margin-bottom:-200px;
}
.carousel-control {
position: absolute;
top: 400px;
left: 0px;
width: 60px;
height: 60px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background-image:url(../img/leftarrow.png);
background-size:cover;
background-color:transparent;
border: 0px solid rgb(255, 255, 255);
border-radius: 100px;
opacity: 1;
filter: alpha(opacity=50);
transition: all 2s ease-in-out;
-webkit-transition: all .6s ease-in-out; /** Chrome & Safari **/
-moz-transition: all .6s ease-in-out; /** Firefox **/
-o-transition: all .6s ease-in-out;
}
.carousel-control.right {
right:0;
left: auto;
background-image:url(../img/rightarrow.png);
}
.carousel-control:hover {
color: rgb(255, 255, 255);
opacity:.6;
text-decoration: none;
}
.carousel-control:focus {
background-color:none;
text-decoration: none;
opacity: 0.9;
}
.home-carousel .carousel-caption h4 {
font-weight:500;
font-size:29px;
color:#F7F4ED;
line-height:35px;
margin: 20px 0 20px;
text-align:center;
}
.home-carousel .carousel-caption .introduction {
font-weight:300;
font-size:13px;
line-height:19px;
text-align:center;
margin:0 auto;
color:#F7F4ED;
height:200px;
width:250px;
}
#media (max-width: 1030px) {
.carousel-control {
position: absolute;
bottom:0;
left: 0px;
margin-top:225px;
width: 60px;
height: 60px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background-image:url(../img/leftarrow.png);
background-size:cover;
background-color:#474C71;
border: 0px solid rgb(255, 255, 255);
border-radius: 0px;
opacity: 1;
filter: alpha(opacity=50);
transition: all 2s ease-in-out;
-webkit-transition: all .6s ease-in-out; /** Chrome & Safari **/
-moz-transition: all .6s ease-in-out; /** Firefox **/
-o-transition: all .6s ease-in-out;
}
.carousel-control.right {
left: 61px;
background-image:url(../img/rightarrow.png);
}
}
Here's a working version of the same:
http://deeptest.co.za/apexpeak/
Please help and thank you
Your content is at the bottom because element with class name 'carousel' (this element with id='myCarousel') has set to:
float: left;
it is in carousel.css on line 3.
Margins (and thus, negative margins) are handled differently for floated and inline elements than they are for non-floated block-level elements.
If you want to use this method to position the sub-menu you will need to add
float: left;
to the sub-menu div and its siblings
so:
.carousel-main, top-menu, #myCarousel{
float: left;
}
or similar in the correct place in your existing CSS.
.sub-menu {
width: 100%;
height: 200px;
/*margin-top: -280px; - REMOVE THIS */
background-color: rgba(247, 148, 30, 0.4);
z-index: 2;
/* ADD THE FOLLOWING */
position: relative;
top: -280px;
}

Categories