menu in webpage when zoomed in and out doesnt stay fixed to header image shown in figure:
the css script for this one is as follows
#navmenu{
z-index:99999;
margin-top:40px;
position:absolute;
width:100%;
margin:0;
padding:0;
min-width: 90%;
width:950px;
}
#navMenu li {
float:left;
color:#ececec;
list-style-type:none;
width:80px;
}
#navMenu ul {
width:970px;
font-size:16px;
color:#000000;
}
#navMenu li a{
height:15px;
float:left; display:inline;
font-weight:700;
float:left;
color:#707070;
display: block;
padding: 8px 12px;
text-decoration: none;display: block;
padding: 8px 12px;
text-decoration: none;
background-image: url(img/image_menubutton.JPG);
border-right:1px solid white;
margin-right:12px;
font-family:"Georgia",Georgia,Serif;
font-weight:900;
font-size:19px;
text-align: center;
zoom: 1;
max-width: 30%;
}
#navmenu li.item1{background-image: url(img/about.JPG);}
#navmenu li a:hover {
color:33CCFF;
}
what is the solution to this?
if you use position:fixed; then it will not move when scrolled which is what i assume you are looking for, also when zoomed same thing, it will stay position fixed to where you want it , add maybe top:0; left:0; depending on where you want this to be positioned at-- maybe try adding some html ? other than that this is about all i can help you with
#navmenu{
z-index:99999;
margin-top:40px;
position:fixed;
width:100%;
top:0;
left:0;
margin:0;
padding:0;
min-width: 90%;
width:950px;
}
#navMenu li {
color:#ececec;
list-style-type:none;
width:80px;
}
#navMenu ul {
width:970px;
top:0;
left:0;
font-size:16px;
color:#000000;
}
#navMenu li a{
position:fixed;
height:15px;
font-weight:700;
float:left;
color:#707070;
display: block;
padding: 8px 12px;
text-decoration: none;
background-image: url(img/image_menubutton.JPG);
border-right:1px solid white;
margin-right:12px;
font-family:"Georgia",Georgia,Serif;
font-size:19px;
text-align: center;
zoom: 1;
max-width: 30%;
}
Related
here is css
in this css i have #menu as ID of Main Menu Ul
i made change in display properrty but not any expected effect
/*Initialize*/
#menu
{
list-style:none;
padding:0;
margin: 0;
width:100%;
left:auto;
background-color:Gray;
}
ul#menu li ul.sub-menu
{
position:absolute;
clear:both;
width:100%;
height:100%;
visibility:hidden;
top: 30px; height:25px; padding:5px;
padding:0;
margin:0;
display:none;display: none;
}
#menu li
{ position:relative;
display: table-cell;
width:auto;
display:block;
font-weight:bold;
background-color:Olive;
list-style-type: none;
text-align:center;
float:left;
line-height:30px;
list-style-type: none;
display: block;
float: left;
}
ul#menu ul.sub-menu li
{
float:left;
line-height:30px;
text-indent:0;
margin:auto;
position:absolute;
list-style-type:none;
clear:both;
margin: 0;
background-color: #666;
border:none;
display: table-cell;
width:auto;
display:block;
float: none;
}
ul#menu li:hover ul.sub-menu
{
visibility:visible; clear:both; /*display:inline;*/ position: absolute; display:table-cell;
}
ul#menu li a
{
display:block;text-indent:0; text-decoration: none; padding:5px 25px 5px 10px;
}
ul#menu li ul.sub-menu li a
{
text-decoration: none;
padding: 5px 10px 5px 10px;
display:inline-block;
}
ul#menu li a:hover ul.sub-menu
{
visibility :visible;
text-indent:0;
font-size:20px;
height:100%;
width:100%;
background-color:red;
text-decoration: none;
display:block;
}
submenu will not display exactly under parent menu
I am very new to CSS and it's all control..guide me plz
You need to set left and top property
ul#menu li ul.sub-menu {
position:absolute;
clear:both;
width:100%;
height:100%;
visibility:hidden;
top: 100%;
left: 0%;
height:25px;
padding:5px;
padding:0;
margin:0;
display:none;
}
I might be going about this the wrong way, but what I'm trying to achieve is a list style horizental that links in with some js that changes the navigation from one tab to another. The tab headings should have a counter before the text within a css circle using radius and I've got this far.
What I can't seem to resolve is how to then place this circle within a box the same colour as the li text background and ensure it changes colour when hovered/selected.
Here's my code so far:
OL.evotab {
counter-reset:li;
list-style: none;
float:left;
width:100%;
padding:0px;
}
OL.evotab LI {
list-style:none;
position:relative;
display: inline;
float:left;
margin:0 0 6px 2em;
padding:4px 8px;
}
ol.evotab > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding:4px;
border-radius:50%;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}
OL.evotab LI A {
background-color: #f8f8f8;
color: #28343d;
text-decoration: none;
padding-top: 30px;
padding-left:20px;
padding-right:20px;
padding-bottom:30px;
border-bottom:5px solid #dfdfdf;
}
OL.evotab LI A.selected,
OL.evotab LI A:hover {
background-color: #f8f8f8;
color: #e51f38;
padding-top: 30px;
padding-bottom:30px;
border-bottom: 5px solid #e51f38;
}
OL.evotab LI A:focus {
outline: 0;
}
FIDDLE
Its a little difficult to see what you mean without any HTML....but have a look at the fiddle linked for an idea.
HTML
<a href='#'>This is an Item</a>
CSS:
a {
background:grey;
border:1px solid black;
display:inline-block;
padding:20px;
color:white;
text-decoration:none;
position:relative;
}
a:before {
content:'7';
color:black;
position:absolute;
display:inline-block;
background:yellow;
border:1px solid black;
border-radius: 999px;
left:-5px;
width:20px;
text-align:center;
line-height:20px;
height:20px;
}
a:hover, a:hover:before {
color:red;
}
I'm trying to create a horizontal menu with the width of the parent div and where the links are arranged in equal distances. Target is to create a navigation bar with a width of 900px. Maybe it is possible to realize it on another way? I'm a newbie in css and don't know how to fix my problem and hope you could help me!
#nav {
background:red;
width:900px;
}
ul#nav-bar, ul#nav-bar ul{
margin:0;
list-style:none;
padding:0;
background: white;
border: 1px solid black;
}
ul#nav-bar ul{
display:none;
position:absolute;
left:0;
}
ul#nav-bar li:hover>*{
display:block;
}
ul#nav-bar li{
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#nav-bar li:hover{
z-index:1;
}
ul#nav-bar{
font-size:0;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
padding:0;
*display:inline;
}
* html ul#nav-bar li a{
display:inline-block;
}
ul#nav-bar>li{
margin:0;
}
ul#nav-bar a:active, ul#nav-bar a:focus{
outline-style:none;
}
ul#nav-bar a{
display:block;
vertical-align:middle;
text-align:center;
text-decoration:none;
font: 12px Arial;
color:#000000;
padding:5px 10px 5px 10px;
}
ul#nav-bar ul li{
float:none;
margin:0 0 0;
}
ul#nav-bar ul a{
text-align:left;
background-color:red;
color:#000;
}
ul#nav-bar li:hover>a{
background-color:#fff;
color:#000000;
}
ul#nav-bar span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
<div id="nav">
<ul id="nav-bar">
<li>Link1</li>
<li><span>Link2</span>
<ul>
<li>lowerLink1</li>
<li>lowerLink2</li>
<li>lowerLink3</li>
</ul>
</li>
<li>Link3</li>
<li><span>longxxxxxxxxxxxxxxxxxxxxxxxxxxxlink</span>
<ul>
<li>lowerLink1</li>
<li>lowerLink2</li>
<li>lowerLink3</li>
</ul>
</li>
<li>Link5</li>
<li>Link6</li>
<li>longxxxxxxxxxxxxxlink</li>
</ul>
</div>
Thanks!
To get the #nav-bar to match the parent, simply add width:100% to your existing ul#nav-bar tag in css. This tells your child to fill up the parent, regardless of child's content.
As for spreading out the links, it has been my experience that the best way to do this is to add margins to the text once the navbar is complete. For your coded example, I would add the following to even them out:
ul#nav-bar->li{
margin:0px 20px 0px 20px;
text-align:center;
}
You can view it here and here is the css code
/*zero-height container problem fix for floated elements*/
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
#nav {
background:#999;
width:900px;
}
#nav ul{
list-style: none;
padding: 0;
margin: 0;
}
#nav li{
position: relative;
text-align: center;
padding: 10px 0px;
}
#nav a{
text-decoration: none;
display: block;
color: #f0f0f0;
}
#nav-bar > li{
float: left;
}
#nav-bar ul{
position: absolute;
left: 0;
width: 100%;
top: 100%;
background: #999;
display: none;
}
#nav-bar li:hover{
background: #666;
}
#nav-bar li:hover ul{
display: block;
}
As if you want width to be adjusted to text width in li elements so you need javascript
and here is the code i have updated the jsfiddle
$(document).ready(function(){
total_nav_width = $('#nav').width();
main_link = $('#nav-bar > li > a')
textWidths = [];
totalTextWidth = 0;
main_link.each(function(){
textWidths.push($(this).width())
})
for (var i = 0; i < textWidths.length; i++) {
totalTextWidth += textWidths[i];
}
additionValues = (total_nav_width - totalTextWidth)/main_link.length;
main_link).each(function(){
intialWidth = $(this).width()
$(this).width( intialWidth + additionValues )
})
})
I have web page which works fine on browser on device but when i save to home screen to that web page and open from that there exits some screen sizing issue while opening it from icon from desktop.how to settle this.
My css code is below
*, body, div, h1, h2, h3, h4, h5, h6, p, ul, li, img, nav, header, section {
margin: 0; padding: 0; border: 0;
}
/* Styles */
body {
width:2048px;
height:748px;
background-color: #fff;
overflow: hidden;
font-family:Verdana, Geneva, sans-serif;
}
#container {
position:absolute;
width: 2048px; margin:0;
overflow-x:hidden;
overflow-y:hidden;
padding: 0;
}
.panel{
background-image:url(image/testing_file_1.png);
background-repeat:no-repeat;
height:748px;
width:1024px;
position:relative;
float: left;
padding:0;
bottom:0;
top:0;
margin:0;
display:inline;
}
.main_heading{
float:left;
margin:47px 0 0 60px;
font-size:24px;
font-weight:bold;
color:#FFF;
}
.main_heading_two{
float:left;
margin:47px 0 0 60px;
font-size:24px;
font-weight:bold;
color:#FFF;
}
.menu {
float:right;
margin: 39px 18px 0 0;
height:47px;
background-repeat:no-repeat;
}
.menu ul li {
list-style:none;
float:left;
}
.menu ul li a {
text-decoration:none;
display:block;
}
.menu .active {
text-decoration:none;
background-image:url();
}
.menu .stix {
width:2px;
font-size:0px;
background-image:url(image/seperator.gif);
background-repeat:no-repeat;
padding:0;
height:47px;
}
.midmenu {
list-style-type:none;
float:left;
height:62px;
width:61px;
margin: 248px 0 0 0;
}
.midmenu1 {
float:right;
list-style-type:none;
height:62px;
width:61px;
margin: 248px -500px 0 0px;
}
.rightclass img{
padding: 2px 20px;
float:right;
width:459px;
height:560px;
z-index:10;}
.text_paragraph{
float:left;
width:450px;
color:#FFF;
margin-left:80px;
margin-top:-525px;
}
.text_paragraph_1{
float:left;
width:420px;
color:#FFF;
margin-left:80px;
margin-top:-464px;
}
.text_paragraph_1 ul{
float:left;
color:#FFF;
margin-left:40px;
margin-top:5px;
}
.text_paragraph_1 ul li{
margin-top:5px;
}
.text_paragraph_2{
float:left;
width:450px;
color:#FFF;
margin-left:80px;
margin-top:-285px;
}
.text_paragraph_2 ul{
float:left;
color:#FFF;
margin-left:40px;
margin-top:5px;
}
.text_paragraph_2 ul li{
margin-top:5px;
font-style:italic;
}
.text_paragraph_2 p{
float:left;
color:#FFF;
margin-top:5px;
}
.linkbutton{
margin:-70px 0 0 70px;
float:left;}
small
{
font-size:9px;
}
.rightclass_one img{
margin: 2px 21px;
float:right;
width:459px;
height:560px;
z-index:10;}
.midmenu_1 {
list-style-type:none;
float:left;
height:62px;
width:61px;
margin: -45px 0 0 0;
}
.midmenu_2 {
float:right;
list-style-type:none;
height:62px;
width:61px;
margin: -45px -500px 0 0px;
}
.right_text{
float:right;
color:#000;
margin-right:-470px;
width:440px;
text-align:center;
margin-top:-270px;}
.image_21{
float:right;
margin-right:-390px;
margin-top:-190px;}
.ratemeter{
float:right;
margin-right:-410px;
margin-top:20px;}
.image_one{
float:right;
margin-right:-450px;
margin-top:92px;
z-index:5;
}
.image_two{
float:right;
margin-top:93px;
margin-right:-254px;
z-index:10;
}
.image_one_one{
float:right;
margin-top:95px;
margin-right:-317px;
z-index:10;
}
.image_two_two{
float:right;
margin-right:-452px;
margin-top:92px;
}
Try to put this in your head from your webpage:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport" />
Okay... that's completely clear, why you've got a fixed height... in your body you set height to 748px... thats not variable.
Try something like this:
I used this in my webapp and it worked fine:
body {
position: relative;
margin: 0;
-webkit-text-size-adjust: none;
min-height: 416px;
-webkit-touch-callout: none;
}
I tried to edit your code, but i don't know, if it will work for you. please have a try:
body {
width:2048px;
min-height:748px;
background-color: #fff;
overflow: hidden;
font-family:Verdana, Geneva, sans-serif;
-webkit-text-size-adjust: none;
-webkit-touch-callout: none;
margin: 0;
position: relative;
}
I am building a website from a bought theme, and in FF and in Chrome it looks perfect.But,on IE9 in compatibility mode, i am having a big problem.
One menu item has dropdown, and on IE, that dropdown menu is moved bellow the next menu item, and it is very hard to click o it.I tried "playing" around with CSS navigation and menu setting, but no luck...
Can anyone help:
/* Mainmenu Styling */
#mainmenu{
width:680px;
margin:1px 0px 0px 0px;
float:left;
}
.navigation{
width:630px;
margin-top:38px;
padding-left:160px;
float:left;
list-style-type:none;
}
.navigation ul{
margin:0px;
padding:0px;
list-style-type:none;
position:left;
clear:both;
}
.navigation li{
list-style-type:none;
padding:0px;
margin:0px;
float:left;
z-index:100;
position:relative;
}
.navigation li a{
font-size:16px;
text-decoration:none;
color:#a7a6a6;
display:block;
padding:10px 30px 16px 8px;
float:left;
z-index:100;
margin-right:0px;
}
.navigation li.current a, .navigation li a:hover, .navigation li.current li a:hover{
text-decoration:none;
color: #d23a3b;
}
.navigation li.current li a{
text-decoration:none;
color:#a7a6a6;
}
.navigation li li{
margin:0 0 0px 0px;
padding:0px;
position:relative;
z-index:100;
}
.navigation ul{
display:none;
position:absolute;
top:45px;
width:159px;
padding-bottom:5px;
z-index:100;
background-color:#fafafa;
border-top:none;
border-bottom:1px solid #d3d3d3;
border-left:1px solid #d3d3d3;
border-right:1px solid #d3d3d3;
}
.navigation li ul a{
width:109px;
height:auto;
float:left;
padding:0px 15px 8px 15px;
font-size:14px;
color:#a7a6a6;
line-height:24px;
z-index:100;
text-decoration:none;
}
Link is : http://goo.gl/LHDtg
try the below css for desired IE version
.navigation ul {
background-color: #FAFAFA;
border-color: -moz-use-text-color #D3D3D3 #D3D3D3;
border-style: none solid solid;
border-width: medium 1px 1px;
display: none;
padding-bottom: 5px;
position: absolute;
top: 85px; /* in your website it is 45px but for IE i just tried 85px which work fine*/
width: 159px;
z-index: 100;
}
see image for demo: I tried it in IE8