Imagine I have a navigation bar in my page header, with a number of links. I'd like the links to spread out horizontally to fill the parent ; is there a way to do this using CSS which doesn't rely on me hard-coding based on the number of links? e.g if I add or remove a link I'd like it to still work.
I tried:
<div class="navBar">
<a class="navBtn" href="#" >Home</a>
<a class="navBtn" href="#" >Services</a>
<a class="navBtn" href="#" >About us</a>
<a class="navBtn" href="#" >Blog</a>
<a class="navBtn" href="#" >Contact</a>
</div>
div.navBar
{
text-align:justify;
}
a.navBtn
{
font-style:italic;
}
But this just left-aligns the text. I know I could use a table but just to show I can, I'm trying to do it 'properly'. Or, is this a case where a table is 'proper'?
Text-align: justified;
Another option is to create a table with width: 100% around your nav bar and have each nav item be in a td
you could even set the width, in percentage, of each td
Related
I am using grid for ul tag, but also want to make whole li clickable.
How is it possible?
<ul>
<li class="wedding-bouqette">
<a href="#">
<h3 class="bouqette-title">Свадебные букеты</h3>
<span class="bouqette-desc">Букеты для невест</span>
</a>
</li>
I know things like this have been asked here before, but the previous answers haven't solved my problem. I need to center the nav bar elements on my page. I've tried text-align: center on the div, nav and a tags, but no luck. I need it to be responsive as well so the nav bar stays centered as the page is resized.
<div>
<nav class="navbar navbar-default">
<a class="blog-nav-item" href="">item</a>
<a class="blog-nav-item" href="">item</a>
<a class="blog-nav-item" href="">item</a>
<a class="blog-nav-item" href="/">item</a>
<a class="blog-nav-item" href="/">item</a>
<a class="blog-nav-item" href="/">item</a>
<a class="blog-nav-item" href="/">item</a>
<a class="blog-nav-item" href="/">item</a>
<a class="blog-nav-item" href="/">item</a>
</nav>
</div>
update: it is slight more centered when I put the div holding the navbar inside my container-fluid and change it to a regular container, but it looks like the text is still not centered in the div. I would also like to keep a container-fluid if I can.
Different browsers renders the HTML elements by their own set of rules.
This is why you want to make sure to tell the browser not to go all anarchistic on you.
The main problems you might encounter are the rules of the text-align function. It does not work on inline-elements, but on inline-block elements.
See this Fiddle and try it out in your browsers.
http://jsfiddle.net/39ppmgdf/
Notice the display:inline-block;
The reason you are experiencing some difficulties here is because of the anchor .
Read the answer of this post to understand more:
What is HTML's <a></a> tag default display type?
I realize this has probably been answered before, and if so, please direct me to another page.
I have a menu bar that goes horizontally across my page. I have several links and I want spacing so the links will fill the width of the nav.
CSS:
nav {
width:100%;
float:left;
text-align:center;
}
HTML:
<nav id="menu">
<a id="home" href="index.html">Home</a>
<a id="link" href="link.html">Link</a>
<a id="another" href="really.html">Another</a>
<a id="lalala" href="stupidcode.html">Lalala</a>
<a id="oneMore" href="example.html">One More</a>
</nav>
Using display: table-cell on the elements inside nav works.
Fiddle: http://jsfiddle.net/mnmxm2h0/
It is possible to change the initial anchor property of one text item when another anchored property text item is clicked without using javascript?
EXAMPLE CODE:
<div class=links>
<ul>
<li>
<a href="#"onclick="MM_showHideLayers('what_we_do','','show');MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','hide')" **class="active"**>WHAT WE DO</a> |
</li>
<li>
<a href="#" onclick="MM_showHideLayers('who_we_are','','hide');MM_showHideLayers('our_mission','','show');MM_showHideLayers('what_we_do','','hide')" class>OUR MISSION</a> |
</li>
<li>
<a href="#" onclick="MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','show');MM_showHideLayers('what_we_do','','hide')" class>WHO WE ARE</a>
</li>
</ul>
</div>
I would like to change the class="active" property in the first string to my default "a" assigned property when either of the other text links are clicked by the user and stay that way until it is clicked again.
Thanks in advance!
I think you'll need to use javascript/jQuery it's not tricky
First give all links the same class for example btn
<a href="#" class="active btn" >WHAT WE DO</a> |
<a href="#" class="btn" >OUR MISSION</a> |
<a href="#" class="btn" >WHO WE ARE</a>
Now add the jQuery:
$('.btn').click(function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});
This script removes the active class from all the anchors and then adds it to whichever anchor has been clicked.
Hope this helps
I am having issues with my navigation collapsing into the body of my site and I would prefer it to remain fixed when the browser window is re-sized. I have tried adjusting the min/max-widths of the bootstrapresponsive.css but it still seems to disappear into the body. Any help would be amazing. Cheers! I have posted the code below:
<div class="navbar" style="padding-bottom:0px;">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div id="logo"><img src="images/CoHlogo.jpg" class="logoImage";></div>
<div class="nav-right">
<!--Social Networking-->
<a class="socialNav" href="mailto:info#classroomofhope.org?subject=Website Inquiry"><img src="img/social/mail.png"/></a>
<a class="socialNav" href="http://www.youtube.com/user/Classroomofhope" target="_blank"><img src="img/social/youtube.png"/></a>
<!-- Twitter
<a class="socialNav" href="https://twitter.com" target="_blank"><img src="img/social/twitter.png"/></a> -->
<a class="socialNav" href="https://facebook.com/ClassroomOfHope" target="_blank"><img src="img/social/facebook.png"/></a>
<!--Google plus
<a class="socialNav" href="https://google.com" target="_blank"><img src="img/social/googleplus.png"/></a> -->
<!--Donate Button -->
<img src="img/donate_header.png" class="donateImage";>
</div>
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li class="dropdown" id="about">ABOUT US
<ul class="dropdown-menu">
<li id="values">OUR VALUES</li>
<li id="journey">OUR JOURNEY SO FAR</li>
<li id="founder">MEET THE FOUNDER</li>
</ul>
</li>
<li id="education">WHY EDUCATION?</li>
<li id="projects">PROJECTS</li>
<!--<li id="media">MEDIA CENTER</li>-->
<li id="donate">DONATE</li>
<li id="contact">CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Removal of the class .nav-collapse from one of the <div> elements solves this problem. As the name of the class suggests, an element with this class will become hidden on smaller screen sizes (I think below widths of 979px is what the stylesheet says?), by receiving height:0 and overflow:hidden via media query.
Here's a JSFiddle (with externally-loaded Bootstrap CSS) that demonstrates how layout would appear without this class. Try resizing the Result pane to see how it would look at different screen sizes.
I hope this is what you were looking for! If not, let me know and I'll be happy to help further.
(Edit:) On taking a look at your live environment, I can now see that when you say "collapse", you mean the navigation links break to a new line as the parent element becomes too small. This is standard behaviour for floated elements. To stop this from happening, you can try applying min-width:1200px or something to that effect to the .container element (inside of .navbar-fixed-top). Hope this helps!