Welcome to Dream.In.Code
Getting Help is Easy!

Join 136,578 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,940 people online right now. Registration is fast and FREE... Join Now!




Is there an alternative to CSS layers?

 
Reply to this topicStart new topic

Is there an alternative to CSS layers?

vanityasart
3 Oct, 2008 - 10:54 AM
Post #1

New D.I.C Head
*

Joined: 3 Oct, 2008
Posts: 2


My Contributions
This is my url www.vanityasart.com

My question is this, you'll notice on my bio and contact pages that I have used a layer to contain my text and some images. Well when I do this the copy and images often do not appear in the same position depending on viewer.

Is there a better way to go about this so that when a browser window is resized my copy and images stay put. Perhaps some html code that acts like a layer without the floating effect?

Here's my code:

CODE
<style type="text/css" media="screen"><!--
#layer1 { height: 360px; width: 630px; left: 313px; top: 268px; position: relative; visibility: visible; }
--></style>

User is offlineProfile CardPM
+Quote Post

William_Wilson
RE: Is There An Alternative To CSS Layers?
3 Oct, 2008 - 12:14 PM
Post #2

lost in compilation
Group Icon

Joined: 23 Dec, 2005
Posts: 3,995



Thanked: 16 times
Dream Kudos: 3275
Expert In: Java, C, Javascript

My Contributions
The issue i believe is this: left: 313px;. You force a left margin of 313px, so when a user changes the size of the browser it still remains at this constant. You should create this value dynamically or use a centering option.
User is offlineProfile CardPM
+Quote Post

vanityasart
RE: Is There An Alternative To CSS Layers?
3 Oct, 2008 - 01:42 PM
Post #3

New D.I.C Head
*

Joined: 3 Oct, 2008
Posts: 2


My Contributions
QUOTE(William_Wilson @ 3 Oct, 2008 - 01:14 PM) *

The issue i believe is this: left: 313px;. You force a left margin of 313px, so when a user changes the size of the browser it still remains at this constant. You should create this value dynamically or use a centering option.



By centering option I'm assuming you mean something like align="center" ??
Forgive me, I'm really pretty new to this. I don't do this on a regular basis. Just for my site.
User is offlineProfile CardPM
+Quote Post

grimpirate
RE: Is There An Alternative To CSS Layers?
3 Oct, 2008 - 01:51 PM
Post #4

D.I.C Head
Group Icon

Joined: 3 Aug, 2006
Posts: 192



Thanked: 5 times
Dream Kudos: 375
My Contributions
As Wilson said consider using a liquid layout as opposed to a fixed width style. IE has a broken box model and will mess up widths randomly. Also, some of your text does not stay within the boundaries of the brown background. Or rather it would seem the centering is off. By layers I also assumed you were referring to some sort of z-index issue.

Since that doesn't seem to be the case may I suggest the following structure for your pages:
CODE
<div id="headerbar">Vanity Independent Creative Design Header Image</div>
<div id="gradient_outline">
    <div id="content">
        Ipsum Lorem
    </div>
</div>
I grant you that you'll need to work out how to get those rounded corners for the interior. However this layout will enable you to center your text regardless of screensize by simply using auto margins and defining widths in percentages (presumably you could still define fixed widths but that would cause scrollbars to appear if they resize too small).

As an aside I believe in your bio you should refer to yourself in the first person and not the third person. Unless of course Vanity Design is comprised of more than one person. If you still feel the need to use third person then I believe it would sound better if you referred to the company as opposed to yourself.
User is online!Profile CardPM
+Quote Post

grimpirate
RE: Is There An Alternative To CSS Layers?
3 Oct, 2008 - 01:59 PM
Post #5

D.I.C Head
Group Icon

Joined: 3 Aug, 2006
Posts: 192



Thanked: 5 times
Dream Kudos: 375
My Contributions
Sorry about that, forgot to include the CSS and just saw your previous post. In the structure I displayed you would basically do something like this:
CODE
#headerbar {
    margin: 0px;
    padding: 0px;
    width: 630px;
    height: 360px;
    margin-left: auto;
    margin-right: auto;
    background-image: url('vanity_head.jpg');
    background-repeat: no-repeat;
}
#gradient_outline {
    margin: 0px;
    padding: 0px;
    width: 630px;
    margin-left: auto;
    margin-right: auto;
    background-image: url('pad_gradient.jpg');
    background-repeat: repeat-x;
}
#content {
    margin: 30px;
    padding: 0px;
    background-image: url('con_gradient.jpg');
    background-repeat: repeat-x;
}
As you can see I used defined widths to make sure everything is in accord with your header (not sure if those are the dimensions you want, I just guessed). However, this should make your content center itself. Of course if the browser window shrinks too much the user will need to scroll.
User is online!Profile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 12/3/08 12:26AM

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month