View Full Version : CSS & HTML Problem

02-24-2009, 06: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.

<!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">
<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" />
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen," />
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen," />

<style type="text/css">
.style5 {font-family: Tahoma}
.style6 {color: #ff00ff}
.style7 {color: #00CC00}
<div id="main">
<span class="style5"><br>
<a href="/home.php" target="_self"><div id="home" class="icon"><div class="name">Home</div></a>
<a href="/Downloads" target="_self"><div id="mipc" class="icon"><div class="name">Downloads</div></a>
<a href="/more.php" target="_self"><div id="usb" class="icon"><div class="name">More</div></a>
<a href="/music.php" target="_self"><div id="music" class="icon"><div class="name">Music</div></a>

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

/******* 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-size: 100%;
background: #fff;
font-size: 11px;
font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
overflow: hidden;
cursor: default !Important;
a:link {
color: #0099FF;
a:visited {
color: #0099FF;
a:hover {
color: #0066FF;
text-decoration: none;
a:active {
color: #333333;
clear: both;
height: 0;
visibility: hidden;
display: block;
text-decoration: none;
/******* GENERAL RESET *******/
/******* 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 *******/

02-24-2009, 10:02 PM
Cool idea you have there, but are you set on the idea of an iframe just to avoid the possible jitter/load time for the menu between pages?

If so, I'd recommend using Javascript to preload enough of the page to make you happy and just use regular page design WITHOUT an iframe.

Iframes are rough to work with sometimes, generally have bad SEO, and aren't always supported.

Worst case if you do it with Javascript preloading is that someone who has disabled scripts will see the menu/page load when they click on sections.

02-25-2009, 06:09 PM
Ok i solved the iframe issue anyway its the pop up chat window im having difficulties with. ?

02-25-2009, 06:14 PM
Do you have a live link you can give us to play with?

02-25-2009, 07:27 PM
I would highly recommend using layers instead of iframes, horrible creation that one is. Set your layer up and use DOM to call the correct layer to the front when the right icon is clicked. You could actually do the same with your chat window also.

Imma have to have a test at this idea! Looks pretty intriguing!

02-28-2009, 11:42 PM
some viewers cannot view it correctly with their resolutions.