Frame for apdiv (image)?

Mumrik · 06-03-2012, 03:51 PM

Hello here is what my website looks like currently, notice the scrolling window in the middle. It hasn't got a frame unlike the banner...

I'd like to have a similar frame to the banner around the scrolling text window field. I tried put a image container around the apdiv tag but it got messy real fast. Any ideas on how to get the same frame(image) that is in the banner to appear around the scroller field. Also would it be possible to make the white scrolling arrow field to appear less white? It stands out too much right now.

Thanks

Mumrik · 06-03-2012, 05:20 PM

Yeah and to be more specific I did this photoshop edit of the page. Compare it to the image in the first post. How would I create this?

Mumrik · 06-03-2012, 06:55 PM

Oh I figured out how to do it, use the site's background image to display a frame. Now I got one more quesiton, how would I know how big the background image of the site is going to be. Before I used a small repeating image...but now I would have to use an image that corresponds to the size of the site. Also it would be nice if the image could scale with the zooming. So the frame doesn't stay the same size if one zooms in. You see what I mean?

So two questions:

1. How do I figure out how big the background image for the site should be, in order to match my frame with the apdiv image?
2. How do I make it so the background image zooms in when you do so the frame stays on the same spot?

Lerura · 06-04-2012, 12:33 AM

Creating a background image for all the element to fit into, is generally not a good idea.

It is much better to have a background that is suitable for repeating or being cut, and then style each element with its own background and border images.

-------
But:

The only way to achieve your goal is to let the browser resize the image based on the dimensions of the view port.

Code:

body {
background-image:url(yourURL);
background-size:100% auto;
}

will scale the image so it fit the width of the page.

and the

Code:

element { width:xxx% }

will make the element to fit in the box, scale width the same ratio.
but then you need to set the height of the box element to the same scale ratio.
And you will need to use javascript to make the box elements height scale with the same ratio.
And the vertical position/margin of each element will also have to be calculated through javascript

You will risk ending up width a mess of javascript and css that probably only work for the browser you used for testing. - And extremely difficult to edit.

Mumrik · 06-04-2012, 01:22 AM

Hmmm I'd rather avoid having to do all that since I have no idea how to do it. xD The reason I thought of the background idea was because I remember a long time ago using this online application for creating websites and you could replace the graphics that already were in the templates. And the entire background was a big image that one could change completely.

There must be some way to get some kind of good looking frame to appear around the scrollable window?

Wouldn't it be possible to place a image placeholder first then that scrollable window above that image? Isn't there something like layers in dreamweaver. Can't one stack apdiv objects on top of eachother? I need that frame or the site is going to look awful. I know it's possible somehow...there must be an easier way that is built into dreamweaver.

Anyone knows?

Here is the code btw:

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BrightHotel</title>
<link href="SC.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	background-color: #096;
	background-position: 1px bottom;
	background-image: url(Bilder/testa.png);
}
#apDiv1 {
	position:absolute;
	width:1120px;
	z-index:2;
	overflow: scroll;
	top: 333px;
	left: 50%;
	margin: 0 0 0 -560px;
	text-align: left;
	height: 550px;
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 3px;
	border-left-width: 3px;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	background-image: url(Bilder/Bakgrundmork.png);
	color: #000;
	background-color: #666;
}
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
</head>

<body>
<table width="100%" border="1" align="right" cellpadding="0" class="Background">
  <tr>
    <th height="892" class="Background" scope="col"><p><img src="Bilder/Banner.png" alt="" name="Header" width="95%" height="200" border="0" id="Header" /></p>
      <table width="95%" height="62" border="0" align="center" cellpadding="0">
        <tr>
          <td width="100%" align="center"><img src="Bilder/button.png" alt="" name="Valkommen" width="280" height="50" id="Valkommen" /> <img src="Bilder/button.png" alt="" name="Aktiviteter" width="280" height="50" id="Valkommen2" /> <img src="Bilder/button.png" alt="" name="Rum" width="280" height="50" id="Valkommen3" /> <img src="Bilder/button.png" alt="" name="Kontakta" width="280" height="50" id="Valkommen4" /></td>
        </tr>
    </table>
      <div id="apDiv1">
        <p>&nbsp;</p></div>
      <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></th>
  </tr>
</table>
</body>
</html>

Lerura · 06-04-2012, 03:06 AM

Full backgrounds is okay if the page have fixed dimension.
But each viewer have their own screen resolution, custom toolbars etc.
--------
If I were you I would rebuild the entire page.
using tables is a BAAAAAAAAAAD way to build your webpage.
-------
You have 4 distinct graphics:
The dark background
The light background
The grainy borders
and your buttons, which size must match the styling.

make an image for each of the patterns.
The dimensions of image for the buttons, must match the value in the stylesheet.

