How can I specify relative positioning in HTML?


Tags: html,css,twitter-bootstrap

Problem :

I am used to designing Android layouts in XML and am wondering if there are parallels I can draw from this in my HTML design that I am currently working on. In particular, I have:

-------------------------------------------
| <img src="logo.png"                     |
-------------------------------------------
|  n  |
|  a  |
|  v  |           Content
|  b  |
|  a  |
|  r  |

This is the template that I am working off of. In the original, the top bar is not an image logo, but a navbar-brand and so everything seems to fit together quite well. I have replaced the "SB-Admin" up top with a logo (.png) which is notably bigger. The effect is that quite a bit of content as well as the "n" in the side navbar have been covered up.

What I am trying to figure out is how I can specify relative positioning,or how should I go about laying out this page so that everything is displayed? I am looking for something akin to navbar:layout_below=logo.png type of thing in XML.

Currently my solution was to modify the .css associated with the navbar and the content and give them both a higher "margin-top", but this seems like a very hacky way to solve this problem. So my question is, is there a way to specify relative positioning within HTML, or am I supposed to trial and error with margins on my local machine, or else, what is the proper way to lay things out so that all content within the three Views shown in my example are displayed without overlapping each other?

<div id="wrapper"> 
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
        <img src="logo.png" class="navbar-brand">
    </div> 

    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav side-nav"> <!-- This only looks ok if I change side-nav margin -->
            <li class="active"><a href="index.html">Dashboard</a></li>
            <li><a href="charts.html">Adoption</a></li>
            <li><a href="tables.html">Usage Statistics</a></li>
            <li><a href="forms.html">Classifiers</a></li>
        </ul>
    </div>

    <div class="container">
        <p>Hey</p> <!--this top here gets cut off-->
        <p>Hey</p>
        <p>What's up?</p>
        <p>What's up?</p>
    </div>
</div>

EDIT: Not necessarily relative layouts, I am looking for solutions that avoid hard-coding margin values, which is what I currently find myself doing, or if this is not bad practice I would also accept an answer that explains why not (i.e. would such a solution generalize to all screen sizes?).



Solution :

As you are using a navbar that's fixed to top, you need to put some padding-top to the body as the Docs state:

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

And like the docs continue, it's very important that you

Make sure to include this after the core Bootstrap CSS.

This way you don't have to individually add margin-tops to all your elements that are seemingly "blocked" by the fixed navbar.


    CSS Howto..

    How to rotate the text Rotation with center to the Number

    how to animate a div towards different direction and fade out using jquery

    How do I make menu background even with the header in HTML/CSS

    How can I completely centre the “feature” section of my layout (please see links)?

    What to do to align text as shown in the image using HTML and CSS?

    How to blink a text on button in IE ,chrome etc using JQuery or CSS

    How do I get rid of the last tr td bottom border using css?

    How do I center this menu?

    How to override css class set in iframe? [duplicate]

    How does the following line of JavaScript work?

    How do I remove white space INSIDE CSS border? I want the border to be tight around the text

    How to manage magento CSS file with over 10,000 lines?

    What CSS properties govern how a webpage reacts to window resizing?

    How to get CSS pulsating effect to work in FireFox and Internet Explorer?

    How would you design the css and html to divide up this rounded widget?

    SASS: normalize.css works, but does not show up in compiled CSS file?

    How can I make this HTML5 canvas progress bar fill from the bottom up instead of the top down?

    Background hover showing in CSS

    How to clone the inner html of a list in query and wrap it

    How to create embossed borders in HTML, CSS? [closed]

    How to include SASS into CSS

    css: how to access a value that is not used by an element?

    How to set focus/active on the clicked li(tab) in angular.js

    How can I make my an image?

    How to make an external HTML file not appear in the home page?

    How to prevent inheritance of any css style of parent node to child node?

    How to debug web page rendering compatibility issues across browsers?

    How can I specify a *.css file in an ASP.NET UserControl?

    How to fill the space of removed
    by left or right positioned
    ?

    How can i overlay an 10x10px image on top of another image?