Log in

View Full Version : Need help with making a liquid site.


chadlexmorgan
06-30-2013, 12:22 AM
I have always been horrible at making sites liquid. So if someone can look at my script and give me some pointers that would be very much appreciated! let me know if you need to see any css pages.



<!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" lang="en" xml:lang="en">
<head>
<title>Rezzurection Taxidermy</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [300, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["./Rez_Pics/Bear.jpg", "", "", "Black Bear"],
["./Rez_Pics/Crappie.jpg", "", "", "Crappie"],
["./Rez_Pics/Deer1.jpg","","","Deer Head"],
["./Rez_Pics/Elk.jpg", "", "", "Elk Head"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""
})

</script>
<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />
<link rel="stylesheet" type="text/css" href="rezzcss.css" />

<script type="text/javascript" src="cssverticalmenu.js">

/***********************************************

* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

</script>

</head>
<map name="REZ">
<area shape="rect" coords="26,36,134,178" href="./index.html">
</map>
<body background="./Rez_Pics/WoodBG.jpg">
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" height="25%"colspan="3" align="center"><img src="./Rez_Pics/head.jpg"></td>
</tr>
<tr>
<td width="25%" height="75%" nowrap background="./Rez_Pics/WoodBG.jpg" valign="top" >
<br>
<div class="TITLE2" align="right">"Bringin 'em back to life!"</div>

<br><br><br>
<ul id="verticalmenu" class="glossymenu" valign="top">
<li><a href="#">Gallery</a></li><br>
<li><a href="#">Tips & Hints</a></li><br>
<li><a href="#">About</a></li><br>
<li><a href="#">Contact</a></li>


</td>
<td width="35%" height="75%" align="center" valign="top" background="./Rez_Pics/WoodBG.jpg">
<br>
<div id="fadeshow2"></div>
</td>
<td width="25%" height="75%" align="center" valign="center" background="./Rez_Pics/WoodBG.jpg">
<div class="TITLE2">BIO</div>
</td>

</tr>

</table>



</body>
</html>
ajfmrf
06-30-2013, 12:52 AM
Not quite sure what you mean by liquid

Please be more specific as to what you mean by 'liquid'
james438
06-30-2013, 01:46 AM
In my experience Liquid layouts refer to layouts that in some way conform to the dimensions of the browser window. Example (http://www.dynamicdrive.com/style/layouts/category/C13/)

chadlexmorgan, would you be able to post a link to your page so that we can see what you are working with?
chadlexmorgan
06-30-2013, 11:59 AM
By liquid I mean the layout should look the same no matter what screen res someone has. Here is a link to the site www.rezzurectiontaxidermy.com
james438
06-30-2013, 02:07 PM
I can't get the link you posted to work.
ajfmrf
06-30-2013, 03:35 PM
A bad link
jscheuer1
06-30-2013, 04:36 PM
Another person trying to raise the dead?

Anyways, a liquid layout doesn't try to look the same in all resolutions. Except for the most rigid and simplistic looking designs, that might be impossible anyway. A liquid layout is supposed to flow and adapt (like a liquid does) to its container. The result is a page that looks different in different sized windows and at different resolutions, but that still looks good in all of them.
Beverleyh
06-30-2013, 08:34 PM
If you want to retain some control over how your page looks in different devices, you can use media queries to adapt the CSS at certain breakpoints. This can be described as a fluid-adaptive/liquid-adaptive approach.

Here are some common breakpoints to get you started: http://alpha.responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints

However, adapting layout to a device is difficult when you don't know exactly what device (or screen resolution) your website is being viewed on, so a slightly different approach is to create breakpoints when your layout/content 'breaks' rather than for common device sizes. For that, you can just resize your browser and adapt the CSS at the point where things begin to look ugly.
FrickenTrevor
06-30-2013, 08:48 PM
chadlexmorgan I think you mean responsive instead of Liquid. Having a responsive site will be
automatically adjusted to fit all display resolution and devices.
Check out the demo (http://webdesignerwall.com/demo/adaptive-design/final.html) and play around with it. When you re-size your browser window to different sizes the content will shift according to the screen size.

Also you are going to have to drop the HTML 4 tables and go with HTML 5/Media Queries. I can help you convert it, but because the site does not work we cant really help right now.
chadlexmorgan
06-30-2013, 09:30 PM
Sorry, always forget there are 2 r's www.rezzurrectiontaxidermy.com