This is my problem : http://jsfiddle.net/F6pNm/8/
I need the text to appear on same line as the links. But it keeps using adding a empty line at the right.
EDIT: Forgot to mention, I need the text within the div to be centered between the links.
if you add this:
#footer {text-align:center;}
and add
#flash {display:inline} to the 'flash' id
if will work
: http://jsfiddle.net/F6pNm/24/
note: This will also work if you want to center more than one div, just use a class instead of an id (and . instead of #) to apply it to multiple divs
Have div#flash float left as well.
Use display: inline-block for the flash div. Since you mentioned you want the content centered, add #footer { text-align: center; } to your style rules.
Related
I have a couple of links that have a margin-left of 3px. These links are underlined and look like that:
<a href='#'>
test
</a>
Unfortunately, there are spaces inside the link and I'm not able to remove these space since I don't have access to the HTML code. These spaces are also underlined, which I'm not happy with. Is there any way to remove them without changing the HTML?
Here is a fiddle that shows my problem: http://jsfiddle.net/e8quz/
Update:
Here is a picture, what I want it to look like:
The spaces come from the line-breaks (well-known from the display:inline-block problematic).
So make your a elements display: block and float them to the left.
DEMO
PS: The display:block is "redundant", as float normally already sets the display property of the respective element to "block". But it do no harm ...!
See here: http://jsfiddle.net/BWc2U/2/
This will also solve the issue. There is no need to make them floats, with the floats you need to clear the floats otherwise all content after will also be floated etc...
a {
margin-left: 5px;
display: inline-block;
}
You can just float the links to make the white space disappear without editing the html
a {
margin-left: 5px;
float: left;
}
http://jsfiddle.net/e8quz/2/
I am trying to customize a free widget, but I dont have access to edit the html. I am only given access to the css. I want to be able to align the a tags virtually. I have tried the following css, but the tags are right on top of each other/ How do I put space between them?
HTML
<span>[×] [o] </span>
CSS
span a { position:fixed; }
JSFIddle
http://jsfiddle.net/gfvAw/58/
You can always float and clear the anchor tags:
a { float: left; clear: left; }
Here's a jsfiddle to demonstrate: http://jsfiddle.net/gfvAw/60/
a { display: block; }
This will convert the a tags into block elements, meaning they will automatically expand to fit their containers.
However, you should realize that using block elements means the user will be able to click anywhere in the block, rather than just on top of the link text. A solution to that problem would be to use jQuery to insert <br/> tags after each a tag. Or you could replace the entities with <br/> tags, as well.
I want to have a setup like this:
<div id="block">
<div class="btn">2</div>
<div class="btn">1235e</div>
<div class="btn">really long one</div>
</div>
jsfiddle: http://jsfiddle.net/cutcopypaste/3uu5Q/
Where the btns and block div get their width based on the content. Just like it appears in the fiddle, except that the width of the btns are based on their text rather than their container
I cannot use a table because I need to be able to apply styling to get vastly different appearance, so I need the html markup to stay basically the same. If it's absolutely necessary I could apply some js.
I tried a couple different ways of displaying, but not sure how to acheive this. I don't wish to hard-code any widths as the content will be changing, and I need it to work in older versions of IE (though I can use libraries like IE9.js).
Here's an example of how the #block will be sized to be as wide as its longest button:
#block {
float: left;
}
.btn {
float: left;
clear: both;
}
The floated elements will expand only to their content's width. It's assuming you want each button on its own line.
If you want the buttons to flow together, remove the clear:both from the .btn rule. However if you do want them all on one line you'll have to be aware of float drop. This will happen if the widths of all your buttons added together is greater than the available width. In this case, the rightmost button will drop down below the other buttons.
Update: based on OP's comment, here's the CSS for a table cell style where #block and all .btn elements expand to the widest button's width:
#block {
display: inline-block;
}
.btn {
display: block;
}
Along with an example.
Where the btns and block div get their width based on the content.
I'm not 100% sure whether I get you right, but using display:inline elements like spans instead of <div>s should solve your problem.
make them float or inline, that way they won't act like blocks (wont be 100% width).
ie I have a div, below is a hidden div, which is wider than the div above. I want to specify the div inside to have elements with greater widths than the div above. these elements right hand side is aligned to the right hand side of the div above, but since it is wider, want the left hand side to break out. The div below is on a diff layer than the div above as it only appears on clicking on trigger element of div above.
Basically its a drop down list, with some random elements are wider than the image element above which, when clicked drops this list. but i want the list underneath to expand to the left breaking out of the parent div, without specifying exact positions. Therefore, the elements are all children of the parent div and right aligned to it, just like parent.
Hmmm, hope you can follow. Really appreciate any help. Thanks in advance.
Negative Margins seems to be the best answer. If anyone knows of cross browser issues, please post here. Perhaps I will but shalln't be testing for them for a week or two.
You should probably just use a select tag (for accessibility's sake) even though it won't look as fancy. But if you're set on it, try something like this (and add your javascript code to hide/show the list):
#wrapper {
width: 500px;
}
#select {
border: 1px solid black;
width: 180px;
float: right;
}
#options {
float: right;
clear: right;
text-align: right;
}
and
<div id="wrapper">
<div id="select">pick one...</div>
<div id="options">
<div class="option">I'm short</div>
<div class="option">I'm a very very very very very long option</div>
</div>
</div>
If you end up using this, change the options div to a ul tag and the option divs to li tags, or something semantically closer to what you're building. I just used divs to cut down on the amount of css in my example.
I am trying to put 2 columns into a website, I've got that to work fine but for whatever reason, the rest of the page doesn't change size to suit the content in the left column. Here is how it looks: www.kelownafoodspecials.com/indexsides.php.
Pretty stuck so any advice would be greatly appreciated. Thanks,
K
You should add <div style="clear:both;"></div> directly after your #contentright
you must float your #content div also. For any elements decalres as float:left(or right), if their containing elements are not also floated elements, the containing elements will not expand to fit the content and it will overlay it's containing element as you are seeing there.
Try this (assuming none of your content is meant to overflow)
#content {
overflow: hidden;
}
I just tried it using Firebug, and nothing appears to be chopped off (and the #content will expand to contain it's floated child).
You could append a <div class="clear"/> whose style could like like:
.clear {
clear:both;
display:block;
float:none;
}