My dropdown CSS menu works fine when I open it in mobile view, but stays there when I resize the window in my browser. When I try to get rid of it in my CSS media query, the dropdown doesn't work at all..
function showmenu(){
var menu = document.getElementById('mobile-menu'), maxH="148px";
if (menu.style.height == maxH){
menu.style.height = "0px";
}else{
menu.style.height = maxH;
}
}
#media(max-width: 1024px){
.col-tab1{
width: 8.33333333333%;
float: left;
}
.col-tab2{
width: 16.6666666667%;
float: left;
}
.col-tab3{
width: 25%;
float: left;
}
.col-tab4{
width: 33.3333333333%;
float: left;
}
.col-tab5{
width: 41.6666666667%;
float: left;
}
.col-tab6{
width: 50%;
float: left;
}
.col-tab7{
width: 58.3333333333%;
float: left;
}
.col-tab8{
width: 66.6666666667%;
float: left;
}
.col-tab9{
width: 75%;
float: left;
}
.col-tab10{
width: 83.3333333333%;
float: left;
}
.col-tab11{
width: 91.6666666667%;
float: left;
}
.col-tab12{
width: 100%;
float: left;
}
.mobile{
display: none;
}
.desktop{
display: none;
}
.tablet{
display: block;
}
#nav-toggle{
width:50px;
float:right;
color:white;
margin:25px;
display:block;
}
nav ul{
list-style-type: none;
margin:auto;
width:500px;
height:100%;
display:none;
}
#mobile-menu{
display:none;
}
}
<body>
<nav>
<span onclick="showmenu('mobile-menu')"></span>
<div id="nav-logo">
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>
<div id="bar5"></div>
<div id="bar6"></div>
<div id="bar7"></div>
</div>
<ul>
<li><p>ABOUT</p></li>
<li><p>WORK</p></li>
<li><p>SERVICES</p></li>
<li><p>CONTACT</p></li>
</ul>
</nav>
<div id="mobile-menu">
<ul>
<li><p>ABOUT</p></li>
<li><p>WORK</p></li>
<li><p>SERVICES</p></li>
<li><p>CONTACT</p></li>
</ul>
</div>
</body>
Related
Whenever I hover the image, the caption won't show up..
please correct my CSS below.
what should I change?
thanks, cheer!
.gallery-item {
float: left;
width: 14.25%;
cursor: pointer;
}
.caption{
display: none;
}
.gallery-item .caption:hover{
display: block;
}
.gallery-item img {
padding-left: 5px;
height:200px;
width:100%;
}
<div class="gallery-item">
<img src="images/event-1.jpg" alt="Sunday">
<div class="caption">Lorem Ipsum</div>
</div>
Put the :hover in .gallery-item instead
.gallery-item {
float: left;
width: 14.25%;
cursor: pointer;
}
.caption{
display: none;
}
.gallery-item:hover .caption{
display: block;
}
.gallery-item img {
padding-left: 5px;
height:200px;
width:100%;
}
<div class="gallery-item">
<img src="images/event-1.jpg" alt="Sunday">
<div class="caption">Lorem Ipsum</div>
</div>
What happens in your code is that you putting the hover selector to an element that has display:none, which means you can't select it at all
i have the following code:
see in http://jsfiddle.net/bniya_dev/SYPNC/2/
<div>
<div id="mainHeader">
<div id="details1">
<span>details1</span>
</div>
<div id="details2">
<span>details2</span>
</div>
</div>
<div id="header">
<span>header </span>
</div>
</div>
css
div#details1
{
float:left; width:100px;
}
div#details2
{
float:right;
}
I want it to look like the following picture:
What style I should set?
I want it to work in all browsers even mobile browsers
http://jsfiddle.net/bniya_dev/SYPNC/2/
Try this:
You need to clear floats before header.
.clr{clear:both;}
DEMO
* {
margin: 0;
font-family: Arial ;
font-size: 35px;
line-height: 65px;
}
div#mainHeader {
width: 777px;
height: 65px;
background-color: aqua;
text-align: right;
}
div#details1 {
width: 620px;
height: 65px;
background-color: #ED1C24;
float: left;
}
div#details2 {
width: 157px;
height: 65px;
background-color: #22B14C;
float: left;
text-align: center;
}
div#header {
text-align: left;
}
This is the Demo
Maybe you should change the font by yourself (*^__^*)...
Try this one:
http://jsfiddle.net/SYPNC/9/
This should match your requirements. You can still adjust the width of your header1/header2
Give width for below in percentage according to your requirement
div#details1
{
float:left; width:90%;
}
Your html,css both should be change like bellow
HTML
<div id="details1"> <span>details1</span>
</div>
<div id="details2"> <span>details2</span>
</div>
<div id="header"> <span>header </span>
</div>
CSS
body{
width:500px;
}
#details1 {
float:left;
width:300px;
height:50px;
background-color:red;
}
#details2 {
float:right;
width:200px;
height:50px;
background-color:green;
}
DEMO
Try this:
div#details1
{
float:left;
background: red;
width: 90%;
text-align: right;
}
div#details2
{
float:right;
background: green;
width: 10%;
}
#header{
clear: both;
}
demo
But better way to markup like this.....
<div id="mainHeader">
<div id="details">
<span class="one">detail1</span>
<span class="two">detail2</span>
</div>
Then you can float: right; to #details
Super weird: For some reason, my site's front page layout (CSS) shifts to the right on a mobile device when it's supposed to be centered? See: http://www.stylerepublicmagazine.com
Does anyone know why this is? I've seen this error on other forums, but no one seems to have a solid fix for it.
Here's the main portion of the stylesheet for my template:
#wrapper {
position:absolute;
width:100%;
margin: 0, auto;
margin-top:60px;
}
#socialmedia {
float:right;
}
#topbanner {
margin-left:180px;
width:990px;
}
#magnavigation {
position:absolute;
margin-top:150px;
margin-left:150px;
}
#featureslides {
position:absolute;
margin-top:240px;
margin-left:190px;
width:1000px;
}
div.img
{
padding-top:40px;
margin: 0px;
height: 150px;
width: 150px;
float: left;
text-align: left;
vertical-align:top;
padding-right:62px;
}
div.imglast
{
padding-top:40px;
margin: 0px;
height: 150px;
width: 150px;
float: left;
text-align: left;
vertical-align:top;
}
div.img img
{
display: inline;
margin: 3px;
}
div.articlename {
padding-top:5px;
font-family:'Oswald', sans-serif;
font-size:1.4em;
}
div.desc
{
padding-top:5px;
text-align: left;
font-family:helvetica;
font-size:1em;
font-weight: normal;
width: 140px;
margin: 0px;
padding-bottom:100px;
}
#morefeatures {
margin-top:180px;
float:left;
width:685px;
padding-right:15px;
padding-bottom:20px;
}
#adverts {
width:300px;
float:right;
margin-top:180px;
}
.FrontHeading {
font-family: 'Oswald', sans-serif;
font-size:30px;
padding-bottom:5px;
}
Thanks,
B
You're declaring a lot of margin-left properties which causes the elements to shift to the right.
Before and after removing the margins on the left.
As some others pointed out, you're simply using too many position: absolute properties in your CSS and basically, you've tuned your layout for one resolution (1440 wide). For example, on my resolution of 1920x1080, your layout appears on the left.
You can fix this by removing all position: absolute properties and using substitutes. For example, for the main column, you should be using margin: 0 auto, which will center it.
I've created an example of a layout you can use, to get an idea of the various types of positioning you'll want to use for your layout. I essentially duplicated the layout (more or less) using different properties that should scale across resolutions and devices.
The Fiddle
HTML
<div id='wrapper'>
<div id='banner'>
Your logo
<div id='social'>FACEBOOK | TWITTER</div>
</div>
<div id='slides'><img src='http://placekitten.com/500/200'/></div>
<div class='news'>News item 1</div>
<div class='news'>News item 2</div>
<div class='news'>News item 3</div>
<div class='news'>News item 4</div>
<div class='news last'>News item 5</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div style='clear: both'></div>
</div>
CSS
#wrapper {
width: 500px;
margin: 0 auto;
font: 18px sans-serif;
}
#banner {
background: #8888ff;
padding: 20px;
margin-bottom: 5px;
}
#social {
float: right;
margin-top: -10px;
font-size: 50%;
}
#slides {
margin-bottom: 5px;
}
.news {
background: #88ff88;
display: inline-block;
*display: inline; /* IE8- hack */
zoom: 1; /* IE8- hack */
margin-right: 10px;
width: 78px;
text-align: center;
padding: 5px;
}
.news.last {
margin-right: 0;
}
.blog {
margin-top: 8px;
clear: both;
}
.blog .entryimg {
float: left;
margin-right: 10px;
}
Result
Too much position absolute for the CSS I think.
Change these few CSS for content to center.
#wrapper {
width: 100%;
margin: 0 auto;
margin-top: 60px;
}
#topbanner {
margin-left: 180px;
width: 990px;
margin: 0 auto;
}
#magnavigation {
margin-top: 150px;
margin-left: 150px;
margin: 0 auto;
}
#featureslides {
margin-top: 240px;
margin-left: 190px;
width: 1000px;
margin: 0 auto;
}
I suggest you to reconstruct your section as it's quite a mess and hard to control from what I saw.
i have a number containers that i want aligned. This is the code i have so far: jsfiddle
First of all, when i run this code from my machine, the "day-label" is double the size that it shows on jsfiddle. the next two ("max-points" and "close-points") are stacked on top of each other and are right text to "day-label", this is as i want it.
Now the next three containers i can't seem to get them lined up, the "points-totals" container i want to be like the "day-label" but to the right of the max and close points. then the next two "thirty-points" and "fifty-points" i want next to the totals.
They should all be on the same line but they're not all the same shape.
Does anyone know what i'm talking about or am i confusing the situation?
I think i'll be able to use "top:X" and "left:X" but i wanted to know if there was an easier way to get them all inline with each other? like the first three containers.
Thanks for the help.
This is a mock up of how i want it to look -
How's this jsFiddle example?
HTML
<div class="day-point-container">
<div class="result-headers">Title</div>
<div class="day-label"><h1>1<small>st</small></h1></div>
<div class="max-points">Max</div>
<div class="close-points">Close</div>
<div class="points-totals">Total</div>
<div class="thirty-points">30 points</div>
<div class="fifty-points">50</div>
</div>
CSS
.day-point-container
{
width: 100%;
background-color: pink;
}
.result-headers
{
background-color: green;
}
.day-label
{
background-color: lime;
width: 10%;
height: 10%;
text-align: center;
float: left;
}
.max-points
{
background-color: blue;
width: 50%;
height: 5%;
}
.close-points
{
background-color: purple;
width: 50%;
height: 5%;
}
.points-totals
{
background-color: orange;
width: 20%;
height:10%;
float:right;
}
.thirty-points
{
background-color: red;
width: 10%;
float:right;
}
.fifty-points
{
background-color: gold;
width: 10%;
clear:right;
float:right;
}
I'm not 100% sure what you're trying to achieve but you could try to use the float function in CSS, e.g float:lefthere's a link to W3schools page on float http://www.w3schools.com/cssref/pr_class_float.asp or if you just want them centered you could always try <center>
use this : fiddle
.day-point-container
{
width: 100%;
background-color: pink;
}
.result-headers
{
background-color: green;
}
.day-label
{
background-color: lime;
width: 10%;
height: 10%;
text-align: center;
float: left;
}
.max-points
{
background-color: blue;
width: 50%;
height: 5%;
}
.close-points
{
background-color: purple;
width: 50%;
height: 5%;
}
.points-totals
{
background-color: orange;
width: 20%;
height:10%;
float: left;
}
.thirty-points
{
background-color: red;
width: 10%;
float: left;
}
.fifty-points
{
background-color: gold;
width: 10%;
float: left;
display:inline;
float: left;
}
.clearfix {
clear: both;
}
<div class="day-point-container">
<div class="result-headers">Title</div>
<div class="day-label"><h1>1<small>st</small></h1></div>
<div class="max-points">Max</div>
<div class="close-points">Close</div>
<div class="points-totals">Total</div>
<div class="thirty-points">30 points</div>
<div class="fifty-points">50</div>
<div class="clearfix"></div>
</div>
Update with prettier code
Also- dude, what you look like you're trying to do is display tabular data
If that is the case, there's nothing wrong with using an actual table-- in fact, NOT doing so would be wrong.
html
<section class="container">
<header>
<h1 class="title">Title</h1>
</header>
<ul class="point-container">
<li class="day"><h1>1<span>st</span></h1></li>
<div class="points">
<li class="max">Max</li>
<li class="close">Close</li>
</div>
<div class="results">
<li class="totals">Total</li>
<li class="thirty-points">30 points</li>
<li class="fifty-points">50</li>
</div>
</div>
</section>
css
// ==================
// base
//
//
html{ font-size: 62.5%; }
body{
font-size: 1.6rem;
font: normal normal 100 1.6rem "Helvetica Neue", sans serif;
background-color: black;
}
.container{
width: 90%;
color: white;
margin: auto;
}
// ==================
// layout
//
//
body,
.container,
.points,
.results,
.point-container{
display: flex;
}
.points,
.container{
flex-flow: column;
}
.results{ flex-flow: row;}
.day,
.results li{
flex: 1;
}
.points,
.results{
flex:3;
}
.results li{
text-align: center;
}
// ==================
// colors
//
//
.title{ background-color: #008001; }
.day{ background-color: #00ff00; }
.max{ background-color: blue; }
.close{ background-color: purple; }
.totals{ background-color: orange; }
.thirty-points{ background-color: red; }
.fifty-points{ background-color: gold; }
I have the following HTML:
<div id="root">
<div id="left_side">LEFT</div>
<div id="center_s">CENTER</div>
<div id="right_side">RIGHT</div>
</div>
...and CSS:
#root {
background-color: #eee;
}
#left_side {
float: left;
}
#center_s {
margin-left: auto;
margin-right: auto;
width: 65px;
background-color: #ccc;
}
#right_side {
float: right;
}
However, I get the following:
The DIV on the right is on a separate line, which is not what I want. How can I make it stay on the same line as the other DIVs?
Note: you can see a live demo and play around with the code here: http://jsfiddle.net/UDb4D/
It's because your #center_s div expands to the width of the remaining line. If you put #right_side above #center_s in the HTML order, it'll work fine.
See here:
http://jsfiddle.net/UDb4D/2/
Because the center has no float and right-floated elements need to appear first. Add float: left; to your #center_s or move the #right_side div before so it looks like this:
#root {
background-color: #eee;
}
#left_side {
float: left;
}
#center_s {
margin-left: auto;
margin-right: auto;
width: 65px;
background-color: #ccc;
float: left;
}
#right_side {
float: right;
}
<div id="root">
<div id="right_side">RIGHT</div>
<div id="left_side">LEFT</div>
<div id="center_s">CENTER</div>
</div>
I quickly hacked this up. Bare in mind that I'm a developer, not a web designer.
<div id="root" align="center">
<div id="right_side">RIGHT</div>
<div id="center_s">CENTER</div>
<div id="left_side">LEFT</div>
</div>
And...
#root {
background-color: #eee;
}
#left_side {
display: inline;
float: left;
}
#center_s {
display: inline;
margin-left: auto;
margin-right: auto;
width: 65px;
background-color: #ccc;
}
#right_side {
display: inline;
float: right;
}