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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help changing fluid layout to fixed layout

    Full disclosure - I'm a total noob. I even had to look up the definition of noob to make sure I was using it correctly.

    I want to change my Tumblr theme from a fluid layout to a fixed layout. I contacted the layout designer, but she had no clue. So I'm hoping you can help.

    The site is: http://allbaby.tumblr.com

    I'll post the code at the end.

    What I have tried so far: Changing the % values to px values.
    Problems with what I tried:
    1) I can't seem to figure out the right px values to use to keep the columns proportional and centered.
    2) Even when all the %s are gone, the right column and the header still act fluid. The left column and the center column appear to be fixed. This is driving me crazy. What am I missing?

    Yes, I could choose another theme. But then I wouldn't learn anything.

    If you have an answer for me, please be very specific in your answer, because I don't know nuthin'.

    Thanks for your help. Here's the full original code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <head>
            <link rel="shortcut icon" href="{Favicon}">
            <link rel="alternate" type="application/rss+xml" href="{RSS}">
            {block:Description}
                <meta name="description" content="{MetaDescription}" />
            {/block:Description}
    
            <meta name="color:Primary" content="#3EBAC2"/>
            <meta name="color:Secondary" content="#F0586A"/>
            <meta name="image:Background" content=""/>
    
    <style type="text/css">
    
     body {
      background-color: white;
      background-image: url({image:Background});
      background-attachment: fixed;
      font-family: Georgia;
      font-size: 13px;
      line-height: 20px;
      color: #333;
      text-wrap: normal;
      word-wrap: break-word;
     }
    
     a {
     color: {color:Primary};
     text-decoration: none;
     font-weight: normal;
     }
    
     a:hover {
     color: {color:Secondary};
     }
    
     blockquote {
     background-color: none;
     font-style: italic;
     font-size: 11px;  
     border-left: 2px solid #999999;
     border-right: none;
     border-top: none;
     border-bottom: none;
     margin: 0px;
     padding-left: 4px;
     padding-bottom: 0px;
     padding-right: 0px;
     padding-top: 0px;
     line-height: 9px;
     width: 90%;
    
     }
    
     .headerwrapper {
      position: absolute;
      top: 10px;
      left: 15%;
      right: 15%;
      text-align: center;
      text-wrap: normal;
      word-wrap: break-word;
     }
    
     .header h1 {
      font-size: 125px;
      color: {color:Secondary};
      font-weight: normal;
      line-height: 50px;
      font-family: Garamond;
     }
    
     .leftsidebar {
      position: absolute;
      top: 250px;
      left: 10%;
      width: 15%;
      text-align: right;
      color: #999;
     }
    
     .rightsidebar {
      position: absolute;
      top: 250px;
      right: 10%;
      width: 15%;
      text-align: left;
      color: #999;
     }
    
     .content {
      position: absolute;
      top: 250px;
      left: 30%;
      right; 30%;
      width: 40%;
      padding-bottom: 25px;
     }
    
     .entry {
      border: 1px solid #CCC;
      padding: 10px;
      margin-bottom: 25px;
     }
    
     .entryheader {
      background-color: #CCC;
      margin: 0px;
      padding: 2px;
      color: white;
      text-align: center;
      font-family: Georgia;
      letter-spacing: 2px;
      font-size: 16px;
      font-variant: small-caps;
     }
    
    
     h3 {
      font-size: 24px;
      text-align: center;
      font-family: Garamond;
     }
    
     h4 {
      border-bottom: 1px solid #CCC;
      font-variant: small-caps;
      padding-right: 15px;
      padding-top: 0px;
      padding-bottom: 1px;
      margin-top: 0px;
      margin-bottom: 5px;
      text-align: right;
      font-size: 15px;
      font-family: Georgia;
      font-weight: normal;
      letter-spacing: 1px;
      color: #666;
     }
    
     h5 {
      border-bottom: 1px solid #CCC;
      font-variant: small-caps;
      padding-left: 15px;
      padding-top: 0px;
      padding-bottom: 1px;
      margin-top: 0px;
      margin-bottom: 5px;
      text-align: left;
      font-size: 15px;
      font-family: Georgia;
      font-weight: normal;
      letter-spacing: 1px;
      color: #666;
     }
    
     .quote {
      font-size: 24px;
      text-align: center;
      font-family: Garamond;
      color: {color:Secondary};
      font-weight: normal;
     }
    
     .link {
      font-size: 24px;
      text-align: center;
      font-family: Garamond;
      font-weight: normal;
     }
    
     .source {
      font-size: 14px;
      letter-spacing; 2px;
      color: #999;
     }
    
     .description { 
      font-size: 13px;
      font-family: Georgia;
      text-align: left;
     }
    
     ul li {
      list-style-type: none;
     }
    
     ul li.odd {
      color: {color:Text Hover};
     }
    
     ul li.even {
      color: {color:Colored Text};
     }
    
     .label {
      font-weight: bold;
     }
    
     .submit {
      background-color: white;
      color: #999; 
      border: 0px;
     }
    
     .input {
      background-color: white;
      color: #999;
      font-family: monospace;
      border: 1px solid #999;
     }
    
     .notes {
      font-size: 12px;
      font-weight: normal;
      text-align: right;
     }
    
    {CustomCSS}
    </style>
    
    <title>{Title}</title>
    </head>
    <body>
    
    
    <div class="leftsidebar">
    
    <!-- Use H4 headers for this side -->
    <!-- And add two break tags after each subcontent -->
    
    <img src="{PortraitURL-128}"><br/><br/>
    <h4>About</h4>
    
    {Description}
    
    <br/><br/>
    
    <h4>Search</h4>
    <form action="/search" method="get">
        <input type="text" name="q" value="{SearchQuery}" class="input"/>
        <input type="submit" value="Go" class="submit"/>
    </form>
    
    </div>
    
    <div class="rightsidebar">
    
    <!-- Use H5 headers for this side -->
    <!-- And add two break tags after each subcontent -->
    
    <h5>Navigation</h5>
    
    +&nbsp;&nbsp;<a href="{RSS}">  Subscribe </a><br/>
    +&nbsp;&nbsp;<a href="/archive">  Archive </a><br/>
    +&nbsp;&nbsp;<a href="/random">  Random </a><br/>
    <br/>
    <h5>Theme</h5>
    Themed by <a href="http;//14thave.tumblr.com/">Monique Tendencia</a>. Powered by <a href="http://www.tumblr.com/">Tumblr</a>.
    </div>
    
    <div class="headerwrapper">
      <div class="header">
        <h1><a href="/">{Title}</a></h1>
      </div>
    </div>
    
    
    <div class="content">
    <div id="posts">
                {block:Posts}
    
    <div class="entryheader">
    
    {block:Date}{Month} {DayOfMonthWithZero}, {Year} | {12HourWithZero}:{Minutes} {CapitalAmPm}{/block:Date} |
     {block:NoteCount}
      <a href="{Permalink}">{NoteCountWithLabel}</a>
     {/block:NoteCount}
    
    
    </div>
    
                    {block:Text}
                        <div class="post text"><div class="entry">
                            {block:Title}
                                <h3><a href="{Permalink}">{Title}</a></h3>
                            {/block:Title}
    
                            {Body}
                        </div></div>
                    {/block:Text}
    
                    {block:Photo}
                        <div class="post photo"><div class="entry">
                            {LinkOpenTag}<center><img src="{PhotoURL-400}" alt="{PhotoAlt}" border="0"/></center>{LinkCloseTag}
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div></div>
                    {/block:Photo}
                    
                    {block:Photoset}
                        <div class="post photoset"><div class="entry">
                            {Photoset-500}
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div></div>
                    {/block:Photoset}
    
                    {block:Quote}
                        <div class="post quote"><div class="entry">
                            <div clas="quote">"{Quote}"</div>
    
                            {block:Source}
                                <div class="source"><br/>{Source}</div>
                            {/block:Source}
                        </div></div>
                    {/block:Quote}
    
                    {block:Link}
                        <div class="post link"><div class="entry">
                            <a href="{URL}" {Target}><span class="link">{Name}</span></a>
    
                            {block:Description}
                                <div class="description">{Description}</div>
                            {/block:Description}
                        </div></div>
                    {/block:Link}
    
                    {block:Chat}
                        <div class="post chat"><div class="entry">
                            {block:Title}
                                <h3><a href="{Permalink}">{Title}</a></h3>
                            {/block:Title}
    
                            <ul class="chat">
                                {block:Lines}
                                    <li class="{Alt} user_{UserNumber}">
                                        {block:Label}
                                            <span class="label">{Label}</span>
                                        {/block:Label}
    
                                        {Line}
                                    </li>
                                {/block:Lines}
                            </ul>
                        </div></div>
                    {/block:Chat}
    
                    {block:Video}
                        <div class="post video"><div class="entry">
                            <center>{Video-400}</center>
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div></div>
                    {/block:Video}
    
                    {block:Audio}
                        <div class="post audio"><div class="entry">
                            <center>{AudioPlayerGrey}</center>
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div></div>
                    {/block:Audio}
    
                {/block:Posts}
            </div>
    <center>
    
    
    {block:Pagination}
     {block:PreviousPage}
      <a href="{PreviousPage}">&laquo; New</a>
     {/block:PreviousPage}
    <big>{CurrentPage} of {TotalPages}</big>
     {block:NextPage}
      <a href="{NextPage}">Old &raquo;</a>
     {/block:NextPage}
    {/block:Pagination}
    </center>
    </div>
    
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Nov 2010
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Im not expert myself and this will probably be corrected by the next person but I think it has to be changed to something like the below:

    Its just changing the headerwrapper, left column, right column and middle column from percentages (of the screen) to actual positions (pixels on the screen).

    Obviously you would have to change the pixel information (I have just put 150px left and 150px right so it wont look right but give that a try and change the values.

    Code:
     .headerwrapper {
      position: absolute;
      top: 10px;
      left: 151px;
      right: 151px;
      text-align: center;
      text-wrap: normal;
      word-wrap: break-word;
     }
    
     .leftsidebar {
      position: absolute;
      top: 250px;
      left: 150px;
      width: 100px;
      text-align: right;
      color: #999;
     }
    
     .rightsidebar {
      position: absolute;
      top: 250px;
      right: 150px;
      width: 100px;
      text-align: left;
      color: #999;
     }
    
     .content {
      position: absolute;
      top: 250px;
      left: 151px;
      right: 151px;
      width:auto;	
      padding-bottom: 25px;
     }

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply. I just applied it so you can see what it looks like. I'll leave it up until I get another suggestion. (Or until I figure it out on my own.)

    Obviously, I need margins between the columns. But more troublesome is the fact that only the left column seems to be fixed. Everything else is still fluid. Hmm.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Have you read anything about using floats instead of position? You should do some reading here and here.

  • #5
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That first link doesn't seem to go to an article. The second link works, but I don't think I want things to float. I'm trying to make the fluid layout into a fixed layout so stuff doesn't move around.

    Maybe I'm misunderstanding what "float" means, but it seems like that's what I have now that I'm trying to get rid of.

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Location
    charlotte, nc
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post
    I haven't read through all your css but basically right now you have a liquid design because your .content width is set to auto. This means that no matter how wide you make the screen it will expand. To make life easier pick a width...I generally go with 980px. Now you know the width...then decide how many pixels you want your .leftsidebar and .rightsidebar to be. Add the totals together and take that from 980px and this will be your .content width. That should give you a good start...but yea your auto width is killing you and doing absolute positioning can play havoc as well.

    Good luck.

    A

  • #7
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, that helps. I feel like I'm so close... The left sidebar and center column are fixed, but the header and right column are still fluid. I'll have to tinker with that absolute positioning you mentioned...

    Incidentally, I'm surprised this isn't easier. It seems like such a simple layout.

    Here's the code after setting the widths:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <head>
            <link rel="shortcut icon" href="{Favicon}">
            <link rel="alternate" type="application/rss+xml" href="{RSS}">
            {block:Description}
                <meta name="description" content="{MetaDescription}" />
            {/block:Description}
    
            <meta name="color:Primary" content="#3EBAC2"/>
            <meta name="color:Secondary" content="#F0586A"/>
            <meta name="image:Background" content=""/>
    
    <style type="text/css">
    
     body {
      background-color: white;
      background-image: url({image:Background});
      background-attachment: fixed;
      font-family: Georgia;
      font-size: 13px;
      line-height: 20px;
      color: #333;
      text-wrap: normal;
      word-wrap: break-word;
     }
    
     a {
     color: {color:Primary};
     text-decoration: none;
     font-weight: normal;
     }
    
     a:hover {
     color: {color:Secondary};
     }
    
     blockquote {
     background-color: none;
     font-style: italic;
     font-size: 11px;  
     border-left: 2px solid #999999;
     border-right: none;
     border-top: none;
     border-bottom: none;
     margin: 0px;
     padding-left: 4px;
     padding-bottom: 0px;
     padding-right: 0px;
     padding-top: 0px;
     line-height: 9px;
     width: 864px;
    
     }
    
    .headerwrapper {
      position: absolute;
      top: 10px;
      left: 151px;
      right: 151px;
      text-align: center;
      text-wrap: normal;
      word-wrap: break-word;
     }
     .header h1 {
      font-size: 125px;
      color: {color:Secondary};
      font-weight: normal;
      line-height: 50px;
      font-family: Garamond;
     }
    
    .leftsidebar {
      position: absolute;
      top: 250px;
      left: 20px;
      width: 200px;
      text-align: right;
      color: #999;
     }
     .rightsidebar {
      position: absolute;
      top: 250px;
      right: 20px;
      width: 200px;
      text-align: left;
      color: #999;
     }
    
     .content {
      position: absolute;
      top: 250px;
      left: 240px;
      right: 240px;
      width:540px;	
      padding-bottom: 25px;
     }
    
     .entry {
      border: 1px solid #CCC;
      padding: 10px;
      margin-bottom: 25px;
     }
    
     .entryheader {
      background-color: #CCC;
      margin: 0px;
      padding: 2px;
      color: white;
      text-align: center;
      font-family: Georgia;
      letter-spacing: 2px;
      font-size: 16px;
      font-variant: small-caps;
     }
    
    
     h3 {
      font-size: 24px;
      text-align: center;
      font-family: Garamond;
     }
    
     h4 {
      border-bottom: 1px solid #CCC;
      font-variant: small-caps;
      padding-right: 15px;
      padding-top: 0px;
      padding-bottom: 1px;
      margin-top: 0px;
      margin-bottom: 5px;
      text-align: right;
      font-size: 15px;
      font-family: Georgia;
      font-weight: normal;
      letter-spacing: 1px;
      color: #666;
     }
    
     h5 {
      border-bottom: 1px solid #CCC;
      font-variant: small-caps;
      padding-left: 15px;
      padding-top: 0px;
      padding-bottom: 1px;
      margin-top: 0px;
      margin-bottom: 5px;
      text-align: left;
      font-size: 15px;
      font-family: Georgia;
      font-weight: normal;
      letter-spacing: 1px;
      color: #666;
     }
    
     .quote {
      font-size: 24px;
      text-align: center;
      font-family: Garamond;
      color: {color:Secondary};
      font-weight: normal;
     }
    
     .link {
      font-size: 24px;
      text-align: center;
      font-family: Garamond;
      font-weight: normal;
     }
    
     .source {
      font-size: 14px;
      letter-spacing; 2px;
      color: #999;
     }
    
     .description { 
      font-size: 13px;
      font-family: Georgia;
      text-align: left;
     }
    
     ul li {
      list-style-type: none;
     }
    
     ul li.odd {
      color: {color:Text Hover};
     }
    
     ul li.even {
      color: {color:Colored Text};
     }
    
     .label {
      font-weight: bold;
     }
    
     .submit {
      background-color: white;
      color: #999; 
      border: 0px;
     }
    
     .input {
      background-color: white;
      color: #999;
      font-family: monospace;
      border: 1px solid #999;
     }
    
     .notes {
      font-size: 12px;
      font-weight: normal;
      text-align: right;
     }
    
    {CustomCSS}
    </style>
    
    <title>{Title}</title>
    </head>
    <body>
    
    
    <div class="leftsidebar">
    
    <!-- Use H4 headers for this side -->
    <!-- And add two break tags after each subcontent -->
    
    <img src="{PortraitURL-128}"><br/><br/>
    <h4>About</h4>
    
    {Description}
    
    <br/><br/>
    
    <h4>Search</h4>
    <form action="/search" method="get">
        <input type="text" name="q" value="{SearchQuery}" class="input"/>
        <input type="submit" value="Go" class="submit"/>
    </form>
    
    </div>
    
    <div class="rightsidebar">
    
    <!-- Use H5 headers for this side -->
    <!-- And add two break tags after each subcontent -->
    
    <h5>Navigation</h5>
    
    +&nbsp;&nbsp;<a href="{RSS}">  Subscribe </a><br/>
    +&nbsp;&nbsp;<a href="/archive">  Archive </a><br/>
    +&nbsp;&nbsp;<a href="/random">  Random </a><br/>
    <br/>
    <h5>Theme</h5>
    Themed by <a href="http;//14thave.tumblr.com/">Monique Tendencia</a>. Powered by <a href="http://www.tumblr.com/">Tumblr</a>.
    </div>
    
    <div class="headerwrapper">
      <div class="header">
        <h1><a href="/">{Title}</a></h1>
      </div>
    </div>
    
    
    <div class="content">
    <div id="posts">
                {block:Posts}
    
    <div class="entryheader">
    
    {block:Date}{Month} {DayOfMonthWithZero}, {Year} | {12HourWithZero}:{Minutes} {CapitalAmPm}{/block:Date} |
     {block:NoteCount}
      <a href="{Permalink}">{NoteCountWithLabel}</a>
     {/block:NoteCount}
    
    
    </div>
    
                    {block:Text}
                        <div class="post text"><div class="entry">
                            {block:Title}
                                <h3><a href="{Permalink}">{Title}</a></h3>
                            {/block:Title}
    
                            {Body}
                        </div></div>
                    {/block:Text}
    
                    {block:Photo}
                        <div class="post photo"><div class="entry">
                            {LinkOpenTag}<center><img src="{PhotoURL-400}" alt="{PhotoAlt}" border="0"/></center>{LinkCloseTag}
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div></div>
                    {/block:Photo}
                    
                    {block:Photoset}
                        <div class="post photoset"><div class="entry">
                            {Photoset-500}
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div></div>
                    {/block:Photoset}
    
                    {block:Quote}
                        <div class="post quote"><div class="entry">
                            <div clas="quote">"{Quote}"</div>
    
                            {block:Source}
                                <div class="source"><br/>{Source}</div>
                            {/block:Source}
                        </div></div>
                    {/block:Quote}
    
                    {block:Link}
                        <div class="post link"><div class="entry">
                            <a href="{URL}" {Target}><span class="link">{Name}</span></a>
    
                            {block:Description}
                                <div class="description">{Description}</div>
                            {/block:Description}
                        </div></div>
                    {/block:Link}
    
                    {block:Chat}
                        <div class="post chat"><div class="entry">
                            {block:Title}
                                <h3><a href="{Permalink}">{Title}</a></h3>
                            {/block:Title}
    
                            <ul class="chat">
                                {block:Lines}
                                    <li class="{Alt} user_{UserNumber}">
                                        {block:Label}
                                            <span class="label">{Label}</span>
                                        {/block:Label}
    
                                        {Line}
                                    </li>
                                {/block:Lines}
                            </ul>
                        </div></div>
                    {/block:Chat}
    
                    {block:Video}
                        <div class="post video"><div class="entry">
                            <center>{Video-400}</center>
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div></div>
                    {/block:Video}
    
                    {block:Audio}
                        <div class="post audio"><div class="entry">
                            <center>{AudioPlayerGrey}</center>
    
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div></div>
                    {/block:Audio}
    
                {/block:Posts}
            </div>
    <center>
    
    
    {block:Pagination}
     {block:PreviousPage}
      <a href="{PreviousPage}">&laquo; New</a>
     {/block:PreviousPage}
    <big>{CurrentPage} of {TotalPages}</big>
     {block:NextPage}
      <a href="{NextPage}">Old &raquo;</a>
     {/block:NextPage}
    {/block:Pagination}
    </center>
    </div>
    
    </body>
    </html>

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    All your absolute positions are going to give you trouble Im afraid. I provided the w3schools.com link because there are good tutorials on floats and divs there.

    And yes your are misunderstanding what floats are. Why not google CSS floats. The second link explains in detail what floats are and how they are used. I think if you had read it through, you would know what they're for.

  • #9
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did read it. It was a little over my head, I'm afraid. Did I mention I don't know anything?

  • #10
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    Did I mention I don't know anything?
    That is why you should read it again. You can always google any unfamiliar terms. You are looking for an easy solution when the real answer is to learn to do it properly. It is very rare that anything that is easy is worth doing.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #11
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm reading this article right now. Seems like it's a little plainer for a non-coder like me. We'll see!

    http://www.communitymx.com/content/a...ge=1&cid=F41AE

  • #12
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Think about your absolute positions as you have them now. Think about what that code is telling your elements.

    position "this" element...absolutely where I tell it too.... 150px from the top ot 200px from the left or whatever it might be.

    Now, floats work similar, but its saying..."float" this element to the left or right to allow for other elements to move up beside me. Then you can add margins and paddings to position the floated element in more precise ways. Make any more sense?
    Last edited by teedoff; 11-10-2010 at 07:34 PM.

  • #13
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It does, thanks. I guess I just don't understand why the left column and center column act the way I want them to with absolute positioning and the right column and the header do not.

  • #14
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Donkey View Post
    That is why you should read it again. You can always google any unfamiliar terms. You are looking for an easy solution when the real answer is to learn to do it properly. It is very rare that anything that is easy is worth doing.
    This is very true. And I am reading more. But you see, I have a full-time job, and it is not coding. What I'm wanting to do is be able to just affect this Tumblr format, which you will agree is a trivial matter. And now that it has proven to be more difficult than first anticipated, I am moving on principle that I. Can. Do. This. One. Little. Thing. i.e., change the layout from fluid to fixed. But it doesn't mean that I would like to spend hours and hours learning how to program a full-on website for myself.

    Truly, at the beginning of this journey, I hoped the answer would be, "Oh, you just need to remove that semicolon." OK, maybe not THAT easy. But something like, "You need to replace the word 'absolute' with 'relative' and you'll be all set."

    Alas...


  •  

    Posting Permissions

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