Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    Aug 2011
    Posts
    3
    Member #
    28778
    Hey guys. I'm new at web design, so please bare with my awful terminology and forgive me if I say something stupid. So I'm creating a simple wedding website from scratch (on Dreamweaver CS5) and I've run into a problem. In the past, I've only created websites using AP Divs on Dreamweaver. This time, I decided I would try tables for the heck of it. Here is a picture of what I have so far.
    http://imgur.com/a/HgvaR
    (Pardon the image blur. I don't know how my fiancee would feel about her image being posted on a message board)

    Every block is a cell in a table. The main body text and picture underneath are currently in AP Divs so that I can see what it will look like, but the problem with that is that they move depending on how big your browser window is (where as everything else doesn't because the table is centered).

    Main question: How can I put the text and picture on top of that tan body block and keep it from moving when the browser window changes sizes?

    I've tried making the cell's background image the tan block, but the problem with that is that the text can only be centered (which I don't like the look of) or left justified (which starts right at the left edge (which also isn't what I want).

    I can post the code if you need. Thanks for the help.

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    posting the code would be helpful... sounds like you're using relative positioning... and possibly percentages mixed in somewhere...

    you will need to use absolute positioning and fixed sizes on your divs to keep them from moving on browser resize.

    posting the code will give us a better look though

  4. #3
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    You can left-align it, and then give it padding-left, so it moves away from the edge.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  5. #4
    Junior Member
    Join Date
    Aug 2011
    Posts
    3
    Member #
    28778
    Thanks for the help so far. I'll look into those suggestions. Here's the code in pastebin:
    http://pastebin.com/jvRN7h1i

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    sorry... security guy here... won't open anything on pastebin ... been problems there in the past and with the url hidden... you never know that you might find there...

    will look at it... if you post it here...

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I think the most substantive advice that is missing here is that tables aren't the way to go either. In fact, moving from AP divs to tables is a step backward. I'd encourage you to move on to divs (better yet, HTML5's various tags) that are positioned within the flow of the document.
    AlphaMare likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Junior Member
    Join Date
    Aug 2011
    Posts
    3
    Member #
    28778
    Ah, sorry Webzarus. Here it is:

    <!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>Lauren and Mitch</title>
    <style type="text/css">
    body {
    background-image: url(backdarker.gif);
    background-repeat: repeat;
    background-color: #380C4C;
    }
    body,td,th {
    color: #000;
    }
    #apDiv1 {
    position:absolute;
    left:366px;
    top:404px;
    width:452px;
    height:180px;
    z-index:1;
    font-family: Verdana, Geneva, sans-serif;
    }
    #apDiv2 {
    position:absolute;
    left:354px;
    top:338px;
    width:459px;
    height:76px;
    z-index:1;
    }
    #apDiv3 {
    position:absolute;
    left:467px;
    top:398px;
    width:532px;
    height:178px;
    z-index:1;
    font-family: Verdana, Geneva, sans-serif;
    }
    #apDiv4 {
    position:absolute;
    left:465px;
    top:546px;
    width:574px;
    height:297px;
    z-index:2;
    }
    </style>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
    }
    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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>

    <body onload="MM_preloadImages('links/1w.png','links/2w.png','links/3w.png','links/4w.png','links/5w.png','links/6w.png','links/0w.png')">
    <div id="apDiv3"> Welcome to our wedding website and thank you for stopping by! The big day is fast approaching, now under a year left, and we can't wait to celebrate the first moments of our marriage with you all. This website will provide you with all the information you might need for the wedding day, as well as tell a bit about us as a couple. I hope you all enjoy!</div>
    <div id="apDiv4"><img src="pic1.png" width="571" height="370" /></div>
    <table width="200" border="0" align="center">
    <tr>
    <td colspan="3"><img src="bannerrt.png" width="918" height="279" /></td>
    </tr>
    <tr>
    <td width="222" align="right" valign="top"><a href="http://www.laurenandmitchell.us" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','links/0w.png',1)"><img src="links/0b.png" alt="Home" name="home" width="230" height="46" border="0" id="home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ourstory','','links/1w.png',1)"><img src="links/1b.png" alt="Our Story" name="ourstory" width="230" height="48" border="0" id="ourstory" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aboutus','','links/2w.png',1)"><img src="links/2b.png" alt="About Us" name="aboutus" width="230" height="48" border="0" id="aboutus" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('photos','','links/3w.png',1)"><img src="links/3b.png" alt="Engagement Photos" name="photos" width="230" height="67" border="0" id="photos" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('registry','','links/4w.png',1)"><img src="links/4b.png" alt="Registry" name="registry" width="230" height="45" border="0" id="registry" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('wedding','','links/5w.png',1)"><img src="links/5b.png" alt="Wedding Details" name="wedding" width="230" height="64" border="0" id="wedding" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','links/6w.png',1)"><img src="links/6b.png" alt="Contact" name="contact" width="230" height="46" border="0" id="contact" /><img src="links/bottomgreen.png" width="230" height="336" /></a></td>
    <td width="660" align="left"><img src="bodyhome.png" width="683" height="700" /></td>
    <td width="30">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="3"><img src="bottom.png" width="918" height="50" /></td>
    </tr>
    </table>
    </body>
    </html>

  9. #8
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Quote Originally Posted by Ronald Roe, post: 215082
    I think the most substantive advice that is missing here is that tables aren't the way to go either. In fact, moving from AP divs to tables is a step backward. I'd encourage you to move on to divs (better yet, HTML5's various tags) that are positioned within the flow of the document.
    Browsers already support html5?
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  10. #9
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    The up-to-date ones do. For webkit and mozilla browsers that aren't up-to-date (which is rare), you can just use the structural tags anyway just by defining the display attribute. for IE < 9, the HTML5 Shim takes care of it, by basically injecting the new tags into the DOM. Some of the other stuff, like <canvas>, <audio> and <video> are only available on the most up-to-date versions of non-IE browsers. I've used HTML5 for the last several sites I've designed.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #10
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Quote Originally Posted by Ronald Roe, post: 215108
    The up-to-date ones do. For webkit and mozilla browsers that aren't up-to-date (which is rare), you can just use the structural tags anyway just by defining the display attribute. for IE < 9, the HTML5 Shim takes care of it, by basically injecting the new tags into the DOM. Some of the other stuff, like <canvas>, <audio> and <video> are only available on the most up-to-date versions of non-IE browsers. I've used HTML5 for the last several sites I've designed.
    Cool, I'll start learning it. Is it very different?
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:22 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com