Wrox Programmer Forums
|
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old March 2nd, 2007, 07:52 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 596
Thanks: 1
Thanked 3 Times in 3 Posts
Default Multiple Image Header Layout

Hi All,

I am trying to build the header for my site and have found my desired look difficult to acheive.
I whish to have a stetching header with three images.
One on the left, one on the right and one in the middle that stretches.

I have been able to get the left and middle images to show as i want but I can not get the right image to align right.

Can anyone shed any light on this for me.
I have tried to look at many tutorials but they all have been a little introductory.
I have also used trial and error until I pulled all my hair out :)

My latest attempt looks like this, I am only trying to move the image away from the left in this trial but I am not able to move the Right image from the top left corner at all.

Any comments or direction would be much appreciated.

#HeaderBar
{
    background-image:url(images/HeaderBar.gif);
    background-repeat: repeat-x;
    width:100%;
    position:absolute;
}
#HeaderLeft
{
    background-image:url(images/HeaderLeft.gif);
    background-repeat:no-repeat;
    height:200px;
}
#HeaderRight
{
    background-image: url(images/HeaderRight.gif);
    background-repeat:no-repeat;
    height:200px;
    left:300;
}

<div id="HeaderMiddle"/>
<div id="HeaderLeft"/>
<div id="HeaderRight"/>
</div>






======================================
"They say, best men are molded out of faults,
And, for the most, become much more the better
For being a little bad."
--Shakespeare
======================================
__________________
======================================
"They say, best men are molded out of faults,
And, for the most, become much more the better
For being a little bad."
--Shakespeare
======================================
 
Old March 2nd, 2007, 11:03 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 596
Thanks: 1
Thanked 3 Times in 3 Posts
Default

I think i have found my problem, I dont think I can use div to set right image.
Is it possible to use the images based on CSS at all or is that only for backgrounds

======================================
"They say, best men are molded out of faults,
And, for the most, become much more the better
For being a little bad."
--Shakespeare
======================================
 
Old March 6th, 2007, 12:24 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Is this what you want?

Code:
#HeaderBar
{
    background: yellow url(images/HeaderBar.gif) repeat-x;
    height: 200px
}

#HeaderLeft
{
    background: red url(images/HeaderLeft.gif) no-repeat;
    height:200px; width: 150px /*width of image*/;
    float: left
}
#HeaderRight
{    
    background: blue url(images/HeaderRight.gif) no-repeat;
    height:200px; width: 150px /*width of image*/;  
    float: right
}
I added colors to be able to see anything at all. As for the HTML I assume id="headerMiddle" should be id="HeaderBar" because otherwise it doesn't make sense. The other two DIVs need closing tags. The slash thing is for empty elements like BR and IMG and the slash should be preceded by a space. Or you could just write HTML because that's what it's going to be treated as anyway. :)

Code:
<div id="HeaderBar">
 <div id="HeaderLeft"></div>         
 <div id="HeaderRight"></div>
</div>
--
http://yupapa.com
 
Old March 22nd, 2008, 01:30 AM
Registered User
 
Join Date: Mar 2008
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi all,

I stumbled on this thread whilst looking for an answer to probably a basic css question, basically I want to get 3 images in my header one left, one right and one in the middle centrally aligned, at the moment I have this code for my header:

Code:
#HeaderBar
{
    background: yellow url(../images/headers/header_fade.gif) no-repeat; 
    height: 150px;
}


#HeaderLeft
{
    background: red url(../images/headers/image1.jpg) no-repeat;
    height: 150px; width: 140px /*width of image*/;
    float: left
}


#HeaderRight
{    
    background: blue url(../images/headers/image1.jpg) no-repeat;
    height: 150px; width: 140px /*width of image*/;  
    float: right
}
but try as I might I cannot center align the image in #HeaderBar.. I have tried text-align, positioning, margins, all to no avail I know I am missing some knowledge here as I am a beginner with css, I was hoping I might get some help here with my ongoing learning.

Many Thanks :)

 
Old March 22nd, 2008, 01:01 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Judging from the CSS you posted I assume what you want centered is the background image and not an inline image? In that case see here:
http://www.w3.org/TR/CSS2/colors.htm...round-position
The whole page may be of interest.

--
http://yupapa.com
 
Old March 22nd, 2008, 06:31 PM
Registered User
 
Join Date: Mar 2008
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks meow, the whole site is of interest, I just wish W3 was a little more penetrable in its explanations. I have been working with various tutorials in my learning so far, grabbing one bit of knowledge from one place, another from somewhere else and so on..

I actually figured it out though, I just came back now to post how I did it. I don't know if it is proper use of css or not but it works, here is the css I am using:

#HeaderBar
{
    background: #000000;
    height: 85px;
}


#HeaderLeft
{
    background: red url(../images/headers/image1.jpg) no-repeat;
    height: 83px; width: 77px /*width of image*/;
    float: left;
}

#HeaderMid
{
    background: red url(../images/headers/header_fade.gif) no-repeat;
    margin-left: 223px;
    margin-top: 1px;
    height: 83px; width: 320px /*width of image*/;
    float: left;
}

#HeaderRight
{
    background: blue url(../images/headers/image1.jpg) no-repeat;
    height: 83px; width: 77px /*width of image*/;
    float: right;
}


<div id="HeaderBar">
 <div id="HeaderLeft"></div>
 <div id="HeaderMid"></div>
 <div id="HeaderRight"></div>
</div>

Basically I gave the middle block its own div and floated everything to the left, this had the effect of putting them all on the same level and stopped the left one overlapping the middle. I then applied the margin-left and margin-right to put the image where I wanted it (central) and then had a break for a while. Please do tell me if its plain wrong for some reason, I want to learn.

In the meantime I am working on a host of other css layout related issues, at some point I [u]will</u> glue all these bits of knowledge together and understand the whole process I am sure :)





Similar Threads
Thread Thread Starter Forum Replies Last Post
How to center the header image kherrerab BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 2 May 29th, 2010 11:51 PM
Inserting an image in the header of a word documen Michael109 Access 3 April 4th, 2007 11:26 AM
How to insert in image in a header programatically Michael109 Word VBA 2 April 4th, 2007 09:41 AM
changing image/logo in report header h_haviv Crystal Reports 1 February 27th, 2005 07:59 PM
extract xmp metadata from jpeg image header prs_kishore C++ Programming 0 October 18th, 2004 08:08 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.