I know how to put a text next to an image by applying float:left to the img tag, but when I give it a link e.g href="#" the text won't stand stick to the image, it falls down. To give more info about the project, my <a> tags in the <p> tags are display: inline-block; and the css I applied to the img tags is:
float:left;
margin-right: 15px;
border:0px;
So why is this happening? I want my image to stand just as it does when I don't put it between <a> tags.
The float: left; means the element is floated to the left of the content within the same parent. Since you are wrapping the image inside of an <a></a> tag, the image is being floated to the left of the content within the <a>.
If you apply the float to the a instead of the img, then the a will be floated to the left of the content in its parent, as desired.
Related
I have 2 div boxes next to each other using display: inline-block.
Without content both inline-block divs are vertically aligned to top.
If both have content they also vertically align to top.
If only one of them has text content then the div box that has text content is vertically aligned to bottom while the one wihtout any text content remains vertically aligned to top.
If one box has plain text content and the other has e.g. an input field or a header tag then the box with only text content moves down only slighly (maybe 2 or 3px) while the one with the input or header tag stays on top.
Please see jsfiddle link below
Why did the creators do this instead of always aligning them to top? Is there a deeper reason behind this?
UPDATE:
In your example just add:
.content_boxes{
width: 400px;
height: 200px;
background: lightgreen;
display: inline-block;
vertical-align:top;
}
Fiddle:
http://jsfiddle.net/genwQ/1/
You have to set vertical-align:top; to each element is display:inline-block;. Careful not to confuse: it is the element, NOT the parent.
Example:
ul li {
display:inline-block;
vertical-align:top;
}
Demo:
http://jsfiddle.net/X3RLB/
Realize that an unwanted space appears between your inline-block elements. This space CANNOT be removed with the margin:0px; property. To remove them you must add a comment tag between inline-block the elements.
Example:
<div id="content_cnt">
<div class="content_boxes"></div><!--
--><div class="content_boxes">dsasda</div>
</div>
Fiddle:
http://jsfiddle.net/genwQ/2/
I read in various places that text-align: center only works on text and inline elements. It works on my header elements but not my ul and blockquote elements. I had to add display: inline-block for the ul to be centered.
I understand that it works on the headers because, while they the whole element is a block, they contain inline text. But how is that any different from my ul and blockquote elements? Isn't it true that they're also block-level elements that contain text?
For additional reference, see my CodePen.
text-align works when you want to center inline (or inline-block) elements that are contained within a parent block level element. You apply the style to the parent element.
Because ul elements are not inline elements, they will not be centered when you apply text-align: center to the parent. They are block level elements and block level elements by default take up the remaining space on that line.
To center a block-level element you can give it a specific width then you can apply margin-left: auto and margin-right: auto to the element. So, in your case if you give the <ul> element a width and set the margin-left and margin-right to auto it will become centered within its parent div. No need for text-align: center.
By default a <ul> does not contain text, but an <li> does. Therefore you can apply text-align: center to an <li> element to center the inline text inside of it.
Also, your <blockquote> elements only contain block-level elements directly: <p> and <footer>. They do not contain text as a direct child descendant. And therefore nothing will be centered inside of it. If you only had text inside of it, then the text would be centered.
Update
As per your comment on centering and left-aligning, if I am understanding you correctly you can do something like this:
<style>
#parent {text-align: center}
#parent ul {display: inline-block; text-align: left}
</style>
<div id="parent">
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
</div>
The trick here is that you need to override the text-align=center in the ul because otherwise it gets inherited from the parent div.
Try wrapping the ul in a div, give the div an id, style div using id, with 'text-align: center;'
And get rid of the ul CSS styles that you have.
I have displayed one of sprite's image in span tag. The span is in inside of the some other element like <div>, <li>, <p>. The parent elements of the span's, text alignment is center.
The text content of the parents elements are aligned center correctly. But i am not able to
make the span with sprite image to center.
Here i have added the sample code.
HTML Markup:
<div align="center"><span class="cameraIcon spriteImage"></span>Some Text Content</div>
Style
span.cameraIcon {
background-position: -240px 0;
width: 24px;
height: 24px;
position: absolute
}
Any suggestions would be appreciative.
Thanks!
By using absolute positioning, the span tag is no longer part of the text flow inside the div element, so it's not affected by text alignment.
You could use the style display: inline-block; to make the span element a block element that is still part of the text flow. (Some older browsers doesn't support that display value, though.)
It seems that the span serves no other purpose than to show a background image, so I would get rid of it completely and add the background to its parent element:
html:
<div class="cameraIcon spriteImage">Some Text Content</div>
css:
.cameraIcon {
background-position: -240px center;
}
I have a list, each li in it has this structure:
<li>
<img class="yes" src="...">
<img class="no" src="...">
<span class="a">...</span>
<span class="b">...</span>
</li>
now if the content of class b is long, it will wrap around the image. I don't want it to wrap under the image, I want it to stay in its own column. If there is anyway to do this, please let me know as using tables to do it will be just wrong.
Thanks!
Nima
You can do a couple things;
1) Add padding to the bottom of the image to take the space the span text normally would flow into. Quick and easy, but not realistic for dynamic pages.
2) Wrap a div around the spans. Then float the div right with a left margin the size of the image column. This will then create a div container that will not flow around the image.
Thanks Duilai,
I added the div. Here is the css that did the trick:
.divClass
{
margin-left:30px;
text-align:left;
}
.yes, .no
{
float:left;
width:15px;
}
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.