I am trying to figure out a way to have multiple background colors on a project i am working on. The design is made with 4 colors on the background. 1 for the header and content, 1 for the sidebar and 1 for each of the 2 footer sections.
Setting the background-color on those is easy as pie - the problem comes when i need to make the colors actually grow outside of the container (match the width of the browser) but still have a max-width of the container itself for 940px.
I am using Twitter Bootstrap 3 as the boilerplate for the project.
Any suggestions?
If background images are an option, then you could split your page into a top part and a bottom part, and then apply background images to those containers.
Your HTML would look like this:
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
<div class="main-wrapper">
<div class="container">
<header class="header" role="banner">
…
</header>
<div class="row">
<section class="col-8" role="main">
…
</section>
<aside class="col-4" role="complementary">
…
</aside>
</div>
</div>
</div>
<footer class="footer" role="contentinfo">
<div class="container">
…
</div>
</footer>
</body>
</html>
And then you would just create styles for your .main-wrapper and .footer that applies your tiling background image to them.
Create a new style sheet called application.css and load it after bootstrap.min.css, and place the following CSS rules in it:
.main-wrapper {
background: url(../img/main-bg.png) repeat-y 50% 0;
}
.footer {
background: url(../img/footer-bg.png) repeat-y 50% 0;
}
Related
I'm trying to apply an overlay to create an effect similar to https://fancy.com when the login or signup link is clicked i.e the background should be dimmed.
The problem is that my nav bar and content boxes are not subjected to the overlay for some reason but not sure why?
I have created a fiddle to explain: https://jsfiddle.net/p861yfLp/1/
My Code:
<body>
<div class="overlay">
<nav>
Menu
</nav>
<div id="content">
<div class="box">
Box
</div>
</div>
</div>
</body>
Change these files
CSS - set the position to absolute
.overlay {
position: absolute;
}
EDIT: Following #DaniP answer the changes to the css are not required if you want a 'modal' feel for the overlay. Tho if you want to overlay everything I would recommend using the absolute position.
HTML - no need to make your overlay contain all other html
<body>
<div class="overlay"></div>
<nav>
Menu
</nav>
<div id="content">
<div class="box">
Box
</div>
</div>
</body>
Now your overlay will 'overlay'.
The half-black background-color is actually applied, but the nav (as child-element) has its own background-color (#FFF) defined. If you remove its background-color, it works:
.nav {
background-color: transparent;
}
https://jsfiddle.net/rw60gzbz/
I've got Bootstrap3 page, and somewhere halfway is a row with full display height. How do I center the row's content vertically?
I already tried the "vertical-align:center" css property, but that doesn't seem to work (neither does 'middle' instead of 'center').
Here's a small live demo, or as a standalone HTML example:
<!DOCTYPE html><html><head><meta charset='utf-8'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script>
<style type='text/css'>
.row { color:#ff0; }
.bg1 { background:#007; }
.bg2 { background:#060; }
.special { background:#600; height:100vh; vertical-align:center; }
</style>
</head><body>
<div class="container-fluid text-center">
<div class="row bg1">Top row<br><br></div>
<div class="row bg2">Another row<br>With some content<br><br></div>
<div class="row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div>
<div class="row special">
<h2>Hello</h2>
This should be vertically centered
</div>
<div class="row bg2">And here's yet another row<br><br></div>
<div class="row bg1">The bottom row<br><br></div>
</div>
</body></html>
.row has negative margins for the columns, using without inner col-X-X is going to give you odd results. Read the docs on how to use the grid system.
There are a variety of ways of vertical-align:middle (not center) http://css-tricks.com/centering-in-the-unknown/
DEMO: http://jsfiddle.net/mLopevv8/
READ ME: Make another class for .row, remove .container-fluid, convert the parent of the vertically aligned middle content to a display:table and the child is now a display:table-cell.
CSS
.special { background:#600; height:100vh; display:table;width:100%;}
.v-m {display:table-cell;vertical-align:middle}
HTML
<div class="text-center">
<div class="my-row bg1">Top row<br><br></div>
<div class="my-row bg2">Another row<br>With some content<br><br></div>
<div class="my-row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div>
<div class="my-row special">
<div class="v-m">
<h1>Hello</h1>
This should be vertically centered!
</div>
</div>
<div class="my-row bg2">And here's yet another row<br><br></div>
<div class="my-row bg1">-- The bottom row --<br><br>
</div>
</div>
One way is to give the line height to the text which you want to place at the center vertically and horizontally ,but the line height should be equal to the half of the height of the div in which it is being placed.
or
U can check out this link , this might help you:
http://jsfiddle.net/jasongennaro/unfwL/1/
Done this a whole bunch of times, but now it's acting out for some reason. Though I'll probably feel very dumb, after somebody points out the mistake.
Live link:
http://soloveich.com/project6
I'm trying to build a header, but getting quite a few problems at the same time
1) Background images for class header and #soc don't show
2) that image with large text does not align to center
3) I get the post on the right side of the header, while it has to be under it.
css is properly connected (tried changing body background color)
header code
<div class="header">
<header>
<div class="row-fluid">
<div class="col-lg-3"><div class="pull-right"><img src="wp-content/themes/greendream/images/logo.png"> </div></div>
<div class="col-lg-6"><div id="text"><img src="wp-content/themes/greendream/images/text.png"></div></div>
<div class="col-lg-3"><div id="soc"></div></div>
</div>
</header>
</div>
css
.header {
background-image: url(images/hdbg.jpg);
}
#text {
width: 578px;
margin:o auto;
}
#soc {
background-image: url(images/soc.png);
}
You need to start by studying how the grid system in Bootstrap 3 works.
Basically, if you want your content centered, you need to place it in a container. Then you set up your rows and columns.
Something like this:
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="wp-content/themes/greendream/images/logo.png">
</div>
<div class="col-md-6">
<img src="wp-content/themes/greendream/images/text.png">
</div>
</div>
</div>
</body>
Note: There is no row-fluid in Bootstrap 3. A lot of what you're trying to do will only work in Bootstrap 2.
Twitter Bootstrap Scaffolding section on Fluid layout shows example code which displays as two blue boxes. Using that example, the code below, displays "Sidebar content Body content" but no boxes. What else is needed?
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-iconhttp://twitter.github.io/bootstrap/scaffolding.htmls.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
Sidebar content
</div>
<div class="span10">
Body content
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</body>
</html>
If you're trying to see the blue boxes those are just displayed there for reference and to point out how the grid is divided. They are not actually meant to be included in the code. The words Sidebar Content and Body Content are your reference points for where content will be displayed. In order to get some shading you will need to add a CSS class beside your span2 and span10 divs. Here's an example:
<div class="span2 well">
Sidebar content
</div>
The Bootstrap docs have an additional style property show-grid that is used to display a background (boxes) on the span* (columns) inside of rows. The CSS looks like this:
.show-grid [class*="span"] {
background-color: #ddd;
}
and is applied to the rows in the docs like this..
<div class="row-fluid show-grid">
<div class="span2">
Sidebar content
</div>
<div class="span10">
Body content
</div>
</div>
Demo: http://www.bootply.com/68856
I'm stying bootstrap sticky footer on my project: http://twitter.github.com/bootstrap/examples/sticky-footer.html
Is it possible to set height of content to fill remained space?
Let me explain. I want to reside image and I need to it gets sized relates to available height.
If your intention is fill any space between the end of the content and the start of the footer, I can see all sorts of challenges.
Depending on the specifics of your image, maybe you can include it as a background like this:
http://jsfiddle.net/panchroma/hBzjn/
You could use media queries, possibly with different images at different viewponts and also use padding to refine the results.
Good luck!
HTML
<div id="wrap">
<div class="contentWrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p>page content</p>
</div>
<div id="push"></div>
</div><!-- end contentWrap -->
</div> <!-- end wrap -->
<div id="footer">
<div class="container">
<h3>sticky footer </h3>
</div>
</div>
CSS
#wrap{
background: url(http://is.gd/0QPvoC) left bottom; /* define image and position */
}
.contentWrap{
background-color:#fff; /* quick fix so background image is hidden behind main content */
}