I am currently working on a mobile website and I could use some help with its footer.
Here is an image of how its supposed to look:
http://i.stack.imgur.com/alH8M.jpg
It should have the following:
1) the width needs to work on different mobile devices so it cant be fixed
2) the margin to the left of home and to the right of newsletter should be equal
3) if the devices width isnt big enough for the footer to be displayed in one line, the links should be displayed in multiple "lines". What im trying to say is, there should be no horizontal scrolling
Ive been fiddling around for ages now and cant get it to work. Heres some basic code to get started:
<nav>
<ul>
<li>Unternehmen</li>
<li>Kompetenz</li>
<li>Produkte</li>
<li>Partner</li>
<li>News</li>
</ul>
</nav>
Thanks in advance to anyone who can help me!
nav { background: #016d9b; }
nav ul { text-align: center; padding: 0; }
nav ul li { display: inline-block; border-right: 1px solid white; padding: 0 10px; margin: 10px 0; }
nav ul li:last-child { border-right: none }
nav ul li a { color: white; text-decoration: none; }
ul with text alignment to the center and li displayed as inline block.
I think this should handle.
nav{width:100%; display:block;}
nav ul{padding:0px; margin:0px;}
nav ul li{ width:20%; float:left;}
try this
nav ul { list-style-type:none; margin:0; padding:0; }
nav ul li { float:left; padding-left:10px; margin-right:10px; border-left:1px solid #fff; }
nav ul li:first-child { margin-right:0 !important; }
nav ul li a { color:#fff; }
I am not sure this will help you....
But i have done some works. you can resize the window it will display in multiple "lines.
here jsfiddle: http://jsfiddle.net/thilakar/XM2qU/1/
To your curren HTML structure, you can set some CSS to achieve a replica of the provided image:
See this working Fiddle Example!
HTML
<nav>
<ul>
<li>Unternehmen</li>
<li>Kompetenz</li>
<li>Produkte</li>
<li>Partner</li>
<li>News</li>
</ul>
</nav>
CSS
body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: blue;
text-align: center;
}
ul {
list-style-type: none;
padding: 12px 0;
width: auto;
margin: 0 auto;
display: block;
}
li {
display: inline-block;
margin: 0;
padding: 0;
}
a {
color: #FFF;
border-left: 1px solid #FFF;
text-decoration: none;
font-family: sans-serif;
padding: 0 8px;
font-size: 12px;
line-height: 17px;
}
li:first-child a {
border-left: 0 none;
}
a:hover {
text-decoration: underline;
}
Preview:
Some relevant links that can help you learn about what is being suggested:
CSS display Property
CSS Lists
CSS Padding
CSS Tutorial, Learning CSS
Related
A few hours back I asked a question on how my background disappeared when i added a collapsible list. The solution they gave me was:
body.ui-overlay-a {
background-color: #dc143c;
}
div.ui-page-theme-a {
background-color: transparent;
}
I asked the same person about the blue box and he gave me this:
div.ui-page-theme-a {
background-color: transparent;
}
But this didn't work does anyone have any answers?
Navigation bar code (CSS):
/* Navigation bar */
.nav {
font-family: 'Roboto', sans-serif;
margin-top: 20px;
height: 40px;
background: #000000;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav ul li {
list-style: none;
}
.nav ul li a {
text-decoration: none;
float: right;
display: block;
padding: 10px 50px;
color: white;
}
.nav ul li a:hover {
color: #D3D3D3;
}
.headerBreak {
width: 100%;
height: 0;
border-bottom: 2px solid #000000;
}
h4 {
font-family: 'Roboto', sans-serif;
font-size: 24px;
text-align: right;
text-decoration: none;
}
p {
font-family: 'Lato', sans-serif;
font-size: 30px;
}
And this is the content inside the navigation bar (inside )
<div class="nav">
<ul>
<li>Contacts</li>
<li>Map</li>
<li>Reservations</li>
<li>Online Order</li>
<li>Menu</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
<div class="headerBreak"></div>
Note that this does not only apply to the navigation bar but also applies to my and
Reference: http://i.imgur.com/acnJE5Y.png
Edit 1: I added this website to a free domain hoster, I have also added outline: none; to nav ul li a { but it still doesnt work when i open itbut when I duplicate the file and I open it the text does not have the blue outline, but in my original file it does
http://marcxu88.000webhostapp.com
If you could inspect the code and see if what is wrong it would be greatly appreciated.
Thanks in advance.
Try adding outline: none; to the selector .nav ul li a.
I realize that this may not be possible, so I am also open to modifying the code for the sake of functionality.
Here is my css and html:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Raleway Webfont';
}
body {
margin: 0;
padding: 0;
height: 4000px;
font-size: 16px;
line-height: 1.5;
}
ul, li, h1, h2, p, a, .logo {
font-family: 'Raleway Webfont';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: black;
font-weight: 200;
margin: 0;
padding: 0;
}
header {
position: fixed;
width: 100%;
padding-top: 0px;
background: #e5e5e5;
transition:.25s;
z-index: 100;
border-bottom-style: solid;
border-width: 1px;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.9);
}
.inner {
width: 800px;
position: relative;
margin: 0 auto;
}
nav {
overflow: hidden;
}
nav ul {
float: right;
}
nav li {
display: inline;
float: left;
list-style: none;
}
nav a {
display: inline-block;
color: #fff;
text-decoration: none;
padding: 25px 15px;
transition:.25s;
}
nav a:hover {
margin: -8px 0 0 0;
}
nav ul li:first-child a {
background:#b7b7b7 !important;
}
nav ul li:nth-child(2) a {
background:#a0a0a0 !important;
}
nav ul li:nth-child(3) a {
background:#898989 !important;
}
nav ul li:nth-child(4) a {
background:#727272 !important;
}
nav ul li:nth-child(5) a {
background:#5b5b5b !important;
}
nav ul li:first-child:hover header {
background: #b7b7b7;
}
nav ul li:nth-child(2):hover header {
background: #a0a0a0;
}
nav ul li:nth-child(3):hover header {
background: #898989;
}
nav ul li:nth-child(4):hover header {
background: #727272;
}
nav ul li:nth-child(5):hover header {
background: #5b5b5b;
}
.logo {
float: left;
color: #000;
font-size: 30px;
font-weight: 300;
text-decoration: none;
line-height: 70px;
}
section .inner {
padding-top: 125px;
}
p {
padding-top: 25px;
font-weight: 400;
}
h1 {
text-align: center;
}
<header>
<div class="inner">
<div>
<a class="logo" href="Home.html">W </a>
</div>
<nav role='navigation'>
<ul>
<li>ME</li>
<li>CV</li>
<li>RD</li>
<li>AV</li>
<li>RR</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="inner">
<h1>about me</h1>
<p><span> A work in progress.</span>
</p>
</div>
</section>
I truly thought that I could get away with selecting a parent element by utilizing the :hover selector, but, obviously I was mistaken. I have already visited "Is there a CSS parent selector?", as well as most of the other queries referencing this issue. My specific need, however, still confuses me.
Essentially, is it possible to manipulate the background: of <header> utilizing the in-place -child arrangement, the :hover selector (what I want stylistically), and some method to extend that selector back up to the <header>? The :has() method seems to be a likely candidate, but I cannot figure out how to implement it here for the life of me. If any structure can/must be altered while maintaining the aesthetic, then I am certainly open to implementing it as well. Thank you in advance!
I don't know of a way using pure CSS, however if you want to change the <header> background based on which link in your navigation is hovered, you can use this in jQuery (be sure to run at load, or place at the end of your body just before </body>):
$('[role=navigation] a').hover(function(){
$(this).closest('header').css('background-color', $(this).css('background-color'));
},function(){
$(this).closest('header').css('background-color', '#e5e5e5');
});
https://jsfiddle.net/5d1tvnwh/
I have a floating horizontal navbar positioned using jQuery. It's perfect when the page is static, but as soon as I start scrolling, the navbar's height increases and I am unsure why.
I've a JSFiddle here to show the unwanted effect
Here's the html
<div id="stickyribbon">
<ul>
<li>Week1
</li>
<li>Week2
</li>
<li>Week3
</li>
<li>Week4
</li>
<li>Week5
</li>
<li>Week6
</li>
</ul>
</div>
Here's the css
#stickyribbon {
width:800px;
background: orange;
border-radius: 5px;
}
#stickyribbon ul {
display:table;
width:100%;
list-style-type: none;
}
#stickyribbon li {
display:table-cell;
font-size: 16px;
font-weight: bold;
vertical-align:middle;
}
#stickyribbon li a {
display:block;
color: #fff;
text-decoration: none;
}
#stickyribbon li a:hover {
color: yellow;
}
And lastly the JavaScript
$(function () {
var stickyRibbonTop = $('#stickyribbon').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyRibbonTop) {
$('#stickyribbon').css({
position: 'fixed',
top: '0px'
});
} else {
$('#stickyribbon').css({
position: 'static',
top: '0px'
});
}
});
});
I'd be grateful for any guidance, as I'm completely stumped.
TIA
You can change your CSS to the below, crucially you need to correctly define positioning, padding and margins to establish the layout in both states:
Demo Fiddle
#stickyribbon {
width:800px;
background: orange;
border-radius: 5px;
position:static;
top:0;
margin:15px 0;
}
#stickyribbon ul {
display:table;
width:100%;
list-style-type: none;
padding:0;
margin:0;
}
#stickyribbon li {
display:table-cell;
font-size: 16px;
font-weight: bold;
vertical-align:middle;
padding:0 40px;
}
#stickyribbon li a {
display:block;
color: #fff;
text-decoration: none;
}
#stickyribbon li a:hover {
color: yellow;
}
The div #stickyribbon has some margin and when the page is scrolled, the div is redrawn to fill that margin.
Add
margin:0;
to #stickyribbon ul and #stickyribbon li.
Can someone please tell me how to solve the problem. I recently tried to make a navigation menu for my website which opens subcategories on hover. But the problem is that the subcategory LI items are not displayed properly, they are displayed behind the other objects and are not visible. I tried to put z-index and some other solutions to fix the problem, but I havent managed to do that
Here's a picture that will show you whats the exact problem
http://s27.postimg.org/soa5vro1f/Untitled.jpg
This is the CSS and JS code i used for it, only CSS Code is here:
<style>
#menu-v li, #menu-v a {zoom:1;} /* Hacks for IE6, IE7 */
#menu-v, #menu-v ul
{
width: 180px; /* Main Menu Item widths */
border: 1px solid #ccc;
border-top:none;
position: relative; font-size:0;
list-style: none; margin: 0; padding: 0; display:block;
}
/* Top level menu links style
---------------------------------------*/
.showMe
{
z-index: 99999999999;
}
#menu-v li
{
list-style: none; margin: 0; padding: 0;
}
#menu-v li a
{
font: normal 12px Arial;
border-top: 1px solid #ccc;
display: block;
/*overflow: auto; force hasLayout in IE7 */
color: black;
text-decoration: none;
line-height:26px;
padding-left:26px;
}
#menu-v ul li a
{
}
#menu-v li a.arrow:hover
{
background-image:url(arrowon.gif);
background-repeat: no-repeat;
background-position: 97% 50%;
}
/*Sub level menu items
---------------------------------------*/
#menu-v li ul
{
position: absolute;
width: 200px; /*Sub Menu Items width */
visibility:hidden;
z-index: 9999999999;
}
#menu-v a.arrow
{
background-image:url(arrow.gif);
background-repeat: no-repeat;
background-position: 97% 50%;
}
#menu-v li:hover, #menu-v li.onhover
{
background-position:0 -62px;
}
#menu-v ul li
{
background: rgba(255, 255, 255, 0.86);
background-image:none;
}
#menu-v ul li:hover, #menu-v ul li.onhover
{
background: #eeeeee;
background-image:none;
}
/* Holly Hack for IE \
* html #menu-v li
{
float:left;
height: 1%;
}
* html #menu-v li a
{
height: 1%;
}*/
/* End */
</style>
And this is part of the ul list, the JS code is not included:
<ul id="menu-v">
<li><a class=" arrow" href=""><strong></strong></a>
<ul style="left: 180px; top: 0px; display: none;" class=" sub showMe">
<li ><i class="icon-double-angle-right"></i> Преносни компјутери</li>
<li ><i class="icon-double-angle-right"></i> Опрема за преносни компјутери</li>
<li ><i class="icon-double-angle-right"></i> Таблет компјутери (Tablet PC)</li>
</ul>
</li>
You have a couple problems here:
1. NO INLINE STYLES!
As a rule of thumb, NEVER EVER EVER EVER EVER EVER EVER put styles inline. It is hideous and hard to debug and can't be overridden easily by other CSS. One style in particular, your display:none in your submenu <ul> is causing you grief here.
2. Use display:none in your CSS for your submenu, not visibility:hidden
So to remedy this, you put it in your CSS:
#menu-v li ul
{
display:none;
/*visibility:hidden <----NO!*/
}
3. Use li:hover to show the submenu
#menu-v li:hover ul
{
display:block;
}
Voila!
JSFiddle
I'm trying to disable the hover functionality for a menu.
I want it to be enabled only under certain conditions.
I've tried using $(".ulColor").removeClass('hover');, but that hasn't worked
The CSS code for enabling the hover is :
li:hover ul, li.over ul { display: block; }
Here is the HTML DIV inside which the menu resides -
<div id="pColorSelectorDiv" class="parentOfAll">
<ul id="colorNav" class="ulColor">
<li id="liColorNav" ><a id="colorSelected" class="firstAnchorChild">Colors</a>
<ul id="ulColorChild" class="ulColor">
<li><a id="bkgColor-1" class="bkgColor-1 anchorClass" name="colorPallete" onclick="colorPicked('1');">COLOR</a></li>
<li><a id="bkgColor-2" class="bkgColor-2 anchorClass" name="colorPallete" onclick="colorPicked('2');">COLOR</a></li>
<li><a id="bkgColor-3" class="bkgColor-3 anchorClass" name="colorPallete" onclick="colorPicked('3');">COLOR</a></li>
</ul>
</li>
</ul>
</div>
Here is the rest of the CSS code :
div[id="pColorSelectorDiv"] ul {
margin: 0;
padding: 0;
list-style: none;
width: 50px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
div[id="pColorSelectorDiv"] ul li {
position: relative;
}
.firstAnchorChild{
display: block;
text-decoration: none;
color: #777;
background: White; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
cursor: pointer;
}
li ul {
position: absolute;
left: 49px; /* Set 1px less than menu width */
top: 0;
display: none;
background: White;
}
/* Styles for Menu Items */
.anchorClass{
display: block;
text-decoration: none;
color: #777;
background: White; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
cursor: pointer;
}
.bkgColor-1 {background: #00FFFF; color: #00FFFF;}
.bkgColor-2 {background: #0000FF; color: #0000FF;}
.bkgColor-3 {background: #7FFF00; color: #7FFF00;}
I think you want
li.hover:hover ul { display: block; }
instead of
li:hover ul, li.over ul { display: block; }
Now this style will affect ul only when li is hovered and has hover class.
A simplified example.
PS You might also benefit from using 'code sample' button on edit form (the one with zeroes and ones) to format your code. Among other things, it'll preserve indentation (and thus increase readability). The key combination is ctrl+K. I've edited one of your code samples to demonstrate it.