Help with DIV tags (i think)

Hello all,
Just started using Dreamweaver and was following a tutorial
about making a layout in Photoshop, slicing it, and then importing
it into Dreamweaver. Then I delete the content portions of the
image and add a box with DIV tags.
Now, the site works just fine when I put only a single line
of text/content for both FF and IE.
However, once I add a second line, the site becomes a mess in
FF.
I have the site hosted with 2 lines of text in my main
content box here:
http://cnorthington.site.io/sitebase.html
Any advice you can offer would be great.
Thanks,
Chris.
P.S. This is what it looks like without content:
http://cnorthington.site.io//sitebasetwo.html

Try this tutorial instead. I believe the one you are
following is flawed.
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"ck64" <[email protected]> wrote in message
news:g17del$r7k$[email protected]..
> Hello all,
> Just started using Dreamweaver and was following a
tutorial about making a
> layout in Photoshop, slicing it, and then importing it
into Dreamweaver.
> Then I
> delete the content portions of the image and add a box
with DIV tags.
>
> Now, the site works just fine when I put only a single
line of
> text/content
> for both FF and IE.
>
> However, once I add a second line, the site becomes a
mess in FF.
>
> I have the site hosted with 2 lines of text in my main
content box here:
>
http://cnorthington.site.io/sitebase.html
>
> Any advice you can offer would be great.
>
> Thanks,
> Chris.
>

