css page layout problem

October 13, 201114 yr

Hey guys, new here; I'm having a problem with a bit of css covering a full page. It's working on some screens but not all. I haven't been doing design much in the past couple years so I could use some help. Here's the site:

http://estheticianweb.com/

I have a couple ideas in mind of what I might want to do if I can't get this draft working, like resizing at a bigger resolution etc. etc. Right now I'm on a 22inch monitor at 1920 x 1080. It's sitting up in the top left like it's suppose to based on the existing code but i have the width and height set to 100%.

   <style type="text/css">


 body{ height:100% }


 div.fullscreen{
   display:block;


   position:absolute;
   top:0;
   left:0;


   width:100%;
   height:100%;
 }
</style>

October 13, 201114 yr

Yeah, the image does cause a horizontal and vertical scrollbar for me on my small-ish monitor. The image you're using will be prone to stretching the screen if you keep it in img tags. I'd suggest using that image as a background in your CSS, so that the width: 100%, height: 100% values work.

Just an idea -- I'm a beginner, so I'm not quite sure if this will do the trick. Hopefully someone with a bit more experience can chime in.

October 13, 201114 yr

Author

Thanks for the reply, I've tried that already. I got two potential fixes that I've come across. I like the more minimal code strategy but having the same problem ultimately with both.

http://estheticianweb.com/full/1/index.html'>http://estheticianweb.com/full/1/index.html

http://estheticianweb.com/

Whenever you minimize the window the text jumps out of the white space...

it's always one thing or another. ack!

October 14, 201114 yr

your link not working from my end

October 14, 201114 yr

Author

your link not working from my end

That's strange cause they're working for me.

Here is my CSS for everything except the background.


body {
 font-family: Helvetica, sans-serif, Arial;

 font-size: small;
}


#Layer-1 {
 position: absolute;
 left: +0px;
 top: +0px;
 width: 1600px;
 height: 821px;
 z-index: 1;
}


#Layer-2 {
 position: absolute;
 left: 550px;
 top: 118px;
 width: 7px;
 height: 668px;
 z-index: 2;
}


#Layer-3 {
 position: absolute;
 left: 815px;
 top: 440px;
 width: 8px;
 height: 346px;
 z-index: 3;
}


#Layer-4 {
 position: absolute;
 left: 1087px;
 top: 440px;
 width: 8px;
 height: 346px;
 z-index: 4;
}


#Layer-5 {
 position: absolute;
 left: 555px;
 top: 441px;
 width: 780px;
 height: 5px;
 z-index: 5;
}


#Layer-6 {
 position: absolute;
 left: 584px;
 top: 571px;
 width: 235px;
 height: 177px;
 z-index: 6;
}


#Layer-7 {
 position: absolute;
 left: 642px;
 top: 491px;
 width: 118px;
 height: 58px;
 z-index: 7;
}


#Layer-8 {
 position: absolute;
 left: 586px;
 top: 455px;
 width: 229px;
 height: 87px;
 z-index: 8;
}


#Layer-9 {
 position: absolute;
 left: 295px;
 top: 147px;
 width: 230px;
 height: 70px;
 z-index: 9;
}


#Layer-10 {
 position: absolute;
 left: 292px;
 top: 244px;
 width: 236px;
 height: 242px;
 z-index: 10;
}


#Layer-11 {
 position: absolute;
 left: 281px;
 top: 516px;
 width: 256px;
 height: 201px;
 z-index: 11;
}


#Layer-12 {
 position: absolute;
 left: 589px;
 top: 135px;
 width: 219px;
 height: 305px;
 z-index: 12;
}


#Layer-13 {
 position: absolute;
 left: 747px;
 top: 155px;
 width: 313px;
 height: 33px;
 z-index: 13;
}


#Layer-14 {
 position: absolute;
 left: 823px;
 top: 218px;
 width: 481px;
 height: 208px;
 z-index: 14;
}


#Layer-15 {
 position: absolute;
 left: 867px;
 top: 451px;
 width: 212px;
 height: 63px;
 z-index: 15;
}


#Layer-16 {
 position: absolute;
 left: 921px;
 top: 533px;
 width: 104px;
 height: 66px;
 z-index: 16;
}


