I've been following w3schools and this other website to build a navbar in jekyll using frontmatter. I'm having trouble with the block property in CSS. The entire navbar except for the dropdown portion is working.
Here's the jsfiddle. I'm not sure how useful that will be since it has Liquid in it.
Here's a picture of what I'm looking at. I've played around with the "#navbar .ddm a" section of the CSS, so I know I'm in the right spot, but it doesn't matter if I put block. Inline works correctly. It just defaults to inline-block, even if I delete "display: "
This is the css that I think should be the culprit
#navbar .ddm a {
color: green;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}
Elements that need to be targeted are the list items (li) of the dropdown menu.
You're focus was on the nested anchor tags (a). So you needed to be looking one level up - at the containing parent elements (li).
In order to achieve your intended result, you need to remove the float declared on only the dropdown list items, e.g:
#navbar .dropdown-menu li {
float: none;
}
As long as you have float rules declared, aligning elements with display rules won't be effective.
Fiddle Demonstration
https://jsfiddle.net/kbuoL6sm/3/ (additional styles included)
Related
I want to create a navigation bar like this:
How would I structure such a thing? Obviously there should be one external div with a blue background. But what about the child elements? How should they be structured? Thanks.
There is no generalized answer on how to structure a page properly. There are general standards for using technologies, but over all getting your page to present properly is more important then how many or which type of elements you use.
For example if you want your page to auto re-size then you might want to use Divs or Tables. If you want your text to wrap without crossing the entire page, you might want to use a table, or spans...
I can show you some references to floating for CSS... But even in this type of example you could create divs within divs, that are styles appropriately to "taste"; or you could use spans within spans.
http://www.w3schools.com/css/css_float.asp
The major caveat to this explination is that corporate environments will normally have a style guide generated by advertising or marketing that will dictate how the eccomerse or client present sites, and data is represented. This will normally force you to use as an ex: Divs vs Spans.
Each element has a different default display property so I think in this case it depends of the element.
The display property of the span is Inline
– The inline elements line up horizontally as like
Inline Inline Inline
The display property of the div is block
https://iamarunkumar.wordpress.com/2010/02/10/what-is-the-default-display-property-for-span-and-div/
To create a navigation bar, you'll need something like so
* {
margin: 0;
padding: 0;
}
nav {
background-color: blue;
color: white;
font-family: Arial;
padding: 30px 40px;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
width: 49%;
text-align: right;
}
li.title {
text-align: left;
}
<nav>
<ul>
<li class="title">Welcome to Our World</li>
<li>We Work Best</li>
</ul>
</nav>
This would generally be considered the most common way to structure a nav bar.
This may seem trivial, but I am trying to add an icon to a bootstrap tab but I'm having style issues.
Looking for a CSS solution with the following:
Icon must float to the right of the link.
CANNOT put the icon inside the anchor tag, they must remain at same level.
<a></a><i></i>
jsfiddle
If anyone can solve this, it'd be greatly appreciated.
Because Bootstrap styles the a inside the tab li, you must then redesign the tab to apply the style not to the a but to the li.
If you can't do that, then you should wrap the icon inside the a.
You can try add:
display: inline-block;
to your a inside the li tag.
nav>li>a {
position: relative;
display: inline-block;
padding: 10px 15px;
}
I want to add pagination to one of my websites, but I have multiple problems with it, probably due to the fact that I don't have the best CSS skills in the world (they're mediocre at best).
You can see an SSCCE of my problem here: http://jsfiddle.net/rmurzea/qE7Ku/3/
1). To make the margin-bottom rule work, I had to add it to the pagination a class. If I add it directly to the pagination class, it doesn't work. Why ?
2). The content a:hover property has a text-decoration: underline rule. I can't seem to override it in pagination a:hover. How can I do it ?
3). I want that block of color and its text on the next line, but specifying a display: block rule doesn't seem to work.
Can anyone please help me with these problems ? Thank you in advance.
1) it works
.pagination {
margin-bottom: 20px;
}
2) Use !important in your css
.pagination a:hover {
text-decoration: none !important;
background-color: #5D4137;
color: #FFFFFF;
}
3) Replacing your p tag by div should work but it didn't, however I used a div with clear: both and it worked..
Here is your jsfiddle updated
I'm trying to pick up some CSS as I try to make temporary styling for this site while they find their stylesheet: http://faq.travelbelize.org/travel_belize
The priority is to get the menu and sitemap cleaned up (both have the class of "menu"), but I'm having trouble making them display horizontally.
I've tried:
.menu {
display: inline
list-style-type: none
}
Do I need to be more specific with my CSS selector? I've also tried it with .menu ul li without luck.
I've also played with padding, margins, display: list-item, and floats without luck.
I'm working on a website for a small law office. In the side-menu, I'm trying to highlight the "current page". I have tried changing the background of the LI, but this doesn't quite do the trick; the list item doesn't spread to the full width of the menu, so it looks bad.
Here's a jsfiddle. I would like the yellow section to highlight like the pink section is highlighted: filling up the full vertical and horizontal space, not just highlighting the text.
Any suggestions on how to do this? I've included the style tag in the html just for example, obviously, and my real solution will be a little different when it's done. But I can't move forward until I figure out how to somehow highlight the entire line.
One little issue: you're mixing em and px units for layout. This makes it a lot harder when trying to make things line up.
I've implemented it using a .selected class that would be applied to the selected elements, and a special case for the elements which are sub-menu items:
.selected
{
display: block;
background-color: #FCFFEE;
width: 15.4em;
margin-left: -0.6em;
padding-left: 0.6em;
}
.subMenuItem.selected
{
display: block;
background-color: #FCFFEE;
width: 13.4em;
margin-left: -2.6em;
padding-left: 2.6em;
}
And a jsFiddle fork of your original with the changes: http://jsfiddle.net/CkKc7/2/.
Good luck.
Remove the padding-left from the ul. Also remove the width.
Add display: block to the <a> tags.
Add the removed padding-left back, but on the <a> tags instead.
http://jsfiddle.net/7fEYx/4/
<li class="menuItem">Contact</li>
Is that what you are trying to achieve?
You should apply your style to the LI parent of the A tag, or make the A tag element block-level. Also, consider using a class instead.