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]
Related
I'm trying to give my div inside a li a width value and the div's border has the width I want, but the text I have in that div is ignoring that width and it seems to be inheriting the container width. It's just the text that is doing that, though.
I don't usually work with li tags, so I don't really know what the problem is.
This is basically the HTML I'm working with:
<div id="container">
<div class="inner">
<ul>
<li>
<a class="img" href="..."></a>
<div class="desc">
...
</div>
</li>
</ul>
</div>
</div>
This is the CSS:
#container {
margin:0 auto;
width: 900px;
height: 500px;
box-sizing:border-box;
position:relative;
right: 160px;
-webkit-user-select: none;
user-select:none;
}
#container div.inner {
position:relative;
overflow:hidden;
padding:0;
margin:0;
}
#container div.inner ul {
white-space:nowrap;
position:relative;
left:0; top:0;
list-style:none;
font-size:0;
padding:0;
margin:0;
float:left!important;
width:auto!important;
height:auto!important;
}
#container ul li {
display:inline-block;
margin-top:20px;
margin-bottom:200px;
margin-left:-45px; margin-right:-30px;
-webkit-transform:scale(0.6);
transform:scale(0.6);
-webkit-transition:-webkit-transform 0.5s;
transition:transform 0.5s;
box-sizing:content-box;
text-align:center;
vertical-align:middle;
padding:0;
position:relative;
list-style:none;
backface-visibility:hidden;
}
#container ul li.active {
-webkit-transform:scale(1);
transform:scale(1);
background-color:transparent;
}
#container ul li.active .desc {
display: block;
}
.desc {
display: none;
width: 310px!important;
height: 200px;
border: 1px solid #fff;
position: relative;
right: 350px;
top: 275px;
color: #fff;
font-family: Arial;
font-size: 11px;
padding: 15px;
text-align: justify;
}
#container .img {
width: 200px;
height: 320px;
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
display:block;
position:absolute;
font-size:0;
cursor:inherit;
transition:all linear 0.4s;
}
There seems to be a lot of CSS here that is conflicting. Are you sure you need to use '!important' in so many places?
It's hard to tell what's happening but my feeling is that using position:absolute and float is breaking things.
Also, your div inside the li ("desc") is set to display:block at some point.
Try changing it to inline or inline-block depending on what you need it to look like.
#container ul li.active .desc {
display: block;
}
Then after this you are trying to set a width when it is display:none...
.desc {
display: none;
width: 310px!important;
...
This is probably not showing up because if the display:block taking precedence, because you have been more specific with your selectors. Try doing the same for the .desc section:
#container ul li .desc {
display: none;
width: 310px!important;
...
If you can supply a working Jsfiddle or code snippet so we can see what you are trying to achieve that would help.
I'd also like to rewrite this for you so that you can see there is probably a much easier way to accomplish your layout without all of the conflicts.
in your .desc {} is the second from the bottom padding: 15px;
Try deleting that one.
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 :)
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;
}
How can I position span text so that it is positioned in the middle (vertically and horizontally). I have made a jsfiddle example and this is my code:
<ul>
<li class="one"><span>One</span></li>
<li class="two"><span>Two</span></li>
</ul>
css:
ul {
height: 200px;
border: 1px solid #000;
width: 200px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
li {
height: 30px;
width: 100%;
position: absolute;
background-color: blue;
}
.one {
top: 30px;
height: 50px;
}
.two {
top: 150px;
}
li span {
color: #fff;
vertical-align: middle;
height: 100%;
display: block;
}
The height of the li's can vary. The above is just a reference using fixed heights.
You need to set line-height at the same height as your li:
li span {
color: #fff;
vertical-align: middle;
height: 100%;
display: block;
line-height:30px;
}
li.one span{
line-height:50px;
}
Here's your demo: http://jsfiddle.net/r4Dr9/2/
You don't need to do tricks with margin or padding.
Give the <li> a display:table;, and the <span> a display:table-cell;.
DEMO
CSS to add
li {
text-align:center;
display:table;
}
li span {
display:table-cell;
vertical-align:middle;
}
Try using text-align: center; on the li span, and you'll have to set the top margin accordingly for each to get it down from the top.
A couple things. First, height:100%;, vertical-align:middle; does nothing. Also, with width:100%; and not specifying text-align, it'll always default to left. I'd personally use padding:
li span {
display:inline-block;
color: #fff;
text-align:center;
height: 100%;
}
.one span {
padding-top:10px;
}
.two span {
padding-top:3px;
}
I updated your jsFiddle as well.
Added style - 'text-align: center' on li element and it worked for me
For some reason, I can't prevent the UL and it's LI's from wrapping.
I want the UL's width to be exactly the width of the LI's on one line (without wrapping) and if the UL becomes wider than the nav-div (800px), I want a scrollbar within the nav so I can scroll the LI.
I tried pretty much anything with display, whitespace, width's and height, but I can only get it to work if I give the UL a certain width. This, however, is not an options, since the page is generated and can contain 1-20 LI's.
Does anyone know how to make a scrollbar come up without setting the UL's width?
HTML:
<div id="nav">
<ul id="navbuttons">
<li>Some text</li>
<li>Some text</li>
...
</ul>
</div>
CSS:
div#nav
{
height: 100px;
width: 800px;
margin-left: auto;
margin-right: auto;
}
div#nav ul li
{
margin-right: 15px;
float: left;
font-size: 12px;
list-style-type: none;
}
try this
ul {
white-space:nowrap;
}
li {
display:inline;
}
You can use display: inline-block; white-space: nowrap; for the wrapper and display: inline or display: inline-block for the children.
So, it would look like this: http://jsfiddle.net/kizu/98cFj/
.navbuttons {
display: inline-block;
overflow: auto;
overflow-y: hidden;
max-width: 100%;
margin: 0 0 1em;
white-space: nowrap;
background: #AAA;
}
.navbuttons LI {
display: inline-block;
vertical-align: top;
}
And, if you'll need to support IE add this hack in conditional comments to enable inline-blocks in it:
.navbuttons,
.navbuttons LI {
display: inline;
zoom: 1;
}
Caveat: Untested
Would you not just want to set a width for the li item
div#nav ul li {
margin-right: 15px;
float: left;
font-size: 12px;
list-style-type: none;
width: 100px;
}
And then set the width to a fixed width and overflow on the UL to scroll?
div#nav ul {
width: 800px;
overflow: scroll;
}
This would cause you UL to scroll when your li's went past say 8, is that what you're after?
By setting the width on the <ul> to inherit you can use the overflow property to set the overflow behavior of the element. With the value scroll, all of the element's contents will scroll (in both x and y directions) if the height and the width of the contents overflow that of the box:
div#nav ul
{
overflow: scroll;
width: inherit;
height: inherit;
}
Add the following rule:
div#nav ul {
overflow-x: hidden;
overflow-y: scroll;
white-space: nowrap;
}