I'm trying to achieve this implementation:
The container is height: 100% and the li are height: 50% each one. The link is 50% height and the entire colored area should be clickable.
This is my code:
html, body {
height: 100%;
}
.menu {
height: 100%;
ul {
height: 100%;
li {
height: 50%;
a {
display: block;
height: 100%;
line-height: 100%;
}
}
}
}
Unfortunately the line-height trick doesn't work. The height of the window is obviously fluid because it should be responsive on every device. Ideas?
Try setting line-height: 50% on a <li> element.
What if you just do this?
http://jsfiddle.net/SBag9/2/
.menu {
height: 100%;
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
margin-top: 50%;
}
You might need to use something like position relative and absolute to achieve this.
html, body {
height: 100%;
margin:0px;
padding:0px;
}
.menu {height: 100%;}
.menu ul {
height: 100%;
list-style:none;
margin:0px;
padding:0px;
}
.menu ul li {
height: 50%;
width:100%;
display:table;
}
.menu ul li a {
display:table-cell;
vertical-align:middle;
text-decoration:none;
font-weight:bold;
text-align:center;
color:#000;
}
Here is a working fiddle:
http://jsfiddle.net/qsHw2/2/
Related
I am sure it is something simple I am overlooking. But the top nav (dropdown) of my website is no longer visible. I am 100% sure it has something to do with my css applied.
.ulTopmenu {margin:0; padding:0; width: 100%; overflow:hidden;}
.liTopMenu {width: 120px; height: 40px; float: left; margin:0 4px; list-style:none; display: inline;}
.divTopMenuInnerContainer {display: inline; overflow:hidden; height:500px;width:900px;}
.divTopMenuInnerContainer{position:relative;height:100%;width:80%;}
.divTopSpliter {float:left; width:1px; height:40px; display:block; border-right:1px;}
.divTopTopSpliter {float:left; width:30px; height:1px; display:block;}
.a {
width: 120px;
height:25px;
line-height: 40px;
text-decoration: none;
text-align: center;
}
/* End of General */
.divTopSubMenuSpliter {height:1px;width:auto;background:#0000; margin-top:1px; margin-bottom:1px;}
div.absolute {
position: relative;
right: 20px;
width: 200px;
height: 50px;
}
For the dropdown navbar's css, it may be necessary to tell it to be visible.
Try something like this:
navBar{
visibility: visible;
}
Let me know if this worked.
I resolved this by changing the following. Thanks for the help any way.
.ulTopmenu {margin:0; padding:0; width: 100%; overflow:visible; position:absolute;}
.liTopmenu{width: 120px; height: 40px; float: left; margin:0 4px;display:inline-block;}
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 want to create a horizontal menu with 4 equally spaced elements. The menu has to be always sticked the browsers bottom.
The tricky part is, that the first elements string has to start at the left margin, and the last elements string hast to end at the right margin.
The strings between them should be equally spaced. The width of the menu should be scalable.
This is so far my closest solution, its not accurate tho :/
/UPDATE/ Collection should start at the edge of the browsers screen and Contact should end at the right edge of the browsers screen. (So with margins i meant the browsers very edge...)
DEMO:https://jsfiddle.net/t8kn1nch/
Do you have an idea?
HTML:
<div id="navigation">
<div id="collection">collection</div>
<div id="shopabout">
<div id="shop">shop</div>
<div id="about">about</div>
</div>
<div id="contact">contact</div>
</div>
CSS:
#navigation{
position: absolute;
bottom: 0;
width: 100%;
}
#navigation div{
display: inline-block;
}
#navigation #collection{
float: left;
}
#navigation #shopabout{
width: 100%;
display: inline;
}
#navigation #shop{
width: calc(100%/1.8);
text-align: center;
}
#navigation #about{
display: inline;
}
#navigation #contact{
float: right;
}
See jsfiddle with working solution:
https://jsfiddle.net/45n3d6hs/2/
Css:
#navigation {
position: absolute;
bottom: 0;
width: 100%;
}
#navigation #collection, #navigation #contact {
width: 25%;
float:left;
}
#navigation #shop, #navigation #about {
width: 50%;
float: left;
}
#navigation #shopabout {
width: 50%;
float: left;
}
Altough you can use some workarounds, proper solution here is to use flexbox.
#navigation {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
}
#collection, #contact {
width: 25%;
}
#contact {
text-align: right;
}
#shopabout {
width: 50%;
display: flex;
flex-direction: row;
}
#shop, #about {
width: 50%;
text-align:center;
}
Here's my fiddle, let me know if it's a solution you needed.
Something like THIS?
* {
margin: 0 0 0 0;
}
body {
background-color: black;
}
#navigation {
width: 100%;
}
#navigation > div {
display: inline-block;
width: 25%;
text-align: center;
background-color: red;
}
#navigation > div:first-child, #navigation > div:last-child {
background-color: brown;
}
<div id="navigation">
<div id="collection">
collection</div><div id="shop">
shop</div><div id="about">
about</div><div id="contact">
contact</div>
</div>
The trick here is with HTML, using display: inline-block makes the space between divs to be readed just like an element, a spacebar.
Any white space between divs would ruin this layout, since you're taking 25% of the width with every div!
OK try this CSS.
#navigation{
position: fixed;
bottom: 0;
width: 100%;
}
#collection {
width:25%;
}
#contact {
width:25%;
}
#shopabout {
width:50%;
}
#shop,
#about {
width:50%;
}
#navigation div{
display: inline-block;
text-align:center;
float:left;
}
#navigation #contact {
text-align:right;
}
#navigation #collection {
text-align:left;
}
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;
}
How to center navigation horizontally inside the div? The CSS should be responsive preferably.
HTML:
<nav id="centermenu">
<ul>
<li>Business</li>
<li>Specialities</li>
<li>Contact us</li>
</ul>
</nav>
well, the css was, and changed the left: 50% to 25%, nada. hope this was enough
#centermenu {
float: left;
width: 100%;
text-align: center;
border-bottom: 2px solid #011;
background: #ffe;
overflow: hidden;
position: relative;
}
#centermenu ul {
float: left;
clear: left;
position: relative;
list-style: none;
left: 50%;
display: block;
text-align: center;
}
#centermenu ul li {
display: inline;
text-align: center;
margin: 1em;
padding: 1em;
}
Make sure your browser is not rendering in quirks mode. You should have a DOCTYPE specified on the first line of the HTML file to render in standards mode:
<!DOCTYPE html>
In standards mode, this works (tested and working for me):
#centermenu {
width: 100%;
text-align: center;
border-bottom: 2px solid #011;
background: #ffe;
overflow: hidden;
position: relative;
}
#centermenu ul {
list-style: none;
display: block;
margin: 0 auto;
text-align: center;
}
#centermenu ul li {
display: inline;
text-align: center;
margin: 1em;
padding: 1em;
}
#centermenu {
display:block;
width:100%;
text-align:center;
}
#centermenu > ul {
display:inline-block;
text-align:left;
overflow:auto;
}
#centermenu > ul > li {
float:left;
}
ul {
display: block;
margin: 0 auto;
}
u need to specified the width for ul, if you use margin: 0 auto; no need float: left; or left: 50%
#centermenu ul {
margin: 2 auto;
display: block;
width: 600px;
}
or make ul display inline;
#centermenu ul {
display: inline;
}