Topic Closed
Kevin
4 Posts

I am trying to create a theme based on Simplicity_1_6.

Rather than use a background image for the header I have set up a coloured background with contrasting border and curved top corners:

#header{width:935px; height:150px; background-color:#fefdde; border-left:3px solid #4f0702; border-right:3px solid #4f0702; border-top:3px solid #4f0702; border-top-left-radius:30px; border-top-right-radius:30px; padding:0 10px 20px 10px;}

I now wish to position two images at precise positions over this background, but am not sure how to proceed.

I do not want to use an image of the entire header including foreground images because the rounded corners are less well defined than with the method above.

Thanks for any advice,

Kevin

10 years ago#3311

syndicatefx
42 Posts
56.2K Downloads
6 Themes

Hi Kevin,

If you want to precise position the images through css and html (in the template.php), you will have to absolute position your images inside #header and create id' s or classnames for each of them, so you can style them with css. If you are going to insert the images through gpEasy's admin editor you will have to add those classnames or id' s to the images in the properties panel.

Anyway, here's how you can do it:

add position relative to #header so all absolute positioned elements inside will be constrained to this element's area.

#header{position:relative;...}

classnames for the images, in this example one is going to be positioned left and the other right

.myImgone{
position:absolute;
top:0; /*how far you want the image to be from the #header top limit*/
left:0;/*same for distance from left of #header limit*/
width:...;/*your image's width*/
height:...;/*your image's height*/
}

.myImgtwo{
position:absolute;
top:0; /*how far you want the image to be from the #header top limit*/
right:0;/*same for distance from right of #header limit*/
width:...;/*your image's width*/
height:...;/*your image's height*/
}

Important note: If you are using headings, like title <h1>sitename</h1> in the header too, you might also want to layer them properly, so the site title sits on top of the images, by using z-index - for example:

#header h1{
position:absolute;
top:20px;
left:20px;
z-index:2;
}

.myImgone, .myImgtwo{
z-index:1;
}

In the above code you make sure the heading sits above the images, if that is the purpose.

Hope you undestood this explanation and it helps!

- Jimmy

Edited: 10 years ago#3315

Kevin
4 Posts

Many thanks for your clear & detailed reply Jimmy.

My header is now as desired.

Kevin

10 years ago#3321

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Ennetb├╝rgen (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Websi...

Find out more about our Provider Spotlight

Log In

  Register