Webmaster is gone! Now I have to pick up reins.

Hello,

So I'm a photographer and I have a very simple, but in my opinion visually stimulating website set up, RB Photography (http://fracturedminds.net). Until recently I had a webmaster handle the creation/updating of the site but she's off to gradschool now and I have to manage things on my own.

I understand the basics, but the issue i have with the page is that if a screen resolution is too low it clips and becomes sloppy. Presentation is 75% of my business.

So... is it possible to create a fully 100% liquid site, both containers and content, based on the below CSS file, without changing how it looks? I love the way it looks.

Thanks in advance for all assistance.

CSS:

body {
margin: 0px;
padding: 0px 0px 30px 0px;
background: #928367 url(../img/backNavbar.gif) repeat-x 0 top;
font-family: Helvetica, Arial, Tahoma, Verdana, Sans-serif;
font-size: 11px;
}

body#home {
text-align: center;
background: #928367 url(../img/back_Home.gif) repeat-x fixed 0 0;
padding: 20px 0px 0px 0px;
}

body#home div#content {
width: 970px;
margin: 0px auto;
text-align: left;
padding: 0px;
}

body#home div#headerHome {
width: 970px;
position: absolute;
margin: 570px 0px 0px 0px;
background: #000000 url(../img/backNavbar.gif) repeat-x;
}

body#home .menu {
margin: 0px 10px 0px 0px;
top: 0px;
display: block;
}

body#home .portfolio {
margin: 0px;
padding: 0px;
}

body#home .portfolio img {
border: 0px;
padding: 0px;
margin: 0px;
}

.tooltipHome-tip {
background: url(../img/baloonHome.png) no-repeat;
padding: 10px 10px 0px 12px;
color: #ffffff;
width: 200px;
height: 142px;
text-align: left;
z-index: 13000;
}
.tooltipHome-tip img {
margin: 0px 0px 4px 0px;
}
.tooltipHome-title {
font-weight: bold;
font-size: 12px;
}

.tooltipHome-text {
font-size: 11px;
color: #a4a4a4;
}
div#header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 51px;
background: #000000 url(../img/backNavbar.gif) repeat-x;
padding: 0px 0px 0px 10px;
margin: 0px;
}

div#logo {
width: 337px;
position: absolute;
margin: 0px;
padding: 0px;
left: 10px;
}

div#bottom {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 30px;
background: #6c6c6c url(../img/backBottom.gif) repeat-x;
padding: 7px 0px 0px 30px;
margin: 0px;
color: #ffffff;
border-top: 1px solid #393939;
}

div#content {
width: 100%;
padding: 0px;
margin: 0px;
}
body#contact div#content {

padding: 0px;
margin: 0px;
}
@media screen {

body > div#header {
position: fixed;
}

body > div#bottom {
position: fixed;
}

}

div#logo img {
border: 0px;
}

div#scroll {
width: 200px;
}

.menu {
position: absolute;
width: auto;
right: 0px;
margin: 0px 20px 0px 0px;
}

.menu ul {
font-weight: lighter;
font-size: 11px;
list-style: none;
margin: 0px 0px 0px 2px;
padding: 0px;
}

.menu ul li {
float: left;
height: 33px;
padding: 18px 7px 1px 8px;
font-size: 11px;

text-align: center;
}

.menu ul li a {
display: block;
padding: 0px 17px 0px 8px;
margin: 0px;
color: #ffffff;
background: url(blank.gif) repeat;
}

.menu ul li a:hover {
display: block;
color: #839fe3;
padding: 0px 7px 0px 8px;
margin: 0px;
text-decoration: none;
background: #2d2d2d;

}

body#commercial .menu ul li.linked {
display: block;
background: #48494a url(../img/linkedComm.gif) no-repeat;
padding: 18px 15px 0px 15px;
margin: 0px;
color: #272727;
}

body#travel .menu ul li.linked {
display: block;
background: #48494a url(../img/linkedTravel.gif) no-repeat;
padding: 18px 15px 0px 15px;
margin: 0px;
color: #272727;
}

body#personal .menu ul li.linked {
display: block;
background: #48494a url(../img/linkedPerson.gif) no-repeat;
padding: 18px 15px 0px 15px;
margin: 0px;
color: #272727;
}

body#aboutMe .menu ul li.linked {
display: block;
background: #48494a url(../img/linkedAbout.gif) no-repeat;
padding: 18px 15px 0px 15px;
margin: 0px;
color: #272727;
}

body#contact .menu ul li.linked {
display: block;
background: #48494a url(../img/linkedContact.gif) no-repeat;
padding: 18px 15px 0px 15px;
margin: 0px;
color: #272727;
}

.contact {
bottom: 20px;
position: absolute;
padding: 0px 0px 0px 17px;
}

.contact a:hover {
text-decoration: underline;
}

.portfolio {
padding: 65px 10px 0px 0px;
}

.portfolio table {
padding: 0px;
margin: 0px 0px 0px 0px;
border: 0px;
}

.portfolio td.back {
background: none;
vertical-align: top;
padding: 0px;
}

