I have a ul inside a div. I want to center it. Here is the fiddle
HTML
<div id="menu-top">
<div id="menu-container">
<div id="menu-mask">
<ul id="menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
CSS
body {
background-color: #000;
overflow: hidden;
}
#menu-top {
position: absolute;
display: block;
width: 100%;
height: 26px;
top: 0px;
z-index: 9;
}
#menu-container {
width: 840px;
margin: auto;
}
#menu-mask {
display: inline-block;
height: 26px;
margin: auto;
overflow: hidden;
position: relative;
top: 0;
width: 800px;
}
#menu {
position: absolute;
display: block;
left: 0px;
top: 0px;
height: 26px;
margin: auto;
padding: 0px;
width: 100%;
}
#menu li {
padding-right: 20px;
clear: none;
float: left;
display: inline;
}
#menu li a {
font-size: 12px;
line-height: 26px;
letter-spacing: 1.5px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
Here you go... change your #menu to this:
#menu {
position: absolute;
display: block;
margin-left:25%;
margin-right:25%;
margin-top:auto;
margin-bottom:auto;
top: 0px;
height: 26px;
padding: 0px;
width: 100%;
}
The margin-left and margin-right settings will center your menu on the page. I gave this a quick test in your JSFiddle to make sure it works.
Oh, and here's the updated JSFiddle showing the changes...
http://jsfiddle.net/LyJz9/7/
You can probably use text-align:center for what you are trying to do.
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Inline block adding bottom space
(3 answers)
Closed 4 years ago.
So, there seems to be some whitespace added to an element on my page when I set the display to be inline-block. Is there a way to get rid of this white space without changing the line-height to 0px or changing the display type to block and manually setting a width? I may want the red element below to expand dynamically based upon the content in the future.
This is what I want (no green below the red):
This is what I am getting (green below the red):
Here's a JSFiddle of the issue: https://jsfiddle.net/rstL6omk/5/
The additional space is from the box model for laying out the "inline" elements including all inline-block or inline element. It seems like voodoo because you don't see it in the box-model for the elements involved. If you set font-size: 0; on .nav_container it goes away.
The problem is that you have overflow: hidden on your .logo_container. Removing this will get rid of the 4 pixels at the bottom of the element.
Then you simply need to make use of height: auto (the default for height) on .brand_logo_icon in order for it to expand based on its content.
This can be seen in the following:
body {
background: rgb(40, 40, 40);
font-family: Helvetica, Arial, sans-serif;
font-weight: lighter;
user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
margin: 0;
cursor: default;
color: rgb(60, 60, 60);
}
div {
box-sizing: border-box;
}
#supports(padding: max(0px)) {
.container {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
#nav .nav_container {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
}
#nav {
padding: 0px;
display: block;
background: rgb(55, 155, 55);
}
.brand_logo_icon {
display: block;
background-color: rgb(200, 30, 30);
width: 60px;
}
#nav .logo_link {
position: relative;
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 45px;
}
#nav .nav_container {
display: block;
max-width: 1300px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
#nav .nav_container .logo_container {
display: inline-block;
padding: 0px;
background: rgb(80, 80, 80);
border-radius: 0px 0px 5px 5px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0px;
}
#nav .nav_container .brand_logo_icon {
width: 70px;
}
.container {
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
transition: margin 225ms linear;
}
.container .splash:before {
content: "";
display: block;
padding-top: 56.2%;
}
.container .splash {
position: relative;
display: block;
width: 90vw;
max-width: 1300px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
text-align: center;
}
.container .splash .splashimg {
display: block;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-size: 100%;
background-repeat: no-repeat;
opacity: 0;
}
.container .content {
display: block;
position: relative;
left: 0;
richness: 0;
margin-left: auto;
margin-right: auto;
max-width: 1300px;
opacity: 1;
animation: introAnimation 400ms ease-in-out 0ms forwards;
vertical-align: top;
white-space: 0;
font-size: 0px;
}
.container .content.c {
text-align: center;
}
.container .content .home_img:before {
content: '';
display: block;
padding-top: 56%;
}
.container .content .home_img {
display: block;
background-color: rgb(30, 30, 90);
}
.container .content .item_block {
display: inline-block;
width: 50%;
padding: 10px;
vertical-align: top;
box-sizing: border-box;
text-align: center;
}
.container .content .item_block .poster:before {
content: '';
display: block;
padding-top: 151%;
}
.container .content .item_block .poster.sqr:before {
padding-top: 100%;
}
.container .content .item_block .poster {
display: block;
max-width: 550px;
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
background-image: url('/assets/no_poster.png');
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<div id="nav">
<div class="nav_container">
<div class="logo_container">
<div class="brand_logo_icon">ABC ABC ABC ABC ABC ABC ABC ABC</div>
</div>
</div>
</div>
<div id="container" class="container">
<div class="content">
<div class="home_img"></div>
</div>
</div>
i've generated a psuedo element but it's not displaying in web page!
but if i check devtools it's generated!
i have content empty but even if i fill the content its still isn't showing up?
.info li::after{
position: absolute;
content: "";
background: #000;
top: -110px;
left: 0;
right: 0;
z-index: 10000;
width: 100px;
height: 100px;
}
.info li{
color: white;
font-weight: bolder;
margin: 1rem auto;
width: 100%;
height: 2.4rem;
padding: .1rem;
overflow: hidden;
position: relative;
}
It works perfectly but you have overflow hidden in the <li> element and it causes that pseudo element is hidden by overflown.
Remove the overflow: hidden in your li element and you will see it.
.info li:after{
position: absolute;
content: "after";
background: #000;
top: -110px;
left: 0;
right: 0;
z-index: 10000;
width: 100px;
height: 100px;
}
.info li{
color: white;
font-weight: bolder;
margin: 1rem auto;
width: 100%;
height: 2.4rem;
padding: .1rem;
overflow: visible;
position: relative;
}
ul{
margin-top:120px;
}
<ul class="info">
<li>
</li>
</ul>
you have overflow:hidden; change it to visible
I have a footer divided into 2 rows, i.e footer-top and footer-bottom.
footer-top has text which aligns in center perfectly. However footer-bottom has menu which is not center-aligned.
My html:
<div class="page-wrap">
<footer>
<div class="footer-top">
Copyright
</div>
<div class="footer-bottom">
<ul class="footermenu">
<li>LEGAL</li>
<li>PRIVACY</li>
<li>COPYRIGHT</li>
</ul>
</div>
</footer>
</div>
My css:
.page-wrap {
width: 100%;
height: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
footer {
width: 100%;
background-color: #8DC63F;
display: block;
float: left;
clear: both;
text-align:center;
}
.footer-top { width: 100%; float: left;padding-top:10px; color: #FFFFFF;}
.footer-bottom {
width: 100%;
text-align: center;
float: left;
display: inline-block;
}
.footermenu a {
color: #FFFFFF;
float: left;
font-size: medium;
list-style-type: none;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
.footermenu li {
width: auto;
float: left;
text-align: center;
list-style-type: none;
text-decoration: none;
}
.footermenu {
text-decoration: none;
width: auto;
text-align: center;
}
and here is the
DEMO
You should add display: inline-block to .footermenu
Example...
Try this and see if it works for you:
Demo Fiddle
I agree with the other answers that you should use inline-block, but to do so you'll need to comment out the float entries, and rely on text-align: center.
CSS, I've gone ahead and commented out the styles you probably don't need:
/* new css */
.footermenu li {
display: inline-block;
margin-bottom: 10px;
}
/* old css */
.page-wrap {
width: 100%;
height: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
footer {
//width: 100%;
background-color: #8DC63F;
//display: block;
//float: left;
clear: both;
text-align:center;
}
.footer-top {
//width: 100%;
//float: left;
padding-top:10px;
color: #FFFFFF;
}
.footer-bottom {
width: 100%;
//text-align: center;
//float: left;
//display: inline-block;
}
.footermenu a {
color: #FFFFFF;
//float: left;
font-size: medium;
//list-style-type: none;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
.footermenu li {
//width: auto;
//float: left;
//text-align: center;
list-style-type: none;
//text-decoration: none;
}
.footermenu {
//text-decoration: none;
//width: auto;
//text-align: center;
}
you need to change your footer menu css
.footermenu {
text-decoration: none;
width: 266px;
margin: 0 auto;
text-align: center;
}
fiddle : http://jsfiddle.net/dT6sC/4/
I have a page that is 1600px wide. The main area though is only 900px wide. I have a navigation that is suppose to be fixed in the center of the page ( which it is ). My problem is when I open the page, the page is fixed left instead of being centered when opened. What do I need to do to center everything within the 900px when a user visits the site?
The code isn't exact because it's detailed but it basically goes like this: http://jsfiddle.net/wznQk/
<body>
<div class="container">
<div class="header">
<div class="subheader">
<div class="navigation">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="logo"><img src="images/ogsystemslogo.png" /></li>
<li>CAREERS</li>
<li>CONTACT</li>
</ul>
</div>
<div class="undernav">
<div class="short">
<img src="images/bluemark.png" />
<div class="top">TOP OGS NEWS:</div>
</div>
</div>
</div>
</div>
<div class="content">
</div>
</div>
</body>
CSS
.body {
width: 1600px;
height: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
position: relative;
text-align: center;
}
.container {
width: 1600px;
height: 100%;
position: relative;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
}
.header {
width: 1600px;
height: 150px;
margin: 0 10% 0 10%;
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
.subheader {
width: 1600px;
height: 100px;
margin: 0 auto;
position: fixed;
background-color: white;
top: 0px;
}
.navigation {
font-family: 'Champagne & Limousines';
font-size: 20px;
text-align: left;
width: 1600px;
height: 100px;
padding: 0px;
margin-left: 0 auto;
border: 0px;
list-style: none;
text-decoration: none;
display: table-cell;
vertical-align: middle;
color: #006699;
background-color: white;
}
.navigation ul {
width: 590px;
height: 20px;
list-style: none;
text-decoration: none;
position: relative;
line-height: 55px;
margin: 0 auto;
background-color: white;
padding: 0px;
border: 0px;
}
.navigation ul li {
width: 70px;
height: 15px;
float: left;
padding-left: 35px;
background-color: white;
}
Please try to add this CSS instead of yours. In your CSS I found lot of unwanted CSS tags but I keep them as it is.
body {
width: 1600px;
height: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
position: relative;
text-align: center;
}
.container {
width: 900px;
height: 100%;
position: relative;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
}
.header {
width: 1600px;
height: 150px;
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
.subheader {
width: 900px;
height: 100px;
position: fixed;
background-color: white;
top: 0px;
}
.navigation {
font-family: 'Champagne & Limousines';
font-size: 20px;
text-align: left;
width: 590px;
height: 100px;
padding: 0px;
margin: 0 auto;
border: 0px;
list-style: none;
text-decoration: none;
vertical-align: middle;
color: #006699;
background-color: white;
}
.navigation ul {
width: auto;
height: 20px;
list-style: none;
text-decoration: none;
position: relative;
line-height: 55px;
background-color: white;
padding: 0px;
border: 0px;
}
.navigation ul li {
width: 70px;
height: 15px;
float: left;
padding-left: 35px;
background-color: white;
}
Css:
.header {
width: 1600px;
height: 150px;
left: 50%;
margin-left: -800px;/*half of your total width*/
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
Added left: 50%; margin-left: -800px;/*half of your total width*/ to your .header class
Fiddle : http://jsfiddle.net/avinvarghese/wznQk/3/show/
I manage the website for a small college library and am trying to create a bubble tooltip for an images that are part of a slider. Here's the link to the page to show you what I mean:
http://library.sfc.edu/webvoy3.htm. If you hover over the first image in the slider, you will see the tooltip stuck in there. There's no JavaScript for this tooltip, only CSS. I got the code from http://trentrichardson.com/examples/csstooltips/.
This is the CSS part of the tooltip:
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(images/bubble.gif) no-repeat top;
margin-top: 20px;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(images/bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(images/bubble.gif) no-repeat bottom;
}
This is the CSS of the SLIDER
#slider {
width: 450px;
position: relative;
height:inherit;
float:left;
padding-right:45px;
margin-left: 8px;
}
#slider .buttons span {
display: block;
width: 38px;
height: 38px;
font-size: 0;
line-height: 0;
text-indent: -4000px;
cursor: pointer;
}
#slider .buttons span {
position: absolute;
top: 32px;
}
#slider .buttons .prev {
left: -5px;
background: url(images/button-prev.gif) no-repeat 0 0;
}
#slider .buttons .next {
right: 16px;
background: url(images/button-next.gif) no-repeat 0 0;
}
#slider .holder {
width: 400px;
height: 110px;
position: relative;
overflow: hidden;
left:40px;
margin-right: 5px;
padding-right: 0px;
padding-top: 9px;
background: url(images/back-slider.jpg) no-repeat 0 0;
}
#slider .content ul {
position:relative;
list-style-type:;
height:112px;
width: 450px;
overflow:hidden;
padding-right: 10px;
padding-top: 5px;
}
#slider .content ul li {
float: left;
display: inline;
list-style-type: none;
margin-left: 16px;
height:133px;
overflow:hidden;
width:80px;
}
#slider .content ul li a {
display:block;
width: 74px;
height: 97px;
padding-left: 3px;
padding-top: 4px;
background: url(images/slider-fragment.gif);
}
AND THIS IS THE HTML CODE
<div id="slider">
<div class="buttons">
<span class="prev">prev</span>
<span class="next">next</span>
</div>
<div class="holder">
<div class="content">
<ul>
<li>
<a href="http://library.sfc.edu:7008/vwebv/holdingsInfo?bibId=261454" class="tt">
<img src="css/css-eb/images/covers/cover1.png" />
<span class="tooltip">
<span class="top"></span>
<span class="middle">This is my Bubble Tooltip with CSS</span>
<span class="bottom"></span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
The problem seems to be the incompatibility the tooltip's CSS with the slider's CSS.
Any suggestion or advice would be greatly appreciated.
Just remove overflow: hidden from #slider .content ul li - works for me when I do this live via Developer Tools.
Please Remove the overflow:hidden for the class #slider .content ul li
#slider .content ul li {
float: left;
display: inline;
list-style-type: none;
margin-left: 16px;
height: 133px;
width: 80px;
}