I am new here. Excuse me being a noob. I am a HS student seeking some help.
I cannot seem to paste my code so here's the link for jsfidlle
http://jsfiddle.net/zeusthunder10/WSD9f/6/
<body bgcolor="#D1D1D1">
<div align="center">
You have the style
#navbar li { ... float: left; ... }
so all the li's, you know, float to the left.
You probably want:
#navbar li { ... display: inline-block; ... }
Here's your Fiddle with that swap. IS that what you wanted?
One way to center a block element like ul and without width is to use the trick display: table on the #navbar.
Also you need to add the missing </ul>
Jsfiddle fixed: http://jsfiddle.net/WSD9f/8/
It looks like you didn't close the ul tag. You will want to put a /ul at the end of your list.
Try putting "display:inline-block;" in your #navbar class
#navbar {
margin: 0;
padding: 0;
height: 1em;
display:inline-block;}
Related
Good afternoon,
I am trying to create a menu bar with a sub-nav under some parents, however the childs are not aligning.
I have change the child bicolour to red to highlight the concern.
There is a chance that by entering the sub-nav text may cure the concern.
I have listed below the CSS and HTML.
Kind regards
Gary.
Danceblast
Your problem is this:
#dropnav ul li {
margin-left: 20px;
}
It's being applied to the subnav's child li's aswell, you can target the subnav directly and set the margin to 0
#subnav li {
margin-left:0px !important;
}
OR
#dropnav #subnav li {
margin-left:0px;
}
if you dont want to use !important.
#dropnav ul li {
margin-left: 20px;
}
You want to remove the margin as well as you want to check for your text-alignment.
At the moment your elements use
text-align: center;
on all its parents and childs. You probably want that to be:
text-align: left;
Hope that helps.
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 :)
See http://jsfiddle.net/PdZrt/
Basically I have applied the yui reset and base and am the trying to seperately style a ul for a menu. The li's pick up the style but the ul doesn't appear too.
Any ideas?
In the fiddle there should:
list-style: none;
padding: 0;
margin: 0;
background-color:Red
There are a couple issues here.
One, that jsfiddle is all on one line and wrapping.
Two, your CSS for the ul reads: .nav-menu ul -- nav-menu IS the ul, thus it should read:
.nav_menu { list-style: none; ... }
The reason the background: red isn't showing up is because the elements inside of the <ul>, the <li>s have float: left set. This removes from from the flow of the <ul> and effectively makes your <ul> have a height of 0. While there is more than one way to solve this problem, the quickest would be to add a overflow: hidden to the <ul>.
Define your .nav-menu li list-style:none; and define your .nav-menu overflow:hidden;
Add this css
.nav-menu{
overflow:hidden;
}
.nav-menu li{
list-style:none;
}
Demo
Hey there, can someone help diagnose this CSS issue, as I have no idea what the beep is going on;
Here's my CSS:
#navigation {
display: inline;
}
.download {
width: 10px;
height: 40px;
}
.steps {
width: 90px;
height: 40px;
}
And here's my HTML:
<div id="navigation">
<div class="download"></div>
<div class="steps"></div>
</div>
For some reason, even though display:inline; is being used, the classes still drop below one another.
And before someone comments on why I'm not using a unordered list to create my navigation, this is meant to be quickie job with a pretty low pay, so the best form isn't what I'm going for. That said, I've been trying to diagnose this issue for over half an hour, and I'm stumped. I've clearly made an obvious mistake, I just can't pick up on it.
Any help would be greatly appreciated :).
The parent div is inline, not the children. You haven't done anything with the children, they're still block. Your problem will likely be solved if you make the children inline-block though, with:
.download, .steps {
display: inline-block;
}
Or you can float them:
.download, .steps {
float: left;
}
#navigation {
overflow: hidden;
zoom: 1; /* if you care for the anti-browser */
}
All this is if you do care for them to keep the width and height you specified, while keeping them next to each other.
You could just float all of your divs left and achieve the same result.
I don't believe divs inherit their parents display property by default, and divs are block. So you would have to set both .download and .steps to also be display:inline
You could also create a selector like:
#navigation div { display:inline; }
More than likely, you want #navigation to be block anyways, since you will probably want the navigation container to be block.
Try adding a style on the div's in the #navigation div...
#navigation, #navigation > div {
display: inline;
}
Pretty basic question - I can't seem to vertically align an icon inside of a list.
My css looks likes this:
#top_content img {
float: left;
}
#top_content ul {
float: right;
}
#top_content li img {
vertical-align: sub;
}
#top_content li {
list-style-type: none;
display: inline;
}
#top_content li a {
text-decoration: none;
color: #7aa807;
}
My HTML looks like this:
<div id="top_content">
<ul>
<li><img src="../img/mail_ico.png" alt="#"><strong>(1 New)</strong></li>
</ul>
</div>
Any ideas? What am I doing wrong here?
Try adding line-height to it:
#top_content img {
float: left;
line-height:20px; /* adjust accordingly */
}
Expecting vertical-align to work properly :) In your case would it be possible to set mail_ico.png as a background image on the <a>? That's how I handle cases where the vertical position of an image is important in a design.
Don't float the image. It will no longer be inline behavior, that is what is causing your problem.
float: left is basicly canceling out the effect of vertical-align. vertical-align c ontrols the alignment of an in-line element to other in-line elements on the same text line. float: left makes the img a block element, on which vertical-align has no effect.