Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Dec 2004
    Posts
    21
    Member #
    8511
    Hi there. I have been designing a site, without trying to use tables. I have been working in dreamweaver at uni and yet it just doesn't come out correctly when i test the page in a browser. The code is:

    HTML Code:
    <body>
    
    <div id="base" align="center" style="width:800; height:auto; margin-left:150; background-color:#333333">
    
    <div id="title" style="width:800; height:125; border-bottom: solid 1px; border-bottom-color:#FFFFFF"></div>
    
    <div id="body" style="width:800; height:470; margin-top:5px; border-bottom-color:#FFFFFF; border-bottom:solid 1" align="center">
    
    <div id="body left" style="float:left; width:20%; height:470; margin-left:5">
    <div id="menu top" align="left" style="width:inherit; height:150; margin-bottom:5; border: solid 1px; border-color:#FFFFFF">dsfdsf</div>
    <div id="menu top" align="left" style="width:inherit; height:150; margin-bottom:5; border: solid 1px; border-color:#FFFFFF">dsfdsf</div>
    <div id="menu top" align="left" style="width:inherit; height:150; margin-bottom:5; border: solid 1px; border-color:#FFFFFF">dsfdsf</div>
    </div>
    
    <div id="body right" style="float:left; width:79%; height:465; margin-left:5; margin-bottom:5; border:1 solid; border-color:#FFFFFF">fgfgffdgfdgg</div>
    
    </div>
    
    <div id="bottom bar" style="width:800; height:15">fgdfg</div>
    
    </div>
    </body>
    </html>
    I have no training in web design, its simply come from things i've picked up along the way. If anyone can help that'd be great...

    Dan
    :: Maybe We Can Do More Than Just Stare At The Bright Lights ::

  2.  

  3. #2
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    What I suggest is firstly to seperate your CSS from your HTML.

    create a CSS file, and then link it to your HTML. Heres some example HTML that uses a linked CSS file.
    HTML 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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>This is the title of the Webpage</title>
    <link href="stylesheet/styles.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="header"></div>
    
    
    <div id="container">
    <h1>big fat header</h1>
    	<div id="lefttab">This is the left tab and it will contain descriptions, highlights or contact details...</div>
    	<div id="maintab">This is the maintab and all the content will go in here. Text etc.</div>
    
    
    </div>
    
    <div id="footer">Footer</div>
    </body>
    </html>
    The css file looks alittle like this:
    HTML Code:
    body{
    	background-image: url(../images/bg.gif);
    	background-repeat: repeat-x;
    	font-family: Georgia, "Trebuchet MS", Tahoma, Arial;
    	font-size: 1em;}
    
    /*----Layout---------------------------------------------------*/
    
    #header{
    	width: 600px;
    	height: 230px;
    	margin-top: -6px;
    	padding-top: 0px;
    	margin-left: auto;
    	margin-right: auto;
    	background-image: url(../images/header.jpg);}
    
    #navbar{
    
    }
    
    #container{
    	width: 600px;
    	margin-left: auto;
    	margin-right: auto;}
    
    
    #container{
    	width: 600px;
    	margin-left: auto;
    	margin-right: auto;
    	}
    	
    #container #lefttab{
    	width: 30%;
    	float: left;
    	background-color: #10d8ac;}
    
    #container #maintab{
    	width: 68%;
    	float: right;
    	background-color: #c72fba;}
    	
    #footer{
    	clear: both;
    	background-color: #7b31c0;
    	}
    
    
    /*------Text styles--------------------------------------------*/
    h1{
    	font-size: 1.4em;
    	color: #ac2c0f;
    	text-align: center;
    	font-weight: normal;
    	}
    I hope I havent confused you to much. :classic:

  4. #3
    Junior Member
    Join Date
    Dec 2004
    Posts
    21
    Member #
    8511
    Thank you!

    So I did as you suggested and to a point it worked. Until I tried it in IE (had been using Firefox). Then it went CRAZY. So I searched the forum and found Box Model Hack, which I think i have put in correctly...maybe not though (some problems have been corrected).

    However I still have a few problems:

    One) In IE the main box (#container #righttab) falls below as it looks too wide. In firefox it is perfect. Any ideas?

    Two) The text is COMPLETELY different in IE. Any ideas on this?

    Three) Can you assign different style links? In firefox the picture of the front cover has a white box around it, which I'd like to remove...could you explain, or possibly show how to do this.

    A running example of the site can be seen at: This Site .

    The CSS is:
    HTML Code:
    body{
    	background-image: url(bg_body.gif);
    	background-repeat:repeat;
    	font-family:Geneva, Arial, Helvetica, sans-serif;
    	font-size:10px;
    	margin-left:125px}
    	
    /*----Layout---------------------------------------------------*/
    
    #header{
    	width:800px;
    	height:125px;
    	background-color:#333333;}
    	
    	
    #container{
    	width:800px;
    	height:454px;
    	background-color:#333333;}
    	
    #container #lefttab{ 
    	float: left;
    	margin:5px 5px 5px 5px;
    	border:1px solid #FFFFFF;
    	background-color:#666666;}
    
    #container #lefttab{ 
      width:166px;
      height:452px;
      voice-family: "\"}\""; 
      voice-family:inherit;
      width:154px;
      height:440px;} 
    
    html>body #container #lefttab{
    	width:154px;
    	height:440px;} 
    	
    #container #righttab{
    	float: right;
    	margin-top:5px;
    	margin-right:5px;
    	border:1px solid #FFFFFF;
    	background-color:#666666}
    	
    #container #righttab{
    	width:631px;
    	height:446px;
    	voice-family: "\"}\""; 
    	voice-family:inherit;
    	width: 624px;
    	height:439px;}
    	
    html>body #container #righttab{
    	width:624px;
    	height:439px;} 
    	
    #container #lefttab #boxes{
    	margin:5px 5px 5px 5px;
    	border:1px solid #FFFFFF;
    	background-color:#333333;}	
    	
    #container #lefttab #boxes{
    	width:153px;
    	height:132px;
    	voice-family: "\"}\""; 
    	voice-family:inherit;
    	width:141px;
    	height:120px;}
    
    html>body #container #lefttab #boxes{
    	width:141px;
    	height:120px;} 
    
    #container #lefttab #coverbox{
    	margin:5px 5px 5px 5px;
    	border:1px solid #FFFFFF;
    	background-color:#333333;}
    
    #container #lefttab #coverbox{	
    	width:153px;
    	height:185px;
    	voice-family: "\"}\""; 
    	voice-family:inherit;
    	width:141px;
    	height:173px;}
    	
    html>body #container #lefttab #coverbox{
    	width:141px;
    	height:173px;} 
    	
    #container #righttab #picrotator{
    	margin:5px 5px 5px 5px;
    	border:1px solid #FFFFFF;
    	background-color:#333333;}
    	
    #container #righttab #picrotator{
    	width:623px;
    	height:220px;
    	voice-family: "\"}\""; 
    	voice-family:inherit;
    	width:611px;
    	height:208px;}
    	
    html>body #container #righttab #picrotator{
    	width:611px;
    	height:208px;}
    	
    #container #righttab #newsbox{
    	margin:5px 5px 5px 5px;
    	border:1px solid #FFFFFF;
    	background-color:#333333;}
    	
    #container #righttab #newsbox{
    	width:623px;
    	height:224px;
    	voice-family: "\"}\""; 
    	voice-family:inherit;
    	width:611px;
    	height:212px;}
    	
    #container #righttab #newsbox{
    	width:611px;
    	height:212px;}
    	
    #container #righttab #newsbox #left{
    	float:left;
    	border-right: 1px solid #FFFFFF;}
    	
    #container #righttab #newsbox #left{
    	width:306px;
    	height:211px;
    	voice-family: "\"}\""; 
    	voice-family:inherit;
    	width:305px;
    	height:211px;}
    	
    html>body #container #righttab #newsbox #left{
    	width:305px;
    	height:211px;}
    	
    #container #righttab #newsbox #right{
    	float:right;}
    	
    #container #righttab #newsbox #right{
    	width:305px;
    	height:211px;
    	voice-family: "\"}\""; 
    	voice-family:inherit;
    	width:305px;
    	height:211px;}
    	
    html>body #container #righttab #newsbox #right{
    	width:305px;
    	height:211px;}
    	
    /*-------------Links-----------------*/
    	
    a:link {color:#FFFFFF;
    	text-decoration:none;
    }
    
    a:visited {
    	color:#FFFFFF;
    	text-decoration:none;
    }
    
    a:hover {
    	color:#FFFFFF;
    	text-decoration:none;
    }
    
    a:active {
    	color:#FFFFFF;
    	text-decoration:none;
    }
    
    c:link {text-decoration:none}
    
    c:visited {text-decoration:none}
    
    c:hover {text-decoration:none}
    
    c:active {text-decoration:none}
    and the html is:

    HTML 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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>If Mice Could Move Mountains : <?php
    	$Blog->disp('name', 'htmlhead');
    	single_cat_title( ' : ', 'htmlhead' );
    	single_month_title( ' : ', 'htmlhead' );
    	single_post_title( ' : ', 'htmlhead' );
    	arcdir_title( ' : ', 'htmlhead' );
    	last_comments_title( ' : ', 'htmlhead' );
    	stats_title( ' : ', 'htmlhead' );
    ?></title>
    <link href="styles2.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=<?php locale_charset() ?>" />
    <base href="<?php skinbase(); // Base URL for this skin. You need this to fix relative links! ?>" />
    <meta name="Description" content="<?php $Blog->disp( 'shortdesc', 'htmlattr' ); ?>" />
    <meta name="Keywords" content="punk, IMCMM, punk rock, punk music, punk clothing, punk store, blink 182, good charlotte, punk bands, punk reviews, punk cds, punk news, punk rock icons, punk rock buddy icon, punk rock video, punk rock bands, emo band, emo music, emo game, indie rock, mp3, mp3 download, free mp3, mp3 music, free music, music download, rock, rock music, rock bands, ska, skabands, new found glory, finch, yellowcard, simple plan, franz ferdinand, post hardcore, hardcore, grind core, grindcore, deathmetal, death metal, extreme, reviews, hip hop, electrionica, if mice could, if mice, if mice could move, if mice could move mountains, if mice could move mountains dot com, uk tour, usa tour, australia tour, music competitions, music prizes, buck 65, prefuse 73, refused, razorlight, nme, <?php $Blog->disp( 'keywords', 'htmlattr' ); ?>" />
    <meta name="generator" content="b2evolution <?php echo $b2_version ?>" />
    <!-- Please leave this for stats -->
    <link rel="alternate" type="text/xml" title="RDF" href="<?php $Blog->disp( 'rdf_url', 'raw' ) ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php $Blog->disp( 'rss_url', 'raw' ) ?>" />
    <link rel="alternate" type="text/xml" title="RSS 2.0" href="<?php $Blog->disp( 'rss2_url', 'raw' ) ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom" href="<?php $Blog->disp( 'atom_url', 'raw' ) ?>" />
    <link rel="pingback" href="<?php $Blog->disp( 'pingback_url', 'raw' ) ?>" />
    </head>
    
    <body>
    
    <div id="header">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="125">
        <param name="movie" value="menu.swf" />
        <param name="quality" value="high" />
        <embed src="menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="125"></embed>
      </object>
    </div>
    <div id="container">
    <div id="lefttab"><div id="coverbox"><c><?php
    		// Dirty trick until we get everything into objects:
    		$saved_blog = $blog;
    		$blog = 10;	// Blog B now
    		$Blog_B = Blog_get_by_ID( 10 );	// Blog B
    	?>
    		                      <?php
    		// You can restrict to specific categories by listing them in the two params below: '', array()
    		// '', array(9,15) will restrict to cats 9 and 15
    		// '9,15', array() will restrict to cats 9,15 and all their subcats
    		$BlogBList = & new ItemList( $blog,	 $show_statuses, '', $m, $w, '', array(), $author, $order, $orderby, $posts, '', '', '', '', '', '', '', '5', 'posts', $timestamp_min, $timestamp_max );
    
    		while( $Item = $BlogBList->get_item() )
    		{
    		?>
    		                                    </p>
    		                <div class="bPostSide" lang="<?php $Item->lang() ?>">
    			<?php $Item->anchor(); ?>
    
    			<a href="<?php $Item->permalink() ?>" title="<?php echo T_('Permanent link to full entry') ?>"><?php echo T_('') ?><?php $Item->title(); ?>
    		</div>
    		<?php
    		}
    
    		// Restore after dirty trick:
    		$blog = $saved_blog;
    	?></c></div><div id="boxes"><a><?php
    		// Dirty trick until we get everything into objects:
    		$saved_blog = $blog;
    		$blog = 3;	// Blog B now
    		$Blog_B = Blog_get_by_ID( 3 );	// Blog B
    	?>
    		                      <?php
    		// You can restrict to specific categories by listing them in the two params below: '', array()
    		// '', array(9,15) will restrict to cats 9 and 15
    		// '9,15', array() will restrict to cats 9,15 and all their subcats
    		$BlogBList = & new ItemList( $blog,	 $show_statuses, '', $m, $w, '', array(), $author, $order, $orderby, $posts, '', '', '', '', '', '', '', '5', 'posts', $timestamp_min, $timestamp_max );
    
    		while( $Item = $BlogBList->get_item() )
    		{
    		?>
    		                                    </p>
    		                <div class="bPostSide" lang="<?php $Item->lang() ?>">
    			<?php $Item->anchor(); ?>
    
    			<a href="<?php $Item->permalink() ?>" title="<?php echo T_('Permanent link to full entry') ?>"><?php echo T_('') ?><?php $Item->title(); ?>
    		</div>
    		<?php
    		}
    
    		// Restore after dirty trick:
    		$blog = $saved_blog;
    	?></a></div><div id="boxes"><a><?php
    		// Dirty trick until we get everything into objects:
    		$saved_blog = $blog;
    		$blog = 3;	// Blog B now
    		$Blog_B = Blog_get_by_ID( 3 );	// Blog B
    	?>
    		                      <?php
    		// You can restrict to specific categories by listing them in the two params below: '', array()
    		// '', array(9,15) will restrict to cats 9 and 15
    		// '9,15', array() will restrict to cats 9,15 and all their subcats
    		$BlogBList = & new ItemList( $blog,	 $show_statuses, '', $m, $w, '', array(), $author, $order, $orderby, $posts, '', '', '', '', '', '', '', '5', 'posts', $timestamp_min, $timestamp_max );
    
    		while( $Item = $BlogBList->get_item() )
    		{
    		?>
    		                                    </p>
    		                <div class="bPostSide" lang="<?php $Item->lang() ?>">
    			<?php $Item->anchor(); ?>
    
    			<a href="<?php $Item->permalink() ?>" title="<?php echo T_('Permanent link to full entry') ?>"><?php echo T_('') ?><?php $Item->title(); ?>
    		</div>
    		<?php
    		}
    
    		// Restore after dirty trick:
    		$blog = $saved_blog;
    	?></a></div></div><div id="righttab"><div id="picrotator">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="611" height="208">
        <param name="movie" value="jpgrotator.swf" />
        <param name="quality" value="high" />
        <embed src="jpgrotator.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="611" height="208"></embed>
      </object>
    </div><div id="newsbox"><div id="left"><a><?php
    		// Dirty trick until we get everything into objects:
    		$saved_blog = $blog;
    		$blog = 2;	// Blog B now
    		$Blog_B = Blog_get_by_ID( 2 );	// Blog B
    	?>
    		                      <?php
    		// You can restrict to specific categories by listing them in the two params below: '', array()
    		// '', array(9,15) will restrict to cats 9 and 15
    		// '9,15', array() will restrict to cats 9,15 and all their subcats
    		$BlogBList = & new ItemList( $blog,	 $show_statuses, '', $m, $w, '', array(), $author, $order, $orderby, $posts, '', '', '', '', '', '', '', '5', 'posts', $timestamp_min, $timestamp_max );
    
    		while( $Item = $BlogBList->get_item() )
    		{
    		?>
    		                                    </p>
    		                <div class="bPostSide" lang="<?php $Item->lang() ?>">
    			<?php $Item->anchor(); ?>
    
    			<a href="<?php $Item->permalink() ?>" title="<?php echo T_('Permanent link to full entry') ?>"><?php echo T_('') ?><?php $Item->title(); ?>
    		</div>
    		<?php
    		}
    
    		// Restore after dirty trick:
    		$blog = $saved_blog;
    	?></a></div>
    <div id="right">DINOSAUR! ROAR!</div>
    </div></div>
    
    </div>
    </body>
    </html>
    :: Maybe We Can Do More Than Just Stare At The Bright Lights ::


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:14 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com