Geek asks and answers

Bootstrap - Containment Liquid Alignment Issues

I have a comic book site, http://hittingtreeswithsticks.com and want to maintain 100% width for my title (so it stretches 100% in any browser), but a fixed width for my content (you need to maintain a fixed width of 950 pixels).

So I put the header and footer in <div class="container-fluid">and the main content in <div class="container">for that.

I tested locally on IE9, Chrome and FireFox with a resolution of 1920 x 1080, and the title looked fine.

enter image description here

But when I tested on the smaller 1366 x 768 monitor, the title elements seemed to mix together.

enter image description here

In the header.php file, I have this setting (simplified) for the header logo and links

<div class="container-fluid">
   <div id="header">
     <div class="row-fluid">
       <div class="span3 offset3">
         <logo>
       </div>
       <div class="span1">
        <comics link>
       </div>
       <div class="span1">
        <about link>
       </div>
      And so on...

header.php <div class="container">, , , containter, container-fluid.

, ?

!

+5
5

, , , "" , .

CSS,

#header { min-width: 1000px; }

(1000px ). , , , , .

:, , , paddings/margins, .

+6

#header comic_style.css

#header {
background: url("images/SiteDesign/Comic_Header.png") repeat scroll 0 0 transparent;
height: 50px;
overflow: auto;scroll;
}

img bootstrap.css

img {
    border: 0 none;
    height: auto;
    vertical-align: middle;
}

+2

bootstrap.css , - , css - .

, css, .

,

<div class="container-fluid">

.

<div id="header">

div, ,

- :

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">

, - , , . , !

- divs css.

+2
source

I looked at the code on your page and I believe that this might solve your problem:

<div id="header">
   <div style="width: 950px;margin-left: auto;margin-right: auto;left: 0;right: 0;">
      <a href="./?action=homepage&amp;page=1&amp;site=comics"> <img id="logo" src="./images/SiteDesign/Logo_Small.png" alt="HTwS Logo"> </a> &nbsp;
      <div class="comicsSite" style="display: inline; background-clip: padding-box; padding-bottom: 15px;">  <a href="./?action=homepage&amp;page=1&amp;site=comics"> <img id="comicssubsite" src="./images/SiteDesign/Comics_subsites.png" alt="Comics"> </a> </div>
      <div class="comicsHeadingOffset" style="display: inline; margin: 0;"> <a href="./?action=about&amp;page=1&amp;site=about"> <img id="aboutsubsite" src="./images/SiteDesign/About_subsites.png" alt="About"> </a> </div>
      <div class="comicsHeadingOffset" style="display: inline; margin: 0;"> <a href="./?action=homepage&amp;page=1&amp;site=artwork"> <img id="artworksubsite" src="./images/SiteDesign/Artwork_subsites.png" alt="Artwork"> </a> </div>
   </div>
</div>
+1
source

Instead of using spaces, you can use the bootstrap nav element:

    <div class="navbar>
      <div class="navbar-inner">
        <div class="container-fluid">
          <ul class="nav">
    <li><a href="#">Charts</a></li>
    <li><a href="#">Life</a></li>
    <li><a href="#">Office</a></li>
            <li><a href="#">Political</a></li>
            <li><a href="#">Misc</a></li>
      </ul>
     </div>
       </div>
    </div>
+1
source

More articles:


All Articles