Overlay image inside <div> causing text to move down - html

I have a <div> with a border:15px. It has an image on the left-corner as given in the fiddle
http://jsfiddle.net/user1212/e7Gez/17/
Now, this image is pushing down the text from the top. How can I make the text get margin-top:0;
I do not want to use the image as background-image since the 15px border overlaps it.
Any solutions?

Just use float: left; on your image, see updated Fiddle. You can also use a negative margin-right on it to prevent it from pushing the text to the left, but then you need to mess with the z-index of it and the rest of the content, which means additional HTML markup for styling purposes; see this Fiddle.

OK, I'm going to leave my other answer as a more direct "this is how you fix things doing it your way" answer, but I think a better approach here would be to use position: absolute; -- this achieves the effect with much less fuss.
Fiddle
I'm styling the image as follows:
img#post-backgrnd {
position: absolute;
top: -1px;
left: 0px;
}
This forces the image to go to the upper-left corner, which is where we want it (the top: -1px; is because the image is slightly misaligned with the border), and position: absolute; means it does not take up space, so it doesn't push the text at all. However, done this way, the image covers up the text. The better solution here is to edit the image, fixing the alignment issue (and going to top: 0;), and making the white section actually transparent.
If for some reason that cannot be done, you could fix this overlapping issue by using z-index, but it means that your parent, your image, and the text need three different z-index values, which means that you need a new element for your text. For an example of this, see this Fiddle.

Just add vertical-align:top to your <div> like:
.content {
width: 500px;
height: 500px;
border: 15px solid #E4EAF3;
/* background: #ffffff url('http://smitra.net76.net/post-bg.jpg') no-repeat top left;*/
margin-top:0;
padding-top:0;
vertical-align:top;
}
see it in jsfiddle

Related

Placing a div in a specific place above everything else so it doesn't move anything else?

Hoping someone can help.
My page is here:
http://www.simplypsychics.com/psychicprofile.php?pin=4439
Basically what I want to do is position an image in specific dimensions where RED is (in my picture below).
However, I tried to place it where the 'Psychic Name' is as an with align="right" but it moves by tab content down.
Does anyone know how I can put it in, maybe as a DIV, so it's always above everything and in that very place as in my picture here:
http://i60.tinypic.com/2hmmvrl.jpg
I don't know what code I need to look at. :(
I assume you're talking about the "profileimg" that's currently overlapping the text.
Just use this css:
.profileimg {
height: 118px;
float: right;
}
No need to use absolute positioning, floating the image to the right gives you the effect you need.
Add this to the css of your "content" div (the div that contains the topic, the red picture, the form and so on ... but not the "other psychics content)
position: relative;
And add this to the div that contains your picture
position: absolute;
top: 0;
right: 0;
If the position is not exactly what you wanted, you can change the position by change the values from top and right. If you do this, don't forget to add unit "px" (e.g. top: 10px;).
Hope that helps.
You can make the following CSS properties on .profileimg
.profileimg {
height: 118px;
position: absolute;
margin-left: 18%;
}
I'm not saying that it's a great soloution but if you don't really know CSS then it's probably a quick fix until someone proper can look at it.

Autofit text-box to text in div

Ok, I don't really know how to explain what I'm looking for exactly, but I know what I want(I just can't get there). I have an image link with text on top of it in a kind of paragraph box.
My concern is that I want the box to adjust in size to the quantity of text that I put in.
Here is a demo of what I have so far.
.imagetext {
left:auto;
right:auto;
}
Is something else I have tried, but doesn't do what I want.
What I want is that the black box is sized to 'fit' the text. Is this possible?
Or do I have to manually size it?
P.S. The img links go to a website that is currently not in service. All the code for what I need is right in demo.
EDIT: I guess what I want is the black box to wrap the text instead of the image. Is this possible?
You can try something like this:
Fiddle
I Deleted the absolute positioning and added:
.imagetext {
display: table;
margin: auto;
margin-top: -30px;
}
Because of the absolute positioning and left: 5px; right: 5px; the text was given a width until 5 pixels from the edge of the image. The margin-top is to get the text inside the image on the desired height.
Hope it helps!

How to add a border to only percentage of width of element, CSS Trick

The Issue...
Once again I am searching for a cool CSS trick to help me to achieve an effect whilst preventing the use of untidy HTML...
The following image shows what I am trying to achieve, notice the top and bottom borders only stretching around 70% of the width...
A Starting Point
As a starting point I have created the above using what I would call 'untidy HTML' to add these dividers to the list.
Here is my jsFiddle: http://jsfiddle.net/E93UE/
You will see I have <li class="divider><!-- Divider --></li>, this is what I want to get rid of if possible
My Question
So, if the above has not explained well enough, I would like to apply a border to a block element, but only show the border for a specific width of the whole element.
Obviously this cannot be achieved using just border:XXX, it is likely to need some :before and :after selectors...
Possible Solutions...
I have had two thoughts of how this could be achieved, one is not too practical, and the other I am not too sure how to implement (these are just ideas):
Set the width of the list element and give it overflow:visible, all elements within have position:absolute and then just apply margins to bring the elements out of the list box... (not a good fix, prefer my original)
The other solution, which I am not too sure how to implement, may be the way to go. By apply two :before elements with position:absolute you could overlay the edges of each border (I think)
Give a border to :after pseudo-element (demo):
.separated:after {
content: "";
display: block;
width: 70%;
margin: 1em auto 0;
border-bottom: solid;
}
I recreated your divider using :before/:after pseudo-elements:
http://jsfiddle.net/thirtydot/E93UE/1/
#staff_list li:first-child:before, #staff_list li:after {
content: '';
display: block;
margin: auto;
position: relative;
bottom: -26px;
width: 500px;
height: 2px;
background: #b9b7b6;
}
#staff_list li:first-child:before {
top: -14px;
bottom: auto;
}
The numbers need tweaking, and you need to test it when you have more text, but it's probably close enough. I made other changes to help this solution work, compare your original demo to mine.

