I am trying to indent the text from an inline block on safari. It only indents in chrome.
I have tried using margin left. This works in chrome but in safari i have to adjust the margin-left to another number for them to look the same.
I tried the text-indent and the inline-block is not wrapping properly now.
html
<nav>
<ul>
<li><a href="#" >Home</a></li>
<li type="checkbox" class="sub">
<input type="checkbox" />
<a href="#" >Profile</a>
<!-- Begin-->
<ul class="submenu">
<li >
<a target = "box">Profiles</a>
</li>
</ul>
</li>
<!-- end-->
<li class="sub">
<input type="checkbox" />
<a href="#" >Logs</a>
<!-- Begin-->
<ul class="submenu">
<li >
<a target = "box" >View Logs</a>
</li>
<li >
<a target = "box" >Testing a long test</a>
</li>
</ul>
</li>
</li>
</ul>
</nav>
CSS in chrome
nav .submenu a {
*zoom: 1;
*display: inline;
display: inline-block;
max-width: 122px;
margin-left: 55px;
padding: 3px 1px 3px 0px;
}
CSS in safari
nav .submenu a {
*zoom: 1;
*display: inline;
display: inline-block;
max-width: 122px;
margin-left: 65px;
padding: 3px 1px 3px 0px;
}
I tried putting important on the variables to see anything overrides it too and that didn't help them look the same.
I also tried
text-indent: 50px;
Make a table with no content and put it ahead of your text.
<table>
<tbody>
<tr>
<td width="65px"> <!--this is the indent, don't forget to style it so it becomes invisible.--></td>
</tr>
</tbody>
</table>
Related
I have navigation created using nav tabs.
I wan't to set color on hover, but I can't
I tried this, but not working .
.tab2:hover {
background-color: green;
}
.tab3:hover {
background-color: green;
}
HTML
<div class="col-md-10">
<nav class="row">
<ul class="nav nav-tabs">
<li class="tab1"> <span class="glyphicon glyphicon-user"></span> Name    <span class="glyphicon glyphicon-chevron-down"></span> </li>
<li class="tab1"><span class="glyphicon glyphicon-flag"></span>Text Link </li>
<li class="tab1"> <span class="glyphicon glyphicon-envelope"></span> Message </li>
<li class="tab1"> <span class="glyphicon glyphicon-oil"></span>10 </li>
<li class="tab1"><span class="glyphicon glyphicon-asterisk"></span>   </li>
<li class="tab1"><span class="glyphicon glyphicon-home"></span>  </li>
<li class="tab2"> <span class="glyphicon glyphicon-chevron-down"></span>     KATEGORIJE </li>
<li class="tab2">RADNJE</li>
<li class="tab2">VOZILA</li>
<li class="tab2">NEKRETNINE</li>
<li class="tab2">NAJNOVIJE</li>
<li class="tab2">HITNO</li>
<li class="tab2">USLUGE</li>
<li class="tab2">        <span class="glyphicon glyphicon-chevron-down"></span>     OSTALI LINKOVI </li>
</ul>
</nav>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.nav>li>a {
padding: 10px 3px;
font-weight: bold;
color:white;
font-size: 13px;
}
.tab1 {
background-color:#324255;
height: 42px;
}
.tab2 {
background-color:#405072;
height: 42px;
}
.tab3 {
background-color: #405072;
height:42px;
}
.nav-tabs li {
border-left: 1px solid #52617b;
border-right: 1px solid #52617b;
}
ul {
background-color: #405072;
height:43px;
}
.tab2:hover {
background-color: green;
}
.tab3:hover {
background-color: green;
}
I'll try to be as specific as I can so you understand it all.
1. When I pasted your html and css in the fiddle, I forgot to add the link for bootstrap stylesheet in the html as well. Bootstrap uses a CDN as you might know and it allows you to link with their stylesheet without downloading it and actually placing it in your website folders.
This is the link I am referring to:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
I just added this above all the html in the fiddle.
To answer your original question. Bootstraps stylesheet is overwriting your stylesheet.
Your <li> is working fine and has a green background. But the <a> has a background color of its own which is coming from bootstrap.
See fiddle here https://jsfiddle.net/otuy1foo/3/. And in the css I placed the css code in comments at the bottom.
/*This is the css you need to add*/
.nav-tabs>li>a:hover, .nav>li>a:focus, .nav>li>a:hover {
border-color: transparent !important;
background-color: transparent !important;
}
I am trying to get a mega menu to work by using hover to activate divs
i have tried it numerous ways, but i just cant get them to show on hover
here is the basic idea in jsfiddle : http://jsfiddle.net/mXx64/5/
and here is the code
HTML
<div class="nav-container">
<ul id="mega-menu">
<li class="menu1">
menu1
</li>
<li class="menu2">
menu2
</li>
<li class="menu3">
menu3
</li>
<li class="menu4">
menu4
</li>
</ul>
</div>
<div class="menu-area1">
menu1
</div>
CSS
.nav-container ul li a:hover .menu-area1 {
display: block;
}
.menu-area1 {
display: none;
height: 100px;
width: 100px;
background-color: red;
}
any help would be appreciated
edit please ignore the spelling mistake, i know its there, but the code doesnt work when it is fixed anyway :(
It will not work because your ".menu-area1" is not in the anchor if you want keep this structure you need to add jQuery otherwise just do like below
working- http://jsfiddle.net/R37rr/
<div class="nav-container">
<ul id="mega-menu">
<li class="menu1"> menu1
<div class="menu-area1"> menu1 </div>
</li>
<li class="menu2"> menu2 </li>
<li class="menu3"> menu3 </li>
<li class="menu4"> menu4 </li>
</ul>
</div>
.menu-area1 {
display: none;
height: 100px;
width: 100px;
background-color: red;
}
.nav-container ul>li:hover .menu-area1 {
display: block;
}
I'm not good on JQuery but this what I got:
Fiddle
$('li').hover(function () {
$('.menu-area1').show();
});
$('li').hover('out',function () {
$('.menu-area1').hide();
});
I have created bootstrap menu items and kept FLIP option beside that.
FIDDLE
Here issue is that FLIP should be just beside the box, but it is appearing downside?
HTML:
<div class="magic-container">
<div class="input-group">
<input type="text" class="typeahead form-control" placeholder="Select category ..." />
<ul class="dropdown-menu">
<li id="one">Sports</li>
<li role="presentation" class="divider"></li>
<li id="two">Entertainment</li>
<li role="presentation" class="divider"></li>
<li id="three">Politics</li>
<li role="presentation" class="divider"></li>
<li id="four">Business</li>
<li role="presentation" class="divider"></li>
<li id="four">Travel</li>
<li role="presentation" class="divider"></li>
<li id="four">Celebrity</li>
<li></li>
</ul>
<span class="flip">
<span class="dropDownFlip">
FLIP
</span>
</span>
</div>
</div>
Your input is having a width of 100% being applied to it. It is being applied from the bootstrap.min.css file. By adding the following to your css it fixes your issue:
.input-group .form-control {
width: auto;
}
Here is your jsFiddle updated.
Update: Since this is a change to an existing class and could possibly affect elements elsewhere on your page/site, you could create a new class for this particular instance. Something like this would work:
.input-group .floatLeft {
float: left !important;
width: auto;
}
and just add the class floatLeft to your input.
Try to add following styles in you stylesheets
.magic-container .input-group input {
float: left;
margin-right: 2%;
width: 70%;
}
.flip {
float: left;
}
I have a problem with my navigation bar. When loading the page, sometimes it changes to look like its in steps however when you refresh it changes back to normal. I cant seem to find out what im doing wrong! Please help!!
Website is http://www.pearsonfoods.com.au
<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>
<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>
<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>
<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>
<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>
</div>
Your markup is not well-formed. <a> is an "inline element" and <div> is a "block element". Block elements cannot exist within inline elements.
Your navigation list is better structured as a simple unordered list:
<ul>
<li>Home</li>
<li>About us</li>
<li>Where we sell</li>
</ul>
See? So much cleaner :)
Style each <li><a> as a block-flow element with display: block; (note this does not affect the inline/block semantics of elements, it's strictly a visual thing) and apply float: left; to the <li> elements.
html
<ul class="nav">
<li class="current">Home</li>
<li> About Us</li>
<li> Where we sell</li>
<li> Our Foods</li>
<li> Contact Us</li>
</ul>
css
.nav {
width: 900px;
margin: 0 auto;
}
.nav li {
background-color: rgba(0, 0, 0, 0.72);
border-radius: 10px 10px 0px 0px;
width: 180px;
float:left;
}
.nav li a{
color:#fff;
text-decoration:none;
text-align:center;
line-height:50px;
display:block;
}
.nav li a:hover,.nav li.current a{
color:red;
}
Link to running example
So we have the menu above. That I need to construct for a WordPress template. I have no idea how to make the hover and active states. Untill now I have this:
HTML (followed how WordPress will generate the code):
<nav id="nav-main" role="navigation">
<div class="menu-primary-navigation-container">
<ul id="menu-primary-navigation" class="menu">
<li>
<a href="#" title="">
Home
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
</ul><!-- #menu-primary-navigation -->
</div><!-- .menu-primary-navigation-container -->
</nav><!-- #access -->
Then I have the CSS:
#nav-main {
width: 956px;
height: 44px;
border: 1px solid #a5a5a5;
background: url(images/bg-nav-main.jpg) repeat-x;
}
.menu-primary-navigation-container {}
#menu-primary-navigation {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu-primary-navigation li {
height: 44px;
display: inline-block;
}
#menu-primary-navigation li a {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
text-decoration: none;
line-height: 44px;
padding: 0 46px;
}
#menu-primary-navigation li a:hover {}
And this is all. Here I am stucked. Those slashes are the bad points of this menu.
Any ideas?
Make graphics that way:
Yellow represents transparent color.
Then add negative margin to <li> so they will be next to each other without spaces.
To make the active state you have to add some php to the menu to check the current site:
<nav id="nav-main" role="navigation">
<div class="menu-primary-navigation-container">
<ul id="menu-primary-navigation" class="menu">
<li <?php if (is_page('home')) { echo "class='active'"; }?> >
<a href="#" title="">
Home
</a>
</li>
<li <?php if (is_page('menulink')) { echo "class='active'"; }?> >
<a href="#" title="">
Menu Link
</a>
</li>
For more information read this tutorial here: Tutorial
Then you have to make rectangular images for each menubutton and define it for the <li> elements as a background. You can also make one for all menu elements. With the 'active' class, which get set up by wordpress, you can define a different background for the active menu element.
For the hover of the menu elements you just have to add a background definition in css for
#menu-primary-navigation li a:hover {}