Here is my css rule together with the markup:
<div style = "height:100%;">
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">
<div class='navbar-inner'>
<div class='container'>
<ul class="nav nav-list">
<div>
<li <?php if($page == 'upload_track'){ echo "class = \"active\""; }?>>Upload a new Track</li>
<li>View all blog post</li>
<li>View all tracks uploaded</li>
</div>
</ul>
</div>
</div>
</div>
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">
as of now I am making them an inline style so that it would be easy for me to change them. since switching texteditors is kind of a hassle for me.
How would I make that div take up all the available height? like the very bottom of the page. as of now it looks something like this
what I wanted to see is that the black div takes up all the available height in the page
Yes it can be done. Check out this example JSFiddle.
Basically I changed your HTML to this:
<div id="navbar">
<div class='navbar-inner'>
<div class='container'>
<ul class="nav nav-list">
<div>
<li>Upload a new Track</li>
<li>View all blog post</li>
<li>View all tracks uploaded</li>
</div>
</ul>
</div>
</div>
</div>
Essentially all I did was remove the outermost div (the one with only the style="height: 100%" on it) and gave the next div an id.
The CSS is as follows:
html, body { height: 100%; }
#navbar {
/* this was moved from being an inline style in the div: */
width:220px; margin-left: 200px;font-size:16px;
height: 100%;
}
Basically, in order for the navbar strip to use up 100% of the height, you need to make sure that the html and body actually take up 100% of the available height. (That is, 100% on #navbar is 100% of the height of the parent element; if the parent element isn't the height of the browser, then it doesn't work.)
Related
I have a menu, content and footer. Menu has fixed position. If I scroll it down to the end of page it becomes to overlay the footer. How can I force menu to move up if it starts to overlay the footer?
EDIT:
I use bootstrap classes.
My Html
<div class="container">
<div class="row">
<div class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li class="active">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
...
</ul>
</div>
<div class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section2">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
Css:
ul.nav-pills {
position:fixed;
}
You should use the bootstrap "affix" plugin.
http://getbootstrap.com/javascript/#affix
You can see an example here of how it works in combination with the scrollspy.
http://codepen.io/SitePoint/full/GgOzwX/ (Not my code)
Essentially what you do is tell it when to start and stop being a 'fixed' element.
$('#nav').affix({
offset: {
top: $('#nav').offset().top,
bottom: ($('footer').outerHeight(true) + $('.application').outerHeight(true)) + 40
}
});
change menu, content and footer to block.
add css :
.clearfix::before, .clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
and add class clearfix to your footer (highest hierarchy) and to class container.
This has probably been posted before, but I couldn't find a solution from searching. I'm new to HTML and CSS just started ~1 week ago, so if there is a solution an explanation would go a long way rather than modified code/solution.
So I am attempting to split a div into essentially two columns one of 25% width and the other 75% width. I haven't started doing the CSS yet hence why the styling is inline at the moment. The general div of 100% width displays fine now when I try to split this into two inner div's it seems to work the list i am trying to create displays correctly however the next column of 75% appears below the div. Why is this and is there anyway to fix it.
<div style="width:100%;background:orange">
<div style = "text-align:center;width:25%;background-color:red;">
A List
<ul>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
</ul>
</div>
<div style="width:75%;background:purple;">
dsfsdf
</div>
</div>
To make <div>s align next to each other they need to float.
CSS:
.container {
background-color: orange;
width:100%;
}
.leftColumn {
float:left;
background-color: red;
width:25%;
margin:0;
}
.rightColumn {
float:right;
background-color: purple;
width:75%;
margin:0;
}
.clear {
clear:both;
}
HTML:
<div class="container">
<div class="leftColumn">
A List
<ul>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
</ul>
</div>
<div class="rightColumn">
dsfsdf
</div>
<div class="clear"></div>
</div>
<div>Next content</div>
To continue with your code below you need an element that clears the floating.
Fiddle: http://jsfiddle.net/o7pd2fLf/2/
Create like this your html and css:
.orange-div{
width:100%;
background:orange;
float: left;
}
.red-div{
text-align:center;
width:25%;
background-color:red;
float: left;
}
.purple-div{
width:75%;
background:purple;
}
<div class="orange-div">
<div class="red-div">
A List
<ul>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
</ul>
</div>
<div class="purple-div">
dsfsdf
</div>
</div>
add style float:left to both the div with width 25% and 75% and run your code
add <div style="clear:both"></div>
You should do these things with Flexbox. If you're new, don't learn to use float for layout. Flexbox is made for this.
And use classes:
.container {
display: flex; /* makes container a flex parent and all its children flex children */
}
.left,
.right {
flex: 1; /* give 1 'part' of total width */
}
.right {
flex: 3; /* give 3 'parts' of total width */
}
Example: http://jsfiddle.net/rudiedirkx/tuojmn3g/
The flex property is very cool. If you give both children flex: 1, all children will be equal size: 50% (because 1 : 1). If you then give 1 of the children flex: 3, it will be 3x as big as the other (because 1 : 3). This gives you immense flexibility.
Flexbox is complicated but it's very well worth it to learn.
And a Flexbox bonus: equal height columns for free!
I'm using the Dropkick jquery plugin for custom select boxes.
It seems the absolute positioned dropdown always gets its width from the parent, and not the full width of the child list items.
How can I fix this?
See this jsfiddle.
Structure:
<label class="filter-lbl">
<div class="dk_container dk_theme_default" style="display: block;">
<a class="dk_toggle">
<span class="dk_label">
<nobr>status</nobr>
</span>
</a>
<div class="dk_options">
<ul class="dk_options_inner">
<li class="dk_option_current">
<a>state</a>
</li>
<li class="">
<a>longerwords</a>
</li>
<li class="">
<a>longerwords</a>
</li>
<li class="">
<a>longerwords</a>
</li>
</ul>
</div>
</div>
</label>
UPDATE:
It seems like the float on my .filter-lbl, is causing this.
It's because of the inline style of my .filter-lbl.
Is there a workaround to this?
Your dk options class does not need to be absolute unless you are looking for an overflow, absolute will ignore anything else.
Try this in your CSS
.dk_options {
/*display: none;*/
margin-top: -1px;
position: relative;
right: 0;
width:auto;
}
This should ensure the wrapper is the right width.
I am trying to put a solid white background behind this navagation bar so when it scrolls it does not show whats behind it.
CodePen Example of Bar | http://codepen.io/enoughsev/pen/vAJCo
<div id="header">
<img id="nav_img" src="Graphics/nav_img.svg" height="122" width="201" alt="Lanier Canoe and Kayak Club logo"/>
<div id="nav_bar" style:"color:#FFF;">
<header id="title">Lanier Canoe and Kayak Club</header>
<ul id="nav_words">
<li class="selected items">Home</li>
<li class="items">About Us</li>
<li class="items">Programs</li>
<li class="items">Rentals</li>
<li class="items">Contact Us</li>
</ul>
</div>
</div>
In theory I should be able to just put
#header {
width: 100%;
height: 150px;
padding-bottom:20px;
background-color:#FFFFFF;
border:
z-index: 3;
color:white;
}
and it work properly correct?
Give fixed position to header :- DEMO
#header {
position: fixed;
}
Since there is position:fixed currety navbar is not part of #header. So HTML structure should be altered a bit.
Add position:fixed to #header instead of nav bar
Add a paernt div for body content part and give top margin (margin top = header
height)
DEMO
Suppose we have the following markup for navigation bar using Twitter Bootstrap 2.0.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner pull-center">
<ul class="nav">
<li class="active">HOME</li>
<li>CONTACT</li>
</ul>
</div>
</div>
What is the best way to center .nav inside navbar-inner?
I only came up with adding my own CSS styles:
#media (min-width: 980px) {
.pull-center {
text-align: center;
}
.pull-center > .nav {
float:none;
display:inline-block;
*display: inline; *zoom: 1;
height: 32px;
}
}
Override the width of the container within the navbar from auto to 960px.
.navbar-inner .container {width:960px;}
To align it in the center with a dynamic width, I used the following:
HTML:
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
....
</ul>
</div>
</div>
CSS:
.navbar .navbar-inner {
text-align: center;
}
.navbar .navbar-inner .nav {
float: none;
display:inline-block;
}
Didn't test it, but I guess only display:inline-block; could be a problem, which is supported in all browsers except for IE7 and lower..
http://caniuse.com/inline-block
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Just using the container class as per http://twitter.github.com/bootstrap/components.html#navbar is centering my nav; however, it is fixed width and the formatting is off (the height of the nav bar is increased and its very possible something I'm doing wrong).
It would be nice to have the nav centered in a fluid, percentage-based width, with a minimum width, based on some minimum supported device screen size, and nowrap. (I'm a newbie wrt the responsive media queries and perhaps that is the better alternative to percentage based.)
Still investigating the minimum width and nowrap, but another alternative to the bootstrap container class fixed width is to add a child of the navbar-inner. I would like to know if there is a built-in bootstrap solution such as the row-fluid and spanN classes, but I haven't been able to get that formatted correctly within the nav either.
<div style="margin-left: 15%; margin-right: 15%;">
I have found this useful and clean:
<div class="navbar navbar-fixed-top">
<div class="container">
<ul class="nav">
<li class="active">HOME</li>
<li>CONTACT</li>
</ul>
</div>
</div>
where, css is:
.container {left:auto;right:auto}
This will center the div on the base of the width of your current navbar.
Responsiveness is managed apart.