please can someone help with my website reponsiveness, at the moment when the viewport shrinks the website messes up and i dont know what i have done in the code to make it like that.
thanks in advance!
body {
background-color: #F2F2F2;
}
.body1 {
background-color: #FFFFFF;
margin-left: 10vw;
width: 79.4vw;
height: 80vw;
max-width: 1000vw;
position: absolute;
overflow: hidden;
margin-top: 0px;
font-size: 1.6vw;
padding: 5px 5px;
}
.webheadimg {
margin-left: 10vw;
width: 80vw;
max-width: 1000vw;
max-height: 150vh;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
overflow: hidden;
}
#menu {
width: 80vw;
font-size: 1vw;
max-font-size: 1.6vw;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-color: #FFFFFF;
font-size: 1vw;
max-font-size: 1.6vw;
text-align: center;
margin-left: 10vw;
background-color: #CA2A2A;
border-radius: 0px;
max-width: 1000vw;
}
#menu ul {
height: auto;
padding: 0.8vw 0px;
margin: 0px;
}
#menu li {
display: inline;
font-size: 1vw;
max-font-size: 16vw;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
padding: 0.8vw 0.8vw 0.8vw 0.8vw;
font-size: 1.5vw;
max-font-size: 16px;
}
#menu a:hover {
color: #000000;
background-color: #FFFFFF;
}
.webheadlogo {
position: absolute;
overflow: hidden;
margin-left: 10vw;
float: left;
height: auto;
width: 5%;
padding: 5px 5px;
}
#media (max-width: 1285px) {
body {
background-color: #F2F2F2;
}
.body1 {
background-color: #FFFFFF;
width: 72.8vw;
height: 100vw;
overflow: hidden;
font-size: 3vw;
margin-left: 23.4vw;
padding: 5px 5px;
bottom: 48.9vw;
position: relative;
}
.webheadimg {
width: 96vw;
height: auto;
max-width: auto;
max-height: auto;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
margin-left: 1vw;
}
#menu {
width: 21.4vw;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-size: 1vw;
text-align: left;
margin-left: 1vw;
background-color: #CA2A2A;
border-radius: 0px;
max-width: 96vw;
}
#menu ul {
height: auto;
padding: 0.5vw 0vw;
margin: 0px;
}
#menu li {
display: block;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
padding: 0.5vw 0.5vw 0.5vw 0.5vw;
font-size: 3vw;
display: block;
}
#menu a:hover {
color: #000000;
background-color: #FFFFFF;
}
.webheadlogo {
position: absolute;
overflow: hidden;
margin-left: 1vw;
float: left;
height: auto;
width: 10%;
padding: 5px 5px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Hull Daily News</title>
</head>
<<body>
<div>
<img class="webheadlogo" src="logo1.png" alt=".logo">
<img class="webheadimg" src="Webhead.jpg" alt=".Webhead" />
</div>
<div id="menu">
<ul>
<li>Home
<li>Breaking News
</li>
<li>Sport
</li>
<li>Hull Today
</li>
<li>Property
</li>
<li>Social Media
</li>
<li>Music
</li>
<li>Reviews
</li>
<li>Movies
</li>
<li>Weather
</li>
</ul>
</div>
<div class="body1">
Text Box
</div>
</body>
as you can see the 'text box' jumps around the screen and there is a random grey box at the bottom of the page, i would be so grateful if someone could find me a fix for this
example
You need add
<head>
...
<meta name="viewport" content="width=device-width"/>
...
</head>
You are missing viewport in <head> tag. You can use this for example:
<meta name="viewport" content="width=device-width"/>
Related
When you resize the browser, the site elements are superimposed on each other.
I've tried to use margin: auto and position:fixed but it doesn't work
Please, advice me, that i must to change or add to fix this problem
P.S. If you can - write in which exactly code I must add/change that i need
This is my site
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
overflow: auto !important;
}
body {
height: 100%;
margin:0px;
overflow: auto !important;
}
wrapper{
display: flex;
flex-direction: column;
height: 100%;
}
.HeaderCenter {
background-repeat: no-repeat;
background-position: top, left;
position: fixed;
vertical-align: top;
width:100%;
height:80px;
z-index: 1;
}
.HeaderLeft {
position: fixed;
background-repeat: no-repeat;
width:12.5%;
height:20.4%;
margin: 5px -4px;
z-index: 0;
}
.HeaderInt {
background-repeat: no-repeat;
position: fixed;
left: 12%;
width:7%;
height:93px;
z-index: 0;
}
.News {
color: #6a70b3;
font-family: verdana, arial, helvetica, "sans-serif";
font-size: 13.3333px;
line-height: 17px;
font-weight: 700;
text-align: left;
margin-right: 50%;
top: 150px;
}
section { /*Контент*/
font-family: Arial;
color: #000000;
font-size: 12.8px;
vertical-align: middle;
text-align: left;
width:900px;
height:300px;
position:fixed;
left:260px;
top:110px;
padding-bottom: 90px;
flex: 1 0 auto;
}
section a:visited {
color:#003399;
}
section a:hover {
color: black;
}
aside { /*Sidebar*/
padding: 50px 10px;
margin: 0% auto;
position: fixed;
float:left;
list-style-type: none;
width:190px;
background-image: url(images/side.PNG);
background-repeat:repeat-y;
background-size: 75%;
height: 69%;
}
aside li {
font-family: Verdana, Arial , "sans-serif", helvetica;
font-size: 11px;
margin-bottom: 10px;
width: 140px;
font-weight: 700;
text-align: left;
line-height: 15px;
}
/* Стиль верхней панели навигации */
.topnav {
margin:6% auto;
margin-left: 20%;
overflow: hidden;
background-color: red;
text-align:center;
}
/* Стиль ссылок навигации */
.topnav a {
margin:0 auto;
display:inline;
margin-left:3px;
line-height: 15px;
font-size: 11px;
font-weight: 700;
float:left;
font-family: verdana, "sans-serif", helvetica, arial;
display: block;
color: #f2f2f2;
text-align: center;
padding: 5px 10px;
text-decoration: none;
}
/* Изменение цвета при наведении */
.topnav a:hover {
color: orange;
}
ul {
list-style-type: none; /* Убираем маркеры */
text-decoration: none; /* Убираем подчёркивание */
margin-left: 0; /* Отступ слева в браузере IE и Opera */
padding-left: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */
}
ul a{
list-style-type: none;
text-decoration: none;
color: darkblue;
}
ul a:hover{
list-style-type: none;
text-decoration: none;
color:orange;
}
#mainText {
text-align: center;
}
.border {
color:black;
}
table, th, td {
border: 1px solid black;
}
footer { /*Подвал*/
text-align: center;
margin-right:0;
left: 0;
bottom: 0;
width: 100%;
height: 0px;
color: white;
text-align: center;
min-height: 50px;
float: none;
position: absolute;
}
footer a{
font-family: Arial;
font-size: 10.6667px;
line-height: 14px;
font-weight: 400;
position: absolute;
left: 5%;
bottom: 2px;
width: 100%;
color: white;
text-align: center;
text-decoration: none;
color:#06C;
height: 40px;
float: none;
}
.footerline {
position: absolute;
bottom: 1px;
left: 0px;
float: none;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Новости - Анонсы</title>
</head>
<body>
<div id="wrapper">
</div>
<header>
<img src="images/header.PNG" class="HeaderCenter" alt="Header">
<img src="images/header1.png" class="HeaderLeft" alt="Header">
<img src="images/header2.png" class="HeaderInt" alt="Header">
</header>
<nav>
<div class="topnav"> <!--Верхнее меню -->
Новости
О Суде
Решения КС РФ
Заседания КС РФ
Контакты
</div>
</nav>
<section> <!-- Основной текст -->
<h3 class="News">Новости - Анонсы</h3>
<br>
<br>
<p>10 ноября 2017 года Конституционный Суд РФ провозгласит Постановление по делу о проверке конституционности Федерального закона «О внесении изменений в отдельные законодательные акты РФ в части совершенствования законодательства о публичных мероприятиях»</p>
<br>
<p>( подробнее...)</p>
<br>
<p>7 ноября 2017 года Конституционный Суд РФ провозгласил Постановление по делу о проверке конституционности ряда положений Закона Республики Крым «Об особенностях регулирования имущественных и земельных отношений на территории Республики Крым»</p>
<br>
<p>( подробнее...)</p>
<br>
Посмотреть все новости
<br>
</section>
<aside> <!-- Меню слева -->
<ul>
<li>Новости</li>
<li>О Суде</li>
<li>Решения КС РФ</li>
<li>Заседания КС РФ</li>
<li>Контакты</li>
</ul>
<br>
<img src="images/gerb.gif" alt="Герб РФ" align=center>
</aside>
<br>
<br>
<footer>
<hr style="border:1px; height:1px; width: 70%; margin-left: 270px; background-color:black">
<img src="images/footer.PNG" class=footerline alt="Footer">
©Конституционный Суд Российской Федерации, 2008-2017
</footer>
</body>
</html>
Add those two meta tags in your head tag
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
I did check the other questions, but none of them fixed my problem. When I resize the page, my elements are moving everywhere, all squashed up. I even tried doing a wrapper div, and that didn't help. Are we allowed to post web sites? Because I have the site live.
<!DOCTYPE html>
<html>
<head>
<title>Promises!-Contact</title>
<meta charset="UTF-8">
<style>
#body {
margin: 0 auto;
width: 370px;
height: 1%;
margin-top: 100px;
border-radius: 15px;
border: 5px dotted #00A396;
background-clip: content-box;
background-color: #F8B72E;
text-align: justify;
font-family: Kirvy;
overflow: hidden;
font-size: 13px;
}
#wrapper {
width: 100%;
margin: 0%;
padding: 0%;
}
p { padding: 10px;}
#title {
text-align: center;
font-size: 24px;
top-margin: 0px;
padding: 0px;
}
nav {
font-family: KBAStitchInTime;
font-size: 12px;
color: #EC225F;
right: 220px;
top: 140px;
position: relative;}
#dot1 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot2 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot3 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot4 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
a:link { color:#EC225F; text-decoration:none; }
a:visited{ color: purple; }
a:hover{ color: ;}
a:active {}
body {background-color: #262626;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<span id="dot1">.</span>About<br>
<span id="dot2">.</span>Pages<br>
<span id="dot3">.</span>Poems<br>
<span id="dot4">.</span>Home<br>
</nav>
<div id="body">
<p id="title">Contact!</p>
<p> I love getting mail! Find me at:</p>
</div>
</div>
</body>
</html>
For some odd reason, bottom-border works when I set the property to the "li" element, not for the defined "class" name (li-navclass). This presents a problem because I don't want the bottom border to be applied to the footer-links.
What I've tried:
-expanding the menu height
-bottom border, top-border
-different ways to write the property
Would greatly appreciate help on this. Thanks in advance!
.container {
position: absolute;
background:url('../images/bgpic.png');
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.wrapper {
position: relative;
margin: auto;
padding: auto;
height: 655px;
width: 900px;
}
.titlehdr {
margin: 0px;
padding: 0px;
display: inline-block;
width: 897px;
height: 110px;
}
.title-div {
display: inline-block;
position: relative;
height: 100%;
width: 90px;
margin: 0px;
padding: 0px;
}
.title {
position: relative;
top: 40px;
margin: 0px;
padding: 0px;
font-size: 70px;
color: white;
font-family: Mesquite Std;
letter-spacing: 1.2px;
}
.barandgrill-div {
display: inline-block;
vertical-align: bottom;
}
.barandgrill-text {
margin: 0px;
padding: 0px;
font-family: Arial;
font-weight: bold;
}
/*---------------Nav Menu----------------*/
.menu {
padding-left: 0px;
margin-left: 0px;
font-size: 15px;
}
.nav-container {
text-align: center;
display: block;
top: 100px;
margin: 0px;
padding: 0px;
width: 900px;
height: 40px;
background-color: #901423;
border-style: solid;
border-width: 1px;
border-color: #111111;
}
.menu {
display: inline-block;
text-align: center;
margin: auto;
padding: auto;
list-style-type: none;
overflow: hidden;
font-color: #000000;
}
.li-navclass {
border-bottom: 1px solid #000;
}
li {
display: inline-block;
position: relative;
padding: 0 1em;
font-size: 150%;
}
.nav-text {
color: #ffffff;
font-weight: bold;
opacity: .3;
}
.nav-container ul a {
text-decoration: none;
word-spacing: 200px;
margin: 0px;
padding: 0px;
font-size: 20px;
font-family: Segoe Script;
}
/*---------------Content----------------*/
.content {
display: block;
width: 900px;
height: 500px;
border-style: solid;
border-width: 1px;
background-color: #111111;
opacity: 0.6;
}
/*---------------Footer------------------*/
.foot {
text-decoration: none;
list-style-type: none;
display: block;
position: relative;
text-align: center;
font-size: 12px;
}
.ftr-button {
position: relative;
top: -5px;
list-style: none;
text-decoration: none;
color: rgb(147, 104, 55);
}
.ftr-links {
text-decoration: none;
list-style-type: none;
}
.vert-line {
height: 13px;
border-right: 1px solid #909090;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sticky Navigation Tutorial</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" media="screen, projection" href="css/screen.css"/>
</head>
<body>
<div class="container">
<div class="wrapper">
<!--Title-->
<div class="titlehdr">
<div class="title-div">
<p class="title">Donatelo's</p>
</div>
<div class="barandgrill-div">
<p class="barandgrill-text">Mediterranean Bar and Grill</p>
</div>
</div>
<!--Navigation Menu-->
<div class="nav-container">
<ul class="menu">
<li class="li-navclass">Story</li>
<li class="li-navclass">Menu</li>
<li class="li-navclass">Gallery</li>
<li class="li-navclass">Catering</li>
<li class="li-navclass">Contact</li>
</ul>
</div>
<!--Grey Box-->
<div class="content">
<div id="sidebar">
<div id="scroller">
</div>
</div>
</div>
<!--footer-->
<div class="foot">
<ul class="ftr-links">
<li class="vert-line">Story</li>
<li class="vert-line">Menu</li>
<li class="vert-line">Gallery</li>
<li class="vert-line">Catering</li>
<li class="vert-line">Contact</li>
</ul>
<p class="copyright">Copyright © 2015 Agabi Mediterranean Restaurant</p>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".nav-text").mouseover(function() {
$( this ).css( "opacity", ".8" );
});
$(".nav-text").mouseout(function() {
$(this).css( "opacity", ".2");
});
$(".ftr-button").mouseover(function() {
$(this).css("color", "rgb(132, 131, 129)");
});
$(".ftr-button").mouseout(function() {
$(this).css("color", "rgb(147, 104, 55)");
});
$(".nav-text").click(function() {
$(this).css("opacity", ".8");
});
});
</script>
</html>
Add style to :after
.li-navclass:after {
border-bottom: 1px solid #000;
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
}
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
I have text-based navigation. Rolling over "contact" displays the address (layer) over all the other menu buttons. I would like the email address and the phone number to be rollovers (changing color from grey to red) and as well clickable links.
Problem: roll-out makes the address disappear, which is intended but it's impossible to click address/phone links.
Would it work if the roll-out effect (disappearing) would be delayed? Is there a CSS only solution?
Here's the page:
raphaelzwyer.com/testRapha/rollover_test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>raphaelzwyer</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;}
#font-face {
font-family: 'BotonReg';
src: url('fonts/BotonReg.eot');
src: url('fonts/BotonReg.eot?#iefix') format('embedded-opentype'),
url('fonts/BotonReg.woff') format('woff'),
url('fonts/BotonReg.ttf') format('truetype'),
url('fonts/BotonReg.svg#BotonReg') format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;}
#font-face {
font-family: 'BotonMed';
src: url('fonts/BotonMed.eot');
src: url('fonts/BotonMed.eot?#iefix') format('embedded-opentype'),
url('fonts/BotonMed.woff') format('woff'),
url('fonts/BotonMed.ttf') format('truetype'),
url('fonts/BotonMed.svg#BotonMed') format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;}
html, body {
background-color: #FFFFFF;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
color: #a9a9a9;
height: 100%;
width: 100%;
font-family: "BotonReg", "Courier", "Courier New", "Bookman Old Style", serif;
font-size: 16px;
overflow-y: scroll;
letter-spacing: 0.065em;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
font-smooth: 1em;
text-shadow: 0 1px 1px rgba(255,255,255,.3);}
a {
text-decoration: none;
color: #a9a9a9;}
a:hover {
text-decoration: none;
color: #be1f2d;}
a:focus {
text-decoration: none;
color: #be1f2d;}
li {
list-style-type: none;
display: inline;}
.clear {
clear: both;}
#container {
position: relative;
top: 0px;
margin: 0px auto;
width: 860px;
min-height: 100%;
height: auto !important;
height: 100%;
border: none;}
#topmenu {
position: relative;
top: 0px;
left: 212px;
width: 660px;
height: 48px;}
.menubuttons {
position: relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("images/menubg.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
float: left;}
.menubuttons:hover {
position: relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("images/menubg_h.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
float: left;}
.menubuttonactive {
position :relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("images/menubg_a.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
float: left;}
.menubuttonactive a {
color: #be1f2d;}
#addressbox {
position: absolute;
top: 0px;
width: 548px;
left: 212px;
height: 22px;
background-image: url("images/menubg.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
letter-spacing: 0.062em;
text-align: right;
float: left;
z-index: 900;}
#addressbox:hover {
position: relative;
top: 0px;
width: 548px;;
height: 22px;
background-image: url("images/menubg_h.png");
background-repeat: repeat-x;
float: left;
z-index: 900;
color: #be1f2d;}
#addressboxbelow {
position: absolute;
top: 36px;
width: 548px;
left: 212px;
height: 22px;
background-image: url("images/menubg_h.png");
background-repeat: repeat-x;
text-align: right;
float: left;
z-index: 900;}
#contactrollover {
position: relative;
top: 0px;
margin: 0px 0px -36px 0px;
width: 100px;
left: 0px;
float: left;
z-index: 900;}
#contactrollover div {
width: 100px;
height: 50px;
float: left;}
#contactrollover a span {
display: none;
color: #a9a9a9;}
#contactrollover a {
display: block;}
#contactrollover a:hover span {
display: block;
position: absolute;
top: 0px;
left: -560px;}
.buttonspaces {
height: 36px;
list-style: none;
float: left;}
</style>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
</head>
<body onload="MM_preloadImages('images/menubg_b.png','images/th_att_b.png','images/th_bmw_b.png','images/th_directv_b.png','images/th_giostra_b.png')">
<div id="container">
<div id="topmenu">
<ul id="menulist">
<li class="menubuttonactive">portfolio</li>
<li class="buttonspaces"><img src="images/spacer.png" width="68" height="36" alt="spacer" /></li>
<li class="menubuttons">about</li>
<li class="buttonspaces"><img src="images/spacer.png" width="12" height="36" alt="spacer" /></li>
<li class="menubuttons">resume</li>
<li class="buttonspaces"><img src="images/spacer.png" width="180" height="36" alt="spacer" /></li>
<li id="contactrollover"><div class="menubuttons">contact<span id="addressbox"><p>917-650-9534, info#raphaelzwyer.com<br/ ></p>143 leonard street, apartment 5, brooklyn ny 11206</span></div></li>
</ul> <!-- end of menulist -->
</div> <!-- end of topmenu -->
</div> <!-- end of container -->
<script type="text/javascript" src="js/raphaelzwyer.js"></script>
</body>
</html>
No, there is no css only solution for delaying this. However you could get this to work, if your add the hover effect not on the a but on #contactrollover.
It doesn't work right now because there is a space between #contactrollover a and #adressbox.
So it should look like this.
#contactrollover:hover span {
display: block;
position: absolute;
top: 0px;
left: -560px;}
For this to work in internet explorer the :hover pseudoclass needs to be on a link. So you can ether change the div #contactrollover to a link or get rid of the space in some other way.
All you have to do is add some padding to the popup, so that there's no space there.
#contactrollover a:hover span {padding-right: 12px;}