I'm trying to center and unordered list perfectly with the title of my website the title on top with the UL elements centered underneath.
The problem is that it does center, but not perfectly aligned with the overhead title. It is slightly to the right.
Here is my code:
.title{
text-align: center;
}
nav{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
background: blue;
}
li {
text-align: center;
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
background: red;
}
ul {
padding: 0;
}
The slight right-side bias is because of the default padding the entire list gets, not the individual list items. Setting it to zero eliminates the unnecessary offset.
I have to guess the HTML, but most likely you have a <ul> inside your <nav> element. Use this CSS:
nav > ul { margin-left: 0; padding-left: 0; }
Related
I've a button on the right side.
If I choose this button, a DIV opens with other elements.
It looks like:
[6x][5x][4x][3x][2x][1x][BUTTON]
What I want to achieve is that each element takes the width of the previous one and adds up to 50px.
<details>
<summary>CHA</summary>
<ul>
<li>ENG</li>
<li>FRA</li>
<li>ATA</li>
<li>AUT</li>
<li>BEL</li>
<li>BRA</li>
</ul>
</details>
summary {
position: absolute;
right: 0;
top: 0;
}
ul{
width: 100%;
right: 50px;
position: absolute;
}
ul li {
float: right;
margin-left: 1rem;
}
ul li a,
summary {
color: #fff;
display: flex;
width: 50px;
height: 100%;
justify-content: center;
align-items: center;
}
The problem here is that the element - ul li a dont get the full height.
By adding to the ul li a element a position absolute all are at the same position/place.
So I thought I can use the nth-of-type(x) css statement like:
ul li a:nth-of-type(n){
right:calc(50px+n)
}
Or somehow like that - I know that this is not the right syntax.
Is it possible, am I thinking wrong, how to?
Here is the PEN:
https://codepen.io/User-123456789/pen/MOzdLp
I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
I'm having an issue with centering some li's that are inside of a ul element. Here is the relevant code:
ul.nav {
width: 1000px;
margin: 0 auto;
list-style-type: none;
}
.nav li {
float: left;
width: 300px;
}
#government {
clear: left;
}
I've been trying various things to make it work like making the li's have text-align: center; or giving them margin: 0 auto; but nothing seems to be working. I've spent hours trying to figure out the problem, so any help would be very much appreciated. Here is a screenshot of what my situation looks like:
I'm trying to get the li's to be horizontally centered inside that ul. I can't just do the math and set the margin because the width will be dyanmic and probably won't be the same for each li.
This should give you a good start:
ul.nav {
width: 1000px;
margin: 0 auto;
list-style-type: none;
text-align: center; /* to center horizontally child inline elements */
}
.nav li {
display: inline-block; /* Set to inline-block instead of float: left */
width: 300px;
}
Update
To get into to rows, make your ul element have a smaller width.
e.g.
ul.nav {
width: 800px; /* Smaller width */
margin: 0 auto;
list-style-type: none;
text-align: center; /* to center horizontally child inline elements */
padding-left: 0;
}
Fiddle
Here's the gist
The links are separated in multiple lines,
I want it at the same line and centered
Expected result
Current
Try this one here
ul {
display: block;
text-align: center;
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
}
I'm building a site for mobile devices and therefore has a fluid layout.
My navigation list looks like this:
<ul>
<li>home</li>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
Problem is, the first list item needs to be 100px only (left aligned always), and the other 3 split evenly, therefore is it possible to have even width for all list items except for the first one (without using javascript).
This is the simplest way I could think of:
ul { overflow: hidden; padding-left: 100px; position: relative; }
li { width: 33.33%; float: left; }
li:first-child { position: absolute; top: 0; left: 0; width: 100px; }
The main idea is taking the first li out of the flow (position: absolute) and adding a padding-left to the ul (space for the first li). Now if we set the percentage width for the other lis, they will take up the remaining space.
And here is a jsFiddle Demo. I added a red border on the ul which shows that because of the percentages lis will not accurately fill it.
I am unsure what mobile browsers you want to support, but except :first-child (which can be worked around by adding a class on the first list item) I assume they must support everything I used.
hmm a bit cludgy - but this seems to work, it does require nesting the list (second 3 links in separate list) and a span for the "home" link, theory is that you need the first link to float, width: 100px, then you need the second group not to float and have their overflow hidden so the group take up the remaining space.. then you float the 3 links # 33% inside the non-floated container
Example : HERE
CSS:
div {
width: 90%;
margin: 0 auto;
}
ul {
margin: 0; padding: 0; list-style: none; /* reset */
float: left;
width: 100%;
}
li {
float: left;
width: 100%;
text-align: center;
}
li span {
float: left;
width: 99px;
background: #eee;
border-right: 1px solid #000;
}
ul ul {
float: none;
overflow: hidden;
width: auto;
}
li li {
width: 33%;
background: #ffe;
border-right: 1px solid #000;
}
HTML:
<div>
<ul>
<li><span>home</span>
<ul>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
</li>
</ul>
</div>
For what it's worth, this was what I was thinking of when I made my comment on your question:
http://jsfiddle.net/4t9fV/
ul {
display: table;
width: 100%;
background: #ccc;
table-layout: fixed
}
li {
display: table-cell;
text-align: center;
outline: 1px dashed red
}
li:first-child {
width: 100px
}