I am unable to ascertain what attribute is fixing the width of the navbar, so as to reduce it from the borders. The CSS is too big so I had to use JSfiddle
<nav id="NAV_1">
<ul id="UL_2">
<li id="LI_3">
Home
</li>
<li id="LI_5">
About
</li>
<li id="LI_7">
Blog
</li>
<li id="LI_9">
Freebies
</li>
<li id="LI_11">
Resources
</li>
<li id="LI_13">
Start a Blog
</li>
<li id="LI_15">
Shop
</li>
</ul>
</nav>
Why does #UL_2 have margin: 0px 543.031px;? That's where your whitespace is coming from. Removing the margin is enough to make the navbar display as normal:
http://jsfiddle.net/vicvipe/tbq0nhk1/
Line 83 in the CSS.
margin: 0px 543.031px;
Related
I am trying to align a button properly as a secondary content within a collection. However, no matter what I try, I cannot get the button centered. See image below:
Current Layout
Code snippet:
<div class="section">
<ul class="collection with-header">
<li class="collection-header">
<h5>Drawing basics</h5>
</li>
<li class="collection-item">
<div>Public Policy and the Community<i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></div>
</li>
<li class="collection-item">
<div> Introduction to Geology Studies
<button class="btn waves-effect waves-light right"> Create
</button>
</div>
</li>
<li class="collection-item">
<div> Global Perspective<i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></div>
</li>
</ul>
</div>
What can I do to solve this? I've tried almost everything.
Well I couldn't get it to work as I'd like to but it works with this hardcode....
.fix{
float: right;
margin-top: -8px;
}
https://jsfiddle.net/ggcewqaL/2/
Maybe this answer is a bit late but here is the fix without the need for an additional CSS class.
<ul class="collection with-header">
<li class="collection-header"><h4>Drawing basics</h4></li>
<li class="collection-item"><div>Public Policy and the Community<i class="">remove_red_eye</i></div></li>
<li class="collection-item">
<div>Introduction to Geology Studies
Create
</a>
</div>
</li>
<li class="collection-item"><div>Global Perspective<i class="material-icons">remove_red_eye</i></div></li>
</ul>
I just added an anchor tag inside the second div and styled it with .btn class
Create
I hope this would be helpful for someone at least!
My code is as follows:
<h3 class="ds-option-set-head">Compartilhar</h3>
<div class="ds-option-set" id="sharebar">
<ul>
<li onclick="shareFunction('fb')"><img src="themes/UFSC_producao/images/facebook.svg"></img></li>
<li onclick="shareFunction('tw')"><img src="themes/UFSC_producao/images/twitter.svg"></img></li>
<li onclick="shareFunction('lk')"><img src="themes/UFSC_producao/images/linkedin.svg"></img></li>
<li onclick="shareFunction('gp')"><img src="themes/UFSC_producao/images/google-plus.svg"></img></li>
</ul>
</div>
These images just appears at the initial page mysite/xmlui and I don't know why. Any suggestions?
I tried to make a footer for a Website im doing for shool. I want to have something like the Impressum on the right and little images for social media on the left. I made it work for the right side but I dont know why the images arent on the right side. I already googled but the things they said didnt worked for me.
JSfiddle demo :
<ul>
<li><a>Irgendwas</a>
</li>
<li><a>Impressum</a>
</li>
<li><a><address>Erstellt von</address></a>
</li>
</ul>
<ul id="socialmediaicons">
<li><a><img src="bilder/icons/facebook.svg" width="30" height="30"></img></a>
</li>
<li><a><img src="bilder/icons/google+-with-circle.svg" width="30" height="30"></img></a>
</li>
</ul>
My suggestion is to just place them outside the footer but I need to have them in there.
If you want the pictures on the left as you mentioned first, add a class to the list items for the socialmedia icons and give it a display: inline-block that should do what you need. If you want them on the right they are there.
.leftFoot {
display: inline-block;
}
<footer id="footer-wrapper">
<ul>
<li><a>Irgendwas</a>
</li>
<li><a>Impressum</a>
</li>
<li><a><address>Erstellt von</address></a>
</li>
</ul>
<ul id="socialmediaicons">
<li class="leftFoot"><a><img src="bilder/icons/facebook.svg" width="30" height="30"></img></a>
</li>
<li class="leftFoot"><a><img src="bilder/icons/google+-with-circle.svg" width="30" height="30"></img></a>
</li>
</ul>
</footer>
You have to put the elements in reverse order when floating "right" things :
demo
<ul id="socialmediaicons">
<li><a><img src="bilder/icons/facebook.svg" width="30" height="30"></img></a>
</li>
<li><a><img src="bilder/icons/google+-with-circle.svg" width="30" height="30"></img></a>
</li>
</ul>
<ul>
<li><a>Irgendwas</a>
</li>
<li><a>Impressum</a>
</li>
<li><a><address>Erstellt von</address></a>
</li>
</ul>
Getting some off behaviour with my Bootstrap horizontal navigation, for some reason it seems to be adding an extra anchor link into the first <li><!-- here --></li> element.
Code:
<li class='submenu'>
<a href='#'>
<img src='{{ URL::asset('img/menu/performance.png') }}' /> Performance
<ul class='nav'>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
</ul>
</a>
</li>
What Chromes Inspector says:
<li class="submenu">
<a href="#">
<img src="https://xxxxxx/img/menu/performance.png"> Performance
</a>
<ul class="nav" style="display: block;"><a href="#">
</a><li><a ref="#">abc</a></li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
Any one got an idea's of why this is happening? I hacky fixed it with the following CSS:
.left-nav .submenu li:nth-child(2) > a:first-child {
display:none;
}
You should not have any links inside another link.
This is not valid HTML.
If the browser encounters a link tag while already inside a link tag it will add
the closing tag for the first link.
I was using links within links, causing this to happen. I have moved the secondary <ul> outside of the anchor tab and its now working.
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.