We help IT Professionals succeed at work.
Get Started

Converting Mockup to a liquid web page

675 Views
Last Modified: 2020-04-13
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
This problem has been solved!
Unlock 2 Answers and 11 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE