Since the code is long I have fiddle for it
<header>
<div>
</div>
</header>
FIDDLE: http://jsfiddle.net/9zWm9/34/
Q: Can you please tell why my list items are not aligning to the navigation inside header-box.
Requirement: I want my list items to be exactly in center of header-box with the line-height of 3em.
Thanks in advance.
To align your ul horizontally you need to clear the float, I've done that using a br element with class="clear"
.clear { clear:both; }
and to position the s vertically I used position:relative; with top:15%;
check out this fiddle
And here's another way if you don't want to set position on the li elements, this way you should set a line-height on your ul element (instead of height).
check out this fiddle
Remove the position:relative for the .header-box and add overflow: hidden. Remove the height specified for .header-box, header nav and header nav ul and add padding to header nav ul
Check this fiddle
CSS changes
.header-box {
/* top: 40px; */
width:100%;
/* height: 81px; */
/* position: relative; */
overflow:hidden;
}
header nav{
border: 1px solid black;
/* height: 81px; */
}
header nav ul{
width:100%;
/* height: 81px; */
margin:0px auto;
/* padding:0px; */
padding:15px 0px;
text-align:center;
}
Yes, problem is the line-height. A possible solution is changing the line-height to 1:
font: 18px Verdana;
display: inline-block;
list-style-type: none;
text-align:center;
line-height: 1;
border: 1px solid red;
http://jsfiddle.net/9zWm9/35/
Set your following class to "line-height: 1em;"
header nav ul li {
border: 1px solid #FF0000;
display: inline-block;
font: 18px Verdana;
list-style-type: none;
text-align: center;
line-height: 1em;
}
Related
I want to my nav-bar width fit automatically.
Here is part of my CSS
#nav-bar {
width: 960px;
margin: 0 auto;
}
Here is my whole working code
http://codepen.io/anon/pen/ogBxxN
Here is my result
When I adjust the width to 900, this is what I see
When I adjust the width to 1000, this is what I see
As you can see, none of them give me the best result.
I was wondering maybe some CSS expert can help me fixing this issue.
This should do it for you using flexbox
#nav-bar ul {
width: 100%;
margin: 0;
padding: 0;
border: 1px solid #c2c2c2;
float: left;
display:flex;
flex-direction:row;
}
#nav-bar li {
text-align: center;
float: left;
order:1;
flex-grow:1;
}
by the way you are styling the list items twice, with .inline li and #nav-bar li
Demo
Trying adding white-space: nowrap; to your ul element and only use display: inline-block; on your li elements as opposed to the float: left; that is there.
Example:
http://codepen.io/jessikwa/pen/YPNqpw
Using table layout:
*{margin:0;padding:0;}
#nav-bar ul {
width: 100%;
border: 1px solid #c2c2c2;
display:table;
white-space:nowrap;
text-align:center;
}
#nav-bar li { display:table-cell; }
#nav-bar li a{
position:relative;
display:block;
background:#eee; /*put back your gradients here */
line-height: 40px;
height: 41px;
font-size: 20px;
color:#000;
padding: 0 10px;
}
<div id="nav-bar">
<ul class="inline">
<li>Europe</li>
<li>Asia</li>
<li>North America</li>
<li>Oceania</li>
<li>South America</li>
<li>South America</li>
</ul>
</div>
That's it.
Using your current code, in your CSS:
.inline li {
width: 16.666%;} // 100 divided by number of items
#nav-bar li a {
padding: 0;} // remove the padding
I want to make my fixed footer resizable on my 320px viewport, together with the absolute elements inside it.
I manage to get the footer div resizable, but the elements inside it doesn't seems to stick within the footer div when i resize the windows.
Note: I'm trying to create a footer with a background image. This image have some clickable areas which i created using the unordered list.
Here is my HTML Code:
<footer>
<ul>
<li>Shoot Me
</li>
<li>Facebook
</li>
<li>Tumblr
</li>
<li>Instagram
</li>
<li>E-mail
</li>
</ul>
</footer>
Here is my CSS Code:
footer{
z-index:21;
display:block;
position:fixed;
bottom:0;
left:0;
right:0;
padding:0;
width:1280px;
height: 426px;
max-width: 100%;
background:url(../images/layout/footer.png) no-repeat center bottom;
background-size: 100%;
margin:0 auto;
pointer-events:none;
}
footer ul li {
display: inline;
width: 14%;
}
footer ul li img {
border: none;
padding-left: 8px;
}
footer ul li a.shootme-link{
position:absolute;
bottom:200px;
left:1080px;
width: 151px;
height: 33px;
background:url(../images/layout/shootme.png) bottom;
pointer-events:auto;
/* Hide the text. */
display: inline-block;
overflow: hidden;
font-size: 0px;
}
footer ul li a.shootme-link:hover {
background-position: 0 0;
}
footer ul li a.facebook-link {
position:absolute;
width:33px;
height:29px;
bottom:40px;
left:970px;
pointer-events:auto;
/* Hide the text. */
display: inline-block;
overflow: hidden;
font-size: 0px;
}
footer ul li a.tumblr-link {
position:absolute;
width:33px;
height:29px;
bottom:40px;
left:980px;
pointer-events:auto;
/* Hide the text. */
display: inline-block;
overflow: hidden;
font-size: 0px;
}
footer ul li a.instagram-link {
position:absolute;
width:33px;
height:29px;
bottom:40px;
left:1030px;
pointer-events:auto;
/* Hide the text. */
display: inline-block;
overflow: hidden;
font-size: 0px;
}
footer ul li a.mail-link {
position:absolute;
width:33px;
height:29px;
bottom:40px;
left:1055px;
pointer-events:auto;
/* Hide the text. */
display: inline-block;
overflow: hidden;
font-size: 0px;
}
I'm still very much noob in CSS3 so i hope someone could enlighten me on this and pardon for my bad English. Hope it's not that confusing. Thanks
Here is the fiddle: http://jsfiddle.net/5JWG5/
Full screen fiddle: http://jsfiddle.net/5JWG5/embedded/result/
Ok, I Hope this help you, first:
it's easier using divs instead of a list, so we can achieve the location of the elements better.
<footer>
<div class="shootme-link">
Shoot Me
</div>
<div class="social">
<a class="facebook-link" href=" " target="_blank" >Facebook</a>
Tumblr
Instagram
E-mail
</div>
</footer>
as you can see, i also reduce the number of classes, instead using one for each element, now i'm using just one name it "social", this will be a Div box that will nest the link elements.
Then, we will point to the links inside that div to give them size and we will float all to the left. using display: inline-block and text-align: left; (you could also use display: block; and float: left; but the you should give them a margin)
this is the new CSS
footer{
z-index:21;
display:block;
position: absolute;
margin: 0 auto;
bottom:0;
left: 0;
right: 0;
width:1280px;
height: 426px;
max-width: 100%;
background:url("http://jennisa.com/images/layout/footer.png") no-repeat right bottom;
background-size: cover;
pointer-events:none;
}
footer > .shootme-link {
display: block;
position:absolute;
bottom:200px;
right: 50px;
width: 151px;
height: 33px;
background:url("http://jennisa.com/images/layout/shootme.png") bottom;
pointer-events:auto;
/* Hide the text. */
text-indent: -999px;
overflow: hidden;
}
footer > .social {
position: absolute;
width: 163px;
height: 32px;
bottom: 46px;
right: 163px;
pointer-events: auto;
}
footer > .social > a {
background-color: blue;
width:33px;
height:29px;
display: inline-block;
text-align: left;
pointer-events:auto;
/* Hide the text. */
text-indent: -999px;
overflow: hidden;
}
there is a jsfiddle
for the background size I use the attribute cover instead 100% because this will kep the proportions of the image to cover all the div and also i positioned the image to the right, because is there where the elements are (the elements also are positioned absolute since the right.
you just delete background-color: blue; from the links (I used it to point the changes visually)
Hope this help you.
I'm not shure of what you're trying to do, i speak spanish, if that language works for you, you could explain better in it.
anyway, i think you could use position: relative; instead of position:absolute;.
"inline-block" has text capabilities, so you can use text-align: center; or use display:block; and float everything to the left.
but i don't see the point of "float" your elements if give them an absolute position.. may be you could use jsfiddle to explain your point better with an example.
is not necessary to use max-width: 100%;you just put the width at 100% of the size and declare the minimun width size, for example "320px" and the div will not be smaller than this size.
Hope this help you :)
I have a header which is the parent of the nav and logo. I have set the parent to overflow:hidden so I was able to add margin-top to the nav to get it to sit at the bottom. However it clips the logo div as well. I was trying follow this question...Overriding overflow: hidden
so tried to set the logo to overflow:visible but that hasn't worked either. I am not sure of any other solution other than the logo not being in the parent container.
Here is my code
CSS:
.container {
width: 960px;
margin:0 auto;
background-color: blue;
}
header {
height: 100px;
background-color: #001D5D;
position: relative;
overflow: hidden;
}
#logo {
height:100px;
width:100px;
z-index:10;
top:0px;
position: absolute;
overflow: visible;
}
nav {
background-color:#1CCEAE;
margin-top:63px;
}
nav ul {
width:100%;
line-height: 37px;
text-align:right;
background-color:#1CCEAE;
}
ul li {
display: inline-block;
margin-right: 20px;
}
ul li a {
text-decoration: none;
font-size: 1em;
color:white;
}
Here is a fiddle
http://jsfiddle.net/XS3Zs/
remove width:100% to ul or reset padding to 0 to ul.
<ul> doesn't really need width:100%; since it is a block element, it will use all width avalaible., width set to 100% may be too much. Borders, margin and padding will not be estimated.
The UL element has by default padding-left:40px; so if you set that to 0 it will be fine.
I updated your [FIDDLE]
I am creating a header with a logo and CSS menu. I want them to be both on the same line, and when I did this, I used
#header img, #header ul{
display:inline-block;
}
When I was using a custom menu I made, this worked fine. However, I decided to use a CSS menu generator to design a nicer looking menu. This broke it, and I am not sure what the problem is.
JSFiddle
I also noticed that in the jsFiddle, my hover color for the links is not working. It works fine locally so I'm assuming this is either a jsFiddle issue or I forgot to upload something. But I just copied and pasted the whole thing so I'm not sure what that would be.
Thanks!
Here is JsFiddle
Try add padding to header, change inline-block to inline and remove width:
#header {
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:10px;
width:100%;
}
to show at bottom Here is Demo:
#header {
text-align:center;
margin-bottom:0px;
padding-top:150px;
padding-bottom:10px;
width:100%;
}
#header img, #header ul{
display:inline;
}
Remove width: 100%; display: block from your .menu.
/* Generated via www.cssmenubuilder.com */
.menu{margin:0 auto; padding:0; height:30px; background:url('images/topMenuImages.png') repeat-x;}
To position your menu at the bottom add the following:
#header { position: relative; }
.menu { position: absolute; bottom: 0px; }
Fiddle
I couldn't view your image from your code, so I'm not sure what is exactly you wanted. But I made this simple code to make the logo and menu on the same line, whereby the menu is aligned in the middle of the height of logo/header. You can check the fiddle HERE
.header{
height: 100px;
width: 100%;
display: block;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 8px 0;
overflow: hidden;
}
.logo{
display: inline-block;
float: left;
padding-left: 15px;
}
.menu{
float: right;
list-style: none;
margin: 0;
text-align: right;
line-height: 100px;
padding-right: 15px;
}
.menu li{
display: inline;
margin: 0 10px;
}
I have to center all elements in div.to_left_60. I need solution that will work for all elements inside there.
I have set text-align: center for this purpose. It works for text, but not for my ul element. I have tried to play with margins and absolute/relative, but no luck.
ul.problem is the element I have to center in this div. From jsfiddle you see that white background is not centered.
HTML
<div class="to_left_40">gtestsetes</div>
<div class="to_left_60">
<p>gtestsetes</p>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTvZsT7cLwPFCC0joFhZoi6OylhGaIVHBPYn--PrH3nzZdMwH0grA" width="265px" />
<ul class="problem">
<li>fsfsd</li>
<li>fsfsd</li>
</ul>
<ul>
<li>fsfsd</li>
<li>fsfsd</li>
</ul>
CSS
ul {
list-style: none;
text-align: justify;
background-color: yellow;
}
ul.problem li {
list-style-type: none;
display: block;
width: 245px;
height: 164px;
padding: 14px 10px 0 10px;
background-color: white;
background-repeat: no-repeat;
text-align: center;
font-size: 18px;
}
.to_left_40 {
float: left;
width: 40%;
background-color: red;
}
.to_left_60 {
float: left;
width: 60%;
background-color: green;
text-align: center;
}
JSFiddle: http://jsfiddle.net/qVTQ4/
EDIT: (SOLLUTION)
This helps:
ul.problem li{margin:0 auto;}
I have modified this sollution:
.to_left_60 * {
margin:0 auto;
}
try this way
ul.problem li{margin:0 auto;}
Demo
Have a look at this - http://jsfiddle.net/2y7R8/
All I did was set a width on the ul and add margin: 0 auto to center it.
Try Box-align
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
Try removing
ul
{
text-align: justify;
}
i.e
ul {
list-style: none;
background-color: yellow;
}
Try this
ul.problem li {
margin:0 auto;
}
This can set ui block in center. It make equal margin from both sides.
You can declare ul { padding:0; } Looks like your li's are centered but parent ul has default padding.