Jump to content

DIV positioning issue!!!

twilitegxa

By twilitegxa
in CSS Help

 Share

Recommended Posts

twilitegxa Advanced Member

twilitegxa

Posted
Posted

I'm having some CSS issues. I can't get this logo (KISSArmy) to be positioned the way I want it. Whenever I try to move the main content section up, the logo moves, too. How can I get the main content moved up more and the logo to not move? Here are the two files we're workign with and here's the link to a live version of it:

 

http:webdesignsbyliz.com/kissarmy

 

index.php:

<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>

<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>

<!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"

xml:lang="<?php echo $this->language; ?>"

lang="<?php echo $this->language; ?>" >

<head>

<jdoc:include type="head" />

<link href="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/css/template.css" rel="stylesheet" type="text/css" />

<?php



if ($this->params->get('showselector') == "show") {

    

    echo "<link href=\"".$this->baseurl."/templates/transparent_bliss_1.5/css/img".$this->params->get('defaultimage').".css\" rel=\"stylesheet\" type=\"text/css\" /> \n";

    

    foreach (range(1, 6) as $bgimage) {

    

        if ($this->params->get('defaultimage') != $bgimage) {

        echo "<link href=\"".$this->baseurl."/templates/transparent_bliss_1.5/css/img".$bgimage.".css\" title=\"img".$bgimage."\" rel=\"alternate stylesheet\" type=\"text/css\" /> \n";

        }

    } 

    include ("imageswapper.php");

    

} else if ($this->params->get('showselector') == "random" || $this->params->get('showselector') == "modRand") {



    $randomImage  = "img";

    $randomImage .= rand(1, 6);

        echo "<link href=\"".$this->baseurl."/templates/transparent_bliss_1.5/css/".$randomImage.".css\" rel=\"stylesheet\" type=\"text/css\" /> \n";

        

} else if ($this->params->get('showselector') == "hide" || $this->params->get('showselector') == "module") {

    echo "<link href=\"".$this->baseurl."/templates/transparent_bliss_1.5/css/img".$this->params->get('defaultimage').".css\" rel=\"stylesheet\" type=\"text/css\" /> \n";

}

?>

<!--[if IE 6]>

<style type="text/css">

img, div, td { behavior: url(<?php echo $this->

baseurl ?>/templates/transparent_bliss_1.5/js/iepngfix.htc); }

</style>

<link href="<?php echo $this->baseurl."/templates/transparent_bliss_1.5/css/template-ie6.css";?>" rel="stylesheet" type="text/css" media="all" /> 

<![endif]-->

<body>

<div id="wrapper">

  <div id="headwrap">

    <div id="logo"></div>

    <div id="topbannerad"><jdoc:include type="modules" name="user5" style="xhtml" /></div>

  </div>

  <div id="leftwrap">

    <div><img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/left-top.png" alt="top-slice" width="180" height="10" border="0" /></div>

    <div id="left">

      

      <div id="leftinner2">

        <jdoc:include type="modules" name="left" style="xhtml" />

        <jdoc:include type="modules" name="user1" style="xhtml" />

      </div>

    </div>

    <div><img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/left-bottom.png" alt="" width="180" height="10" border="0" /></div>

  </div>

  <div  id="right">

    <div><img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/right-top.png" border="0" alt="" width="600" height="10" border="0" /></div>

    <div id="rightinner">

      <div id="rightinner2">

        <?php 

        if ($this->params->get('showselector') == "module" || $this->params->get('showselector') == "modRand") {

        ?>

        <div id="TopModule">

          <jdoc:include type="modules" name="top" style="xhtml" />

        </div>

        <?php 

        } else if ($this->params->get('showselector') == "show") {

        ?>

        <center>

          <h1 style="text-align: center;">Select background</h1>

          <br />

          <?php

          

            echo "<a href=\"javascript:chooseStyle('none', 60)\" checked=\"checked\" /><img src=\"".$this->baseurl."/templates/transparent_bliss_1.5/background_images/thumb".$this->params->get('defaultimage').".jpg\" alt=\"background image ".$this->params->get('defaultimage')."\" border=\"0\" class=\"bgthumbs\" /></a> \n";

            

            foreach (range(1, 6) as $bgimage) {

            

                if ($this->params->get('defaultimage') != $bgimage) {

                echo "<a href=\"javascript:chooseStyle('img".$bgimage."', 60)\" /><img src=\"".$this->baseurl."/templates/transparent_bliss_1.5/background_images/thumb".$bgimage.".jpg\" alt=\"background image ".$bgimage."\" border=\"0\" class=\"bgthumbs\" /></a> \n";

                }

            } 

          ?>          

        </center>

        <?php }    ?>



        <jdoc:include type="component" />

        <div id="BottomModule">

          <jdoc:include type="modules" name="user3" style="xhtml" />

        </div>

      </div>

    </div>

    <div><img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/right-bottom.png" alt="" width="600" height="10" border="0" /></div>

    <div id="joomlabear"><center>Copyright 2010 Web Designs By Liz. All rights reserved.</center></div>

  </div>

  <div id="farrightwrap">

    <div></div>

    <div id="farright">



      <div id="farrightinner2">

            <jdoc:include type="modules" name="user4" style="xhtml" />

        <jdoc:include type="modules" name="right" style="xhtml" />

      </div>

    </div>

    <div></div>

  </div>

