I am trying to adjust an image which sits just before the text. But the problem is that the image width takes some space to the right because of the alphabet style A.
I have created a demo:
h1:before{
content: url('http://s9.postimg.org/bg93v6bjf/image.png');
}
<h1>pple</h1>
JSFiddle: http://jsfiddle.net/squidraj/wott37vy/
How can I reduce the space between A and p so that even I resize the browser it stays at the same place?
Any help is highly welcomed. Thanks in advance.
One clean way to solve this would be to set the pseudoelement's display to inline-block, and give it a defined width.
Here is a Live Demo:
h1:before{
display: inline-block;
content: url('http://s9.postimg.org/bg93v6bjf/image.png');
width: 90px;
}
<h1>pple</h1>
JSFiddle Version: http://jsfiddle.net/wott37vy/3/
You can use negative margin values to take away space.
h1:before{
content: url('http://s9.postimg.org/bg93v6bjf/image.png');
}
h1 span {
margin-left: -20px;
}
<h1><span>pple</span></h1>
I would wrap your logo in a div:
<div><h1>pple</h1></div>
And then give that div a fixed width so that it does not resize by itself:
div {
width: 180px;
}
This might not be the prettiest solution but you can add a negative margin to the right side of your image to bring the text closer like so,
h1:before {
content: url('http://s9.postimg.org/bg93v6bjf/image.png');
margin:0 -20px 0 0;
padding:0;
}
Related
I was trying to make a border glued to the sides of the screen how represents the picture below :
Picture of how i want
I have html code, but i don´t know if i´m doing in the best way. Can you guys help me?
DIV Rectangle HTMl
<div class="content">
This is a rectangle!
</div
DIV Rectangle CSS:
.content {
width:100%;
min-height: 150%;
border:1px solid #FFFF;
border-width: 100%;
background-color: #FFFF;
border-radius: 5px;
padding-bottom: 50%;
}
It is like this:
Picture of how it is
I want to remove this spacing between border and screen, is it possible to do that?
There are 2 solutions:
You can remove your parent block paddings (set it to 0)
You can wrap your .content with an additional block and set its margins to negative values (adjust numbers to fit your layout):
.wrapper { margin: 0 -5px; }
Divs are block-level elements and will take the full width that is available. So, the issue isn't actually the .content div. It's likely that the body has a margin still set on it. It will probably take care of it if you add:
body { margin: 0; }
This is just a guess that it's on the body, but really it's whatever parent or ancestor has margin or padding.
Same problem here
*,html {
margin:0;
padding:0;
}
Hope this helps, "*" will set the whole page to 0
I have an absolute positioned div. Inside this div there is an image and underneath it, a caption. Now I want the caption to break to new a line if it reaches 95% width of the image.
But I can't get it to work. The text (no matter what width I say), always moves the image to the left like it would have no breaks.
I made a fiddle for this:
http://jsfiddle.net/hw7t7xyn/1/
The image is set to
right: 0;
top: 10px;
But since the text is too long it moves to the left.
Also the div.caption does not seem to adopt the parents div width.
Can anybody help me out here? Maybe it's a problem of the HTML setup or the CSS, I have no idea anymore, but it's driving me crazy.
Update: Sorry, I did forget to mention that I don't know the dimensions of the image. Is there a possible way to do this without javascript?
I think you just need to add a width to the main div (the one that's absolute positioned).
I added a width of 260px (same as the image)
When I did this, it aligned the div to the far right as you have right:0px is this correct?
http://jsfiddle.net/hw7t7xyn/5/
div.photo-wrap {
overflow: hidden;
position: absolute;
text-align: left;
width:260px;
}
img.photo {
position: relative;
display: block;
}
div.caption {
margin-top: 7px;
width: 95%;
position: relative;
display: inline-bock;
}
give width to photo-wrap
So I have a "post" box, and that will contain an avatar and the post. The issue is when I add an image the text drops below the image. Here's what I'm talking about
All I want to do is align the picture with the text. Here's my code for the image
cursor: default;
height: 74px;
width: 74px;
border-radius: 50% 50% 50% 50%;
margin-right: 19px;
vertical-align: middle;
margin-top: -19px;
display: inline-block;
And here's a demo. Its not the most complete demo, but it works. Any help would be nice. I'm trying to align the text with the image
You could float your image to the left.
img {
float: left;
}
Have a fiddle!
or you could position absolutely (might be more appropriate).
.post {
position: relative; /*Make absolutely positioned children relative to their .post parents */
}
.post img {
position: absolute;
top: 50%;
margin-top: -37px; /* negative. half of height/*
}
This will keep your image in the center of the post.
Have a second fiddle!
use css:
float:left;
Here is a JSFIddle: http://jsfiddle.net/UWtEF/
hope that helps
I saw your code and if I understand your problem, you want text align on the right of avatar.
Actually you know the avatar size then the most simple solution is first to create context for position, then :
.post{position:relative;/* your other properties here */}
now you have a context, you can add absolute for your avatar like :
#IMG_1{position:absolute;left:0;top:0;/* your other properties here, don't forget to remove margins */}
/* I suggest you to replace #IMG_1 by .post > img{} */
now you need only to add padding-left inside your block content for post then :
.post{padding-left:84px;/* your other properties here and don't forget position:relative; */}
Now you need only to correct others selectors like .message, .likes, .time to remove paddings (padding-left in .post is enough).
I hope this help you.
Look at my html + css code: http://jsfiddle.net/nP39E/1/
I'll explain if don't understand what I want to achieve:
I want a page with a div which floating right and takes 250px width and a div that takes width of the rest of the document.
In the left div, you can see that I have some other floating elements, and their heights are effected from the right div. You can see the first (red) row with height that align with the right bar's height and has nothing to do with the real content of its content.
I use group class in order to handle the common floating problem: .group:after { content: ""; display: table; clear: both; }
Can you tell me why it happens?
I just changed CSS for the content div from the last answer:
.content {
background: #888;
padding: 10px;
position: absolute;
right: 270px;
left: 0;
}
http://jsfiddle.net/nP39E/4/
What you think?
display: table isn't meant to be used for layouts like this, it's more useful for specific equal-height situations.
Properly floating the divs and not using the margin-right to push the left div will work:
.content {
background: #888;
padding: 10px;
float: left;
width: 250px;
}
Fiddle
You are giving margin-right:270px which is wider than the available space,So just remove that. Also you should make content float:left.
.content {
background: #888;
padding: 10px;
float:left;
}
JSFiddle : http://jsfiddle.net/ankur1990/nP39E/3/
Please take a look at this fiddle http://jsfiddle.net/EWUTX/
These are the styles used:
.box { position: relative; display:inline-block;}
.box:after {
position: absolute;
width: 100%;
height: 10px;
background: green;
content: '';
bottom:-10px;
left:0;
}
I get a small 5px gap when using the style on an li element, but not on a div tag.
If I specify font-size: 0px, the gap goes away. But then all the text within the li disappears.
As the font size of the li increases, the gap widens.
Is there a style to get rid of this gap, without any hard coding of font sizes?
Fiddle again: http://jsfiddle.net/EWUTX/
Thanks
PS: I'm actually building a CSS framework internally where users can specify a status (using classes) like "started", "not-started", etc.
When used, the element should display a small bar below with different colors. Users can use this class on any element.
That gap is part of the line height reserved characters like 'p' letter.
You will get the same gap if you don't set a height to your div. If you want to remove that from an inline element like an img you can set the vertical-align to the bottom:
.box img {
vertical-align: bottom;
}
See: http://jsfiddle.net/DhTzp/
Its the image that crates the whitespace;
img{ display: block; }