CSS & HTML Problem [Archive] - CodingForums.com

GrantDouglas

02-24-2009, 05:08 PM

So i followed a tutorial for a CSS & xHTML web interface that was to look like an OS. The good news is that it worked :thumbsup: however, i was wanting to put an iframe in the middle of the page so that the pages open up in that box but can't seem to find a way of doing it :( There is also a shoutbox button in the bottom left as you can see and what i want that to do is to open up on screen kind of like the 2nd pic i showed you. ALL help will be appreciated and im thanking everyone in advance, thanks.
Ps. Here is the coding for the index.html page and the css ( in the index file i removed the text you can see in the picture .. because thats where i want the iframe to be). The code for the shoutbox will just be html i have that already i just kind pf want it like a window that slides up .. like your OS start menu.
http://i41.tinypic.com/2cnbbdd.jpg
http://i44.tinypic.com/sbiih2.jpg

<!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" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="refresh" content="300" >
<title>Djs-Effect || The All New Interactive Pcdj (6)(8) !</title>
<link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />



<style type="text/css">

</style>
</head>
<body>
<div id="main">
<center>
<br>
<br>
<span class="style5"><br>
</span>
<P>
<a href="/home.php" target="_self"><div id="home" class="icon"><div class="name">Home</div></a>
</div>
<a href="/Downloads" target="_self"><div id="mipc" class="icon"><div class="name">Downloads</div></a>
</div>
<a href="/more.php" target="_self"><div id="usb" class="icon"><div class="name">More</div></a>
</div>
<a href="/music.php" target="_self"><div id="music" class="icon"><div class="name">Music</div></a>
</div>

<div id="taskbar">
<a href="http://google.com" target="_blank"><div id="start">         Shoutbox</div></a>
<div id="clock">00:00:00</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/core.js"></script>
</body>
</html>

@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background: #fff;
line-height:14px;
font-size: 11px;
font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
margin:0pt;
overflow: hidden;
cursor: default !Important;
}
a:link {
color: #0099FF;
}
a:visited {
color: #0099FF;
}
a:hover {
color: #0066FF;
text-decoration: none;
}
a:active {
color: #333333;
}
html,body{
height:100%;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
a{
text-decoration: none;
}
/******* GENERAL RESET *******/
/******* MAIN *******/
#main{
height: 100%;
background: transparent url(images/background.jpg) no-repeat scroll center center;
overflow: none;
}
/******* /MAIN *******/
/******* ICONS *******/
#main div.icon{
min-width: 48px;
min-height: 48px;
padding: 0px 14px 8px;
border: 1px solid transparent;
margin: 0pt auto;
text-align: left;
position: absolute;
display: none;
}
#main div.icon:hover{
background-color: #0a2c5e !Important;
border: 1px solid #3b567e;
}
#main div.icon.active{
background-color: #0a2c5e !Important;
border: 1px solid #3b567e;
}
#main div.icon div.name{
margin-top: 52px;
text-align: center;
color: #fff;
}
#main #home{
background: transparent url(images/home.png) no-repeat scroll center 4px;
top: 32px;
left: 1300px;
}
#main #mipc{
background: transparent url(images/mipc.png) no-repeat scroll center 4px;
top: 128px;
left: 1300px;
}
#main #usb{
background: transparent url(images/usb.png) no-repeat scroll center 4px;
top: 224px;
left: 1300px;
}
#main #music{
background: transparent url(images/music.png) no-repeat scroll center 4px;
top: 320px;
left: 1300px;
}
#main #trash{
background: transparent url(images/trash.png) no-repeat scroll center 4px;
}
/******* /ICONS *******/

/******* TASKBAR *******/
#main #taskbar{
width: 100%;
height: 42px;
line-height: 42px;
background: #e6e6e6 url(images/taskbar.jpg) repeat-x left top;
position: absolute;
left: 0;
bottom: 0px;
padding: 4px 0px 1px 0px;
display: none;
}
#main #taskbar #start{
float: left;
background: transparent url(images/start.png) no-repeat 4px -3px;
width: 128px;
margin: 0 4px 0 0;
padding: 0px 0px;
font-size: 12px;
text-align: center;
}
#main #taskbar #start:hover{
background-color: #fff;
}
#main #taskbar #clock{
float: right;
background: #e6e6e6 url(images/clock.jpg) no-repeat 4px center;
padding: 0 8px 0 50px;
font-size: 12px;
border-left: 2px solid #f9f9f9;
text-align: center;
}
/******* /TASKBAR *******/