</div>

</div>

</body>

</html>

 

template.css:

html {
    padding: 0px;
    margin: 0px;
    border: 0px;
}

body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    height: 100%;
    width: 100%;
    text-align: center; /* required for centering the page in IE */
    background-repeat: no-repeat;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #E9E9E9;
    line-height: 19px;
    background-attachment: fixed;
    background-position: left bottom;
    background-color: #000000;
}

.bodytext p {
   font-size: 12px;
}

.poll {
    overflow: hidden;
    text-align: left;
}

.bgthumbs {
    margin: 2px;
    border: 2px solid #000000;
}

.bgthumbs a:hover {
    border: 2px solid #0099CC;
}

h1, h2, h3, h4, p, ul, li, .poll, table.contentpaneopen {
    margin: 0px;
    padding: 0px;
    border:0px;
    list-style-type:none;
    font-size:12px;
}

h1,h2,h3,.componentheading, .contentheading {
    font-family: Trebuchet MS, Tahoma, Verdana, Arial;
    font-style: inherit;
    padding-bottom: 0px;
    text-align: left;
    color: #88CFFF;
    line-height: 18px;
    font-size: 16px;
    
}

div.componentheading {
    padding-bottom: 10px;
    text-decoration: underline;
}

.moduletable_menu h3 {
    text-indent: 10px;
    padding-bottom: 5px;
}

h1,.componentheading, .contentheading {
    font-size: 18px;
}
    
fieldset.input {
    border: 0px none;
}

a:link {
    color: #88CFFF;
    font-weight: bold;
}

a:hover {
    text-decoration: none;
}

a:visited{
    color: #88CFFF;
    font-weight: bold;
}

.moduletable {
    padding-bottom: 15px;
}

.mostread {
    list-style-type: none;
}

#logo {
    width: 550px;
    height: 200px;
    float: left;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    margin-left: 650px; 
}

#headwrap {
    width: 980px;
    height: 90px;
    margin-bottom: 10px;
}

#topbannerad {
    float: right;
    width: 728px;
    height: 90px;
}

#wrapper {
    height: 100%;
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    clear: both;
}

#leftwrap {
    text-align: left;
    width: 180px;
    margin-right: 10px;
    float: left;
    clear: both;
}

* html #left { display: inline; }

#left{
    width: 180px;
    background-image: url(../images/left-mid.png);
    background-repeat: repeat-y;
}

#leftinner2 .moduletable{
    padding-left: 10px;
}

#right {
    width: 600px;
    text-align: left;
    float: left;
}

* html #right { display: inline; }

#rightinner {
    background-image: url(../images/right-mid.png);
    background-repeat: repeat-y;
    width: 600px;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#rightinner2 {
    margin-left: 0px;
    list-style-type: none;
    padding: 20px;
    border: 0px;
}

table.contentpane {
    width: 558px;
    overflow: hidden;
    display: inline;
    padding-bottom: 10px;
}

#farrightwrap {
    text-align: left;
    margin-left: 0px;
    width: 180px;
    margin-left: 10px;
    float: right;
}

#farright {
    width: 180px;
    background-image: url(../images/left-mid.png);
    background-repeat: repeat-y;

}

* html #farright { display:inline; }

#farrightinner2 {
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

#TopModule {
    width: 468px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15px;
}
    
#BottomModule {
    width: 468px;
    margin-right: auto;
    margin-left: auto;
}

.logoLeft {
    float: left;
    margin: 10px;
}

.module_menu, #left .module {
    list-style-type: none;
    border: 0px;
    padding: 0px;
    margin: 0px;
}

