I have recently tried to code a box, contains an image on the left side and next to it an header & paragraph under right like this:
http://gyazo.com/c5165fa45c32f69499768ba95d815328
This is what i have done:
<div class="span4">
<div class="box">
<img src="img/share.png" class="image_margin"/>
<span class="box_title">SHARE</span>
<span id="texting">Upload files straight from you hard disc. Up to 600MB per file upload! the more you earn the more file storage you get.</span>
</div>
</div>
CSS:
.box {
background-image: url("../img/box.png");
width: 305px;
height: 117px;
}
#texting {
font-size: 14px;
}
.image_margin{
margin-top: 25px;
margin-left: 25px;
}
.box_title{
font-size: 24px;
color: #8d8d8d;
margin-left: 15px;
margin-top: 20px;
position: absolute;
}
This is the result:
http://gyazo.com/f600c42f86b51e52de436631fc96656d
Why the text gets out of the box yet its inside the class of the box ?
What have I done wrong? how do I align the title + paragraph like in the first image in CSS so it fits on all screens?
Thank you a lot!
Use align="left" in img tag.
<img src="img/share.png" class="image_margin" align="left"/>
Hope this will help
Related
Html noob here. I'm trying to make a division that contains some ordinary text and a download button. I've got a paragraph for the normal text and an anchor with an image for the button. For some reason, the button wants to take the same alignment as the paragraph. I have this code:
p {
color: #fff;
font-family: Helvetica;
font-size: 16px;
text-align: left;
line-height: 24px;
margin-bottom: 0;
-webkit-font-smoothing: antialiased;
}
a {
text-align: right;
}
#downloadText {
width: 360px;
position: fixed;
bottom: 0px;
right: 10px;
font-weight: bold;
}
<div id="downloadText">
<p>In the meantime, would you like to download a fun bubbles game for Linux?</p>
<p>
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</p>
</div>
Both the paragraph and the anchor end up aligned left. Why would this be? (note: if I change paragraph to align right, both will align right.) thanks in advance!
It's a bit unclear..
Run this snippet, hope it helps you:
#downloadText {
width: 360px;
position: fixed;
bottom: 0px;
right: 10px;
font-weight: bold;
}
p {
font-family: Helvetica;
font-size: 16px;
text-align: left;
line-height: 24px;
margin-bottom: 0;
-webkit-font-smoothing: antialiased;
}
a {
text-align: right;
display: block /* Set display block, the element will move */
}
<div id="downloadText">
<p>
In the meantime, would you like to download a fun bubbles game for Linux?
<p>
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</div>
The anchor is an inline element, which means its box is as large as its content. The box is positioned to the left because of the paragraph's style. The anchor's content might still be positioned to the right, but it doesn't matter because its width is as large as its content.
You've got a few options:
set a { position: absolute; right : 0 } in the style. Not great, imo
set the width of the anchor to 100% a { width : 100%; text-align : right } I also do not favor this option.
the most correct one css-wise is to wrap the anchor in another block-level element, e.g. another paragraph:
.installer-container {
text-align : right;
}
<p>
In the meantime, would you like to download a fun bubbles game for Linux?
</p>
<p class="installer-container">
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</p>
So this is actually more of a question why that is and not how I fix it. I could easily make a hack and just give the middle two strings classes that position them correctly, but I would like to know why that is and how I can properly fix it.
Heres an image to show what I mean. All 4 divs have the same code, just different images and text, still the middle two have the "XXXX players" on a different position.
Heres my html and css code:
.lp-popular {
height: 705px;
}
.lp-popular .title {
margin-top: 91px;
margin-left: 457px;
}
.lp-popular .game {
display: inline-block;
width: 240px;
height: 383px;
background-color: rgba(8, 9, 11, 0.5);
margin-top: 35px;
margin-left: 6px;
margin-right: 6px;
}
.lp-popular .game .heart {
float: left;
margin-top: 21px;
margin-left: 20px;
}
.lp-popular .game span {
float: left;
margin-left: 12px;
margin-top: 10px;
font-weight: 500;
font-size: 18px;
color: #ffffff;
}
.lp-popular .game p {
float: left;
margin-left: 15px;
font-family: Arial;
font-weight: normal;
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
}
<div class="lp-popular">
<img class="title" src="img/lp_popular_header.png">
<div align="center">
<div class="game">
<img src="img/lp_popular_game_lol.png">
<img class="heart" src="img/lp_popular_heart_full.png">
<span>League of Legends</span>
<p>4000 Spieler</p>
</div>
<div class="game">
<img src="img/lp_popular_game_dota.png">
<img class="heart" src="img/lp_popular_heart_empty.png">
<span>DotA 2</span>
<p>4000 Spieler</p>
</div>
<div class="game">
<img src="img/lp_popular_game_csgo.png">
<img class="heart" src="img/lp_popular_heart_empty.png">
<span>CS:GO</span>
<p>4000 Spieler</p>
</div>
<div class="game">
<img src="img/lp_popular_game_hs.png">
<img class="heart" src="img/lp_popular_heart_empty.png">
<span>Hearthstone</span>
<p>4000 Spieler</p>
</div>
</div>
</div>
Thanks in advance!
Add the following line of CSS to clear the floats of the game title:
.lp-popular .game p {
clear: both;
}
why the middle images have different location for 'XXXX players': reason is pretty simple. note that first and last images have string length of 17 characters including space [League of Legends] and 10 characters [Heartstone] which fills up the the whole width available for that row. but in case of middle images, the string lenght is 6 [DOTA 2] and 5 [CS:GO] which is not enough to fill that top row. Hence the next text/string comes up to fill this gap and there-hence you get the 'XXXX players' on the same row instead of second row despite of having same css rules for them.
Fix: as #Ryan and #Akatosh have already given suggestion on how to fix this i.e.
.lp-popular .game p {
clear: both;
// clear: left;
}
I'm working on this HTML email template and thought I was done until I figured out that GMail and some other e-mail clients strip out the position CSS property.
Since writing html/css for email readers is like going back into the stone ages I'm a little bit stuck on this one.
What I want is to display a score bar which is sort of like a progress bar, with a score text inside of it, like this:
This works fine until the score becomes really low and the score text doesn't fit inside of the blue container anymore. The text just gets cuts off like so:
and at 0%:
Please note that I'm not sure why the word "Score" still shows up in the last one.
What I want is the score text just to overlap into the red part when the text is too long to fit inside of the blue container.
My code is as follows:
<div style="float: left;width: 70%;height: 30px;max-height: 30px;background-color: #f00;color: #fff;font-weight: bold;padding: 0px;font-size: 18px;">
<div style="float: left;width: 0%;height: 30px;max-height: 30px;margin: 0;padding: 0;background-color: #3c88a7;overflow: visible;">
<div style="padding-left: 10px; float: left;line-height: 30px;max-height: 30px;">Score 0%</div>
</div>
</div>
I've also tried to solve it with a table, but I walk into the same problem - there seems to be no cross-platform way to make the text overflow the cell.
Any ideas how to solve this, so it works in all the major email clients and webmail clients?
It is as simple as this:
<div style="margin:0;padding:0;background:blue">
<p style="width:10%;background:red;color:white;white-space: nowrap;">Score: 10%</p>
</div>
not very polished, but at least for a code-starter it's fine, i guess
You could use just two div without positioning. You have to use white-space: nowrap to prevent your text from wrapping.
Example Snippet:
div.wrap {
width: 100%; height: 26px; max-height: 26px;
background-color: #dd6666; color: #333;
padding: 0px;
}
div.wrap > div {
line-height: 26px; max-height: 26px;
background-color: #3c88a7; padding: 0px 0px 0px 4px;
width: 30%; white-space: nowrap; color: #fff;
font-family: helvetica, sans-serif; font-size: 14px; font-weight: bold;
}
div.d2 > div { width: 5%; }
div.d3 > div { width: 15%; }
div.d4 > div { width: 0%; }
div.d5 > div { width: 60%; }
<div class="wrap d1">
<div>Score 30%</div>
</div>
<br /><div class="wrap d2"><div>Score 5%</div></div>
<br /><div class="wrap d3"><div>Score 15%</div></div>
<br /><div class="wrap d4"><div>Score 0%</div></div>
<br /><div class="wrap d5"><div>Score 60%</div></div>
Here's a completely insane solution. :)
I wrote the SVG to CSS here...
http://jsfiddle.net/coqckyj9/1/
Then converted the SVG to base64 and pasted it into the div background image...
http://jsfiddle.net/coqckyj9/2/
<div id='bar' style='width: 100px; height: 20px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxyZWN0IGZpbGw9J2JsdWUnIHdpZHRoPSc0cHgnIGhlaWdodD0nMjBweCcgLz48cmVjdCBmaWxsPSdyZWQnIHg9JzRweCcgIHdpZHRoPSc5NnB4JyBoZWlnaHQ9JzIwcHgnIC8+PHRleHQgeD0nMnB4JyB5PScxNnB4JyBmaWxsPSd3aGl0ZScgZm9udC1zaXplPScxOCc+U2NvcmUgNCU8L3RleHQ+PC9zdmc+);'></div>
I am trying to put 2 lines of text next to an image, sort of like this
_________
| | Line one of text
| image |
| | Line two of text
---------
This is the code that I have so far
<p style="color: #fff;"><img src="assets/image.png"><span style="">Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span></p>
.banner p {
font-family: "Gentium Basic";
font-size: 19px;
text-align: center;
color: #aaa;
margin-top: -10;
display: block;
}
.banner img {
float: center;
margin: 5px;
}
.banner span {
padding-top: 50px;
font-size: 17px;
vertical-align:top;
}
.banner .ban2 span {
padding-top: 50px;
font-size: 17px;
vertical-align:top;
}
But currently it does this:
_________
| | Line one of text
| image |
| |
---------
Line two of text
I have looked all over the web but have not been able to figure out how to do this, any help would be very welcome.
There's no such thing as float: center; You can choose either left, right, or none.
http://jsfiddle.net/vd7X8/1/
If you float: left; on the image it will do what you're after.
If you want it centered, then you're going to have to wrap the image and the text in a container, fix the width of the container and do margin: 0 auto; on it, then continue to have your image floated--except it will be constrained by the wrapper.
Here is my demo which have using float and overflow with some explain
.div1 {
border: 3px solid #0f0;
overflow:auto; // without overflow here, if the "Line 1" and "Line 2" is short then "Next elements" will display below "Line 2" and the image will cover the "Next elements"
}
.img {
float: left;
width:100px;
height:100px;
background: #000
}
.div2 {
float: left; // without float here, if "Line 1" and "Line 2" is long -> text will display both at right and bottom the image
}
<div class="div1">
<img class="img"/>
<div class="div2">
<p> Line 1 </p>
<p> Line 2 </p>
</div>
</div>
<p>Next elements</p>
Hope it help
Here is a snippet using a svg so you can test it anywhere.
.img{
float: left;
margin-right:1rem;
}
<div>
<svg class="img" width="50" height="50" >
<rect width="50" height="50" style="fill:black;"/>
</svg>
<p>
Line 1
<br>
Line 2
</p>
</div>
I know this post is old but wrap your element in a div and apply the vertical-align:top to this div and you're done.
Check it. It is well defined css.
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<style>
.banner p {
font-family: "Gentium Basic";
font-size: 19px;
text-align: center;
color: #aaa;
margin-top: -10;
display: block;
}
img, span {
float:left;
}
.banner img {
float: center;
margin: 5px;
}
[class="ban1"]{
font-size: 17px;
position:relative;
top:50px;
left:11px;
}
[class="ban2"] {
font-size: 17px;
position: relative;
left: -97px;
top: 74px;
}
</style>
</head>
<body>
<div class="banner">
<div class="wrapper">
<p><img src="span.png"><span class="ban1">Line one of text</span>
<span class="ban2">Line 2 of text</span>
</p>
</div>
</div>
</body>
</html>
I know this is old post, but still wanted to say that not only float will do it, the <img> tag has a built-in attribute called align="left" which does that as well
<p>
<img src="smiley.gif" align="left"><span>Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span>
</p>
Fiddle: http://jsfiddle.net/356akcoy/
I suggest using the old tables that works great. In terms of CSS it is just needed to add the vertical-align: top property.
<table>
<tbody>
<tr>
<td class="img-container">
<img src="https://img2.gratispng.com/20180324/sbe/kisspng-google-logo-g-suite-google-5ab6f1f0dbc9b7.1299911115219389289003.jpg"/>
</td>
<td class="content-container">
<span class="description">This is a very long text that creates multiple lines with the image at left side</span>
</td>
</tr>
</tbody>
</table>
Fiddle: https://jsfiddle.net/fypa0k4w/
I'm applying a css class for the following asp.net custom control which renders in browser something like this:
<div class="box search_mlo">
<div class="gray_box">
<div class="blue_box">
<div>
<input id="Search_srcText" class="btn" type="text" onblur="return objSearchWidgetLibrary.searchLostFocus(ECMSSearchTextBox2_srcText)" onfocus="return objSearchWidgetLibrary.clearText2(ECMSSearchTextBox2_srcText)" onkeypress="return objSearchWidgetLibrary.fnTrapKD2('ECMSSearchTextBox2_srchAnchor1',event)" name="ECMSSearchTextBox2$srcText">
</input>
<a id="Search_srchAnchor1" class="btn" onclick="return objSearchWidgetLibrary.onsearchclick1('ECMSSearchTextBox2_srcText','ECMSSearchTextBox2_srchAnchor1')" href="../System/SearchResults.aspx?k=">
<span>Search</span>
</a>
</div>
</div>
</div>
</div>
The CSS class is:
.blue_box div a.btn
{
background: url("/publish/images/btn_search.jpg") no-repeat;
height: 36px;
width: 86px;
}
.blue_box div input.btn
{
background: url("/publish/images/bg_search.jpg") no-repeat scroll 9px 6px #FFFFFF;
border: 1px solid #0064AD;
color: #BFBFBF;
float: left;
font-size: 1.3em;
font-style: italic;
font-weight: bold;
height: 21px;
margin-right: 4px;
margin-top: 2px;
padding: 5px;
width: 328px;
}
so it looks something like search box and button to submit. This control is used by other sites so, for some sites we require only hyperlink search button and in some we replace image. But in this case I'm trying to replace image but I'm getting only half of the image something like below..
http://i.stack.imgur.com/Dfaqn.jpg
You can see a search text coming inside that image.
The prototype is something like this and the first button should match with this:
http://i.stack.imgur.com/QpRmg.jpg
I cannot remove that span tag present inside anchor tag since in other sites its working fine and removing that would create problem in them.
can any one help with feasible solution where I can get the entire image.?
Thanks in advance.
#Sayed; a tag is an inline element & inline elements didn't take height, width, vertical margin & padding. So; give display:block in your css for a tag like this:
.blue_box div a.btn
{
background: url("/publish/images/btn_search.jpg") no-repeat;
height: 36px;
width: 86px;
display:block
}