I'm trying to make css-based highscores.
What I basically want, is a triangle shape with list-items.
like so:
1
2 3 4
5 6 7 8 9
I tried several methods to center my elements, but I just can't get it to work.
When I position the elements absolutely, they are layered on top of each other.
Margin-left: 10% and margin-right:10% aren't working either, it's just changing margins
between the list item elements.
I've included a jsfiddle, so you can take a look at it:
http://jsfiddle.net/us454/
hopefully someone can help me out!
Here is a possible solution. Either way. Do not style the UL for that reason. Better use the list items:
http://jsfiddle.net/y3p8f/
ul.triangle
{
margin: auto;
padding: 0;
display: block;
text-align: center;
}
ul.triangle li
{
border-radius:50px;
background-color:black;
display: inline-block;
width: 20px;
height: 20px;
}
HTML:
<ul class="triangle">
<li></li>
</ul>
<ul class="triangle">
<li></li>
<li></li>
</ul>
....
Update:
here is a slightly more clean version: http://jsfiddle.net/y3p8f/2/
This appends all items into one UL
ul.triangle,
ul.triangle li
{
margin: auto;
padding: 0;
}
ul.triangle > li
{
display: block;
text-align: center;
}
ul.triangle > li > ul li
{
border-radius:50px;
background-color:black;
display: inline-block;
width: 20px;
height: 20px;
}
You can use div and text align to center the content
See this example
http://jsfiddle.net/4gUrZ/
div { text-align:center; }
Related
I'm just starting to develop in HTML and CSS, and despite reading about the box model I am still having trouble with some of the basics of positioning.
I want to create a header navigation bar with three elements - one to the left of the page, one to the right, and one in the center. I want these elements to be inline with each other.
At the moment, they are represented in HTML like so
<body>
<div class="header">
<ul class="child">
<li id="lodestone">The Lodestone</li>
<li id="mogstation">The Mog Station</li>
<li id="user">User Account</li>
</ul>
</div>
I have then attempted to align them using the 'text-align' property in CSS.
.header {
background-color: #ffd9e7;
border: black;
display: block;
box-sizing: border-box;
}
.header ul {
display: inline-block;
}
.header > ul > li {
display: inline-block;
}
#lodestone {
text-align: left;
}
#user {
text-align: right;
}
#mogstation {
text-align: center;
}
However, instead of the expected result it produces this.
The three items are aligned, next to each other, on the left.
Can anyone recommend what css property I should be using to solve this problem? My research has shown there are ways of using float, but other people recommend against it, and when I try I get issues with the text overflowing off the page.
If you give the ul and lis a width and (100 ul /30 for li s for example) then they should display correctly
.header {
background-color: #ffd9e7;
border: black;
display: block;
box-sizing: border-box;
}
.header ul {
display: inline-block;
width:100%;
}
.header > ul > li {
display: inline-block;
position:relative;
vertical-align:top;
width:30%;
}
#lodestone {
text-align: left;
}
#user {
text-align: right;
}
#mogstation {
text-align: center;
}
<div class="header">
<ul class="child">
<li id="lodestone">The Lodestone</li>
<li id="mogstation">The Mog Station</li>
<li id="user">User Account</li>
</ul>
</div>
I added vertical-align:top; but it's excess to requirements, you could take that out..
Fiddle
Hope this helps
Take a look at CSS Flexbox for a different approach to layout your elements
header{
display: flex;
justify-content: space-around;
}
<header>
<div>A</div>
<div>B</div>
<div>C</div>
</header>
Why not make the li elements a third of the width?
First make the ul 100% width, you'll also need to ensure there's no padding on the right of the ul as it tends to be automatically added by browsers:
.header ul {
display: inline-block;
padding: 0;
width: 100%;
}
Then have each li 33%
.header > ul > li {
display: inline-block;
width: 33%;
}
Style the rest as required
I have a menu that's generated by a plugin, and I need it to span 2 lines instead of 1 like so:
Example:
I Cannot:
I can't wrap certain li in a div/span
I can't add a <br> where I need the break
I Tried:
I tried adding a Pseudo Element to "Happy" with display: block to create a line break, but couldn't get it to work the way I intended
jsFiddle: http://jsfiddle.net/3xy405oj/
Using content: "\A"; white-space: pre; on the after pseudo-element might help you
JSFiddle
Just add a width to the ul :
ul {
width: 40%;
}
To make it pretty, remove text-align center from the li and add it to ul instead.
Then add margin 0 auto to ul to make it pretty :)
ul {
text-align: center;
margin: 0 auto;
}
Fiddle - http://jsfiddle.net/kq03kzwt/
You can do this:
CSS
ul {
width: 40%;
text-align: center;
margin: 0 auto;
padding: 0;
}
li {
display: inline-block;
margin: 0 2%;
text-align: center;
width: 20%;
}
HTML
<ul>
<li>Crazy</li>
<li>Awesome</li>
<li>Smile</li>
<li class="break-after">Happy</li>
<li>Jitter</li>
<li>Cool</li>
<li>Mango</li>
</ul>
DEMO HERE
You can just float all the elements inside the ul and use clear: left.
<ul>
<li>Crazy</li>
<li>Awesome</li>
<li>Smile</li>
<li>Happy</li>
<li class="break">Jitter</li>
<li>Cool</li>
<li>Mango</li>
</ul>
ul {
width: 100%;
text-align: center;
overflow: auto;
}
li {
margin: 0 5px;
float: left;
}
.break {
clear: left;
}
I have following CSS code:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
display: block;
width: 100%;
height: 100%;
}
nav li :hover {
background-color: var(--main-color);
color: white;
}
Which makes elements in my navbar look like this:
But there's actually 4 items, not 6. I'll add some padding in <li>:
But when I hover over the first item, I have this ugly white space from both sides of it. Margin does exactly the same thing. Let's remove margin/padding and set <li> width manually to 120px:
First two items are now formatted somehow acceptably, but items a and b take visually far too much space than necessary. What I aim for would be something like this (made in image editor):
In other words, I'd like my <li> elements to have their width adjusted to their content with extra padding, while child <a> elements still take up 100% of <li> space. Any ideas?
Edit
I've updated updated the JSFiddle that you've posted.
You need to change your a element to not have display:block (should be inline instead). Also, you don't need to specify width and height of 100%. Just make your padding: 15px for the a, and you'll have equal, well-spaced hover padding.
I adapted your code above and put it into a codepen, see here:
http://codepen.io/himmel/pen/BNJZoL
Here is how I changed your CSS:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
padding-left: 15px; ** add padding to both sides
padding-right: 15px;
display: inline;
}
nav li :hover {
background-color: brown;
color: white;
}
Try using table layout
body {margin:0}
nav ul {
padding:0;
margin:0;
width: 100%;
display: table;
}
nav li {
display: table-cell;
text-align: center;
}
nav li a {
background: #fafafa;
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px;/*or whatever*/
}
nav li :hover {
background-color: brown;
color: white;
}
<nav>
<ul>
<li>Item</li>
<li>Very long item</li>
<li>a</li>
<li>b</li>
</ul>
</nav>
The html
<div class="wrapContent">
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</div>
.wrapper is a fluid div, I am trying to center the floated left lists on the page. Basically be able to have same distances left/right for the first and last li in the ul.
Currently I do:
.wrapContent {
width: 100%;
margin: 0 auto;
}
.ul {
width: 100%;
margin: 0 auto;
}
.li {
width: 250px;
margin: 0 auto;
float: left;
}
Don't float them. (That's kind of an important detail you should've included in your question... :)) Use display instead.
ul {
text-align: center;
}
li {
display: inline-block;
text-align: left; /* optional */
}
Now the lis will each act like inline elements, but preserve the structure of their contents, and you can center them like anything else.
By the way, you don't need to use width: 100%; on block elements; they automatically expand to fit the width of their container.
I have a nested unordered list which has main content on the left, and I would like to add options which are floated right, such that they are aligned on the right regardless of the level of indentation.
<ul>
<li> Item 1 <span class='options'> link </span> </li>
<li> Item 2 <span class='options'> link </span>
<ul>
<li>Item 3 <span class='options'> link </span> </li>
</ul>
</li>
</ul>
I have the following css:
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 15px;
width: 400px;
}
.options {
float: right;
width: 50px;
}
When this is used however the options span is aligned to the right, but 1 line below the expected line.
How can I get the options span to line up with the list item?
TIA,
Adam
Instead of floating, you may want to try absolute positioning.
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 15px;
width: 400px;
position: relative;
}
.options {
width: 50px;
position: absolute;
right: 0px;
}
Using this CSS:
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 15px;
width:400px;
}
.options {
float: right;
width: 50px;
}
li li { width:385px}
This unfortunately requires your to define a width minus the padding. depending on your flexibility this will work. Tested in Chrome 3.0.
If modifying the HTML code is OK, you could enclose "Item 1" in a first span and:
float it to left (still floating .options to the right)
use display: inline-block on both span and text-align: right on .options, instead of floats (no compatible with Fx2 though, and only working in IE6/7 because span is an inline elements by default. Would not work with div)