I've got a simple <ul> which has a position of fixed, with the height set to 100% and overflow to auto. This allows me to scroll when the height of window becomes less than the height of the unordered list.
The only problem with this is that I want the unordered list to be 30px from the top of the page. When the scrollbars appear the bottom part of the <ul> is actually missing, and furthermore the bottom part of the scrollbar is missing due to the top margin.
Here's some sample markup:
<div id="sidebar">
<ul>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
</ul>
</div>
And the CSS
div#sidebar {
width:148px;
height:100%;
overflow:auto;
position:fixed;
margin-top:30px;
}
Any ideas how to get around this quirk?
EDIT: Argh, forgot to add position:fixed
The idea is to have the 30px on an element other than the height 100% element since the margin and the 100% add together to create the final element height (and: 100% + 30px > 100%). By putting a padding on a containing div, you can get the same effect.
Try this.
<div id="container">
<div id="sidebar">
<ul>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
</ul>
</div>
</div>
div#container {
padding-top:30px;
}
div#sidebar {
width:148px;
height:100%;
overflow:auto;
}
As Joel said, margin + height add together, so you should use a container.
Also, bear in mind any possible outer margins or paddings. This should work perfectly (tested on IE7 + Opera 10), provided you don't have any other markup bothering there:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<style type="text/css">
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.container {
padding-top: 30px;
width:148px;
}
#sidebar{
margin: 0;
width:148px;
height:100%;
overflow:auto;
background: red;
}
</style>
</head>
<body>
<div class="container">
<ul id="sidebar">
<li>...</li>
</ul>
</div>
</body>
</html>
Related
I'm trying to add padding above and below each element of a list. Here is my current code:
<html>
<head>Basic Report</head>
<body>
<p>
A<br>
<ul>
<li class="pad">B</li>
<li class="pad">C</li>
<li class="pad">D</li>
<li class="pad">E</li>
<li class="pad">F</li>
<li class="pad">G</li>
<li class="pad">H</li>
</ul>
</p>
</body>
</html>
This is my css:
p{
font-size:14;
}
* {
font-family: Calibri;
}
.pad {
padding-top:50px;
padding-bottom:10px;
}
Two questions:
The padding isn't working. Why is that?
Is there any way to add padding to all the elements with one bit of code? Or do I need to add class="pad" to each list item?
I'm a total noob at html and css btw. Thank you for your help.
There isn't any problem with your code. I recommend you select all
of the li tags just like this li {} instead of giving each of
them a class. you can also use padding-block for top and bottom and
padding-inline for right and left.
The reason why you can't see the padding might be that you haven't linked the right file or referenced the wrong address. Cause I copy pasted your code and it was working for me.
p {
font-size: 14;
}
* {
font-family: Calibri;
}
li {
/* padding-top: 50px;
padding-bottom: 10px; */
padding: 50px 0 10px 0;
/* you can also use padding-block for top and bottom and padding-inline for right and left */
}
<p>
A<br>
<ul>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
</p>
Your code is correct and padding should work maybe your CSS file is not linked properly.
an easier method of doing what you want to do is you can give a class to its parent and do it as I did in the code below.
.list li{
padding-top:50px;
padding-bottom:10px;
}
<body>
<p>
A<br>
<ul class="list">
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
</p>
</body>
There is no style difinition in the posted HTML markup. So I assume the CSS is in another file. You have to link it.
And by the way, <head>Basic Report</head> is not valid... It probably should be:
<head>
<title>Basic Report</title>
</head>
And then, you can add a link to the CSS file:
<head>
<title>Basic Report</title>
<link rel="stylesheet" href="mystyle.css">
</head>
do I need to add class="pad" to each list item?
You could do:
li{
padding-top:50px;
padding-bottom:10px;
}
to avoid the class addition in the HTML markup...
there is no problem with the padding it works, you can directly target the tag
CSS code:
*{
font-family: Calibri;
}
p{
font-size:14;
}
li {
padding-top:50px;
padding-bottom:10px;
}
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 need a horizontal nav bar with five pre-made images that will serve as links. The images are the same height but not exactly the same width, so I would need to be able to fine tune the horizontal position of each one and spacing between them, I don't want them just lumped together left or right or center.
This is what I have in mind:
http://i.imgur.com/3ZzKQhJ.jpg
How would I go about making this in CSS? I searched and as far as I understand it it's a pretty hard order for a beginner. Multiple horizontal divs? Display:table?
<html>
<head>
</head>
<style type="text/css">
#images ul li{
display: inline;
}
#i1{
background-color:red;
margin:20px;
padding:10;
}
#i2{
background-color:red;
margin:20px;
padding:10;
}
#i3{
background-color:red;
margin:20px;
padding:50;
}
</style>
<body>
<div id="images">
<ul>
<li id="i1"> image1</li>
<li id="i2">image2</li>
<li id="i3">image3</li>
</ul>
</div>
</body>
</html>
This is what i made u can use image instead of text and can set width and height
Use this html:
<nav>
<ul>
<li> <img src="img/one.png" alt="" class="image"></li>
<li> <img src="img/two.png" alt="" class="image"></li>
<li> <img src="img/three.png" alt="" class="image"></li>
<li> <img src="img/four.png" alt="" class="image"></li>
<li> <img src="img/five.png" alt="" class="image"></li>
Then put put this into CSS:
nav ul{list-style: none;}
You will get rid of the bullet points.
I'm trying to center the drop down in the code below, under its link. How is this done? I'll be doing the show/hide part using jquery, but I cannot get it to center under the letter r which will be a glyphicon later.
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
<style type="text/css">
.main{
width:300px;
background:cyan;
}
.right{
float:right;
position: relative;
white-space: nowrap;
}
ul {
list-style:none outside none;
padding:0px;
margin:0;
position:absolute;
right: 0;
}
</style>
</head>
<body>
<div class="main">
Left
<div class="right">
<span>R</span>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</div>
</body>
</html>
Put the R inside the ul as the first list element. Add some CSS modifications and you're done.
See my fiddle: http://jsfiddle.net/Wq2Ls/1/
You also don't need .menu container. All its CSS can be put in the ul.
I also replaced the .right span with a div. Span is an inline element and it is not the best practice to put an ul inside it.
EDIT:
If you set position:absolute to the ul it is not a block element and won't let the R position itself in the center even if the R has text-align:center. Also the R should be put in a div that it could fill the whole width of its parent.
Updated fiddle: http://jsfiddle.net/Wq2Ls/5/
I need to create a list in an html page and have it centered using CSS.
Here's an image of sorta what i want:
the little block list should be in the center, with all of the solid bullets and there text left aligned, but the block itself should still be in the center . i have my list created and the indents i want, and the entire list is left aligned.
basically i want the list in the dead center of the page, with the bullets all left aligned correctly with each other and the two circle bullets indented a bit.
how can i do this!?
I'm trying a div using margin-left/right set to auto but having no luck.
Have you tried margin:0 auto;
Usually this works to make stuff in center.
You could do something like this:
HTML
<div id="container">
<ul>
<li>One</li>
<li>Two</li>
<li>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
<li>Three</li>
</ul>
</div>
CSS
#container{
width:45%;
border:1px solid red;
padding:1em;
margin:0 auto;
}
Example: http://jsfiddle.net/7rrzZ/1/
Of course, you don't want the border and you will need to play with the bullets, but you get the idea.
This way it's centred exactly:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body { text-align: center; }
div { display: inline-block; }
li { text-align: left; }
</style>
</head>
<body>
<div>
<ul>
<li>text
<ul>
<li>indented text</li>
<li>indented text</li>
</ul>
</li>
<li>text
<ul>
<li>indented text</li>
<li>indented text</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
For me it worked by adding padding-left in CSS to the div element that contains the list. I used percentages (in my case 44%). You can adjust the percentages depending on the length of the text. Nothing more was needed for me to center the list.