|
HTML - Liquid Layout Website
Hi,
I am trying to create a liquid website. I have drawn up a prototype on paint and the image is attached. Can anyone help me to turn the prototype into a website? Thanks, Similar TutorialsHi Everyone, I'd like to learn the details about liquid layout and like to know how to develop the liquid layout site like timberland[dot]com. Looking forward for your ideas... Thanks... Yespee Aloha! Would anyone kindly review this simple html and tell me why the liquid layout doesn't work? Thank You. Uldra <html> <head> <title>Mystical Reflections</title> <meta name="description"content="The Artistry of Uldra Johnson"> </head> <body bgcolor="black" text="silver" link="purple"> <div align="center"> <table cellpadding="16" width="100%" border="0" cellspacing="0"> <tr> <td width="30%" align="center"> <td width="100%" align="center"><font face="chopinscript" size="+4">The Artistry of Uldra Johnson</td> <td width="0%" align="center"> </tr> <tr> <td width="30%" align="center"><font face="chopinscript" size="+4"> Shinay</td> <td width="40%" align="center"><font face="chopinscript" size="+3">All of my art<br> - my photography, my artifacts, as well as my writings and music -<br> is born of spirit, and its intent is spiritual.</td> <td width="30%" align="center"><font face="chopinscript" size="+4"><a href="photodirectory.html">Photography</a></td> </tr> <tr> <td width="30%" align="center"></td> <td width="40%" align="center"><img src="shinayreduced3.jpg"></td> <td width="30%" align="center"></td> </tr> <tr> <td width="30%" align="center"><font face="chopinscript" size="+4">Writing</td> <td width="40%" align="center"><font face="chopinscript" size="+3">May it touch your ruby heart,<br> and dance with your diamond mind.</td> <td width="30%" align="center"><font face="chopinscript" size="+4">Artifacts</td> </tr> <tr> <td width="30%" align="center"><font face="chopinscript" size="+2"><u>Contact info</u></td> <td width="40%" align="center"><img src="beig.gif"></td> <td width="30%" </td> </tr> </table> </div> </html> Hi, I am building a website and would like to make it liquid. The website address is: http://www.cse.dmu.ac.uk/~p04283218/mainframe9/ Can anyone point me in the right direction as to how I would do this please. Thanks. Hi all, hopefully I'm posting this in the right spot. I'm in the process of designing the layout for a new website, but I'd like some input as far as your recommended method for programming the skeleton of the attached image. I'd like to keep the look similar to this. Your recommended coding samples would be GREATLY appreciated! I am not sure whether or not this is the right category to put this in but hopefully you lot wont mind... I just wanted to know that if i wanted to make a layout of any shape or design that I wanted, would I first have to make the layout on photoshop or fireworks and then import the picture onto dreamweaver, then use div tags to layer things and such? just wanting to know becuase I'm starting to try and make more cutting edge websites even though I have made a few with flash and such Thanks for your time Sam I am making a website and my layout changes from computer to computer. What i mean is, on my computer the layout looks fine, on another one the layout is distorted. www.mlbmotors.com Hi all, I just learn html+css and now I'm building my first website - http://www.bcichemical.com. My website look fine on IE but it doesnt look right on Mozilla, Can someone guide me on this matter. Thanks I am making my band a website. I have all the graphics i need (as in the menu and background), but I don't know how to put it all together and make it good looking. here is a picture of the general idea. That would go all the way to the bottom of the page and all the rest of the space would just be black. Now of course, thats not how it would exactly look, that was just a map out that I made in two seconds. I need just the area where people read all the info and such to scroll alone, and to have nothing else to do so. Just in case anyone doesn't know what i mean by "put it all together" I mean to get the top thing where it says band name on, and have the menu on the side, the place where everyone reads next to it, a bit of space below the area where people read, and the whole left be just black. thanks in advance EDIT- I realized i also should probably say this too. There is a graphic that runs through the entire page (band name area, menu, and place where people read). The band name area is a jpg, menu is a flash file, and then the place where people read is just regualr. well im creating a new website layout but its being an ass...or its just me well its like 5am here in the UK now which is probebly the reason for the problem but ah well i need it sorting asap and i cant work it out. my website is http://www.rharris28.com so you can see for yourself. basicly everything apart from the bar at the bottom should be on one line, but it just wont do it. i refuse to use tables as ive broken that habbit and want to stear clear of tables at all costs. so its all div's and css work. my html is HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Mixing Pixels - Internet Services :: Homepage</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="verify-v1" content="KY6WP1pcuAyddeAyjc4oFZVeQDE0qbbA1GGcJ2Zgu8Y=" />
</head>
<body>
<div id="background" align="center">
<div id="container" align="left">
<div id="tb">
<div id="tbbg"></div>
<div id="topsep"></div>
<div id="tophome"></div>
<div id="topsep"></div>
<div id="topmap"></div>
<div id="topsep"></div>
<div id="topcontacts"></div>
<div id="topsep"></div>
<div id="searchbg"><b>Search:</b></div>
</div>
<div id="topmenu">
<div id="topmenubg">Home</div>
<div id="topmenusep"></div>
<div id="topmenubg">News</div>
<div id="topmenusep"></div>
<div id="topmenubg">Downloads</div>
<div id="topmenusep"></div>
<div id="topmenubg">Search</div>
<div id="topmenusep"></div>
<div id="topmenubgend">Services</div>
</div>
</div>
</div>
</body>
</html>
and my CSS is Code: * {
margin: 0;
padding: 0;
}
#background {
background-color:#01557C;
height: 100%;
width: 100%;
}
#container {
background-color:#FFFFFF;
width: 759px;
height:500px;
}
#tbbg {
background-image:url(/images/main01.jpg);
width:256px;
height:41px;
}
#tb {
float:left;
width:759px;
}
#tophome {
background-image:url(images/but_home.gif);
width:74px;
height:41px;
}
#topmap {
background-image:url(images/but_site_map.gif);
width:94px;
height:41px;
}
#topcontacts {
background-image:url(images/but_contacts.gif);
width:96px;
height:41px;
}
#topsep {
background-image:url(images/separator.gif);
width:2px;
height:41px;
}
#searchbg {
width: 231px;
height: 41px;
background-image:url(images/fon01.gif);
}
#topmenu {
width:759px;
}
#topmenubg {
background-image:url(images/fon_menu.gif);
width:132px;
height:42px;
float:left;
text-align:center;
}
#topmenubgend {
background-image:url(images/fon_menu.gif);
width:135px;
height:42px;
float:left;
}
#topmenusep {
background-image:url(images/e_menu.gif);
width:24px;
height:42px;
float:left;
}
please help...many thanks hello, I want to figure out a way to make the layout of my website fixed, depending on the screen resolution and browser of the person that is viewing my site. I would like a layout with three rows (Header, content, Footer). the Content row should be 2 columns. i would specifically like the Header and Footer rows to be Fixed. and the right column in the content row to have a scroll bar, so that the content in it is the only thing I can scroll while my top banner and footer stay put. Can anyone orient me towards tutorials or any sort of information that might help me solve this? Thank you! Is it wrong to use tables to build your website's layout? For example, on one column you'd have the navigation, and on the other column you'd have the main website content. Is this method wrong? Hello there. Firstly, thank you for any and all help here. I am no web developer, but I have done some for my degree and other various bits/bobs. I produced a very simplistic website for a client, however the website is showing up different, on different PC's and I cannot get to the bottom of it. Now, I know this is down to my own inexperience in coding, but I followed various books, online suggestions for layout (relative, margin) positioning techniques, and the website looks fine on my PC, on my mrs work PC, even on the clients PC in his office (this is a mixture of IE8 - Win7, XP). However, I get an email from the client, and his understudy, last night saying the website looks terrible. All the text the 3rd column looks out of line (maybe because I used line:height?). As you can see, without having a clear understanding of the backbone of HTML coding, I am going to suffer. The CSS validates, the HTML validates with W3c. The website is: http://www.fpcuk.co.uk The issue is with IE7 and IE8. I coded the website in IE8, but it looks different on IE7. Could you have a look at it for me, and let me know where I have gone wrong. or give me some tips on making it compatible with both IE7 / IE8. There is only about 20 lines of code. It is mainly the right-hand column. Here 's a few images: IE7 http://img.photobucket.com/albums/v2...sueWithIE7.png IE8 http://img.photobucket.com/albums/v294/Jertsy/IE8.png I have nothing but respect for Web Developers, having to build websites for different browsers versions, damn.. So, after looking at my code - can you see any glaring issues that will cause it to distort the layout in different versions. Thank you very much. Spencer K EDIT: FFS!!! I'm tearing my hair out with this. I just cannot get the website to look right in IE7 and IE8 - its driving me fking crazy.. Even adding; Code: <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /> To the top of the page, hoping this will force IE8 to be compatible with IE7 does not work. How on earth am I supposed to figure this out. Everything I try looks different, everything. Not much help here either. Hey all, I'm new here, and I love the layout of this website! I like the bright colors! Anyway... I created a website layout/site in Photoshop CS 5. The website: www.thegarbagedump.net I saved it as a html & images.. The issue I am having is when you click one of the bottons I want it to open the html document and display it within that square area with the border around it. I know I probably need a frame to do this, however I dont know how to add a frame, and it appears photoshop saved it in tables.. Could you please review the html source, and tell me how/where to add a frame, and make the Home, About, Domains button appear within that square area with the border? Thank You, Justin Hi all, I'm trying to create a liquid design using tableless design, but im having a slight problem. I'm aware that you should use a div tag and set the width in percentages but i have two images in the header, so while the header div is set to 100% the images inside arent and therefore the website only works on the computer i have developed the website on. Is there a way around this problem. I have pasted the header code below: Code: <div id="header"> <img src="Images/spacer.gif" width="34" height="1" border="0" /> <a href="Index.html"><img src="Images/Header1a.jpg" alt="Angies Florida Villa - Rent Our Luxury Villa At A Low Price!" width="587" height="130" border="0" /></a> <a href="#"><img src="Images/Header_3.jpg" alt="Angies Florida Villa - Rent Our Luxury Villa At A Low Price!" width="480" height="130" border="0" /></a> </div> Code: #header{ background-color:#FFFFCC; border-style:solid; border-color:#000000; border-width:1px; height:130px; width:100%; } Hi everyone. I am trying hard to use liquid design in my websites, so when I have a gallery of thumbnails, I want the number of rows of thumbnails to adjust according to the window size, avoiding horizontal scrolling. If you go to this url: http://www.surecarehomehealth.com/pa...ttheteam.shtml, you will see that resizing the window will do what I want it to. However, if you click on the first thumbnail, after opening that page, the thumbnails no longer adjust as desired. It seems that having that large image on top prevents this, but why? I can't figure it out. I can't see what would be preventing the thumbnails from collapsing to fit inside the window. Can anyone tell me why this is? Thanks. Hello! I recently uploaded a site I've been working on in Dreamweaver- www.gmerch.net My question is about templates. Currently the page will display with the main content below the nav bar, and not to the right. I suspect this is an issue of having a liquid template and not a fixed one. Am I on the right track here? Is there a way to switch to fixed without having to copy all of the site content into a new document? Thanks! Toby Hi How to add a website counter to my website. So that when ever a visitor visits the website I want the counter to increase say from 101 to 102 and then for a new visitor it should be 103 and then again for the next visitor 104 and so on..... I want to know the code. There are number of websites that are offering this but they put their advertisement which I don't want Hi, I am trying to find a way in which a website that is linked on my homepage can be opened while keeping at least one form of my homepage open as well. e.g.: Google images :http://images.google.com/imgres?imgu...en-us%26sa%3DG sorry for the massive link. Hope you get the idea. So what i want is to have a bar on top that is my homepage (like the google bar in the link), but the rest is the actual website that has been linked. I don't really care much about the url. It doesn't have to be my homepage url, it can be the actual website url. Google has been able to do that somehow, so it is possible. I would just like to know how and if it is hard to do. If someone knows how to do it, it would be great if you could give me a link to a tutorial, or explain it. thanks hello, i need a website for german customers, somethign like www.podmod.de because i would like to offer the same. So if anyone has an idea where to start, or even can offer me something i can buy, please do so. my email: verenamueller999@web.de thanks verena. I have some links (in the header, the SUPPORTERS) to different websites, but when I click on them the address in the address bar does not change to the address of the website that I clicked. How do I make it show the address that I clicked on? Thanks. http://www.ac.wwu.edu/~fencing/ I am a total noob but volunteered to administrate the website, because there was no one else to do it. |
|||||||