Example5
Terugkerende gebruiker
- Lid geworden
- 9 mrt 2008
- Berichten
- 2.172
beste...
ik ben nog steeds bezig met mijn site, en nu dacht ik tot een leuke layout te zijn gekomen, toen ik besloot eens te controleren of ie en opera wel dezelfde looks gaven als firefox (waarmee ik de site van tijd tot tijd mee checkte)...
helaas is echter het complete menu gigantisch out of shape in ie en opera. (het lijkt wel alsof hij in ie helemaal de css van het menu niet pakt en in opera alleen de lettergroote, maar niets over de padding en margin?)
ik zou echter niet weten hoe of ik dit nou kan herstellen, ik hoop dat jullie mij daar mee zouden kunnen en willen helpen...
de site is te bekijken via http://www.reneit.net bekijk hem even in firefox en daarna in ie of opera o.i.d... je zult we zien dat het niet echt in orde is
nouja, hopelijk kan iemand mij dus helpen :/
alvast bedankt voor de moeite
!
de code:
html:
css:
ik ben nog steeds bezig met mijn site, en nu dacht ik tot een leuke layout te zijn gekomen, toen ik besloot eens te controleren of ie en opera wel dezelfde looks gaven als firefox (waarmee ik de site van tijd tot tijd mee checkte)...
helaas is echter het complete menu gigantisch out of shape in ie en opera. (het lijkt wel alsof hij in ie helemaal de css van het menu niet pakt en in opera alleen de lettergroote, maar niets over de padding en margin?)
ik zou echter niet weten hoe of ik dit nou kan herstellen, ik hoop dat jullie mij daar mee zouden kunnen en willen helpen...
de site is te bekijken via http://www.reneit.net bekijk hem even in firefox en daarna in ie of opera o.i.d... je zult we zien dat het niet echt in orde is
nouja, hopelijk kan iemand mij dus helpen :/
alvast bedankt voor de moeite
!de code:
html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rene IT</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<body>
<div id="outer-wrap">
<div id="container">
<div id="header" class="clear">
<h1><a href="/">Rene IT</a></h1>
<ul id="nav">
<li><a href="/"><m1>Home</m1></a><br><a href="/"><m2>Homepage</m2></a></li>
<li><a href="/"><m1>About</m1></a><br><a href="/"><m2>About me</m2></a><br><a href="/"><m2>What do i do?</m2></a><br><a href="/"><m2>Technology</m2></a></li>
<li><a href="/"><m1>Portfolio</m1></a><br><a href="/"><m2>Selected Works</m2></a><br><a href="/"><m2>WebDesign</m2></a><br><a href="/"><m2>Identity</m2></a></li>
<li><a href="/"><m1>Contact</m1></a><br><a href="/"><m2>Mail me</m2></a><br><a href="/"><m2>Guestbook</m2></a><br><a href="/"><m2>Services</m2></a></li>
</ul>
</div>
<div id="content" class="clear"> <br><br>
<!--
CONTENT START
-->
<a href="img/port/image-1.jpg" rel="lightbox[roadtrip]"><img src="img/port/image-1.jpg" /></a>
<a href="img/port/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="img/port/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
<!--
CONTENT END
-->
</div>
</div>
</div>
</body>
</html>css:
Code:
* {
margin: 0; padding: 0; border: 0;
}
m1{
font-size:20px;
color: #DEDDF0;
}
m2{
font-size:11px;
color: #F0F5F5;
}
body {
background: #fcf7eb url(./img/bg.png) repeat;
}
#outer-wrap {
background: url(./img/headerside.png) top repeat-x;
}
#container {
background: url(./img/header.jpg) center top no-repeat;
}
#header {
width: 860px; height: 98px; margin: 0 auto;
}
#header h1 a {
display: block; width: 245px; height: 35px; float: left; position: relative; top: 36px;
background: url(./img/logo.png) top; text-indent: -9999px;
}
#header h1 a:hover, #header h1 a:focus { background: url(./img/logo.png) bottom; }
#header ul#nav {
float: right; list-style: none; margin: 5px 0 0 0;
}
#header ul#nav li {
float: left; margin: 0 0 0 10px;
}
#header ul#nav li a {
font: 18px arial, helvetica, sans-serif; color: #fbf5e9; text-decoration: none;
text-transform: lowercase;
float: left; padding: 0px 25px 0px 25px;
}
#content {
width: 860px; margin: 0 auto 60px auto;
font-family: arial, helvetica, sans-serif;
}
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(./img/port/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(./img/port/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Laatst bewerkt:
