I'm having this strange behavior of Twitter Bootstrap. I have a full-width layout which I divide a row into an 8:4 grid ratio.
Now, it happens to me that there is a little bit of the width being extended to the right, causing the horizontal scroll bar to appear. The extending bit is just around 20px, but I can't seem to find where it comes from.
I tried to set any possible padding to 0px to my html and body tag, but there's no luck.
Screenshot:
EDIT:
Some code, though I'm pretty sure you will not find anything interesting, quite a basic code.
HTML:
<body>
<div class="row">
<div id="left-pan" class="col-md-8">
<div id="control">
Lorem
</div>
</div>
<div id="right-pan" class="col-md-4">
Lorem
</div>
</div>
<script src="js/jquery-2.0.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/default.js"></script>
</body>
CSS:
html, body {
background-color: darken(#slate, 10%);
font-family: 'Carme', sans-serif;
width: 100%;
height: 100%;
}
.row {
height: 100%;
}
#left-pan {}
#right-pan {}
I could be wrong but using the Twitter bootstrap requires you wrap all "rows" in a container... see this link here
http://getbootstrap.com/css/#grid
I created a jfiddle http://jsfiddle.net/JgPaa/4/ with your code ..note if u remove the container you get the effect you mention...the scroll bars ..with the container ...no scroll bars. Now the container will not go full width because its padded..you can tweak that yourself via custom css.
from the bootstrap css
container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
Does that cover it?
Related
I've been trying all sorts of solutions offered here and other places, and none of them seem to work. I'd like to have an image take up the full width of the browser window, no matter the size (height scaled proportionally). But I need to place this image within a smaller container <div>, as it's part of dynamic content (the body of a blog post). I'm using bootstrap, but I don't think this problem is unique to the framework. Code:
<div class="container">
<div id="content" class="col-md-8">
{dynamic content in here}
<!-- still part of blog post -->
<div class="large"><img src...></div>
{more content}
</div>
</div>
CSS:
div.content { width: 70%; }
div.large img { width: 100%; }
If I put <img src="..." class="large"> inside the container div, it will, of course, be the size of that <div>. If I manually set the width of the image to, say, 1900px, it extends far out to the right of the main content, and I have to experiment to find an appropriate negative margin-left to center the image (margin: 0 auto doesn't center it). And of course that only works on a pixel-specific size. As soon as the window size changes, that code breaks.
If I set position: absolute;, the image appears on top of any following content, which isn't the behavior I want. I also tried this javascript using jQuery:
<script>
$("div.large img").css("width", $(window).width);
</script>
As well as a version without jQuery that iterates over the results of document.getElementsByClassName().
None of these approaches seem to give the results I want. Opening and closing the container would be a Bad Idea(tm), as this would break the isolation between the static layout and dynamic content, and so break the whole site if the static part of the layout changes and the blog posts aren't all manually updated.
It works for me with position absolute
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0;
}
div#small{
width: 200px;
background-color: green;
}
div#fullscreen{
position: absolute;
width: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="small">
i am a small div inside your browser window
<div id="fullscreen">
i got the same width as your browser window
</div>
</div>
<div id="small">
i am a small div inside your browser window
</div>
</body>
</html>
I think you'll need to do something like this...
<div class="container">
<div id="content">
<div class="col-md-8 etc..."></div>
{ content in here}
</div>
<!-- still part of blog post -->
<div class="large"><img src...></div>
<div class="col-md-8 etc..."></div>
{more content in here}
</div>
</div>
</div>
Set the .container to 100%, the content to 70% and the .large to 100% too
Hi I am trying to fix my Jumbotron to be full width of the screen but somehow it need a 15px padding-left, padding-right. If I remove the padding the horizontal scrollbar appears with a 30px right margin. I am using the default Bootstrap ver 3.0.3 and default VS2013 layout. As per this link I removed the Jumbotron outside all .container my page looks sth like this
<body>
<div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
<div class="jumbotron specialjum">
<div class="over container body-content">
....page headers and other stuff
</div>
</div>
<p class="just container body-content">
... body text
</p>
</body>
/////////////////////////////////////////////////
body {
padding-top: 50px;
padding-bottom: 20px;
/*background:url("../Images/ps_neutral.png") repeat;*/
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.just {
text-align: justify;
}
.specialjum {
background: url('http://fc00.deviantart.net/fs70/i/2013/339/7/1/princess_kenny_korosu_by_theshadowstone-d6wu2zo.png') center;
color:#fff;
background-size: cover;
}
Edit:
Firefox + Chrome + IE10 results ===|================|===
Any Ideas on how to fix the layout? I haven't touch the Bootstrap CSS which I updated using Nuget.
Just to share my experience after creating an MVC web application in Visual Studio 2013 I could not get the jumbotron to stretch the width of the screen no matter what I did. I ultimately found that it was being blocked by a default **container body-content tag on the Views/Shared/_Layout.cshtml page. After removing the tag it displayed correctly. Hope that helps anyone with a similar situation to mine.
The solution was simple. This is how I div it:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
<div> <===================this Div wrapping jumbotron
<div class="jumbotron specialjum">
<div class="over container body-content">
....page headers and other stuff
</div>
</div>
<p class="just container body-content">
... body text
</p>
</div>
</body>
No changes to any part of the CSS. I don't know why it works, but it just works.
If you're just trying to remove the padding, then you'll want to put padding:0; in your .specialjum and make sure that the custom stylesheet is called after bootstrap. Otherwise add padding:0!important; if it needs to be called before. Also repeat this for margin-right: and add in width:100%; if it isn't stretching to the width of the page which I believe it should already.
See this jsFiddle
For anyone else that may end up here I have an alternative solution. I ran into this problem, but I just couldn't take my Jumbotron outside of it's container. What I did is just wrapped it in a <div class="row"></div>.
I'm still learning bootstrap so I don't know if this will cause any problems down the road, but for now it works pretty good.
In order to make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.
Another option in _Layout.cshtml (Where "Home" is the page you want to be full width):
#if (ViewData["Title"].Equals("Home"))
{
#RenderBody()
}
else
{
<div class="container container-main">
<main role="main">
#RenderBody()
</main>
</div>
}
Change width of .container to 100%:
container { width: 100% }
I have been working on a website for my self recently and ran into an odd problem. Whenever I would move a to the left the page would expand by the amount of pixels I had moved it left from the center. It doesn't hinder functionality but it's really annoying to have this 300-400 pixel space that you can scroll off to the side with. Maybe I'm doing something wrong but any help would be appreciated.
This is an example of what I am doing:
<html>
<body style="background-image: url('Background-Large.jpg'); text-align: center">
<div style="position:relative;top: -605px; left: 295px;"></div>
</body>
</html>
I'm not quite sure what you're trying to achieve here but if you put an 'overflow:hidden' on the body, it should allow you to position your div off the page without adding a scroll bar.
It's because your DIV is set:
left: 295px;
If you want a DIV to be in the center the first thing you should do is make a "main container":
<style type="text/css">
.wrapper {width:500px;margin:0 auto -1.5em;}
</style>
<div class="wrapper">
</div>
Then from there you can add elements inside that container thats now centered:
<div class="wrapper">
<div style="float:left;margin-left:-295px;">
</div>
</div>
Here's what I'd like to learn how to do with CSS.
I want a box:
I want the cards to be stacked directly on top of each over flat... Not vertically. that way I can use jQuery to tell the browser which card to show, and not have to reinject all the content.
I think GMAIL does something like this... You see an inbox, when you click a message it places the message on top of the inbox, keeping the inbox in the background.
Ideas?
Another way to distinguish a visible div from the hidden ones, would be by using e.g. the selector :first-child. Here's an example where you hide one div by changing it's position within the DOM tree and the CSS only let's the first child be visible.
<html>
<head>
<style type="text/css">
#container div { display: none; width: 400px; height: 250px }
#container div:first-child { display: block; }
</style>
<script type="text/javascript">
function hide(div)
{
var container = document.getElementById("container"); /* Or use jQuery */
container.appendChild(div);
}
</script>
</head>
<body>
<div id="container">
<div style="background-color: red" onclick="hide(this)">Click to hide</div>
<div style="background-color: blue" onclick="hide(this)">Click to hide</div>
<div style="background-color: yellow" onclick="hide(this)">Click to hide</div>
</div>
</body>
</html>
i'm not sure i understand your question,
but to have a bunch of divs in the same spot but different depths, you should:
give those divs the position attribute (absolute or relative, depending on your needs) to place them in the same spot
use z-index, to give them different depths to show and hide them.
Use JQuery to change the z-index as needed
It sounds like what you're after is to load all this content directly and then using Jquery to just show and hide stuff.
CSS:
.box {width: 100px; height: 100px;}
.box.hidden {display: none;}
HTML:
<div class="box"><!-- your default content --></div>
<div class="box hidden"><!-- your hidden content --></div>
<div class="box hidden"><!-- your hidden content --></div>
Then just use JQuery to show the <div> you want visible, and hide the others. It will behave as if they were all stacked on top of each other.
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):