Thanks.
I'm using iFrames. -Anything wrong with that?
Should I use tables together with iFrames?
Tables are bad. The World Wide Web Consortium will come to your house with torches if you use tables for anything except displaying data.
Thanks.
I'm using iFrames. -Anything wrong with that?
Should I use tables together with iFrames?
<body bgcolor="black">
<div id="test">
</div>
#test
{
width: 100%; [COLOR="Red"]//I don't know if this works..[/COLOR]
height: 300px;
background-image: url(Images/loggo3.png);
}
<body background="Images/loggo3.png">
</head>
<style type="text/css">
body
{
background-image: url(Images/loggo3.png);
background-repeat: no-repeat;
}
</style>
<body>
Do you know /could you show me/ how to do this?
body
{
background-image: blah;
background-repeat: no-repeat;
[COLOR="Red"]/*Any other settings*/[/COLOR]
}
#topleft
{
float: left;
width: 200px; [COLOR="Red"]/*DO NOT SET THIS VALUE TO A %, SET IT TO THE IMAGE'S WIDTH!*/[/COLOR]
background-image: blah;
background-repeat: no-repeat;
[COLOR="Red"]/*Any other settings*/[/COLOR]
}
#topright
{
float: right;
width: 200px; [COLOR="Red"]/*DO NOT SET THIS VALUE TO A %, SET IT TO THE IMAGE'S WIDTH!*/[/COLOR]
background-image: blah;
background-repeat: no-repeat;
[COLOR="Red"]/*Any other settings*/[/COLOR]
}
<!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=iso-8859-1">
<title>Work Factory</title>
<link href="divs.css" rel="stylesheet" type="text/css">
</head>
<style type="text/css">
body
{
background-image: url(Images/loggo3.png);
background-repeat: no-repeat;
}
</style>
<body bgcolor="#000000">
<div id="top"> </div>
<div id="container">
<div id="buttons"> Buttons </div>
<div id="center">
<br>
<iframe src="firstpage.html" name="center" width="80%" height="95%" marginwidth="10" marginheight="10"
scrolling="auto" frameborder="0" allowtransparency="true">
</iframe>
</div>
</div>
</body>
</html>
#container
{
width: 80%;
margin: 2em 110px;
}
#top
{
height: 265px;
}
#center
{
height: 40em;
text-align: center;
background: #ABC999;
opacity: 1; filter: alpha(opacity=100);
}
#buttons
{
text-align: center;
height: 4em;
background: #999ABC;
}
<div id="menycontainer">
<ul>
<li><a href="firstpage.html" id="current">Meny 1</a></li>
<li><a href="secondpage.html">Meny 2</a></li>
<li><a href="firstpage.html" target="center">Meny 3</a></li>
<li><a href="secondpage.html" target="center">Meny 4</a></li>
<li><a href="firstpage.html" target="center">Meny 5</a></li>
</ul>
</div>
#menycontainer ul{margin-left: 0; padding-left: 0; float: left; font: 70% Verdana, Helvetica, sans-serif;}
#menycontainer li{display: inline;}
#menycontainer ul a{float: left; background: #CC9999; text-decoration: none; margin-right: 0.5em; padding: 0.3em
2em;}
#menycontainer a:link{color: #ffffff;}
#menycontainer a:visited{color: #ffffff;}
#menycontainer a:hover{background: #996666;}
#menycontainer a#current{background: #FFCC66; color: #000000;}
Use float: left; and float: right; - Then repeat the background on the Y axis?
You might need to add some JavaScript if your saying they're all dislayed on the same page - I can point you in the right direction if that's what you want.
<script type="text/javascript">
var page(p)
function setpage(p)
{
page=p;
switch (page)
{
case 1:
document.write('<iframe src="firstpage.html" id="current" name="center" width="80%" height="95%" marginwidth="10" marginheight="10"');
break;
case 2:
document.write('<iframe src="secondpage.html" id="current" name="center" width="80%" height="95%" marginwidth="10" marginheight="10"');
break;
case 3:
document.write('<iframe src="thirdpage.html" id="current" name="center" width="80%" height="95%" marginwidth="10" marginheight="10"');
break;
}
}
</script>
<img src="firstbutton.png" onclick="setpage(1)">
<img src="secondbutton.png" onclick="setpage(2)">
<!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=ISO 8859-1">
<title> </title>
<link rel="shortcut icon" href="images/favicon.ico">
<link href="divs.css" rel="stylesheet" type="text/css">
<style type="text/css">
#examplenav {
margin: 0;
padding: 0;
}
#examplenav li {
list-style: none;
height: 35px;
float: left;
position: relative;
}
#examplenav li a {
height: 35px;
text-indent: -9000px;
display: block;
}
#examplenav .current a { background-position: 0 -24px; }
a#home,
a#about,
a#products,
a#contact {
width: 80px;
height: 35px;
}
a#cities { background-image: url(images\button_home.png); }
a#about { background-image: url(images/button_about.jpg); }
a#contact { background-image: url(images/button_contact.jpg); }
a#products { background-image: url(images/button_products.jpg); }
a#home:hover,
a#about:hover,
a#contact:hover,
a#products:hover
{ background-position: 0 -35px; }
</style>
</head>
<style type="text/css">
body
{
background-image: url(images/loggo4.png);
background-repeat: no-repeat;
background-color: #000000;
}
</style>
<body>
<div id="top"> </div>
<div id="container">
<div id="center">
<div id="buttons">
<div id="examplenavcontainer">
<ul id="examplenav">
<li title="Cities"> <a href="#" id="Cities"> Test </a> </li>
<li title="About" class="current"> <a href="#" id="about"> About </a> </li>
<li title="Products"> <a href="#" id="products"> Products </a> </li>
<li title="Contact"> <a href="#" id="contact"> Contact </a> </li>
</ul>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> [COLOR="red"]/* I don't know what this means */[/COLOR]
<script type="text/javascript">_uacct = "UA-901918-6";urchinTracker();</script> [COLOR="Red"]/* I don't know what this means */[/COLOR]
</div>
<br>
<iframe src="iframe.html" name="iframe" width="85%" height="95%" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0" allowtransparency="true">
</iframe>
</div>
</div>
</body>
</html>
a#cities { background-image: url(images\button_home.png); }
a#cities { background-image: url(images[B]/[/B]button_home.png); }
Thanks, UndeadDragon.
New problem occured, though!
I can see half the picture (probably 'width' that is messing up somewhere..) in Google Chrome, but not in Internet Explorer..
I'd like to see the whole picture in both browsers.
Chrome is fail fail since it's only been out so long.
Use FF, Opera or SeaMonkey.
I don't read up on anything you asked so far lol
Got half this shit memorized.
<body>
<div id="top"> </div>
<div id="container">
<div id="center">
<div id="buttons">
<div id="menycontainer">
<ul id="meny">
<li title="cities"> <a href="iframe.html" target="iframe" id="cities"> Test </a> </li>
<li title="About" class="current"> <a href="firstpage.html" target="iframe" id="about"> About </a> </li>
<li title="Products"> <a href="#" target="iframe" id="products"> Products </a> </li>
<li title="Contact"> <a href="#" target="iframe" id="contact"> Contact </a> </li>
</ul>
</div>
</div>
<br>
<iframe src="iframe.html" name="iframe" width="85%" height="95%" marginwidth="10" marginheight="10"
scrolling="auto" frameborder="0" allowtransparency="true">
</iframe>
</div>
</div>
</body>
</html>
#meny
{
margin-left: 40%;
padding: 0;
}
#meny li
{
list-style: none;
height: 35px;
float: left;
position: relative;
}
#meny li a
{
height: 35px;
text-indent: -9000px;
display: block;
}
#meny .current a{ background-position: 0 -70px; }
a#home,
a#about,
a#products,
a#contact
{
width: 80px;
height: 35px;
}
a#cities { background-image: url(images/button_cities2.png); }
a#about { background-image: url(images/button_cities2.png); }
a#contact { background-image: url(images/button_cities2.png); }
a#products { background-image: url(images/button_cities2.png); }
a#home:hover,
a#about:hover,
a#contact:hover,
a#products:hover
{ background-position: 0 -35px; }