I wanted to make the links centered on the screen rather than placed in a location to a certain number of pixels.
Here's my code:
CSS:
.HorizLinks {
position: absolute;
top: 77px;
left: 180px;
}
.HorizLinks ul {
margin: 0px;
}
.HorizLinks li {
margin: 0px 15px 0px 0px;
list-style-type: none;
display: inline;
}
This is the HTML on the webpage:
<div id="container"></div>
<div id="header"></div>
<div class="HorizLinks">
<ul>
<li>Header Link 1</li>
<li>Header Link 2</li>
</ul>
</div>
Use text-align:center on the <div class="HorizLinks">. Also, set the padding of the ul elements to be 0.
Your absolute positioning of the container div is pushing the whole div to the side itself to the right side of the page, so unless you remove that, the content inside will never be able to be in the middle.
jsFiddle here.
CSS:
.HorizLinks {
text-align:center;
}
.HorizLinks ul {
margin: 0;
padding:0;
}
.HorizLinks li {
margin: 0 15px 0 0;
list-style-type: none;
display: inline;
}
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 7 years ago.
I have a jsfiddle here - https://jsfiddle.net/1w5c1qq2/3/
I know this is simple but it's driving me mad
I have a div containing a ul list with a links in.
I need the links to be dead center, I need the gap between the links to be dead center.
Whatever I do the links are always slightly off.
Is there a way to have them dead center.
In the actual design it is obvious as the page is split with a color down the center.
<div class="block">
<ul>
<li>Link One</li>
<li>Link Two</li>
</ul>
</div>
Here is another way to do what you want. Using position: absolute;, left: 50%;, and transform: translateX(-50%); on the ul element.
*{
margin: 0;
padding: 0;
}
.block{
background: gray;
padding: 10px;
height: 20px;
}
ul{
list-style: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
li{
text-align: center;
display: inline-block;
}
a{
background: white;
padding: 5px;
}
<div class="block">
<ul>
<li>Link One</li>
<li>Link Two</li>
</ul>
</div>
Reference:
https://css-tricks.com/centering-percentage-widthheight-elements/
Seems pretty dead center to me. It looks like the 'handle' (the tiny mark) to resize the window in jsFiddle isn't centered, so maybe that's why you think it didn't work.
However, it may also be a font issue. If the text in the links doesn't have the same width, the links themselves also won't be the same width. In that case, the block is centered, but the space between them won't be exactly in the middle. To solve that, give the links both the same width.
If you want the space between them to be centered, regardless of the elements width, you can do that as follows:
Put the lis next to each other and give them a fixed width so they can be positioned properly. Then, you can use text-align left and right to align the links inside them.
In the example below, I've used floats and a self-clearing on the ul to do this, but you could also use display: inline-block for the lis.
*{
margin: 0;
padding: 0;
}
.block{
background: gray;
padding: 10px ;
}
ul{
text-align: left;
list-style: none;
}
li{
display: block;
float: left;
width: 50%;
}
/* Right-align the link in the left li. */
li:first-child {
text-align: right;
}
/* Clear the floated li's */
ul::after {
content: "";
clear: both;
display: block;
}
a {
background: white;
padding: 5px;
margin: 0 5px;
width: 110px;
}
<div class="block">
<ul>
<li>Link One</li>
<li>Link Two with a longer text.</li>
</ul>
</div>
Here's the solution: https://jsfiddle.net/1w5c1qq2/8/. It boils down to giving both boxes each 50% of the available width, and aligning the text within those boxes to the right and the left, respectively. Always mind implicit white-space with display-inline-blocked boxes!
<div class="block">
<ul>
<li>Link One</li><!--
--><li>Link Two is wider just for show</li>
</ul>
</div>
And:
*{
margin: 0;
padding: 0;
}
.block{
background: gray;
padding: 10px ;
}
ul{
list-style: none;
}
li{
display: inline-block;
box-sizing: border-box;
width: 50%;
text-align: right;
padding-right: 3px;
}
li:last-of-type {
text-align: left;
padding-left: 3px;
}
a{
background: white;
padding: 5px;
}
Hi I'm trying to style the tab sample i found on net.
here is the sample :
<html>
<head>
<meta charset="utf-8">
<title>Tabs 2</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
}
#header a {
display: block;
padding: 0 1em;
}
#header #selected {
position: relative;
top: 1px;
background: white;
}
#content {
border: 1px solid;
clear: both;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>
the problem is i want to add the background color for header and set it's width to 100%.
see the difference when i add this css code:
#header{
width:100%;
background-color:#b6ff00;
overflow:hidden;
}
before ( selected tab is merged with content )
after ( selected tab has a border-bottom )
how to fix this?
It's because you are adding overflow:hidden to header and
you haven't cleared floats
below are solutions
Clear:both
Here is definition of clear
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats you'll have to command the browsers somehow to stretch up the container all the way.
Here is your solution and A Quick Fix
"Clearing", 21st Century Style
ul:after {
clear: both !important;
content: ".";
display: block;
float: none;
font-size: 0;
}
Here is Fiddle http://jsfiddle.net/krunalp1993/g9N3r/4/
Older Solution
HTML
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
<li class="clear"></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
CSS
#header {
background-color: #B6FF00;
overflow: visible;
position: relative;
top: 1px;
width: 100%;
}
.clear { clear : both; float:none !important}
Fiddle http://jsfiddle.net/krunalp1993/g9N3r/3/
I have just shown a quick clearing technique there are many others
You can see more ways http://www.quirksmode.org/css/clearing.html
Hope it helps you :)
I've the following:
HTML (partial):
<div id="page">
<div id="header">
<div id="logo">
<img src="logo.jpg" alt="Logo" />
</div>
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<!-- how many <li>s as need -->
</ul>
</div>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
CSS:
html, body {
min-height: 100%;
}
#page {
position: absolute;
right: 0;
width: 97%;
height: 100%;
overflow-y: auto;
text-align: center;
}
#header {
position: relative;
height: auto;
min-width: 100%;
margin: 10px auto 0 auto;
display: inline-block;
overflow-x: hidden;
}
#header #logo {
float: left;
}
#header #menu ul {
list-style-type: none;
}
#header #menu ul li {
height: 2em;
line-height: 2em;
}
#content {
position: relative;
margin: 20px auto 0 auto;
width: 95%;
}
#footer {
position: relative;
margin-top: 20px;
width: 100%;
height: 260px;
}
Explaining:
There is a container div (#page). Within it there are #header, #content and #footer.
#header space is split horizontally between #logo and #menu.
The problem:
I need to position #menu at bottom of #header but yet at side of #logo. I'm not getting it without break layout. How can I do this?
When new menu items be added, they should make menu go up, not down, this is why I need to do what I said above. The fist image below illustrates how I want to do and second how it actually is (lighter parts are within the darker and yes, it is a mobile layout):
First Image:
Second Image:
And please, no JavaScript, just pure CSS.
Thanks for attention, bye.
try changing display property of the #header to table, display of the #logo and #menu to 'table-cell' and verticaly align them to the bottom - it should do what you need
#header {
position: relative;
height: auto;
min-width: 100%;
margin: 10px auto 0 auto;
display: table;
overflow-x: hidden;
}
#logo {
display:table-cell;
vertical-align:bottom;
}
#menu {display:table-cell; vertical-align:bottom;}
selector in your css #header #logo is too much because identifiers cannot duplicate so #logo is really enough
here is working example: http://jsfiddle.net/6xBvR/1/
Add position:absolute; and bottom:0px; to #header #logo:
#header #logo {
float: left;
position: absolute;
bottom: 0px;
}
Should fix your problem. You could also truncate #header #logo to just #logo.
I wouldn't use float, I'd use display:inline-block and vertical-align:bottom
#logo {
display: inline-block;
vertical-align:bottom;
}
#menu {
display: inline-block;
vertical-align:bottom;
}
But you will need to set some widths.
I alos needed to remove padding from the ul
#menu ul {margin-bottom:0px}
Example: http://jsfiddle.net/pLeUD/
My code - Plunker
I try to create a fluid layout, my sidebar is made of a list of links. I want each <li> element to be a perfect square, the problem starts when I add the text inside. It seems to be adding height to my square and what I get is a rectangle. If you examine my code the dimensions of my list objects are
32px X 43px. How can I prevent from an inside text to extend the <li> elements?
And how can I make the text appear on the bottom left side of the <li> element?
My CSS:
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
}
.sidebar{
width: 5%;
display: inline;
float: left;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
background-color: oldlace;
}
.sidebar a{
display: block;
font-size: 0.5em;
}
My HTML:
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li>ANALYTICS</li>
<li>STYLES</li>
<li>VOTERS</li>
<li>GET STARTED</li>
<li>UPDATE</li>
</ul>
</div>
<div class="content">
<p>Blahahhhahhhahahahahahahhahahah blahahahh bluah</p>
</div>
You could use position: relative on the li and position: absolute on the a. Using absolute will cause the a element to not affect the li's dimensions. In this way you can also position it in the corner.
http://plnkr.co/edit/kcjCl1?p=preview
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
position: absolute;
bottom: 0;
left: 0;
}
I want to make a horizontal centered menu. I have tried using things like text align center and margin auto but can't get them to work. I do not want to use a table.
Here's my code:
<footer class="container">
<div class="row">
<div class="span12">
<ul>
<li>footer info 1</li>
<li>footer info 2</li>
<li>footer info 3</li>
</ul>
</div>
</div>
With the provided HTML:
ul { text-align: center; }
li { display: inline-block; } /* Don't float them */
http://jsfiddle.net/NpLR3/
The following will work without using text-align:
footer {
width: 100%;
}
.row {
position: absolute;
left: 50%;
}
.span12 {
position: relative;
left: -50%;
}
ul {
padding: 0;
}
li {
display: inline;
list-style: none;
margin-left: 1em;
}
li:first-child {
margin-left: 0;
}
The important bits are:
(1) that the outer container for the menu has 100% width,
(2) that the inner container is absolutely positioned at 50% left (which positions the left side of the menu at the center of the page), and
(3) that the menu is then relatively positioned at -50% left (moving it back to the left half its width, so that the center of the menu is now at the center of the page).
The other stuff is just cosmetic.
See working example.
Demo
.container{
background:#ddd;
width: 100%;
text-align:center;
}
li{
display: inline-block;
}
See http://jsfiddle.net/aCSgz/
Basically you need to set the ul and li to display: block.
ul { display: block; text-align:center; }
ul li { display: block; }
You need to set the display property on the LIs to inline-block and set the text-align on the UL to center.
HTML:
<footer class="container">
<div class="row">
<div class="span12">
<ul>
<li>footer info 1</li>
<li>footer info 2</li>
<li>footer info 3</li>
</ul>
</div>
</div>
</footer>
CSS:
footer {
background:#fdd;
}
div.row {
background: #dfd;
}
ul {
background: #ddf;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
li {
display: inline-block;
background: #fff;
margin: 0.5em;
padding: 0.5em;
}
http://jsfiddle.net/ghodmode/h2gT3/1/