ul.menu {
    padding-bottom: 15px;
    border-top-width: 1px;
    border-top-style: dotted;
    border-top-color: #666666;
}

.menu li, .menu {
    display: block;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    text-indent: 18px;
    line-height: 21px;
}

.menu li a {
    display: block;
    height: 20px;
    padding: 3px;
    position: relative;
    left: 1px;
    width: 172px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #666666;
    background-image: url(../images/star.png);
    background-repeat: no-repeat;
    background-position: 4px 50%;
}

.menu li a:link, ul.menu a:visited {
    display: block;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
}

.menu li a:hover {
    display: block;
    background-color: #88cfff;
    color: #000;
    background-image: url(../images/star-hover.png);
    background-repeat: no-repeat;
    background-position: 4px 50%;
}

ul#mainlevel a:link#active_menu, ul#mainlevel a:visited#active_menu {
    background-image: none;
    background-color: #FFF;
    color: #000;
}

li.mostread, li.latestnews{
    padding-bottom: 4px;
}

li.mostread, li.latestnews a:link{
    background-repeat: no-repeat;
}

.bear {
    float: right;
}
.sublevel {
    text-indent: 15px;
}

.column_separator {
    padding-left: 20px;
}

.article_column {
}

li.contentpaneopen, ul.contentpaneopen {
    list-style-type: none;
}

table .contentpaneopen {
    width: 100%;
    display: inline;
}

.buttonheading img, .hasTip img, .bs_contentdiv img {
    border: 0px;
}

.small, .createdate, .modifydate {
    font-size: 90%;
    font-style: italic;
    padding-bottom: 5px;
}

a.readon {
    font-size: 12px;
    float: right;
    margin-top: 2px;
    padding-top: 3px;
    padding-right: 20px;
    padding-bottom: 3px;
    padding-left: 7px;
    display: inline;
    background-color: #000000;
    background-image: url(../images/arrow.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    C40004-height: 15px;
    color: #88cfff;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid #666;
    background-position: right 48%;
}

a.readon:hover, a.readon:active, a.readon:focus {    color:#000000;
    background-color: #88cfff;
    background-image: url(../images/arrow-hover.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-x-position: 5px;
    background-y-position: 48%;
    border: 1px solid #000000;
}

html {
    margin-bottom: 1px;
    height: 100%!important;
    height: auto;
}

#mod_search_searchword {
    font-size: 12px !Important;
    width: 140px;
}

#mod_login_password, #mod_login_username {
    width:160px;
    color: #FFF;
}

form {
    margin: 0;
    padding: 0;
}

input, select {
    font-size: 12px !Important;
}

label {
    font-size: 12px;
    text-align: left;
    margin: 0px;
    padding: 0px;
}

.pollstableborder {
    text-align: left;
}

select, .inputbox {
    padding: 4px;
    font-size: 12px;
}

textarea {
    font-size: 12px;
}

.button {
    border: 1px solid #666;
    padding: 2px 6px!important;
    background: url(../images/button-bg.gif) repeat-x top #000;
    color: #88CFFF;
    font-weight: bold;
    font-size: 12px;
}

#modlgn_remember {
    border: 0px;
    padding: 0px;
    margin: 0px;
    height: 14px;
    width: 14px;
}

#form-login {
}

ul.latestnews {
}

.button:hover  {
    background: url(../images/button-bg.gif) repeat-x top #88CFFF;
    color: #000;
    border: 1px solid #000;
}

.button:active, .button:focus {
    border: 1px solid #222222;
}

#form-login-remember {
    display:inline;
    vertical-align:top;
}

#mod_search_searchword .inputbox {
    font-size:12px;
}

.inputbox {
    font-size: 12px;
    border: 1px solid #3F3F3F;
    background: #000;
    color: #FFFFFF;
    text-indent: 3px;
}
    

#left .inputbox, #mainContent .inputbox {
    margin-top: 5px;
    margin-bottom: 5px;
    background: #000 !important;
    text-indent: 3px;
}

#left .inputbox:hover, #left .inputbox:focus, #mainContent .inputbox:hover, #mainContent .inputbox:focus, #farrightinner2 .inputbox:focus, #farrightinner2 .inputbox:hover{
    border: 1px solid #88CFFF;
}

#farrightinner2 form {
    width:160px;
}

#form-login-remember .inputbox:hover {
    border:none
}

 

Can anyone help, please??

Link to comment
https://forums.phpfreaks.com/topic/210088-div-positioning-issue/
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.