PDA

View Full Version : How do I change a fixed layout to a fluid layout?



pelinor
Sep 1st, 2007, 07:15 PM
Hello,

I am looking at a fixed width layout http://com2.runboard.com/bthebox and would like to change it to a fluid width layout.

My current CSS looks like this:

/* DEFINES BODY COLOR BACKGROUND IMAGE FONT AND POSITION */
body {
background-color : #0d0d0d;
margin:1em;
font-family : verdana, tahoma;
}

/* DEFINES TOP MIDDLE AND BOTTOM */
.bghead {
background-image : url(http://rbbt.net/skins/joshin_josh/box/top.gif);
background-repeat : no-repeat;
background-position : center 0%;
background-color : #262626;
width : 772px;
height : 31px;
margin:0 auto;
}
.bgmid {
background-image : url(http://rbbt.net/skins/joshin_josh/box/mid.gif);
background-repeat : repeat-y;
background-position : center 0%;
background-color : #262626;
width : 772px;
margin:0 auto;
}
.bgfoot {
background-image : url(http://rbbt.net/skins/joshin_josh/box/bot.gif);
background-repeat : no-repeat;
background-position : center 0%;
background-color : #262626;
width : 772px;
height : 32px;
margin:0 auto;
}

/* PREVENTS BORDERS ON IMAGE LINKS */
img {
border : 0;
}

/* DEFINES BANNER AREA COLOR AND SIZES */
.banbox {
background-color : #0d0d0d;
border : 1px solid #767676;
width : 95%;
height:100px;
font-size : 11px;
color : #767676;
margin:0 auto;
text-align:center;
}

/* DEFINES BACK TO TOP LINK FONT SIZE */
.backtotop {
font-size : 11px;
text-align : center;
}

/* DEFINES SPACES IN BETWEEN POSTS */
.ak_msg_postlist_betweenposts_table, .ak_msg_postlist_betweenposts_table_td {
height : 5px;
display : block;
}

/* DEFINES BOXED CURRENT PAGE NUMBER */
span.pageindexvaluenow {
font-size : 13px;
font-weight : bold;
background-color : #0d0d0d;
border:1px solid #767676;
}

/* DEFINES NEW TOPIC AND POST BUTTONS */
.topiclistpostnewtopic a, .postlistaddareply a {
color : #cccccc;
background-position : center 0%;
padding-top : 5px;
padding-bottom : 5px;
padding-left : 15px;
padding-right : 15px;
font-size : 11px;
background-color : #0d0d0d;
border:1px solid #767676;
}

/* DEFINES WIDTH AND COLOR OF TABLES */
.ak_msg_master_table {
border : 0;
width : 97%;
font-size : 11px;
}
.forum_list_table, .topic_list_table, .ak_msg_seememberlist_table {
width : 100%;
border:0;
background-color : #767676;
}
.ak_msg_post_master_table {
border:1px solid #767676;
}

/* DEFINES SEPARATOR COLORS */
.ak_msgform_poll_options_head_td, .ak_msg_seememberlist_head_user_td, .ak_msg_seememberlist_head_date_td, .ak_msg_seememberlist_head_im_td, .ak_msg_seememberlist_head_pm_td, .ak_msg_seememberlist_head_email_td, .ak_poll_table_header, .forum_list_header_newtext_td, .forum_list_header_forum_td, .forum_list_header_topics_td, .forum_list_header_posts_td, .forum_list_header_lastpost_td, .forumlist_separator_td, .topic_list_header_modbox_td, .topic_list_header_newtext_td, .topic_list_header_posticon_td, .topic_list_header_topic_td, .topic_list_header_startedby_td, .topic_list_header_replies_td, .topic_list_header_views_td, .topic_list_header_lastpost_td {
font-size : 11px;
height : 23px;
background-image : url(http://rbbt.net/skins/joshin_josh/box/sep.gif);
padding-top : 0;
padding-bottom : 0;
}

/* DEFINES WIDTH AND COLORS OF WHOS ONLINE AND MISCOPTBAR TABLES */
.forumlistwhosonlinetable, .ak_miscoptbar_table {
width : 100%;
border:1px solid #767676;
background-color : #0d0d0d;
font-size : 11px;
color : #767676;
}
.forumlistwhosonlinetd {
padding : 6px;
}

/* DEFINES BOARDSTATS TABLE COLORS AND SIZES */
.forumlistboardstatsheader {
background-color : #0d0d0d;
background-image : url(http://rbbt.net/skins/joshin_josh/box/sep.gif);
background-repeat : repeat-x;
border:1px solid #767676;
font-size : 12px;
height:23px;
color : #000000;
}
.forumlistboardstatstable {
background-color : #0d0d0d;
border : 1px solid #767676;
}
.forumlistboardstatstitle {
width : 25%;
text-align : center;
font-size : 11px;
color : #767676;
}
.forumlistboardstatsdata {
width : 25%;
background-color : #0d0d0d;
text-align : center;
border-left : 1px solid #767676;
border-right : 1px solid #878787;
font-size : 11px;
color : #767676;
}
.forumlistboardstatstable {
width : 100%;
border : 1px solid #767676;
}


/* DEFINES FONT SIZE AND COLORS FOR TOPIC FORUM AND POST LISTS */
span.locationboard, span.locationforum, span.locationtopic {
font-size : 11px;
}
.forumlistforumname, .topiclisttopicname {
color : #8db6cd;
font-size : 11px;
}
span.forumlistnumtopics, span.forumlistnumposts {
font-size : 11px;
}
span.topiclistnewswitch, span.forumlistnewswitch {
color : #767676;
font-size : 11px;
}
span.forumlistheader, span.topiclistheader, span.forumlistseparator, span.topiclisttopicname, span.topicliststartedby, span.topiclistreplies, span.topiclistviews {
font-size : 11px;
}
span.topiclistlastpost {
font-size : 11px;
}
span.topiclisttopicclosed, span.topiclisttopicsticky, span.topiclisttopichidden {
font-size : 11px;
color : #8db6cd;
}
.ak_msg_post_master_table {
font-size : 11px;
}
span.postlistusername a, span.postlistpostname {
color : #767676;
font-size : 11px;
}
.ak_msg_post_table {
padding-left : 3px;
}
span.postlistusertitle font {
color : #8db6cd;
}
blockquote {
border : 1px solid #767676;
background-color : #262626;
}
blockquote hr {
display : none;
}
hr {
height : 0;
width : 100%;
border : 0;
border-bottom : 1px solid #767676;
}
.postlistpostbody pre {
font-size : 11px;
overflow : scroll;
width : 500px;
border : 1px solid #767676;
}
.ak_msg_post_master_table td {
border:1px solid #767676;}

/* DEFINES COLORS AND IMAGES IN MESSAGE AREA */
.ak_msgform_master_table {
background-color : #0d0d0d;
border : 1px solid #767676;
font-size : 11px;
}
.ak_msgform_master_table td {
border : 1px solid #767676;
}
.ak_msgform_master_table input {
border : 1px solid #767676;
}
.ak_msgform_newtopic_submit_button, .ak_msgform_newtopic_preview_button, .ak_msgform_postreply_submit_button, .ak_msgform_postreply_preview_button, .ak_msgform_editpost_submit_button, .ak_msgform_editpost_preview_button {
border : 1px solid #767676;
height : 23px;
background-image : url(http://rbbt.net/skins/joshin_josh/box/sep.gif);
background-repeat : repeat-x;
color : #000000;
font-size : 11px;
}
.qcode_bar_but {
font-size : 11px;
color : #000000;
background-color : #0d0d0d;
background-image : url(http://rbbt.net/skins/joshin_josh/box/sep.gif);
background-repeat : repeat-x;
border : 1px solid #767676;
margin-top : 1px;
padding-left : 2px;
padding-right : 2px;
height : 23px;
}
.ak_msgform_subject_right_td input, .ak_msgform_message_right_td textarea {
background-color : #262626;
border:1px solid #767676;
color : #ffffff;
width : 340px;
font-size : 11px;
}
.ak_msgform_poll_options_table {
border: 0;
}
.ak_msgform_poll_options_right_td input {
background-color : #262626;
padding-top : 2px;
padding-bottom : 2px;
margin : 2px;
font-size : 11px;
color : #ffffff;
}
.ak_msgform_poll_options_table td {
border : 0;
}

/* DEFINES POLL TABLE COLORS */
.ak_poll_table {
font-size : 11px;
text-align : center;
border:1px solid #767676;
background-color : #0d0d0d;
margin-bottom : 15px;
}
.ak_poll_table_header {
height : 19px;
padding : 0 25px;
font-size : 11px;
color:#000000;
}
.ak_poll_table_header br {
display : none;
}
.ak_poll_table_header a {
padding-left : 10px;
}
.ak_poll_table_button_cell input {
border:1px solid #767676;
height : 23px;
background-color : #0d0d0d;
background-image : url(http://rbbt.net/skins/joshin_josh/box/sep.gif);
background-repeat : repeat-x;
color : #000000;
font-size : 11px;
}
.ak_poll_table td {
border : 0;
}
.ak_poll_table_option_rcell1 input, .ak_poll_table_option_rcell2 input {
border : 0;
}
.ak_poll_table_viewres_cell {
font-weight : bold;
font-size : 11px;
color : #000000;
}
.ak_poll_table_option_gback1 {
background-color : #8db6cd;
}
.ak_poll_table_option_gback2 {
background-color : #8db6cd;
}

/* DEFINES MEMBER LIST COLORS AND SIZE */
.ak_msg_seememberlist_table td {
border:1px solid #0d0d0d;
}
.ak_msg_seememberlist_table {
width : 100%;
border:1px solid #767676;
background-color : #0d0d0d;
font-size : 11px;
}
.ak_msg_seememberlist_head_user_td, .ak_msg_seememberlist_head_date_td, .ak_msg_seememberlist_head_im_td, .ak_msg_seememberlist_head_pm_td, .ak_msg_seememberlist_head_email_td {
color : #000000;
font-size : 11px;
padding : 3px;
text-align : center;
}

/* DEFINES POST ICONS AND SMILEY COLORS */
.ak_subject_posticon_table {
border : 1px solid #767676;
margin-bottom : 4px;
padding : 0;
color : #000000;
text-align : center;
background-color : #262626;
}
.ak_subject_posticon_table td {
border : 0;
}
.ak_clickposticon_table, .ak_clickposticon_td, .ak_subject_posticon_icons_td, .ak_subject_posticon_icons_td td {
border : 0;
}
.ak_subject_posticon_head_td {
font-size : 11px;
height : 23px;
background-color : #262626;
background-image : url(http://rbbt.net/skins/joshin_josh/box/sep.gif);
background-repeat : repeat-x;
padding-top : 0;
padding-bottom : 0;
color : #000000;
text-align : center;
}
.msgform_clickable_smiley_box_h {
font-size : 11px;
padding : 0;
padding-top : 1px;
color : #000000;
text-align : center;
background-color : #262626;
background-image : url(http://rbbt.net/skins/joshin_josh/box/sep.gif);
background-repeat : repeat-x;
border : 1px solid #767676;
white-space: nowrap;
}
.msgform_clickable_smiley_box_b {
border: 0;
padding-top : 6px;
padding-left : 8px;
}
.msgform_clickable_smiley_box_b td {
border: 0;
}

My current HTML looks like this:
header

<div class="bghead"></div>
<div class="bgmid">
<div class="banbox">
<h2>Board Name or logo here</h2></div>

footer

<div class="backtotop"><a href="#">↑<br /> Back To Top</a></div>
</div>
<div class="bgfoot"></div>

I tried doing a span with three graphics for the top, middle and bottom but the middle graphic elements don't work correctly. When I asked about this before:

"Hmmm... still not working, the middle graphics are not doing the repeat-y. I am thinking I'll have to enclose the board itself in a .contents style div class (Haven't done one of those before) because the mid graphics stop where the master table begins (at least it appears that way)... thoughts, comments, help???"

I got this response:

"Lesigner Girl

Your backgrounds are filling the entire height of your spans. If you crop that image to 1px height on an image editor, you'll see that it will repeat 31 times, filling the vertical space you've allowed for it.

You don't need to change any class names, but if you're saying what I think you're saying, then yes, you will need to use that way of coding it.

Use divs instead of spans, don't define height, don't float anything, do use background-position, and do nest your divs within each other, closing them off in the HTML footer. It also helps if you define different colored borders for your divs temporarily, so you can see where they are and what they surround."

Now I am sure what she said is true but I don't know how to do this. Can anyone here help?

twodayslate
Sep 1st, 2007, 08:13 PM
Please use the
tags.

To make a layout fluid you will need to use % for the width.