.portfolio img {
margin: 0px 10px 0px 30px;
padding: 5px;
background: #fff;
border: 1px solid #353535;
}

.left {
float: left;
display: block;
margin: 0px 10px 10px 0px;
}

/* My Comment */

/************** GENERAL CONTENT ****************/
a img , a:visited img {
border: 0px;
}
a {
color: #546ee5;
text-decoration: none;
}
img a:hover {
background: none;
}
a:hover {
color: #85c7e4;
text-decoration: underline;
}
p a:hover {
background: #2d2d2d;
}
.credits {
color: #f2f2f2;
font-size: 10px;
}

.credits a:hover {
text-decoration: underline;
}

div.about {
width: 750px;
margin: 65px 750px 0px 0px;
height: 498px !important; height /**/: 500px;
border: 1px solid #666666;
background: #434344 url(../img/backDirect.gif) repeat-x 0 bottom;
}
.about img {
padding: 0px 0px 19px 0px;
border-right: 0px solid #4a4a4a;
background: #928367;
margin: 0px 10px 0px 0px;
}
div.mention {
width: 380px;
height: 498px !important; height /**/: 500px;
margin: -500px 0px 0px 750px;
background: #353636 url(../img/backBlog.gif) repeat-x 0 bottom;
padding: 0px;
border: 1px solid #666666;
}
h1 {
font-size: 14px;
font-weight: normal;
color: #cbcbcb;
padding: 20px 10px 0px 10px;
margin: 0px;
letter-spacing: 1px;
}
h2 {
font-size: 13px;
font-weight: normal;
color: #cbcbcb;
padding: 20px 10px 0px 10px;
margin: 0px;
letter-spacing: 1px;
}
p {
color: #b8b8b8;
padding: 0px 10px;
font-size: 12px;
line-height: 1.5em;
margin: 0px;
}

p.content {
color: #b8b8b8;
font-size: 1.1em;
line-height: 1.3em;
padding: 4px 4px 4px 10px;
font-weight: normal;
}

p.intro {
color: #b8b8b8;
width: 250px;
font-size: 1.1em;
line-height: 1.5em;
padding: 0px 70px 10px 10px;
font-weight: normal;
}

table td {
vertical-align: top;
}

#logo {
border: none;
padding: 0px;
margin: 0px;
}

/************* HIDDEN CONTENTS *****************/

.hidden_contents {
position: absolute;
margin-top: -1000px;
}

/************* SLIDER MOOTOOLS *****************/

#button {
list-style: none;
margin: 3px 0px 0px 0px;
padding: 0px;
color: #ffffff;
height: 15px;
text-align: center;
}

#button li {
float: left;
display: block;
width: 22px;
padding: 0px;
margin: 0px;
background: url(../img/bottoneImg.gif) 1px 1px;
}

#button li a, #button li a:visited {
display: block;
color: #24566e;
padding: 5px 4px 3px 4px;
background: url(../img/bottoneImg.gif) 1px -19px;
}

#button li a:hover {
color: #ffffff;
text-decoration: none;
margin: 0px;
background: url(../img/bottoneImg.gif) 1px 1px;
}

/*************** TOOL TIP MOOTOOLS ******************/

.tool-tip {
background: url(../img/backTooltip.gif) no-repeat 0 0;
padding: 13px;
color: #ffffff;
width: 300px;
height: 50px;
}

.tool-title {
font-weight: bold;
font-size: 12px;
}

.tool-text {
font-size: 11px;
}

.toolNav-tip {
background: url(../img/ballonTooltip.png);
padding: 0px;
color: #ffffff;
width: 100px;
height: 100px;
}

.toolNav-title {
font-weight: bold;
font-size: 11px;
}

.toolNav-text {
font-size: 11px;
}

.FirstFoto {
position: relative;
margin: 200px 0px 0px 0px;
}

.FirstFoto a {
display: block;
width: 70px;
height: 60px;
text-indent: -90000%;
background: url(../img/firstPhoto.gif) no-repeat 0px -60px;
}

.FirstFoto a:hover {
background: url(../img/firstPhoto.gif) no-repeat 0px 1px;
}

/****************** FORMMAIL *******************/
table.contactT {
padding: 0px;
margin: 65px 0px 0px 0px;
border: 0px none;

border-collapse: collapse;
}
table.contactT td {
padding: 0px;
margin: 0px;
height: 50px !important; height /**/: 500px;
border-top: 0px solid #666666;
border-right: 0px solid #666666;
border-bottom: 0px solid #666666;
border-collapse: collapse;
}
div.formMail {
float: left;
width: 350px;

margin: 0px 0px 0px 10px;
}

form#myForm {
width: 320px !important; width /**/: 350px;
height: 275px !important; height /**/: 300px;
margin: 0;
padding: 15px 15px 10px;
}

label {
float: left;
width: 90px;
height: 30px;
font: 12px/30px Arial,sans-serif;
margin-right: 5px;
text-align: right;
color: #8b8b8b;
}

input,textarea {
border: 1px solid #252525;
color: #475078;
font: 12px Arial,sans-serif;
}

div.input-cont {
float: left;
width: 200px;
height: 30px;
margin-bottom: 3px;
}

