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;}
Related
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'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/
I wanted a design like this ;
I wrote my css like this :
text here
.my-title:before,
.my-title:after {
background-color: #CCCCCC;
content: "";
display: inline-block;
height: 2px;
position: relative;
vertical-align: middle;
width: 32%;
margin-left: -2%;
}
}
This seems correct in local, but becasue of the final } brace it was giving error in production.
How to do it with simpler CSS, so that i can get the desired design !
DEMO
HTML
<div class="maintext">
<div class="subtext">
<h2>Text Here</h2>
</div>
</div>
CSS
.maintext{
width:100%;
height:1px;
border-top:2px solid #6b6a6a;
position:relative;
margin-bottom:30px;
}
.subtext{
width:auto;
height:auto;
text-align:center;
position:absolute;
top:-15px;
right:0;
left:0;
}
.subtext h2{
padding:7px 12px;
background:#ffffff;
display:inline;
color:#000000;
font-family: 'Georgia';
font-size:30px;
}
Change your code to this
Add position:relative to .my-title
.my-title:before{
background-color: #CCCCCC;
content: "";
display: block;
height: 2px;
width: 100px;
position: absolute;
top:50%;
right:100%;
marging:-1px 0 0;
}
.my-title:after{
background-color: #CCCCCC;
content: "";
display: block;
height: 2px;
width: 100px;
position: absolute;
top:50%;
left:100%;
marging:-1px 0 0;
}
I'm trying to achieve the same thing IN THIS EXAMPLE ...i want my navigation to be like on that website.
HTML
<div id="container">
<div id="nav"></div>
</div>
CSS
#container {
width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#nav {
width: 100%
background: #585858;
height: 37px;
}
I'm tryting to get the same effect as repeat-x; for the nav
Maybe you want to achieve something like this: http://jsbin.com/oWeKiqa/2/
Try this on your CSS:
#container {
width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#nav {
width: 100%;
background: #585858;
height: 37px;
left: 0;
display: block;
position: absolute;
}
#container
{
width:980px;
}
#nav{
position:absolute;
left:0;
right:0;
/*...no need of width:100%;..*/
}
EXAMPLE
Add overflow:hidden; to container div and don't forget that you have a typo as you forget to add ; at the end of width property so its not being applied.
http://jsbin.com/efilOSA/1/
My menu is currently under the logo, but instead I want it to be horizontal to the logo. I think the float property is the only way to do something like this(?) but it doesn't work, it won't float.
#top_menu {
height: 20px;
color: #333;
position: relative;
float: right;
}
#top_menu ul li {
float: left;
color:#333;
padding-right:15px;
font-family: Tahoma, Helvetica, sans-serif;
font-size:11px;
}
#top_menu ul li a {
text-decoration:none;
color: #666;
padding: 1px;
padding-right: 8px;
}
#top_menu ul li a:hover {
color:#f2e9c9;
}
#logo{
margin-top: 15px;
width: 200px;
height: 30px;
position: relative;
right: 5px;
}
<div id="logo"><img src="logot.png" alt="lolly"></div>
<div id="top_menu">
<ul>
<li>Portada|</li>
<li>Equipo|</li>
<li>Workbook|</li>
<li>Frescología|</li>
<li>Clientes|</li>
<li>Blog|</li>
<li>Noticias</li>
</ul>
</div>
What's wrong?
If I understand correctly you want the Logo and the Menu on the same horizontal line. If that is the case you can:
Float the logo to the left OR
#logo{
margin-top: 15px;
width: 200px;
height: 30px;
position: relative;
right: 5px;
float:left;
}
Display the logo as inline-block
#logo{
margin-top: 15px;
width: 200px;
height: 30px;
position: relative;
right: 5px;
display:inline-block;
}
Put the logo div after the top_menu div.