Help Getting First Page of Site to Center, and help getting rid of extra space..

H

hollsmeags

New Member
Im using dreamweaver and I have an image on top of an image which is the backround image. I want the user to open the page and have the advertisement in the middle on top of a little art backround. Currently when they scroll, there is a whole boatload of backround image on the right side! how do I get rid of that and have it nice and perfect.
thanks!

also if i center it, when the page is opened, there is a scroll bar on bottom and so much extra space to the right and left
HELP
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
Holly, this is easy to fix....try this:

CSS
HTML: 
body {
background-image:url(art2.jpg);
margin:0;
padding:0;
}

div#napkin {
height:995px;
width:960px;
margin-top: 30px; 
margin-bottom: 30px;
margin-left:auto;
margin-right:auto;
}

div#enter {
width:119px;
height:52px;
position:relative;
top:800px; /* this is the top value; adjust to move enter btn down */
left:800px; /* this is the left value; adjust to move enter btn right */
}

HTML
HTML: 
<body>
<div id="napkin">
   <img src="napkin1.jpg" alt="For great web/logo design call Holly A Christiano (716) XXX-XXXX" />
   <div id="enter">
       <img src="enter.jpg" alt="Enter site"/>
   </div>
</div>
</body>

Currently when they scroll, there is a whole boatload of backround image on the right side! how do I get rid of that and have it nice and perfect.....if i center it, when the page is opened, there is a scroll bar on bottom and so much extra space to the right and left.
Click to expand...

The scrollbar issue is because you have the table width set to a massive "4555" pixels! Lol, (not laughing at you) there is no need for that huge width or the TABLE structure in general for that matter.

What I did:
I used a div to hold your napkin image and set the margin to 30px for the top and bottom, and to "auto" for the left and right (using "auto" will set the L/R margins to the same value hence centering the div). Using positioning I set the div inside (#enter) to relative position and moved it near the bottom. You will need to adjust the values (top; left) in the css to get it exactly where you want it.

Word of advice from one designer to another....
  • I did not see the "Enter" btn. Have you thought about putting it at the bottom right corner of the napkin?
  • Look into building sites with CSS using positioning and divs. Your code will be considerably smaller and easier to read.
  • Save tables for tabular data, like a pricing chart or something.
  • Just a thought, you might want to remove your phone # from the image? This a public forum....

If you get stuck or have any questions don't hesitate to ask,

Good luck
 
H

hollsmeags

New Member
thank you so much!
I do have a link but it is off the napkin. I think I will take your advice and
use an image map and put it on the napkin. Think that sounds okay?
Thanks for the phone number tip!;)
much appreciated!
 
H

hollsmeags

New Member
Dumb question alert....

Im new to using dreamweaver...
do I need to insert the div, , then add the image? I tried that before but they werent grouped, meaning when I moved the image, the div didnt tag along with it..... It was just an empty div moving around and the image didnt attach.

any help on this one?
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
hollsmeags said:
thank you so much!
I do have a link but it is off the napkin. I think I will take your advice and
use an image map and put it on the napkin. Think that sounds okay?
Thanks for the phone number tip!;)
much appreciated!
Click to expand...

Image maps are okay but a little outdated (at least for this type of application).

The code I wrote will work without using an image map. Looking at it now, I could make one adjustment that would help.

Lets set the napkin image as the background image for the large div (#napkin), this will provide you the freedom to move the smaller div inside it (#enter) to any location you want.

CSS
HTML: 
body {
background-image:url(art2.jpg);
margin:0;
padding:0;
}

div#napkin {
background:url(napkin1.jpg) top left no-repeat;
height:995px;
width:960px;
margin-top: 30px; 
margin-bottom: 30px;
margin-left:auto;
margin-right:auto;
}

div#enter {
width:119px;
height:52px;
position:relative;
top:800px; /* this is the top value; adjust to move enter btn down */
left:800px; /* this is the left value; adjust to move enter btn right */
}

div#enter img {
border:none:
}

HTML
HTML: 
<body>
<div id="napkin">
   <div id="enter">
       <a href="#" target="_self"><img src="enter.jpg" alt="Enter site"/></a>
   </div>
</div>
</body>

The div with the id of "enter" will hold the enter site image.
I forgot to make the enter site image a link before so I added it in this code.

Also if you use an image for a link, it will (by default) have a border. I added an extra style to eliminate that from happening, because teh border looks ugly :)

Ok to recap...
  • Two of your images are linked through the CSS (background, and the napkin) and one is linked in the img tag in the HTML.
  • I would link in an external stylesheet in the head of your page (i can show you how to do this if you dont know how). The external stylesheet will contain the CSS i wrote above and any other styles you have written.
  • I would also make a default image folder to store all your images, so they are not in the same root level and the site files. Be sure to update the image sources if you do,
    for example:
    background-image:url(art1.jpg) ---> background-image:url(images/art1.jpg)

Good luck, let me know how it goes.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
hollsmeags said:
Dumb question alert....

Im new to using dreamweaver...
do I need to insert the div, , then add the image? I tried that before but they werent grouped, meaning when I moved the image, the div didnt tag along with it..... It was just an empty div moving around and the image didnt attach.

any help on this one?
Click to expand...

I think the post I just added will answer this...but yes the div holds the image so it will always have to be first. Like so:

<div><img src="someImage.gif" alt="" /></div>

The DIV tag opens, then you insert the IMG tag, then you close the DIV tag. Now when the DIV moves, so will the contents within (image).
 
You must log in or register to reply here.
Top