Trying to make the navigation align left and line break like a normal paragraph. At the moment it seems to break weirdly when hovering.
Example:
Hoping to achieve the below which is only working when I hover on a certain link.
Code:
#media screen and (max-width: 1024px) {
li {
float: left;
padding-right: 8px;
font-size: 14px;
margin-bottom: 20px;
display: inline-block.
}
li a:hover {
border-bottom: 2px solid;
padding-bottom: 1px;
}
nav.isotope-filters ul li a:active,
nav.isotope-filters ul li a.selected {
border-bottom: 2px solid;
padding-bottom: 1px;
}
}
I though inline-block would resolve this issue but it's not.
float are the guilty. Don't use floats when there aren't nothing to float. And don't mix float with inline-block. Float transform all displays in block.
#media screen and (max-width: 1024px) {
li {
padding-right: 8px;
font-size: 14px;
margin-bottom: 20px;
display: inline-block;
float: none;
}
li a:hover {
border-bottom: 2px solid;
padding-bottom: 1px;
}
nav.isotope-filters ul li a:active,
nav.isotope-filters ul li a.selected {
border-bottom: 2px solid;
padding-bottom: 1px;
}
}
Related
I want to make my navigation have bottom border while in hover, but then it moves all my content 3px down. How do I make it work without moving all content down.
CSS of navigation :
nav {
width: 80%;
margin: 0 auto;
}
nav ul {
list-style-type: none;
}
nav ul li {
float: left;
width: 19.7%;
background-color: #e88610;
text-align: center;
border-right: 3px solid gray;
border-top: 1px solid gray;
}
nav ul li:last-child {
border-right: none;
border-bottom-right-radius: 5px;
}
nav ul li:first-child {
border-bottom-left-radius: 5px;
}
nav ul li a {
text-decoration:none;
display: block;
padding: 10px 0px;
color: white;
}
nav ul li a:visited {
color: white;
}
nav ul li a:hover{
background-color: orange;
border-bottom: 3px solid gray;
}
CSS of content below :
#novi_clanak {
background-color: rgba(255, 255, 255, 0.65);
width: 100%;
padding-bottom: 40px;
margin-top:35px;
}
Essentially by adding a border, you're extending the nav by 3px. Have a look at the box-sizing property of CSS at http://www.w3schools.com/css/css3_box-sizing.asp. You want your nav ul li a:hover to have box-sizing: border-box;. That will take the bottom border's 3px into account for the element height.
Alternatively, shorten the nav ul li a:hover height by 3px (set it to 39px).
add to nav css
position: fixed;
I'm trying to use the following responsive navigation: http://codepen.io/Goatsy/pen/dqnKv
/*Border surrounding entire navigation - NAV CONTAINER*/
.navborder {
border-top: 10px solid #6e6f1f;
border-right: 20px solid #6e6f1f;
border-bottom: 10px solid #6e6f1f;
border-left: 20px solid #6e6f1f;
background: #6e6f1f;
}
/*Last nav li padding appears*/
.last {
padding-right:14px;
}
/*White bg & top spacing btwn nav*/
#site-content {
background-color: #fff;
padding-top:20px;
margin-top:20px;
width: 100%;
}
#media screen and (max-width : 1240px){
/*Border disappears*/
#site-content {
background-color: #fff;
}
}
/*Slider element*/
.slidebehind {
margin-top:-60px;
}
#media screen and (max-width : 768px){
/*Slider element jumps down - keep it above nav*/
.slidebehind {
margin-top:-40px;
}
}
#media screen and (max-width : 762px){
/*Border disappears*/
.navborder {
border: none;
}
/*Logo disappears*/
li img {
visibility: hidden;
}
/*Last nav li padding disappears*/
.last {
padding-right:0px;
}
/*Slider element jumps down - keep it above nav*/
.slidebehind {
margin-top:-106px;
}
}
#media screen and (max-width : 1200px){
/*UCR Logo margin - come inward*/
.ucrlogo {
margin-right:20px;
}
/*Breadcrumbs margin - come inward*/
.breadcrumb {
margin-left:20px;
}
}
/*Menu shrinks*/
#media screen and (max-width : 1200px){
/*Border disappears*/
#menu {
margin-right: 20px;
margin-left: 20px;
}
}
/* BEGIN NAV STYLES!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/*Strip the ul of padding and list styling*/
ul.navlist {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
z-index:99999;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 0px;
}
/*Style for menu links*/
li a {
display:block;
padding-right: 18px; padding-left:18px;
height: 40px;
text-align: left;
line-height: 45px;
font-family: 'TradeGothicLTStd-Cn18', sans-serif;
font-size: 20px;
color: #fff;
background: #6e6f1f;
text-decoration: none;
opacity: .99;
}
/*Hover state for top level links*/
li:hover a {
background: #fff;
color: #6e6f1f;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f5f1e6;
color: #6e6f1f;
height: 40px;
line-height: 45px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #fff;
color: #6e6f1f;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
text-decoration: none;
color: #fff;
background: #6e6f1f;
text-align: center;
padding: 10px 0;
display: none;
border: 10px solid #6e6f1f;
margin-bottom: 1px;
margin-right: 20px;
margin-left: 20px;
opacity: .99;
}
.show-menu:hover {
background: #898a2c;
border: 10px solid #898a2c;
cursor: pointer;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
-webkit-appearance: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 762px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
margin-right: 20px;
margin-left:20px;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
However, I want the nav list to have a specific name, to differentiate its styles from other list styles.
I've tried using something this: ul.navlist {nav css here} (shown in the codepen link)
and applied it to my html <ul class="navlist">, but for some reason, this breaks the navigation when resizing below 762px.
How do I apply a unique name to the nav list ul, without "breaking it" when resizing to small screens?
(You can see what I mean if you view the codepen, and see how the nav becomes "broken" after resizing to mobile view. If you remove the .navlist class, you'll see that it works fine, but has no class).
UPDATE - 7/29/14
Let me explain this a different way; I can see how my wording was confusing.
This is the EXACT menu I'm trying to achieve:
http://codepen.io/Goatsy/pen/GFDou
Here's the original CSS:
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
z-index:99999;
}
And here is the menu I have (after adding a class, navlist, to the ul):
http://codepen.io/Goatsy/pen/dqnKv
Here's the CSS with class added:
/*Strip the ul of padding and list styling*/
ul.navlist {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
z-index:99999;
}
I'm trying to give a specific class name to the navigation ul.
For some reason, when I do this, it "breaks" the mobile-view of the navigation.
I don't know how else to explain when something "breaks", except to say that it's not working the way it should work (it should work like the first link).
See how in the first link, when switching to smaller/mobile view, the navigation doesn't look the same as the second? The only difference is the second one has a class added to the ul, but it's "breaking" the original style/functionality of the smaller navigation. How to I add a class to the ul without "breaking" the original style/functionality?
Hopefully that clears things up. :(
I'm not sure what you're trying to do, a hover menu only works on non-touch devices, so this menu may work on IOS by clicking and double clicking on Android, I'm guessing since :hover is not something I use on menus for about 2 years now.
I've assumed you're hiding sub menus on smaller viewports and that the top levels are links.
I've cleaned this up based on best guesses, you'll need to learn by it. Read the information below this code chunk. Anything shared by ALL viewports is outside a media query, styles only affecting larger viewports are inside a min-width, stuff that's only max-width (smaller viewports) and not shared between all sizes is inside a max-width.
http://jsbin.com/wafuso/1/edit
http://jsbin.com/wafuso/1/
Here's one with the hover on smaller viewports and other adjustments:
http://jsbin.com/roway/1/edit
This is to learn by.
.navlist,
.navlist * {
list-style: none;
margin: 0;
padding: 0;
}
.navlist li a {
display: block;
height: 40px;
text-align: left;
line-height: 45px;
font-family: 'TradeGothicLTStd-Cn18', sans-serif;
font-size: 20px;
color: #fff;
background: #6e6f1f;
text-decoration: none;
opacity: .99;
}
input[type=checkbox] {
display: none;
-webkit-appearance: none;
}
#media (min-width:763px) {
ul.navlist {
position: absolute;
z-index: 99999;
}
.navlist li { float: left }
.navlist li:hover ul a:hover {
background: #fff;
color: #6e6f1f;
}
.navlist li > a { padding: 0 18px }
.navlist li li a {
display: block;
padding: 5px;
height: auto;
line-height: normal;
font-size: 16px;
min-width: 100px;
padding: 10px 18px;
}
.navlist li ul {
display: none;
width: 250px;
}
.navlist li ul li {
display: block;
float: left;
width: 100%;
}
/*Prevent text wrapping*/
.navlist li a:hover + .hidden,
.navlist .hidden:hover { display: block }
/*Hover state for top level links*/
.navlist li:hover a {
background: #fff;
color: #6e6f1f;
}
.navlist li:hover ul a {
background: #f5f1e6;
color: #6e6f1f;
}
}
.show-menu {
text-decoration: none;
color: #fff;
background: #6e6f1f;
text-align: center;
padding: 10px 0;
display: none;
border: 10px solid #6e6f1f;
margin-bottom: 1px;
margin-right: 20px;
margin-left: 20px;
opacity: .99;
}
.show-menu:hover {
background: #898a2c;
border: 10px solid #898a2c;
cursor: pointer;
}
#media screen and (max-width:762px) {
input[type=checkbox]:checked ~ #menu { display: block }
.navlist {
position: static;
display: none;
margin-right: 20px;
margin-left: 20px;
}
.show-menu { display: block }
.disappear { display: none }
}
What you have here is general selectors like:
ul {styles}
and
ul li {styles}
which will affect every ul and li in the entire site.
If you add a class to a ul, you would then refer to it in the css as:
.navlist {toplevel style on the ul}
.navlist li {more styles for the lists}
and so forth
Also, if you don't want something to affect other viewport widths, such as everything above 700px is one style and everything under is another, you use min-width and stack in the order of smallest to largest, so if you want the font size at 700px to be 20px but it's 30px at 1200px and up, but the base (the small viewport) is 15px it would be like this:
.myselector {font-size:15px;}
#media (min-width:700px) {
.myselector {font-size:20px;}
}
#media (min-width:1200px) {
.myselector {font-size:30px;}
}
Max-width media queries stack in the reverse, where the smallest is last. Please read up on responsive design further.
I am learning to create my first website and I've ran into the first problem that I can't solve. I have a navigation bar in which I want to sit nicely within a wrap but the navigation bar sits beneath it and I can't seem to get it right.
Advice would be great.
http://jsfiddle.net/z4pHZ/2/
HTML
<div class="links_container">
<div class="nav1">
<ul>
<li>Home</li>
<li>About</li>
<li>Challenges</li>
<li>Progress</li>
<li>Forum</li>
</ul>
</div>
CSS
.links_container {
width: 1000px;
height: 35px;
background-color: #33C4AB;
margin-right: auto;
margin-left: auto;
border-bottom-style: double;
border-bottom-width: 2px;
border-color: #000000;
/* [disabled]-webkit-box-sizing: inherit; */
/* [disabled]-moz-box-sizing: inherit; */
/* [disabled]box-sizing: inherit; */
position: absolute;
}
.nav1 {
float: left;
}
.nav1 ul li {
list-style-type: none;
float: left;
display: block;
}
.nav1 ul li a {
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
display: inherit;
height: 35px;
width: 130px;
text-align: center;
line-height: 35px;
border-left: thin solid #CCCCCC;
}
.noBorder {
border-left-style: none !important;
}
.nav1 ul li a:hover {
background-color: #6B6B6B;
height: 35px;
}
.leftedge {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.rightedge {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
Try using
*{
margin:0;
}
and/or
.nav1 ul {
display: inline;
}
The first code will remove the default browser margin from the webpage, and the second code will display .nav1 ul as an inline element
Also, it's a good idea to think about removing .nav1{float:left;} since it doesn't affect anything, and change the .links_container width to 100% instead of 1000px.
Demo
You can use display: inline for your ul
.nav1 ul {
display: inline;
}
Updated Fiddle
What I am doing:
On hover of a button I am addding a border-bottom of 5px.
JS FIDDLE: http://jsfiddle.net/mUCNB/
Problem:
The problem is the border bottom extends 1px too far on both the left and right side.
Question:
Does anyone know how to fix this?
Relevant Code:
#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
border-right: 1px solid #ffffff;
}
#main-nav li a:nth-child(3) {
width: 225px;
}
#main-nav li a:last-child {
width: 224px;
border-left: 1px solid #ffffff;
}
#main-nav a:hover {
height: 30px;
border-bottom: 5px solid #0BC6F5;
}
Since CSS borders 'miter' at the edges, you're going to notice that phenomenon. To work around this, I've created rules to highlight the li BEHIND the a that is on hover. This creates the effect that you are getting a clean border at the bottom. You can retain those white separators between your elements too then.
Forked Fiddle
CSS
* {
margin: 0px;
padding: 0px;
outline: none;
}
#header {
background-color: #00a0c8;
min-height: 118px;
}
#headerContent {
width: 980px;
min-height: 118px;
margin: 0 auto;
background-color: #00a0c8;
}
nav {
width: 980px;
margin: 0 auto;
}
nav li {
border-left: 1px solid #fff; /* Added border to nav li */
display: block;
float: left;
height: 50px; /* Give it height */
}
#main-nav li:hover {
background: #0BC6F5; /* Give background color to li on hover */
}
nav li:first-child {
border-left: none;
}
#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
}
#main-nav li a:nth-child(3) {
width: 225px;
}
#main-nav li a:last-child {
width: 224px;
}
#main-nav li a:hover {
height: 30px;
}
Hope that helps.
you can solve this issue by removing the border-left and border-right styles from the following:
updated css:
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
}
#main-nav li a:last-child {
width: 224px;
}
updated fiddle
Also a neat trick is to just use box-shadow instead, to apply the conflicting border:
#main-nav a:hover {
height: 30px;
box-shadow:0 5px 0 -1px #0BC6F5;
}
This works, if you just replace your current hover selector!
if you want to try it first, here's another fiddle:
http://jsfiddle.net/4zzMA/
Small question on how to achieve some styling on a HTML / CSS UL menu.
I have a standard UL menu, but having some issues getting my head around how to achieve a certain look to the styling. The UL menu as it currently stands is shown here:
http://jsfiddle.net/WMQqt/
(HTML)
<ul id="nav">
<li>CONTACT US
</li>
<li>HOME
</li>
</ul>
(CSS)
#nav {
list-style: none;
margin-bottom: 10px;
*/ margin-top: -6px;
position: relative;
right: 286px;
z-index: 9;
height: 26px;
padding: 4px 4px 4px 4px;
font-weight: bold;
}
#nav li {
float: right;
margin-right: 10px;
}
#nav a {
display: block;
padding: 5px;
color: #444444;
background: #fff;
text-decoration: none;
border: 1px solid grey;
}
#nav a:hover {
color: #fff;
background: #04B431;
}
I'd like the menu buttons to have a small 1px border, but then some white space padding of around 3px before the background color starts.
Similar to how this looks:
http://jsfiddle.net/6PY7z/
Can this be done using the UL menu method?
Thanks for any advice, I'm no expert with HTML / CSS.
Add margin to a tag and move border to li
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey;
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #ccc;
text-decoration: none;
margin:3px;
}
DEMO
you can use the following styles to achieve what you want:
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey; /*put original border here*/
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #d8d8d8; /*new background-color*/
text-decoration: none;
border: 3px solid white; /*add white padding here*/
}
http://jsfiddle.net/WMQqt/4/
ok
in html go
<dl><div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
</dl>
in css
dl { display: flex;
flex-direction: column;}
some hints...
dt float left AND
dd float right