|
HTML - Help With Center Aligning
Dear readers,
I am working on the Schools web page and I require some help. I have created a 'navagational menu bar' and i am having trouble aligning it in the center of the page no matter what the resolution of the screen is. Here is the coding: Code: <DIV ID="MainMenu">
<div id="MenuMain">
<!--Main Buttons -->
<div id="menu">
<a href="general/psmenu.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_0', 'Menu_0',0,28,'ParentsStudents');"><img src="images/schoolmenu.png" alt="Festus School" border="0" /></a><a href="general/employeemenu.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_1', 'Menu_1',0,28,'Employees');"><img src="images/aboutmenu.png" alt="About FHS" border="0" /></a><a href="schools/index.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_2', 'Menu_2',0,28,'Schools');"><img src="images/psmenu.png" alt="Parents & Students" border="0" /></a><a href="depts/index.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_3', 'Menu_3',0,28,'Departments');"><img src="images/facultymenu.png" alt="Faculty" border="0" /></a><a href="publications/index.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_4', 'Menu_4',0,28,'Publications');"><img src="images/curricularmenu.png" alt="Extra-Curricular" border="0" /></a><a href="board/index.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_5', 'Menu_5',0,28,'Board');"><img src="images/newsmenu.png" alt="News" border="0" /></a>
</div>
Here is the CSS: Code: #MenuMain {
/* The master div to make sure that our popup menus get aligned correctly. Be careful when playing with this one. */
position:relative;
margin:0px;
text-align:left;
width: 100%;
}
#MenuContainer_0 {
/* This ID is related to the master menu div for menu MenuContainer_0 and contains the important positioning information for the menu as a whole */
position:absolute;
left:500px;
top:45px;
z-index:300;
visibility: visible;
}
#Menu_0 {
/* This class defines things about menu Menu_0's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:#FFCC33;
border:1px solid #FFCC33;
width:158px;
height:111px;
}
One mo Code: BODY {
BACKGROUND:#FFCC33;
COLOR:#000000;
FONT-FAMILY:SANS-SERIF
FONT-STYLE:Arial;
FONT-SIZE:12;
}
A:LINK {
COLOR:#EB3914;
text-decoration:NONE;
}
A:VISITED {
COLOR:#EB3914;
text-decoration:ITALICIZED;
}
A:HOVER {
COLOR:#000000;
text-decoration:underlined;
}
A:ACTIVE {
COLOR:#000000;
}
.BORDER {
BORDER:1PX SOLID BLACK;
BACKGROUND:#FFBB33;
COLOR:#000000;
}
.YELLOW {
BACKGROUND:#FFCC33;
}
.MainMenu {
margin:auto;
width:800px;
}
ANY help in this matter would be most appreciated. P.S. There was more coding but I got yelled at saying it was too long. Sincerely, -gamesfreke Similar TutorialsHi Everyone Im new to this, and trying to build a website to show my artwork for college. Its a requirement for my degree course in London and I have been trying for ages to centre align a fade in/fade out image with code I found. I don't know if this the correct way of showing my code which you all probably understand way better than me, but I'll paste it below. Also the link where the page is online at the moment is here, It kind of aligns centre in Safari but not on an iPad or in Firefox etc. http://dl.dropbox.com/u/30918322/NEW...%20SITE/1.html Your help would be really greatly appreciated! Many Thanks Alex Wood HTML 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>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
<title>Alex J Wood</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
// use this to pull the divs in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
// uncomment below to pull the divs randomly
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<style type="text/css">
/*** set the width and height to match your images **/
#slideshow {
position:relative;
height:400px;
font-family: Arial, Sans-serif, sans;
}
#slideshow DIV {
position:absolute;
top:0px;
left:3px;
z-index:8;
opacity:0.0;
height: 400px;
background-color: #FFF;
}
#slideshow DIV.active {
z-index:10;
opacity:1.0;
text-align: center;
}
#slideshow DIV.last-active {
z-index:9;
}
#slideshow DIV IMG {
height: 350px;
display: block;
border: 0;
margin-bottom: 10px;
}
.hh {
font-family: "American Typewriter";
font-size: 18px;
}
.klk {
font-family: "American Typewriter";
}
.klkggh {
font-size: 28px;
color: #900;
}
a:link {
color: #900;
text-decoration: none;
}
a:visited {
color: #900;
text-decoration: none;
}
a:hover {
color: #900;
text-decoration: underline;
}
a:active {
color: #900;
text-decoration: none;
font-size: 36px;
}
.rtrt {
color: #006;
}
.fgfgg {
text-align: center;
position: absolute;
}
</style>
</head>
<body style="color: #006; font-style: normal; font-size: 36px; font-family: 'American Typewriter'; text-align: center;">
<!-- this will work with any number of images -->
<!-- set the active class on whichever image you want to show up as the default
(otherwise this will be the last image) -->
<p class="klk">Alex J Wood</p>
<p class="klk"><span class="klkggh"><a href="index.html">ENTER SITE</a></span></p>
<table width="44%" border="0" align="center">
<tr>
<th width="25%" scope="col"> </th>
<th width="16%" scope="col"><div id="slideshow">
<center>
<div class="active"> <a href="index.html"><img src="image1.jpg" alt="Not A Nugget" align="middle" /></a> <span class="hh">Not A Nugget |2012</span></div>
<div> <a href="index.html"><img src="image2.jpg" alt="Not A Nugget" /></a> </div>
</center>
</div></th>
<th width="59%" scope="col"> </th>
</tr>
</table>
<center>
<div align="justify"></div>
</center>
<p><a href="index.html" class="rtrt">[url]www.Alex[/url] J Wood.co.uk</a></p>
<p> </p>
</body>
</html>
hello, i've placed an image gallery to my website . i am unable to align it to the center, Hello, I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it? I started with code something like <div align="center"> <ul type="disc"> <li>Wine</li> <li>Women</li> <li>Song</li> </ul> </div> This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed. I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way? I have a HTML file with two pictures on. They are like title lines. I need the one to be pushed right up to the top-left, and the other one to strech all the way across. I have a screenshot: http://img80.imageshack.us/img80/6827/screenshotjs.png Have a look. The lines are two pictures, they are split close to the middle. Hey, im not too experienced with web design but me and a friend decided to go on an wing and try and make a flash game web page. Everything been going great till i tried adding a add to the top left of the page. Only thing i could do is set an absolute value to the div but it dose not look right in smaller resolutions. Example script: <div style="text-align: left; position: absolute;"> <!-- Begin BidVertiser code --> <script language="JavaScript1.1" src="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=141137&bid=341700" type="text/javascript"></script> <noscript><a href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">internet advertising</a></noscript> <!-- End BidVertiser code --> </div> <div style="text-align: center;"><a href="http://pinkkittens.org/"><img alt="Banner" src="http://pinkkittens.org/images/pinkkittenbannernew.png" style="border: 0px solid ; width: 815px; height: 121px;" align="top"></a></div> <div id="flashcontent" style="text-align: center;"></div> <script type="text/javascript">var so = new SWFObject("http://pinkkittens.org/upward.swf","upward","815","35","8","#FF88B8"); so.addParam("allowScriptAccess","always"); so.write("flashcontent");</script> I want the banner in the middle...the navigation bar right under it and also the ad on the far left...but could only achieve this with a absolute value...any pointers? Web address for better viewing pleasure is http://www.pinkkittens.org/ I have a form i am creating for a widget to put on my website but for some reason it does not align all the way to the left instead it is off center. How do i put it to the far left? And then there is a random box that appears in the top, how do I remov this? Thank you HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<input>
</head>
<body>
<form id="form1"
action="https://app.realeflow.com//api/contactSubmit.aspx?id=35151&type=1&ar=30178"
method="post" name="form1">
<script type="text/javascript">// <![CDATA[
function numbersonly(myfield, e, dec) { var key; var keychar; if (window.event) key = window.event.keyCode; else if (e) key = e.which; else return true; keychar = String.fromCharCode(key); if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27)) return true; else if ((("0123456789").indexOf(keychar) > -1)) return true; else if (dec && (keychar == ".")) { myfield.form.elements[dec].focus(); return false; } else return false; }
// ]]></script>
<div id="seller_opt" class="optin"
style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 0pt; WIDTH: 477px; PADDING-RIGHT: 0pt; BACKGROUND: url(http://www.ibuyhousesinsanantonio.com/wp-content/uploads/2012/01/Untitled.png) no-repeat 0pt 50%; HEIGHT: 481px; PADDING-TOP: 55px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial">
<p class="text"
style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Name:</p>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input id="SellerWizard_ownerName"
style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
2px; font-size-adjust: none; font-stretch: normal" name="SellerWizard$ownerName" maxlength="100">
</div>
<p class="text"
style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >E-mail
Address:</p>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input id="SellerWizard$ownerEmail"
style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
2px;
font-size-adjust: none; font-stretch:
normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerEmail" maxlength="100">
</div>
<p class="text"
style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Zip
Code:</p>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input id="SellerWizard$ownerZip"
style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
2px; font-size-adjust:
none; font-stretch: normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerZip" maxlength="15">
</div>
<p class="text"
style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Mobile
Phone*:</p>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input id="SellerWizard$ownerMobilePhone"
style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px 0px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
2px; font-size-adjust: none;
font-stretch: normal"
onkeypress="return numbersonly(this, event)" name="SellerWizard$ownerMobilePhone" maxlength="25">
</div>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input
id="SellerWizard_FinishNavigationTemplateContainerID_FinishButton"
class="submit" style="MARGIN: 0pt 0pt 0pt 25px"
onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("SellerWizard$FinishNavigationTemplateContainerID$FinishButton", "", true, "", "", false, false))'
name="SellerWizard$FinishNavigationTemplateContainerID$FinishButton"
value="Finish"
src="http://api.ning.com/files/2FjYylCa-7----tgtm1C84N-wASg37E3PmRpOeW5GET9uz4-SqDzfp9Xn7pslOJrglrucDsLut3pJXluZymZKd-mGJj0vi26/submitbutton.jpg"
type="image"><br>
*Optional
</div>
</div>
</form>
<br>
</body>
</html>
You can see where it doesnt align on the website and another view of it not being where it is suppose to be in an html editor, thanks for any help! So I'm working on a <dl> and using this bit of code as an example: <style type="text/css">dl{ border: 3px double #ccc; padding: 0.5em; } dt { float: left; clear: left; width: 100px; text-align: right; font-weight: bold; color: green; background-color:yellow;} dt:after { content: ":"; } dd { margin: 0 0 0 110px; padding: 0 0 0.5em 0; } </style> <dl> <dt>first item</dt> <dd>definition for first item in list</dd> <dt>second item</dt> <dd>definition for second item in list<br> extending across more than one line</dd> <dt>third item</dt> <dd>definition for third item in list</dd> </dl> That bit works exactly like you'd expect it to. However, when I apply it to my own list I run into a problem and i can't see the problem. Here's the link to my page: http://site.outletpccomputerrepair.c...opups/test.htm whenever I have a second line of <dd>, the alignment messes up. I can't see what to do in order to get the <dd> elements to align properly whenever there's a second line. Please help! How would i go about aligning everything on a page so instead of starting on the very left of the page, it starts X amount of pixels away from the side? Also how can i adjust the space between each line of text? Make it a bit wider or smaller..etc Please can someone help me with html code to align boxes in code below. Boxes are all out of line at the moment. I have read that it is best to create a table, however I am really new to html and not sure how to do that. Thank you James HTML Code: <fieldset> <br> <div> <input type="hidden" name="sexuality" value="1"> </div> <div> <label>I'm a:</label> <select name="gender"> <option value="1" selected>man looking for a woman</option> <option value="2">woman looking for a man</option> </select> </div> <div> <br> <label>First name:</label> <input name="firstname" type="text"> </div> <div> <br> <label>D.O.B.:</label> <select name="dobday"> <option value="">Day</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <select name="dobmonth"> <option value="">Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <select name="dobyear"> <option value="">Year</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1979">1979</option> <option value="1978">1978</option> <option value="1977">1977</option> <option value="1976">1976</option> <option value="1975">1975</option> <option value="1974">1974</option> <option value="1973">1973</option> <option value="1972">1972</option> <option value="1971">1971</option> <option value="1970">1970</option> <option value="1969">1969</option> <option value="1968">1968</option> <option value="1967">1967</option> <option value="1966">1966</option> <option value="1965">1965</option> <option value="1964">1964</option> <option value="1963">1963</option> <option value="1962">1962</option> <option value="1961">1961</option> <option value="1960">1960</option> <option value="1959">1959</option> <option value="1958">1958</option> <option value="1957">1957</option> <option value="1956">1956</option> <option value="1955">1955</option> <option value="1954">1954</option> <option value="1953">1953</option> <option value="1952">1952</option> <option value="1951">1951</option> <option value="1950">1950</option> <option value="1949">1949</option> <option value="1948">1948</option> <option value="1947">1947</option> <option value="1946">1946</option> <option value="1945">1945</option> <option value="1944">1944</option> <option value="1943">1943</option> <option value="1942">1942</option> <option value="1941">1941</option> <option value="1940">1940</option> <option value="1939">1939</option> <option value="1938">1938</option> <option value="1937">1937</option> <option value="1936">1936</option> <option value="1935">1935</option> <option value="1934">1934</option> <option value="1933">1933</option> <option value="1932">1932</option> <option value="1931">1931</option> <option value="1930">1930</option> <option value="1929">1929</option> <option value="1928">1928</option> <option value="1927">1927</option> <option value="1926">1926</option> <option value="1925">1925</option> <option value="1924">1924</option> <option value="1923">1923</option> <option value="1922">1922</option> <option value="1921">1921</option> <option value="1920">1920</option> <option value="1919">1919</option> <option value="1918">1918</option> <option value="1917">1917</option> <option value="1916">1916</option> <option value="1915">1915</option> <option value="1914">1914</option> <option value="1913">1913</option> <option value="1912">1912</option> <option value="1911">1911</option> <option value="1910">1910</option> <option value="1909">1909</option> </select> </div> <div> <br> <label>Email:</label> <input name="email" type="text"> </div> <div> <br> <label>Password:</label> <input name="password" type="password" value=""> </div> <div> Gah, I've been sitting here trying to do this for hours and my head is utterly boggled! This is the kind of thing I want, I've tried aligning the text within the table to the bottom and then wrapping it around the image but obviously I'm just a huge, epic failure. Eck. (I don't know if you can catch the longshore-drift of my beautiful art--oh, how I kid you --but the black box represents an image and the lines are text!) Any help would be much appreciated! Thanks lovelies. Im trying to get the two items in this table aligned. One is suppose to be on the left side of the screen, the other on the right side but I cant get it to work. What am I doing wrong? <table> <tr> <td align="left"> <p>Im suppose to be on the left side of the screen</p> </td> <td align="right"> <p>Im suppose to be on the right side of the screen</p> </td> </tr> </table> Hello all! After editing my 26 pages to a new format, i saw that some buttons isn't correct in either IE and/or Firefox. Below you see an example of what i mean. Click on it to view Full resolution I heard something about that Internet Explorer shows the .png format an other way than Firefox and that's probaly the problem. Well, here is the code of "Images.html" Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Urne's Website - Images & Pictures</title> <link rel="stylesheet" type="text/css" href="style/Classic.css"> <link rel="icon" href="U.ico" type="image/x-icon" /> </head> <body> <div id="container"> <div id="header"></div> <div id="left" style="width:210px;float:left;"> <a href="index.html"><img id="Homebut" alt="Home (15K)" src="img/linky.png" height="50" width="200" border= "0px"/></a> <p><a href="Community.html"><img id="Cobut" alt="Community (15K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Tracks.html"><img id="Tracksbut" alt="Tracks (17K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Videos.html"><img id="Videosbut" alt="Videos (15K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Images.html"><img id="imagesbut" alt="Images (15K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Other.html"><img id="Otherbut" alt="Other (13K)" src="img/linky.png" height="50" width="200" border= "0px"/></a><p/> <p><a href="Models.html"><img id="Modelsbut" alt="3D Models" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Settings.html"><img id="Setbut" alt="Settings (13K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Search.html"><img id="Searchbut" alt="Search (14K)" src="img/linky.png" height="50" width="200" border= "0px"/></a><p> <p><a href="About.html"><img id="Aboutbut" alt="About (12K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> </div> <div id="main" style="margin-left: 210px;"> <h1>Re-Volt Images</h1> <img alt="RV Vista Icon" src="img/RV+Vista.png" align="right" border= "0px"/> <p><b><u><h3>Re-Volt Vista Icon</h3></u></b></p> <p>I was bored, and i thought that the good old re-volt icon needed a graphical update, so i decided to make this cool icon. Do only download for personal use please!</p> <p><a href="img/RV+Vista.png"><img id="Typeimg"alt="Image" src="img/linky.png" align="right" border= "0px"/></a> <a href="img/RV+Vista.ico"><img id="Typeico"alt="Icon" src="img/linky.png" align="right" border= "0px"/></a></p> <hr style="clear: right;" /> <img alt="Happy Holidays" src="img/HolidaysThumbnail.jpg" align="right" border= "0px"/> <p><b><u><h3>Happy Holidays!</h3></u></b></p> <p>Happy Holidays! was originally a picture i took for the 2nd RRR logo contest, but i choosed an other picture instead of this one and then i made it to what the picture now is. A really lucky shot, if you ask me.<img alt="smiley" src="img/smile.gif" border= "0px"/> <p><a href="img/Holidays800x600.jpg"><img id="LowRes" alt="Happy Holidays 800x600" align="right" src="img/linky.png" border= "0px"/></a> <a href="img/Holidays+fs.jpg"><img id="FullSize" alt="Happy Holidays Full Size" align="right" src="img/linky.png" border= "0px"/></a></p> <hr style="clear: right;" /> <img alt="Other Pisa Grandprix GFX" src="img/new+pisa.png" height="200" width="200" align="right" border= "0px" style="margin-bottom: 10px;" /> <h3>Other Pisa Grandprix GFX</h3> <p>Before me & Crone made the update pack for Pisa Grandprix, Crone took this nice picture, to use as GFX for Pisa Grandprix. Please feel free to download, if you like this one better than the 2 other images!</p> <p><a href="img/new+pisa.png"><img id="FullSize" alt="Full Size" src="img/linky.png" align="right" border= "0px"/></a></p> </div> </div> </body> </html> How do i align each button so it is exactly same place no matter how much text i wrote above? hey Guys! Happy new years to all! I need a little bit of help with something that is quite simple (I think). I have a full website set up in three frames header, body and footer. The site is set to have both the header and footer at a fixed position and size. and the body scrolls when needed. The problem is that when the scroll bar appears it moves the page on the body frame and the site doesn't align as it should. It moves to the left the amount of pixels the scroll bar has. How can I maintain the alignment of the body frame, even when the scroll bar appears? I hope that is, in fact, a simple thing and I'll appreciate the help on this! Thanks! Cheers Hi guys, I need help with IE7. If I open my webpage in Firefox it looks like screenshot1.png but when I open it in IE7 it displays like screenshot2.jpg. A live preview @ http://www.rawox.webege.com/home.php. Does anyone know how to fix this? I'm trying for 2 hours now and I can't get it Thanks in advance, Rawox Hi, For a web page I'm creating with php I'm trying to align two <div> tags next to each other. I'm thinking I want to use float, but I'm unsure how. Here is what I have so far. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
</head>
<body>
<div style="text-align: center; id="header">
<p>This is the header placeholder</p>
</div>
<div style="text-align: center; id="button_nav">
<p>This is the button navigation placeholder</p>
</div>
<div style="text-align: left; id="text_nav">
<p>This is the text navigation placeholder</p>
</div>
<div style="text-align: right; id="content">
<p>This is the dynamic content placeholder</p>
</div>
<div style="text-align: center; id="footer">
<p>This is the footer placeholder</p>
</div>
</body>
</html>
Any pointers are welcome. Thanks. Hey guys, i have 3 tables that I want to align like 1 2 3 at the moment they are 1 2 3 any ideas, here is the code i have HTML Code: <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>Xbox 360 GT:</td> </tr> <tr> <td><input type="text" name="x360gt" value="x360" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit1" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> <br> <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>PS3 GT:</td> </tr> <tr> <td><input type="text" name="ps3gt" value="ps3" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit2" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> <br> <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>PC GT:</td> </tr> <tr> <td><input type="text" name="pcgt" value="pc" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit3" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> Could anyone help me out please Hey All, So I have this frustrating situation illustrated by this screeny: www.kiddyjunction.ca/images/pic.jpg The yellow box (which is an iframe) aligns to center itself between those beige flash tabs on the left, and the other side of the white box, which is PERFECT. However, the logo, represented by the red box, aligns itself to be in the center of the white box, instead of between the edge and the flash material, despite all being in the same container. How do I get the logo to align over the center of the iframe (yellow box)? Thanks! Hi I am new to this site and very new to html. I just know the basics. My problem is, is there a way to make 1 line of text be split for example have 1 part of the line be aligned to the left and the other to the right. Here is an example, the first part is what is actually happening and the second part is the way i want it to look. This is an example.This is an example This is an example. This is an example. I just realized that my second part of the example didnt come out the way i wanted. So i want the second part to have the first part aligned to the left and the second part aligned to the right. Please help. Its probably really easy but like i said i just know the basics. Thanks in advance for any help that is given Mike Hi All, I Though i had all this figured out, But unfortunatly thats not the case im actually beginning to pull my hair out now All i want is three buttons in a line with a margin about seperating them from the web form. But i get the attached Heres my HTML HTML Code: <div class="leftColumn">
<asp:Label ID="lblUserRef" runat="server" CssClass="StandardLabel" Text="User Ref"
Style="margin-left: -7px; margin-right: 7px;"></asp:Label>
<asp:TextBox ID="txtUserReference" Style="margin-left: 2px" runat="server" ToolTip="Please enter a User reference"
CssClass="ShortTextBox"></asp:TextBox>
</div>
<div class="SmallSpace">
</div>
</div>
<div class="ButtonContainerDiv">
<div class="ButtonHolder">
<a href="#" class="CancelButton">Cancel</a> <a href="#" class="RaiseButton">Raise</a>
<a href="#" class="SaveButton">Save</a>
</div>
</div>
</asp:Content>
The small space has a pixel height of about 3. My Css for the buttons. HTML Code: .ButtonContainerDiv
{
margin-top:30px;
width:760px;
height: 100px;
margin-left:auto;
margin-right: auto;
}
.ButtonHolder
{
margin-left:auto;
margin-right: auto;
margin-bottom:auto;
margin-top:auto;
}
/* CANCEL BUTTON */
.CancelButton
{
-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ad0034), color-stop(1, #db0042) );
background:-moz-linear-gradient( center top, #ad0034 5%, #db0042 100% );
background-color:#ad0034;
-moz-border-radius:12px;
border:1px solid #616161;
display:inline-block;
color:#ffffff;
font-family:Verdana;
font-size:16px;
font-weight:bold;
padding:8px 40px;
text-decoration:none;
float: left;
}
.CancelButton:hover
{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #db0042), color-stop(1, #ad0034) );
background:-moz-linear-gradient( center top, #db0042 5%, #ad0034 100% );
background-color:#db0042;
}
.CancelButton:active
{
position:relative;
}
/* SAVE BUTTON */
.SaveButton
{
-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f1b214), color-stop(1, #d19602) );
background:-moz-linear-gradient( center top, #f1b214 5%, #d19602 100% );
background-color:#f1b214;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border:1px solid #616161;
display:inline-block;
color:#ffffff;
font-family:Verdana;
font-size:16px;
font-weight:bold;
padding:8px 40px;
text-decoration:none;
}
.SaveButton:hover
{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d19602), color-stop(1, #f1b214) );
background:-moz-linear-gradient( center top, #d19602 5%, #f1b214 100% );
background-color:#d19602;
}
.SaveButton:active
{
position:relative;
}
/* RAISE BUTTON */
.RaiseButton
{
-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #549228), color-stop(1, #377508) );
background:-moz-linear-gradient( center top, #549228 5%, #377508 100% );
background-color:#549228;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border:1px solid #616161;
display:inline-block;
color:#ffffff;
font-family:Verdana;
font-size:16px;
font-weight:bold;
padding:8px 40px;
text-decoration:none;
float:right;
}
.RaiseButton:hover
{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #377508), color-stop(1, #549228) );
background:-moz-linear-gradient( center top, #377508 5%, #549228 100% );
background-color:#377508;
}
.RaiseButton:active
{
position:relative;
}
Please someone help me I want to align a image in the center in html how do i do that. and could i do that i css aligning images. |
|||||||