I'm entirely new at this, so if I have stated an unclear question, please ask for clarification.
I have difficulties with placing a ul block at the bottom of a div block. I have researched the answers to the questions that are very similar to mine, but for some reasons, their suggestions and approaches do not work on my codes. I'll provide the following link: http://jsfiddle.net/bKh5L/
HTML
<div id='tabs'>
<ul>
<li>Home</li>
<li>About Me</li>
</ul>
</div>
CSS
#tabs{
position: relative;
}
#tabs > ul{
height: 100px;
position: absolute;
bottom; 0;
}
li{
display: inline-block;
padding-left: 50px;
padding-right: 50px;
margin-right: 25px;
margin-left: 25px;
background-color: blue;
color: red;
}
*{
margin: 0px;
border: 1px dashed lightblue;
}
Please, tell me where have I gone wrong and provide the elaborative explanation if you are feeling generous, so I can understand not just how the code work but the concept of vertical alignment itself.
Just remove the height from the ul and set it on the #tabs div:
#tabs{
position: relative;
height: 100px;
}
#tabs > ul{
position: absolute;
bottom: 0;
}
Also you have a typo error on bottom:. Check this Demo
Another option to keep the height on ul but without position:absolute :
#tabs > ul:before {
display:inline-block;
content:" ";
height:100%;
}
li{
vertical-align:bottom;
display: inline-block;
}
Another Demo
There's a typo in bottom;0;
Give the parent an absolute height as well.
Fixed fiddle.
I guess you want something like this seeing bottom:0px; which actually in your fiddle was written wrongly as bottom;0;:
See this fiddle
Related
Basically there should be a background color for the whole navbar across the screen, but it isn't showing up when I run the code. I would expect them to format everything inside the navigation div to that color, but it doesn't. I am fairly new to HTML5 and CSS3, so it could be a stupid mistake, but I have done some research and can't find any answers.
#navigation {
width: 100%;
height: auto;
background-color: #1d517e;
background: linear-gradient(to bottom, #003b6e, #1d517e);
}
#navigation ul {
display: inline-block;
margin: 0;
padding: 0;
}
#navigation ul.left {
float: left;
}
#navigation ul.right {
float: right;
}
#navigation ul li {
display: inline-block;
margin: 0;
padding: 6px 10px 5px 10px;
list-style: none;
background-color: transparent;
background-color: rgba(0, 0, 0, 0.12);
}
#navigation ul.left li {
float: left;
border-right: 1px solid black;
}
#navigation ul.right li {
float: right;
border-left: 1px solid black;
}
<div id="navigation">
<ul class="left">
<li>Electronics</li>
<li>Gardening</li>
<li>Cooking</li>
<li>Art</li>
</ul>
<ul class="right">
<li>About Us</li>
</ul>
</div>
<div class="clear"></div>
That's because you're floating the ul . You will need to clear them.
Try adding this:
#navigation:after {
clear: both;
content: " ";
display: block;
}
Also, ul.right needs to have li first and a inside li
Basically, since you're floating the uls, you must add float: left to their parent, #navigation too. Otherwise it will just have zero height and that's why the background isn't visible.
Replace height:auto; with height:29px; for #navigation
The reason why your background on the #navigation div is not showing on the navbar is because both of the children uls are floating. This makes it so that the parent div does not have a height. You can fix this by either adding a height to #navigation like so:
#navigation {
height: 29px;
}
or you can add a .clearfix class to the #navigation div with the css below:
.clearfix:after {
content: "";
display: table;
clear: both;
}
and add the class to your div like so:
<div class="clearfix" id="navigation"></div>
It is nice to create a clearfix class because you will be able to use this in your project everywhere else you have this issue. This will also allow you to get rid of that clear div you have at the bottom. If you want to learn more about clearfix here is the article I always refer too, CSS Tricks. There a lot of articles to read about how it works.
I'm assuming by a background colour, you're meaning the colour defined in the navigation div. Your navigation div has height: auto on it. You're floating the navigation links, but not clearing the floats or floating the parent. Because there is nothing for it to adjust based on, it takes up a height of 0 pixels by default.
Either float the parent:
#navigation {
width: 100%;
float: left; /* or height: 30px; */
background-color: #1d517e;
background: linear-gradient(to bottom, #003b6e, #1d517e);
}
Set a fixed height on the parent:
#navigation {
width: 100%;
height: 30px;
background-color: #1d517e;
background: linear-gradient(to bottom, #003b6e, #1d517e);
}
Or clear the floats (using overflow: auto is preferred):
#navigation {
width: 100%;
height: auto;
background-color: #1d517e;
background: linear-gradient(to bottom, #003b6e, #1d517e);
overflow: auto;
}
Which approach you go with is up to you :)
Hope this helps!
The clearer div should be placed inside the navigation bar just after the floated divs and the clear:both css should apply to it, currently it doesn't
add
#navigation {
overflow: hidden;
}
hope this helps
I am pretty new to web designing and upon doing some exercises, I encountered this problem: My nav tag was also hidden when I set header tag display to none. I tried adding display:block and clear: display to nav tag but did nothing. I read that position: fixed is hiding nav tag but as much as possible I do not want to remove it. I have not studied javascript yet, but let us say I did it with javascript, will the same problem occur or not? Please help me with this and suggest better ways to do it. Pardon my ignorance.
Here's my code for reference:
#header{
padding: 1.5px 0px;
font-size: 30px;
margin-top: -3%;
margin-bottom: -4%;
display: none;
}
#nav{
display: inline-block;
text-align: right;
position: fixed;
background: red;
width: 100%;
height: auto;
display: show;
}
Try to add this CSS style :
#header{ position:relative;}
#nav {display: block;}
I'm struggling to understand divs.
I want to have the 'nav' panel expand vertically as required. The second issue I have is that I can't seem to get padding to work. Any changes I make tend to end up with the 'section' div drop below the 'nav' div.
Please see below jsfiddle and code.
Thanks in advance.
https://jsfiddle.net/s59cwy9s/
<div id="container">
<div id="nav">
test
</div>
<div id="section">
test
<br><br><br><br>
test
<br><br><br><br>
test
</div>
</div>
#container
{
width: 1156px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 10px rgb(0,0,0);
position: relative;
background-color: transparent;
height: auto;
}
#header
{
background-color:black;
color:white;
text-align: center;
padding:5px;
}
#nav
{
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
float:left;
padding: 15px;
display: inline-block;
height: auto;
}
#section
{
/*float: none;*/
padding: 10px;
display: block;
/*position: absolute;*/
/*overflow: auto;*/
background-color: white;
width: auto;
height: auto;
}
This may be due to the fact that your name bar doesn't span the height of the webpage completely. Try something like height :100% for the navbar. It might do the trick.
Here is some help :
https://jsfiddle.net/6ubhyL5k/
Some advices :
Take time to really understand how the page flow works (float : left/right) so you will then understand how padding and margin work when you have floating div
Use what you really know and don't improvise :)
Don't use br to make spaces between blocks (margin and padding are what you should use)
Take a look at how bootstrap works and never forget the responsive design
First I will recommend is using box-sizing attribute
It contains any type of padding or borders within the container's width and height. Find more about it Here. So i suggest:
*
{
box-sizing:border-box;
/* Use browser prefixes if u want support for other browsers */
}
Second is add a class to the container which contains elements wit float css attribute like clearfix and add this code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
or you can just create a div after the container containing elements with float css attribute and clear it.
<div class='clear'></div>
.class
{
clear:both;
}
Using float as much as it is useful brings about a problem in layout if not properly used. https://css-tricks.com/all-about-floats/
My Solution:
html,body {height:auto; width:100%; background:red; }
* { box-sizing:border-box; margin:0; padding:0; display:block; position:relative; }
#container
{
min-width:800px;
height:auto;
margin:0 auto;
width:100%;
}
#nav
{
float:left;
width:30%;
padding: 15px;
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
background:white;
}
#section
{
float:left;
width:70%;
padding:0 100px;
background:yellow;
}
.clearfix:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Hope It Helps You. Though i recommend researching more on layouts since there's other layout which will give you less problem than floats.
Try
#section{
clear:both;
}
JSfiddle
clear:both allows floated divs to stop continuing on the same line with the other floated ones, and drop below.
Update: https://jsfiddle.net/s59cwy9s/2/
You could fix your issue by giving a margin-right to the #nav
http://jsfiddle.net/SyKnv/
I am trying to get rid of the additional space after each li item, to make the blocks the same size as their content. I tried to display them as inline, but that removes the bullets.
HTML
<div>
<ul>
<li>banana</li>
<li>orange</li>
<li>cherry</li>
</ul>
CSS
div {
width: 40%;
min-height: 50%;
border:1px solid black;
}
li {
border:1px solid black;
}
As mention in my comment you have to make ul display: inline-block; like this:
ul{
display: inline-block;
}
fiddle
try this code DEMO
div{
width: 40%;
min-height: 50%;
border:1px solid black;
}
ul {
margin:0;
padding:0;
}
li{
border:1px solid black;
list-style:inside;
}
CSS
ul{
display: inline-block;
}
Inline-Block
Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.
More Info Regarding Inline-block
Updated Fiddle
This is what my code looks like.
#container {
width: 584px;
height: 50px;
position: relative;
overflow: hidden;
}
#container ul {
position: absolute;
margin: 0;
padding: 0;
width: 3504px;
}
#container ul li {
width: 584px;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
}
<div id="container">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
As the title says, I want to center the ul vertically inside the div. I cannot change the above CSS rules because. I've been googling solutions and trying to find a way, but everything seems to collide with the rules I already have.
Any idea how to do this?
Would it help if instead of the #container div I used a table with one row and column?
Please use the search function in the future. The full answer is explained here; this is the code for your scenario:
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;}
.helper {
#position: absolute; /*a variation of an "lte ie7" hack*/
#top: 50%;
display: table-cell;
vertical-align: middle;}
ul{
#position: relative;
#top: -50%;
margin:0 auto;
width:200px;}
The three elements have to be nested like so:
<div class="container">
<div class="helper">
<ul><!--stuff--></ul>
</div>
</div>
http://jsfiddle.net/ovfiddle/yVAW9/
"Centring" a div or other containers vertically is quite tricky in CSS, here are your options.
You know the height of your container
If you know the height of the container, you can do the following:
#container {
position: absolute;
top: 50%;
margin-top: -half_of_container_height_here;
}
So we essentially place in the middle and then offset it using a negative margin equal to the half of the height. You parent container needs to have position: relative.
You don't know the exact height of your container
In this case you need to use JavaScript and calculate the appropriate margins (unfortunately you cannot use margin-top: auto or something similar).
More info here.
You can use flex to make your ul center vertical, horizontal or both like
.container{
background:#f00;
height:150px;
display:flex;
align-items:center;
/*justify-content:center;=>will make ul center horizontal*/
}
.container ul{
background:#00f;
}
<div class="container">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
If you can add jQuery library you could try this,
$(document).ready(function(){
// Remove li float
$("#container ul li").css("float", "none");
// Get the full height of the UL
var ulheight = $("#container ul li")[0].scrollHeight;
// Based on the height of the container being 50px you can position the UL accordingly
var pushdown = (50-ulheight)/2;
$("#container ul li").css("top", pushdown);
});
Now you can make the parent container display:flex and align-items:center. That should work. Although flexbox properties are not supported by older browsers.