Hi list!
I have a header image for a layout that I'm working on that is 1200px wide.
The layout is fixed.
I'd like the container that wraps this image (and any container that wraps
it up in the DOM hierarchy) to adapt to the 1200px. First thing I thought
on doing was to just:
.container {
width:1200px;
}
It works, but then what's the point of using bootstrap? And also, I'd
probably be messing with the grid by forcing a width this way, right?
So, I tried to setup the grid to add up to 1200px, but still keep 12
columns, like this (I'm using sass):
$grid-column-width: 70px;
$grid-gutter-width: 32px;
However, I could only approximate (or go way above) 1200px, while keeping
12 columns. In this case, I got 1192px, which works, but is not optimal.
Here's the markup I'm using:
<div class="container">
<div class="row-fluid">
<div class="header-photo text-center span12"></div>
<div class="row-fluid">
...
</div>
...
</div>
</div>
And here's the CSS that setups the header div:
div.header-photo {
background-image: url(/images/header-photo.png);
width: 1200px;
height: 368px;
h2,h3 {
text-indent: -99999px;
}
}
So, if I use span12, the other divs above the first row-fluid adapts to the
size of the header-photo div, but only up to 1192px.
What would be the best approach to get the container to be of exactly
1200px:
- force it with a CSS rule (like I tried doing) ?
- A combo of the grid conf that I'm clueless about?
- Tell the designer to make the header photo smaller/bigger so it adapts to
another value?
Any hints highly appreciated!
Thanks in advance!
- Marcelo.
--
You received this message because you are subscribed to the Google Groups
"twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
