I'm new to Bootstrap, and trying to redesign a website made originally by someone else. It's a WordPress site using the Roots theme, so it has Bootstrap installed. I would like to use an image as a header/banner. I would like the image to be the same size and positioning as the body, at all widths. My code so far is not working. The banner image is not resizing, and it's not aligned with the body at any browser width. Here's what I have now: (the site is http://brilliantzenaudio.com)
In templates/header.php,
<header class="banner" role="banner">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="<?php get_template_directory(); ?>/assets/img/brav-banner-2.jpg">
</div>
</div>
</div>
</header>
Some excerpts from app.css that I think are relevant. Let me know if there seems to be something missing here (I can't post all of app.css, it's hundreds of lines),
.content {
background:#fff;
padding-top:2em;
}
.home .content {
padding-top:0;
}
.main { }
.page-header {
margin: 10px 0 20px 0;
background: #222;
padding: 5px;
border-radius: 5px;
}
.page-header h1 {
color:#fff;
margin:0;
}
.page-header h1:before {
content: "\00bb";
}
Instead of having an image tag inside your div.
You could set the background-image of the div. Try something like this.
CSS
#test {
background-image: url("/assets/img/brav-banner-2.jpg");
height: 295px;
background-size: 100%;
}
HTML
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="test">
</div>
Update
Try setting your image to 100% width instead. It should automatically re size the image
Related
I am new to bootstrap.I a creating website in which i get space after footer when minimize it to mobile size.I made margin:0;padding:0.Still not working.HTML code is
body {
width: 100%;
background-color: #FF9933;
}
#footer_img {
margin-top: -50px;
width: 100%;
height: 60px;
}
.container-fluid {
padding: 0px;
margin: 0px;
height: 100%;
}
.footer1 {
height: 100%;
margin: 0;
}
body {
padding: 0;
margin: 0;
}
<div class="container-fluid section">
<div class="row">
<img class="img-responsive" src="images/Content_bg.png" alt="content image" id="content_img"/>
</div>
</div>
<footer class="container-fluid footer1">
<img class="img-responsive" src="images/footer2.png" alt="footer image" id="footer_img"/>
</footer>
In footer image you have the footer image bound to the top of the page, actually above it. Running your code in jsfiddle from #footer_img I removed both margin-top and height and it appeared to work. Let me know if it doesn't.
If I am understanding your question correctly the problem is that the padding isn't appearing.
Well for starters when using bootstrap you can only have one container, and here you have two.
div class="container-fluid section"
footer class="container-fluid footer1"
This might be what is causing the problem. Correct that and reupload if it isn't resolved. Thanks
I've been trying, but struggling to get this layout going using twitter bootstrap, what I need is a centered page with two side columns that don't scroll with the page but a center column that does.
for reference the black displays the entire screen space, with blue showing body content, two grey boxes being non scrolling, but maroon scrolling normally as it is the main content for the page
Setting any column with position fixed makes them overlap, and attempting to use a traditional sidebar takes it to the edge of the view space, which is also undesired. any ideas?
The example shows to use the universal scollbar (on the right side of browser frame, rather than in the middle), live demo: http://jsfiddle.net/hm4do8mg/
HTML
<div class="left">
<p>left</p>
</div>
<div class="midd">
<p style="height:2000px;">midd</p>
<p>bottom</p>
</div>
<div class="righ">
<p>righ</p>
</div>
CSS
body, p {
text-align: center;
margin: 0;
}
.left,
.righ {
background: lightgrey;
position: fixed;
}
.left {
width: 20%;
}
.midd {
background: paleturquoise;
width: 60%;
position: relative;
left: 20%;
top: 0;
}
.righ {
width: 20%;
right: 0;
top: 0;
}
The layout you asked, is kind of old fashion style like <iframe>. You can also use <table> to do it, it's the most solid, and easiest way to me (ignore it if you need a mobile version).
I made a fiddle that can help you achieve this. But I haven't used Bootstrap. You can easily make these changes on bootstrap grid.
JSFIddle
I think this could fit your needs. It's not perfect, but it's a starting point.
HTML
<div class="container">
<div class="row">
<div class="first col-xs-3">
<div class="fixed">
<p>Fixed</p>
</div>
</div>
<div class="col-xs-6 scroll">
<p>PUT A NOVEL IN HERE</p>
</div>
<div class="second col-xs-3">
<div class="fixed second">
<p>Fixed</p>
</div>
</div>
</div>
</div>
CSS
html, body {
background:#CCCCCC;
height:100%;
}
.container, .row {
height:100%;
}
.fixed {
height:100%;
background:#FFFFFF;
position:fixed;
width:20%;
}
.scroll {
height:100%;
background:#000000;
overflow:auto;
}
.second.fixed{
margin-left:-15px;
}
DEMO
Fiddle
I want a small image on the top of the page, the logo to be precise. I have set up the bootstrap columns so that the two columns the image will span is center, but the image itself won't center within the two columns it spans. The Dreamweaver live view confirms this.
code:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 col-sm-offset-5">
<img src="Img/Logo.png" id="logo2">
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-color:#DEE7E7;
}
#logo2 {
position:absolute;
width:30%
}
The #logo2 id is mostly just my attempt at centering it, and removing it does not fix the problem. I have looked at the bootstrap documentation and can't figure it out.
You can either apply a text-align: center; to the image's container using Bootstrap's text-center class. E.g:
<div class="col-sm-2 col-sm-offset-5 text-center">
<img src="Img/Logo.png" id="logo2">
</div>
Read more here: http://getbootstrap.com/css/#type-alignment
Or you can style logo2 to display as a block with auto margins. E.g:
#logo2{
display: block;
margin: 0 auto;
max-width: 100%;
}
#logo2 {
display: table;
margin: 0 auto;
}
I am relatively new to StackOverflow and am experiencing some difficulties while making a webpage
So what I require is a one page website divided into different sections, which are full-width divs (i.e 100% width of the screen)and are consecutive with different background colors.
The problem I am facing is that the divs do not take up the full width of the screen and have white space not only on the sides, but also between 2 divs
Also, when the window size reduces, the gap between divs increases
The desired result is as observed in the following websites:
http://classrebels.com/
http://startbootstrap.com/templates/freelancer/
The code I am using is as follows:
i) HTML:
<html>
<body>
<div class="full" id="one">
<h1>Just something</h1>
</div>
<div class="full" id="two">
<h1>Just something</h1>
</div>
</body>
</html>
ii) The CSS:
.full{
width= 100%;
}
#one{
background-color: #fff;
}
#two{
background-color: #f13;
}
Please do tell me where I am going wrong
Demo
html
<div class="full" id="one">
<h1>Just something</h1>
</div>
<div class="full" id="two">
<h1>Just something</h1>
</div>
css
body, html {
width: 100%;
height: 100%;
margin:0; /* default margin set to 0 */
padding:0; /* default padding set to 0 */
}
.full {
width: 100%;
}
#one {
background-color: gray;
height: 50%; /* whatever you want to give height */
}
#two {
background-color: #f13;
height: 50%; /* whatever you want to give height */
}
.full h1 {
margin:0; /* default margin of h1 tag set to 0 */
padding: 20px 10px 10px 20px; /* padding if you want to give spaces between borders and content of div */
}
Demo Fiddle
To remove the default margin/padding on the viewport (which is giving you the whitespace), you need to add the following CSS:
html, body{
width:100%; /* <-- also a good idea to add */
margin:0;
padding:0;
}
and change:
.full{
width= 100%;
}
to:
.full{
width:100%;
}
CSS style property/value pairs are seperated with a colon : and not an equals =
have you tried setting margin and padding 0 in full and in body tag too
like
.full
{
width :100%;
margin:0px;
padding:0px;
}
similarly your heading also takes some margin so set the margin of heading as required.
for better please consult this link w3schools
You have to change the body and h1 margins, since they have default values in the browser.
I've fixed it for you in this fiddle:
h1{
margin: 0px;
}
body{
border: 0px;
padding: 0px;
margin: 0px;
}
http://jsfiddle.net/pWLgb/
the problem is that you dont give the whole div a background color but only the text.
if you ad a border you can see the real size of the div and it will fill the whole div with color.
check out the fiddle i made for that
border: 1px solid black;
http://jsfiddle.net/2h4kQ/
you can set the border to 0px so it is not shown and it will give you the right result
The demo's that you linking to aren't using full width divs. They actually use a full width <section> element which has the background color set on it.
Then, they have an inner row <div> which then has a container and column <div>. So in the Freelancer example it looks like this:
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
</div>
<div class="col-lg-4">
<p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center">
<a href="#" class="btn btn-lg btn-outline">
<i class="fa fa-download"></i> Download Theme
</a>
</div>
</div>
</div>
</section>
Sample of the CSS:
section.success {
color: #fff;
background: #18bc9c;
}
.container {
width: 1170px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
Download that template, it uses Bootstrap, and play around with it to get the look you want.
I'm learning CSS at the moment and I am using it on a website to control the layout of the site.
I Have a number of containers, 5 of them, all on top of each other, I have a background for the page but I also want to use a background for one of the containers. So I used the 'background-image:url("");' tag to use a background, the I also used the attachment, repeat. The problem I was the image wasn't setting itself to the container, it was pushing out way past the dimensions that I had set in my CSS code which were height:312px; and width: 1000px;
Here is the CSS
html, body
{
margin-top: 25px;
padding: 0;
background-image:url("../../images/background.png");
background-repeat: none;
background-attachment: fixed;
}
.hidden
{
display: none;
}
#page-container
{
width: 1000px;
margin: auto;
background: transparent;
}
#header
{
height: 130px;
}
#content-top
{
background: #D9D9D9;
background-image:url("../images/pic.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position:right top;
height: 312px;
width: 1000px;
}
Here is the HTML:
<div id="page-container">
<div id="header">
<div id="flashContent">
</div>
</div>
<div id="content-top"><!--<img src="images/pic.png">--></div>
<div id="portfolio-container">
<div id="portfolio1"><p>1</p></div>
<div id="portfolio2">2</div>
<div id="portfolio3">3</div>
<div id="portfolio1"><p>4/p></div>
<div id="portfolio2">5</div>
<div id="portfolio3">5</div>
</div>
<div id="main-content">
main-content
</div>
<div id="footer">Footer</div>
</div>
I haven't pasted all of the CSS but its needed let me know.
Its as if the background is filling a space that is a lot bigger than the space specified.
Last time I needed to do something like this, I did the following:
#background{position:absolute; top:0; left:0; width:100%; max-width:1024; max-height:768; height:auto; z-index:-1; }
And then on my page I included the following:
<img id="background" src="whatever.jpg" alt="" title="" />
And that was it. This actually works quite nicely, with the background image magically resizing itself until one of the dimensions (width or height) reaches the maximum specified.
It doesn't need CSS3 support. Try it and see.
Obviously tweak the positioning stuff if you don't want it to fill the screen (I did).
You will have to set background-size to 100%
It only works in browsers supporting CSS3
Try float:left in #contentTop
Hope that helps!
In css you also have background-size:contain/cover