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:
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.
I would like:
- 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
- the background image to only repeat horizontally (not vertically)
- 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.
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.
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" id="map_canvas">