as i read around the web, it's a valid html5 practice to wrap block elements inside <a> elements. i have a problem though.
my html
<a href="http://google.com" target="_blank">
<div> </div>
</a>
my css
div {
background:#f00;
height:100px;
margin-left:10px;
width:300px;
}
a {background:blue;}
the link actually works, but i see no blue background and chrome says that my a have no height and width
changing the css of the a to display:inline-block does the trick here, but not in my website.
do you have any suggestion or solution? how come the a element doesn't "follow" its child?
thank you!
http://jsfiddle.net/72cYy/82/
it depends on what you're looking for, you can set a to display:block if you want it to behave like a block element:
a {
display: block;
background:blue
}
EXAMPLE 1
or you could set it to display: inline-block to make it behave like it natrually would:
a {
display: inline-block;
background:blue
}
EXAMPLE 2
There is no reason that either of these wouldn't work on your site. Perhaps you have CSS or javascript overwriting it? Both of these methods will fix the collapsed height/width issue. If it is a conflicting CSS issue you could be more specific by adding an id or a class:
a#wrapper{
display: inline-block;
}
or
a.wrapper{
display: inline-block;
}
For more information on collapsed elements, you can check out this SO answer
Related
TL;DR : Before you read anything, the desired end-result is illustrated in the image below, otherwise refer to the JSFiddle. Preferably, I would like to only use CSS and not modify the DOM structure.
The icons must be aligned completely to the right (hence the .pull-right), but the icons must be stacked vertically (Sometimes some icons must not appear, so they are .hidden, like the .fa-undo icon in the second row).
(When I say 'the icons' i mean the <i> tags and the <img> tag)
The icons must not make the textarea go down (no margin on top of the textarea).
Hopefully, the WIDTH of the textarea would be dynamic and not statically put to width: 90%; for example. It should take as much width as possible, without interfering with the vertical icon stack.
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
In general, images that are UI elements, and not content, should be CSS backgrounds, not inline images. You then use class names to control the image content.
You should be doing this, or something similar:
td.fr {
background-image:url(/images/fr.gif);
background-repeat:no-repeat;
background-position: top right;
}
The same should go for your buttons. Use <button> and style the background.
Not exactly what you wanted I'm afraid, but this is how I'd achieve that result:
fiddle
<div class="pull-right icons">
<img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
<i class="fa fa-reply"></i>
</div>
td .icons{
width:20px;
text-align:center;
}
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
I was unable to do it without adding another pull-right container, I fear that doing it with only CSS would end up being an odd hack
Fixed here : http://jsfiddle.net/QTXxp/2/
What was lacking when I asked this question was the clear:right; and the use of <div> (or display: block;)
Here is the CSS (if you're too lazy to open the JSFiddle) with the addition of the boostrap class pull-right on the div.icons
textarea.hover-edit {
width: 90% !important;
}
div.icons {
width: 10% !important;
}
div.icons > div > i.fa {
margin-top: 4px;
margin-right: 4px;
}
div.icons > div.action-icon-right {
float:right;
clear:right;
}
I'm pulling my hair out here trying to get CSS to position only a handful of html elements.
Here is the code:
http://jsfiddle.net/7pTL8/
What I want is for "person#business.com [v]" to be at the top-right and then below it "Average Depth," "[x] Settings", and "Past 24 hours [v]" are all displayed together at the same level. I've tried floats and that had strange results. I don't want to resort to using a table here because everything I read about CSS suggests using tables for layout is a poor solution.
Its not as tuff as you think..
here is small solution.. its not very good but it can solve you problem for now..
[a link] http://jsfiddle.net/7pTL8/2/
<div id="user-selection">person#business.com [v]</div>
<div id="settings-container">
<h1 id="graph-title">Average Depth</h1>
<span id="settings-button">[x] Settings</span>
<span id="timeframe-dropdown">Past 24 hours [v]</span>
</div>
CSS
#graph-title {
position:absolute;
left:1px;
text-align: left;
}
#settings-container {
text-align: right;
}
#user-selection {
text-align: right;
}
Your problem is probably the use of h1 element. By default h1 has the style display: block. If you add the style display: inline it will be fine.
EDIT:
I think you ought to use span for it if you don't have any special reasons.
<span> elements use display:inline, while <h1> elements use block by default. Manually override the #graph-title to use display:inline and it will line up with the rest of your elements:
#graph-title
{
display:inline;
}
So often, I we wind up doing something like this:
<div class="one">
<div class="floating-two">content</div>
<div class="clear"></div>
</div>
What we usually mean is, "make sure that any floated elements are included into block one". Sof potentially, any background applied to "one" appears behind everything, floating or not.
I am looking for a cleaner way to do this. After all, the "clear" div is simply a style that we intend to apply to "one". We could do:
.floating-two:after{
clear:both;
}
But this is not correct either. Floating-two doesn't know whether there might be other blocks following it before "one"'s closure.
Has anyone developed a trick for this one?
You can clear do this in two ways without adding markup (without a <div class="clear"..> or equiv):
.one:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
OR
.one {
overflow: hidden
}
You can use overflow: hidden on the outer div and it will stretch to the height needed to contain .floating-two. Example fiddled here: http://jsfiddle.net/neilheinrich/rBBMp/6/
.one {
overflow: hidden;
}
You have to add a real element with the clear property. If you don't like the divs, use a <br>. It's the shortest, valid element which doesn't modify the lay-out:
<br class="clear" />
EDIT
I do believe that RobW is correct in saying you can't do this with :after, but you can make it more dynamic with this css:
http://jsfiddle.net/qQaQg/2
.one :last-child
{
clear:both;
}
Is there a way to prevent a line break after a div with css?
For example I have
<div class="label">My Label:</div>
<div class="text">My text</div>
and want it to display like:
My Label: My text
display:inline;
OR
float:left;
OR
display:inline-block; -- Might not work on all browsers.
What is the purpose of using a div here? I'd suggest a span, as it is an inline-level element, whereas a div is a block-level element.
Do note that each option above will work differently.
display:inline; will turn the div into the equivalent of a span. It will be unaffected by margin-top, margin-bottom, padding-top, padding-bottom, height, etc.
float:left; keeps the div as a block-level element. It will still take up space as if it were a block, however the width will be fitted to the content (assuming width:auto;). It can require a clear:left; for certain effects.
display:inline-block; is the "best of both worlds" option. The div is treated as a block element. It responds to all of the margin, padding, and height rules as expected for a block element. However, it is treated as an inline element for the purpose of placement within other elements.
Read this for more information.
.label, .text {display: inline}
Although if you use that, you might as well change the div's to span's.
A DIV is by default a BLOCK display element, meaning it sits on its own line. If you add the CSS property display:inline it will behave the way you want. But perhaps you should be considering a SPAN instead?
<span class="label">My Label:</span>
<span class="text">My text</span>
try this (in CSS) for preventing line breaks in div texts:
white-space: nowrap;
The div elements are block elements, so by default they take upp the full available width.
One way is to turn them into inline elements:
.label, .text { display: inline; }
This will have the same effect as using span elements instead of div elements.
Another way is to float the elements:
.label, .text { float: left; }
This will change how the width of the elements is decided, so that thwy will only be as wide as their content. It will also make the elements float beside each other, similar to how images flow beside each other.
You can also consider changing the elements. The div element is intended for document divisions, I usually use a label and a span element for a construct like this:
<label>My Label:</label>
<span>My text</span>
div's are used to give structure to a website or to contain a lot of text or elements, but you seem to use them as label, you should use span, it will put both text next to eachother automatically and you won't need to wright css code for it.
And even if other people tell you to float the elements it's best that you just change the tags.
I don't think I've seen this version:
<div class="label">My Label:<span class="text">My text</span></div>
<div id="hassaan">
<div class="label">My Label:</div>
<div class="text">My text</div>
</div>
CSS:
#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}
Try applying the clear:none css attribute to the label.
.label {
clear:none;
}
use this code for normal div
display: inline;
use this code if u use it in table
display: inline-table;
better than table
try float your div's in css
.label {
float:left;
width:200px;
}
.text {
float:left;
}
I have many times succeeded to get div's without line breaks after them, by playing around with the float css attribute and the width css attribute.
Of course after working out the solution you have to test it in all browsers, and in each browser you have to re-size the windows to make sure that it works in all circumstances.
display: inline-block worked for me
For a webpage I used a div id that with css inserts a logo directly in the page. I'd like that logo to be linked to (for instance) a homepage. I can make it easily by doing this
<a href=xyz><div id=logo></div></a>
of.course that doesn't validate (eventually DTD XHTML 1.0 Strict).
Can anyone suggest the (probably obvious) best practice?
Thanks
You can do away with fiddly SPAN and DIV cluttering up your page and have the link itself be a block.
And in your CSS, style it with background and size it to the dimensions of the image you want to be clickable:
#logo
{
background:url("/path/to/image.jpg");
display:block;
width:200px;
height:80px;
}
<span></span>
Apply the background image, width, height and display:block to the span. Hope that helps!
<span class="logo"></span>
You might have to declare <span> as display: block;.
Use a span:
<a href=xyz><span id=logo></span></a>
Don't forget to convert the span to a block element in your css:
.logo {
display: block
}