CSS positioning images and text - html

I'm trying to get some text between two images. The images are positioned correctly, but there are some weird design issues that are cropping up.
Current Page (web page)
Design Plan (jpg)
What I'm trying to figure out is this:
Background must stop before the right edge of the right image (the girl)
Background must extend the height of the right image
Vertical bar underneath left edge of right image.
Text wrapping before vertical bar
Bars to left of bottom text in center
Any help would be appreciated!

I'd advise against splitting the image up, as Aiden suggests. This is messy and not exactly a modern way to go about it. Try something like this:
.top-pic {
float: right;
margin-top: -200px;
}
Change the margin-top assignment to however high you want the image in pixels. The only issue left is to scale the width of the top-text div to accommodate the image. One way to do this would be to set padding-right: 250px; or so to .top-text h1 and .top-text h2.

This is a bit wrong
.top-pic {
position: absolute;
top: -5.7em;
right: -1.5em;
z-index: 1;
}
Cut this image into 2 images (one in the header next to the tabs, and one in the content). Stuff is floating underneath because of your z-index.
In your CSS. What you want is a pretty basic fixed 3-col layout with the text in the middle. I will point you here:
http://layouts.ironmyers.com/
http://www.csszengarden.com/
That is how CSS layouts are done.

If you move the top-pic above your logo and change the styling you can get a similar effect to what you want.
<div class="top-pic">
<img src="index2_files/girlbird.png">
</div>
<div class="logo">
<img src="index2_files/logo-center.png">
</div>
CSS Changes
.top-pic {
float: right;
position: relative;
top: -50px;
right: -25px;
}

Related

how to make a button responsive which is placed on the image in html?

I have a banner-image, on that image I've placed a link. This page is not getting aligned properly when I zoom-in or zoom-out the browser window or when I resize it.
The link is not getting aligned properly with respect to the image as it was showing in the default view(100% zoom ).
How to make this link responsive? I want the Read More button to be aligned exactly below the text Driving Value creation with ..... text, and the Read More link to be responsive with respect to the image on which it is present. How can I do that?
Here's my JSFiddle
<p class="homeImageLink">
<span>Read More</span>
</p>
Please help.
I am not sure this will work, but I think it would:
.image_container span
{
margin-left:-100px;
}
DEMO
DEMO1
You need to tweak your css so that the positioning is a bit more clear, I've fixed it somewhat here.
The important parts are here:
.image_container {
position: relative;
}
.homeImageLink {
position: absolute;
bottom: 10%;
right: 3%;
}
On the container, position: relative; means that any internal positioning will work from this container. Any positioning apart from static would do here and it's important no intermediate elements in the tree have position set or it will work from that element instead.
The the link container itself is position: absolute; with % values used to keep it proportional to the size of the container. Note also that right is used instead of left so the element appears relative to the right of the container. Now it will never go off the right hand side of the image.
To make this clearer I've removed all the other css from the example and as you can see it still demonstrates the effect you desire.

Extending a bootstrap container background to the edge of the page

I'm designing a page built on Bootstrap 3, and I would like to try and recreate the following design:
I have paragraphs that I have put into a container, so that they stay centred on the page as it is resized. However, I would like to have certain rows have a coloured background that extends off to the sides as far as they go, as shown. I'm not sure if this is possible?
One method I have tried is switching to a container-fluid class for those rows, which goes to the edge of the screen. This sort of works, but I'm not sure if it is then possible to have the text inside stay inline with the other paragraphs as the page is resized? Really, the text should always have the consistent margins on the left and right sides for all of the blocks of text.
I don't think I would need content in the areas in the margin, so if a solution just involved using a standard container to hold the content, and another method to extend the background off to the side, that may work.
Here is a JSFiddle to start off with, including one of the orange boxes in a container-fluid, to demo that approach.
I'm not sure if this is the 'best' solution, but it is a solution nonetheless.
Create a pseudo element for each coloured box (:before)
Absolutely position that (relative to the coloured box - Bootstrap already sets position: relative on col-*-*).
Set top and bottom values to 0 so it's always the correct height
Set background colour to match box
Give it a wide width to ensure it always covers the gutter (sides of .container) on wide screens
For the left sided box, set left: -[width of psuedo element], for right sided box set right: -[width of pseudo element
Finally, you'll need a page container set to overflow: hidden.
HTML
<div id="page">
<div class="container">
...
</div>
</div>
CSS
#page {
overflow: hidden;
}
.box-left:before,
.box-right:before {
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.box-left:before {
left: -999em;
background: orange;
}
.box-right:before {
right: -999em;
background: lightblue;
}
DEMO

Overlay image inside <div> causing text to move down

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

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).