|
HTML - Centering 3 Items On Screen
Hi All,
I started doing a website that had a picture, then flash overlaid on top of the picture, then some text centered on the flash... the size of the picture and flash is 990px in width and 792px high, the reason i put a picture on screen 1st is the flash take a few minutes to load, so it looks good till the flash kicks in. Anyway it looks good on my 1024 x 768 monitor, some of my friends have widescreen and say they is a huge gap to the right.. so how can i center width only an image of 900 x 792 and then in the exact postion of the centered image place the flash, and then add some text on top of the flash once again centered on top of the flash... this if it can be done will leave a even gap to the left and right if on widescreen and be virtually full screen on a normal 1024 x 768 monitor. I tried absolute Code: <center><div style="position: absolute; top: 0px; "> the image </div></center> <center><div style="position: absolute; top: 0px; "> the flash </div></center> <center><div style="position: absolute; top: 100px; "> the text </div></center the image and flash and text had the right html to show, just used the above code to show what i tried... anyway it did not work right for some reason, im sure im going down the wrong path and they is a much better way to do this... Can anyone help me Thanks Similar TutorialsWhat would be the best way to center the items listed in the left column? Thank you. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.11 Transitional//EN">
<html><head>
<title>test</title>
<script src="java.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="styles.css">
<style type="text/css">
.test{background-color:#ffdead;}
#header {
width: 830px;
margin-left: auto;
margin-right: auto;
margin-top: -15px;
background-color: #ffdead;
}
#header_table {
width: 75%;
border-collapse: collapse;
border: solid 1px;
border-color: #b7b7b7;
}
.header_bar {
padding: 0px;
margin: 0px;
border-bottom-style: solid;
border-bottom-width: 10px;
border-bottom-color: #b7b7b7;
background-color: #800000;
width: 150px;
border-collapse: collapse;
border-right-width: 0px;
border-left-width: 0px;
}
.header_body {
padding: 0px;
margin: 0px;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #b7b7b7;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #b7b7b7;
}
</style>
</head>
<body bgcolor="#ffffff">
<table id="header_table" align='center' cellpadding='0' cellspacing='0'>
<tr>
<td class="header_bar" colspan='2'> </td>
</tr>
<tr>
<td align='center' colspan='2'>
<img src="imgi/img11.jpg" height="134" width="461">
<img src="imgi/topimg2.jpg" height="160" width="309">
</td>
</tr>
<tr>
<td class='header_body' valign='top' width="200">
<form action="login.asp" method="post">
<table width="100%" height="100%" align='center' cellpadding="0" cellspacing="0" border="0" >
<tr><td valign="top" class='header_bar' colspan='2'> </td></tr>
<tr>
<!-- SIDE MENU -->
<% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %>
<!-- MENU FOR LOGGED MEMBER ONLY -->
<td colspan="2"><br><br>Welcome <i><%'=Session("PMMS_NAME")%></i><br /><br /></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="profile.asp">My Profile</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="_purchase.asp">Purchase</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="newsletter.asp">Newsletters</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="members.asp">Member List</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="members_by_group.asp">Group Member List</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="file_cate.asp">File Repository</a></td>
</tr><tr>
<td width="15">º</td>
<td><a href="login.asp?logout=True">Log Out</a></td>
</tr>
<!-- [ MENU FOR LOGGED MEMBER ONLY ] -->
<% Else ' IF NOT LOGGED IN THEN SHOW THE LOGIN FORM%>
<!-- INCLUDE LOGIN FORM -->
<br><br><td colspan='2'><br><br>Username:<center><br /><input class="textbox" type="Text" name="username" value="<%=Trim(Request.Cookies("USERNAME"))%>" maxlength="25" size="20" /></td>
</tr><tr>
<td colspan='2'><br>Password:<center><br /><input class="textbox" type="Password" name="password" value="" maxlength="25" size="20" /></td>
</tr><tr>
<td>
<br><input type="Checkbox" name="rem" value="1"<%If NOT Trim(Request.Cookies("USERNAME")) = "" Then%> checked<%End If%> />Save Username<br />
<input style="width: 50%;" type="Submit" value="Login Now" /><br /><br /><a href="reminder.asp">Password Reminder</a>
</td>
</tr>
<tr>
<td>
<br />
<input type="Hidden" name="mode" value="login" /><input type="Hidden" name="ref_page" value="<% If Len(Trim(Request.QueryString("ref_page"))) = 0 Then%><%=Request.ServerVariables("URL") & "?" & Request.QueryString%><%Else%><%=Request.QueryString("ref_page")%><%End If%>" />
<!-- [ INCLUDE LOGIN FORM ] -->
<% End If %>
</td>
</tr>
<tr>
<td>
<br /><br />
<img src="img/linkimg1.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="index.asp"> HOME</a><br /><br>
<img src="img/linkimg3.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> FAQ</a><br /><br>
<% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %>
<img src="img/_example/arrow_gray_top_inverse_b.gif" width="15" height="14" alt="" border="0" /><a class="MainMenuLNKExample" href="login.asp?logout=True">LOG OUT</a>
<% Else %>
<img src="img/linkimg2.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> REGISTER</a><br /><br>
<% End If %>
<img src="img/linkimg4.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> TERMS OF USE</a><br /><br>
<img src="img/linkimg5.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> CONTACT US</a><br /><br />
</a>
<!-- [ SIDE MENU ] -->
<br /><br />
</td>
</tr>
</table>
</form>
</td>
<td class='header_body'>
<!-- MAIN PAGE CONTENT -->
Hi All, I have a problem with centering a page to the screen on a new site. The page is 945px wide, and is fine in IE. But in both Firefox and Safari the page is moved to the left of the screen. Does anyone have an idea of what I have done wrong here? Here is a link to the page:- Website Hi Guys, I dont know if i am over thinking this, or just been dumb! But I want to position a flash object file in a div to the the center of my screen. However heres the catch, my flash file is 1900 pixels wide, and of course a screen can be anything wide. I can get CSS background images for divs ok, but not objects like a flash movies. So assuming my screen is 1600 wide, the user would see the center of my 1900 wide flash file with 150 pixels missing on the left aand right. For some reason, maybe i am tired, but i can not get it working or get my head into gear today. thanks for any input! Oh and heres an image of my problem to help explain it http://i44.tinypic.com/33p9e0l.jpg Hi All, I need to have a wide (1984px) image centred on the screen. If the screen is only 1024px wide it always aligns left. I am probably missing something basic here but can anyone offer advice? Thankyou. Guys, hopefully someone can give me a hand here. bear with me, Im a newbie to html yet Im an intermediate/advanced flash programmer. I learned flash but never learned html the right way and am struggling to make html entrance pages for my flash sites.. I know its usually the other way around. i learned flash first. ok, I have a website I made which is opened in a fixed window. the html index page says "enter here" and that button opens the fixed size window. that works fine. The problem is Im trying to learn the html and whenever i have an image on this index page, ( some graphics and the "enter here" button) it may look centered @ 1024 x768 but at a higher resolution ( 1280 x 1024) it will appear on the top left of the screen. I have been tinkering with dreamweaver but im really confused. I keep seeing all of these sites where everything looks aligned regarless of the screen setting. Im not sure if I should use tables , divs or whatever. i have my website logo as a jpg and some other graphics, and im not sure how to put it into the page so it always looks appropriate no matter what screen setting you are on. There is a company that makes nice websites and their entrance pages are always good. I am gonna attach the url of one of these. I notice that they always use divs, a LOT. Is thsi the right approach? and can someone look at the example and tell me how they are doing it? i dont put the url in the post becuase I do want google or other engines indexing the url to this post (for privacy) Thanks a lot url.zip I placed all my adsense ads into iFrames but when I resize the window small all the ads are pushed to the middle of the screen. How can I make them stay put. I tried working with divs too but it makes the ads the highest layer and it makes an invisible border stretching across the screen and I cant click anything thats in that border range. heres some of my code: <html> <head> <link rel="stylesheet" type="text/css" href="style2.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <center> <head> <title>BIO</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> </tr> </table> <!-- End ImageReady Slices --> <iframe src="/adsense.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:1173;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense2.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:-92;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense3.htm" width="728px" height="90px" frameborder="0" style="position:relative;Left:50;bottom:518" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense4.htm" width="336px" height="280px" frameborder="0" style="position:relative;Left:195;bottom:1560" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> </body> </center> </html> I see the use of the <ul> and <li> tags when creating things like menus and in the case of digg and gamegrep at the least, comments. I can see a possible use with comments for indentatiing replies to other comments. The question still stands for things like menus though, does it have to do with search engine crawlers and how they parse the page? Any insight by anyone who knows anything about this would be nice. Thanks Hi: Enviro: IE 7 (for now) My list items (i.e., <li>) are too close together, *but* if I put a line-break at the end of each item, they are too far apart. I tried using CSS with a margin setting to get some separation but that didn't work either. So, how does one get some afjustable separation between list items please ? Thanks, -Mel Smith Hi, I'm new to this forum and could use some help. I created a website in iweb and I'm having an issue with items moving on the page. The website is VoiceFromHevin.com, not necessarily the welcome page, but the pages after that. So here is the backstory: When I first published my site I had problems with items moving around on the page when you shrank your browser window. The background would stay center while other images and text would move left. So, to combat that problem I changed two lines of code. <body style="background: rgb(255, 255, 255) url(About_files/background%20Test%202%20cropped%20longer.jpg) no-repeat scroll center top; margin: 0pt; " onload="onPageLoad();"> I changed part of the line of code from "no-repeat scoll center center;" to "no-repeat scroll center top;" I then change one more line of code which was: <div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: transparent; text-align: left; width: 980px; " id="body_content"> and made these changes to it: <div style="margin-bottom: 0px; margin-left: -512px; margin-top: 0px; overflow: hidden; position: absolute; left: 50%; word-wrap: break-word; background: transparent; text-align: left; width: 1024px; " id="body_content"> However, if you notice the pages, the three blue logos have moved off of the cloud image (they should be resting on the cloud). And also the footer links at the bottom have moved. Is there a way to move those items back to where they should be? Any help would be much appreciated! Thanks! Hi to you all, I am trying to write script to search an xml form and return any of the correct responses. The form is here http://bubbleweb.eu/Rentals/search.html and it is using: http://bubbleweb.eu/Rentals/index.xml http://bubbleweb.eu/Rentals/searchindex.js I want the customer to be able to search for a 'property ref', or if they don't have one to leave that field blank, and for the relevant item(s) to be returned. So if I search 'Bur1001' its returning that item, but if I leave it blank its returning all 4 items. That's all good, that is working fine! However, I want the form to be able to search other fields like 'short term', 'area' and 'bedrooms' etc, so if they leave the 'ref' field blank but 'short term' is selected then i ONLY want the 'short term' items to be returned. Does anybody know how I can achieve this? Thanks in advance for your time! Hi, how can I rearrange items by name or genre? I want to make a sort of collection for a few movies, with information about actors and so on. I have the information for each movie in a div tag. What do I have to do so that when I click, let's say on name, it lists the movies alphabetically? Is there any solution for this? Or generally how would you do this? Thank you. I am developing C# web application in which it contains a htm page. This Htm page contains a menu file. under file there are two items save and exit. I added the menu and items in the menu. what i need is how can i add the icons beside the items of the menu. Any one please Help. Thanks in advance. Hi Folks, I'm a newbi and just learning. Does anyone know if there is a tag or an object that would allow me to enter the same short list of items on several pages and be able to change the list on all the pages by changing it on one page? In other words if I change the list items on say a master page, it changes the list on all other pages where the same items are listed? Thanks for your help. Joel Hi, I know this is being an extreme perfectionist. But, if you look at http://www.tendervendors.com/dev/hr_systems.html, at the selected link on the navigation bar (HR Systems), you'll see that there are 2 lines either side of the HR Systems (selected) link. This is fine, however because the bottom border is on the other links and not the selected one, and the two side borders are on the selected link, the don't line up. I'm aware that i could specify the right border on the 1st link and the left border on the 3rd link, but i was trying to make it simple, so someone without alot of understanding and program it after i've done. So, i then thought, well i could overlap the links, 2px to the left, so set li { position:relative }, and then li {left:-2px}. but it doesn't overlap the li's, it overlaps the entire ul over the page (content div) border. Any ideas as to why this is? Thanks, Matthew Millar I want to have two bulleted items on one line, but can't seem to accomplish it. I tried... <ul><li type=circle>item1</li> <li type=circle>item2</li></ul> Would there be an easy way to do this? I'm having trouble adding a line break between my form items. I've tried all the obvious solutions and nothing is working; either the breaks appear about the forms and below the text, or the form itself is moved to halfway across the page. I've tried using <br> tags and I've tried <tr> <td colspan="2"> <br> </td> <tr> and many variations, but none do what I what. Here's my code: Page Content goes here. <BR><BR><BR> <form id="form1" name="form1" method="post" action="http://www.usa-7.com/scripts/shared/refmlr"> <input name="destEmail" value="emailaddressgoeshere" type="hidden"/> <input name="reqType" value="Contact Us" type="hidden" /> <input name="numReqParms" value="5" type="hidden" /> <script src="validate.js"></script> <style> input.invalid {background: #ff0000;} input.valid [background: #afa; } </style> <table height="200" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> First Name: </td> <td><input name="First Name" size="30" maxlength="55" type="text" /></td> </tr> <tr> <td> Last Name: </td> <td><input name="Last Name" size="30" maxlength="55" type="text" /></td> </tr> <tr> <td> Email Address: </td> <td><input name="Email" size="30" maxlength="200" type="text" /></td> </tr> <tr> <td> Phone Number: </td> <td><input name="Phone" size="30" maxlength="35" type="text" /></td> </tr> <tr> <td> Comments: </td> <td><textarea name="Comments" cols="50" rows="8"></textarea></td> </tr> </tbody> </table> any help would be great. Thanks! Hi every one I have a quick question. I'm building and interface this is make of unordered list items. Those list items are contained in a span so that interface can have separate look for the other links on the page. But when I validate my page in Dreamweaver I get some page errors that. Here is the error: The tag:"span" is not allowed within: "ul" It is only allowed within: a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6. . ..[XHTML 1.0 strict] Now here is the code in question: HTML Code: <ul id="nav">
<span class="left_links">
<li class="nav_items_00"><a href="index.html">Home</a></li>
<li class="nav_items_00"><a href="services.html">Services</a></li>
<li class="nav_items_00"><a href="gallery.html">Gallery</a></li>
<li class="nav_items_00"><a href="events.html">Events</a></li>
<li class="nav_items_00"><a href="http://hsgsphoto.wordpress.com/" target="_blank">Blog</a></li>
<li class="nav_items_00"><a href="about.html">About</a></li>
</span>
The page that you can see this code in action is located at: http://www.hsgsphoto.com I guess my question is what would be the best practice in this situation. I need the a way to tell this group of links to act different then links in other parts of the page but the error I'm getting in validation is that list items (li) tags are not to be used within a span. Thank you so much for any feed back and help John Hi there, I was wondering if it's good practice to put <li> tags inside table cells. Normally, I would just put the list items in their own div container without the table, but for specific design reasons, I need to separate the list items in their own table data cells. This is how I'm currently doing it: Code: <div id="container"> <ul> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><h2>List Header</h2></td> </tr> <tr> <td height="29"><li><a href="itemone.html">Item One</a></li></td> </tr> <tr> <td height="29"><li><a href="itemtwo.html">Item Two</a></li></td> </tr> <tr> <td height="29"><li><a href="itemthree.html">Item Three</a></li></td> </tr> <tr> </table> </ul> </div> Notice that the H2 header isn't actually a list item but is still within the <ul> tags. Is any of this confusing or incorrect for google indexing? Hi, I would like to know how to add/remove items from listbox PERMANENTLY. Sad to say, all I have found are adding/removing items temporarily. Code: <!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>
<script language="javascript" type="text/javascript" >
function addOption(selectbox,text,value )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
function addOption_list(selectbox)
{
addOption(document.drop_list.SubCat, "One","One");
addOption(document.drop_list.SubCat, "Two","Two");
addOption(document.drop_list.SubCat, "Three","Three");
addOption(document.drop_list.SubCat, "Four","Four");
addOption(document.drop_list.SubCat, "Five","Five");
addOption(document.drop_list.SubCat, "Six","Six");
}
function removeOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
if(selectbox.options[i].selected)
selectbox.remove(i);
}
}
</script>
</head>
<body onload="addOption_list()";>
<form name="drop_list" action="default.aspx" method="post" >
<select id="SubCat" name="SubCat" MULTIPLE size="6" width="10"></select>
<input type="button" onclick="removeOptions(SubCat)"; value='Remove Selected' />
<input type="button" onclick="addOption_list()"; value='Add All' />
</form>
</body>
</html>
Please advise me on the problem. |
|||||||