CSS positioning of images and text
I am trying to get text between two images. The images are positioned correctly, but there are some strange design issues that come up.
Current page (web page)
Development plan (jpg)
What I am trying to understand is the following:
- The background should stop in front of the right edge of the correct image (girl)
- The background should increase the height of the correct image
- Vertical bar below the left edge of the correct image.
- Text wrapping in front of the vertical bar
- Bars to the left of bottom center text
Any help would be appreciated!
a source to share
I would advise not to split the image as Ayden suggests. It's messy and not exactly the modern way of doing it. Try something like this:
.top-pic {
float: right;
margin-top: -200px;
}
Change the top margin assignment to whatever value you want in pixels. All that remains is to scale the width of the top div text to fit the image. One way to do this is to install padding-right: 250px;
or so on .top-text h1
and .top-text h2
.
a source to share
It's a little 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). The material floats underneath because of your z-index.
In your CSS. What you want is a pretty simple fixed 3-col layout with text in the middle. I will point you here:
This is how CSS layouts are done.
a source to share
If you move the top graphic above your logo and change the style, you can get a similar effect for 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;
}
a source to share