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/
Related
I made a menu and used width: 100% to make sure it comes across the entire page but there were white spaces on the right and left side (looks more like width:95%?) So I then tried using position:absolute top:0 left:0 which solved the problem and made the menu look like width 100%,
Unfortunately, this operation caused my h2 header element to disappear and I cannot find a way to properly place it now?
JSBin code of my html and css code
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
position:absolute;
left:0;
top:0;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
How come position:absolute makes my h2 disappear?
To avoid the default margins in general, you can add margin: 0; to html and body.
To place your absolutely positioned menu behind the h2element, you can apply z-index: -1, which moves it behind its parent element.
In my snippet below I also changed the text-centering to right alignment and added a padding-right on the ul. You can play around with those values so they fit your needs.
html, body {
margin: 0;
}
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding-right: 30px;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:right;
width:100%;
height:50px;
background-color:paleGoldenRod;
position: absolute;
z-index: -1;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
Add padding-top: 50px (the menu height) to body.
body {
padding-top: 50px;
}
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
position:absolute;
left:0;
top:0;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
JSBin
Position in css is tricky thing, everyone uses absolute positioning for placement of element.but before using it. you need to know about what the position is all about. when we use position:absolute then element act like it is floating on top of all element.while using absolute positioning element goes out from html normal flow.
you have used position absolute for both menu links and footer, So these elemment are floating on top of other elements.enter code here
use position absolute and fixed when you want to stick element to specific position.
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
if you still want to use position absolute for menu, so you need to use proper margin for h2 tag.so that h2 tag will not be hidden beside menu links.
I have used the global element selector a:hover{} for hovering over most elements in the web page. But for all the elements in the footer, I would like to override the hovering effect.
So my question is how can I override the element selector a:hover{} when it is used elsewhere since I don't want all the a elements to hover
HTML
<body>
<div class="header">
<div class="header_logo">
<img id ="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>ABOUT CIVIC<li>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
<img src="images/clt3.jpg">
</div>
<div class="footer">
<div class="footer_upperspace">
<ul>
<li>CIVIC HOME</li>
<li>INQUIRY</li>
</ul>
</div>
</div>
</body>
CSS
/*Main Header Container */
.header{
color:#FFFFFF; /*White Color*/
height:60px;
width:100%;
margin:auto;
}
/*Inner Logo Container on the left*/
.header_logo{
width:40%;
height:100%;
float:left;
}
#logo{
height:100%;
top:0;
left:0;
width:50%;
}
/*Inner Title Container on the right*/
.header_title{
width:60%;
float:left;
}
#titles{
position:absolute;
top:20px;
font-family: "Times New Roman", Times, serif,Georgia;
font-size:97%;
color:#B8B8B8;
}
ul{
list-style-type:none;
}
li{
display:inline-block;
}
a{
text-decoration: none;
color:inherit;
padding: 21px 10px;
}
ul a:hover{
background-color:#666699; /*Purple Color */
}
ul li ul{
display:none; /*Hiding The Child Elements*/
}
li ul li{
padding: 21px 10px;
background-color:#666699 ;
}
ul li:hover ul{ /*For all the ul elements whose parent is being hovered over*/
display: block;
position: absolute;
width: 100%;
top: 40px;
left: 0;
white-space: nowrap;
}
ul li ul li:hover{
background-color:#C0C0C0;
}
*{border:0;
margin:0;
padding:0;
}
/*Main Content Section*/
.content{
height:525px;
margin:auto;
background-color:#C0C0C0;
}
img{
width:1280px;
height:515px;
}
/*Footer*/
.footer {
margin:auto;
background-color:#707070;
height: 100px;
}
.footer_upperspace {
background-color:#C0C0C0;
height:40%;
}
I have attached the JSFiddle to give you an insight of what I am doing
https://jsfiddle.net/rajivsr2309/b2o3Lzny/
You can always use a stricter selector (with higher specificity) to override the less strict one. For example:
a:hover {color: red}
a.cancel:hover {color: green}
Some link
Some link
Some link
Some link
Some different link
Some link
In your case, the selector is: .footer a:hover: https://jsfiddle.net/b2o3Lzny/2/
Again, since you're trying to undo a general rule, perhaps your approach is wrong and you could consider making a specific class just for those anchors you want to style, not all of the anchors, and then undo many of them.
Try this:
.footer a:hover { background-color: yellow; }
Revised Demo
With .footer preceding a:hover, this is now a descendant combinator selector which matches only hovered anchor elements that exist within elements with class footer.
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;
}
Hi I'm trying to make a second navigation bar on my homepage the same as http://www.adventurelink.com/Gallery/Destination.com.
I have the first (top nav bar & text) in place but the text (links) for the second only sits underneath and I'm not sure why as I copy and pasted the code changing the "id" names. At the moment I'm just setting the layout before adding real content but need to sort this first. Any help would be much appreciated.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="file:///C|/Users/Deniz/Desktop/Website/css/2nd.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--TOP NAVIGATION BAR AND LOGO-->
<div id="topnavbar">
<div id="logo"></div>
<nav id="topnavlinks">
<ul>
<li>About</li>
<li>Profile</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</nav>
</div>
<!--SPACE FOR CHANGING PICTURES-->
<div id="picspace"></div>
<!--BOTTOM NAVIGATION BAR-->
<div id="botnavbar"></div>
<nav id="botnavlinks">
<ul>
<li>Destinations</li>
<li>Activities</li>
<li>Things to do</li>
<li>Accomodation</li>
<li>Transport</li>
</ul>
</nav>
<!--CONTENT---->
<div id="content"></div>
<!--FOOTER-->
<div id="footer"></div>
</body>
</html>
CSS:
* {
margin:0px;
}
#topnavbar{
height:50px;
margin:0 auto;
background: -webkit-linear-gradient(#e78869, #ad4e2f); /* For Safari */
background: -o-linear-gradient(#e78869, #ad4e2f); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#e78869, #ad4e2f); /* For Firefox 3.6 to 15 */
background: linear-gradient(#e78869, #ad4e2f); /* Standard syntax (must be last) */
}
#topnavlinks{
width:500px;
float:right;
margin: 0 auto;
}
#topnavlinks ul{
margin: 0 auto;
list-style:none;
height:35px;
}
#topnavlinks li{
margin: 0 auto;
height:35px;
float:left;
}
#topnavlinks li a:link, a:visited{
display:block;
color:#fff;
padding:10px;
text-decoration:none;
}
#topnavlinks li a:hover{
background-color:#6880af;
}
#logo{
}
#picspace{
height:400px;
background-color:grey;
}
#botnavbar{
height:50px;
background: -webkit-linear-gradient(#6880af, #314a79); /* For Safari */
background: -o-linear-gradient(#6880af, #314a79); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#6880af, #314a79); /* For Firefox 3.6 to 15 */
background: linear-gradient(#6880af, #314a79); /* Standard syntax (must be last) */
}
#botnavlinks{
width:500px;
float:right;
margin: 0 auto;
}
#botnavlinks ul{
margin: 0 auto;
list-style:none;
height:35px;
}
#botnavlinks li{
margin: 0 auto;
height:35px;
float:left;
}
#botnavlinks li a:link, a:visited{
display:block;
color:black;
padding:10px;
text-decoration:none;
}
#botnavlinks li a:hover{
background-color:#e78869;
}
#content{
height:500px;
background-color:grey;
}
#footer{
}
It's still going to need a lot more styling but the reason for this is because in your botnavbar you closed the div before you put the links in it.
<!--BOTTOM NAVIGATION BAR-->
<div id="botnavbar"></div> <!-- here, this shouldn't be closed yet -->
<nav id="botnavlinks">
<ul>
<li>Destinations</li>
<li>Activities</li>
<li>Things to do</li>
<li>Accomodation</li>
<li>Transport</li>
</ul>
</nav>
You created the "botnavbar" and immediately closed that div, so the links aren't going to be inside that bar. Just move the </div> down.
<!--BOTTOM NAVIGATION BAR-->
<div id="botnavbar">
<nav id="botnavlinks">
<ul>
<li>Destinations</li>
<li>Activities</li>
<li>Things to do</li>
<li>Accomodation</li>
<li>Transport</li>
</ul>
</nav>
</div>
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.