and then try something like this:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
* {margin:0px;padding:0px;}
body {background-image:url(dark.png)}
#topborder {position:relative;margin:15px auto;width:80%;background-image: url(border.png);border:1px solid #111;padding:8px;}
#topbox {position:relative; background-image: url(dark.png);border:1px solid #111;height:80px;}
#buttons {text-align: center;}
#buttons button {height:30px;width:150px;background-image:url(button.png);margin:0px 5px; auto;}
#centerborder {position:relative;margin:15px auto;width:50%;background-image: url(border.png);border:1px solid #111;padding:8px;}
#centerbox {position:relative; background-image: url(light.png);border:1px solid #111;height:400px;}
</style>
</head>
<body>
<div id="topborder"><div id="topbox"></div></div>
<div id="buttons"><button></button><button></button><button></button><button></button></div>
<div id="centerborder"><div id="centerbox"></div></div>
</body></html>

Mumrik · 06-04-2012, 02:16 PM

Hmm so instead of building the site with tables I should build it with...ccp elements? In order to do that I need to know what ccp elements are. Could anyone redirect me to some info on the ccp elements?

What is the difference between ccp elements and tables? Can you stack them as layers? That is all?
EDIT: Nvm I got it...

Mumrik · 06-05-2012, 09:46 PM

Hello your example did help and I'm now building the site using div tags. I am not able to put one of those tags around another though. It won't let me or it all gets messed up. Here is what the site currently looks like. As you can see the scrolling window is missing a frame.

http://img13.imageshack.us/img13/5950/hoteltd.png

Here is the code, now how would I wrap the scrolling window in another div tag and then put a image on that div tag as to make it look like it has a frame? Beats me....

Html

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BrightHotel-Index</title>
<link href="SS.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="Bannerx" id="Banner"></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="Buttons"><a href="Index.html"><img src="Bilder/Button1.png" alt="" name="Valkommen" width="215" height="38" id="Valkommen" /></a> <img src="Bilder/Button2.png" alt="" name="Aktiviteter" width="215" height="38" id="Valkommen2" /> <img src="Bilder/Button3.png" alt="" name="Rum" width="215" height="38" id="Valkommen3" /> <img src="Bilder/Button4.png" alt="" name="Kontakta" width="215" height="38" id="Valkommen4" /></div>
<p>&nbsp;</p>
<div id="apDiv1">
  <div class="Scrollborder">
    <div class="Scroll" id="Scroller"></div>
  </div>
</div>
</body>
</html>

CSS

Code:

body {
	background-image: url(Bilder/Bakgrundmork.png);
}
.Bannerx {
	height: 180px;
	width: 1140px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	background-image: url(Bilder/Banner.png);
	position: absolute;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	left: 50%;
	top: 10px;
	margin-left: -570px;
}
.Buttons {
	position: relative;
	text-align: center;
	top: -25px;
}
.Scroll {
	position: absolute;
	height: 400px;
	width: 80%;
	left: 10%;
	overflow: scroll;
	top: 38%;
	background-image: url(Bilder/Bakgrundljus.png);
	background-color: #000000;

Lerura · 06-06-2012, 02:05 AM

Decent try!
But:
Using <p>'s just to create space is bad coding.
In your case, it would be much better to use margin-top: to define the distance from the above element;

And changing to

Code:

position:relative;
margin:auto;

will make the element center on the page no matter the resolution

Setting the borders to 0px is unnecessary as it is the default.
And setting a color: for a border of 0px makes no sense;

Try:

Code:

body {
	background-image: url(Bilder/Bakgrundmork.png);
}
.Bannerx {
	height: 180px;
	width: 1140px;
	background-image: url(Bilder/Banner.png);
	position: relative;
	margin:auto;
	margin:top: 10px;

}
.Buttons {
	position: relative;
	text-align: center;
	margin-top: 15px;
}
.Scrollborder{
	position:relative;
	width:80%;
	padding:10px; // thickness of frame
	margin:auto;
	margin-top:60px; // distance from .buttons
	background-image: url(Bilder/Ram.png);
.Scroll {
	position: relative;
	height: 400px;
	overflow: scroll;
	background-image: url(Bilder/Bakgrundljus.png);

And then you only need to create Ram.png
--
And last: if you can put your page online, then we would have a better chance to help you, as we then can test our suggestions.

Mumrik · 06-06-2012, 02:22 PM

Thanks, yeah I think I better upload the site, because there always seem to be some kind of problem. Now I can't make the scrolling window actually display a scroll. Also the window won't center...that is with the piece of code you provided. Here take a look:

http://uploading.com/files/17cf882e/Hotell.zip/

I just need to get the scrolling and frame to display properly in the center of the site then there shouldn't be any more problems. If you could help I would appreciate it.