Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs down CSS & HTML Problem

    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 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.


    Code:
    <!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" />
    	<!--[if IE 7]>
    		<link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen," />
    	<![endif]-->
    	<!--[if IE 6]>
    		<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen," />
    	<![endif]-->
    
        <style type="text/css">
    <!--
    .style5 {font-family: Tahoma}
    .style6 {color: #ff00ff}
    .style7 {color: #00CC00}
    -->
        </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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>
    Code:
    @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  *******/

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    Last edited by Rowsdower!; 02-24-2009 at 10:05 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok i solved the iframe issue anyway its the pop up chat window im having difficulties with. ?

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Do you have a live link you can give us to play with?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New Coder
    Join Date
    Aug 2008
    Posts
    42
    Thanks
    21
    Thanked 1 Time in 1 Post
    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!

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    www.djs-effect.co.uk
    some viewers cannot view it correctly with their resolutions.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •