So I read the solutions regarding making the spacing go away when using inline-block as opposed to floats: display: inline-block extra margin and http://css-tricks.com/fighting-the-space-between-inline-block-elements/.
So if you're using haml and want to put the closing tag on the same line as the next opening tag, is there is a solution besides switching to ERB?
(and no, I don't want to mess with a css property of the parent container and have to override that in all the child elements).
This breaks (has spacing between the anchors).
So is it true that in spite of the recommendations to do such layouts using inline-block as opposed to floats, it seems that floats are still the way to go, especially when using haml?
CSS
nav a {
display: inline-block;
padding: 5px;
background: red;
}
HTML
<nav>
One
Two
Three
</nav>
Workaround (css-tricks one):
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
or
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
another one:
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
I found the answer: http://haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_
(this is a super useful article on the topic: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/)
Here's a codepen to experiment: http://cdpn.io/Bjblr
And this worked:
Here's the html if the anchor text is on the same line (same result, but harder to read source html:
Related
Is it possible to have the first line of text (or inline-blocks) aligned to the left, while the next one to the right using only CSS? I'm sure it can be done using JS, but am looking for a cleaner and simpler solution.
I have this navigation bar (which is a <ol> in the markup). It's usually one-line long, but recently we got a case, when it's grew long enough, so that it broke to the second line. Below is the photo of that. What my boss asked me to do is align the second line to the right, while keeping the first intact.
Now it looks like that:
What I'm aiming for is this (I'd then make some fixes to make it look prettier than on the picture below):
The markup. All li items are inline-blocks, but I could change that.
<ol class="phase-labels">
<li class="phase-label phase-current">Company</li>
<li class="phase-label phase-inactive">The Policy</li>
<li class="phase-label phase-inactive">Property Insurance</li>
<li class="phase-label phase-inactive">Additional Clauses</li>
<li class="phase-label phase-inactive">Public Liability</li>
<li class="phase-label phase-inactive">Public Liability Additional</li>
<li class="phase-label phase-inactive">Employers Liability</li>
<li class="phase-label phase-inactive">Quotes</li>
</ol>
You could try using direction propertie + text-align:justify to fill up entire first-line.
What does this involve? :
it reverse the reading direction of li (as inline-boxes) and
punctuation.
if only one line , lis stand towards right.
DEMO
Basic CSS
ol {
display:block;
position:relative;
direction:rtl;
text-align:justify;
}
Note: too bad text-align cannot be overwritten through the pseudo class :first-line.
You have the display:flex propertie too. DEMO
Basic CSS :
ol {
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
}
I did misunderstand what he was looking for sorry everyone, why not try this. I think the following css should work.
ol{
float: right;
}
ol li{
float: left;
}
This answer is based around the idea that if the nav bar has exceeded the parents width, then it's float won't necessarily matter, but aligning everything to the right ensures it positions where you want. And floating the list items to the left, allows everything to be displayed in the proper order
I'm trying to create a horizontal (no line breaks) unordered list of images on my website using code as follows:
<ul class="ImageSet">
<li>
<img src="blah">
</li>
<li>
<img src="blah">
</li>
<li>
<img src="blah">
</li>
</ul>
In my CSS, I'm using the following rules:
.ImageSet { white-space: nowrap; }
.ImageSet li { display: inline; float: left; height: 100% }
This is working properly in Chrome, but not in Firefox, for some reason does anyone know why?
EDIT: To clarify, the problem in FF is that the li's still wrap. I'm trying to make them all appear in a single, unbroken horizontal line going off the rightmost edge of the page.
Try removing float:left as display:inline should suffice
When you float li's they will wrap when they reach the end of their parent container (which could be the body tag). If you are wanting the image to disappear out of the screen you will need to set the width of the parent container (the ul) and use overflow hidden or auto to get your desired effect.
I have the following markup that is used to produce a pop-up style mega-menu (the .column div is there to allow multiple columns within each popup, though the example below only has a single column)...
<ul id="mainmenu">
<li class="mega">
<h2>Menu 1</h2>
<div class="submenu col1 leftmenu">
<div class="column">
<ul>
<li><h3>Sub Menu Heading</h3></li>
<li><a class="hilight" href="#">Do Something</a></li>
<li><a class="hilight" href="#">More great stuff</a></li>
<li>Another Item</li>
</ul>
</div>
</div>
</li>
<li class="mega">
<h2>Second Menu</h2>
<div class="submenu col3 leftmenu">
blar blar blar
</div>
</li>
// more menus here
</ul>
As this nests quite deeply with quite a few similar tags (<li> <a>) I end up needing a fairly horrible list of selectors to style it in css, eg.
#mainmenu li h2 a {}
#mainmenu li.mega .column li h3 a {}
Can anyone suggest any improvements to the markup so that it would be simpler to target with CSS and jQuery?
If it were me, I'd put nicely targetable classes on the final entities in question, and change
#mainmenu li h2 a {}
to
#mainmenu .section {}
and
#mainmenu li.mega .column li h3 a {}
to
#mainmenu .subsection {}
and whatnot.
Personally I think your html looks good, it's not plagued with endless ids and none of the classes seem redundant or useless.
If you don't ever use an h3 anywhere but inside an li, inside a column, inside a parent li then you could do: #mainmenu h3 a. I really think you can just be less explicit in your selectors.
I try to really utilize unique html tags so that all I need is an id on the top-most element and a few classes beneath if needed.
You could always use more specific selector names. Instead of:
#mainmenu li.mega .column li h3 a {}
and
<ul id="mainmenu"><li class="mega"><div class="column"><li><h3><a>
use
h3.mega_column a {}
and
<ul id="mainmenu"><li class="mega"><div class="column"><li><h3 class="mega_column"><a>
Not without seeing the rest of your CSS really, but I think your motivation is wrong. You should aim for your mark-up to reflect exactly what content is required. If this thing needs to be defined as separate from that thing they need to exist as different elements, if not, not. Separate concerns and don't even think about the CSS until your mark-up is as it needs to be.
I will say that it looks like it's possible you could collapse div.column and the ul child into just ul.column and the anchor in the h2's could possibly be moved inside the div.submenu's and given a "header" class for example.
Aside from making sure that your structure is really fitting the semantics of your content and not just there for design reasons, there are a few things I can suggest:
You don't need to wrap <ul> in a <div> if there's nothing else in the div. They're both block-level elements and you could write <ul class="column"> and save yourself some unnecessary markup. It's redundant as-is.
You might be able to simplify your CSS a lot if you're not using class names to mean different things in different places. For example, if you only use the "column" class in under #mainmenu .mega then there's really no need to specify it every time. Just saying .column h3 a will get there just the same.
If you want simplicity in jquery you could also take advantage of the CSS3 selectors like :not() to sort things out for you. For example instead of $("#mainmenu li.mega .column li") you could instead do $("#mainmenu li:not(.mega)")
Those are my thoughts.
Is there an easy way to distribute inline elements within a parent block container using CSS? Setting margins to auto doesn't work since the margins between inline elements are set to 0 and I don't want to mess around with percentages as the content is dynamic.
In particular, I have several anchor elements (a) within a paragraph (p) that spans 80% of its container and I'm looking for an easy way to distribute them evenly within the paragraph.
EDIT (#cletus): The paragraph will not wrap and the anchors are the only thing in the paragraph. By distribute evenly, I mean that the space between the left (right) edge and first (last) element and the elements themselves is equidistant.
Unfortunately, this is not possible with CSS. However, in the special case where your elements are of equal width, this CSS hack makes it fairly easy.
With equidistant spacing between variable-width elements even specifying widths in percentages for each element's container will not suffice. This would still create a variable width between the elements.
This is probably possible to do with JavaScript on most modern browsers. Here is an example page demonstrating a poorly implemented JavaScript hack and proof that attempting to use text justification to solve this problem will not work reliably.
If CSS3 is acceptable (ie, if how it looks in IE6 is not of primary importance), you can use the display property values of "table" and "table-cell" to use the table display model with any type of element; "inline-block" is also something to consider, which acts like a block without breaking a new line.
Hmmm, sounds to me like you're creating a menu? You might want to use a list to hold your anchors and style the list accordingly. This is the commonly accepted best practice.
As for even distribution of elements, I was looking yesterday for something similar, I was hoping it would be in the CSS3 spec, but it's not (at least I can't find it) which seems like a major f*ckup if you ask me. Anyway...
Which leaves two options. CSS, and Javascript.
With CSS, use the margin-right property for each element. It's a good idea to create a .last class that sets margin-right to zero which prevents your last element from breaking the layout.
There's a bunch of javascripts out there that will do this for you. I prefer only to use JS when absolutely essential, so I couldn't comment on which one is best.
... there is one last thing you could try, but... you didn't hear this from me ok?
You could use a table. That is the quickest (and dirtiest) way to get what you want.
IMHO, and you probably don't want to hear this, but the design is probably flawed. It's common knowledge that distributing items evenly across a layout with CSS is a pain, so designers should avoid it.
UPDATE: You could also try
.link_container { text-align: center; }
.link_container a { margin-right: 10x; }
.last { margin-right: 0; }
then use something like this
<div class='link-container'>
<a href='...'>Some line</a>
<a href='...'>Some line</a>
<a href='...'>Some line</a>
<a class='last' href='...'>Some line</a>
</div>
That might get you close.
Best solution I've found is to center align the containing div then give each of the links a fixed and reasonable left and right padding that can accommodate both the long links and short ones. While this won't evenly space your links all the way across the top bar it will provide a visually pleasing effect.
<div style='text-align:center'>
<a style='padding-left:10px;padding-right:10px'>Link 1</a>
<a style='padding-left:10px;padding-right:10px'>Link 2</a>
<a style='padding-left:10px;padding-right:10px'>Link 3</a>
</div>
It's a bit unclear what you mean by "distributing evenly"; Could it be that you want to justify the contents of the paragraph?
p { text-align: justify; }
do your anchors have specific widths set? i think that might be necessary for any margin auto's to work.
using display: table on the container and display: table-cell on the items within seems to do the trick for me. It even works in IE8
<!DOCTYPE html>
<html>
<head>
<!-- insert reset CSS here -->
<style type="text/css">
#header {
width: 940px;
margin: 0 auto;
background-color: #E6EFE6;
}
#main_nav {
width: 100%;
display: table;
}
#main_nav .nav-item {
display: table-cell;
text-align:center;
}
</style>
</head>
<body>
<div id="header">
<ul class="" id="main_nav">
<li class="nav-item first">
Item 1
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item last">
Item 3
</li>
</ul>
</div>
<body>
</html>
I'm trying to place this menu on the left hand side of the page:
<div class="left-menu" style="left: 123px; top: 355px">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>
The problem is that if I use absolute or fixed values, different screen sizes will render the navigation bar differently. I also have a second div that contains all the main content which also needs to be moved to the right, so far I'm using relative values which seems to work no matter the screen size.
float is indeed the right property to achieve this. However, the example given by bmatthews68 can be improved. The most important thing about floating boxes is that they must specify an explicit width. This can be rather inconvenient but this is the way CSS works. However, notice that px is a unit of measure that has no place in the world of HTML/CSS, at least not to specify widths.
Always resort to measures that will work with different font sizes, i.e. either use em or %. Now, if the menu is implemented as a floating body, then this means that the main content floats “around” it. If the main content is higher than the menu, this might not be what you want:
float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png
<div style="width: 10em; float: left;">Left</div>
<div>Right, spanning<br/> multiple lines</div>
You can correct this behaviour by giving the main content a margin-left equal to the width of the menu:
float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png
<div style="width: 10em; float: left;">Left</div>
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div>
In most cases you also want to give the main content a padding-left so it doesn't “stick” to the menu too closely.
By the way, it's trivial to change the above so that the menu is on the right side instead of the left: simply change every occurrence of the word “left” to “right”.
Ah, one last thing. If the menu's content is higher than the main content, it will render oddly because float does some odd things. In that case, you will have to clear the box that comes below the floating body, as in bmatthews68's example.
/EDIT: Damn, HTML doesn't work the way the preview showed it. Well, I've included pictures instead.
I think you're supposed to use the float property for positioning things like that. You can read about it here.
All the answers saying to use floats (with explicit widths) are correct. But to answer the original question, what is the best way to position a <div>? It depends.
CSS is highly contextual, and the flow of a page is dependent on the structure of your HTML. Normal flow is how elements, and their children, will layout top to bottom (for block elements) and left to right (for inline elements) inside their containing block (usually the parent). This is how the majority of your layout should work. You will tend to rely on width, margin, and padding to define the spacing and layout of the elements to the other elements around it (be they <div>, <ul>, <p>, or otherwise, HTML is mostly semantic at this point).
Using styles like float or absolute or relative positioning can help you achieve very specific goals of your layout, but it's important to know how to use them. As has been explained, float is generally used to place block elements next to each other, and it really good for multi-column layouts.
I won't go into more details here, but you might want to check out the following:
SitePoint CSS References - probably the most straightforward and complete CSS reference I've found online.
W3C CSS2.1 Visual Formatting Model - Yes, its a tough read, but it does explain everything.
You should use the float and clear CSS attributes to get the desired effect.
First I defined styles for the called left and right for the two columns in my layout and a style called clearer used to reset the page flow.
<style type="text/css">
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 800px;
}
.clear {
clear: both;
height: 1px;
}
</style>
Then I use them to layout my page.
<div>
<div class="left">
<ul>
<li>Categories</li>
<li>Weapons</li>
<li>Armor</li>
<li>Manuals</li>
<li>Sustenance</li>
<li>Test</li>
</ul>
</div>
<div class="right">
Blah Blah Blah....
</div>
</div>
<div class="clear" />
you can use float
<div class="left-menu">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>
in css file
.left-menu{float:left;width:200px;}