Need help changing fluid layout to fixed layout

emroki

11-09-2010, 07:36 PM

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:

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




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




<h5>Navigation</h5>

+  <a href="{RSS}"> Subscribe </a><br/>
+  <a href="/archive"> Archive </a><br/>
+  <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}">« New</a>
{/block:PreviousPage}
<big>{CurrentPage} of {TotalPages}</big>
{block:NextPage}
<a href="{NextPage}">Old »</a>
{/block:NextPage}
{/block:Pagination}
</center>
</div>

</body>
</html>

davm22

11-09-2010, 08:05 PM

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.

.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;
}

emroki

11-09-2010, 08:34 PM

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.

teedoff

11-09-2010, 10:33 PM

Have you read anything about using floats instead of position? You should do some reading here (http://www.w3schools.com) and here (http://css.maxdesign.com.au/floatutorial/).

emroki

11-09-2010, 11:31 PM

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.

aaronE

11-10-2010, 12:04 AM

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

emroki

11-10-2010, 12:27 AM

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




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




<h5>Navigation</h5>

+  <a href="{RSS}"> Subscribe </a><br/>
+  <a href="/archive"> Archive </a><br/>
+  <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}">« New</a>
{/block:PreviousPage}
<big>{CurrentPage} of {TotalPages}</big>
{block:NextPage}
<a href="{NextPage}">Old »</a>
{/block:NextPage}
{/block:Pagination}
</center>
</div>

</body>
</html>

teedoff

11-10-2010, 12:46 AM

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.

emroki

11-10-2010, 06:02 PM

I did read it. It was a little over my head, I'm afraid. Did I mention I don't know anything?

Donkey

11-10-2010, 06:15 PM

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.

emroki

11-10-2010, 06:22 PM

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/article.cfm?page=1&cid=F41AE

teedoff

11-10-2010, 06:25 PM

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?

emroki

11-10-2010, 08:30 PM

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.

emroki

11-10-2010, 08:54 PM

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...