i am trying to create a menu bar with list items.i applied css for the list items.i want all of them to lie on a single line i mean when zoom in to 500% and zoom out to 25% all the list items should be in same line.but in my implementation they are going out of the line.i'm a beginner please help me
css:
.menu
{
margin-top:5px;
margin-bottom:5px;
background-color:#4c4c4c;
color:white;
position:relative;
display:inline-block;
text-align:center;
padding:0px 85px 0px 85px;
border:2px solid #4c4c4c;
}
#menuitem1
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
text-align:center;
margin:auto;
}
#menuitem4
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
<html>
<body >
<div id="page">
<div id="bar">
<ul>
<li class="menu" id="menuitem1" >Home</li>
<li class="menu">contact us</li>
<li class="menu">pay</li>
<li class="menu" id="menuitem4" >plans</li>
</ul>
</div>
</div>
</body>
</html>
jsfiddle
Set the width of the .menu in percentage so the li's are responsive.
JSFIddle
HTML
<body >
<div id="page">
<div id="bar">
<ul>
<li class="menu" id="menuitem1" >
Home
</li>
<li class="menu">
contact us
</li>
<li class="menu">
pay
</li>
<li class="menu" id="menuitem4" >
plans
</li>
</ul>
</div>
</div>
</body>
CSS
.menu
{
margin-top:5px;
margin-bottom:5px;
background-color:#4c4c4c;
color:white;
position:relative;
display:inline-block;
text-align:center;
padding:0px 0px 0px 0px;
border:2px solid #4c4c4c;
width:20%;
}
#menuitem1
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
text-align:center;
margin:auto;
}
#menuitem4
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
You can try using percentage width values for width of your li elements.
.some-class {
width: 25%
}
I've made some changes on jsfiddle just to show it is possible with this kind of implementation.
If you are concerned about mobile devices. Take a look at meta tags with device-width.
You can add:
ul {
white-space: nowrap;
}
to prevent wrapping -> jsfiddle
Related
This question already has answers here:
inline-block vertical positioning issue
(2 answers)
Closed 3 years ago.
I just started learning html and css, and i have a problem with this menu.
When you hover on an element it should higlight it by expanding padding and changing the border color (in the code this is made in a strange way but it because initially it was meant to have a caption written in the "li" ) but when you hover on an element other 4 element go down for some reason.
I already tried to messing around with margin, paddings and position
nav #MotherList{
list-style-type:none;
margin:0px;
padding:0px;
text-align:center;
}
li.navoptions {
width:103px;
height:93px;
padding:0px;
border-radius:4px;
margin-left:5px;
margin-right:5px;
position:relative;
top:4px;
color:black;
text-align:center;
background-color:red;
display:inline-block;
}
.navoptions:hover{
background-color:white;
padding:2px;
position:relative;
top:2px;
margin-left: 3px;
margin-right: 3px;
}
.navoptions div {
width:100px;
height:90px;
border-radius:4px;
margin-left:auto;
margin-right:auto;
position: relative;
top:1.5px;
background-color:yellow;
background-size:100px 90px;
background-repeat: no-repeat;
text-indent: -999999px;
}
#nav1{
background-image:url("../images/nav1.png");
}
#nav2{
background-image:url("../images/nav2.png");
}
#nav3{
background-image:url("../images/nav3.png");
}
#nav4{
background-image:url("../images/nav4.png");
}
#nav5{
background-image:url("../images/nav5.png");
}
<header>
<ul class="MainList">
<li class="MainListMember">Home</li>
<li class="MainListMember">Products</li>
<li class="MainListMember" id="Dave" onclick="window.location.href='td.html'">Logo</li> <!-- Broken <a href> -->
<li class="MainListMember">Contacts</li>
<li class="MainListMember">Infos</li>
</ul>
</header>
<nav>
<ul id="MotherList">
<li class="navoptions"><div id="nav1">opt 1</div></li>
<li class="navoptions"><div id="nav2">opt 2</div></li>
<li class="navoptions"><div id="nav3">opt 3</div></li>
<li class="navoptions"><div id="nav4">opt 4</div></li>
<li class="navoptions"><div id="nav5">opt 5</div></li>
</ul>
</nav>
A copy of the project: http://www.mediafire.com/file/blgdejll656uy8y/test_project.rar/file
there are comments in there, some may be wrong
Are you looking for this?
Give me some info and ill update my answer.
.navoptions:hover{
background-color:white;
border: 1px solid red;
padding: 50px;
}
.navoptions {
width:100px;
height:90px;
float: left;
border-radius:4px;
margin-left:5px;
margin-right:5px;
position: relative;
top:1.5px;
border: 1px solid black;
background-color:yellow;
background-size:100px 90px;
background-repeat: no-repeat;
text-indent: -999999px;
}
#nav1{
background-image:url("../images/nav1.png");
}
#nav2{
background-image:url("../images/nav2.png");
}
#nav3{
background-image:url("../images/nav3.png");
}
#nav4{
background-image:url("../images/nav4.png");
}
#nav5{
background-image:url("../images/nav5.png");
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<header>
<ul class="MainList">
<li class="MainListMember">Home</li>
<li class="MainListMember">Products</li>
<li class="MainListMember" id="Dave" onclick="window.location.href='td.html'">Logo</li> <!-- Broken <a href> -->
<li class="MainListMember">Contacts</li>
<li class="MainListMember">Infos</li>
</ul>
</header>
<div id="MotherList">
<div class="navoptions" id="nav1"></div>
<div class="navoptions" id="nav2"></div>
<div class="navoptions" id="nav3"></div>
<div class="navoptions" id="nav4"></div>
<div class="navoptions" id="nav5"></div>
</div>
Why is there border showing up around H3 in the red div, also on the slider div ?
I could not find any border code in the css.
More text so i can submit the question
Why is there border showing up around H3 in the red div, also on the slider div ?
I could not find any border code in the css.
Please helpWhy is there border showing up around H3 in the red div, also on the slider div ?
I could not find any border code in the css.
Please help
#charset "utf-8";
/* CSS Document */
.clearfix{ clear:both;}
body{
}
#font-face {font-family: Orator Std;
src: url(fonts/OratorStd.otf);}
#font-face {font-family: Century Gothic;
src: url(fonts/GOTHIC.TTF);}
.wrapper{ width:100%;
margin-left:auto;
margin-right:auto;
background-image:
overflow:hidden;
}
.header{ width:100%;
height:240;
margin-bottom:10px;
background:
}
.bannerbox {width:100%;
height:150px;
padding-top:50px;
; background-color:#FFF;
}
.bannercntr{
font-family: "Orator Std";
}
.bannergothic{font-family:"Century Gothic";
border: none;}
.blockimgs{height:250px;
width:250px;
float:left;
}
.megablock{width:1000px;
height:500px;
margin-left: auto;
margin-right:auto;
}
.blockimgsw1{height:250px;
width:250px;
float:left;
background-image:url(Images/australia.jpg)
}
.blockimgsw1:hover { background-image: url(Images/australia%20-%20Copy.fw.png)}
.blockimgsw2{height:250px;
width:250px;
float:left;
background-image: url(Images/Canada.jpg)
}
.blockimgsw2:hover { background-image: url(Images/Canada%20-%20Copy.fw.png)}
.blockimgsw3{height:250px;
width:250px;
float:left;
background-image: url(Images/china.jpg)
}
.blockimgsw3:hover { background-image: url(Images/china%20-%20Copy.fw.png)}
.blockimgsw4{height:250px;
width:250px;
float:left;
background-image: url(Images/dubai.jpg)
}
.blockimgsw4:hover { background-image: url(Images/dubai%20-%20Copy.fw.png)}
.blockimgsw5{height:250px;
width:250px;
float:left;
background-image: url(Images/europe.jpg)
}
.blockimgsw5:hover { background-image: url(Images/europe%20-%20Copy.fw.png)}
.blockimgsw6{height:250px;
width:250px;
float:left;
background-image: url(Images/singapore.jpg)
}
.blockimgsw6:hover { background-image: url(Images/singapore%20-%20Copy.fw.png) }
.blockimgsw7{height:250px;
width:250px;
float:left;
background-image:url(Images/southAfrica.jpg)
}
.blockimgsw7:hover { background-image: url(Images/southAfrica%20-%20Copy.fw.png)}
.blockimgsw8{height:250px;
width:250px;
float:left;
background-image: url(Images/USA.jpg)
}
.blockimgsw8:hover { background-image: url(Images/USA%20-%20Copy.fw.png)}
.ddmenubox{width:700px;
float:right;
}
.logodiv{float:left;}
<!-----Drop Down Menu---->
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000;z-index:1}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
<!----Drop Down Menu END--->
.rightheader{float:right;
height:240px;
width:500px;}
.horilist{ float:left;
list-style:none;
font-family:"Century Gothic";
font-size:30px;
font-weight:800;
padding-right:20px;
margin:0px auto;
}
.subbox {width:1000px;
height:280px;
padding-top:20px;
background-image:url(Images/matte-red.jpg);
background-repeat:repeat;
overflow:hidden;
}
<!-----SLIDER---->
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; height:400px;}
.banner ul li { float: left; }
<!-----SLIDER--END---->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Travel the World</title>
<link rel="stylesheet" type="text/css" href="main.css">
<!-----Slider----->
<!-----Slider end---->
</head>
<body>
<div class="header"> <div class="logodiv"> <img src="Images/One.png"> </div>
<div class="ddmenubox">
<ul id="drop-nav">
<li>Support</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Content Management
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
<li>Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<!---Insert Slider---->
<div class="banner">
<ul>
<li style="background-image:url(Images/002.jpg)">This is a slide.</li>
<li>This is another slide.</li>
<li>This is a final slide.</li>
</ul>
</div>
<!------SLIDER AREA END---->
<div class="bannerbox">
<center>
<h3 class="bannergothic">You can simple dream a great vacation. But it is a tough job to make it into a reality and to find <br>a travel company who delightfully crafts your trip. <br>At One World Holidayz we make it our pleasure to transform your dream holiday into a reality.</h3>
</center>
</div>
<div class="megablock">
<div class="blockimgsw1">
</div>
<div class="blockimgsw2">
</div>
<div class="blockimgsw3">
</div>
<div class="blockimgsw4">
</div>
<div class="blockimgsw5">
</div>
<div class="blockimgsw6">
</div>
<div class="blockimgsw7">
</div>
<div class="blockimgsw8">
</div>
</div>
<div class="clearfix"></div>
<div class="bannerbox">
<center>
<h2 class="bannercntr"> ADVENTURE IS EVERYWHERE </h2>
<h3 class="bannergothic"> You can simple dream a great vacation. But it is a tough job to make it into a reality and to find a travel company who delightfully crafts your trip. At One World Holidayz we make it our pleasure to transform your dream holiday into a reality.</h3>
</center>
</div>
<div class="subbox">
<ul class="horilist">
<li class="horilist">
China
</li>
<li class="horilist">
Australia
</li>
<li class="horilist">
Canada
</li>
<li class="horilist">
Dubai
</li>
<li class="horilist">
New Zealand
</li>
<li class="horilist">
Europe
</li>
</ul>
<ul>
<li class="horilist">
Hong Kong
</li>
<li class="horilist">
Asia
</li>
<li class="horilist">
USA
</li>
<li class="horilist">
South Africa
</li>
<li class="horilist">
United Kingdom
</li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>
<script>
$(document).ready(function(){
$('.banner').unslider();
});
</script>
</body>
</html>
You have your
ul li{
display: block;
position: relative;
float: left;
border: 1px solid #000;
z-index: 1;
}
Which the border 1px make your slider to hold the border. So just remove the border or just make em 0 and you are good to go with your slider with no border.
I use this code below to show up right column on my wordpress blog. (List structure is generated by wp_list_categories.)
<div class="rcolumn">
<li class="categories">Categories
<ul>
<li class="cat-item1">
Cat1
</li>
</ul>
<ul>
<li class="cat-item2">
Cat2
</li>
</ul>
</li>
</div>
The thing is, that the contents of this column ignore div and are actually outside of it. Whole li categories goes outside of rcolumn.
.lcolumn {
display:inline;
float:left;
}
.rcolumn {
float:left;
display:inline;
padding:0 5px;
}
.categories {
margin-top:10px;
border:1px solid #aaa;
list-style:none;
}
What am I missing?
.rcolumn {
float:left;
display:inline;
padding:0 5px;
overflow: hidden; <-- try this?
}
EDIT: I have found this code, which appears to be sorta working the way I want it to. You can check it out live at EDIT - I still can't get it to sit within my #main div though! I've tried using both 100% and 990px within #menu span for width - neither seem to work.
<div id="menu">
<ul>
<li>Menu item 1</li>
<li>Menu item 3</li>
<li>Menu item 2</li>
</ul>
<span></span>
</div>
#menu {
text-align: justify;
}
#menu * {
display: inline;
}
#menu span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
END EDIT
I have a menu I'm having some issues with - mainly horizontal issues :)
Basically, when you view the website in Chrome, the menu is centered the way I want it to be.
When you view the website in FireFox, the menu is 5-10px short on the right side.
And when you view it in Internet Explorer, the menu is not sitting left and is overflowing off of the right side of the page.
View it for yourself at: EDIT (Keep in mind, index2.php here, not the original index)
So my question is:
How can I style/code this menu correctly to fit within my parent div?
I did look through previous topics with similar questions, however, was unable to make anything work. Thank you in advance :)
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EDIT </title>
<link rel="stylesheet" href="style.css" type="text/css">
<style>
#sliderwrapper {width:635px;}
#control {
text-align:right;
margin-top:5px;
}
#control a {
background:#87e7fa;
padding:0 5px;
color:#FFFFFF;
text-transform:uppercase;
text-decoration:none;
margin-left:5px;
}
#control a.active {background:#265db9;}
#control a span {visibility:hidden;}
.sexyslider-control span {display:none;}
.sexyslider-title {
font-weight:bold;
color: #FFFFFF;
}
</style>
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sexyslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").SexySlider({
width : 981,
height : 500,
delay : 3000,
strips : 18,
autopause : false,
<!--navigation : '#navigation',--!>
control : '#control',
direction : 'left',
effect : 'fade'
});
});
</script>
<body>
<div id="wrapper">
<div id="header"><img src="images/header.gif" alt="" /></div>
<div id="main">
<ul>
<h2><li>Home</li>
<li>Meet Our Team
<li>Office Information</li>
<li>First Visit</li>
<li>Dental Topics</li>
<li>Office Tour</li>
<li>Contact Us</li></h2>
</ul>
<div id="sliderwrapper" class="clearfloat">
<div id="slider" style="width:100%">
<img src="images/slide1.jpg" alt="" "/>
<img src="images/slide4.jpg" alt="" "/>
<img src="images/slide2.jpg" alt="" " />
<img src="images/slide3.jpg" alt="" "/>
<img src="images/slide4.jpg" alt="" "/>
<img src="images/slide5.jpg" alt="" "/>
<img src="images/slide6.jpg" alt="" "/>
</div>
<div id="control" style="margin-top:10px; margin-right:-347px;"></div>
</div>
</div>
<div id="footer"><img src="images/footer.gif" alt=""/></div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
background-color: #87e7fa;
font-size:100%;
text-align:center;
}
#wrapper {
margin:0 auto;
padding:0;
text-align:center;
background:url('images/bg.gif') repeat-y;
width:1200px;
}
#header {
width:1200px;
height:358px;
}
#main {
width:990px;
height:100%;
margin:0 auto;
text-align:left;
}
#footer {
clear:both;
width:1200px;
height:354px;
}
h2 {
font-family:soos_font;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
}
ul
{
list-style-type:none;
margin:10 0;
padding:0;
}
li
{
display:inline;
width:100%;
margin:0 auto;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#87e7fa;
text-align:center;
padding:7px;
text-decoration:none;
text-transform:uppercase;
border-radius:5px;
margin:0 auto;
}
a:hover,a:active
{
background-color:#3650a2;
}
I have update you css
css
#main {
width:990px;
height:100%;
margin:0 auto;
text-align:center;
}
#main ul{
list-style-type:none;
margin:0;
padding:0;
}
#main li{
display:inline-block;
/*width:100%;*/
margin:0 3px;
}
html
<div id="main">
<ul>
<li>Home</li>
<li>Meet Our Team
<li>Office Information</li>
<li>First Visit</li>
<li>Dental Topics</li>
<li>Office Tour</li>
<li>Contact Us</li>
</ul>
<br style="clear:both;"/>
</div>
here is the jsFiddle File
Also don't wrap li in to h2, this is not a valid code.
I'm trying to create a mega drop down menu just like the one from the following link : http://i48.tinypic.com/2ln97ip.png
I have created this fiddle but the things aren't going well because of positioning and border of second ul is not ok :(
http://jsfiddle.net/H8FVE/16/
<ul id="firstUl">
<li><a>mainSimple</a></li>
<li>
<a>MainMenu</a>
<ul id="secondUl">
<li>
<a>SecondLevel1</a>
<ul id="lastLevel">
<li>
<a>LastLevelX</a>
</li>
<li>
<a>LastLevelY</a>
</li>
</ul>
</li>
<li>
<a>SecondLevel2</a>
<ul id="lastLevel">
<li>
<a>LastLevel</a>
</li>
<li>
<a>LastLevel</a>
</li>
<li>
<a>LastLevel</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
#firstUl{height:42px; position:relative; background:#ccc;}
#firstUl li{ float:left; border:1px solid #fff; padding:10px; border:1px solid red;}
#secondUl{display:none; background:#fafafa; }
#secondUl li{
float:left;
display:block;
border:1px solid #eaeaea;
}
#lastLevel{
display:none;
}
#firstUl li:hover> #secondUl{
border:1px solid red;
display:block;
position:absolute;
top:100%;
}
#firstUl li #secondUl li:hover> #lastLevel{
display:block;
position:absolute;
top:100%;
left:0;
}
#firstUl li #secondUl li #lastLevel li{
float:none;
}
Can someone help me with this pls.
Try setting the #secondUl li to position:relative so that the child's (UL) position depends on it:
#secondUl li {
...
position: relative;
}