Skip navigation
Currently Being Moderated

How do I create a div with no right or left margin in Dreamweaver?

Jul 13, 2013 8:32 PM

I am attempting to create a fully responsive website using Dreamweaver with the Bootstrap Extension. I usually create with tables so out of my element a bit with div. Warning, these are really novice questions. My latest challenge:

 

I would like:

  1. to add a background image that has a zero top, right, and left margin
  2. the background image to only repeat horizontally (not vertically)
  3. to know if it is possible to build my site with tables within the div containers preset by without pushing the containers out of wack and ruining the responsiveness of the site and if so how and if not possible, how to make div tags that stay where you put them like tables.

Here is the link: http://www.graphicmechanic.info/SONIABOOKER/DOUBLETEST.html. The white bar up top is meant to be the continuous bar across the top with no left and right margins.

 

Thanks in advance for any assistance.

 
Replies
  • Currently Being Moderated
    Jul 13, 2013 11:26 PM   in reply to XonoBoom

    XonoBoom wrote:

     

    I would like:

    1. to add a background image that has a zero top, right, and left margin

     

    background images by default have no margin applied so the margin is most likely on your <body> tag

     

    body {

    margin: 0;

    padding: 0;

    }

     

     

     

    XonoBoom wrote:

     

    1. the background image to only repeat horizontally (not vertically)

    use css:

     

    background-image: repeat-x;

     

     

    XonoBoom wrote:

     

    1. to know if it is possible to build my site with tables within the div containers preset by without pushing the containers out of wack and ruining the responsiveness of the site and if so how and if not possible, how to make div tags that stay where you put them like tables.

     

     

    I'm not at all sure how tables perform in responsive design so I can't be of much help on point one. Point 2 can be addressed by the use of css margin/float applied to the <divs> to position them where you want them. However if you are using this method for the first time it's likely to be a steep learning curve.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2013 4:28 AM   in reply to osgood_

    Tables will not play well in a RWD as they will so what tables do (expand to fit their content).

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2013 11:29 AM   in reply to Ken Binney

    Ken's right.  You want to avoid using tables in Responsive Layouts.  No matter what you do, they will always remain as wide as the content inside them.  This invariably falls apart in smaller devices.

     

    As a work around, I have  used Definition Lists to present tabular data.  See my Fiddle example below.

    http://jsfiddle.net/NancyO/SxGNV/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2013 11:34 AM   in reply to XonoBoom

    The white bar up top is meant to be the continuous bar across the top with no left and right margins.

    Use this in your HTML:

     

    <div class="bgimg"><img src="images/whitetop.png" height="103"></div>

    <div class="container-fluid">

    <div class="row-fluid">

    <div class="container-fluid" id="map_canvas">

    </div>

    </div>

    </div>

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points