#Layer-17 {
 position: absolute;
 left: 858px;
 top: 617px;
 width: 230px;
 height: 141px;
 z-index: 17;
}


a {
 cursor: pointer;
 outline: none;
}
a:link { color: #F88; }
a:visited { color: #F88; }
a:hover {
 color: #F00;

 /* IE */
textarea {
overflow: auto;
}
/* non-IE */
teatarea[name] {
overflow: inherit;
}

}

As you can see everything is positioned absolutely, now I'm pretty sure there is better ways of doing it but I'm really rusty. Thanks for the help.

=]

October 14, 201114 yr

Author

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<title>Esthetician Web | Join Today</title>

<link rel="stylesheet" type="text/css" href="psd2css.css" media="screen" />

          <style type="text/css">
 /*give the body height:100% so that its child
   elements can have percentage heights*/
 body{ height:100% }

 /*this is what we want the div to look like*/
 div.fullscreen{
   display:block;

   /*set the div in the top-left corner of the screen*/
   position:absolute;
   top:0;
   left:0;

   /*set the width and height to 100% of the screen*/
   width:100%;
   height:100%;
 }               

       </style>

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


</head>
<body>
<div class="fullscreen">
 <img src="ew_index.png" id="bg" alt="background">


   <div id="Layer-17" class=" Provide customer service rat"  >
     <img src="Layer-17.png" width="230" height="141" alt="- Provide customer service rat" class="pngimg" /></div>

   <div id="Layer-16" class="stellaexcellent 110"  >
     <img src="Layer-16.png" width="104" height="66" alt="stellaexcellent" class="pngimg" /></div>

   <div id="Layer-15" class="How can we make your life easi"  >
     <img src="Layer-15.png" width="212" height="63" alt="How can we make your life easi" class="pngimg" /></div>

   <div id="Layer-14" class=" With Esthetician Web you hav"  >
    <p></p> <p>more text here</p></div>

   <div id="Layer-13" class="Why Esthetician Web"  >
    <center><h1>Why Join Esthetician Web?</h1></center></div>

   <div id="Layer-12" class="iStock 000011390980Medium"  >
     <img src="Layer-12.png" width="219" height="305" alt="iStock" class="pngimg" /></div>


   <div id="Layer-11" class="Screen shot 20110727 at 1134"  >
     <a href="http://www.skincareheaven.com"><img src="Layer-11.png" width="256" height="201" alt="Screen shot 2011-07-27 at 1134" class="pngimg" /></a></div>


   <div id="Layer-10" class="  Skin Care Heaven was founded"  >
 text here</a></p></font></div>


   <div id="Layer-9" class="Our Skin Care  Product Affilia"  >
     <h1>Our Skin Care Product Affiliate</h1></div>


   <div id="Layer-8" class="Sign up Today for just   199"  >
     <img src="Layer-8.png" width="229" height="87" alt="Sign up Today for just   199" class="pngimg" /></div>


   <div id="Layer-7" class="Shape 5"  >
     <img src="Layer-7.png" width="118" height="58" alt="Shape 5" class="pngimg" /></div>

   <!-- This is 'Included - Welcome Package -' -->
   <div id="Layer-6" class="Included  Welcome Package "  >
     <img src="Layer-6.png" width="235" height="177" alt="Included - Welcome Package -" class="pngimg" /></div>


   <div id="Layer-5" class="Shape 4"  >
     <img src="Layer-5.png" width="784" height="5" alt="Shape 4" class="pngimg" /></div>


   <div id="Layer-4" class="Shape 3 copy 2"  >
     <img src="Layer-4.png" width="8" height="343" alt="Shape 3 copy 2" class="pngimg" /></div>


   <div id="Layer-3" class="Shape 3 copy"  >
     <img src="Layer-3.png" width="8" height="343" alt="Shape 3 copy" class="pngimg" /></div>


   <div id="Layer-2" class="Shape 3"  >
     <img src="Layer-2.png" width="7" height="670" alt="Shape 3" class="pngimg" /></div>

 </div>


</body>
</html>

October 14, 201114 yr

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<title>Esthetician Web | Join Today</title>

<link rel="stylesheet" type="text/css" href="psd2css.css" media="screen" />

          <style type="text/css">
 /*give the body height:100% so that its child
   elements can have percentage heights*/
 body{ height:100% }

 /*this is what we want the div to look like*/
 div.fullscreen{
   display:block;

   /*set the div in the top-left corner of the screen*/
   position:absolute;
   top:0;
   left:0;

   /*set the width and height to 100% of the screen*/
   width:100%;
   height:100%;
 }               

       </style>

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


</head>
<body>
<div class="fullscreen">
 <img src="ew_index.png" id="bg" alt="background">


   <div id="Layer-17" class=" Provide customer service rat"  >
     <img src="Layer-17.png" width="230" height="141" alt="- Provide customer service rat" class="pngimg" /></div>

   <div id="Layer-16" class="stellaexcellent 110"  >
     <img src="Layer-16.png" width="104" height="66" alt="stellaexcellent" class="pngimg" /></div>

   <div id="Layer-15" class="How can we make your life easi"  >
     <img src="Layer-15.png" width="212" height="63" alt="How can we make your life easi" class="pngimg" /></div>

   <div id="Layer-14" class=" With Esthetician Web you hav"  >
    <p></p> <p>more text here</p></div>

   <div id="Layer-13" class="Why Esthetician Web"  >
    <center><h1>Why Join Esthetician Web?</h1></center></div>

   <div id="Layer-12" class="iStock 000011390980Medium"  >
     <img src="Layer-12.png" width="219" height="305" alt="iStock" class="pngimg" /></div>


   <div id="Layer-11" class="Screen shot 20110727 at 1134"  >
     <a href="http://www.skincareheaven.com"><img src="Layer-11.png" width="256" height="201" alt="Screen shot 2011-07-27 at 1134" class="pngimg" /></a></div>


   <div id="Layer-10" class="  Skin Care Heaven was founded"  >
 text here</a></p></font></div>


   <div id="Layer-9" class="Our Skin Care  Product Affilia"  >
     <h1>Our Skin Care Product Affiliate</h1></div>


   <div id="Layer-8" class="Sign up Today for just   199"  >
     <img src="Layer-8.png" width="229" height="87" alt="Sign up Today for just   199" class="pngimg" /></div>


   <div id="Layer-7" class="Shape 5"  >
     <img src="Layer-7.png" width="118" height="58" alt="Shape 5" class="pngimg" /></div>

   <!-- This is 'Included - Welcome Package -' -->
   <div id="Layer-6" class="Included  Welcome Package "  >
     <img src="Layer-6.png" width="235" height="177" alt="Included - Welcome Package -" class="pngimg" /></div>


   <div id="Layer-5" class="Shape 4"  >
     <img src="Layer-5.png" width="784" height="5" alt="Shape 4" class="pngimg" /></div>


   <div id="Layer-4" class="Shape 3 copy 2"  >
     <img src="Layer-4.png" width="8" height="343" alt="Shape 3 copy 2" class="pngimg" /></div>


   <div id="Layer-3" class="Shape 3 copy"  >
     <img src="Layer-3.png" width="8" height="343" alt="Shape 3 copy" class="pngimg" /></div>


   <div id="Layer-2" class="Shape 3"  >
     <img src="Layer-2.png" width="7" height="670" alt="Shape 3" class="pngimg" /></div>

 </div>


</body>
</html>

looking at ur code all i can say is u have done all wrong why used so many absolute?

anyway do u have the psd of the design as i cant see any image?

October 14, 201114 yr

Author

looking at ur code all i can say is u have done all wrong why used so many absolute?

anyway do u have the psd of the design as i cant see any image?

I knew you were going to say that, sucks, but my CSS skills are **** now a days.

Here is the psd file.

http://www.estheticianweb.com/EW_index.psd

October 14, 201114 yr

Author

Also, what do you suggest instead of so much absolute calls? I need help for sure.

Recommend a better way for me to go about a simple design like this one next time around.

Cheers!

Tim

October 14, 201114 yr

Also, what do you suggest instead of so much absolute calls? I need help for sure.

Recommend a better way for me to go about a simple design like this one next time around.

Cheers!

Tim

lol upload it anywhere apart from ur server since is not working from my end attach it as zip here

with ur post

October 14, 201114 yr

Author

lol upload it anywhere apart from ur server since is not working from my end attach it as zip here

with ur post

doh! I thought about that while i was doing it too.

sorry m8.

maybe this works.

http://www.cinematicsounds.com/dev/EW_index.rar

it said i didn't have permissions to attach here in the post. ugghh..

"You can make 16 more posts until 14 October 2011 - 02:36 PM. This restriction is in place until you have 17 more approved posts"

Edited October 14, 201114 yr by Supplement

October 14, 201114 yr

see here

October 14, 201114 yr

Author

see here

I just woke up, I'll give this a look over. Thank you.

October 14, 201114 yr

Author

Thanks sash_oo7,

I see where I went wrong and it looks like everything is pretty much wrong. I forgot about using containers and columns and to float things. This helps a lot and gives me a great bit to go off again when it comes to the world of CSS. With that being said, there is still a few things design techniques I don't understand.

You used the (webkit-user-select: none; cursor: -webkit-zoom-out;_bg.jpg" width="1024" height="616") on the background image and you decided to set the width & height as above, why that particular size? That size is overlapping and doesn't exactly full screen the graphic. I'm on my laptop atm and I don't have access to my desktop which is a larger 22in screen set at 1920 x 1080. Would the graphic be full on a larger screen. My laptop is set at 1366 x 768 where I'm viewing a couple problems.

I have a couple other questions but the background style always kills me.

Best,

Tim

Edited October 14, 201114 yr by Supplement

October 14, 201114 yr

Author

.

Edited October 14, 201114 yr by Supplement

October 14, 201114 yr

Author

.

Edited October 14, 201114 yr by Supplement

October 14, 201114 yr

Thanks sash_oo7,

I see where I went wrong and it looks like everything is pretty much wrong. I forgot about using containers and columns and to float things. This helps a lot and gives me a great bit to go off again when it comes to the world of CSS. With that being said, there is still a few things design techniques I don't understand.

You used the (webkit-user-select: none; cursor: -webkit-zoom-out;_bg.jpg" width="1024" height="616") on the background image and you decided to set the width & height as above, why that particular size? That size is overlapping and doesn't exactly full screen the graphic. I'm on my laptop atm and I don't have access to my desktop which is a larger 22in screen set at 1920 x 1080. Would the graphic be full on a larger screen. My laptop is set at 1366 x 768 where I'm viewing a couple problems.

I have a couple other questions but the background style always kills me.

Best,

Tim

what u see post a screenshot image on photobucket or anywhere and post link here

October 14, 201114 yr

Author

what u see post a screenshot image on photobucket or anywhere and post link here

October 15, 201114 yr

see now

always design simple backgrounds and design it for higher resolution

i have adjusted the background image though not done properly but just to show u

October 15, 201114 yr

Author

see now

always design simple backgrounds and design it for higher resolution

i have adjusted the background image though not done properly but just to show u

That's what I was thinking as well, but I wasn't one hundred percent sure about designing the backgrounds bigger; so bigger is always better. Great to confirm this from a pro. I did several different mock ups of the psd file and one of them was at the largest screen size that I have which is the 22in screen set at 1920 x 1080.

What other code was edited?

Perhaps the

/*Structure*/

.container {

width:1524px;

margin:0 auto;

text-align: left;

/*Structure*/

???

October 15, 201114 yr

That's what I was thinking as well, but I wasn't one hundred percent sure about designing the backgrounds bigger; so bigger is always better. Great to confirm this from a pro. I did several different mock ups of the psd file and one of them was at the largest screen size that I have which is the 22in screen set at 1920 x 1080.

What other code was edited?

Perhaps the

/*Structure*/

.container {

width:1524px;

margin:0 auto;

text-align: left;

/*Structure*/

???

i dint edit any code just changed the background

October 15, 201114 yr

Author

Thank you very much for your patience and help. How are you this evening? I'm surprised you're not out since it's Friday.

Although, I can't say much for myself either. I'm just sitting at home working on some php stuff.

=]

css page layout problem

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)