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.
Related
Is there a way to have part of the text align left and the other right and stay in one line? I tried a few similar answers on similar questions but the result isn' close to what I'm hoping for
Example: TANYA RUMPFF left and SONGS OF A BIRD RIGHT within the 440px
HTML:
</head>
<div class="dean">
<ul>
<li>TANYA RUMPFF <p align="right">Songs of a bird</p></li>
<li>STANCE OONK Bolwerk</li>
<li>HARALD VLUGT Voor en na het meesterwerk</li>
<li>CORINNE BONSMA Secret garden</li>
<li>STEFAN KASPER Glitterkikkerlikker</li>
</ul>
</div>
<body>
</body>
the CSS:
.dean {width:440px;
background-color:#74f4ff;
}
.dean ul {
padding-left:-12px;
list-style-type: none;
padding-left:0;
padding: 0;
}
.dean ul li {
list-style-position:inside;
}
.dean a:hover {
text-decoration:none;
color:#000;
background-color:#fff;
}
.dean li:hover{
margin-left:-14px;
color:#F90;
list-style-type:disc;
}
.dean ul a {
text-decoration:none;
display:block;
padding-left:20px;
width:400px;
color:#000;
font-family:Arial, Helvetica, sans-serif;
}
you may float first element and use text-align:right;
li a{
display:block;
text-align: right;
}
li b {
float: left;
}
<ul>
<li><b>TANYA RUMPFF</b>Songs of a bird
</li>
</ul>
HTML
<ul>
<div id="textbox">
<li class="alignleft">TANYA RUMPFF</li>
<li class="alignright">Songs of a bird</li>
</div>
<div style="clear: both;"></div>
<div id="textbox">
<li class="alignleft">STANCE OONK</li>
<li class="alignright">Bolwerk</li>
</div>
<div style="clear: both;"></div>
<div id="textbox">
<li class="alignleft">HARALD VLUGT </li>
<li class="alignright">Voor en na het meesterwerk</li>
</div>
<div style="clear: both;"></div>
<div id="textbox">
<li class="alignleft">CORINNE BONSMA</li>
<li class="alignright">Secret garden</li>
</div>
<div style="clear: both;"></div>
</ul>
css
.alignleft {
float: left;
}
.alignright {
float: right;
}
try this. it might work
I'm just barely learning how to code. I know there is more than one way to skin a cat, but what is the most efficient way to create a typical menu with lists, search fields, etc.?
I've been able to create all of the elements. I am having a very hard time getting the CSS correct to look the way I want.
Here is what my current project looks like.
This is what I am trying to achieve.
Thanks for the help! Any tips for a beginner would also be appreciated. Thank you!
Here is my HTML
<!DOCTYPE html>
<html lan="en">
<head>
<meta charset ="UTF-8">
<link href = "racemonster.css" rel="stylesheet" type="text/css">
<title>Home</title>
</head>
<body>
<div class="headerLeft">
<h1>Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart</li>
<li>Help</li>
<li>Sign In</li>
<li>Sign Up</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Here is the css
.headerLeft{color:#C4D82D;font-family:sans-serif;background-color:#323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight{color:#B1B3B5;font-family:sans-serif;background-color: #323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight ul {list-style-type: none;}
.headerRight ul li{display: inline;margin-right: 20px}
.headerRight ul li a{text-decoration: none;font-family: sans-serif;color: #898B8E;background-color:#323232;}
.headerRight ul li a:hover{color:#B1B3B5;}
.menu ul {list-style-type: none;width:100%; margin:0; padding-top:40px; padding-bottom:40px; background-color: #C4D82D}
.menu ul li {display:inline;margin-right: 20px;}
.menu ul li a {text-decoration: none;font-family: sans-serif;color:#323232;background-color: #C4D82D;}
.menu ul li a:hover {color:#999B9D;}
Updated Answer
Here is a solution... first check out my code (http://jsfiddle.net/ProgrammerKid/s01yuzm1/)
HTML
<div class="headers">
<div class="headerLeft">
<h1>Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart
</li>
<li>Help
</li>
<li>Sign In
</li>
<li>Sign Up
</li>
</ul>
</div>
<div class="header-padding"> </div>
</div>
<div class="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
CSS
.headers {
width: 100%;
position: static;
}
.headerLeft {
width: 50%;
float: left;
box-sizing: border-box;
height: 120px;
}
.headerRight {
width: 50%;
box-sizing: border-box;
float: right;
height: 120px;
}
.header-padding {
height: 120px;
}
What I like to do is group the two headers into one big <div> so that they both share a common parent (disregarding the <body>)... Then I added a CSS float property, and set their width to 50%. This will align them...
The <div class="header-padding">[...]</div> element is to provide the links sections with enough padding... Since we float the two div's (.headerRight, and .headerLeft) the links sections would appear underneath the headers... therefore by placing the header padding element, we are providing the links section with enough space.
Old Answer
There is no "correct" way to make a header
That being said, it would be really helpful to the people answering your question if you included the HTML/CSS/JS code...
For now I will use a very abstract method of conveying my tips to you...
If we said the element with the word "NAME" inside it was a <div id="1"></div> and the element in which your menu items are in would be <div id="2"></div>, and the links were <div id="3"></div>
Then here is what your CSS should look like:
#1 {
width: 40%;
float: left;
}
#2 {
width: 50%;
float: left;
}
the above will align both the elements together
and below we will reduce the padding to around 10px;
#3 {
padding: 10px;
}
and that's all I can help you with for now until you upload your code
I have created css as you required it is very straightforward and easy to understand.
enter link description here
.container {
background-color:#323232;
}
.title {
color:#C4D82D;
margin-left:40px;
}
.headerLeft {
width:50%;
float:left;
height:100px;
display:inline-block;
}
.headerRight {
width:50%;
height:100px;
display:inline-block;
}
.headerRight ul li {
display:inline;
color:#B1B3B5;
}
.headerRight ul li a {
color:#b1b3b5;
}
.headerRight ul li a:hover {
color:#B1B3B5;
}
.menu {
background-color:#C4D82D;
height:50%;
position:relative;
padding-top:20px;
margin:(auto, auto, 0, 0);
}
.menu ul li {
display:inline;
}
.menu ul li a {
color:#323232;
}
.menu ul li a:hover {
color:#999B9D;
}
<body>
<div class="container">
<div class="headerLeft">
<h1 class="title">Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart |
</li>
<li>Help |
</li>
<li>Sign In |
</li>
<li>Sign Up |
</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</body>
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
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 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/