Alignment issue / transparent layers

I have built a layout for a website in photoshop and am having trouble turning my idea into an actually site. I have a repeating background image, It is a floral pattern with a light grey color to it. In the middle of the page i have a box (all of my content is inside). The box is a light blue transparent color and the floral pattern continues through this box. It simply changes the color of the floral pattern.

I created two images:
1) the repeating background image
2) the light blue flowery box.

I used the bg as as the background for my body. I now am stuck trying to figure out how to align my box ontop of the background. I also need this box to be centered on the page.

Is there a way to use a transparent light blue for my table or div background rather than the image of the light blue flowers?

Any thoughts we be appreciated.
Thanks,
Shawn

Jul 22 '07 #1

Subscribe Post Reply

1553

drhowarddrfine

7,435

Expert 4TB

If I understand you right, this will work in modern browsers. But that leaves IE out of the picture since it doesn't work well with modern code. See below.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8">

<style type="text/css">
html,body{height:100%;width:100%}
body{
background-color:#aaa;
}
div{
background-color:#cfc;
height:200px;width:200px;
opacity:0.5;
margin:0 auto;
}
</style>

</head>
<body>

<div></div>

</body>
</html>[/HTML]

For IE, you have to use their non-standard 'filter' stuff which I haven't messed with in a long time and my quick attempt didn't work. Here's a link that can help but forget all the mention of '-moz' stuff. The article is a little old and 'opacity' is in full use now, except for IE.

Jul 22 '07 #2

Shawn Northrop

its something to play with thanks.

Jul 22 '07 #3

tburger

You can center a box using this general method:

1. Position the box absolutely.
2. Set the left: attribute to 50% (i.e left:50%;)
3. Make the left margin of the box the negative value of half it's width.

Let's say we have a box that is 100px wide. If we position it using left:50%, the left edge of the box will be in the middle of the browser window. This is obviously not centered because we want the middle of the box to be in the middle of the viewing area. To achieve this, we now take half of the box's width (50px;) , and set the box's left-margin to the negative of this value.

#thenameofyourid{
position:absolute;
left: 50%;
margin-left: -50px;
}

That should take care of you horizontally.

You can do the same thing vertically by setting top:50% and making the the top margin the negative value of half the box's height.

Hope this is clear

Tom

Jul 23 '07 #4

tburger

After reading your post again, Shawn, I'm not sure that the aforementioned positioning technique is what you were looking for. You're probably more concerned with seamlessly incorporating your floral background pattern.

I have not personally dealt with the opacity attribute mentioned in this thread. I have tried the -moz opacity attribute, however, and I do have some words of caution. If you use this attribute, not only will your box change opacity, but so will the box's text. This may not be what you want style wise.

The other option of course is to create a transparent box in a program like Fireworks (what I use) or Photoshop (which I have never done). If you know the permanent size of the box, this might be the best option because it will pick up whatever background pattern is already there.

Tom

Jul 23 '07 #5

jimberry

Another take on this is to use two (or even more) versions of the same background image, with background-attachment: fixed;
This is described by Eric Meyer in his complex spiral demo
I think this didn't work in IE6, but it appears to be one of the (few?) CSS compliance issues that has been fixed with IE7.

Jul 24 '07 #6

by: Frank Wheeler | last post by:

Why am I unable to attain proper vertical alignment between a DIV and a TABLE here: http://www.whbvillage.com/agenda-archives/agendex.html The DIV is coded: <DIV style="float: left;...

HTML / CSS

Transparent GIF in a transparent container. Easy right?!?!?!

by: Mark Deibert | last post by:

I'm a former VB6 coder. Quit a few years ago. Now I'm back and trying to teach myself VB.NET. I don't remember having this much difficulty learning VB6. I'm totally stuck on something and need your...

Visual Basic .NET

Any other workarounds for the totally screwball right-alignment on datagrid?

by: Earl | last post by:

Any known fixes for the wacky right-alignment bug in the WinForms datagrid (VS2003)? I've tried Ken's workaround...

Visual Basic .NET

Firefox/Safari alignment problems

by: cbjewelz | last post by:

Hey all. So I'm having problems with cross browser alignments. I'm looking at Safari and Mozilla Firefox. I develop in Safari and so it looks perfect there however in Firefox my vertical...

HTML / CSS

Inherited label text alignment and rotation problem

by: VorTechS | last post by:

I'm having a problem with an inherited label, applying text rotation to aligned text. If text rotation is applied to the aligned text, the alignment goes 'nuts'. I can find no logic to what is...

.NET Framework

Absolute Positioning within Table Cell Alignment Problem in FireFox (Mozilla)

by: nino9stars | last post by:

Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using...

HTML / CSS

hasLayout issue

by: dr1ft3r | last post by:

The background images on this page aren't rendering and it's obviously because of IE's hasLayout issue. If anyone can find the time to pinpoint a solution for me I would be very grateful. Here's the...

HTML / CSS

text anti-aliasing on semi-transparent background

by: Roderik | last post by:

Hi, On my website I implemented tooltip alike layers when you hover the category items in the sidebar on the right. See: http://www.roderik.net/ The layers that become visible have a...

HTML / CSS

standard memory allocator alignment issue...

by: Chris Thomasson | last post by:

How many C compilers provide extensions which allow for a standard implementation of the following hack? ____________________________________________________________________ #include <stdio.h> ...

C / C++

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Alignment issue / transparent layers

Similar topics