|
HTML - Aligning Images. (html And Pic Included)
Hi I am new to this forum and this is my first post. It should be in the introductions area but I thought it would be better here. Ok here is my question.
"I have been working on this new website project from my school on really basic HTML. So I created this website with around 12 webpages but am stuck at a place. For a better understanding, here is the picture of the page I am stuck at: http://www.imagebam.com/image/b3124a57239694 (image takes a few secs to load) And here is code for the webpage: http://www.scribd.com/doc/22980588 So by the picture, I hope you understand the problem and suggest a non <div> CSS solution. Thank You All help will be much appreciated I hope someone comes up with a quick and easy idea. I hope to enjoy my stay here Similar TutorialsHello i have 2 files file 1 and file 2 they are both being included in a cfm file by cfinclude. however when they are viewed on the browser they are not aligned together. file 2 is perfect. it goes on the center of the page but file 1 is on the far left. my level is beginner level so please have patience. i wish to have file 1 on the same center as file 2. (other words, file 1 needs to be inline with file2) thanks once again file 2 is correct. help Hi all, I've just joined your forum today as I've got a problem I can't seem to resolve with my tumblr html. I'm not sure whether any of you are familiar with tumblr, but it's basically a social networking blogging site. First of all, my url is http://king-of-diamonds.tumblr.com/ I have edited the html of my page a lot but there is one problem that I can't fix: If you have a look at my blog, you will notice that between the posts there is a little white line/space that I have tried my best to get rid of. Does anybody know how I can get rid of it? You can have a look at the html of my blog (currently) by clicking this link. Thanks in advance! I'm having a problem trying to anchor this Javascript menu into a fixed position. Heres the website http://www.intuition-designs.com/test1.htm as you might recognize, I'm trying to mimic the Facebook application bar that runs along the bottom of their website I'd like to have the menu anchored to the navbar at the bottom, so when I scroll, the menu will not scroll. I have a separate Javascript file for the menu Here is the HTML for the website so far. ANY HELP IS GREATLY APPRECIATED!!: 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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height:100%;
}
html.use_scroll_wrapper {
overflow:hidden;
}
#bottom_bar {
position:fixed;
bottom:0;
left: 15px;
right: 15px;
height: 27px;
background:url(http://www.intuition-designs.com/images/midbottom.png) repeat top left;
z-index: 3;
color: #FFF;
text-align: right;
}
#bottom_bar table tr th {
text-align: right;
}
.gg {
text-align: right;
}
.xx {
text-align: left;
}
</style>
</head>
<body>
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="navbar",awmBN="766";awmAltUrl="";</script><script charset="UTF-8" src="navbar.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script>
<div id="bottom_bar"> <table width="50" border="0" align="left" cellpadding="0" cellspacing="0" id="awmAnchor-navbar">
<tr>
<th scope="col"> </th>
</tr>
</table>
</div>
</body>
</html>
First of all, WOW does this look like a site that can make it happen for me.. websitemakingwise. Im new and boy, loving the info so far.. ok, my problem: So Im cleaning up this code, yes.. again. And I wanted to make this automated php thing that sends emails straight to my inbox. Without having to use the client installed. Only problem is that the submit button isnt doing anything. Could someone have a look whats wrong? Filename: ContactForm.html 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 http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Mailformulier updates - As it is in heaven again</title>
<style type="text/css">
<!--
body {
background-image: url(afbeeldingen/ups_and_simulation.jpg);
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
color: #000000;
}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; }
.style6 {font-size: 14px}
.style8 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; }
a:link {color: #000000;}
a:visited{color:#009;}
a:hover {color: #000000;}
.style10 {color: #FFFFFF}
.style14 {font-family:"Bookman Old Style"; font-size: 14px; color: #000000; }
#txt{
position:relative;
text-align:center;
left:100px;
top:55px;
width:420px;
height:40px;
z-index:2;
font-stretch:wider;
}
div.row {
clear: both;
padding-top: 5px;
}
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
float: right;
width: 235px;
text-align: left;
}
div.spacer {
clear: both;
}
-->
</style></head>
<body>
<table width="600" height="400" border="1" align="center" bgcolor="#FFFFFF">
<div id="txt">
<p class="style1">Ja, ik heb interesse. Graag ontvang ik verdere informatie over de toekomstige activiteiten.</p>
</div>
<tr>
<td width="44" height="150"> </td>
<td width="814" height="100">
<br />
<br />
<br />
<br />
<div style=
"width: 360px;
background-color: #ccc;
border: 1px dotted #333;
padding: 5px;
margin: 0px auto;">
<span class="style4">
<form>
<div class="row">
<form action="FormToEmail.php" method="post" name="ContactForm">
<span class="label">Naam:</span>
<span class="formw"><input type="text" name="Naamgegevens" title="Hier uw volledige naam" size="25" /></span>
</div>
<div class="row">
<span class="label">Adres:</span><span class="formw">
<input type="text" name="Naamgegevens" title="" size="25" /></span>
</div>
<div class="row">
<span class="label">Postcode:</span><span class="formw">
<input type="text" name="Postcode" title="" size="25" /></span>
</div>
<div class="row">
<span class="label">Woonplaats:</span><span class="formw">
<input type="text" name="Woonplaats" title="" size="25" /></span>
</div>
<div class="row">
<span class="label">Telefoon:</span><span class="formw">
<input type="text" name="Vaste telefoon" title="Uw vaste telefoon-nummer" size="25" /></span>
</div>
<div class="row">
<span class="label">Mobiel:</span><span class="formw">
<input type="text" name="Mobiel" title="" size="25" /></span>
</div>
<div class="row">
<span class="label">E-Mail:</span><span class="formw">
<input type="text" name="E-Mail" title="Het E-mail adres" size="25" /></span>
</div>
<p align="center">
<span class="style14">
<br />
<br />
<br />
ruimte voor opmerkingen/suggesties/reacties</span>
<br />
<textarea name="opmerkingen" cols="40" rows="6"></textarea>
</p>
<div class="spacer">
</div>
</form>
<div align="center">
<input type="submit" value="Versturen"><br>
</div>
<br>
</div>
<div align="center"><span class="style10">-----</span> <a href ="basis.html"><img src = "afbeeldingen/TERUG.png" width="95" height="60" style="border-style: none"/></a></span></div></td>
<td width="44"> </td>
</tr>
<tr>
<td height="100" colspan="3"><div align="center">
</div></td>
</tr>
</table>
</body>
</html>
Thanks for reading till this point! Hop you didnt mind the Dutch lol. FILENAME: FormToEmail.php PHP Code: <?php $my_email = "rsizania@gmail.com"; /* Enter the continue link to offer the user after the form is sent. If you do not change this, your visitor will be given a continue link to your homepage. If you do change it, remove the "/" symbol below and replace with the name of the page to link to, eg: "mypage.htm" or "http://www.elsewhere.com/page.htm" */ $continue = "www.google.com"; /* Step 3: Save this file (FormToEmail.php) and upload it together with your webpage containing the form to your webspace. IMPORTANT - The file name is case sensitive! You must save it exactly as it is named above! Do not put this script in your cgi-bin directory (folder) it may not work from there. THAT'S IT, FINISHED! You do not need to make any changes below this line. */ $errors = array(); // Remove $_COOKIE elements from $_REQUEST. if(count($_COOKIE)){foreach(array_keys($_COOKIE) as $value){unset($_REQUEST[$value]);}} // Check all fields for an email header. function recursive_array_check_header($element_value) { global $set; if(!is_array($element_value)){if(preg_match("/(%0A|%0D|\n+|\r+)(content-type:|to:|cc:|bcc:)/i",$element_value)){$set = 1;}} else { foreach($element_value as $value){if($set){break;} recursive_array_check_header($value);} } } recursive_array_check_header($_REQUEST); if($set){$errors[] = "You cannot send an email header";} unset($set); // Validate email field. if(isset($_REQUEST['email']) && !empty($_REQUEST['email'])) { if(preg_match("/(%0A|%0D|\n+|\r+|:)/i",$_REQUEST['email'])){$errors[] = "Email address may not contain a new line or a colon";} $_REQUEST['email'] = trim($_REQUEST['email']); if(substr_count($_REQUEST['email'],"@") != 1 || stristr($_REQUEST['email']," ")){$errors[] = "Email address is invalid";}else{$exploded_email = explode("@",$_REQUEST['email']);if(empty($exploded_email[0]) || strlen($exploded_email[0]) > 64 || empty($exploded_email[1])){$errors[] = "Email address is invalid";}else{if(substr_count($exploded_email[1],".") == 0){$errors[] = "Email address is invalid";}else{$exploded_domain = explode(".",$exploded_email[1]);if(in_array("",$exploded_domain)){$errors[] = "Email address is invalid";}else{foreach($exploded_domain as $value){if(strlen($value) > 63 || !preg_match('/^[a-z0-9-]+$/i',$value)){$errors[] = "Email address is invalid"; break;}}}}}} } // Check referrer is from same site. if(!(isset($_SERVER['HTTP_REFERER']) && !empty($_SERVER['HTTP_REFERER']) && stristr($_SERVER['HTTP_REFERER'],$_SERVER['HTTP_HOST']))){$errors[] = "You must enable referrer logging to use the form";} // Check for a blank form. function recursive_array_check_blank($element_value) { global $set; if(!is_array($element_value)){if(!empty($element_value)){$set = 1;}} else { foreach($element_value as $value){if($set){break;} recursive_array_check_blank($value);} } } recursive_array_check_blank($_REQUEST); if(!$set){$errors[] = "You cannot send a blank form";} unset($set); // Display any errors and exit if errors exist. if(count($errors)){foreach($errors as $value){print "$value<br>";} exit;} if(!defined("PHP_EOL")){define("PHP_EOL", strtoupper(substr(PHP_OS,0,3) == "WIN") ? "\r\n" : "\n");} // Build message. function build_message($request_input){if(!isset($message_output)){$message_output ="";}if(!is_array($request_input)){$message_output = $request_input;}else{foreach($request_input as $key => $value){if(!empty($value)){if(!is_numeric($key)){$message_output .= str_replace("_"," ",ucfirst($key)).": ".build_message($value).PHP_EOL.PHP_EOL;}else{$message_output .= build_message($value).", ";}}}}return rtrim($message_output,", ");} $message = build_message($_REQUEST); $message = $message . PHP_EOL.PHP_EOL."-- ".PHP_EOL.""; $message = stripslashes($message); $subject = "FormToEmail Comments"; $headers = "From: " . $_REQUEST['email']; mail($my_email,$subject,$message,$headers); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Dreamweaver Tutorial - Contact Form</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#ffffff" text="#000000"> <div> <center> <b>Thank you <?php print stripslashes($_REQUEST['name']); ?></b> <br>Your message has been sent <p><a href="<?php print $continue; ?>">Click here to continue</a></p> <p><b>Dreamweaver Spot</b> by <a href="http://dreamweaverspot.com">dreamweaverspot.com</a></p> </center> </div> </body> </html> Ok thanks!! So.. whats wrong? Im a total noob.. and it isnt even that I started from scratch.. some of it was already there. Appreciate your advice 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. 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? My right column, the skinnier one, is where all of the widgets are going to be. There is a widget that allows me to post HTML/Javascript. What I need is to post several images/ads but in a specific layout, as you can see below... Does anyone know how to align these images like in the example? Or atleast something close. Thanks!... <div id="myBox"> <p>4 Wheel Madness</p> <img src='sampleimage.png' width="65" height ="65" alt="img"> </div> What would i add to this to make the image go to the LEFT of the box, and then the text to go to the RIGHT of the box? ##### Text here, ##### Text here, ##### Text here, ^ Just like that Thank you for any comments Hi, I want to put images on the top left and topright corners of my website, but I want the images to rotate (they'd change when the page reloads).. How would I do that? I'm trying to position text, links and pictures to follow one after the other, but it doesn't work. I want to see "Homepage" on the left corner of my webpage "Next" on the right corner of my webpage Unfortunately this command doesn't work properly. <div style="text-align:left;solid 2px #ff0000;"><a href="F:\Webcomic\Website Folder\NWvisuals-Index.html"> Home</a> <p align=right><a href="F:\Webcomic\TheEyeoftheWorld3.html">Next</a></div></p> It makes the "Next" go down a line, instead of being in the same line of the "Homepage". Also, on that vein, is there any way I can align images and text on the same line without using spaces*? As in: <p align="left">Hello</p> <p align="center">Hello</p> <p align="right">Hello</p> But they all should stay on the same line. Any guides, or even links to tutorial about my issue would be appreciated. I've been trying to google for a while, it's becoming frustrating. *I think the problem with spaces is that people with different resolution would see the text in different places than I want them to see. Hi, I've been trying to set up a page where I have my e-mail address on one side of the page and my phone number on the same line but on the other side of the page. The e-mail address aligns left automatically, and when I use <p align=right>, it moves the phone number down onto the next line. <align=right> on its own does nothing. Does anyone know the code to align right without bumping the text down to the next line? Thank you so much for any help you can provide. Michael Hello, My website needs a fresh-over, so I decided to fix everything up to the XHTML 1.0 Standard. While doing that, I've also been trashing some of the old layouts and trying to make my website more clear & surmountable, both for the search engines & the surfing user. When working on the links page, I ran into problems though. The table and images simply didn't do the same I wanted them to do, and I've been trying several re-designs to make things alright again. Here is what I've got until now (Image Removed): (A) The content on the website, is not taking 100% width & height. If I use 100% & 100% height on the page, I'll just get this. (B] The table needs the same width as the body (100%). But I am still unable to use neither width or height, as it looks like they don't really do any matters in this case. There must be a bug somewhere inside the HTML or CSS Code, that makes this page very hard to give layout. I just cannot find it myself, so I am asking for your help. It can be because I am using a wrong attribute or tag to create the layout of my website, but I am sure that you got more knowledge on that area, than I. You can see the webpage yourself by clicking on the below URL: Link Removed Thank you, Urnemanden hi, i want to create a page where in my background image has a shaded blue image with a boy jumping on the left side of it, I want to extend the image to the whole of the browser but it is not, please help it is very urgent. Hi Iam a beginner in html and need help inserting an image in the header. Iam trying to insert an image in the header and it is taking lot of space than it should which looks awkward on my webpage with the white space can someone help to insert the image exactlyso that it does not use that extra space Hi! I'm pretty new to html, I'm trying to build my own fairly simple website using 123 reg Instant site and I want to make it from scratch with my own banners and buttons etc. I've been playing around putting some images up on the webpage, but I'm having problems getting the images to stay put, they move around when the browser window gets made smaller/bigger. heres the link to the website http://handbagshandbagshandbags.co.uk/ Any help would be really appreciated! Hi all. I've implemented an Image on my .html page using the following source code: Code: <img src = "www.myURL.com/images/logo.jpg" alt = "my Logo" width = 15% height = 15% > but I get a big X where the image should be. I've also tried just using "/images/logo.jpg" as the src, but that doesnt work either. My pages are all online by the way, and are not stored locally on my Hard Disk. All my pages are in www.myURL.com/pages/ and the images are in www.myURL.com/images/. Any tips? Thanks Hello, let me begin by saying that I know absolutley nothing about HTML but have been put in a position to learn a little I have made a dinky HTML page in MS Word 07 that we are trying to email to some folks on newsletter list and I am having an issue. When I send the test file to myself the images don't load. From what I understand they need to be hosted in order to load correctly. 2 Questions: 1) Can I host them on photobucket? 2) How in the heck do I get them to display properly??? I.E. Where does the IMG tag go? If anyone can help me I can post the source code and the IMG tags from photobucket...... Thanks! Hi, I was wondering what the easiest way was to add an image loader to a cell on a table. Basically I want the user to be able to browse their images for an image file and then load that to another cell on the table. I don't have much experience with HTML but I need to learn how to do this code for one of my assignments and I couldn't find any clear tutorials on how to do it. Any help would be appreciated. I saw some images embedded in text created with ▐ and ۩. If all you see are the images, the code is: &-#-9-6-1-6-; and &-#-1-7-6-9-; (disregard the hyphens). What are these images called and where are they documented? Don I have just started to learn HTML and was trying to get images on my exparimental web page. I haven't published the page and I have tried everything to get it to work. I can get images to work on my backround but not on the page itself. i.e.<img src="/pics/mf.gif" width="100" height="100">. I have used the full path name and all pics are in the same folder as my page. All I get is a box on the top left of where the pic should be, its like the image isn't loading. Please help |
|||||||