Hello I'm trying to create a navigation bar which is made up of several div containers in one big navigation div.
I'm not sure if my approach is right but I tried to do it like this:
<div id="navigation">
<div class="innen">
<div class="logo">
<img class= "logo" src="logo.png" title="Logo"/>
</div>
<div id="bar">
<!-- Navigation Items are in here --!>
</div>
<div id="gamecard">
<!-- Another right floated Element !-->
</div>
</div>
<div class="unten">
<p>You are here: Main</p>
</div>
</div>
I wanted to push down the bar div to meet the height of the image by using top padding:
#bar{
padding-top: 80px;
}
But now it moves the down gamecard container too. How can I prevent this from happening?
I also added a jfiddle:
http://jsfiddle.net/Cv4p2/
try using position:absolute
<div id="bar" style="position:absolute; padding: 80px 0 0 0">
</div>
Padding is intended to add a cushion inside the container in which you implement it. It appears that you would benefit from using margin. You should replace "padding-top: 80px;" with "margin-top: 80px;" and you would achieve the desired effect.
Related
I'm trying to create a partial view for my home work and I have approximately done that, but there is one issue that is annoying me: Overflow-Y is not working in any case. I tried to set the height of my DIV tag in % and also in PX but in both cases it doesn't work.
I want to add the scroll option when content overflows the height of the nested DIV tag.
<div id="MainDIV" style="height:100%;width:100%;">
<div id="Header" style="width:100%;height:30px;text-align:center;background-color:#0094ff;padding:20px 0;font-size:25px">Welcome To my web site</div>
<div id="SideMenu" style="width:20%;background-color:#4cfbf6;display:table-cell;overflow-y:auto">Side Menu</div>
<div id="Content" style="width:80%;height:70%;background-color:orange;display:table-cell;padding:5px 10px;font-size:18px;overflow-y:auto">#RenderBody()</div>
<div id="Footer" style="width:100%;height:20px;background-color:#4cff00;text-align:center; padding:5px 0 ">Copyright © Someone Who developed it</div>
</div>
But this is not working at all, I even tried to set the height in PX. The height of DIV increase as content is added to the body.
table-cell don't seems to support overflow, so you need to add a child and set its height ( and set its overflow-y ).
<div id="MainDIV" style="height:100%;width:100%;">
<div id="Header" style="width:100%;height:30px;text-align:center;background-color:#0094ff;padding:20px 0;font-size:25px">Welcome To my web site</div>
<div id="SideMenu" style="width:20%;background-color:#4cfbf6;display:table-cell;overflow-y:auto">Side Menu</div>
<div id="Content" style="width:80%;background-color:orange;display:table-cell;padding:5px 10px;font-size:18px;">
<div style="height:200px;overflow-y:auto;">#RenderBody() -> "xxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxx"</div>
</div>
<div id="Footer" style="width:100%;height:20px;background-color:#4cff00;text-align:center; padding:5px 0 ">Copyright © Someone Who developed it</div>
</div>
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
I have this html code
<section id="sec" style="height:auto">
<div id="wrap">
<div id="con">
<h1>....</h1>
<div id="col1">
<p>... long texts ...</p>
</div>
<div id="col2">
<p>... long texts ...</p>
</div>
</div>
</div>
</section>
<div id="buttom" style="border-top: 1px solid rgb(153, 153, 153)">
<p>...text here ... </p>
</div>
my problem now is that the height:auto of section#sec did not work in many divs inside of it...
is there any way that wihout removing any divs, the height auto will be work?
height is not a property inherited from parent elements. If you want the divs inside section#sec to inherit this property, you need to make a selector for it in CSS (or set inline styles on each one manually).
section#sec div
{
height:auto;
}
But since height:auto is already the default, you may be looking for something else entirely.
I have a container div which has text within it that I want centered. I want to also insert a div into the container which floats to the right, like this:
<div id="container" style="text-align:center">
Text
<div id="child" style="float:right"></div>
</div>
Unfortunately what happens is that the text is no longer centered with respect to the container, but is instead shifted to the left by the width of the child.
Does anyone know how to get the text to center whilst keeping the div contained to the right?
Something like this...
<div style='position:relative;'>
my centered text
<div style='position:absolute;right:0;top:0'>
my right div
</div>
</div>
You can obviously throw the inline styles into CSS.
Posibly this?? Creating 3 equal parts. left middle and right??
<div id="container">
<div id="child1" style="float:right width: 30px;"></div>
<div id="child2" style="float:right width: 30px; text-align:center;">TEXT</div>
<div id="child3" style="float:right width: 30px;"></div>
</div>
I am trying the Blueprint CSS framework, and am having a hard time figuring out how to do the overall layout.
It seems Blueprint (as far as I have understood it so far) makes you use a set page width at 950px. I guess you could change that with some modification, but in any case there has to be some width, so that's fine. The problem is, even if I want the main content of the page to be 950px wide, I want 100% wide headers and footers.
So I have placed a header and a footer outside the main "container" div that's 950px wide. I set the header div to 100%. And then I have a "headerContent" div inside it (containing menu, logo, etc), which has a 950px width (span-24 in Blueprint terms). But I want the headerContent div to be centered within the header div.
I have always used the "margin: 0 auto" trick to do this, but for some reason it doesn't work at all now.
Here's the html:
<div id="header" class="blueheader">
<div id="headerContent" class="span-24">
<div id="logo" class="span-6">
<a href="/">
<img src="/images/expertinfo.png" width="230" height="62" />
</a>
</div>
<div id="menucontainer" class="span-14"><ul id="menu"><li>
<a href='/Services/Index'>TJÄNSTER</a></li>
<li>
<a href='/About/References'>KUNDER</a></li>
<li>
<a href='/About'>OM OSS</a></li>
<li>
<a href='/About/Contact'>KONTAKT</a></li>
</ul></div>
<div id="logindisplay" class="span-2">
Logga in
</div>
</div>
</div>
And here's the css for header and headercontent:
#headerContent
{
overflow: auto;
zoom: 1;
margin: 0 auto;
}
#header
{
width: 100%;
position: relative;
margin-bottom: 0px;
color: #000;
margin-bottom: 0px;
overflow: auto;
zoom: 1;
}
The overflow and zoom part is just another trick I read about to avoid having to use empty divs to clear containing divs, and I tried without them with no luck, so they have nothing to do with the problem.
Any ideas what I'm doing wrong?
You need to set a width the the #headerContent because without it defaults to width:100% if you place a 950px width to the div, you should be fine.
Found the answer: you shouldn't use span-24 on the headerContent apparently in the Blueprint framework, but rather the container class. Here's what worked:
<div id="header" class="blueheader">
<div id="headerContent" class="container">
<div id="logo" class="span-6">
<a href="#Url.Action("Index", "Home")">
<img src="/images/expertinfo.png" width="230" height="62" />
</a>
</div>
<div id="menucontainer" class="span-14">#Html.Raw(Html.Menu())</div>
<div id="logindisplay" class="span-2">
#Html.Partial("_LogOnPartial")
</div>
</div>
</div>
I cannot say I understand exactly why it didn't work before, and that worries me, because I am trying this framework to simplify layout, but this made it harder to understand. As far as I could see it should have worked with the first code too...