|
HTML - Fixed Vs. Liquid Template
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 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 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, 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 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. 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, total newbie to website design and I need help in getting rid of a template. I think for now all i want is to go to cPanel, then right to a HTML editor, but every choice seems to leave me with some sort of forced template. I just switched from Sitebuilder to RVsitebuilder and was a little happier with the 'build your own' template... but still there is a template. I want to learn to design my own header, not have some preset thing.... Should I just keep messing with different builders? Try wordpress? (it's Not like i can ruin anything, there is no content up yet to worry about overwriting) Hoping someone feels like answering this tonight here is the template. it's coded badly since I used photoshop and dreamweaver since I dont really know how to code. the only thing I need to do is add a div tag in the body thats white and another div tag for the footer with that color. ive been messing with it but i cant get it. i end up messing the whole template up. could someone please help me with those 2 spots please? I'm trying to make a template for e-bay using Dreamweaver. When I use CSS, it applies everything to the whole auction, so even the e-bay things have the font as orange. I went in and changed everything to html and things look better, but I'm having a problem with the border around my images. I would like it to be the color in the background instead of black. Here is a screenshot of what I am talking about. http://s132.photobucket.com/albums/q...screenshot.jpg Here is the code I currently have: <img src="http://i132.photobucket.com/albums/q14/littlestinkerstore/SSTemplate/ssimagej.jpg" width="288" height="288" border="9"></p> <p align="center"> </p> <p align="center"><img src="http://i132.photobucket.com/albums/q14/littlestinkerstore/SSTemplate/ssdescriptionj.jpg" width="450" height="225" border="2"></p> What I would REALLY like is a border around the image that is another image, a pattern used in the background, but I will be happy with a color that matches!! Thanks! Well okay it's me again. I'm making another template. How do I get this: Image To look like this: Image And then let me add text? Codes: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Apateezer - Home</title>
<link rel=stylesheet href="style.css" type="text/css" media=screen>
</head>
<body>
<div id="page">
<div id="Header">
</div>
<div id="linkbar">
<div id="page">
<p>test</p>
</div>
<div id="footer">
<p>Copyright (c) 2008 Apateezer.com <br/>
All Rights Reserved.</p>
</div>
</div>
</body>
</html>
Code: body {
background-color:#000000;
margin:0;
padding:0;
text-align:center;
font-family:Trebuchet MS Bold;
font-size:16px;
color:#ffffff;
}
#page {
width:960px;
margin:auto;
padding:auto;
background-image:url(images/page.png);
text-align:center;
}
#header {
width:780px;
height:123px;
background-image:url(images/header.png);
clear:both;
}
#linkbar {
width:780px;
height:66px;
background-image:url(images/linkbar.png);
clear:both;
}
#footer {
width:780px;
height:51px;
background-image:url(images/footer.png);
clear:both;
}
PLease help. Hi, this may not be even a HTML question but... I was wondering if there was a way to create some kind of website template, so if I wanted to add a banner or something to a page I don't have to go into each individual html file and put it in. Something like a css that everything references to and making a change in that changes all. THX. I have an older template that has a stylesheet and iframes.html I am wanting to put this into it and just havent had any luck. <!-- MLCALC BEGIN --> <script type="text/javascript"><!-- mlcalc_default_calculator = 'loan'; mlcalc_currency_code = 'usd'; mlcalc_amortization = 'year_nc'; //--></script> <script type="text/javascript" src="http://www.mlcalc.com/jquery.js"></script><div style="font-weight:normal;font-size:9px;font-family:Tahoma;padding:0;margin:0;border:0;background:transparent;color:#E5E5E5;width:300px;text-align:right;padding-right:10px;" id="mlcalcWidgetHolder"><script type="text/javascript" src="http://www.mlcalc.com/widget-wide.js"></script>Powered by <a href="http://www.mlcalc.com/" style="color:#E5E5E5;text-decoration:none">Mortgage Calculator</a></div> <!-- MLCALC END --> I have been able to muddle it into the page but get script error. I am sure I need to provide more information. The tables on the page are just to confusing for me to work this in. Just thought I would start off with the problem. Wasnt sure what forum to put this in either thanks in advance for any input. Hi guys.I have very little html experience so I decided to work from a template. Problem is, I didn't even know how to add some of the simple stuff. I was able to figure out how to add: a) the background b) the main header(banner) and c) a few normal pictures I have no idea however how to add the: sidebar, menubar (where about us, etc is), or the footer. I don't know where the programming for them starts or how to add so that the show up. In the following post I'll add my website name and code: Hey there. I have a blog. its called reign of uncertainty, and the url is www.confusedforeternity.blogspot.com i am using a zigmag remedy template. i am trying to put links in the bar, where it says "home, about me, art....". but the template automatically prefixes the blog url before the link. if i put www.deviantart.com in the xml code, it automatically becomes http://www.confusedforeternity.blogs...deviantart.com. i am not the good at coding and i dont know why its happening. the xml template is available he http://www.mediafire.com/?tz3mzcgntmt A solution will be appreciated. Hey everyone, First of all, I don't know any HTML, I'll be following a tutorial later this week to learn it, yet I decided to give website lay-outs, a go. Here's what I got so far. Now my questions are, do I have to add the text on there now? Or will I add it with HTML later on? And my other question is, how exactly does the slice tool work? Do I just have to slice it all in pieces? Or do I have to add the URL to it too? (If you double-click a slice you can enter a URL, how can I know the URL if I don't even have a site yet?) Thanks a lot! How would you add a template to your site with HTML. This concept is getting very annoying and I have started arguing with someone on this subject. Please if you know how to do this please don't hesitate to tell me. Thanks in advance!! -Levi HI Guys, I am making a template using Web 2.0. Everything was alright but when I opened the html files in Dreamweaver again for work. One div in the middle it showed white space. When I viewed it in firefox, it viewed completely and there was no white space. The text was there , everything was there. I dont get it, where did the white space came from. Also, if I view the code view, that specific div is highlighted with yellow color. Also the yellow highlighted div is showing in the design view. I am attaching the screenshots. Kindly help with this Regards, a2usmani I'm currently using this template for blogger that's not made by myself and i've been trying to get it to center horizontally but it's not working. I'm hardly experienced with html so any help would be appreciated. Thanks in advance! HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML><head>
<title>The City That Never Sleeps</title>
<script type="text/javascript">
function changeNavigation(id)
{document.getElementById('content').innerHTML=document.getElementById(id).innerHTML}
</script>
<style type="text/css">
body {
background-image: url(http://i1015.photobucket.com/albums/af277/sleepingtoys/city/citybg.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-color: #F0F0F0;
font: normal 8pt "Arial", sans-serif;
color: #808080;
line-height: 1.5;
text-align: justify;
}
#navbar-iframe{
display: none;height: 0px;
}
#bottom {
background: #222;
height: 20px;
width: 100%;
position: fixed;
bottom: 0;left: 0;z-index: 1;
}
#sun{
padding:5px;
background: #222222;}
#post{
filter: alpha (opacity=90);
-moz-opacity: 0.50; opacity: 0.90;
-webkit-transition-duration:1s;
padding:1px 3px 3px 0px;}
#post:hover{
filter: alpha (opacity=100);
-moz-opacity: 1.00; opacity: 1.00;
-webkit-transition-duration: 1s;
padding:1px 3px 3px 0px;}
#posts {
background: #ffffff;
vertical-align: top;
width: 520px;
-moz-border-radius: 10px 0 10px 10px;
-webkit-border-radius: 10px 0 10px 10px;
padding: 5px 10px 10px 10px;}
#postbody img {
padding: 6px;
background:#fafafa;
border: 1px solid #e1e1e1;}
#music img {
padding: 6px;
background:#111;
border: 0px solid #222;}
#moon {
background: transparent;
position: absolute;
top: 20px;
left: 315px;
width: 60%; }
#rain {
position: fixed;
width: 250px;
bottom: 10px;
left: 50px;}
#rain #content {
-webkit-border-radius: 10px 10px 0 0px;
-moz-border-radius: 10px 10px 0 0px;
background: #222222;
color: #999;
margin: 10px 0 0;
padding: 8px; }
::selection {
color: #888888;
background: #f5f5f5; }
::-moz-selection{
background: #f5f5f5;
color: #888888;}
.blogger-labels{
border-top: 1px solid #f8f8f8;
font-size: 10px;
padding-top: 5px;
margin: 10px auto 0 auto;
text-align: right;}
strong, b {color:#81A8B8;}em, i {color: #B94159 ; font-weight:bold;}u {color: #A79C8E ;border-bottom: 1px solid #A79C8E;}
a {
font: bold 8.5pt "helvetica", sans-serif;
color: #888;
text-decoration: none;
text-transform: lowercase;}
a:hover {
-moz-transition-duration: 1s;
-webkit-transition-duration:1s;
color: #ffffff; }
blockquote {
background-image:url("http://i589.photobucket.com/albums/ss333/HeartsAloud/dl/hbq.gif");
background-repeat: no-repeat;
background-position:top right;
font: normal 8pt "arial", monospace;
color: #999;
margin: 1px 0px 1px 0px;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eee;
-webkit-transition-duration:1s;
padding: 9px 0px 9px 0px; }
blockquote:hover {
-webkit-transition-duration:1s;
color: #555; }
.date {
font: normal 20pt "helvetica", sans-serif;
text-transform: lowercase;
color:#dddddd;
letter-spacing:-3pt;}
.title {
font: normal 18pt "helvetica", sans-serif;
border-bottom: 1px solid #f5f5f5;
margin-top:-10pt;
margin-bottom:2px;
font-style:italic;
letter-spacing: -2pt;
color:#f1f1f1;
text-transform: lowercase; }
.time{
font: bold 30pt "arial", sans-serif;
-moz-border-radius: 0 7px 7px 0px;
-webkit-border-radius: 0 15px 15px 0px;
height: 50px;
background: #f9f9f9 !important;
padding: 1px 3px 3px 0px;
float: left;
position: relative;
color:#f1f1f1;
font-weight:bold;
letter-spacing:-6.5pt;
filter: alpha (opacity=70);
-moz-opacity: 0.70;
opacity: 0.70;
-webkit-transition-duration:1s;
}
.time:hover{
filter: alpha (opacity=90); -moz-opacity: 0.90; opacity: 0.90;
-webkit-transition-duration:1s;
padding:1px 3px 3px 0px;}
.clouds{
font: normal 18pt "helvetica", sans-serif;
font-color:#333333;
letter-spacing:-2pt; }
.sky{
text-align: right;
padding: 0 9px 0px 0px;
font: bold 40pt "helvetica", sans-serif;
letter-spacing:-7pt;
text-transform: lowercase;
line-height:50%;
color:#222;}
.navi {
background: #222222;
color: #555555;
border-bottom: 1px solid #333;
font: normal 8pt "helvetica", sans-serif;
letter-spacing: 3pt;
margin: 0;
padding: 8px 5px;
text-align: right;
text-transform: uppercase;
-webkit-transition-duration:1s; }
.navi:hover {
-webkit-transition-duration:1s;
background: #222;
color: #999999;
cursor: default;
border-right:140px solid #333; margin-right: 0px;}
a.label:link, a.label:active, a.label:visited {
text-decoration: none; display: block; font: bold 30pt "arial", sans-serif; color: #e4e4e4; text-align: center; padding-bottom: 3px; margin:5px;
}
a.label:hover{
color: #A6ACA7; }
</style></head>
<body>
<div id="rain">
<div class="sky">
The City That Never Sleeps
</div>
<div id="content">
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/3.jpg">
Best viewed in <b>Google Chrome</b>, screen resolution 1280 x 1024.
Do not put too much content under each header or else some of the content could not be seen.
</div>
</div>
<div class="navi" style="border-top: none;" onClick="changeNavigation('about')">ABOUT</div>
<div class="navi" onClick="changeNavigation('affiliates')">AFFILIATES</div>
<div class="navi" onClick="changeNavigation('archive')">ARCHIVES</div>
<div class="navi" onClick="changeNavigation('tagboard')">TAGBOARD</div>
<div id="sun">
</div>
<div id="about" style="display: none;">
<div class="clouds">profile</div>
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/1.jpg">
It's best to keep it short and sweet. (:
</div>
</div>
<div id="affiliates" style="display: none;">
<div class="clouds">affiliates</div>
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/5.jpg">
<a href="http://struckbywanderlust.tumblr.com" target="_blank">tumblr</a>
<a href="http://heartsaloud.livejournal.com" target="_blank">livejournal</a>
<a href="http://heartsinink.livejournal.com" target="_blank">heartsinink</a>
<a href="http://twitter.com/heartsaloud" target="_blank">twitter</a>
<div class="clouds">credits</div>
This skin is made by <a href="http://blogskins.com/me/sleepingtoys" target="_blank">sleeping</a><a href="http://about.me/halfway" target="_blank">toys</a>.<br>
Resources: <a href="http://www.sxc.hu/" target="_blank">1</a>, <a href="http://weheartit.com/entry/2591643" target="_blank">2</a>,
<a href="http://weheartit.com/entry/442753" target="_blank">3</a>, <a href="http://weheartit.com/entry/2868529" target="_blank">4</a>,
<a href="http://weheartit.com/entry/2867826" target="_blank">5</a>
</div>
</div>
<div id="archive" style="display: none;">
<div class="clouds">archives</div>
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/4.jpg">
<td width="235px" valign="top">
<form name="form1">
<select style="font-size:8pt;color:#999999;font-family: helvetica;background-color:#333333; border:1px solid #222222; padding: 0px; width: 235px;" onChange="location.href=this.options[this.selectedIndex].value;">
<option value=''>Archives</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
</form>
</td>
</div>
</div>
<div id="tagboard" style="display: none;">
<div class="clouds">talk</div>
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/2.jpg">
Any usable chat widget goes in here.<br>
A pop-up <a href="http://cbox.ws">cbox</a> is recommended.
If you do not want a pop-up cbox, its width should not exceed 250px.
</div></div>
</div>
<div id="moon">
<br><br><br>
<Blogger>
<br>
<table id="post" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="posts">
<div class="date">posted : <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
<div class="title">title : <$BlogItemTitle$></div>
<div id="postbody"><$BlogItemBody$></div>
<td valign="top" width="112">
<div class="time" align="center"><a class="label" href="#top">
<$BlogItemDateTime$> </a>
</div></div>
</td></tr></table>
</Blogger>
<br><br>
<div id="bottom"></div>
</div>
</body></html>
Hello, I purchased an already made website but what i would like to do is give a title to all pages but i don't know how. The website/template is .php I thought that i could copy and paste <title><?php echo $website_title; ?></title> but it does not work Can anyone point me to a (free or commercial) advanced registration template? (only the HTML/css/Javascript client side part) By advanced I mean: 1. Every form is confirmed to be valid and passwords lengths are checked and compared to be the same error messages are displayed client-side. 2. Some form of a bar indicating how strong the password is. (although not required) 3. The form is sent using Javascript without leaving the page. Thanks in advance, Regards. |
|||||||