|
HTML - Trouble Keeping Elements Positioned.
I have a painting company and just recently took on the task of learning a little web design in order to try creating my own site. I initially thought I could just learn a little html and be off and working. After months and months of free time I'm still having trouble with something that to me should be basic... it probably is... the positioning of my elements.
I've completed the home page and have trouble with the position of nearly all my elements changing when the browser window is resized. The function of my page is dependent on these elements staying put. There are a couple elements that do stay put when the window is resized, which really throws me for a loop because as far as I can tell they are all positioned the same (css absolute). I designed the site using mozilla firefox, and this positioning problem seems so particular that even when another tab is opened the position of elements change (certain images). I don't see this happening in any other sites similar to mine, and is really nerve racking. Feel free to take a look at the code. To see the problem just resize the window to anything other than maximized. Making it even smaller will accentuate the problematic effects. Any suggestions are welcome, not on just the said problem, but anything about the site in general. The link is jduffpainting.com Thanks, and I hope this isn't something for the css forum! Similar TutorialsHow do I make element's change their height automatically depending on whether they have anything contained within them? My page background is a div's bg image but the div hasn't expanded to the size of the contained elements. The div's name is nicola-bg Here is the site I have the same problem too with #image-section. That div is styled to have large borders but the borders don't extend to the height of the div's containing elements. I am trying to make some code (see attachment) to look exactly like this page http://www.ultrapurecleanse.com/index.php. The attached code is the same as the source code of the URL, but it is not coming out the same in my html editor. There must be a way. For example, I am having difficulty getting the header to show up and the 5 bullet points on the top left to appear right on top of the big gray arrow as they should. Any help is really appreciated. Andrew Hi, I've been making a website but have only been testing it in Internet explorer, now I've tried opening it in Firefox and noticed alot of problems. When I open it in IE, there is about a 4-5mm gap at the top before the header appears andeverything is positioned fine because I have layed it out this way, but in Firefox the gap at the top doesnt exist and therefore everything is a few millimeters out of position (text, images etc). Is there anyway that I can get rid of this gap at the top of the IE page so that it looks the same? I have tried margin-top with no luck. CSS code: Code: /*This first piece of 'body' code defines what colour the background of the whole website is. It is set to #000000, I.E. black.*/
body
{
background: #000000;
color: white;
}
div#site
{
display: block;
color: #000000;
margin-top: -10px;
}
/*This header code sets the size and background image of the header section of the website. It sets the image to a picture I have created called
'header2', and the code also needs to link to the image as it's not in the same folder as the css/html files, so the code 'images/header2.gif'
finds the file 'header2.gif' in the sub-folder 'images'. */
#header
{
background: url(images/header2.gif);
width: 865px;
height: 143px;
}
/*This header .text section defines any text properties that will be used if I decide to add any text to the header area.*/
#header .text
{
position:relative;
top:42px;
left:322px;
word-spacing: 24px;
font-size: large;
}
/*The navbar2 section of code defines how the navigation bar is set out. The width is set at 70% so that the bar doesnt go all the way across the
screen. It is also center-aligned to make the page look neat.*/
div#navbar2 {
width: 70%;
border-top: solid #000 0px;
border-bottom: solid #000 0px;
background-image: url(images/button.gif);
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;
}
/*This code sets how the text should be layed out on the navigation bar. It has margins and padding to place it in the centre of the buttons.
It also sets the text colour to white.*/
div#navbar2 li a {
text-decoration: none;
margin: 20px;
padding: 7px 15px;
color: #FFFFFF;
}
div#navbar2 li a:visited {
color: #FFFFFF; /*This code is used so that when people click on the links, they stay white next time rather than changing colour.*/
}
div#navbar2 li a:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #FF00FF; /*This code causes a pink/purple box appear around the text when the cursor is hovered over it.*/
}
/*The content code sets the background image of the main section of the website, and defines where on the page it should be placed.*/
#content
{
background: url(images/content.gif);
width: 865px;
height: 534px;
margin-left: 0px;
margin-right: 0px;
float: left;
margin: 0px 187px;
}
#content_nobars
{
background: url(images/content_nobars.gif);
width: 865px;
height: 534px;
margin-left: 0px;
margin-right: 0px;
float: left;
margin: 0px 187px;
}
/*The content .title, .title2 and .title3 sections of code define where each title should be placed, what text size and colour it should be,
and also how wide/tall the text box is allowed to be.*/
#content .title
{
color: #CC66FF;
font-size:16px;
position:absolute;
text-align:left;
left:515px;
top:215px;
width:500px;
height:18px;
overflow:hidden; /*This 'overflow' command stops the text box from spreading all of the page if too much information is placed into it.*/
/*If any extra text is in an area and there is no more room, the page will just hide it from sight, therefore keeping tidiness.*/
}
#content .text
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:500px;
top: 255px;
width:500px;
height:80px;
overflow:hidden;
}
#content .title2
{
color: #CC66FF;
font-size:16px;
position:absolute;
text-align:left;
left:515px;
top:375px;
width:500px;
height:18px;
overflow:hidden;
}
#content .text2
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:500px;
top: 415px;
width:500px;
height:80px;
overflow:hidden;
}
#content .title3
{
color: #CC66FF;
font-size:16px;
position:absolute;
text-align:left;
left:515px;
top:541px;
width:500px;
height:18px;
overflow:hidden;
}
#content .text3
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:500px;
top: 580px;
width:500px;
height:80px;
overflow:hidden;
}
#content .read_more
{
color:black;
font-size:14px;
position:relative;
text-align:center;
left:355px;
top: 168px;
width:100px;
height:16px;
overflow:hidden;
}
#content .read_more2
{
color:black;
font-size:14px;
position:relative;
text-align:center;
left:355px;
top: 318px;
width:100px;
height:16px;
overflow:hidden;
}
#content .read_more3
{
color:black;
font-size:14px;
position:relative;
text-align:center;
left:355px;
top: 468px;
width:100px;
height:16px;
overflow:hidden;
}
#content_nobars .about_us_text
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:480px;
top: 425px;
width:550px;
height:250px;
overflow:auto;
}
#content_nobars .other_title
{
color: #000000;
font-size:24px;
text-decoration:underline;
position:absolute;
text-align:center;
left:510px;
top:200px;
width:500px;
height:30px;
overflow:hidden;
}
#content_nobars .other_text
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:480px;
top: 250px;
width:550px;
height:432px;
overflow:auto;
}
#content_nobars .about_us_picture
{
background: url(images/1.jpg);
width: 290px;
height: 175px;
position:relative;
left:130px;
top:50px;
}
/*The footer code defines the location of the footer image, and the size of it.*/
#footer
{
background: url(images/footer.gif);
width: 870px;
height: 105px;
}
/*These 2 commands keep URL links coloured black, before and after they have been visited.*/
a:link { color:black }
a:visited { color:black }
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--This head code defines the title that is displayed at the top of the screen on the Browser's bar. It also links the html document to the css file which will be used to create the layout and look of the website.--> <head> <title>Pampered Pooches Grooming</title> <link rel="stylesheet" type="text/css" href="pampered-pooches-grooming.css"> </head> <!--This code uses different div tags in conjuction with the css file, which will each be layed out according to individual needs.--> <body> <div id="site"> <div id="header"> </div> <div id="navbar2"> <ul> <!--This code creates a list of the navigational links to other pages of the website--> <li><a href="index.html">Home</a></li> <li><a href="aboutus.html ">About Us</a></li> <li><a href="services.html ">Services</a></li> <li><a href="theparlour.html ">The Parlour</a></li> <li><a href="dogofthemonth.html ">Dog of the Month</a></li> <li><a href="contactus.html ">Contact Us</a></li> </ul> </div> <div id="content"> <!--This footer code is placed at the bottom of all of the other code so that it appears at the bottom of the screen in the webpage.--> <div id="footer"> </div> </div> </body> </html> Thanks for any help. Thanks guys for your help with earlier problem. I have another site, with another problem that if you could help me with I will be so happy! http://www.debmehrtens.site90.com/ For some reason, I can not seem to reposition the menu drop down boxes to sit under the menu bar. I've tried all sorts of things and they just don't seem to move. The code I have used is - <div class="menu"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="index.html" class="active">HOME</a> </li> <li><a href="#" class="MenuBarItemSubmenu">CLUB INFO</a> <ul> <li><a href="#">Membership</a></li> <li><a href="#">Officers</a></li> <li><a href="history.html" title="MSLSC History">History</a></li> <li><a href="#">Life Members</a></li> </ul> </li> <li><a class="MenuBarItemSubmenu" href="#">LIFESAVING</a> <ul> <li><a class="MenuBarItemSubmenu" href="#">Patrol Times</a> <ul> <li><a href="#">Item 3.1.1</a></li> <li><a href="#">Item 3.1.2</a></li> </ul> </li> <li><a href="#">Roster</a></li> <li><a href="#">Courses</a></li> <li><a href="#">Training Calendar</a></li> </ul> </li> <li><a href="#" class="MenuBarItemSubmenu">NIPPERS</a> <ul> <li><a href="#">General Info</a></li> <li><a href="#">Child Protection</a></li> <li><a href="#">Contact Details</a></li> <li><a href="#">Newsletter</a></li> <li><a href="#">Handbook</a></li> <li><a href="#">Nipper Calendar</a></li> <li><a href="#">Carnival Calendar</a></li> </ul> </li> <li><a href="#" class="MenuBarItemSubmenu">SURFSPORTS</a> <ul> <li><a href="#">Carnival Calendar</a></li> </ul> </li> <li><a href="#">FORMS</a></li> <li><a href="MARCOOLA SURF LIFE SAVING GALLERY/index.html">GALLERY</a></li> <li><a href="contact.html" title="Contact Us">CONTACT US</a></li> </ul> </div> <div class="clr"></div> <div class="clr"></div> </div> I don't intend to leave the background transparent, was just trying something different, but if anyone can help get the positioning right for the drop downs, that would be fantastic! Thanks Hi! On a page I'm trying to accomplish the following: A border with a static width surrounding positioned elements (divs). Each element can vary in height and holds text, tables, images, etc. Problem: Is there any way to dynamically adjust the border height to the content? I don't want to use scripting. I have tried using a div with auto height, but it does not adjust to inner divs. I have tried using a table cell containing divs, breaks as soon as divs are positioned. Please help! See simplified example below. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>HTML</title> <style> .borderdiv{ position:relative; width:628px; margin-left: auto; margin-right: auto; background-color:white; height:300px; border-color:#CA3182; border-style:solid; border-width:1px; background-color:#EDFBFD; } .pinkdiv{ position:absolute; width:628px; height:64px; border:none; background-color:#F8D7DA; } .div1{ position:absolute; width:292px; height:29px; top:24px; left:10px; border-width: 1px; border-style: solid; } .div2{ position:absolute; width:200px; height:49px; top:10px; right:11px; text-align:right; border-width: 1px; border-style: solid; } .div3{ position:absolute; width:193px; height:200px; top:175px; right:23px; background-color:#EDFBFD; border-width: 1px; border-style: solid; } </style> </head> <body> <div class="borderdiv"> <div class="pinkdiv"></div> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3"> <table border="1"> <tr> <td><strong>Table</strong></td> <td><b>Dynamic text.</b><br>Amount of text may change here.<br><br>Pink outer border (borderdiv) should adjust to the content in this table!!!</td> </tr> </table> div3 </div> </div> </body> </html> I know this is technically a javascript question, but I am trying to create a javascript popup window, but everything I find and try doesn't seem to work for what I want to do. I want a pop-up window to open when I click a certain image button on my site, and not automatically when the site loads. I want the pop-up to be positioned at top left and for it to always stay above the parent window. I've tried the alwaysRaised functionas well as focus ones but no luck! Ta! Some example code would be much appreciated. Hi everyone! I want to include Google ads in My forums But I want them to to stay on the right of the page So, apart from the Google ads code, anyone knows the code which I put so that the banner stays at the right (I will put it in the Header file, I know that) I just need the code to make it expand on the irght with the page _______________________ Academy of Security hi guys i have 5 identical pages all same as the index except one div box in each that contains all the different content of each page. my question is how do i make a change to the index and the others update the same way?? i was thinking of somehing like frames? When I browse between pages on my website (well, and almost every website), the scrollbar goes to the top of the page by default. How can I make it so that it stays in the same place when switching pages? This is probably really simple but I can't seem to figure out how to do it. I don't understand in the html table below, when I increase the resolution higher than 1024 by 768, what suppose to be another image on my top left corner, that entire column widens, why is that? How can I keep it still where it doesn't move when increase the resolution, this is driving me crazzzzzzzy, can someone help me? Thanks... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0056)http://www.sharepointsample.com/stk/...nce/index.html --> <HTML><HEAD><TITLE>Home</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252" FP_GENERATED="TRUE"> <SCRIPT language=JavaScript FP_GENERATED="TRUE"> document.write('<ows:HTMLBase/>'); var strBinUrl="_vti_bin/"; </SCRIPT> <META http-equiv=Content-Language content=en-us> <META content="MSHTML 6.00.2900.2180" name=GENERATOR> <META content=FrontPage.Editor.Document name=ProgId> <META content="sharepoint-insurance 1110, default" name="Microsoft Theme"> <META content=none name="Microsoft Border"> <SCRIPT src="Home_files/owsredir.js" FP_GENERATED="TRUE"></SCRIPT> <SCRIPT language=JavaScript FP_GENERATED="TRUE"> RedirectToFrame("index%2ehtml","_vti_bin/owssvr.dll"); </SCRIPT> <SCRIPT src="Home_files/ows.js" FP_GENERATED="TRUE"></SCRIPT> <style type="text/css"> .style1 { border-collapse: collapse; font-family: "Century Gothic"; font-size: x-small; } .style3 { background-color: #2D1C84; } .style4 { background-color: #C0C0C0; } .style5 { background-color: #0066FF; } .style6 { background-color: #FFCC01; } .style8 { font-size: xx-small; text-align: right; font-family: Calibri; background-color: #8CBAFF; } BODY { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif } .section { FONT-WEIGHT: bold; FONT-SIZE: 0.8em; COLOR: #ffcc00; FONT-FAMILY: Arial, Helvetica, sans-serif } .LinksLight { FONT-SIZE: 10pt; COLOR: #ffffff; TEXT-DECORATION: none } A { TEXT-DECORATION: underline } .style12 { border: 1px solid #000000; border-collapse: collapse; font-family: "Californian FB"; font-size: x-small; color: #A0949A; } .style13 { background-image: url('ReadyVoice%20Site/images/bg_pg_blue.gif'); } .style14 { margin-top: 0px; } .style16 { color: #2D1C84; } .style17 { background-color: #000000; } </style> </HEAD> <BODY leftMargin=0 topMargin=0> <TABLE id=AutoNumber2 style="height: 99%;" cellSpacing=0 cellPadding=0 width="100%" class="style12"> <TBODY> <TR> <TD class="style17" style="height: 19px"></TD> <TD vAlign=top rowspan="3" style="width: 84%"><!--column 2--> <table style="width: 100%" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" class="style17"> </td> </tr> <tr> <td style="width: 494px"> <img alt="" src="Home2_files/IS-Main.gif" width="500" height="70"></td> <td class="style5"> </td> </tr> <tr> <td style="width: 494px" class="style4"> </td> <td class="style8"> </td> </tr> <tr> <td style="width: 494px" class="style6"> </td> <td class="style6"> </td> </tr> <tr> <td style="width: 494px"> </td> <td> </td> </tr> </table> <img alt="" src="Eldon%20-%20Global%20Site_files/footer.jpg" width="767" height="90"><br> <br> <table style="width: 100%" cellspacing="0" cellpadding="0"> <tr> <td style="height: 3px; width: 38px"> <img alt="" src="Home_files/arrow.gif" width="25" height="24"></td> <td class="style16" style="width: 386px; height: 3px"><strong>Top 5 Questions of the Month</strong></td> <td style="height: 3px"></td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 376px"> <img alt="" src="Eldon%20-%20Global%20Site_files/footer_bg.jpg" width="325" height="0"></td> <td style="width: 38px"> </td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 376px"> </td> <td style="width: 38px"> </td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 376px"> </td> <td style="width: 38px"> </td> <td style="width: 386px"> </td> <td> </td> </tr> </table> <br> <br> <table style="width: 100%" cellspacing="0" cellpadding="0"> <tr> <td style="width: 23px"> <img alt="" src="Home_files/arrow.gif" width="25" height="24"></td> <td class="style16" style="width: 364px"><strong>Weekly Maintenance </strong><span class="style1"><strong>Announcements</strong></span></td> <td style="width: 22px"> <img alt="" src="Home_files/arrow.gif" width="25" height="24"></td> <td class="style16" style="width: 386px"><strong>What's New</strong></td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 364px"> <img alt="" src="Eldon%20-%20Global%20Site_files/footer_bg.jpg" width="325" height="0"></td> <td style="width: 22px"> </td> <td style="width: 386px"> <img alt="" src="Eldon%20-%20Global%20Site_files/footer_bg.jpg" width="325" height="0"></td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 364px"> </td> <td style="width: 22px"> </td> <td style="width: 386px"> </td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 364px"> </td> <td style="width: 22px"> </td> <td style="width: 386px"> </td> <td> </td> </tr> </table> <br> <TD vAlign=top bgColor=#65aeef style="width: 35%" rowspan="3" class="style13"> </TD> <TR> <TD vAlign=top class="style4"> <img alt="" src="IS%20TEST/ISMain-Image.jpg" width="150" height="209" class="style14"></TD> <TR> <TD vAlign=top class="style3" style="width: 14%; height: 20%"><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </TD> <TR> <TD bgColor=#000000 colSpan=3> </TD></TR></TBODY></TABLE></BODY></HTML> Hello. I have a question. In order to put an applet in my web page, I have to link to my applet. This works great for normal people viewing my page, and they can use my applet just fine. However, I don't like the idea of people being able to look at the source code, get the link to the applet location, enter it into their browser, and then download my jar file because then they can hack into the jar, decompile, and steal my code (not that it is worth stealing, but still). How can I keep people from being able to download my jar file? My guess is to have the applet some kind of folder options that only allow web-server be able to access it if that is possible. I tried messing with the folder security settings but either the jar was still able to downloaded by entering the link in the browser, or the jar file wasn't able to be read by the web-server. Please help me out. Thank you. Hi there everyone. First time post here. I am trying to keep a footer at the bottom of my page. The problem is if I don't have enough content to fill up the whole page, the footer is not at the bottom of the screen. I am using tables for my format. My site: http://www.keystonestatistics.com/zzz.php Check the source. Thanks in advance for the help! Im new to HTML and web design, although I know a little bit about it, Ive never tried to make a website before. Ive been working on this for a little bit, taking several different ways of achieving the same goal. Ive nearly perfected the design, except for one major flaw, immediately obvious when you view the site. http://www.imagesbyjan.com/Images%20...jantables.html The error lies in the text. When you resize the window, the text changes shape to stay all there. Thats the exact opposite of what I want. When it resizes, it gets longer, and goes off the bottom of the white area of the portfolio. I want it to never change size like that, but rather stay just like an image, never changing size, only getting closer to the edges of the screen as to try and stay there. If it gets to the edge of the screen and cant adjust any farther without changing the text size, it should just stop changing and allow itself to go offscreen. If you have any explanations on how to do this short of making the text into an image, you can stop reading here, but if you want, you can continue reading for the code explanation. Its not a very clean code, so Ill try my best to make it easy to understand. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Images By Jan - Template</title>
<link href="style.css" rel="stylesheet"
type="text/css">
<style type="text/css">
.text { font-family: Bitstream Vera Serif;
font-size: medium;
line-height: normal;
color: rgb(0, 0, 0);
font-weight: normal;
font-style: normal;
text-align: left;
}
</style>
</head>
Basic setup of the page Code: <body style="background-image: url(images/background1.jpg);">
<div align="left">
<table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; height: 140px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="height: 140px;">
<td style="width: 30%;"></td>
<td style="width: 520px;">
<img style="position: relative; left: 2px; top: 0px;"
src="images/layout/logo.png"></td>
<td style="width: 30%;"></td>
</tr>
</tbody>
</table>
This is the first table. It holds the logo at the top of the screen. To keep the logo centered, there are 3 cells to the table. The left and right ones keep 30% of the distance of the edges of the window and the logo between them. Code: <table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; left: 0px; height: 40px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="">
<td style="width: 30%;">
</td>
<td style="width: 110px;" about.blank=""><img
style="border: 0px solid ; width: 110px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;"
src="images/layout/about.png">
</td>
<td style="width: 100px;"><a href="about.blank"><img
style="border: 0px solid ; width: 100px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;"
src="images/layout/gallery.png"></a>
</td>
<td style="width: 100px;"><img
style="border: 0px solid ; width: 100px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;"
src="images/layout/buttons_middle.png">
</td>
<td style="width: 94px;"><a href="about.blank"><img
style="border: 0px solid ; width: 94px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;"
src="images/layout/bio.png"></a>
</td>
<td style="width: 116px;"><a href="about.blank"><img
style="border: 0px solid ; width: 116px; height: 40px; z-index: 3; position: relative; left: 0px;"
src="images/layout/contact.png">
</a></td>
<td style="width: 30%;"></td>
</tr>
</tbody>
</table>
This is the second table. It holds the links bar. It works the same as the logo, but with 7 cells instead. (30% on left, "About" button, "Gallery" button, blank spot, "Bio" button, "Contact" button) Code: <table
style="border: 0pt none ; text-align: left; position: relative; top: -11px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="height: 1px;">
<td style="width: 30%;"></td>
<td style="width: 532px;">
<img
style="width: 500px; height: 1px; z-index: 4; position: relative; left: 0px; top: -6px;"
src="images/layout/black_line.png"></td>
<td style="width: 30%;"></td>
</tr>
</tbody>
</table>
This puts a small black line under the link bar. Just for style. Code: <table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; left: 0px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="">
<td style="width: 30%;">
</td>
<td style="width: 260px;" about.blank=""><img
style="border: 0px solid ; width: 260px; height: 800px; z-index: 3; position: relative; top: -6px; left: 0px;"
src="images/layout/white_left.png">
</td>
<td style="width: 260px;"><a href="about.blank"><img
style="border: 0px solid ; width: 260px; height: 800px; z-index: 3; position: relative; top: -6px; left: 0px;"
src="images/layout/white_right.png"></a>
</td>
<td style="width: 30%;">
</td>
</tr>
</tbody>
</table>
This table holds the main area of the white part of the page. I have no idea why the '" about.blank=""' is there. Code: <table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; left: 0px; height: 100px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="">
<td style="width: 30%;">
</td>
<td style="width: 260px;" about.blank=""><img
style="border: 0px solid ; width: 260px; height: 100px; z-index: 3; position: relative; top: -6px; left: 0px;"
src="images/layout/bottom_left.png">
</td>
<td style="width: 260px;"><a href="about.blank"><img
style="border: 0px solid ; width: 260px; height: 100px; z-index: 3; position: relative; top: -6px; left: 0px;"
src="images/layout/bottom_right.png"></a>
</td>
<td style="width: 30%;">
</td>
</tr>
</tbody>
</table>
The bottom part of the white area. Code: <br>
<div
style="position: relative; left: 0px; width: 100%; top: -881px; height: 851px; z-index: 5;">
<table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; height: 800px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="height: 800px;">
<td style="width: 30%;"></td>
<td style="width: 480px; position: relative; left: 30%;">
Jan
is one best known
portrait photographers in the
northern virginia area been
a professional photographer since
1976 for 30 years her
popular style of portraiture
has beautified numerous homes
offices she works extensivley
with business professionals families
children and pets.<br>
<br>
<br>
She is known for investing time with her
clients to understand their personal situation and their individual
style. She then structures the session to capture them in a
way that reflects their true self. This includes the use of
indoor and outdoor settings, formal and informal environments, and many
studio related props. She is gifted at bringing out the
unique inner beauty and personality of her client and capturing it for
all to enjoy.<br>
<br>
In her 30 year career Jan has seen the
technology change significantly and she continues to invest a great
deal of time and energy in being a leader in technology and photo
trends. It is important to remain abreast of how to combine
the latest technology with artistic mastery to create a photograph
people will want to look at for years to come.<br>
<br>
Jan's sensitive and unique style has won
her many awards and loyal clients. In addition to being a
talented photographer, she uses her profits and talents to support
several charities including:<br>
- Loudoun Symphony<br>
- Operation Smile<br>
- Time to Fly<br>
- and El Hogar Orphanage Hondouras<br>
According to her daughter who herself is a succsessful business owner,
"My mother sets a shining example for the business community in her
ethical business practices, commitment to quality products and service,
combined with a strong belief in suppoting the community through
charity.
</td>
<td style="width: 30%;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
This holds the text. Hello, I have this code: (The important part is in bold) Code:
<html>
<head>
<style type="text/css">
.navlink a:link {
font-family: Verdana, Geneva;
font-size : 80%;
font-weight : bold;
color: #000000;
background-color: white;
text-decoration : none;
margin: 5px;
padding: 5px;
border : 1px outset black;
display: block;
width: 150px;
text-align: center;
width: 142px
}
.navlink a:visited {
font-family: Verdana, Geneva;
font-size : 80%;
font-weight : bold;
color: #000000;
text-decoration : none;
padding: 5px;
margin: 5px;
border : 1px outset gray;
display: block;
width: 142px;
}
.navlink a:hover {
font-family: Verdana, Geneva;
font-size : 80%;
font-weight : bold;
color: #000000;
text-decoration : none;
padding: 5px;
margin: 5px;
border : 1px inset black;
display: block;
background-color : #99ccff;
width: 142px;
}
.center{text-align: center}
body{font-family: Verdana, Geneva;}
h1{font-weight: bold}
</style>
</head>
<body bgcolor="#4d4d4d">
<table style="position: absolute; top: 0px; width: 850px; margin: auto; border: 3px solid #000000; background-color: white">
<tr><td class="center">
<img src="logo.png"><img src="smiley.png" style="position:absolute; left:838px; top:6px"><hr>
<p style="position:absolute; left:842px; top:118px; font-size: x-small"> First time here? Click the smiley!</p>
<table width="150" border="0" bgcolor="white" class="navlink" style="border-type: solid">
<td class="center"><a href="index.htm">Home</a></td>
<td class="center"><a href="link1.htm">Cartoons</a></td>
<td class="center"><a href="link2.htm">Guestbook</a></td>
<td class="center"><a href="link2.htm">Contact Me</a></td>
</table>
<table style="margin: 6px; border: 1px; border-style: solid"><tr><td width="650px">
<h1>Site Released
</td></tr></table>
</tr></td>
</table>
</body>
</html>
Does anyone know how to keep the smiley face and the words "First time here? Click the smiley!" In one place while the window is resized. (Preferably without having to put them in the table.) I am having a real problem with keeping the text located at the top of the page right below the navigation. for some reason the text and photos just drop down the page in IE. No problem in Safari though. This seems to only be happening with images on the page. http://www.musicbridgesinternational.com please help I have no idea what the problem is here. thank you! Hi Again, On the website i am currently coding url= www.ycn-hosting.eu/newsite i have enabled the highlight of bottons. So when i drag over each button its changes color / effect. Well i am just wondering how to keep the highlight on the first navi when browsing on the second navi so people can see where they are. Could you also give ideas of improvments Much Thanks ! Hey all ! I'm looking to make some simple feature but i don't know how. What I'm trying to do is, making my button to preform some action and stay in the same URL. I'll explain: Suppose i have "main.html". In there i have a button, which is defined something like: <input type="submit" value="send"> and this button is under a form with action like: <Form action:"localhost:10000/SomeService/SomeMethod"> The problem is, that by clicking on Send, the URL changes to "localhost:10000/SomeService/SomeMethod" and i would like to see the result on main.html. The method "SomeMethod" returns a new "main.html" HTML generated page with its results and i get this page great, but i would like to keep it under the source URL. I hope i explained my self well Anyone knows about it? I don't know how to use JS (the code is in JAVA) so please try to help me in different ways (if there is any)... Thank you all! Greetings, I have a script that needs to load a ~250Mb file from an FTP server in order to function. During this 20+ minute process, the connection between the server and client is lost; is there a header I can use to make sure the connection does not timeout? Thank you and Godspeed! Hello, I am having a bit of a problem with a website I just started. I am currently on a resolution of 1280x1024 and I want it work for 1024x768. Well, I want it to work for any resolution, really. In fact, I noticed the problem exists when I go from maximizing the browser window to minimizing it. Here is what it looks like at 1280x1024 with the browser window maximized. Here is what it looks like at 1024x768 or when the browser window is less than maximized. See the problem? The two background images to either side of the banner image are lessening, as the resolution decreases or the browser window is decreases. Yet, the banner image remains unaffected. How can I make sure that the html is proportional to resolution, such that the background image on either side of the banner image remain unaffected in the manner in which they are currently? Thank you. Here is the HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Test</title> </head> <body> <table border="2"> <!-- table 1 --> <tbody> <tr> <td width="10%" style="BACKGROUND-IMAGE: url(pictures\BG.jpg)"><!-- col 1 --> </td> <td width="80%"><!-- col 2 --> <table border="4"> <!-- Table 2 --> <tbody> <tr> <td><img src="pictures/banner.jpg"> </td> </tr> <tr> <td>More stuff goes here</td> </tr> </tbody> </table> </td> <td width="10%" style="BACKGROUND-IMAGE: url(pictures\BG.jpg)"><!-- col 3 --> </td> </tr> </tbody> </table> <!-- table 1 --> </body> </html> Hiyas, well I am trying to make an html website, and I got two things I trie to add to my page. One is a shoutbox using direct link code, and in the preview it displays fine, and works fine. Another is a teamspeak launcher I made, just a link and an image. I align one to the right the other to the left, and that works. The problem is, that the one on the right is level with the bottom of the shoutbox on the left, whereas I want them to be a part of two side columns eventually, where they are both the same length etc, not all uneven. Here is my preview page: http://i116.photobucket.com/albums/o...Untitled-1.gif I hope you see what I mean. Please help me, as I need this website online ASAP cos me and my clan are going to some tournaments and seriously need this online. Thanks in advance, Ferinos |
|||||||