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.
Related
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 am trying to create a navigation bar on my website for a project. I get the bar just fine, but I can't get it to center on the page. I have tried a variety of different methods. Can someone help me out? I'm using an external style sheet. Here is the code for my main page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="tylerschevy.css">
</head>
<body>
<h1>Tyler Chevrolet</h1>
<ul>
<li>Home</li>
<li>Show Room</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Official Site</li>
</ul>
</body>
</html>
Here is my style sheet:
h1 {text-align:center}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
display: inline-block;
float:left;
}
a:link,a:visited{
display:block;
width:120px;
font-weight:bold;
color:black;
background-color:#FFFF33;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active{
background-color:#0033FF;
color:white;
}
jsfiddle
Add class="nav" to your <ul>, and then in your stylesheet create a new class:
.nav {
display: table; margin: 0 auto;
}
jsFiddle
Center ul
body {
text-align:center;
}
ul {
margin:0 auto;
display: inline-block;
}
I recommend to put your ul in one wrapper (so you don't touch the body) like this
<div class="wrapper">
<ul>...</ul>
</div>
css
.wrapper{
text-align:center;
}
ul {
margin:0 auto;
display: inline-block;
}
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
Im working on responsive code just now and for some reason i cant get 2 lists to display in the center of the div that's 100% width for mobile view. Is there something that im missing out in the css code below that might be causing this to not to display centered?
both lists have classes of .social-media and .top-nav
*** HTML ******
<div id="gezzamondo">
<div class="header">
<img class="logo" src="images/gezzamondo-logo.jpg" alt="Web designer Glasgow | Gezzamondo" title="Web designer Glasgow | Gezzamondo" />
<ul class="top-nav">
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
<ul class="social-media">
<li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
<li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
<li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
</ul>
</div><!-- close header -->
</div><!-- close gezzamondo -->
** CSS ****
body {
background-color:#C09;
font-family: 'Ubuntu', sans-serif;
margin:0;
padding:0;
}
img{
max-width:100%:
}
#gezzamondo{
width:100%;
margin:0 auto;
}
.header{
background-color:#FFF;
height:215px;
width:100%;
text-align:center;
}
#gezzamondo .logo{
width:183px;
height:83px;
margin:0 auto;
margin-top:20px;
}
#gezzamondo .top-nav{
list-style: none;
font-size:20px;
font-weight:300;
margin:0 auto;
}
#gezzamondo ul.top-nav li{
float:left;
margin-right:30px;
}
#gezzamondo ul.top-nav li a{
text-decoration:none;
color:#333333;
}
#gezzamondo .social-media{
position: absolute;
list-style: none;
width:162px;
margin:0 auto;
background-color:#06F;
}
#gezzamondo .social-media li img{
height:44px;
width:44px;
}
#gezzamondo .social-media li{
float:left;
margin-right:15px;
}
#gezzamondo .social-media li.last{
float:left;
margin-right:0px;
}
#gezzamondo ul.top-nav li a:hover{
border-bottom:7px #FF0099 solid;
color:#333333;
}
you are setting the position to absolute in #gezzamondo .social-media, just remove the position and it should center.
I've used the code you supplied, it looks a mess to in jsfiddle (example code is not complete etc). I think this should do it for you, or at least get you closer. What I did was basically wrap the social ul in two divs. center-social spans the full width and center-s trys to provide an idea of a width so the uls can be centered. Try it out on your actual page and it should display correctly. It's only applied on the social ul in the example.
<div id="center-social">
<div id="center-s">
<ul class="social-media">
<li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
<li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
<li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
</ul>
</div>
</div>
I am having problems overlaping two boxes. Should I use absolute positioning? z-index or what techniques are out there? By the way I want them to overlap is just that I want to make sure it works cross modern browsers. IE8 or +
I cant push the black box to the center why?
<!DOCTYPE HTML>
<html>
<head>
<title>Metropolitan State Hospital Intranet</title>
<link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>
<div id="masthead">
<div id="logo">
Logo here
</div><!--end logo-->
<div id="header">
<div id="horizontalMainMenu">
<ul>
<li>About Us |</li>
<li>Contact Us |</li>
<li>Metro Link |</li>
<li>WaRMSS Login </li>
</ul>
<br style="clear:left;"><!--I used float:left in the css to stack the list items now I need to clear it-->
</div>
</div>
<!--end header-->
</div><!--end masthead-->
<div id="container">
<div id="left_col">
<div id="verticalMainMenu">
<ul>
<li>Air Quality Control</li>
<li>CalATERS</li>
<li>Email Encryption</li>
<li>Employee Guide</li>
<li>Patient Special Function Requests</li>
<li>Request Home Address <br> Confidentiality Form</li>
<li>Travel Store</li>
</ul>
</div><!--verticalMainMenu ends here-->
</div><!--left_col ends here-->
<div id="page_content">
<div id="horizontalBodyMenu">
<ul>
<li>Home</li>
<li>Clinical</li>
<li>Administrative</li>
<li>Service</li>
<li>Search</li>
</ul>
<br style="clear:left">
</div>
</div><!--page_content ends here-->
</div>
<div id="footer">
Footer
</div><!--end footer-->
</body>
</html>
CSS:
/* CSS layout */
*{
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0;
}
#masthead {
min-width: 600px;
}
#logo {
float: left;
width: 200px;
background-color:yellow;/*I dont know what color this is in the template*/
}
#header {
background-color:yellow;/*I dont know what color this is in the template*/
height:300px;
}
#container {
clear: both;
min-width: 600px;
}
#left_col {
float: left;
width: 200px;
background-color:red; /*I dont know what color this is in the template*/
}
#page_content {
background-color:black;
margin:-50px 0 0 0;
width:95%;
}
#footer {
clear: both;
}
/* CSS common layout ends here*/
/* horizontalMainMenu starts here*/
#horizontalMainMenu{
width:100%;
background-color:transparent;
}
#horizontalMainMenu ul{
margin:0;
padding:0;
float:left;
}
#horizontalMainMenu ul li{
display:inline;
}
#horizontalMainMenu ul li a{
float:left;
text-decoration:none;
color:white;
padding:5px 9px;
}
/*horizontalMainMenu ends here*/
/*Body Menu Starts here*/
#horizontalBodyMenu ul{
list-style:none;
}
#horizontalBodyMenu ul li{
display:inline;
}
/* horizontalBodyMenu ends here*/
#horizontalMainMenu ul li a:visited{
color:white;
}
#horizontalMainMenu ul li a:hover,#mainMenu ul li .current{
color:#fff;
background-color:#0b75b2;
}
#verticalMainMenu ul{
margin:0;
padding:0;
list-style:none;/*removes the default bulltets*/
}
#verticalMainMenu li{
padding:0 0 0 10px;
background-image:url('');
background-repeat:no-repeat;
background-position:.5em;
line-height:200%;
}
#verticalMainMenu li a:hover{
color:#fff;
background-color:#0b75b2;
}
You should do it normally, and then pull "Box 2" upwards with margin-top: -80px.
This will work in "all browsers".
Here's a good article concerning negative margins:
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
You need to position box2 relative to box1. Lookup html relative positioning.
http://www.barelyfitz.com/screencast/html-training/css/positioning/