i'm having trouble making a custom pure css mobile first responsive navigation from scratch. i have this navigation menu i found on the internet and trying to manipulate the code so i can have a horizontal navigation bar on an inline block. I want the navigation bar to uncollpase as it was for a desktop version and show the links when i set a media query at min-width: 480px and hide the navicon. Not sure how exactly to go about it. This is what i have so far. any help would be appreciated thank you. Here's the original navigation bar code unedited that i tried to modify
DEMO: http://cssdeck.com/labs/dropdown-menu
HTML:
<body>
<div id="header">
<div id="logo">
</div>
<input type="checkbox" class="checkbox" name="menu" value="mobiledropmenu" id="mobiledropmenu">
<label for="mobiledropmenu" class="label"><img src="http://developer.jmbarcelon.com/Images/dropmenu.png"></label>
<div class="title">
<div class="button">Home</div>
<div class="button">Casa</div>
<div class="button">Zahause</div>
<div class="button">Maison</div>
</div>
<h1>Drop-Down Menu</h1>
</div>
CSS:
background:#E5F2FF;
}
#header {
width:100%;
background:#72BBFF;
z-index:2;
}
.checkbox {
display: none;
}
.label{
-webkit-transition:.3s;
-moz-transition:.3s;
-o-transition:.3s;
transition:.3s;
width: 64px;
height:64px;
font-size: 20px;
display: inline-block;
background-size:cover;
margin:.5em;
background:rgba(0,132,255,0.15);
box-shadow: 1px 1px 5px rgba(0, 135, 255,0.5);
border-radius:1px;
}
.checkbox:checked + .label {
-webkit-transition:.3s;
-moz-transition:.3s;
-o-transition:.3s;
transition:.3s;
box-shadow:inset 0px 0px 10px rgba(0, 135, 255,0.5);
background:rgba(0,132,255,0.3)
}
#mobiledropmenu:checked ~ .title {
-webkit-transition:1s;
width: 100%;
height: 250px;
opacity: 1;
}
.title {
-webkit-transition:1s;
width: 0%;
height: 0px;
opacity: 0;
}
.button {
color:#fff;
text-decoration:none;
border-top:1px solid #fff;
text-align:center;
text-transform:uppercase;
width:100%;
padding:1.2em;
}
.button:hover {
cursor:pointer;
background:rgba(0,132,255,0.15);
}
h1 {
width:100%;
color:rgba(188, 230, 255, 0.2);
text-align:center;
text-transform:uppercase;
text-shadow: 1px 3px 6px #E5F2FF,
0 0 0 #47a0d3,
1px 4px 6px #E5F2FF;
font-weight:lighter;
font-size:2.5em;
position:absolute;
margin-top:10%;
}
#media only screen and (min-width: 480px){
h1{color: red;}
.label {display: none;}
.title {display: inline-block;
OK, I removed the false start and here's a working example for you based on your edited question. I added this under the CSS in your linked code:
#media only screen and (min-width: 480px){
/* always show the nav, and make it a fixed height */
.title {
width: 100%;
height: 50px;
opacity: 1;
}
/* change nav items to be horizontal and only as big as they need */
.button {
height: 50px;
display: inline-block;
width: auto;
}
/* hide the menu toggle button */
.label { display: none; }
}
What this does is hide the menu toggle and switch the nav to always be visible, and be horizontal. Example is here: http://cssdeck.com/labs/hehuga5u (resize the right pane to see it in action)
Again, you'll have to tweak to get your exact needs, but this should be much closer to what you need. Good luck!
Related
I have 3 nav buttons at the top of a page. I set their width to 33% but noticed that the last one didn't fill all the space that it was supposed to, so I set it's width to 34% but it still didn't fix the issue.
If you go to http://shacktown.com and hover over Contact you will see that the right-most area of the button does not turn a lighter gray, and I also noticed that the border-radius attribute doesn't apply itself either.
The 3 .nav items are located inside of a #header item. Here is the respective CSS:
#banner, #header, #content {
margin: 2.5% 15% 2.5% 15%;
}
#header, #content {
border-radius: 0.375em;
background-image: url('http://shacktown.com/engine/img/trans.png');
}
.nav {
height: 2em;
padding-top: 1.0em;
text-align: center;
color: #000000;
font-size: 1.2em;
float: left;
width: 33%;
cursor: pointer;
border-left: 0.1em solid #333333;
}
.nav:hover, .navSelected {
background-image: url('http://shacktown.com/engine/img/trans.png');
}
.navSelected {
cursor: default;
}
.nav:first-of-type {
border-radius: 0.375em 0 0 0.375em;
border-left: none;
}
.nav:last-of-type {
border-radius: 0 0.375em 0.375em 0;
width: 34%;
}
Any idea why it isn't filling up the whole space?
:last-of-type or :first-of-type css selectors are not meant to be working like this. In your case, this selectors will select the last "div" or first "div" in their parents.
So remove this line from html:
<div style="clear: both;"></div>
and change width of the class nav to %33.3
these will do the trick.
Change the rule for .nav to following:
.nav {
height: 2em;
padding: 1em 0 2.5em 0;
text-align: center;
color: #000;
font-size: 1.2em;
float: left;
cursor: pointer;
border-left: 0.1em solid #565656;
width: 33.33%;
box-sizing: border-box;
}
And add a new rule:
.nav:last-of-type:hover {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Remove the whitespace in your markup:
And this is the result you'll get.
there is no selector with only class only
CSS: How to say .class:last-of-type [classes, not elements!]
so you can do
set .nav as display:inline-block and remove clear div so that they are inline
here is the demo
.cont {
font-size: 0px; /* is added to remove whitespace from inline-block */
}
.cont div {
display: inline-block;
font-size: 16px;
}
.cont div:first-of-type,
.float div.test:first-of-type {
background: red;
}
.cont div:last-of-type,
.float div.test:last-of-type {
background: red;
}
.float .test {
float: left;
}
.float .clear {
clear: both;
}
<p>used inline-block instead of float</p>
<div class="cont">
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
</div>
<p>with class and used float</p>
<div class="float">
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="clear"></div>
</div>
I am creating a simple real estate website and am currently creating the listing page. I would like a product very similar to this here. I cannot gain ideas from the code because I am using the skeleton framework. This is my current progress and code or below.
The two elements; photo of property and body of text are apart (there's a gap in the middle).
And also if you resize the browser the listing is not rendered as a vertical rectangle as it is supposed to.
My raw questions are:
1) How do I connect the image and the body text so there is no space inbetween?
2) How do I make the body text and image the same width when the body text needs to collapse underneath the photo? (When resizing browser or on device)
The HTML
<div class="five columns image">
<img src="Properties/9-Walter-Street-Claremont/Listing.jpg" alt="Listing">
</div>
<div class="ten columns body-info">
<h2>Walter Street <span>$2500/wk</span></h2>
<h3>Claremont, 6010</h3>
<p>Lorem Ipsum</p>
<div class="info">
<ul>
<li><img src="img/bedrooms.png"> 5</li>
<li><img src="img/bathrooms.png"> 3</li>
</ul>
</div>
</div>
The CSS
.body-info {
background-color: #fff;
height: 200px;
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
margin-bottom: 30px;
padding: 0px;
}
.image a img:hover {
background-color: rgba(0,0,0,0.5);
background-image: url("img/eye.png");
background-position: center center;
background-repeat: no-repeat;
}
.body-info h2 a {
transition: color 0.2s ease-in;
-webkit-transition: color 0.2s ease-in;
color: #428f9c;
font-size: 23px;
font-weight: normal;
}
.image {
width: 270px;
float: left;
}
.body-info {
margin-left: 280px;
}
.body-info h2 a:hover {
color: #0b7587;
}
.body-info span {
margin-right: 15px;
color: #444;
}
.body-info p {
color: #777;
font-size: 16px;
}
.body-info ul {
list-style: none;
}
.body-info ul li {
color: #777;
}
Thank you in advance!
To help you a little bit on the way, you could use the #media on CSS.
With that you can change the style when for example the screen is smaller than a specific width.
HTML:
<div class="wrap">
<div class="image">img</div>
<div class="info">info</div>
</div>
CSS:
.wrap {
background: gray;
min-height: 200px;
padding: 10px;
}
.image {
width: 270px;
height: 180px;
background: lightgray;
display: inline-block;
}
.info {
background: lightsteelblue;
display: inline-block;
}
#media only screen and (max-width:600px){
.image, .info {
width: 100%;
display: block;
}
}
So what the style does is when you have a fullscreen it shows .image and .info next to each other (using display: inline-block;.
When the screen gets resized and smaller than 600px, for both the divs the display property will change to block, making them appear under each other.
JSFiddle DEMO
Referring to the example in your post, the only thing you need to do is to make or find a script that resizes your image when the screen gets smaller.
Hope this helps you.
http://bmww.com/clients/phwm_sc_website/index.html
^ thats the link to the site being tested thus far. I took everyone's advice here and am working on removing the tables which i did for the head navigation. So now they are aligned side by side but the logo with the div needs to be higher but not the top is getting cut off.
Here is my html:
<div id="header" class="header2" align="center">
<div class="container3">
<div class="divrow"><h1><a class="ex1" href="index.html">[ HOME ]</a></h1></div>
<div class="divrow"><h1><a class="ex1" href="index.html">[ TEAMS ]</a></h1></div>
<div class="divrow1"><img align="middle" src="images/phwm_sc_logo.png" width="170" height="212" alt="logo" /> </div>
<div class="divrow"><h1><a class="ex1" href="index.html">[ STAFF ]</a></h1></div>
<div class="divrow"><h1>[ GALLERY ]</h1> </div>
</div>
</div><!--end red navigation header div-->
and here is my css:
.header1 { position:relative; top: 0px; z-index:10;
width: 100%; height:50px;
background: rgba(0, 54, 103, 0.6); /* Color white with alpha 0.9*/
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 54, 103) transparent;
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99003667, endColorstr=#99003667);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99003667, endColorstr=#99003667)";}
.header2 { position:relative; top:10px;
width: 100%; height:80px; z-index:50;
background: rgba(210, 6, 46, 0.4); /* Color white with alpha 0.9*/
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(210, 6, 46) transparent;
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99d2062e, endColorstr=#99d2062e);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99d2062e, endColorstr=#99d2062e)";}
.divrow { position: relative; display:inline; margin-top:30px;
float:left; }
.divrow1 { position:relative; display:inline; margin-top:-60px;
float:left; z-index:50; margin-bottom:-20px; }
.sponsor { position:absolute; top: 730px; z-index:10;
width: 100%; height:300px;
background-color: #FFF;
-webkit-box-shadow: 0 0 10px #FFF;
-moz-box-shadow: 0 0 10px #FFF;
box-shadow: 0 0 10px #FFF
}
.container1 { clear:both;
width: 960px; z-index:-1;
background-color: none; /* Color white with alpha 0.9*/
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
margin-top:60px;
}
.container2 {
width: 960px; z-index:-1;
background-color: none; /* Color white with alpha 0.9*/
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
margin-top:100px; }
.container3 {
width: 700px;
background-color: none; /* Color white with alpha 0.9*/
margin:auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
I can provide more if needed...i know this probably is a simple fix but i am still learning. Thanks in advance!
The CSS for divrow1 class has a typo. You have miss-spelled "position: absolute;" on line 134 of the CSS file. If you have the absolute spelled correctly the image will no longer be cut off.
If you remove the
overflow:hidden;
from .container3, your image will not be cut off.
This, however will distort your site. This is because the logo is too big, resize it to a height of around 190px and you'll be ok.
Add
clear: both;
to .container1
And remove
overflow:hidden;
from .container3
That should do the trick!
I notice that your .divrow1 margin need to be changed:
.divrow1 {
position: absoulte;
display: inline;
/*margin-top: -30px;*/
float: left;
}
EDIT:
You need to do little update to your layout, this is not the best approach but it might be the simple one:
<div class="container3">
<div class="divrow1">
<img align="middle" src="images/phwm_sc_logo.png" width="170" height="212" alt="logo">
</div>
<div class="divrow"><h1>[ HOME ]</h1></div>
<div class="divrow"><h1>[ TEAMS ]</h1></div>
<div class="separator"></div>
<div class="divrow"><h1>[ STAFF ]</h1></div>
<div class="divrow"><h1>[ GALLERY ]</h1> </div>
</div>
Revised CSS:
.divrow1 {
position: absolute;
display: block;
margin-top: -50px;
margin-left: 200px;
}
.separator {
float: left;
width: 150px;
margin-top: 30px;
}
Please take a look at this laytout which i built with divs:
First of all you can ignore Header section
So Content has to be centered exactly at the center and it has a fixed width which is easy, but Left Column needs to extend from left side until it reaches Content and here is the difficult part, since the gap betwen Left Column and Content can be any length it's hard to know what width to set.
Now i know it would be fairly easy to do this with javascript but i would like to avoid that if possible.
EDIT as requested here is the code:
<div class="left_column"></div>
<div class="content"></div>
.left_column{
width:100px;
height:100px;
float:left;
}
.content{
width:100px;
height:100px;
margin:auto;
position:relative;
}
Take a look at Object-Oriented CSS. In particular, check out their grids page
tried percentages?
overflow: auto;
padding: 10px;
width: 45%;
try float left float right as well as display inline, you could also try width auto but that don't work too well
float:left;
width:auto;
height: auto;
display: inline;
there is also one more trick used in menus
<div id="mail_menu">
<ul>
<li><a href=something</a></li>
</ul>
</div>
css
#mail_menu {
position: relative;
top: 0px;
left: 0px; /* LTR */
z-index: 3;
color: #000;
}
#mail_menu ul {
list-style-type: none;
}
#mail_menu li {
display: inline;
float:left;
margin: 0px;
padding: 3px;
}
#mail_menu a {
color: #000;
background: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 1px;
border-color:#CCC;
border-width:1px 0;
padding: 2px;
float:left;
border-width:1px;
border-style:solid;
border-bottom-color:#aaa;
border-right-color:#aaa;
border-top-color:#ddd;
border-left-color:#ddd;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mail_menu a:hover {
color: #0000DD;
text-decoration: none;
background-image: url(/images/lyel.png);
background-repeat: repeat-x;
}
css to middle something
.middle {
display: block;
width: 50em;
margin-left: auto;
margin-right: auto
}
and finally some table values for display to mess with
.td {
display: table-cell;
display:inline
}
.wrap{
position: inherit;
}
.tr {
display: table-row;
display:inline
}
table {
border-collapse: collapse;
}
th {
text-align: left; /* LTR */
padding-right: 1em; /* LTR */
border-bottom: 3px solid #ccc;
}
I would use percentages, but go 1% short of where you should. I've found a lot of times a browser will "round up" a pixel or something, so if you have your percentages totaling 100%, any extra added will push a div below.
For instance, if you wanted two divs, one on the right and one on the left, have one of them have width:49%; and the other width:50%;.
This can be accomplished using this hack, please try this:
div.header { height: 50px; line-height: 50px; background-color: #222; color: #eee; }
div.wrapper { background-color: #b261da;position: relative;z-index: 0; }
div.wrapper div.content { width: 600px;margin: 0 auto; background-color: #6189fe; color: #fefefe; }
div.wrapper div.left-column { background-color: #00fe72; position: relative;width: 550px;float: left;z-index: -1000; }
with this markup:
<div class="header">Header</div>
<div class="wrapper">
<div class="left-column">Left Column</div>
<div class="content">Content</div>
</div>
Note the left-column will be cutted if you resize the screen too much. Either way, I hope it helps.
Hi have had to put the menu bar further down the page so javascript will load a slide show.
I am trying to then push the menu bar up. Can I put in an absolute reference so it appears a t the top.
#left, #middle, #right {
background-color: inherit;
color: inherit;
float: left;
padding-left: 10px;
padding-right: 5px;
}
#left {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
}
#middle {
width: 80%;
border-left: 3px dotted #999;;
background: #fff;
}
#header {
width: 100%;
background: #666;
}
#footer {
clear: both;
width: 100%;
background: #fff;
}
#left2 {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
margin-top: -500px
}
#middle2 {
width: 80%;
border-left: 3px dotted #999;;
padding top: 500px
}
In Html
<div id="middle2">
<div id="left2">
Although it is completely unclear in your code what the 'menu bar' is, or which class might apply to it, it seems to me you should try absolute positioning in CSS
CSS:
.menubar
{
position:absolute;
top:20px;
left:20px;
}
html:
<div id="some_menu_bar" class="menubar">
your menu goes here
</div>
I am trying to then push the menu bar up.
This makes me think you hope to delay the positioning of the menu bar until some script has executed. You cannot do this with CSS alone*.
*Ok perhaps you can with CSS3 and animations but this isn't well supported at the moment.