Similar Messages

  • Help with Div Tags

    Hello,
    I've got 2 flash files in separate div tags. Div 1 is sized 100% x 100% to match the movie, and the other div tag is set at 900px x 700px (again to match the movie). The 1st tag sort of acts as a background to the top layer. This all works great and really happy with the result.
    My only problem is when the browser window gets smaller than the top layer a scroll bar appears (this is no problem, i actually don't want the top layer to resize due to text legibility etc.) but what i notice is that when you scroll to view the rest of the top layer, the bottom layer no longer fills the screen, the remainder of the screen is now white, it actually cuts off some of the image from where the window was in it's last position.
    this is the site:
    http://www.baycreative.co.uk/Test.html
    Any suggestions to why this is happening?

    Try this tutorial instead. I believe the one you are
    following is flawed.
    Taking a Fireworks comp to a CSS-based layout in Dreamweaver
    http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "ck64" <[email protected]> wrote in message
    news:g17del$r7k$[email protected]..
    > Hello all,
    > Just started using Dreamweaver and was following a
    tutorial about making a
    > layout in Photoshop, slicing it, and then importing it
    into Dreamweaver.
    > Then I
    > delete the content portions of the image and add a box
    with DIV tags.
    >
    > Now, the site works just fine when I put only a single
    line of
    > text/content
    > for both FF and IE.
    >
    > However, once I add a second line, the site becomes a
    mess in FF.
    >
    > I have the site hosted with 2 lines of text in my main
    content box here:
    >
    http://cnorthington.site.io/sitebase.html
    >
    > Any advice you can offer would be great.
    >
    > Thanks,
    > Chris.
    >

  • Help with div tag in DWCS4

    Hola
    this is my first time using --or trying to used-- CSS
    I have a div tag that I want to used as a navigation bar.
    I type the links, and when I try to fix them with CSS, if I put a line (border top and bottom) on top of the link, the whole links Shift out of the navigation box.
    Then I tried to put an inside div in the navigation div to try to control the shifting, but it didn't work, still shift out of the div nav.
    I'm going to post a link later so you can "see it".
    Hope you understand my problem
    Thanks for your help.
    Daniel Ulysses
    P.S. I'm learning DW, used to have GoLive, but have to "Update", so far...I love it, just having some issues.

    Try this free menu extension from List-O-Rama.
    http://www.dmxzone.com/go?5618
    Project VII menus:
    Uberlinks -
    http://www.projectseven.com/tutorials/css/uberlinks/
    CSS Express Drop menus-
    http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm
    Pop Menu Magic 2 - the best
    http://www.projectseven.com/products/menusystems/pmm2/index.htm
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.com/blogspot.com

  • JS with div tags

    hi to all, i m ferly new with this and english is not my native lenguage so i struglle with tutorial, i need help with this i need to place this code
    JS:
    $(document).ready(function(){
      $('.slider2').bxSlider({
         slideWidth: 300,
         minSlides: 2,
         maxSlides: 2,
         slideMargin: 10    
    HTML:
    <div class="slider2">
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
    </div>
    into  content for Layout Div Tag "LayoutDiv5" to work properly
    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MANORA</title>
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="Untitled-1.css" rel="stylesheet" type="text/css">
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="respond.min.js"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="gridContainer clearfix">
      <div id="LayoutDiv1">
        <p> </p>
        <p> </p>
      </div>
      <div id="LayoutDiv2"></div>
      <div id="LayoutDiv8">T
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#">Item 1</a>      </li>
          <li><a href="#" class="MenuBarItemSubmenu">Untitled Item</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Untitled Item</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a>      </li>
        </ul>
      </div>
      <div id="LayoutDiv3"> </div>
      <p> </p>
      <p> </p>
      <p> </p>
      <div id="LayoutDiv5">This is the content for Layout Div Tag "LayoutDiv5"</div>
      <div id="LayoutDiv6">This is the content for Layout Div Tag "LayoutDiv6"</div>
      <div id="LayoutDiv7">This is the content for Layout Div Tag "LayoutDiv7"</div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    i tried to put at each line but wont work
    thank you

    actually, i just figured this out, but am still haveing issues... i have the container, then the other div tags inside of it. i am using the div tags as columns inside of the container, but the container background color (gray) does not go all the way down until the rest of the page ends, or where the body ends. i think that it has to do something with the "height:", but am not sure. is there any way that you can put one div tag equal to that of another div tag so that it goes down the whole page like it is suppose to?
    here is my code:
    .container
        background-color: #666666;
        width:75%;
        margin-left:auto;
        margin-right:auto;
        height: 100%;
    what is wrong?

  • Working with div tags

    This question was posted in response to the following article: http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7deda.h tml

    Hi Nancy, thanks for your reply.
    Please let me point this out.
    I know and agree about best practices for coding, and as you mention, Inline styles should be avoided, except ... etc.
    The exceptions are and should be each ones criteria and situation, not the thinking of  dreamweavers authors or programers.
    If you please, see their own training video in ....
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
    you will see, in minute 7:39 why they have to use the code view and that is because dreamweaver's programers.
    Same thing happens, for example with me
    I have a DIV tag, inside and IMG tag  which the DW programer insists enclose it in P tags
    why?
    That is his idea of coding, not mine.
    They recognize that, and to mee, they should change the policy on dreamweaver to let the programer design and code as he wants, not like they want or think is best practice.

  • Help with Pager Tag Library

    I am developing a photo website with the JSP Pager Tag Library (http://jsptags.com/tags/navigation/pager/index.jsp). I have installed it and am using it successfully.
    I have one question.
    I have a page called view_fotos.jsp. This page has the pager tag to display the photos in a series of pages. view_fotos.jsp can accept a variety of parameters.
    For example:
    view_fotos.jsp?groupnum=10
    view_fotos.jsp?groupnum=10&user=john
    view_fotos.jsp?user=john&mode=view
    Now, I would like to add the QueryString to all the indexed page links.
    i.e. The page links should become...
    view_fotos.jsp?groupnum=10&pager.offset=0
    view_fotos.jsp?groupnum=10&pager.offset=6
    view_fotos.jsp?groupnum=10&pager.offset=12
    or
    view_fotos.jsp?groupnum=10&user=john&pager.offset=0
    view_fotos.jsp?groupnum=10&user=john&pager.offset=6
    view_fotos.jsp?groupnum=10&user=john&pager.offset=12
    depending on the request's QueryString. Can anyone please let me know how can I accomplish that?
    Thanks for your kind help!
    Regards,
    Joe

    Take a look at the docs on the pg:param tag. Those parameters will make it on the end of your URL. You might also have to export the offset variable in the pg:pager tag so that you can use it later with <%=offset%> but I think if you set the max items per page part of pg:pager to 6, it will do the offset stuff for you. The docs for the pager tag library should have more info though. That's found at http://jsptags.com/tags/navigation/pager/index.jsp along with the download.

  • Newbie with div tags

    I am trying to design my webpage, www.evdetailing.com, using div tags.
    Here is the site working okay in IE Explorer (http://evdetailing.com/whatswrong.JPG)
    I am looking to have the bottom two tags (the text and the left hand margin tag) sitflush with the bottom of the browser, and stretch if there are more text. In Firefox, the text div aligns but not the left hand margin div.
    Okay also I have the boxes aligning to the left at 15% absolute, how do I align so the text box will align with them if I set it at 15% it will sit on top of the margin div and cover it up, 20% is the closest to flush but there are still 2 or 3 px of space between the two boxes. You can see what im trying to do at the #1 Arrow, I want the whole site to be align
    Lastly if anyone knows why my background is doing what it's doing in Firefox, I would love to know so that I can fix it, its working right in the picture above.
    Any help is greatly appreciated.

    OperationGreen wrote:
    I am trying to design my webpage, www.evdetailing.com, using div tags.
    Here is the site working okay in IE Explorer (http://evdetailing.com/whatswrong.JPG)
    There's nothing to be seen at the link above?

  • Help with JSP Tag Libraries

    Could someone please help me with the setup process of tag libraries? I've looked on the Internet and found some instructions, but they are all for Tomcat. I'm using Jserv, and I'm not sure how to setup my environment to work with custom/tag libraries. Could someone help me by giving me some instructions or sending me to an article that could help me?
    Thanks in advance!
    -PV

    Hi pvongboupha
    The best source for getting to know how to set up tag libraries is the JSP specification. You can download this from :
    http://java.sun.com/products/jsp/download.html
    See the chapter on Tag libraries. Any J2EE compliant server will conform to these rules.
    You can also see a chapter from Core Servlets & JSP by Marty Hall. This chapter is on Tag Libraries
    http://developer.java.sun.com/developer/Books/javaserverpages/cservletsjsp/
    Keep me posted on your progress.
    Good Luck!
    Eshwar R
    Developer Technical Support
    Sun microsystems
    http://www.sun.com/developers/support

  • Help with clicks tag

    I was ask to create an ad banner, I need help with how to track the web click on it, is it what the clicktag is for. What should I do, insert that code but where ?

    Create Clicktag AS 2.0
    1. Create animation
    2. Add new layer to very top of timeline. (must be at top) Label "clicktag" or Inv button. (It doesn't really matter what you label it)
    3. On first frame of this layer draw rectangle to cover full stage (may go beyond stage dimensions)
    4. Rectangle must have a fill color. You may delete frame around the box. (Make sure alpha slider has some fill percentage before you draw rectangle to enable fill)
    5. Convert this box to a button symbol.  Name clicktag (or button)
    6. Double click on this button or get to edit mode. Select color fill with solid arrow. Click on Properties panel/Fill color and adjust alpha to 0%.
    7. Go back to Scene. Click on first frame of clicktag layer. Select the now invisible button by surrounding with solid arrow tool.
    8. Select properties panel and click on arrow in circle to get Actions panel.
    9. Make sure Actions panel says ACTIONS-BUTTON at top of panel.
    10. Add coding from below:
    on (release) {
    getURL (_level0.clickTag, "_blank");
    11. Send swf/html files along with your target URL to publication
    Good luck

  • Alignment with div tags

    I am having trouble to get my 3rd <div> tag to properly align (id=flash). It is left aligning to the edge of the "#content" <div> tag. Basically left aligning to the edge of my centered layout. Below is my code, can anyone shed some insight on what I am missing? I am new to not using tables.
    thanks
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Page Title</title>
    <style type="text/css">
         body {
             font-family: Arial, Helvetica, sans-serif;
             background-color: #FFF;
             margin: 0px;
             padding: 0px;
         #container {
             margin: 0 auto;
             width: 999px;
         #content {
             width: 100%;
         #flash {
             position: absolute;
             top: 134px;
             left: 216px;
    </style>
    </head>
         <body>
              <div id="container">
                   <div id="content"><img src="images/background.jpg" width="997" height="2400" />
                        <div id="flash">
                             This is left aligning
                        </div>
                   </div>
              </div>
    </body>
    </html>

    You are using an absolute positioned div, which is positioned based on the page, not the div around it.
    My recommendation would be to use margins to center it within the other div.  Should look something like this:
    #flash {
         margin:0px auto;
    That will set a 0 pixel range above and below, and an automatic range to the left and right.
    Nick

  • Learning as I go, need help with div overlapping

    PLEASE HELP, PEOPLE ARE LOOKING BUT YOU ARE NOT RESPONDING. At least give me something, please!! If you need more info I can give it to you, I just don't know what you need
    I am learning Dreamweaver through the tutorials provided here on the Adobe site. I have basic html/css knowledge and am trying to learn how to use it!!
    I have tried inserting div inside one big div, like in the getting started tutorial, but the tags seem to be overlapping when I click on the Live View option. The look fine in the design view, but overlap in the Live View. I need them not to overlap.
    If this is not enough info for someone to help, please ask what you need to know.
    Thank you
    Robbie

    1. Have you previously posted a question here? You seem to be alluding to one but I see no posts under the moniker of RobJes
         -No John, I haven't. I think I was just getting impatient. I had been working on this for a while and couldn't figure it out. I edited the original post after      I had seen that several people had looked at the question but had not even responded. I was being impatient.
    2. Can you provide a link to what you've done so far?
          Here is a link to what I have so far, I think I fixed the problem, but if you see anything I could do please let me know
         http://www.spin4life.net/main.html
         Most of the links don't work yet, was just trying to get the layout fixed first.
    3. What is your question in a nutshell?
         The text below the pictures on the top was overlapping with the other text below it. But like I said, I think I have it fixed now.
    Either way, thank you for your reply. I really appreciate it and if you have any suggestions I would be all ears!! Thank you

  • Help with struts tag

    Hello Friends,
    I'm very new to struts, and have a code piece that does the following:
    <logic:iterate id="paramData" name="<%=printParam%>" >
    <PARAM NAME = "<bean:write name="paramData" property="key" />" VALUE="<bean:write name="paramData" property="value" />">
    <PARAM NAME = "rootUrl" VALUE="<%=HttpUtil.getServerUrl(request)%>" >
    </logic:iterate>
    It iterates through a Map and gets the values in the applet. However I now have to change this so that it gets the applet params from a ParamsVO.java, a value object. How does the code change to get the values now?
    I have paramsvo.getXXX methods that I can use. Though not sure how they are used with struts. Pls help!!
    Karen

    All the parameters are in this ParamsVO object? Each with their own getter/setter?
    I don't think you are able to do this in a loop.
    You just have to write a <PARAM> tag for each property, and get its value.
    For instance if paramsVO has getParam1() method
    <PARAM NAME="param1" VALUE="<bean:write name="paramVO" property="param1"/>">
    Cheers,
    evnafets

  • Help with Divs need please

    Hello could someone possibly help me.
    My page layout has a top banner ("banner"), then main content
    below in the middle (middletext), and a fotter ("footer") below the
    "middletext" div
    I want place a div of say 100px directly to the right of the
    "middletext" div. The layout is fluid so I want the right div to
    move with the rest of the page when resized in an IE window. Here
    is the code for the css -
    body {
    background-color: #666666;
    background-repeat: repeat-x;
    #background {
    background-color: #999999;
    background-repeat: repeat-x;
    width: 80%;
    #content {
    background-color: #CCCCCC;
    background-repeat: repeat-x;
    height: 300px;
    #middletext {
    background-color: #FFFFFF;
    background-repeat: repeat-x;
    margin-left: 200px;
    margin-right: 200px;
    height: 300px;
    #footer {
    background-color: #9999FF;
    background-repeat: repeat-x;
    height: 100px;
    #rightcontent {
    background-repeat: repeat-x;
    width: 100px;
    background-color: #CCCC66;
    height: 100px;
    position: absolute;
    left: 1052px;
    top: 135px;
    #banner {
    background-color: #996633;
    background-repeat: repeat-x;
    height: 100px;
    And the code for the html page -
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN"
    http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <link href="test.css" rel="stylesheet" type="text/css">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4
    resized
    if (init==true) with (navigator) {if
    ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
    onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW ||
    innerHeight!=document.MM_pgH) location.reload();
    MM_reloadPage(true);
    //-->
    </script>
    </head>
    <body>
    <div id="background">
    <div id="banner">Content for id "banner" Goes
    Here</div>
    Content for id "background" Goes Here
    <div id="content">
    <div id="middletext">Content for id "middletext" Goes
    Here</div>
    id content </div>
    <div id="footer">Content for id "footer" Goes
    Here</div>
    </div>
    </body>
    </html>
    I also have the width of the page set to 80%, just to give a
    small border, but how can I center the entire page?
    Many thanks in advance!!
    Billy.

    Add the 'right' <div> before the 'middletext'
    <div> and float it right
    with a width of 100px. See code and css below.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN"
    http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <link href="test.css" rel="stylesheet"
    type="text/css">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4
    resized
    if (init==true) with (navigator) {if
    ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
    onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW ||
    innerHeight!=document.MM_pgH)
    location.reload();
    MM_reloadPage(true);
    //-->
    </script>
    <style>
    body {
    background-color: #666666;
    background-repeat: repeat-x;
    #background {
    background-color: #999999;
    background-repeat: repeat-x;
    width: 80%;
    #content {
    background-color: #CCCCCC;
    background-repeat: repeat-x;
    height: 300px;
    #middletext {
    background-color: #FFFFFF;
    background-repeat: repeat-x;
    margin-left: 200px;
    margin-right: 200px;
    height: 300px;
    #footer {
    background-color: #9999FF;
    background-repeat: repeat-x;
    height: 100px;
    #rightcontent {
    background-repeat: repeat-x;
    width: 100px;
    background-color: #CCCC66;
    height: 100px;
    position: absolute;
    left: 1052px;
    top: 135px;
    #banner {
    background-color: #996633;
    background-repeat: repeat-x;
    height: 100px;
    #right {
    float: right;
    width: 100px;
    background-color:#FFFFFF;
    </style>
    </head>
    <body>
    <div id="background">
    <div id="banner">Content for id "banner" Goes
    Here</div>
    Content for id "background" Goes Here
    <div id="content">
    <div id="right">right</div>
    <div id="middletext">Content for id "middletext" Goes
    Here</div>
    <div id="footer">Content for id "footer" Goes
    Here</div>
    </div>
    </div>
    </body>
    </html>

  • Help with divs

    Hi, I am looking for some help getting this layout using divs working correctly.  It will be going inside an existing spry tabbed panel.  At the moment the styles are inline but I will be moving them to my external style sheet once it is working.  What I am looking to do is create a div that will containg the details of a product, also contained in the div will be another div floated to the right containing the product image.  The outer div will vary in height so I want the inner div that contains the image to match the height of the outer div, with the image being centered horizontaly and vertically if possible, the image will probably vary in size as well.  See mockedup image below.  Below that I have put the code I have got so far
    <div style="border:solid 1px #000; padding:0px 0px 0px 10px; margin: 5px 0px 0px 0px">
        <div style="width:150px; border:solid 0px 0px 0px 1px #000; float:right;"><img name="" src="" width="100" height="100" alt="" /> </div>
        <h4>Universal Framing Anchor (A35)</h4>
        <p>The A35 Anchor features an exclusive bending slot which allows instant and accurate bending on-site. The balanced and completely reversible design of the A35 makes it suitable for a wide variety of applications.</p>
        <p><a href="http://www.strongtie.co.uk/products/type.php?typeID=10&familyID=7" target="_blank">"A35" Tech Data @ www.strongtie.co.uk</a></p>
      </div>
    Thanks for any help,
    Richard

    I would argue against this method for the following reasons.
    First, resizing the image dynamically would require bringing in a library like JQuery to read the height of an element after the page loads and then adjust the image accodingly.
    Second, as you increase the size of an image it will be more blurry, or on the flip side, if the image is large and has to be scaled down, you force users to download images larger than what is necessary increasing your page load times depending on the amount of products per page.
    From a user's standpoint, my experience has been that if you make images larger, it will draw more attention to that item over your other items, is that what you want to do?
    Then depending on how long the descriptions are, you also increase the amount of scrolling on your page.  If the descriptions are that long your best bet may be to do a brief description on this "listing" page and then have the user click on something to bring them to a detailed page.
    if you still want to move forward with the JQuery method post back and we can try to help you go that route.

  • Help with div positioning

    I am an utter newbie when it comes to html and CS5.  Since I happen to own a copy of CS5 I have been drafted to take a stab at a very basic website for a non-profit I work with.  The site can be seen here  www.kidscareco.com
    I have searched all around this site and the web in general for an answer to my question and while I have found lots of information on absolute vs relative position and "clear", I haven't been able to cypher out a solution to my particular problem.
    I am having trouble getting one particular div to stay where I want it.  I'm entirely sure that it is my fault and thus am not angry at the div.  I am hopeful that someone here can offer me a few lines of css code to get the errant div to stay where it should be.  I am attaching the html and css for the page in question.  The page is based on a template which I can post if it is somehow helpful but I believe that the code from the "index" page is sufficient.
    The div in question is #meat.  (content text is: Since 1990, Kids Care Clubs has empowered children to make a better  world through hands-on service projects.We give parents, teachers and  youth leaders the resources they need to involve kids in the good works  that will mean a brighter future for all.)  I would like for it to stay neatly under the spry menu, near the top of the page and for it to expand and contract both vertically and horizontally as the browser window is resized.  I have tried several different "solutions" with little success except for restricting the width of the div to about 600px but that leaves a considerable amount of white space when the page is viewed full screen on a large monitor and it forces the text down the page in an unworkable way once the actual text within the div starts to get into the order of 1000 words or so.  Suggestions and helpful critique are welcomed.
    Thank you!
    Mike Logan
    @charset "UTF-8";
    /* CSS Document */
    html, body {
         width:97%;
    #container {              
         min-height: 1000px;
         width:100%;
         min-width:850px;
         border-color:#000;
         border: solid 2px;
         alignment-baseline:middle;
         margin:25px;
    #header {
         float:left;
    #collage {
         float:right;
         width:202px;
    #menu {
         margin-top:20px;
         height:30px;
         float:left;
         clear:left;
    #MenuBar1 {
         font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
         clear:inherit;
    #meat {
         float:left;
         clear:left;
         /* [disabled]max-width:600px; */
         padding:20px;
         padding-left:40px;
         font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    #footer {
         clear:both;
         width:100%;
         height:auto;
       font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ice="http://ns.adobe.com/incontextediting">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Welcome to KIDS care Colorado.com!</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <link href="../kidscare_template.css" rel="stylesheet" type="text/css" />
    <script src="../includes/ice/ice.js" type="text/javascript"></script>
    <script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
      <div id="header">
    <img src="../graphics/Kidscarekidslogo.png" width="220" height="144" alt="logo" /><img src="../graphics/kidscare-name.png" width="395" height="79" alt="name" />
      </div>
      <div id="collage"><img src="../graphics/collage.png" width="200" height="949" alt="collage" /></div>
    <div id="menu">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li>
          <div align="center"><span id="MenuBar1"><a href="#">Home</a>
            </span>
          </div>
        </li>
        <li><span id="MenuBar1"><a href="#">Programs</a></span></li>
        <li><span id="MenuBar1"><a href="#">Volunteer</a></span></li> 
        <li><span id="MenuBar1"><a href="#">Donate</a></span></li>
        <li><span id="MenuBar1"><a href="#">Contact Us</a></span></li>
      </ul>
    </div>
    <!-- TemplateBeginEditable name="meat" --> 
    <div id="meat" ice:editable="*">
      <div align="left">Content for  id &quot;meat&quot; Goes Here</div>
    </div> 
    <!-- TemplateEndEditable -->
    <div id="footer">
      <div align="center">
        <p> </p>
        <p>KIDS care Colorado,LLC • (720) 295-3396 • <a href="mailto:[email protected]">[email protected]</a></p>
        <p>PO Box 19442 • Boulder, CO 80308
        </p><p> </p>
      </div>
    </div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

    Hi Mike,
    I'm going to suggest you start over with a pre-built CSS layout for this project.  It's much simpler than building a page layout from scratch.  Also, liquid layouts are very tricky to control.  A fixed-width layout is much easier to work with.  Here's a sample 2-column, fixed-width, centered layout to get you started.
    http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
    Making your prototype page into a DW Template is just about the last step in your design process.  After you are completely satisfied with how your protoype.html page looks and works in all browsers, then saveAs Template.
    Best of luck with your project, and have fun!!
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

Maybe you are looking for