HTML - Simple Way To Do Simple Layout...
Hey. So I'm pretty good at stuff in general, my problem is that I do not have extensive experience with HTML/CSS so I don't know the best way to do this, or where to look for a way to do this. Basically, I want my layout to be like this:
http://people.virginia.edu/~eee2a/Welcome.html in that I want there to be gray space on the side and a middle that scrolls. super simple right? I just don't know how to do it, and I don't know the best keywords to use on google for it. Thanks. Similar TutorialsAloha! 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> I have a Very simple page laid out using <div>'s and at the bottom, IE6 is displaying some of my text (a text link) twice, and wrapping it to the next line? ANY help at all would be a life saver. http://www.jhilgert.com/em/index.html thanks in advance for any help. Hi ! Found this code below in this HTML section.( How to make images & text boxes line up.) Thanks Coothead, but needs a "table" apparently. Need ( 6, say ) thumbnails across the page. Space around. Then, underneath, same again - and so on. Like a chess board This code brings up the FULL size image, in line across. Please could you add what is needed? Then I could use it as a template (?) and tweek the sizes (?) No text required. <table> <tr> <td><img src="pic1.gif"></td> <td><img src="pic2.gif"></td> </tr> </table> Thank you in advance for any help - Hi all, This is my first post and its so simple that i am a bit embarrassed to post it, I have created a page with a flash video on it, but the only problem is cant workout how to centre the video, some help would be greatly appreciated, Here is the code, http://www.ogeetek.com/dave_test/test.txt And here is the website http://www.ogeetek.com/dave_test/test.html Thanks in advance, Hi All, Hopefully someone hear can help me please. I've created a search box and it displays fine in Firefox but it's not lining up right in IE Anyone got any ideas what I need to change? You obviously won't see the two images used in the search box here but you will see how the textbox and the "Search" link don't line up. The lines above and below these should join each other. Here's the code below: Thanks in advance, much appreciated. <!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> <title>Untitled Page</title> <style> .SearchBox { margins:0px; padding:0px; width:300px; vertical-align:top; height:26px; } INPUT.SearchBarTextbox { position:relative; margins:0px; border-top: solid 1px #bababa; border-bottom: solid 1px #b8b8b8; border-left:0px; border-right:0px; height:20px; padding-top:3px; color:#888888; width:210px } a.SearchLink { color:#0087FF; height:20px; font-weight:bold; padding-top:1px; padding-bottom:4px; border-top: solid 1px #bababa; border-bottom: solid 1px #b8b8b8; background-color:#fff; text-decoration:none; } </style> </head> <body> <form> <br /> <div class="SearchBox"><img src="images/SearchBarLeft.gif" align="top" /><input id="Text1" type="text" class="SearchBarTextbox" value="What are you looking for?" /><a href="#" class="SearchLink">Search</a><img src="images/SearchBarRight.gif" align="top"/> </div> </form> </body> </html> I have a code i am making for my nan so she can get to all her sites easy. But i want to to show up in tabs and it always shows up in a new window. Can cha edit it for me? Code: <style><!--body{background: black url(http://www.minutecity.com/images-for-myspace/background1/clouds/clouds_4.gif) fixed}--></style> <p> <a href="http://webmail.aliant.net"> <font siZe="15" Color="white" face="Boopee" Target="_self" ><b>Webmail</b> </p> <p> <a href="http://facebook.com" Target="_popup" > <font size="15" color="white" face="Boopee"><b>Facebook</b> </a> </p> Hello tere. I have been coding in HTML for a long time, but I haven't done so in a year or so. I took a fat break from coding, since I found no use for it. Now I'm creating a website, and I seem to have forgotten all the easiest things I forgot how to move forms. I got a div that I call .content, how do I move it around so it for example is on the upper hand right corner instead of being below everything else? Ty I'm trying to create something simple, I know how to do it in flash, but I can't get it in html, which is the way this needs to be done. I've attached a picture with an area in red. The area in red is the only area that needs to scroll, the rest of the image, the book area, needs to be static and not move. Can you help me? If you look at my page you will see on the left hand side two links to subscribe to my entries and my comments. I would like the text next to the subscribe image to have both lines indented the same amount. In other words, I want the second line to not wrap underneath the image and instead start at the same place as the first line, just to the right of the image. I know this should be simple but somehow my brain is not finding the solution. I am designing a page for our store - everything is fine with the code except for one thing: the code for the left and main tables on the page. I am having to write a string of <br /> to create breaks between my merchandise pics and the bottom of the page. In addition, on the left table is a border line dividing the two tables running the length of the page. I know there is an easier way of writing this, but I am at a loss as to how. Any help would be most appreciated. Thanks. http://piratesisland.leadhoster.com/booty.html I'm trying to create linked images based off URLs within my XML file. XML file: Code: <?xml version="1.0" encoding="ISO-8859-1"?> <projects> <list> <name1>Carrier Management</name1> <sharepoint1>https://portal.foorbar.com/sites/default.aspx</sharepoint1> <image1>../images/CarrierMgmt.jpg" border="0" alt="Carrier Management"</image1> </list> <list> ... XSL FIle: Code: <td> <a href='<xsl:value-of select="projects/list/sharepoint1"/>'> <img src='<xsl:value-of select="projects/list/image1"/>'> </a> <br/> <center><b> <xsl:value-of select="projects/list/name1"/> </b></center> </td> It's printing the < and > as text, not rendering then as HTML tags. Thanks. The area of my blog's post where it says "By Majed in..." then it has the labels. Well, I cannot find a way to put a space between the word in and the labels afterwords. The code is below, if anyone can help. Code: <div class='post-info clearfix'> <p class='author alignleft'> By Majed in </p> <p class='label alignleft'><b:if cond='data:blog.url == data:blog.homepageUrl'> <span class='post-labels'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop></b:if></span> </b:if></p> <p class='comments alignright'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> <a class='comments' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if> </b:if> </p> </div> For a bold font - I switched from <b> to <strong> - is this the correct way? can anyone write up a quick script on how to do the following? Please? Well, i just want visitors to be able to click on a link and then a have to wait 2 secs, then it opens in a new window. Please this is very important for me. Help. I am trying to put a simple text box on my form, but no matter what values I put in for the size of the textbox it reamins the same size! However, copying just the form code to a blank html document and the text box appears in what ever size I want. I didnt want to post the whole code here because a) is over 600 lines and b) im an ameatur and its rubbish code! However, I am using PHP in Dreamweaver if that makes any difference. This is driving me crazy, pleasehelp! I wish to create a simple form for collecting email ids of visitors on my site in excel sheet or on a text file. Is there any way to do it. I have a windows webhosting. Thanks in advance. Is there a simple web editor/publisher that will just let me enter content in a simple text format then publish it without having to lean how to navigate 10,000 buttons ? All I want to do is put simple black text on a white background. Then publish it to my site. But every editor/publisher program I find wants to complicate it with a million options. simple question! okay hey guys first time post for me as im banging my head against a wall here. I'm not at all good at html but im changing something on my WoW guilds website. now if you visit it you can see the Nav crumb is aligned to the left, i want it to be centered but everything i have tired fails! www.accidentguild.com heres the code im using at the moment, what would i need to make it center? Thanks <tr> <td > <table id="crumb"> <tr> <td id="nav"> <div class="ggcode"><script type="text/javascript" src="http://s.guildomatic.com/22981/host/88/88b299192fa483f4b42058edc1d647ea.js"></script> <script type="text/javascript" src="http://s.guildomatic.com/22981/host/18/1831d0c13f7156a9c39a2f94e27be272.js"></script> <script type="text/javascript" src="http://s.guildomatic.com/22981/host/e6/e60aa8cc24e81fd6f31115aa0dc7ae14.js"></script> <link rel="stylesheet" href="http://s.guildomatic.com/22981/host/48/48d569538603645583d72a456faa23ed.css" type="text/css" media="screen"> <link rel="stylesheet" href="http://s.guildomatic.com/22981/host/ad/adf16ddabb8cdc74eedfbeef8ba76566.css" type="text/css" media="screen"> <div id="menu"> <li><a href="/">home</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/forums">forum</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/members?sort=rank">Roster</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/news">news</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/raid_calendar">calendar</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/dkp">dkp</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/raids">Raids</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/items">items</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/guild_application">Applications</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> <li><a href="/http://www.accidentguild.com/page/show/18816">Profiles</a><img src="http://s.guildomatic.com/22981/host/97/979e2407a1ce49477a9deaae38dc235e.jpg"></li> </div></div> </td> First is i'm new at this, not doing this for fun am a college student studying computer and this is my project (to make a site) i know its bad to rely on someone but I've given up, i tried almost everything the professor thought me. So here's my question I have table of thumbnail images and i want to put a message (using font) on the left side of the thumbnail image table i want it aligned but the message is pushing the table down i want them to be aligned Tried using <left></left> on the message and <right></right> on the thumbnail Here's my page http://img825.imageshack.us/img825/4396/54815352.jpg Here's my code Quote: <center> <font color="EEEEEE" size="6" face="Tempus Sans ITC">Mythological Gods and Goddesses</font> </center> <font> The Olympian gods were the main deities in Ancient Greece. After overthrowing their ancestors, the </br> Titans, the Olympian gods became the rulers of the Cosmos representing the civilization of the </br> world.The Olympian gods were majestically and democratically dwelling on Mount Olympus, the </br> highest mountain in Greece, built by the Cyclops.The leader of the Olympian gods was Zeus.</br></br> <br> </br> All Olympian gods were associated with birth myths but themselves were unaging. They lived inside </br> human-like bodies with an ethereal fluid called ichor running in the veins. They had passions </br> and human weaknesses and were many times at fault, but were then obliged to take </br> the full responsibility of their actions.</font> <table border="1" align="right"> <tr> <td><a href="Zeus.png" target="_blank"><img src="Zeus.png" width="100" height="150" alt="Picture of Zeus King of the Gods, God of the Sky, Lightning and Thunder" align="bottom"/></td> <td><a href="Aphrodite.png" target="_blank"><img src="Aphrodite.png" width="100" height="150" alt="Picture of Aphrodite Goddess of Love and Beauty align="bottom"/></td> <td><a href="Hades.png" target="_blank"><img src="Hades.png" width="100" height="150" alt="Picture of Hades King of the Underworld God of the Dead" align="bottom"/></td> <td><a href="Hephaestus.png" target="_blank"><img src="Hephaestus.png" width="100" height="150" alt="Picture of Hephaestus God of Blacksmiths, Artisans and Volcanoes" align="bottom"/></td> <td><a href="Poseidon.png" target="_blank"><img src="Poseidon.png" width="100" height="150" alt="Picture of Poseidon God of the Sea, Storms and Earthquakes" align="bottom"/></td> </tr> </table> <br> </br> <br> </br> <br> </br> <br> </br> <br> </br> <table border="1" align="right"> <tr> <td><a href="Anubis.png" target="_blank"><img src="Anubis.png" width="100" height="150" alt="Picture of Anubis God of Cemeteries and Embalming " align="bottom"/></td> <td><a href="Osiris.png" target="_blank"><img src="Osiris.png" width="100" height="150" alt="Picture of Osiris God of the Afterlife, the Underworld and the dead." align="bottom"/></td> <td><a href="Isis.png" target="_blank"><img src="Isis.png" width="100" height="150" alt="Picture of Isis Goddess of Motherhood and Fertility" align="bottom"/></td> <td><a href="Ra.png" target="_blank"><img src="Ra.png" width="100" height="150" alt="Picture of Ra God of the Sun" align="bottom"/></td> <td><a href="Hathor.png" target="_blank"><img src="Hathor.png" width="100" height="150" alt="Picture of Hathor Goddess of the Sky, Love and Beauty" align="bottom"/></td> </tr> </table> <br> </br> <br> </br> <br> </br> <br> </br> <br> </br> <table border="1" align="right"> <tr> <td><a href="Thor.png" target="_blank"><img src="Thor.png" width="100" height="150" alt="Picture of Thor God of Thunder" align="bottom"/></td> <td><a href="Odin.png" target="_blank"><img src="Odin.png" width="100" height="150" alt="Picture of Odin God of Batlle, Wisdom and Poetry" align="bottom"/></td> <td><a href="Loki.png" target="_blank"><img src="Loki.png" width="100" height="150" alt="Picture of Loki God of Mischief and Trickery" align="bottom"/></td> <td><a href="Freya.png" target="_blank"><img src="Freya.png" width="100" height="150" alt="Picture of Freya Goddess of Freya Goddess of Love, Beauty, and War" align="bottom"/></td> <td><a href="Skadi.png" target="_blank"><img src="Skadi.png" width="100" height="150" alt="Picture of Skadi Goddess of Hunt and Winter" align="bottom"/></td> </tr> </table> Thanks to the next guy who would help me.. i'll appreciate any help Is there a simple way to center a div horizontally? 'align="center"' works fine but it's deprecated. '<center>' works fine, but it's deprecated. 'text-align="center"' doesn't work. I've searched this site with 'center div,' and tried several things I didn't understand; none had any effect save one, which moved it to the right. This is such a basic thing, CSS ought to have a 'horizontal-align:center,' but of course it doesn't. I don't have a site for an example, as it is now I'm using 'align="center".' I',m going to rebuild it, and I'd like to get it right. Any and all help appreciated. |