Is there an easy way to make a full width hero type banner using bootstrap and WordPress? I know how to do it with bootstrap and I know how to hack WordPress Templates, the problem lies when you are wanting to this within the WordPress content editor(Perhaps via short-code even).
So, if using a template in wordpress that is say 1100 px wide, but the screen is 1300px wide, simple adding a div with a background color will only extend the width of the containing element which is 1100 px wide.
How can I add a fullwidth banner anywhere in the code with any sized containing element without breaking bootstrap rules?
You could use position: absolute to break free from the containing div.
Then use left: 0px; width: 100% to use the full width of the browser.
Then, wrap your hero inside that. So:
<div style="position: absolute; left: 0px; width: 100%;">
<div class="hero-unit">
<h1>Heading</h1>
<p>etc.</p>
</div>
</div>
The problem you'll experience with this is that subsequent content will ignore this new div with regards to vertical-positioning.
A hack to that would be to add block-level content with the proper height adjustment (matching the height of your absolute-positioned div), e.g.
<div style="height:500px"></div>
Related
I'm using Kube CSS framework to create a demo site at www.dreametry.nl/ddfleurs . It was going well until I came across a problem with the main content background color. On the desktop the white background grows with the content, but not on a mobile device. The problems is the white background stops half way the content.
I tried using several styles, the only changes was with
.content { min-height: 650px; }
But then the background height is too much on mobiles.
Including height: 60%; to the previous code doesn't work.
This can be solved in two ways.
by giving
overflow: hidden
to class="unit-75 content"
or by clearing the div
<div class="unit-75 content" >
<!--All you HTML-->
<div style="clear: both"></div>
</div>
You can use overflow:hidden on the wrapper element (body tag, a particular div etc) to force it to adapt to the height of elements contained IF your layout uses floats.
I am trying to put an image with absolute position inside a .well div. I have to keep the image position absolute as I would like to create a responsive image using following CSS format. But the image appears out of the div scope.Here are my code for html and css
<div class="container">
<div class="well">
<img class="img-polaroid" src="http://testimage.png" />
</div>
</div>
.css
img{
position: absolute;
max-width: 80%;
top: 10%;
left: 10%;
}
As you can see I cant change the position property to 'relative'. I also tried to add a height:auto; property to .well class but it didn't go through neither.
Why is there a need for absolute positioning, you're using percentages which are relative units to the containing element. So therefore if your <img> tag is inside of the div then it's percentage width or height, let's say 50% will always be 50% the height or width of the <div> (this is presuming that the <div> is fluid).
Max-width is a good thing to be using.
Another technique for scenarios requiring finer tuning is to figure out the dimensions of the image and compare it to the size of the page. Let's say an image is 500 X 100 and the page width is 1200px wide document. The calculation to find out the percentage is (500 / 1200 ) × 100 = 41.66%
This is why in the Bootstrap.css file all widths are given in percentage.
Hope I've explained it all a bit to you.
I'm having problems avoiding my sidebar to overlap the main content of my blog on tumblr. I am using a premade template on tumblr which i have modified. The only ways I can position my sidebar in the top right corner, is by using an absolute or fixed position:
#sidebar{
position:fixed;
top:20px;
right:20px;
}
When using e.g. relative, the sidebar position itself in the bottom after my main content.
My page is built up like this:
<body>
<div id="page">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
</body>
Click here to see the page.
I tried putting my sidebar inside the page div, but there's a constraint on the width, which I would like to keep. Thank you in advance.
According to your latest comment, this should help your problem:
You could just set a min-width on your page, rearrange your markup a little, and remove some styles on the sidebar. If you leave everything like it is now, then the following will help:
Set min-width: 1250px; on your body tag
Move the sidebar element to before the page element
Remove position: fixed; from the sidebar element
This will prevent the menu from overlapping the page content and will add a horizontal scrollbar to the page when the user's window is less than 1250px. If you want to support a smaller min-width or if you have a problem with the background image becoming not centered at small resolutions, then minor modifications will be necessary.
I have a sidebar-nav as shown in the typical Twitter Bootstrap example.
Some of my sidebar menu items are long. Depending on the size of the window, the text wraps to the next line as shown in this jsfiddle as you change the width of the window. For presentation's sake, I'd like to set a minimum width for the sidebar-nav. I know there are media tags in Bootstrap's CSS, but I'm not sure that that's what I need to be doing. Basically, I want the content section to still be responsive, but have the sidebar menu to have a minimum width (or actually a locked width might be even better).
Is there a way to fix the width of the sidebarnav but make sure it still plays nicely with the content section of the page?
Get the nav out of the fluid-container, set its position to absolute and add a margin-left to the container. It's not Twitter Bootstrap's native positioning method, but it should work.
Markup:
<div class="navbar navbar-fixed-top">...</div>
<div class="the-sidebar">...</div>
<div class="container-fluid the-container>...</div>
CSS:
.the-sidebar {
position: absolute;
width: 220px;
}
.the-container {
margin-left: 240px;
}
This is the script on jsfiddle (i've used latest version of Twitter Bootstrap)
TIP:
If you want an always-visible sidebar, just change positioning to fixed
I am building a layout which includes a header, which is 40 px in height. Underneath this header a SWF resides that should take up the rest of the available space.
The best solution untill now has been working with a table, giving the first row 40px height and the second row a 100% height - but these rows still add up in Internet Explorer, resulting in a scrollbar appearing for 40 extra pixels - which should not be the case.
I tried using this: http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/ - it works fine if you have content that pushes down eventually but with a SWF with 100% in it, it will take over the whole page, or half the page (depending on putting the SWF in the content div or the SWF being the content div).
Before I resort to javascript to take care of this business I am wondering if someone else knows a better solution?
Try setting your header as static. So it floats over the main body, and set the main body to 100% height. Then give the body a 40px padding on the top.
A similar solution to forcing a footer to the bottom of a page might work
html, body{height:100%;margin:0;padding:0;}
#head{height:40px;background:blue;}
#wrapper{min-height: 100%;height: auto !important;height: 100%; margin: 0 auto -40px;background:red;}
#content{}
<div id="wrapper">
<div id="head">
</div>
<div id="content">
</div>
</div>