2

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?).

mike
  • 1,318
  • 3
  • 21
  • 41
  • You'd need to show some HTML. A better solution would be to fix up the html so that your navbar stuff always follows the logo, e.g. ``, or at least have a `clear: left` on the navbar, etc... but without any html there's no way to tell. – Marc B Jul 21 '14 at 14:43
  • Really new to html and it's not quite so beginner friendly, any useful beginner resources are appreciated (not W3) – mike Jul 21 '14 at 14:56
  • if you're a begginer you shouldn't use stuff like navbar-ex1-collapse navbar-toggle navbar-fixed-top . Start from scratch, grow it(html and css) slow, easy, smart and responsive, according to your needs. – Andrei Cristian Prodan Jul 21 '14 at 15:31

1 Answers1

1

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.

Pete TNT
  • 8,293
  • 4
  • 36
  • 45
  • Is hard coding of pixel values common in HTML? In my experience using XML (at least for Android) such hard coding could often be avoided in lieu of `match_parent`, `wrap_content` etc. – mike Jul 21 '14 at 16:07
  • 1
    http://stackoverflow.com/questions/2915508/is-it-bad-to-work-with-pixels-in-css See this answer. – Pete TNT Jul 21 '14 at 17:20