33 users online (0 members and 33 guests)  


  Results 1 to 3 of 3

Related

  1. Rollover images with text area    Forum: Javascript Forum
    Replies: 0
  2. Different rollover images and text showing    Forum: Javascript Forum
    Replies: 0
  3. help moving linked images    Forum: Myspace Forum
    Replies: 1
  4. Two column text next to images    Forum: CSS Forum
    Replies: 2
  5. moving two images across the screen    Forum: Website Scripts Forum
    Replies: 1
  1. #1
    g33kg1rl's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2005
    Posts
    5

    Question Moving Text and Images

    Hi there, I am pretty new to CSS. I am getting to understand it.
    The problem I am having is that I would like the #mainfield box to be larger. In hopes I can enter in more text. The text I have if I change the z-Index from z-index:1 to z-index:2 that it overlaps like it should. (At this point that seems to be the only way I can get my text not to get cut off.

    I would love to either move down the #contentfield or the #content but I can't figure out how to do that.

    I can copy the CSS, but I can only PM the url of the site, because of contract reasons with the person I am doing the website for. (if your wondering how I can do websites but not CSS.. my usual place is with databases, and flash. )I did not write the site, but the orginal webdesigner took off.
    I do like CSS though as far as I have learned.

    Thanks for any insight.

    /* Main Body Styles */

    body {

    background-color: #628CB2;

    background-image: url('images/bg.gif');

    background-repeat: repeat

    }

    div.container {

    width: 100%;

    }

    div#mainarea {

    position:absolute;

    left:50%;

    top:0px;

    width:780px;

    height:677px;

    margin-left: -390px;

    }



    /*Logo */

    div#logo {

    position:absolute;

    left:48px;

    top:0px;

    width:162px;

    height:97px;

    }



    /* Navigation */

    div#navmenu {

    position:absolute;

    left:210px;

    top:69px;

    width:544px;

    height:28px;

    }



    /* Left Menu */

    div#mycc {

    position:absolute;

    left:48px;

    top:97px;

    width:160px;

    height:212px;

    background-color: #CCE5EF;

    border-left-width: 2px;

    border-left-style: solid;

    border-left-color: #CBDAED;

    }



    .leftmenutext {

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #005476;

    padding-left: 10px;

    line-height: 16px;

    padding-right: 10px;

    padding-top: 4px;

    width: 139px;

    }

    .leftmenutext a{

    font-weight: bold;

    color: #336666;

    text-decoration: underline;

    }



    #others {

    background-color: #CCE5EF;

    border-left-width: 2px;

    border-left-style: solid;

    border-left-color: #CBDAED;

    }



    /* Content Area */

    #mainfield {

    position:absolute;

    left:210px;

    top:97px;

    width:544px;

    height:900px;

    background-image: url('images/mainfield.gif');

    background-repeat: no-repeat

    }

    #fieldtext {

    position:absolute;

    left:116px;

    top:11px;

    width:418px;

    height:900px;

    z-index:2

    }

    .headline {

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 22px;

    font-weight: bold;

    color: #007CB2;

    text-decoration: none;

    line-height: 28px;

    }

    .fieldbullets {

    font-family: Tahoma, Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #000000;

    line-height: 24px;

    list-style-type: square;

    }

    #contentfield {

    position:absolute;

    left:48px;

    top:309px;

    width:706px;

    height:1;

    z-index:1;

    position: absolute;

    background-color: #FFFFFF;

    }

    #content {

    position:absolute;

    left:48px;

    top:97px;

    width:706px;

    height:1;

    z-index:1;

    position: absolute;

    background-color: #FFFFFF;

    }

    #otherscontent {

    background-color: #CCE5EF;

    border-left-width: 2px;

    border-left-style: solid;

    border-left-color: #CBDAED;

    height: 300px;

    }

    #whatsnewcontent {

    background-color: #FFFFFF;

    border-left-width: 2px;

    border-left-style: solid;

    border-left-color: #90C0D3;

    font-family: Tahoma, Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #333333;

    padding: 10px 5px 5px 20px;

    line-height: 16px;

    }

    #specialscontent {

    background-color: #FFFFFF;

    border-right-width: 1px;

    border-right-style: solid;

    border-right-color: #CBDAED;

    border-left-width: 1px;

    border-left-style: dotted;

    border-left-color: #CBDAED;

    font-family: Tahoma, Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #333333;

    padding: 10px 5px 5px 20px;

    line-height: 16px;

    }

    #leftheader {

    margin-left: 2px;

    }



    /* Submenu */

    #submenu {

    border-left-width: 2px;

    border-left-style: solid;

    border-left-color: #90C0D3;

    border-right-width: 2px;

    border-right-style: solid;

    border-right-color: #CBDAED;

    border-bottom-width: 1px;

    border-bottom-style: solid;

    border-bottom-color: #90C0D3;

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: bold;

    color: #333333;

    text-align: right;

    padding-right: 10px;

    padding-top: 4px;

    }



    /*Footer*/

    #footer {

    background-color: #2D748E;

    height: 40px;

    border-right: 2px solid #CCE5EF;

    border-bottom: 2px solid #CCE5EF;

    border-left: 2px solid #CCE5EF;

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    font-size: 11px;

    /*font-weight: bold;*/

    padding-left: 10px;

    color: #57ABCA;

    }

    #footer a{

    color: #57ABCA;

    text-decoration: none;

    }

    #footer a:hover{

    color: #FFFFFF;



    }



    /* Inside Page Layout */

    #leftpanel {

    background-color: #CCE5EF;

    border-left-width: 2px;

    border-left-style: solid;

    border-left-color: #CBDAED;

    height: 300px;

    }

    #mainpanel {

    background-color: #FFFFFF;

    border-left-width: 2px;

    border-left-style: solid;

    border-left-color: #90C0D3;

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #333333;

    padding: 10px 20px 5px;

    line-height: 16px;

    }

    #mainpanel a{

    color: #336699;

    text-decoration: none;

    }

    #mainpanel a:hover{

    color: #336699;

    text-decoration: underline;

    background-color: #F5FCFC;

    }

    #rightpanel {

    background-color: #FFFFFF;

    border-right-width: 1px;

    border-right-style: solid;

    border-right-color: #CBDAED;

    border-left-width: 1px;

    border-left-style: dotted;

    border-left-color: #CBDAED;

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #333333;

    padding: 10px 5px 5px 20px;

    line-height: 16px;

    }

    .userlistheading {

    font-weight: bold;

    color: #FFFFFF;

    background-color: #336699;

    }

    .userlistheading2 {

    font-weight: bold;

    color: #FFFFFF;

    background-color: #FF6633;

    }

    .myccmenu {

    display: inline;

    list-style-type:square; list-style-image:url('none'); list-style-positionutside

    }

    .myccmenu li{

    margin-bottom: 10px;

    margin-left: 15px;

    margin-top: 2px;

    }

    .articleTitle {

    font: bold 18px Tahoma, Arial, Helvetica, sans-serif;

    color: #FF9900;

    }

    .articleListing {

    border-bottom: 1px dashed #CCCCCC;

    }

    .articleInfo {

    font-size: 10px;

    color: #666666;

    }

    .articleSummary {

    padding: 12px 4px;

    display: block;

    }

    .homeContent {

    width: 223px;

    }

    span.homeListTitle a{

    font: bold 14px Tahoma, Arial, Helvetica, sans-serif;

    color: #FF9900;

    text-decoration: none;

    }

    span.homeListTitle a:hover{

    text-decoration: underline;

    }

    .homeListSummary{

    padding: 8px 2px;

    display: block;

    margin-bottom: 12px;

    border-bottom: 1px dotted #CCCCCC;

    font: 10px Tahoma, Arial, Helvetica, sans-serif;

    }

    .homeListSummary a{

    padding: 8px 2px;

    display: block;

    float: right;

    font-size: 9px;

    color: #FF9900;

    }

    span.homeListTitle2 a{

    font: bold 14px Tahoma, Arial, Helvetica, sans-serif;

    color: #F04E23;

    text-decoration: none;

    }

    .archiveLink{

    padding: 8px 2px;

    display: block;

    font-size: 12px;

    color: #6AABDC;

    text-decoration: none;

    }

    .archiveLink:hover{

    text-decoration: underline;

    }

    .showTitle{

    font-size: 24px;

    font-weight: bold;

    line-height: normal;

    }

    .showSubTitle{

    font-size: 14px;

    line-height: normal;

    color: #999999;

    font-weight: bold;

    padding-left: 4px;

    }

    .showAuthor{

    font-size: 9px;

    padding-left: 8px;

    }

    .showBody{

    font-size: 12px;

    padding-left: 8px;

    }

  2. #2
    Doorknob's Avatar
    Super Newbie

    Status
    Offline
    Join Date
    Jun 2002
    Location
    Malaysia
    Posts
    316

    Re: Moving Text and Images

    #contentfield and #content are positioned absolute, that means that they will placed at a certain spot on the page regardless of where in the code it is placed. If you remove "position:absolute" then the content will act as normal and appear where it should. To move #contentfield, change the "left", and "top". The content is currently placed 48 pixels from the left of the screen and 309 pixels from the top of the screen.

    #contentfield {
    position:absolute;
    left:48px; <-- change this to change position of the content
    top:309px; <-- change this to change position of the content
    width:706px;
    height:1;
    z-index:1;
    background-color: #FFFFFF;
    }

  3. #3
    g33kg1rl's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2005
    Posts
    5

    Re: Moving Text and Images

    Thank you so much! I fixed it , plus was able to then fix the div#mycc to match!!

    Hope your day is wonderful!

    Thanks again! I really apperciate it.



Tags for this Thread