Text overextending past footer DIV tag

I've been having problems with my DIV layers - the text goes beyond the DIV footer image, but it's not entirely the DIV background's fault 'cause it DOES repeat... Up to a certain extent. :( I can't seem to figure out how to force the text to stop overextending past the footer DIV tag WHILE keeping the DIV background going.
My "container" element houses the images and the other two elements. The "main" element is where the text goes, and the "footer" element is the image that comes after the end of the text.
In this image here, the text goes over the footer image - green arrow is to show where the footer image starts, red arrow is to show where I'd like the text to stop. The background image in the container works for awhile but then stops, so I suppose it doesn't expand correctly...??
I tried to play around with the code to try and fix it - from trying to add padding-top/bottom, to adding the repeating background stretch in the body part, to playing around with the position properties, to trying out the sticky footer (except my layout is only one column... the navigation is part of the layout in the CSS), I just can't seem to get it right.
This is as best as I can get it. :( Do you guys have any helpful solutions and/or tips?? Thanks so much!
Link: http://bubble-wrapped.net
#container {
position: absolute;
width:1057px;
height: 100%;
background-image:url(layout/bw-div.png);
background-repeat: repeat-y;
border:0px;
text-align:left;
padding-bottom:50px;
}
#main {
position: absolute;
top: 256px;
left: 126px;
width: 830px;
margin: auto;
}
#footer {
height: 358px;
width: 1057px;
bottom: 0;
position: static;
background: url(layout/bw-footer.png) no-repeat;
}
It looks like you've set the footer to a set height, which is why the text is overflowing.
If you're find with cut-off text, try adding a CSS property to the footer: overflow:hidden or overflow:scroll.
If you don't want overflow, then try removing the height property from the footer or setting it to height:auto or something similar.
Has to do with position: tag & height: tag
I suspect it has to do with the element within the container and not just the container.
It would help if you would post most of your code so we can see if other things break it.
Your question doesn't really say what your looking to do, which doesn't help us help you.
If its anything like Possible same situation & answer #StackOverFlow
Hope this helps you!

Placing an background image with padding in h2 tag

I want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?
I'm trying to do something like this:
[{someHeadLineText}{dynamic space }{image}{5px space}]
where the [] indicate the total available width of my content.
Html:
<div class="primaryHeader">
<h2>News</h2>
</div>
Css:
.primaryHeader h2 {
background-color: green; /* the header looks like a box */
color: black;
background: transparent url(../images/edit.png) no-repeat right center;
border: 1px solid red;
}
I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?
I'm afraid I think you can't. You can use either right or a pixel value as the image's x-position but that pixel value will always be relative to the left corner of the bounding box. Adding padding won't help either, it will just extend the bounding box further.
The only solution I know for this is either adding the shift to the image itself, or using an absolutely positioned element (with a slight offset) hovering behind the element - but that would require you know the width and height in advance.
Edit: evil, hacky idea. I have no time to try this out right now, but it should work if the h2 is a display: block.
Give the h2 a position: relative.
Place a div or other element inside the h2 with the following:
position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1; /* I don't know whether this will overwrite the h2's content */
this could lead to the desired effect, I'm not sure as I have not tried.
The element may overlay the h2's other content, in which case you would have to put the rest into a <span> element with position: relative and z-index: 1.
It's really hacky. Better put the padding into the image itself, much cleaner.
Can you add padding pixels in the image itself?
You could ditch the background image and use an image instead.
<div class="primaryHeader" style="padding-right: 5px;">
<img src="../images/edit.png" alt="" style="float: right;" />
<h2>News</h2>
</div>
You can look into CSS3 background positioning. It works in all the modern browsers (not IE, of course).