input {
display: block;
width: 175px;
background: #FFF;
margin: 5px 0 0 10px
}

div.textarea-cont {
float: left;
width: 200px;
height: 170px;
padding: 1px;
}

textarea {
width: 170px;
height: 140px;
margin: 10px;
}

button#go {
float: left;
width: 130px;
text-align: center;
height: 27px !important; height /**/: 32px;
line-height: 25px;
display: inline;
margin-left: 102px;
padding: 1px 0 6px;
background: #D5D8E1 url(../img/submitBk.gif) no-repeat 0 -1px;
color: #000;
cursor: pointer;
border: 0px;
}
#log {
width: 320px;
margin: 10px 0px 0px 10px;
color: #e9ab1b;
}

#log_res {
overflow: auto;
}

#log_res.ajax-loading {
padding: 20px 0;
background: url(../img/spinner.gif) no-repeat center;
}

/*************** PAGINA CONTACT ******************/
div.address {
float: left;
height: 500px;
width: 320px;
margin: 0px;
padding: 0px;
background: #434344 url(../img/backDirect.gif) no-repeat 0 bottom;
border-bottom: 1px solid #343435;
border-left: 1px solid #343435;
border-right: 1px solid #343435;
}
div.myBlog {
float: left;
width: 320px;
height: 500px;
margin: 0px;
background: #353636 url(../img/backBlog.gif) no-repeat 0 bottom;
padding: 0px;
border-bottom: 1px solid #252526;
border-left: 1px solid #252526;
border-right: 1px solid #252526;

}
.voiceCont {
display: block;
width: 95px;
float: left;
background: #606060;
margin: 0px 4px 0px 0px;
padding: 0px 0px 0px 2px;
}

Hello rivenagares,
That is a nice looking site. Cudos to the MUA that did the model in ashes.jpg!

To make a 100% fluid layout you have to take into account how the main elements of the site will look when proportions get skewed. For example, how do you see your 475px wide horizontal menu looking when someone narrows up the browser to 200px?

It's usually easiest to assume most people have a monitor size, or their browser set to a size, that allows them to view the content that's available on the internet. The site you have now, at a fixed width of 970px, is not unusual so most people are going to have a browser that will display that.

I looked at your site on my HTC Desire and it works there just fine.

I'll cast my vote to leave the site as is.

Some fluid layout tutorials/examples:
one (http://www.devwebpro.com/css-fluid-layout-tutorial/)
two (http://www.dynamicdrive.com/style/layouts/category/C13/)
three (http://www.maxdesign.com.au/articles/liquid/)

Ok, I wouldn't leave everything as is. Right now your menu kind of sucks because the clickable area of the links is the text only.

Try a couple simple changes to your CSS and the whole li becomes a clickable button, like this -
.menu ul li {
line-height: 51px;
float: left;
/*
height: 33px;
padding: 18px 7px 1px 8px;
*/
font-size: 11px;
text-align: center;
}

well i was thinking kind of iPhone/Android like.

meaning those devices take a "normal" website and minimize it to be "normal" in their viewing space. now everything, images, links, shrink to be relative to that viewing device.

so i was thinking if i could make everything liquid, then when the screen shrunk, say to a blackberry size, everything would shrink along with it via a scale.

so the larger... the larger (and i guess i'd have a max image size) and well usually the smaller the sharper they look so that wouldn't be a direct concern.


also, thank you on the compliment for the site and the photograph. :-)

i'll try the change you suggested.

I like the site too.

I just viewed it on my android(Droid Incredible) and it looks fine. The images scale down when I go to the commercial and personal pages. The header links are not visible, basically just showing the image gallery, but nothing seems to be distorted or skewed.

The home page image is a little large, but not completely offensive.

If you are determined to revamp your site for cellular devices, you may have to just resize your images and create a separate css to style for the smaller screens.

Personally I dont think its worth the trouble since like I said it looks fine.

well i was thinking kind of iPhone/Android like.

My HTC Desire is an Android.

Ok, I wouldn't leave everything as is. Right now your menu kind of sucks because the clickable area of the links is the text only.

Try a couple simple changes to your CSS and the whole li becomes a clickable button, like this -
.menu ul li {
line-height: 51px;
float: left;
/*
height: 33px;
padding: 18px 7px 1px 8px;
*/
font-size: 11px;
text-align: center;
}


so i made this change with and without the /* and */. would you mind explaining to me why without those symbols the new menu box floats beneath the menu line and why when i type it exactly as you put it, they sat perfectly on the line.

since i have to manage this on my own i'm trying to learn the whys as well as the hows. thanks in advance.

Ok, I wouldn't leave everything as is. Right now your menu kind of sucks because the clickable area of the links is the text only.

Try a couple simple changes to your CSS and the whole li becomes a clickable button, like this -
.menu ul li {
line-height: 51px;
float: left;
/*
height: 33px;
padding: 18px 7px 1px 8px;
*/
font-size: 11px;
text-align: center;
}


actually there was a slight problem with this alteration. while on the main splash page it worked perfectly, on the subsequent pages within, it created a strange effect until the menu item that was currently active.