SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stuck with a problem in regards to how my CSS is organized...

    Well, I can't really take claim for the CSS, but I have made my own changes to it, and was able to design most of it on my own, just not as well, so I went with it.

    Anyways...

    If you go to http://www.defstatic.com , I think you will see my problem right away. There used to be a logo right next to the ad banner area, and I got rid of it because I would like to extend the area for my Current Weather section.

    I am trying to extend the top_inner module to come down to the top of the poll. However, the way the CSS is, it would overlap the inner_content section. I thought that the advertisement section was seperate from the inner_content, ends up it is a part of it.

    Am I pretty much doomed because of how the CSS is organized? Would accomplishing what I would like require breaking most of the CSS and redesigning it? Or is there a fairly smple fix?

    Here is my CSS...

    Code:
    /* CSS Document */
    
    html {
    	height: 100%;
    }
    
    body {
    	height: 100%;
    	margin-bottom: 1px;
    }
    
    .clr {
    	clear: both;
    }
    
    .outline {
      border: 1px solid #80C9FF;
      background: #00487D;
    	padding: 2px;
    }
    
    #buttons_outer {
    	width: 635px;
      	margin-bottom: 2px;
    	margin-right: 2px;
    	float: left;
    
    }
    
    #buttons_inner {
    	border: 1px solid #80C9FF;
    	height: 21px !important;
    	height: 23px;
    }
    
    #pathway_text {
      overflow: hidden;
    	display: block;
    	height: 25px;
    	line-height: 25px !important;
    	line-height: 22px;
    	padding-left: 4px;
    	border: 1px solid #80C9FF;
    	margin-bottom: 2px;
    }
    
    #pathway_text img {
    	margin-left: 5px;
    	margin-right: 5px;
    	margin-top: 6px;
    }
    
    #buttons {
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	width: auto;
    }
    
    
    ul#mainlevel-nav
    {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	font-size: 0.8em;
    }
    
    ul#mainlevel-nav li
    {
    	background-image: none;
    	padding-left: 0px;
    	padding-right: 0px;
    	float: left;
    	margin: 0;
    	font-size: 11px;
    	line-height: 21px;
    	white-space: nowrap;
    	border-right: 1px solid #80C9FF;
    }
    
    ul#mainlevel-nav li a
    {
    	display: block;
    	padding-left: 15px;
    	padding-right: 15px;
    	text-decoration: none;
    	color: #fff;
    	background: transparent;
    }
    
    #buttons>ul#mainlevel-nav li a { width: auto; }
    
    	ul#mainlevel-nav li a:hover
    {
    	color: #fff;
    	background: #0f86de;
            text-decoration: underline;
    }
    
    
    #search_outer {
    	float: left;
    	width: 165px;
    }
    
    #search_inner {
      border: 1px solid #80C9FF;
    	padding: 0px;
      height: 21px !important;
      height: 23px;
      overflow: hidden;
    }
    
    #search_inner form {
      padding: 0;
      margin: 0;
    }
    
    #search_inner .inputbox {
    	border: 0px;
    	padding: 3px 3px 3px 5px;
    	font-family: arial, helvetica, sans-serif;
    	font-size: 11px;
    	color: #000000;
    }
    
    #header_outer {
    	text-align: left;
    	border: 0px;
    	margin: 0px;
    }
    
    #header {
    	float: left;
    	padding: 0px;
    	margin-right: 2px;
    	width: 635px;
    	height: 150px;
    	background: url(../images/header_short.png) no-repeat;
    }
    
    #top_outer{
    	float: left;
    	width: 165px;
    }
    
    #top_inner {
      border: 1px solid #80C9FF;
    	padding: 2px;
      height: 200px !important;
      height: 144px;
      overflow: auto;
      float: none !important;
      float: left;
    }
    
    #left_outer {
      float: left;
    	margin-top: 2px;
    	width: 165px;
    }
    
    #left_inner {
      border: 1px solid #80C9FF;
    	padding: 2px;
      float: none !important;
      float: left;
    }
    
    #content_outer {
    	padding: 0px;
    	margin-top: 0px;
    	margin-left: 2px;
    	/** border: 1px solid #80C9FF; **/
    	float: left;
    	width: 635px;
    }
    
    #content_inner{
      float: none !important;
      float: left;
      padding: 0;
      padding-top: 2px;
      margin: 0;
    }
    
    table.content_table {
      width: 100%;
    	padding: 0px;
    	margin: 0px;
    }
    
    table.content_table td {
    	padding: 0px;
    	margin: 0px;
    }
    
    
    #banner_inner {
    	float: left;
    	padding: 0px;
    	height: 70px;
    }
    
    #poweredby_inner {
    	float: right;
    	padding: 0px;
    	margin-left: 0px;
    	height: 70px;
    }
    
    #right_outer {
    	margin-left: 2px;
    	width: 165px;
    }
    
    #right_inner {
      float: none !important;
      float: left;
      border: 1px solid #80C9FF;
      padding: 2px;
    }
    
    
    .user1_inner {
    	border: 1px solid #80C9FF;
      float: none !important;
      float: left;
    	margin: 0px;
    	padding: 2px;
    }
    
    .user2_inner {
    	border: 1px solid #80C9FF;
      float: none !important;
      float: left;
    	margin: 0px;
    	padding: 2px;
    }
    
    table td.body_outer {
    	padding: 2px;
    	border: 1px solid #80C9FF;
    }
    
    .maintitle {
    	color: #ffffff;
    	font-size: 40px;
    	padding-left: 15px;
    	padding-top: 20px;
    }
    
    .error {
      font-style: italic;
      text-transform: uppercase;
      padding: 5px;
      color: #ffffff;
      font-size: 14px;
      font-weight: bold;
    }
    
    /** old stuff **/
    
    .back_button {
    	float: left;
      text-align: center;
      font-size: 11px;
      font-weight: bold;
      color: #000;
      border: 3px double #80C9FF;
      width: auto;
      background: url(../images/button_bg.png) repeat-x;
      padding: 0px 10px;
      line-height: 20px;
      margin: 1px;
    }
    
    .back_button a:link, .back_button a:visited {
    color: #000;
    text-decoration: none;
    }
    
    .back_button a:hover {
    color: #000;
    text-decoration: underline;
    }
    
    .pagenav {
      text-align: center;
      font-size: 11px;
      font-weight: bold;
      color: #000;
      border: 3px double #80C9FF;
      width: auto;
      background: url(../images/button_bg.png) repeat-x;
      padding: 0px 10px;
      line-height: 20px;
      margin: 1px;
    }
    
    a.pagenav:visited, a.pagenav:link {
    color: #000;
    text-decoration: none;
    }
    
    a.pagenav:hover {
    color: #000;
    text-decoration: underline;
    }
    
    .pagenavbar {
    	margin-right: 10px;
    	float: right;
    }
    
    #footer {
    	text-align: center;
    	padding: 3px;
    }
    
    ul
    {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    
    li
    {
    line-height: 15px;
    padding-left: 15px;
    padding-top: 0px;
    background-image: url(../images/arrow.png);
    background-repeat: no-repeat;
    background-position: 0px 2px;
    }
    
    
    td {
    	text-align: left;
    	font-size: 11px;
    }
    
    
    
    body {
    	margin: 15px;
    	height: 100%;
    	padding: 0px;
    	font-family: Arial, Helvetica, Sans Serif;
    	line-height: 120%;
    	font-size: 11px;
    	color: #fff;
    	background: #0066b3;
    }
    
    /* Joomla core stuff */
    a:link, a:visited {
    	color: #BFE4FF; text-decoration: none;
    	font-weight: bold;
    }
    
    a:hover {
    	color: #80C9FF;	text-decoration: underline;
    	font-weight: bold;
    }
    
    table.contentpaneopen {
      width: 100%;
    	padding: 0px;
    	border-collapse: collapse;
    	border-spacing: 0px;
    	margin: 0px;
    }
    
    table.contentpaneopen td {
       padding-right: 5px;
    }
    
    table.contentpaneopen td.componentheading {
    	padding-left: 4px;
    }
    
    
    
    table.contentpane {
      width: 100%;
    	padding: 0px;
    	border-collapse: collapse;
    	border-spacing: 0px;
    	margin: 0px;
    }
    
    table.contentpane td {
    	margin: 0px;
    	padding: 0px;
    }
    
    table.contentpane td.componentheading {
    	padding-left: 4px;
    }
    
    table.contentpaneopen fieldset {
    	border: 0px;
    	border-bottom: 1px solid #eee;
    }
    
    .button {
      color: #000;
      font-family: Arial, Hevlvetica, sans-serif;
      text-align: center;
      font-size: 11px;
      font-weight: bold;
      border: 3px double #80C9FF;
      width: auto;
      background: url(../images/button_bg.png) repeat-x;
      padding: 0px 5px;
      line-height: 18px !important;
      line-height: 16px;
      height: 26px !important;
      height: 24px;
      margin: 1px;
    }
    
    .inputbox {
    	padding: 2px;
    	border:solid 1px #80C9FF;
    	background-color: #ffffff;
    }
    
    .componentheading {
    	background: url(../images/subhead_bg.png) repeat-x;
    	color: #000000;
    	text-align: left;
    	padding-top: 4px;
    	padding-left: 4px;
    	height: 21px;
    	font-weight: bold;
    	font-size: 10px;
    	text-transform: uppercase;
    
    }
    
    .contentcolumn {
    	padding-right: 5px;
    }
    
    .contentheading {
    	height: 30px;
    
    	color: #BFE4FF;
    	font-weight: bold;
    	font-size: 14px;
    	
    }
    
    
    
    .contentpagetitle {
    	font-size: 13px;
    	font-weight: bold;
    	color: #ffffff;
    	text-align:left;
    }
    
    table.searchinto {
    	width: 100%;
    }
    
    table.searchintro td {
    	font-weight: bold;
    }
    
    table.moduletable {
    	width: 100%;
    	margin-bottom: 5px;
    	padding: 0px;
    	border-spacing: 0px;
    	border-collapse: collapse;
    }
    
    div.moduletable {
    	padding: 0;
    	margin-bottom: 2px;
    }
    
    table.moduletable th, div.moduletable h3 {
    	background: url(../images/subhead_bg.png) repeat-x;
    	color: #000;
    	text-align: left;
    	padding-left: 4px;
    	height: 21px;
    	line-height: 21px;
    	font-weight: bold;
    	font-size: 10px;
    	text-transform: uppercase;
    	margin: 0 0 2px 0;
    }
    
    table.moduletable td {
    	font-size: 11px;
    	padding: 0px;
    	margin: 0px;
    	font-weight: normal;
    }
    
    table.pollstableborder td {
      padding: 2px;
    }
    
    .sectiontableheader {
      font-weight: bold;
      color: #000;
      background: #f0f0f0;
      padding: 4px;
    }
    
    .sectiontablefooter {
    color: #000;
    }
    
    .sectiontableentry1 {
            color: #000;
            background-color : #BFE4FF;
    }
    
    .sectiontableentry1 a, .sectiontableentry2 a:visited {
    color: #000;
    text-decoration: none;
    }
    
    .sectiontableentry1 a:hover {
    color: #000;
    text-decoration: underline;
    }
    
    .sectiontableentry2 {
            color: #000;
            background-color : #80C9FF;       
    }
    
    .sectiontableentry2 a, .sectiontableentry2 a:visited {
    color: #000;
    text-decoration: none;
    }
    
    .sectiontableentry2 a:hover {
    color: #000;
    text-decoration: underline;
    }
    
    .small {
    	color: #999999;
    	font-size: 11px;
    }
    
    .createdate {
    	height: 15px;
    	padding-bottom: 10px;
    	color: #999999;
    	font-size: 11px;
    }
    
    .modifydate {
    	height: 15px;
    	padding-top: 10px;
    	color: #999999;
    	font-size: 11px;
    }
    
    table.contenttoc {
      border: 1px solid #80C9FF;
      padding: 2px;
      margin-left: 2px;
      margin-bottom: 2px;
    }
    
    table.contenttoc td {
      padding: 2px;
    }
    
    table.contenttoc th {
      background: url(../images/subhead_bg.png) repeat-x;
      color: #666666;
    	text-align: left;
    	padding-top: 2px;
    	padding-left: 4px;
    	height: 21px;
    	font-weight: bold;
    	font-size: 10px;
    	text-transform: uppercase;
    }
    
    a.mainlevel:link, a.mainlevel:visited {
    	display: block;
    	background: url(../images/menu_bg.png) no-repeat;
    	vertical-align: middle;
    	font-size: 11px;
    	font-weight: bold;
    	color: #ccc;
    	text-align: left;
    	padding-top: 5px;
    	padding-left: 18px;
    	height: 20px !important;
    	height: 25px;
    	width: 100%;
    	text-decoration: none;
    }
    
    a.mainlevel:hover {
    	background-position: 0px -25px;
    	text-decoration: none;
    	color: #fff;
    }
    
    a.mainlevel#active_menu {
    	color:#fff;
    	font-weight: bold;
    }
    
    a.mainlevel#active_menu:hover {
    	color: #fff;
    }
    
    a.sublevel:link, a.sublevel:visited {
    	padding-left: 1px;
    	vertical-align: middle;
    	font-size: 11px;
    	font-weight: bold;
    	color: #c64934;
    	text-align: left;
    }
    
    a.sublevel:hover {
    	color: #900;
    	text-decoration: none;
    }
    
    a.sublevel#active_menu {
    	color: #333;
    }
    
    .highlight {
    	background-color: Yellow;
    	color: Blue;
    	padding: 0;
    }
    .code {
    	background-color: #ddd;
    	border: 1px solid #bbb;
    }
    
    form {
    /* removes space below form elements */
    	margin: 0;
     	padding: 0;
    }
    
    div.mosimage {
      border: 1px solid #ccc;
    }
    
    .mosimage {
      border: 1px solid #80C9FF;
      margin: 5px
    }
    
    .mosimage_caption {
      margin-top: 2px;
      background: #efefef;
      padding: 1px 2px;
      color: #666;
      font-size: 10px;
      border-top: 1px solid #80C9FF;
    }
    
    span.article_seperator {
    	display: block;
    	height: 1.5em;
    }
    And my HTML if needed...

    Code:
    <?php
    defined( '_VALID_MOS' ) or die( 'Restricted access' );
    // needed to seperate the ISO number from the language file constant _ISO
    $iso = explode( '=', _ISO );
    // xml prolog
    echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
    ?>
    <!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 name="verify-v1" content="NVhiIJPJjZEncpy4SPgoXBU4zdeOgsAvXKZZT+CaNlg=" />
    <?php mosShowHead(); ?>
    <?php
    if ( $my->id ) {
    	initEditor();
    }
    $collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) ? 2 : 1;
    //script to determine which div setup for layout to use based on module configuration
    $user1 = 0;
    $user2 = 0;
    $colspan = 0;
    $right = 0;
    // banner combos
    
    //user1 combos
    if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) == 2) {
    	$user1 = 2;
    	$user2 = 2;
    	$colspan = 3;
    } elseif ( mosCountModules( 'user1' ) == 1 ) {
    	$user1 = 1;
    	$colspan = 1;
    } elseif ( mosCountModules( 'user2' ) == 1 ) {
    	$user2 = 1;
    	$colspan = 1;
    }
    
    //right based combos
    if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
    	$right = 1;
    }
    ?>
    <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
    <link href="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/css/template_css.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    
    <div align="center">
    	<table border="0" cellpadding="0" cellspacing="0" width="808">
    		<tr>
    			<td class="outline">
    		  		<div id="buttons_outer">
    		  		  <div id="buttons_inner">
    						<div id="buttons">
    						<?php mosLoadModules ( 'user3', -1); ?>
    						</div>
    					</div>
    		  		</div>
    		  		<div id="search_outer">
    		  		  <div id="search_inner">
    		  		  <?php mosLoadModules ( 'user4', -1 ); ?>
    		  		  </div>
    		  		</div>
    		  		<div class="clr"></div>
    		  		<div id="header_outer">
    		  			<div id="header">
    		  			&nbsp;
    		  			</div>
    		  			<div id="top_outer">
    						<div id="top_inner">
    						<?php
    			  			if ( mosCountModules( 'top' ) ) {
    			  				mosLoadModules ( 'top', -2 );
    			  			} else {
    			  				?>
    			  				<span class="error">Top Module Empty</span>
    			  				<?php
    			  			}
    			  			?>
    						 </div>
    				  </div>
    		  		</div>
    		  		<div id="left_outer">
    		  			<div id="left_inner">
    		  			<?php mosLoadModules ( 'left', -2 ); ?>
    		  			</div>
    		  		</div>
    		  		<div id="content_outer">
    					<div id="content_inner">
    					<?php
    		  			if ( mosCountModules ('banner') ) {
    		  				?>
    		  				<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
    						<tr>
    								<td>
    									<div id="banner_inner">
    									<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/advertisement.png" alt="advertisement.png, 0 kB" title="advertisement" border="0" height="8" width="468" /><br />
    			  					<?php mosLoadModules( 'banner', -1 ); ?><br />
    									</div>
    									
    									</div>
    								</td>
    							</tr>
    							</table>
    							<?php
    		  			}
    		  			?>
    		  			<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
    						<tr valign="top">
    							<td width="99%">
    								<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
    
    								<?php
    								if ($colspan > 0) {
    								?>
    									<tr valign="top">
    										<?php
    				  					if ( $user1 > 0 ) {
    				  						?>
    				  						<td width="50%">
    				  							<div class="user1_inner">
    				  							<?php mosLoadModules ( 'user1', -2 ); ?>
    				  							</div>
    				  						</td>
    				  						<?php
    				  					}
    				  					if ( $colspan == 3) {
    										 ?>
    											<td width="2">
    												<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/spacer.png" alt="" title="spacer" border="0" height="10" width="2" />
    											</td>
    										<?php
    										}
    				  					if ( $user2 > 0 ) {
    				  						?>
    				  						<td width="50%">
    				  							<div class="user2_inner">
    				  							<?php mosLoadModules ( 'user2', -2 ); ?>
    				  							</div>
    				  						</td>
    				  						<?php
    				  					}
    										?>
    									</tr>
    									<tr>
    										<td colspan="<?php echo $colspan; ?>">
    											<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/spacer.png" alt="" title="spacer" border="0" height="2" width="100" /><br />
    										</td>
    									</tr>
    									<?php
    									}
    								?>
    								<tr>
    									<td colspan="<?php echo $colspan; ?>">
    										<div id="pathway_text">
    										<?php mosPathWay(); ?>
    										</div>
    									</td>
    								</tr>
    								<tr>
    									<td colspan="<?php echo $colspan; ?>" class="body_outer">
    				  					 <?php mosMainBody(); ?>
    									</td>
    								</tr>
    								</table>
    
    
    							</td>
    							<?php
    							if ( $right > 0 ) {
    		  				?>
    		  				<td>
    			  				<div id="right_outer">
    			  					<div id="right_inner">
    			  					<?php mosLoadModules ( 'right', -2 ); ?>
    			  					</div>
    			  				</div>
    		  				</td>
    		  				<?php
    		  			}
    		  			?>
    
    						</tr>
    						</table>
    		  		</div>
    		  	</div>
    		  </td>
    	  </tr>
      </table>
    </div>
    <?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
    <?php mosLoadModules( 'debug', -1 );?>
    </body>
    </html>

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    You can use negative margins to fix this up pretty easily.
    Code:
    margin-top: -55px; // Move element upwards 55px
    Hope it helps

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Hello,

    You can use negative margins to fix this up pretty easily.
    Code:
    margin-top: -55px; // Move element upwards 55px
    Hope it helps
    I am not exactly sure how this would help.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You can use a negative margin to drag an element out of it's normal position.
    a negative margin-top will drag that element upward.
    Try applying it to the elements you wish to move up the page.
    Code:
    #content_outer {
        float:left;
        margin-left:2px;
        margin-top:-70px;
        padding:0px;
        width:635px;
    }
    #left_outer {
        float:left;
        margin-top:-75px;
        width:165px;
    }


Bookmarks

Posting Permissions

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