• 13
• 18
• 19
• 27
• 10

[web] How to position and overlay images in HTML

This topic is 2941 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

Recommended Posts

I am designing a website for a new project i am starting. I am making a window inspector tool similar to Spy++ or Winspector Spy and i want to design my sourceforge project website to look like the Windows XP Luna theme. I am not too good with HTML/CSS and i want to know how i can place the images that i have of the title bar and max/min/close buttons so that they look like a real window (except a bit bigger). I also want to use an image for link buttons, but overlay them with text. I would also like to be able to arbitrarily size the buttons and have the images stretch and scale appropriately. If this is too hard, i will simply scale them manually in Gimp and use a fixed image size. Also, i am also wondering if it is legal to use the Windows theme directly in my website like this. I mean, i pretty much ripped the images straight out of the .msstyles file. If i cannot do this, then how close to the actual theme am i allowed to make it look?

Share on other sites
Use Absolute Positioning to place your images. As for the graphics, I'd think as long as you've made them yourself and they don't look exactly like the Original, you should be safe.

BTW, Luna theme is ugly. ;)

Share on other sites
Quote:
 Original post by KonfusiusAs for the graphics, I'd think as long as you've made them yourself and they don't look exactly like the Original, you should be safe.

Ok, but how similar. Is there a definitive answer or is it just a matter of opinion?

Quote:
 BTW, Luna theme is ugly. ;)

I know, but it's the most recognisable theme [grin]

Share on other sites
Quote:
 Original post by XTAL256I am not too good with HTML/CSS and i want to know how i can place the images that i have of the title bar and max/min/close buttons so that they look like a real window (except a bit bigger).

Just make a title bar and right align the buttons within that container. You can view a post container on GameDev as a typical window layout. Notice how the "quote" and "edit" buttons are positioned like they would be in a window. GameDev uses old fashioned table structures to achieve this result, but you can do this with divs and CSS.

Quote:
 I also want to use an image for link buttons, but overlay them with text.

You can create a div with text and set a background image, something like (pseudo code!):

div.button{  width: 100px;  height: 30px;  background-image: url(images/button.png)  background-repeat: repeat-x;  text-align: center;}<div class="button" onclick="alert('hello!')">click me</div>

Alternatively, you can use the link anchor instead of a div and set its CSS display property to "block".

Quote:
 I would also like to be able to arbitrarily size the buttons and have the images stretch and scale appropriately. If this is too hard, i will simply scale them manually in Gimp and use a fixed image size.

As long as you make your background image tileable, you can use any size you like. If you want to add an image border (an element has a border property, but perhaps you cannot achieve the desired look using them), you will have to nest several elements. I'm pretty sure there are some examples out there on the internet.

Quote:
 Also, i am also wondering if it is legal to use the Windows theme directly in my website like this.

Probably not. But regardless, why not design your own? Seeing an XP theme within a website is either confusing or just not very visually attractive.