For the header of a website, I want to center an element and have to rows of links float against it from both sides. The rows are not the same length, so I can't just center the whole menu.
It's easier to see than to explain, so here's an image and a fiddle of the effect I want to achieve.
http://jsbin.com/katuroxi/11/edit
The fiddle however uses the new flexbox, which I would like to (if possible) avoid.
Is there a way to do this without them?
You can do it like this:
.parent {
display: table;
table-layout:fixed;
padding: 0;
font-size:0px;
width:100%;
}
ul {
padding: 0;
margin: 0;
}
.left, .right, .fix {
display:table-cell;
}
.left {
text-align: right;
}
li {
list-style: none;
display: inline-block;
border: 1px solid red;
font-size:16px;
}
.fix {
text-align: center;
border: 1px solid red;
width: 120px;
font-size:16px;
}
What this does is:
add display:table to the .parent and make it render with table-like logic and make it 100%.
add display:table-cell to .left, .right, .fix so it will render like a table cell. Because of this, each cell will take 33% of the table width.
add font-size:0px to the .parent to remove the white space between display:inline-block elements.
set the font-size back to the desired value in the elements where we have the text.
You could use all elements as display:inline; (or display:inline-block if you want some padding) and text-align:center; on the .parent
.parent {
padding: 0;
width: 100%;
text-align: center;
}
ul {
padding: 0;
margin: 0;
display: inline;
}
.left, .right, .fix {
display: inline;
text-align: center;
}
li, .fix {
list-style: none;
border: 1px solid red;
display: inline;
}
http://jsbin.com/katuroxi/12/edit
Related
I have a list, which leaves some spaces for indentation purposes and also provides dashed underlying. However the display properties used for this list do no match, causes the text to change line when a space is found. Here is a Fiddle.
The CSS:
.dashed {
display: block;
width: 100%;
height: 90%;
border-bottom: dashed 2px #54687a;
}
li {
display: table-row;
}
li span {
display: table-cell;
padding-right: 1em;
}
I tried to keep only one display property, but that failed. Anyone has a fix for this please?
Let's speak with images!
What happens now - it's the problem:
Desired result:
Remove the dashed class, and add these styles:
li span:after {
content: '';
position: absolute;
display: block;
width: 90%;
margin-left: -12px; /* compensate for padding-left: 12px; */
border-bottom: dashed 2px #54687a;
}
Fiddle
Are you trying to get it so that everything is in one line, like this?
Name: Charis Spiropoulos
If so, try this:
li span {
display: inline-block;
padding-right: 1em;
}
I just updated your fiddle
I added in your CSS
ul li span {
background: url("../img/arrow.png") 0 50% no-repeat;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/arrow.svg") 0 50% no-repeat;
list-style-type: none;
padding-left: 12px;
display: inline-block; // added or it can be inline
}
You'll likely have better luck with display: block; on the list items and display: inline-block; on the span. table-cell is causing the line to wrap around.
li {
display: display;
padding: 10px 0px; /* modify as desired */
}
li span {
width: 50px; /* Set width as needed so the names line up, even if the span text is different lengths */
display: inline-block;
padding-right: 1em;
}
http://jsfiddle.net/daCrosby/cmfL2643/18/
UPDATED - Final css should be like
ul li span {
background: url("../img/arrow.png") 0 50% no-repeat;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/arrow.svg") 0 50% no-repeat;
list-style-type: none;
padding-left: 12px;
}
.dashed {
border-bottom: 2px dashed #54687a;
display: block;
width: 58%;
margin-bottom:10px;
}
li {
display: table-row;
padding-bottom:5px;
}
li span {
display: inline-block;
padding-right: 1em;
width:23%;
}
Check the UPDATED demo - http://jsfiddle.net/cmfL2643/21/
Novice here! I'm looking to adjust some code for this site: http://www.lakeofstars.org
The footer area at the base of each page contains a series of logos. The ideal is to ensure that the logo images in the footer display correctly on mobile (if they are too large, some of the logos drop down below the designated footer background), but also to get them to center correctly on desktop - as you'll see, they are currently nudged to the left.
Here's the code as it stands:
#footer {
position:absolute;
bottom:0;
width:100%;
height:140px; /* Height of the footer */
background:#ffffff;
border-top: solid 3px #ffc600;
background-image:url(img/global/footer.gif);
background-repeat: repeat-x;
background-position:bottom;
}
#footer .structure {
height: 140px;
width: 94%;
}
#footer .structure li {
display: inline-block;
margin: 10px 10px 0 0;
float: left;
}
#footer .structure li img {
height: 65px;
width: auto;
}
You need to remove float: left; from #footer .structure li.
Try to use line-height and vertical-align: middle; for vertical aligment and text-align: center; for horizontal:
#footer .structure {
text-align: center;
}
#footer .structure ul {
line-height: 140px;
vertical-align: middle;
}
#footer .structure li {
display: inline-block;
}
Or you can use flexbox technique
#footer {
position:absolute;
bottom:0;
width:100%;
height:140px;
background:#ffffff;
border-top: solid 3px #ffc600;
background-image:url(img/global/footer.gif) scroll 50% 50%;
background-repeat: repeat-x;
background-position:bottom;
}
add for #footer .structure ul - text-align: center;
remove for #footer .structure li - float: left
#footer .structure ul {
text-align: center; < -- add
}
#footer .structure li {
display: inline-block;
vertical-align: middle;
margin: 10px 10px 0 0;
/* float: left;*/ <-- remove
}
Remove width:auto ... give values in percentage....
#footer .structure li img
I am looking to stack divs in 2 columns, like facebook timeline but I want to do it using pure CSS only. I currently have this but the margin is not correct on Content Four.
#container { width: 700px; background-color: green; }
.box {
display: inline-block;
width: 300px;
background-color: #cecece;
margin: 5px;
padding: 10px;
}
.odd { float: left; }
.even { float: right; }
The rule is that the divs will have equal widths, and should go to the shorter column when floating.
Is there a reliable pure CSS solution or do I have to resort to JavaScript?
You can try this
#container { width:700px; background-color: green; display:table; }
.box {
display:table-cell;
width: 300px;
background-color: #cecece;
margin: 5px;
padding: 10px;
}
I need help centering my CSS menu. Not sure why it isn't centered. I played around with the padding but it didn't change anything really. I know you just can't center it like you can with HTML though.
Here is the CSS:
Here is the page:
Thank you!
-Mike
Try adding margin:auto in the css menu
#cssmenu {
background: #000000;
height: 44px;
position: relative;
width: 595px;
margin: auto;
}
FIDDLE
Add margin: 0 auto; to #CssMenu
#cssmenu {
position: relative;
height: 44px;
background: #000000;
width: 595px;
margin: 0 auto;
}
#cssmenu > ul {
position: relative;
display: block;
background: #000000;
height: 32px;
width: 100%;
z-index: 500;
text-align: center; /*add this to center your li itens*/
white-space: nowrap; /*add this if you dont want brake the 'HISTORY' link in another line*/
#cssmenu > ul > li {
display: inline-block; /*you must remove float:left; and add change display to inline-block to display your li items side by side*/
vertical-align: top; /*add this to make you li itens align by top*/
position: relative;
padding: 0;
}
I have setup a fiddle: http://jsfiddle.net/BaWC8/2/
You can see that I have a wrapper div containing an ul with li's. The li's have a with of 25% so they get evenly spread across the 'page'. The wrapping div has a border of 1px. Since all li's also have a border of 1px, it looks like they all have a border of 2px (which I want).
Now. This looks all good on a desktop but when you open it on a mobile device (iphone, android) you see a small spacing on the right side of the wrapper between the last li and the wrapper border.
Here is the code (html):
<div class="wrap">
<ul>
<li><span>aaaa</span></li>
<li><span>bbbb</span></li>
<li><span>cccc</span></li>
<li><span>dddd</span></li>
</ul>
</div>
Css:
body{
text-align: center;
background: #000;
}
.wrap {
margin: 0px auto;
border: 1px solid #fff;
float: left;
width: 100%;
}
.wrap ul {
list-style: none;
margin: 0px;
padding: 0px;
float: left;
width: 100%;
}
.wrap ul li {
display: list-item;
float: left;
margin: 0px;
padding: 0px;
width: 25%;
}
.wrap ul li a {
display: block;
border: 1px solid #fff;
}
.wrap il li a span {
width: 100%;
height: 100%;
float: left;
display: block;
}
I do not understand why so I hope someone here can help me out.
Remove the float and width from the .wrap and ul.
The border will on .wrap will collapse, which you can either solve with a clearfix, or by adding overflow:auto.
Here is my working CSS:
body {
text-align: center;
background: #000;
}
.wrap {
margin: 0px auto;
border: 1px solid #fff;
overflow:auto;
}
.wrap ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.wrap ul li {
display: list-item;
float: left;
margin: 0px;
padding: 0px;
width: 25%;
}
.wrap ul li a {
display: block;
border: 1px solid #fff;
}
.wrap il li a span {
width: 100%;
height: 100%;
float: left;
display: block;
}
A working fiddle, at least on iOS: http://jsfiddle.net/designingsean/BaWC8/7/
You see a small spacing because .wrap width is 100%+2px(border-width*2).
If you want border (or padding) don't expand element's width/height,
you may use box-sizing: border-box; http://css-tricks.com/box-sizing/
add this css-property to .wrap and you will not see "small spacing" anymore))