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
Related
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'm trying to dispaly some element in single line inside header of my blog, but i have problem with logo in it.
here is my code:
CSS:
.list {
margin:0;
padding: 0;
list-style-type: none;
display: table;
table-layout: fixed;
width:100%;
}
img {
padding: 0;
}
.list>a {
display: table-cell;
border-left:1px #47c9af solid;
text-align: center;
color:#47c9af;
height:30px;
text-decoration: none;
}
.container {
background-color: white;
color:#47c9af;
height:100%;
font-family: WYekan !important;
}
HTML:
<div class="container">
<ul class="list">
</li>
<li></li>
<a href='#'><li><h1 >Header Of My Blog </h1></li></a>
<a href='#'><li><p>SubHeader</p></li></a>
<a href='#'><li><h3></h3></li></a>
</ul>
</div>
The result is something like this:
As you can see logo is not in order with other elements, what should i do?
Thanks.
Fixing the Alignment
To fix the alignment you simply need to introduce the vertical-align property to align everything to the top:
.list {
...
vertical-align: top;
}
Making your HTML Valid
A problem with your markup is that ul elements must only contain li children. Your current ul element has a children which have li elements inside them - this is invalid. Wrap your a elements within the li elements instead:
<ul>
<li>
<a></a>
<li>
</ul>
Making your HTML Semantic
You need to ask yourself some questions about your current markup:
What is this a list of? Why are you using the ul element instead of the header element?
Why are you using a p element as a "SubHeader"?
First, let us rearrange your HTML, so the code is valid. A list (ul) has list-items (li). The list items may contain anchors, paragraphs, headings, etc. Not the other way around.
Then we'll need to change the CSS a bit, so the anchors get the right color.
But the most important thing is the vertical alignment of the table-cells. By adding vertical-align to the list items, they'll be in the right alignment.
.container {
background-color: white;
color:#47c9af;
height:100%;
font-family: WYekan !important;
}
.list {
margin:0;
padding: 0;
list-style-type: none;
display: table;
table-layout: fixed;
width:100%;
}
img {
padding: 0;
}
.list>li {
display: table-cell;
border-left:1px #47c9af solid;
text-align: center;
height:30px;
vertical-align: middle;
}
.list li a {
color:#47c9af;
text-decoration: none;
}
<div class="container">
<ul class="list">
<li><img src="http://placehold.it/150x75" /></li>
<li></li>
<li><h1>Header of my blog</h1></li>
<li>Subheader</li>
<li><h3></h3></li>
</ul>
</div>
You can define your .list>a and img tag vertical-align:top;
.list>a, img{
vertical-align:top;
}
.list > a {
vertical-align: bottom;
}
as you have wrap everything inside the anchor tag, we should target the a tag
here's a Jsfiddle
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>
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; }
I know this is pretty simple, but I've been fussing with this for hours now.. In my header, I want my logo and my nav to be on the same line... basically, I have this HTML:
<div class="menu">
<div class="ct-header-line"></div>
<img class="logo" src="images/clinictechlogo.png">
<ul class="nav">
<!--common features, coded? or static?-->
<li class="active">Home</li>
<li>Appointments</li>
<li>Prescriptions</li>
<li>Patient Records</li>
<li>Bills</li>
<!--special features, coded.....-->
<li>Charts</li>
<li>something</li>
</ul>
</div>
And here's the some of the CSS for the header part:
.logo {
padding: 20px 10px 10px 10px;
display: inline;
}
.menu {
background: #4F97BD url(images/headerbg.jpg) repeat;
}
.nav {
list-style:none;
margin:0;
}
.nav li {
display: inline;
}
The result is that the logo appears on one line, and the ul nav appears on the next...
You need to give the <ul> display: inline-block. If the logo's height is fixed, you might also want to give the <ul> a suitable line-height so that the options appear vertically aligned with regards to the logo.
Try adding to the logo:
.logo {
float: left;
width: 20%; //Or whatever the width is
}
This should make the wrap up next to it. If it doesnt you may need to add somethign similar to the
.nav {
float: left;
width: 70%;
}
Check this one: Inline Logo and Nav
just float both the .logo and .nav to left and have clear fix at the bottom.
.logo {
padding: 20px 10px 10px 10px;
display: inline;
float:left;
}
.menu {
background: #4F97BD url(images/headerbg.jpg) repeat;
}
.nav {
padding: 20px 10px 10px 10px;
list-style:none;
margin:0;
float:left;
}
.nav li {
display: inline;
}
.clear{
clear:both;
}
To make them align correctly(vertically) apply the padding to nav same to what you were using on the image..
hope this helps
Merx..
Try this...
.logo {
margin:0;
padding:0;
display:inline;
}
Take a look http://jsfiddle.net/vZZDJ/
Good Luck...)