I've got the following "key" which is a div containing pictures of the planets and their names for an educational animation. Is there a quick way/shortcut (without wrapping the text in separate spans or something then assigning top/bottom/left/right properties to specific ids) to make the text appear in-line with the icons?
<p id='key'>
<img class='img-key' src='media/mercury.ico'> Mercury
<br/>
<img class='img-key' src='media/venus.ico'> Venus
<br/>
<img class='img-key' src='media/planet-earth.ico'> Earth
<br/>
Not sure I understand but here are two possible solutions. If you want everything on one line, remove the <br /> tags.
jsFiddle example
If you want the text centered vertically with each image, set the vertical-align property to middle on the images:
img {
vertical-align:middle;
}
jsFiddle example
Related
I have tried using inline styles such as
#whiteRectangle{
top:5%
}
to try and move it manually but this is not working.
My code pen listed above shows what I have tried so far and what the problem looks like. Any guidance in getting the text and white rectangle moved for the fifth box would be greatly appreciated.
Second but smaller issue: Each text inside each box is not the same as the text shown in the design above. That is, for example we have
I have tried removing
text-align:center
but the issue still persists so any pointers on this second issue would be greatly appreciated too.
If you want to align the white line (whiteRectangle), wrap the text in a div. You can also get rid of the br tag for "Apps" and play around with the CSS top section I provided.
<div class="lineup">
Facebook <br/>
Competition <br/>
Apps <br/>
<div class="whiteRectangle">
</div>
Then add the following to your CSS
.lineup{
position: relative;
top:-20px;
}
I don't know if you'll accept this as a solution, but if you want the three 'white rectangles' to be in line, you could add another br tag on top of the content of the the two boxes beside it.
<br />
Facebook <br/>
Outreach <br/>
and
<br />
Facebook <br/>
Networking <br/>
Another solution would wrap the whole content of the boxes, set its position to be absolute, then set a fixed value for bottom.
I have something similar to the following html:
<p>
<a><img src="/path/to/image.gif"></a>
Plenty of text here.....
</p>
<p>
<a><img src="/path/to/another/image.gif"></a>
</p>
<p>
Plenty of text here.....
</p>
What I would like to wrap the text around the image that has text adjacent to it and center the image that has no text adjacent to it.
How can I do that using only css?
This html is on an incoming RSS feed that I do not have control over. I can change the content once it comes in (via a configurable style sheet).
I am also not able to add any ids or classes, so I must be able to select the items with p, a, img, and any meta classes.
I've been using HTML/CSS for ~2 weeks now.
I'm having trouble getting the text on my site to sit right next to the puppy thumbnail, rather than under it.
If I float both the text and the picture, they are side by side, but the text is first, not the picture. Why would this be? The text comes AFTER the picture in the HTML.
Here is the JSFiddle. I've never used JSF before so I hope I did it correctly. I don't know why the pictures in the JSF aren't working (the external link ones (puppies)).
http://jsfiddle.net/nhv54/
When lining up images and text, I like to use inline or inline-block elements rather than put them inside a block element. Here is an example that should work for your case in particular.
Html
<p>
Vertically centered text
<img src="http://www.suffolkdogday.com/wp-content/themes/sdd/images/dog.png" style="vertical-align:middle">
</p>
Check this out
http://jsfiddle.net/nhv54/3/
Things to notice in CSS
.pull-left * {
float: left;
}
And every div you want content to be on one line should have class "pull-left"
<div class = "ProjectsModules pull-left" id = "example1">
<img src = "http://royalk9.ca/uploads/images/_thumbs/beagle-puppy .jpg"/>
<div id = "ProjectsModulesText">
<h1> Jim </h1>
<p>
stuff
</p>
</div>
</div>
You can also set vertical-align: middle; on whatever tag your text is inside, presumably a p.
You could use inline-blocks
I updated your JSFIDDLE
http://jsfiddle.net/nhv54/16/
Im trying to place some text content under each of the images in a gallery but I carnt get the text to be Bellow the image instead of at the side
http://jsfiddle.net/9YE3H/
How can I fix that?
Put each image and paragraph in a single div like such:
<div>
<img src="" />
<br />
<p>Content</p>
</div>
This should work for you, as long as you haven't set the float attribute for any of them.
There are several ways to solve this. One would be using tables and put this in the td-tags:
<div>
<img src="images/search_images/musicians/adele.jpg" width="175" height="176" /><br />
<p>Artist: Adele</p>
<p>Genre: Singer-Songwriter</p>
</div>
Another one would be using that combined with either positioning or more preferably floating.
There are numerous ways, but I would say use some divs to make individual container layouts for each image / text item.
<div class="img-container-class">
<img src="img address here" />
<div class="img-text-class">
<p>Artist: Person</p>
<p>Genre: Genre Type</p>
</div>
</div>
Now the "img-text" class isn't totally necessary. But, sometimes I feel it is a good idea to section off the text area a bit more, so that you can do some more specific changes to the text (that's up to you).
Personally, I would go back and revamp some of those styles. While looking at the snippet you posted I noticed that almost all of the elements have "float:left" attached to them, as well as a lot of mixing of margin and padding. I would say, start simple, float the div that is holding both the image and text, and then let the normal flow take over from there. Once you get that containing structure set then I think you will find quite a few style sections you can trim down.
The simplest effective approach is probably a single-cell table, with the text in the caption element, e.g.
<table class=img callpadding=0 cellspacing=0>
<caption align=bottom>
Artist: Adele<br>
Genre: Singer-Songwriter dcccc
</caption>
<tr><td><img
src="images/search_images/musicians/adele.jpg"
alt="(Adele)" width="175" height="176"></td>
</table>
This is particularly convenient if you want to display many images side by side, so that the amount of images in a row is not fixed but gets adjusted according to window width. In that case you would just set align=left on the table elements and probably set some right margin for them.
So I have an image "blah.jpg" and a name "Name" in HTML.
<img src="blah.jpg"> Name
I want to make it so that the Name is center aligned with the center of the blah.jpg image instead of the text "Name" having a baseline at the bottom of the image.
What is the best way to accomplish this with no tables using CSS3 if possible?
In the page:
<img src="blah.jpg" class="centered"> Name
In css file:
img.centered {vertical-align:middle;}
No need for display: inline-block (which is not supported in some old browsers)
You can use vertical-align: middle on your img element: http://jsfiddle.net/Z35pw/ .
If you want a one-liner, without defining extra objects or attributes, simply add style="vertical-align:middle" inside the <img .../> tag.