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;
}
Related
I have been working with bootstrap for quite sometime now , i just came across a odd behavior when using inline-block instead of float , before i describe my entire problem , let me say that i don't use inline-block extensively and also the error seems to have something to do with line height.
Ok so HERE is the error , as you can see there is a gap between the nav items and the border , which ruins my design ,now that happened because i change on float:left to inline-block on the following line:
.navbar-nav {
float: none;
display: inline-block;
margin: 0;
}
So why is this gap occurring ? (i know that using float removes the element from the normal flow and using inline block the element will be back into its normal flow of the document.).
Now i found out that this is actually happening because of the line-height.
TWBS , defaults line height is 1.4 something, so now if i the following line to my code my issue is solved:
.navbar-default .navbar-collapse {
text-align: center;
line-height: 0;
}
The above code is added to the ul . Now see how i have reduced the line height to 0 , I have an intermediate understanding of line-height , all i want to ask is am i using the right solution here ? and WHY exactly is line height 'causing this error ?
P.S. This is "Why" question , not a "How do i solve this" question. please support your answers with evidence, that would be great :)
The reason is that inline-block puts a block level element on a line, just like a line of text, and it's then subject to vertical alignment along that baseline. When you set the line-height to zero, that fact is obscured because there's no distinction between the various points along a line of zero height.
You can add vertical-align: bottom; as below to change how your inline-block elements sit in relation to the baseline, and it should do the trick.
.navbar-nav {
float: none;
display: inline-block;
margin: 0;
vertical-align: bottom;
}
The effect should be indistinguishable.
You've added the inline-block to the ul element instead of li
Change to this;
.navbar-nav {
li{
float: none;
display: inline-block;
margin: 0;
}
}
Change display to inline instead of inline-block on your navbar-nav element.
navbar-nav {
float: none;
display: inline !important;
}
Fiddle
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 :)
I have spent a while trying to find out how to make text links sit horizontally on a navigation bar, but to no success.I am EXTREMELY new to coding so this is probably extremely easy to do, i am using html and CSS, i have tried just putting them on the same line. Also using:
#nav li a {
color: black;
display: inline;
list-style-type: none;
}
#nav li a {
color: black;
position: relative;
}
i have tried to find the answer on the site but i cant see one, so i thought i might as well just ask people. Thank you for reading.
You are targeting the wrong element, it should be
#nav li {
display: inline;
}
You were selecting a element, you need to target the li, a is an inline element by default, li renders one below the other, so to make them inline, we target li
I would suggest you to use
#nav li {
display: inline-block;
margin-left: -4px; /* If that white space matters to you */
}
As you will get same effect, but with some additional bonus like margins padding to space up your element. Alternatively, you can also use float: left; but you will need to clear your floats so stick with inline-block
I have this website I'm working on:
https://dl.dropbox.com/u/10264776/Web%20sustn.sk/odbory/fotograficky_dizajn.html
For some reason right of this box (Ctrl+F 1992) presents a weird behavior where the content of the li is pushed by few pixels, it's not is the styles, they're same for all of them, however I noticed that it's the only ul that doesn't have it's content push from one line to another like the others in the table do.
Any ideas how to fix this? All help will be greatly appreciated.
Just try to comment on style.css line 119
.list {
border-color: #BBBBBB;
border-style: solid;
border-width: 1px 0;
margin-bottom: -1px;
/*width: 560px;*/
}
By doing this your problem will solve only for that element but your width will remove from entire elements where .list is applied so you need to tweak on that particular table where 1992 is mention. It is table behavior it expands the table cells as per the text and layout or breathing space. So you need to put the width on that particular table cells.
Use like this
.list ul li
{
list-style: none;
padding:0;
margin:0;
padding-left: 1em;
text-indent: -.7em;
}
li:before
{
content: "• ";
color: red; /* or whatever color you prefer */
}
for a detailed explanation look here
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.