Advanced Search

Results 1 to 10 of 10

Thread: Need help with making a liquid site.

  1. #1
    Join Date
    Apr 2011
    Posts
    63
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default Need help with making a liquid site.

    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.

    Code:
    <!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>

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    586
    Thanks
    41
    Thanked 27 Times in 27 Posts

    Default

    Not quite sure what you mean by liquid

    Please be more specific as to what you mean by 'liquid'
    Thanks,

    Bud

  3. #3
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,681
    Thanks
    78
    Thanked 89 Times in 87 Posts

    Default

    In my experience Liquid layouts refer to layouts that in some way conform to the dimensions of the browser window. Example

    chadlexmorgan, would you be able to post a link to your page so that we can see what you are working with?
    To choose the lesser of two evils is still to choose evil. My personal site

  4. #4
    Join Date
    Apr 2011
    Posts
    63
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,681
    Thanks
    78
    Thanked 89 Times in 87 Posts

    Default

    I can't get the link you posted to work.
    To choose the lesser of two evils is still to choose evil. My personal site

  6. #6
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    586
    Thanks
    41
    Thanked 27 Times in 27 Posts

    Default

    A bad link
    Thanks,

    Bud

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,693
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    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/dev...ce-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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  9. #9
    Join Date
    Aug 2009
    Location
    @charset "UTF-8"
    Posts
    122
    Thanks
    4
    Thanked 5 Times in 5 Posts

    Default

    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 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.

  10. #10
    Join Date
    Apr 2011
    Posts
    63
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Sorry, always forget there are 2 r's www.rezzurrectiontaxidermy.com

Similar Threads

  1. Replies: 14
    Last Post: 11-04-2012, 06:51 PM
  2. Making the site faster
    By megha_3000 in forum Other
    Replies: 3
    Last Post: 07-26-2012, 08:46 PM
  3. Help with going Liquid
    By chadlexmorgan in forum HTML
    Replies: 3
    Last Post: 07-09-2011, 12:37 AM
  4. liquid flash?
    By Maxima in forum Flash
    Replies: 8
    Last Post: 01-23-2007, 09:33 AM
  5. Replies: 8
    Last Post: 06-24-2005, 06:31 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •