|
HTML - Simple Css Sizing Question
How do I make this simple HTML/CSS page look the way I want? If you render this code in a browser, you will see what I'm trying to do.
Thanks! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>Vertical Sizing Test Page</title> </head> <body style="margin: 0; background-color: #FFF; font-family: Verdana; font-size: 10pt;"> <div style="background-color: #FED; padding: 10px; height: 25px;"> Top Banner. I want this to be sized in pixels to accommodate raster backgrounds. </div> <div style="background-color: #DEF; padding: 10px; margin: 10px; border: 1px dotted black;"> <h2>Main Content Area</h2> I want this to vertically fill the remainder of the page.<br/> <br/> There should not be any unused space below the bottom banner.<br/> <br/> If there is a lot of dynamic content in this section, the user will need to scroll. However, if there isn't a lot of content, the user shouldn't have to scroll.<br/> <br/> This should also be vertically centered. </div> <div style="background-color: #FED; padding: 10px; height: 25px;"> Bottom Banner. I want this to be sized in pixels to accommodate raster backgrounds. </div> </body> </html> Similar TutorialsIs there an HTML script that will automatically proportionately size a graphic? Say you set the Height=100 then the Width=?? would be automatically adjusted depending on the actual size of the parent graphic. How can I create an HTML file on like a word processor, and then save it as a file and upload it to a hosting site? For a bold font - I switched from <b> to <strong> - is this the correct way? Hi, I'll go straight to the point. my problem is that I need a text box to have a scroll bar and a fixed size, preferably in a "div" layer. On a more complicated note, I would really like my website not to refresh itself when you click on a menu button. The changing information should be all in the same layer. And, last but not least, and even more complicated, Is there any methods to keep the website updating from being super complicated, as in "I write stuff in any program or text box, and this text goes in that box", Blog or loggin style. Help is greatly appreciated. Thanks. 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 Very simple question here. I'm pretty inexperienced with html, past the basics. I have copied the source code of a webpage into a text file and alltered it. I would like to open the file in Firefox and view this as it would appear as a web page. How would this be done? I have tried opening it as an html file, but the text only appears as the source code. I have been learning HTML and other web languages for a couple weeks now and one thing is bothering me. I noticed that sometimes when I am reading tutorials and such they put in a /> instead of just a > . So my question is why do I need a / in front of a > sometimes and sometimes I just put a >. I hope my question is clear Hi, When writing something on the internet, say a paragraph that has a URL in the middle of the paragraph, can the URL be hidden until someone clicks on it? How does one do that. Simple html, no java please. Thanks. I am trying to get the copyright symbol into my web pages. It works fine in the HTML program but in firefox it becomes a '?' and in ie it becomes a square. The method I tried was using '©'. Can anyone help me out? I feel really dumb asking so elementary a question, but ya' gotta start somewhere. I'm trying to format a blog site for my coworkers. It's been a few years since I have done any web work. Anyway, I wrote up a very simple little HTML doc, but when I open it in my browsers, I just see code. The code is below. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>BSGoad's Blog</title></head> <h2>Thoughts on the Day</h2> <body> <p align="center">Walking down the street today I met a man selling the <i>Spare Change</i> newspaper. I gave him a couple of bucks for a paper and, unprompted, he proceeded to tell me all that had happened with him in the past week. He had spent some time in New York with an old friend (maybe a relative, I'm not entirely sure), and had just returned to Boston. I was struck the immediacy of his comfort with me. He had nothing to hide. He had nothing of which to be ashamed. He just wanted someone with whom to share, who would listen. <br> Unfortunately, I was on the phone with my mom. I was hardly attentive. Not impolite, just distracted. Later I felt bad. I could have called mom back. I could talk with her anytime. instead I turned my ear back to my phone and bade the man a good day. I was reminded today of the prayer of St. Ignatius in dedication of the day:</p> <blockquote align="center"> Father, I dedicate this new day to you;<br> as I go about my work.<br> I ask you to bless those with whom I come in contact.<br> <p> Lord, I pray for all men and women<br> who work to earn their living;<br> give them satisfaction in what they do.<br> <p> Spirit of God,<br> comfort the unemployed and their families;<br> they are your children and my brothers and sisters.<br> I ask you to help them find work soon.<br> <p> - St. Ignatius Loyola </blockquote> </body> </html> There ya' go. What'm I doing wrong? Brandon goodness, been a couple months since ive done html, but im back and I got a question... So how do you put text in an image because I have a background color, and I have an image that's a different color, but I want to put text in the image, so how do i do that??? Thx 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> I'm sure this is simple but it's got me baffled! I am basically trying to put a link to a jpg in a text description box using the following code: <mg src="http://i310.photobucket.com/albums/kk437/timpotter_photos/Apex/The_Apex_Researcher_Fixed_2009.jpg"> however, for some reason when I go back to edit the text it is displayed as: <img src="http://i310.photobucket.com/albums/kk437/timpotter_photos/Apex/The_Apex_Researcher_Fixed_2009.jpg"> Is there a way of stopping the < and > characters from changing to < and > because at the moment the code is just appearing on the screen in the description rather than the picture I'm linking to! any help would be greatly appreciated!! I am trying to set up a mock business page, with an entrance page. http://www.freewebs.com/livingdaylig...p/entrance.htm The image on this page should be fully aligned to the right, without any space between it and the scrollbar, but I can't figure out how to do that. I works fine on firefox, but not on IE. I've tried setting the position to left:-1 and that works for IE, but stretches the page on Firefox, as well as setting the body & div margins to 0 which does nothing. Here's my coding: Code: <style>
body{scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #000000}
</style>
<div style="position:absolute;right:0;top:0"><a href="http://www.freewebs.com/livingdaylights/mockup/home.htm"><img src="http://i464.photobucket.com/albums/rr6/daylightsavings/AEONSECONDenter.jpg" border=0></a><div>
Does anyone have any suggestions? I'm used to aligning to the left and never had this problem before. Thank you! Experimenting as a newbie, I put the code below together. The images are in a folder named images. The first image "home" comes up OK and rolls over to home_on.gif OK as well. But the second images do not come up and their location is just a small blank square. Help would be appreciated. <HTML> <HEAD> <TITLE>Image Rollovers</TITLE> </HEAD> <BODY> <A HREF="index.html" onMouseOver="document.images['home'].src='images/home_on.gif'" onMouseOut="document.images['home'].src='images/home.gif'" <IMG SRC="images/home.gif" BORDER="0" NAME="home"></A> <A HREF="index.html" onMouseOver="document.images['link'].src='images/link_on.gif'" onMouseOut="document.images['link'].src='images/link.gif'"> <IMG SRC="images/link.gif" BORDER="0" NAME="link"> </A> </BODY> </HTML> Hello, I was wondering how I could move the cel text from a table to the top. I used: align="top" however this doesn't seems to work for me. sample: http://www.filemirrors.info/new2/ind...&search=Search As you can see I would like to display the search results on top of the page. (currently being displayed in the middle of the page) Can somebody advice me how to do this ? Thanks in advance I'm designing a simple web page for school, and am trying to figure out fix the background correctly. I have managed to set the background in one spot like this: http://www.w3schools.com/css/tryit.a...und-attachment but need to figure out how to wrap the text so it does not interfere with the background image because I have it aligned to the bottom left. I am using Front Page 2003. I can elaborate more if needed. Can anybody help? i am having some major thinking problems here and can't figure out how to get this page: HTML Code: <html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<script LANGUAGE="JavaScript">
function browser_check()
{
var name = navigator.appName;
var version = parseInt(navigator.appVersion);
go(name, version)
}
function go(name, version)
{
if(name == "Microsoft Internet Explorer" && version >=4)
{
location.href="ief.html"
}
else
{
location.href="ff.html"
}
}
</script>
<body onLoad="browser_check()"></body>
</html>
to work in the "main" frame in this so that the "main" frame is the only one that gets redirected: HTML Code: <html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Triumph's Website</title>
</head>
<body>
<frameset rows="1,*" framespacing="0" border="0" frameborder="0">
<frame name="banner" scrolling="no" noresize target="contents" src="blank.html">
<frameset cols="1,*">
<frame name="contents" target="main" src="blank.html">
<frame name="main">
</frameset>
<noframes>
<p>This page uses frames, but your browser doesn't support them.</p>
</noframes>
</frameset>
</body>
</html>
want this done so that it doesn't show the address changing in the address bar and also would like to NOT have any scroll bars and it work on both IE and FF. i have done this in the past just can't remember how i done this before. thanks in advance Hi, I would like to construct a table which has a unique link for each column. I am extremely new to HTML and other web technologies. I have tried to figure out if I can use colgroup and onClick="window.open('http://yahoo.com','_blank');" but I honestly have no idea what to do. Suggestions? Please and Thank you very much. Hi. In a table data I have four lines of text each line separated by a <br> The text are different font sizes. The issue I am having is that the lines have space between them above and below. How do I get the lines of text closer together using simple html? text line 1 | (this space) | text line 2 Regards |
|||||||