I need to rotate some text under an image and place it to the left of the image and vertically centre it. Im using this with a CMS so the exact height and width of the image will vary. I also need to centre the image on the page.
This is what I have:
And this is what im trying to achieve:
Here is my fiddle, but I havnt got very far with it: http://jsfiddle.net/FgA8x/5/
This is the rough structure of the html, but this could be changed if needs be:
<div>
<img src="http://thumbs.dreamstime.com/z/young-footballer-1642893.jpg" width="150px" height="250px" />
<p>This is some caption text</p>
</div>
<div>
<img src="http://thumbs.dreamstime.com/z/young-footballer-1642893.jpg" width="300px" height="250px" />
<p>This is some caption text</p>
</div>
<div>
<img src="http://thumbs.dreamstime.com/z/young-footballer-1642893.jpg" width="500px" height="250px" />
<p>This is some caption text</p>
</div>
I can't seem to get the spacing right, but this as a general idea of how to get the caption to line up on the left using display: inline on the container and float: left on the caption text. Heres a fiddle:
Fiddle
Hope this helps.
Related
I have 3 divs, an image div, a text div and another image div
http://jsfiddle.net/m02pw4wk/4/
<div id="1" style="display:inline-block; width:100px">
<span style="margin:0;">Center<span>
</div>
I want to center the span text in its parent div
I tried vertical-align on the text but no success, also I see that there is a small margin, ou padding below the text, where is it coming from ?
Any pointing on the solution would be helpful
Cheers
You need to change the vertical-align property for the img element - not the text. It's worth noting that the default value for this property is baseline, thus the image element is aligned to the baseline of the text. Values such as top/bottom/middle will change this behavior.
Updated Example
img { vertical-align: middle; }
It's also worth noting that ids are suppose to be unique.
<div id="userbox" style="float:right; background-color:grey;display:table;">
<div id="1" style="display:inline-block">
<img src="http://www.dev2one.com/excel2web/demo/images/user_pic2.png" />
</div>
<div id="1" style="display:inline-block; width:100px;display:table-cell;vertical-align:middle;">
<span style="margin:0;">Center<span>
</div>
<div id="1" style="display:inline-block">
<img src="http://www.dev2one.com/excel2web/demo/images/cross.png" />
</div>
</div>
JSFiddle Example code: http://jsfiddle.net/SUMPq/8/
I have some text on a container, the code is at the top of the HTML, near the body:
<div id="container">
<div id="title_content">
<h1>Heading TAG</h1><br />
<p>SOME TEXT<br />SOME TEXT<br /></p>
</div></div>
<div id="spacebox"></div>
Then with CSS positioning i display the content at other part of the page:
#container{position:relative;width:860px;height:0;}
#title_content{position:relative;top:100px;left:10%;font-size:14px;}
The problem is that the content of the h1 tag is dynamic and sometimes it can be only one line and sometimes two or more, and in these cases the space box can be too large or too small. How can i handle this spacebox to be dynamic in height depending on the text contained?
CSS space box
#spacebox{display:block;width:auto;height:100px;z-index:100;}
just remove height:0; from #container
and give height:auto to #spacebox
I am trying to bottom align an image to a h1 text, but I am not achieving the desired results.
I tried adding two divs and align them that did not work well, now I am trying to align a span but I am not getting the desired result as well.
<div id="formheader">
<div id="formlogo"> <img src="../../Pictures/EditIcon.gif" width="17" height="20" alt="login logo"> </div>
<div id="formtitle"> <span> <img src="../../Pictures/EditIcon.gif" width="17" height="20" alt="login logo">Editor</span> </div>
</div>
Any tips on how to align images with text? I had to change from h1 to span because it would not align as h1.
Write like this:
img{
vertical-align:bottom;
}
I'm trying to update some code to use CSS sprites. In some situations it works fine, in others it screws up the page layout, and I can't figure out what I'm doing wrong.
Here's a fragment of the html ....
<div id="footer"><!-- footer -->
<div class="footer-top">
<div class="footer-left">
<div class="footer-right">
<img src="footer-logo.gif" />
<br /><br />
<div>
<p>blah blah blah</p>
<div class="clearfloat"></div>
</div>
</div>
</div>
</div>
... and the CSS:
.footer-left {
background: url(/images//footer-left_.gif) no-repeat left top;
}
I've created my sprite, and tried changing the CSS to:
.footer-left {
background:url('/images/sprites.gif') -66px -2px no-repeat;
width:20px;
height:99px;
}
The dimensions and offsets are correct, but the result isn't pretty. The sprite region shows in roughly the right place, but footer-logo.gif and the text are messed up.
Any ideas please?
The only things that have any effect on the logo and the text, are the dimensions you added; you set the width of the footer to 20px and if that wasn´t there before, that definitely has an effect on your bla bla bla text and .footer_right.
Note that .footer_right and the text are both located inside your 20px wide footer_left.
Are you sure your nested div structure is correct?
I am making a WYSIWYG webpage editor: http://brokenmyriad.com/editor2.php, however I have come across a problem when trying to add image functionality.
Note: the image is not inside a contenteditable element, but is just a normal floated image.
The problem can be recreated by clicking into either the paragraph or the heading and the clicking the insert image button on the toolar (the far right button). (on the above linked page).
In standards based browsers it works as expected, and the heading and the paragraph are both to the right of the image, however in ie6 the paragraph is under the floated image like in this picture: http://tinypic.com/view.php?pic=2mfcfo8&s=3
My simplified code structure is as follows:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div>
<p>Click here to edit!</p>
</div>
What I want is for the <p> element to be alongside the floated image, and under the <h1> element as it is in standards based browsers.
Any help would be greatly appreciated!
Why is the paragraph in a separate div? Wouldn't the following work:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
<p>Click here to edit!</p>
</div>
If you must have the divs, then the second one needs to be nested
<div style="float: left;">
<img style='float:left'>
<h1>Click here to edit!</h1>
<div style="float: left;">
<p>Click here to edit!</p>
</div>
</div>
Your second div should be floated left:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div style="float:left;">
<p>Click here to edit!</p>
</div>
It turned out that the elements had width:100% on them, which was causing the error.