Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Frame for apdiv (image)?

    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

  • #2
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    878
    Thanks
    0
    Thanked 114 Times in 113 Posts
    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.

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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>
    Last edited by Mumrik; 06-04-2012 at 01:24 AM.

  • #6
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    878
    Thanks
    0
    Thanked 114 Times in 113 Posts
    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>

  • Users who have thanked Lerura for this post:

    Mumrik (06-04-2012)

  • #7
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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...
    Last edited by Mumrik; 06-04-2012 at 04:59 PM.

  • #8
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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;

  • #9
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    878
    Thanks
    0
    Thanked 114 Times in 113 Posts
    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.
    Last edited by Lerura; 06-06-2012 at 02:10 AM.

  • #10
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •