We help IT Professionals succeed at work.

Converting Mockup to a liquid web page

Hi, so i have created mock ups with photoshop, illustrator and fireworks, they all basically produce the same HTML and CSS after you slice and choose to save/export with images and CSS.

I am just using a template as an example.

This option produces a web page that is not liquid and does not adjust when you make your browser different sizes.

Is there styling that can be added to make the web page remain in the center of the page with different browser sizes?

I have seen a lot of options but have worked with this format.

Thanks!

(this site is just sliced and nothing has been added, obviously there would be areas of text, a navbar and other features normally, but the question would still be the same)
HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="./Untitled-1.css" media="all" />
	<!--[if IE]>
	<style type="text/css" media="all">.borderitem {border-style: solid;}</style>
	<![endif]-->
</head>

<body>

<div id="Div">
</div>
<div id="Div2">
</div>
<div id="Div3">
</div>
<div class="Txt_VA">
	
		<p class="lastNode">VA
	</p>
</div>
<div id="Div4">
</div>
<div id="Div5">
</div>
<div id="Box3SliceContainer">
	<div id="Box3SliceContainer_top_1">
	</div>
<div id="Box3SliceContainer_bottom_1">
</div>
</div>
<div id="Div6">
</div>
<div id="Div7">
</div>
<div id="Div8">
</div>
<div class="Txt_Maecenas">
	
		<p class="lastNode">Maecenas porta tristique
	</p>
</div>
<div class="Txt_Praesent">
	
		<p>Praesent velit augue, posuere a feugiat eget, venenatis vel turpis. Praesent a nulla ligula. Donec egestas scelerisque ipsum, euismod vehicula sapien mollis id. In commodo, mi ut vulputate ultricies, augue nisi porta tellus, et porttitor turpis nisl quis dui. Nunc congue arcu augue, id convallis est. Proin consectetur mollis diam, euismod accumsan elit dapibus at. Nullam non bibendum mi. </p><p>Phasellus sit amet quam nec elit iaculis gravida ut scelerisque tellus. Maecenas porta tristique metus, ut scelerisque mi mollis vel. </p><p class="lastNode">Cras nec laoreet eros. Cras eget leo sed eros congue dapibus sit amet vitae urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id libero massa.
	</p>
</div>
<div id="Div9">
</div>
<div id="Div10">
</div>
<div id="Div11">
</div>
<div class="Txt_Nam">
	
		<p class="lastNode">Nam vehicula ornare euisscelerisque.
	</p>
</div>
<div id="Div12">
</div>
<div id="Div13">
</div>
<div class="Txt_VIEW">
	
		<p class="lastNode">VIEW DETAILS
	</p>
</div>
<img src="Untitled-1_r1_c1.png" id="Untitled-1_r1_c1" alt="" />
<img src="Untitled-1_r1_c4.png" id="Untitled-1_r1_c4" alt="" />
<img src="Untitled-1_r2_c1.png" id="Untitled-1_r2_c1" alt="" />
<img src="Untitled-1_r3_c1.png" id="Untitled-1_r3_c1" alt="" />
<img src="Untitled-1_r3_c3.png" id="Untitled-1_r3_c3" alt="" />
<img src="Untitled-1_r3_c6.png" id="Untitled-1_r3_c6" alt="" />
<img src="Untitled-1_r4_c3.png" id="Untitled-1_r4_c3" alt="" />
<img src="Untitled-1_r6_c3.png" id="Untitled-1_r6_c3" alt="" />
<img src="Untitled-1_r7_c3.png" id="Untitled-1_r7_c3" alt="" />
<img src="Untitled-1_r9_c3.png" id="Untitled-1_r9_c3" alt="" />

</body>
</html>

Open in new window

CSS

@charset "utf-8";

body {
	background-color: #fff;
	font-size: 62.5%;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0;
}
body * {
	font-size: 100%;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
p {
	margin-bottom: 1.1em;
	margin-top: 0;
}
#main p.lastNode {
	margin-bottom: 0;
}
a:link img, a:visited img {
	border: none;
}
div.clearFloat {
	clear: both;
	font-size: 0;
	height: 0;
	line-height: 0px;
}
li.clearFloat {
	clear: both;
}
ul.symbolList {
	display: inline;
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.AbsWrap {
	position: relative;
	width: 100%;
}
.rowWrap {
	width: 100%;
}

#Div {
	left: 159px;
	position: absolute;
	top: -37px;
	margin-bottom: 0;
	background-color: #fff;
	width: 960px;
	padding-top: 0px;
	height: 1253px;

}
html > body #Div {
	height: auto;
	min-height: 1254px;
}
#Div2 {
	left: 0px;
	position: absolute;
	top: 0px;
	margin-bottom: 0;
	background-color: #00b6ee;
	width: 1280px;
	padding-top: 0px;
	height: 305px;

}
html > body #Div2 {
	height: auto;
	min-height: 306px;
}
#Div3 {
	left: 160px;
	position: absolute;
	top: 0px;
	margin-bottom: 0;
	background-color: #fff;
	width: 960px;
	padding-top: 0px;
	height: 1066px;
}
html > body #Div3 {
	height: auto;
	min-height: 1067px;
}
.Txt_VA {
	font-family: 'Arial Bold', Arial, Helvetica, sans-serif;
	font-size: 360%;
	font-weight: bold;
	text-align: center;
	color: #00b6ee;
	line-height: 120%;
	padding-bottom: 2px;
	padding-top: 1px;
	left: 198px;
	position: absolute;
	top: 35px;
	margin-bottom: 0;
}
#Div4 {
	left: 160px;
	position: absolute;
	top: 250px;
	margin-bottom: 0;
	background-color: #fff;
	width: 960px;
	padding-top: 0px;
	height: 291px;
}
html > body #Div4 {
	height: auto;
	min-height: 292px;
}
#Div5 {
	left: 161px;
	position: absolute;
	top: 541px;
	margin-bottom: 0;
	background-color: #fff;
	width: 958px;
	padding-top: 0px;
	height: 182px;
}
html > body #Div5 {
	height: auto;
	min-height: 183px;
}
#Box3SliceContainer {
	left: 709px;
	position: absolute;
	top: 305px;
	margin-bottom: 0;
	width: 411px;
	background-image: url(Untitled-1_r5_c5.png);
	background-repeat: repeat;
}
#Box3SliceContainer_top_1 {
	margin-left: 0px;
	margin-top: 0px;
	background-image: url(Untitled-1_r3_c5.png);
	overflow: hidden;
	display: inline;
	float: left;
	height: 262px;
	margin-bottom: 0;
	width: 411px;
}
#Box3SliceContainer_bottom_1 {
	margin-left: 0px;
	margin-top: 0px;
	background-image: url(Untitled-1_r6_c5.png);
	overflow: hidden;
	display: inline;
	float: left;
	height: 440px;
	margin-bottom: 0;
	width: 410px;
}
#Div6 {
	left: 750px;
	position: absolute;
	top: 580px;
	margin-bottom: 0;
	background-color: #fff;
	width: 340px;
	padding-top: 0px;
	height: 232px;
}
html > body #Div6 {
	height: auto;
	min-height: 233px;
}
#Div7 {
	left: 755px;
	position: absolute;
	top: 585px;
	margin-bottom: 0;
	background-color: #31b8ee;
	width: 330px;
	padding-top: 0px;
	height: 222px;
}
html > body #Div7 {
	height: auto;
	min-height: 223px;
}
#Div8 {
	left: 180px;
	position: absolute;
	top: 820px;
	margin-bottom: 0;
	background-color: #fff;
	width: 530px;
	height: 1px;
	overflow: hidden;
}
.Txt_Maecenas {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 200%;
	font-weight: bold;
	text-align: left;
	color: #404040;
	line-height: 138.46%;
	padding-bottom: 2px;
	padding-top: 1px;
	left: 748px;
	position: absolute;
	top: 832px;
	margin-bottom: 0;
}
.Txt_Praesent {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 130%;
	text-align: left;
	color: #3f3f3f;
	line-height: 18px;
	padding-bottom: 2px;
	padding-top: 1px;
	left: 747px;
	position: absolute;
	top: 871px;
	margin-bottom: 0;
	width: 321px;
}
#Div9 {
	left: 159px;
	position: absolute;
	top: 970px;
	margin-bottom: 0;
	background-color: #fff;
	width: 960px;
	padding-top: 0px;
	height: 291px;
}
html > body #Div9 {
	height: auto;
	min-height: 292px;
}
#Div10 {
	left: 180px;
	position: absolute;
	top: 1035px;
	margin-bottom: 0;
	background-color: #fff;
	width: 530px;
	height: 1px;
	overflow: hidden;
}
#Div11 {
	left: 180px;
	position: absolute;
	top: 1063px;
	margin-bottom: 0;
	background-color: #fff;
	width: 149px;
	padding-top: 0px;
	height: 127px;
}
html > body #Div11 {
	height: auto;
	min-height: 128px;
}
.Txt_Nam {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 160%;
	font-weight: bold;
	text-align: left;
	color: #3f3f3f;
	line-height: 120%;
	padding-bottom: 2px;
	padding-top: 1px;
	left: 347px;
	position: absolute;
	top: 1066px;
	margin-bottom: 0;
	width: 354px;
}
#Div12 {
	left: 185px;
	position: absolute;
	top: 1068px;
	margin-bottom: 0;
	background-color: #31b8ee;
	width: 139px;
	padding-top: 0px;
	height: 116px;
}
html > body #Div12 {
	height: auto;
	min-height: 117px;
}
#Div13 {
	left: 750px;
	position: absolute;
	top: 1190px;
	margin-bottom: 0;
	background-color: #fff;
	width: 113px;
	padding-top: 0px;
	height: 22px;
}
html > body #Div13 {
	height: auto;
	min-height: 23px;
}
.Txt_VIEW {
	font-family: 'Arial Bold', Arial, Helvetica, sans-serif;
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	color: #616161;
	line-height: 120%;
	padding-bottom: 2px;
	padding-top: 1px;
	left: 761px;
	position: absolute;
	top: 1193px;
	margin-bottom: 0;
}
#Untitled-1_r1_c1 {
	left: 0px;
	position: absolute;
	top: 0px;
	height: 72px;
	margin-bottom: 0;
	width: 550px;
}
#Untitled-1_r1_c4 {
	left: 550px;
	position: absolute;
	top: 0px;
	height: 72px;
	margin-bottom: 0;
	width: 730px;
}
#Untitled-1_r2_c1 {
	left: 0px;
	position: absolute;
	top: 72px;
	height: 223px;
	margin-bottom: 0;
	width: 1280px;
}
#Untitled-1_r3_c1 {
	left: 152px;
	position: absolute;
	top: 295px;
	height: 1029px;
	margin-bottom: 0;
	width: 20px;
}
#Untitled-1_r3_c3 {
	left: 172px;
	position: absolute;
	top: 296px;
	height: 245px;
	margin-bottom: 0;
	width: 537px;
}
#Untitled-1_r3_c6 {
	left: 1120px;
	position: absolute;
	top: 295px;
	height: 97px;
	margin-bottom: 0;
	width: 160px;
}
#Untitled-1_r4_c3 {
	left: 172px;
	position: absolute;
	top: 541px;
	height: 280px;
	margin-bottom: 0;
	width: 537px;
}
#Untitled-1_r6_c3 {
	left: 176px;
	position: absolute;
	top: 844px;
	height: 233px;
	margin-bottom: 0;
	width: 533px;
}
#Untitled-1_r7_c3 {
	left: 172px;
	position: absolute;
	top: 1077px;
	height: 184px;
	margin-bottom: 0;
	width: 537px;
}
#Untitled-1_r9_c3 {
	left: 172px;
	position: absolute;
	top: 1261px;
	height: 63px;
	margin-bottom: 0;
	width: 947px;
}

Open in new window

Comment
Watch Question

Top Expert 2013

Commented:
That page carries a 100% guarantee of never being flexible when there are changes in window size and/or resolution.  

You are using absolute positioning all over the place, unless you are prepared to write a lot of scripting to re-calculate the position and size of those elements for every size change, you have are going to have to have a static page that does not re-size.

If you want the page centered then it needs have a width specified, and then you apply a style of margins:auto.

Using all those tools is nice, but they will not teach you much except bad habits.  I would recommend you spend some time dealing directly with the code in a text editor and perhaps look at tutorials and references at w3schools

Author

Commented:
Yeah- thats what I thought, I am somewhat familiar with coding and I apply the margins: 0, auto style normally myself. Just seeing if there where any short cuts for throwing together a quick page. Just out of curiosity, what is the process for making this page fluid.

You would have to change the position from absolute to ?, then what?

Thanks

Author

Commented:
*were any short cuts
Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
>> You would have to change the position from absolute to ?, then what?

Percentages.
CERTIFIED EXPERT

Commented:
Photoshop and Illustrator both make notoriously bad code for websites. Fireworks is not as bad, but you have to do a lot of extra work just to get reasonably acceptable code and even then it's still bloated and unwieldy. None of them are capable of writing code for a true liquid site. Such is the pity.

I have found the best "shortcut" to creating a liquid site, short of jumping in and coding it yourself, is to grab one of the many liquid layout templates off of the web.

I open the demo of the template in a browser and create a screen grab. Then I open the images folder and drag the individual components of the template into layers, naming each layer for the file being dragged.

You can use products such as "Web Developer's Toolbar" and "Firebug" in the Firefox browser to learn where to change the CSS to affect things such as the colors, positions and background  images, as well as understand how the coder accomplished the things that he/she did.

Then, with a combination of modified images and tweaks to the code, you can have a functional site with your stamp all over it -- and learn some valuable code in the deal as well.

Author

Commented:
Yeah- i'm really not that much of a beginner when it comes to coding. I started off designing CSS purely in Dreamweaver and just recently found out how to create in photo shop. Kind of backwards I guess. The format that those programs shot out at me were familiar, yet very different. I have learned to create taking portions of a mock up and adding content naturally. I was just confused by the "absolute positioning" and using the "left" and "top" styles.

In response to the "percentages" response.

I have tried converting all of the positions to percentages, and that has not worked either. So a response of simply "percentages" doesn't really help.  I have tried so many things now.

Its so not time efficient and a method that I cant see using in the future. i just really want to know the exact answer because, well, I guess its killing me. I just want to know what I was doing wrong. At this point I really do not think its possible, unless you rewrite the script completely, not simply changing from pixels to  percentages.



Thanks!

Author

Commented:
D Brugge, Ah I see what your saying in terms of the liquid templates now. Il check that out. thanks
Top Expert 2013

Commented:
It is not just a matter of dealing with absolute positioning an using percentages.  Good flex pages actually need some rigid components as well.  

You need to design the layout top down and then do the detail coding bottom up.  

If you know you want a flex pege then design right from the start to be that way.

First the body.  If you are going to flex then you need some slack but you also have to tack it down so it does not get out of control.  Forget about look and feel until after you get structure.  To give the body slack an flexibility declare a width in percentage less than than 100%.  Between 80% and 95% is good and set a min-width to prevent the components that get added later from getting crushed.
so:
body {width:90%; min-width:450Px}

With the min-width declared you now have a lower limit where you know all components will be safe.

Now we want a few big structural pieces let's say a banner, top a nav bar ,content, and a footer

All those get declared with a width of 100%.  That makes them the full width of the body, not the window and they will automatically re-size with the body.  They are just containers -- structural components. In addition to the width , the banner, nav, and maybe the footer get a height in pixels. No height on the content let the browser stretch down when it has to.

Now you start putting pieces into the structures using widths in percentages and floating them.  Always allow for some padding and/or margins to allow for movement on a re-size.  Don't jam a lot of stuff together.  Leave lots of room.  As long a you don't use a lot of borders, and you do use backgrounds on the structures the boundaries of the components will not be apparent to the user they will just see a smooth flow.  

The hard part is the detail; getting the small pieces to work together.  It takes experimentation and testing to get it right.  The "toy" development tools make it easy which is why they produce junk.  It takes a little sweat and some tears to get it right.  In the end some layouts can be stubborn and you may have to resort to a couple of lines of script to re-dimension a couple of components where they are tight together and start to overlap.  Never use script to re-position. Only use it re-dimension components, and let the browser do the positioning.  If you need more than 10 lines of script (zero lines is better) than you have failed.  The small re-dimensioning script just has to run for load and resize events and will be transparent.

Short cuts won't produce a perfect page, and I have yet to see the tool or template that can produce anything better than mediocre pages.  Anyone can make a web page.  That is why there are million of really crappy sites on the Internet.  Find 100 really bad sites and the odds are that 90 of them were generated with "easy to use tools".

Author

Commented:
OK-I understand what it takes to design a liquid web page. I Have been designing for about a year, so i am still fairly new, But I do understand how to develop a liquid page COBOL

In my experience, It  just seems like there is a script for everything, I guess I just found it hard to believe that Adobe would allow you to create these pages then not have a solution for making them presentable.

Getting away from liquid or flex designs,,
There's nothing that can be done to just make the content centered in the page with the background extending forever?

Last question. Thanks!


Top Expert 2013
Commented:
Oh sure that is not difficult do the body 100% width with the background you want.  

Then immediately after the body tag put in a div with a width of less than 100% and margin:auto

If you want the internal content of the div (text, image, lists, forms, tables. just add text-align: center to the style and all the childNodes contained in the element will center.

Margins affect  to the elements they are applied to text-align applies to the contents of the element they are applied to, and is generally inherited.

 
augustg1, I had the exact same situation years ago. Using PS generated html/css that I wanted centered on the page and a simple and quick solution.

Create an id selector

#Table_01 {
	position:relative;
	margin: 0px auto 0px auto;
	width:928px;
	height:712px;
}

Open in new window


*Adjust the width and height to your needs


Within the <body> tag enclose your code with a div selector using the id attribute
<body>
     <div id="Table_01">
          your HTML code
     </div>
</body>

Open in new window

Explore More ContentExplore courses, solutions, and other research materials related to this topic.