At the moment I am building my first responsive site with Twitter Bootstrap and I am running into an issue I can't solve by myself.
I am customizing the media queries, but when it comes to the links inside the navbar I am stuck.
I want .brand to be centered and the navigation links should be centered below - a new line for each link. I managed to center .brand using this CSS code in the appropriate media query:
.brand {
display: block;
width: 100%;
text-align: center;
}
Now for the links. This is the code:
.navbar li a {
display: block;
}
The selector seems right because when I assign a background color, it shows up. But using display: block; does not result in a new row for each link. Using width: 100%; also does not result in the desired form.
My guess is that it has something to do with the li each link is wrapped in.
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Thomas Glaser</a>
<ul class="nav">
<li>Arbeiten</li>
<li>Thomas</li>
<li>Kontakt</li>
</ul>
</div><!-- /.navbar-inner -->
</div>
I tried to fiddle around with the CSS, but using a trial & error method in combination with such large CSS files is not really recommended I guess, that's why I am asking you: What CSS code is needed, to display the links inside the navbar one below the other?
It's actually pretty straightforward, all you need are the following css rules:
.navbar .nav {
width: 100%;
}
.navbar .nav > li {
float: none;
text-align: center;
}
So you were right, it's the li that needs to be styled, not the anchor :)
Related
I am relatively inexperienced with HTML and CSS and I am having a spot of difficulty trying to change the padding and margin values of my navigation bar on a second page without it affecting the index page.
NB: I want to style the nav slightly different on the second page.
I have 2 navigation bars .navbar and .navbar2 each with identical code.
<div class="navbar">
<nav class="large clearfix">
<ul>
<li>
Home
</li>
<li>
Famous People
</li>
<li>
Places to Visit
</li>
<li>
Contact Us
</li>
</ul>
<div class="veggieburger">≡</div>
</nav>
</div>
How do I call out navbar2 UL LI properties from a syntactical perspective in the CSS in order to style it different without affecting the navigation values aligned to the index page.
I have tried without success in the CSS.
.navbar2 > li {
margin-top: 50px;
}
Well, for managing different classes (.), and IDs (#), we use these selectors in the brackets I've written in.
Say for example you want to style navbar and navbar2 independently, you would directly style them differently by using the selector ".". Just add a "." in front of the class, and apply your properties as needed.
So for example, imagine my HTML is all done up, this would be the CSS:
.navbar
{
width: 100%;
height: 30vw;
color: red; /*this would make the text red*/
}
.navbar2
{
width: 100%;
height: 30vw;
color: green /*and this makes the text green*/
}
Hope that helped!
Im a newbie, working on a wordpress website http:// www.smope.net, i'll love to put the "about us" menu directly under the yellow smile in the logo.
I tried to use google chrome's inspector to locate the css ID and file, but i have not had any success in aligning the nav menu slightly to the right
I'll appreciate your help
Apply the following properties to .main-navigation ul to make it look like this:
You can use margin-left in CSS to define the distance between two objects horizontally.
.main-navigation ul {
list-style: none;
margin-top: 0;
margin-bottom: 0;
margin-left: 230px;
text-align: center;
}
I am using bootstrap3, and I would like to have a navbar, where all nav items are spaced through the whole width of the bar.
To achieve this my only option was to make the bar behave like a table, -row, respectively -cell.
I've got the right markup & css, but apparently somehow I cannot force display: table-row; on my ul.
Live Example
Odd thing is that:
Both firefox & chromium report that although table-row is the most important rule, they apply block
This only happens when I include bootstrap3 (try toggling it in the live example)
HTML
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="">
Homeen
</li>
<li class="">
News
</li>
</ul>
</div>
CSS
.collapse.navbar-collapse {
display: table !important;
width: 100%;
}
.navbar .nav {
display: table-row !important;
width: 100%;
background: #fff;
}
.navbar .nav > li {
display: table-cell !important;
background: #39f;
float: none;
}
Just make it a table man.
All the crazy code you're going to have to write to make this work without any browser bugs is going to be far more ugly than a table tag.
I've figured it out
I just had to unfloat .nav
.nav {
float: none;
}
Working example
Sigh, another lost hour. But I will leave the question up, maybe it saves someone's time.
I'm trying to create a bar for social media icons that looks like this
But I'm really stuck.
I tried creating it like this:
<div class="social-media">
<ul>
<li class="facebook">facebook</li>
<li class="instagram">instagram</li>
<li class="twitter">twitter</li>
<li class="youtube">youtube</li>
</ul>
</div>
.social-media ul li {
display: inline-block;
}
.social-media ul li.facebook:after {
content: url('../images/facebooklogo.png');
width: 21px;
height: 21px;
}
And so on for each li.class
But the issue was that the images ignored the width and height I specified here, and were huge. I just couldnt seem to target them
The second thing is, I didnt know how to make them whole thing clickable, when I tried using an "a" tag, it didnt target the image specified by the li:after, only the text inside the li
Am I just going about this the wrong way? is it better to use a bunch of nested divs, and use onclick to make the whole thing a link?
Any help would be great, I'm pretty confused.
I would use
<li><a class="facebook" href="thisIsYourFacebookPage.html">My Facebook page</a></li>
And give the image you want with
a.facebook:before {
background: url("to/the/path/to/my/image");
width: 21px;
height: 21px;
display: inline-block;
content: " ";
}
Like this: http://jsfiddle.net/gVp2P/1/
You can't specific a url for content, as far as I know. But you don't need to use pseudo elements here. Just specific the background-image of each <li>
.social-media ul li{
display:inline-block;
width: 21px;
height: 21px;
}
.social-media ul li.facebook {
background-image: url('../images/facebooklogo.png');
}
If you want them to be clickable links, you really don't even need the ul li. Just use <a> directly, give it a class, facebook, linkedin, etc, then the following CSS.
.social-media a {
display:inline-block;
width: 21px;
height: 21px;
}
.social-media a.facebook {
background-image: url('../images/facebooklogo.png');
}
You should also consider the icons as font's instead of images.
The reason is they scale better, lookin really nice even if your users zoom or use retina displays, and you can just add css colors, shadows and so on just as you would do styling your text.
read on here:
http://icomoon.io/
I would like to have part of <li> content aligned to the left ("Title") and rest of it ("[button]") to the right. For each item.
I'm using following HTML code:
<ul class="dual-align-list">
<li><div>Title</div><div>[button]</div></li>
<li><div>Title</div><div>[button]</div></li>
</ul>
and styles:
ul.dual-align-list li
{
display: block;
height: 25px;
}
ul.dual-align-list li div:first-child {float: left}
ul.dual-align-list li div:nth-child(2) {float: right}
But I have a bad feeling, that I'm doing something really wrong.
Is there a better approach/solution to this problem?
But I have a bad feeling, that I'm doing something really wrong.
Is there a better approach/solution to this problem?
The only problem is your classes and use of pseudo-elements aren't very semantic. A better approach would be to give classes to your divs that describe what their content is, and style them that way.
<ul class="title-content-list">
<li><div class="title">Title</div><div class="content">[button]</div></li>
</ul>
And CSS
ul.title-content-list > li { display: block; height: 25px; }
ul.title-content-list > li > div.title { float: left }
ul.title-content-list > li > div.content { float: right }
Or something along those lines.
It's very bad practice to use "left" or "right" as class names - what if you later decide you want your title on the right and button on the left? You'd have to change all your HTML, or have weird CSS where .right positions elements on the left and .left on the right.
What you are doing seems to be working (at least per how you describe what you are looking for here). I'm assuming that your issue is the complexity of your selectors? If so, one thing you could try is moving the selector to the individual element. I know for bootstrap they call this pull-right so I went ahead and did that:
<ul class="dual-align-list">
<!-- Title really only needs to be in a div if you
plan on styling it further -->
<li> Title <div class="pull-right">[button]</div></li>
<li> Title <div class="pull-right">[button]</div></li>
</ul>
See this JSFiddle for a working example with that in it. Hopefully this addresses the actual question!
Edit
By the way, if the issue is just how far the button goes to the right you can put everything in a fixed width container or you can add a margin-right to the "pull-right" class. For the fixed width container, just wrap your ul in:
<div class="container"> <!-- "ul" here --> </div>
You will also need the following style rule as well:
/* edited to use percents for a responsive layout */
.container { margin-left: 5%; margin-right: 5% }
I put this in an update to the previous fiddle you can find here. Hopefully that helps some as well. Good luck!
EDIT (2)
Changed fixed width layout to responsive layout with 5% margins. These could be adjusted per the desired result or even styled with the #media element to vary based on screen size!
Try this:
HTML
<ul class="dual-align-list">
<li>
<div class="left">Title</div>
<div class="right">[button]</div>
</li>
<li>
<div class="left">Title</div>
<div class="right">[button]</div>
</li>
</ul>
CSS
ul.dual-align-list li {
display: block;
height: 25px;
position: relative;
}
ul.dual-align-list li .left {
text-align: left;
position: absolute;
left:0;
}
ul.dual-align-list li .right {
text-align: right;
position: absolute;
right:0;
}
Hopefully this helps :)