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/
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;
}
Hi I'm looking to set up a centered footer that uses list items with unorganized lists inside of each list item. If I try using float:left I get them to be inline with each other but it is no longer centered. The code i currently have looks like this:
css:
#charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
#box1 {
margin:0 auto;
background-color:#00FF66;
}
#mainList {
list-style-type:none;
text-align:center;
display:inline;
}
.mainLI {
display:inline;
}
html:
<div id="box1">
<ul id="mainList">
<li class="mainLI">
<p>Title</p>
<ul class="subList">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
<li class="mainLI">
<p>Title</p>
<ul class="subList">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
</ul>
</div>
It's beacuse content is centered by text-align within container, that is 100% width of container as default, but less if it's floating.
Anyways i don't understand what you want to achieve? You want to center list item but float it in the same time? Could you precise yourself more?
css:
#charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
#box1 {
margin:0 auto;
background-color:#00FF66;
}
#mainList {
list-style-type:none;
text-align:center;
}
#mainList li, .mainLI p {
display:inline;
}
Example
Your problem with centering lies in the fact that the parent element in which you are centering children must be a block element. See MDN
I would like the navigation links on this page to each appear on their own line:
A. Without using "display:block" - as that makes the hover animation take up the full width of the container, not just the <a> element.
B. Without using <br> tags, as I am eventually looking to create a responsive site with a horizontal navigation on smaller screens.
Thanks for your help.
Have you tried float:left; clear:left ?
wrap you navigation in ul, li:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
css:
ul {list-style: none} li {display: block}
This lets you style your anchors accordingly while forcing them to break lines.
You can wrap the <a>'s in <div>'s and apply CSS to the div's to float:left, clear:left;
div.anchorContainer
{
float:left;
clear:left;
}
<div class="anchorContainer">
text
</div>
<div class="anchorContainer">
text
</div>
<div class="anchorContainer">
text
</div>
You can just apply word-break: break-all;
.parent-block {
max-width: 250px;
width: 100%;
border: solid 1px black;
}
.long-link {
word-break: break-all;
}
<div class="parent-block">
<a class="long-link">https://stackoverflow.com/questions/10000674/make-an-a-tag-move-onto-a-new-line-without-using-displayblock</a>
</div>
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.
Is there a way to do this?
When using navigation that can change the number of items often, it would be nice not having to calculate the with and updating the css, but just having a solution that works.
if that's impossible (I'm assuming it is) can anyone point me to a javascript that can do this?
edit
re: provide code some code
basically I'm working with, what I think is, the most typical setup
<div class="main">
<div class="nav">
<ul>
<li>short title</li>
<li>Item 3 Long title</li>
<li>Item 4 Long title</li>
<li>Item 5 Long title</li>
<li>Item 6 Extra Long title</li>
</ul>
</div>
</div>
edit
.main {
width:100%;
text-align:center;
}
.nav {
margin:0 auto;
}
.nav ul li {
display:inline;
text-align:left;
}
the issue I've found with this/these solutions is that the content is nudged to the right
adding some right padding (of 40px) seems to fix this across the browsers I'm checking on (O FF IE).
.nav {
margin:0 auto;
padding-right:40px;
}
I don't know where this value is coming from though and why 40px fixes this.
Does anyone know where this is coming from? it's not a margin or padding but no matter what I do the first about 40px can not be used for placement.
Maybe it's the ul or li that's adding this.
I've had a look at the display:table-cell way of doing this, but there's that complication with IE and it still has the same issue as the other solution
edit (final)
okay I've tried some things in regard to the indent.
I've reset all padding to 0
*{padding:0;}
that fixed it, and I don't need to offset the padding
(I think I'll leave my whole process up so if anyone comes across this, it'll save them some time)
thanks for the comments and replies
<div class="nav">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
</div>
<style>
.nav { text-align:center; }
.nav ul { display:inline-table;}
.nav ul li {display:inline;}
</style>
That's all,
Change number of li , but ul will always be centre aligned
make div with class="nav"
place ul inside it, ul will be center aligned always
hard to tell without seeing exactly what your trying to achieve but this should at least help...
Your CSS
#main {
width:100%;
text-align:center;
}
#nav {
margin:0 auto;
}
#nav ul li {
display:inline;
}
#content {
text-align:left;
}
Your HTML
<div id="main">
<!-- Your Navigation Menu -->
<div id="nav">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</div>
<!-- Your Content Area -->
<div id="content">
Lorem ipsum dolor sit amet, consectetur ...
</div>
</div>
If you want to center a div in its container, try setting margin-left and margin-right of the container to auto.
It looks like somebody had the same problem you did. Hopefully this is better than my first recommendation. :)
http://www.leveltendesign.com/blog/nickc/centering-a-css-menu-without-width-aka-shrink-wrap
How about
#form1 {text-align:center}
#menuWrapper{display:inline-block;text-align:left}
Also, it woudl be more accessible to mark up your menu as follows:
<form id="navWrapper">
<ul>
<li><input></input></li>
...
</ul>
</form>
and use
#navWrapper {text-align:center}
#navWrapper ul {display:inline-block;text-align:left}
#navWrapper li {display:inline}
here a nice workaround for centering a div with no width.
is tableless and is working in any browser!
(EDIT: dead link replaced with one from archive.org. BTW, the technique described there is: wrap your DIV in a SPAN to make it inline.)
Based on what I believe you are asking, you want to center a div dynamically, given that the width will change based on how many menu items are visible. I assume you would also like this to dynamically center itself on resize as well. This can be done with some simple javascript as shown below. I have mocked up an example you can play with, works in IE and FF. The javascript is the key. Also of note, although not part of your question, it may make sense to control the min-width on resize...ping me if you run into that.
<html>
<head runat="server"></head>
<body onload="centerMenu()" onresize="centerMenu()">
<form id="form1" runat="server">
<div id="menuWrapper" style="display:inline; height:20px;">
<input type="text" value="menuItem" />
<input type="text" value="menuItem" />
<input type="text" value="menuItem" />
<input type="text" value="menuItem" />
</div>
</form>
<script type="text/javascript">
function centerMenu()
{
//Wrap your menu contents in a div and get it's offset width
var widthOfMenu = document.getElementById('menuWrapper').offsetWidth;
//Get width of body (accounting for user installed toolbars)
var widthOfBody = document.body.clientWidth;
//Set the width of the menu Dynamically
document.getElementById('menuWrapper').style.marginLeft = (widthOfBody - (widthOfMenu)) / 2;
}
</script>
</body>
</html>