|
HTML - Image/content Alignment
Hi all,
I'm working on a personal website and I'm stuck on this one little piece of coding. I'm desperate, no one will help me one the forums! Here's my code: HTML: Code: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>owr // home</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <span class="text"><strong>owr</strong> // home</span> <p class="text"><img src="images/block.png" width="20" height="18"></p> <p align=left><a href="index2.html"><img src="images/home.png" width="20" height="57" alt="Home"></a></p><p align=left><a href="music.html"><img src="images/music.png" width="20" height="50" alt="Music"></a></p> <p align=left><a href="pics.html"><img src="images/pics.png" width="20" height="35" alt="Pictures"></a></p> <p align=left><a href="vids.html"><img src="images/vids.png" width="20" height="35" alt="Videos"></a></p> <p align=left><a href="links.html"><img src="images/links.png" width="20" height="50" alt="Music"></a></p> <p align=left><a href="projects.html"><img src="images/projects.png" width="25" height="50" alt="Projects"></a></p> </body> </html> CSS: Code: @charset "utf-8";
.text {
font-family: MankSans-medium;
}
.content {
font-family:MankSans-medium;
font-size:14px;
}
.content2 {
font-family:MankSans-medium;
font-size:16px;
}
A:link {
text-decoration:none;
color:#000
}
A:active {
text-decoration:none;
color:#444
}
A:hover {
text-decoration:none;
color:#999;
}
Images: http://yfrog.com/bfblockfp http://yfrog.com/06homecsp http://yfrog.com/6glinkscp http://yfrog.com/0imusiclkp http://yfrog.com/2opicsdnp http://yfrog.com/63projectsp http://yfrog.com/mzvidsp I need to put content to the right of the image links, but I'm not sure how to separate the links from the content so I don't end up writing text under the pictures. I think I'm being clear but if you need me to expound, please let me know. But I really need some help with this. Thanks a bunch! Matt Similar TutorialsI have a problem with LI content alignment in menu. You can see the problem on http://toolbardev.com site. "Thunderbird and Outlook Development" menu item looks ugly. How can I align "Outlook Development" part? I have a content alignment issue in IE and I can not find the problem anywhere. In FF it looks perfect but in IE the content is at the bottom of the page and I do not know what or what I am overlooking and missing. I don't know if it is the php throwing it off. I wouldn't think so though. Here is the page: http://www.mesquitechristmas.com/local/display.php?id=2 Here is the code: PHP Code: <?php include ('db_connect.php'); if (isset($_GET['id'])) { $id = mysql_real_escape_string($_GET['id']); $sql = "SELECT * FROM users WHERE id = $id;"; if ($result = mysql_query($sql)) { if (mysql_num_rows($result)) { $row = mysql_fetch_array($result); $displayname = $row["displayname"]; $displaytype = $row["displaytype"]; $address = $row["address"]; $city = $row["city"]; $state = $row["state"]; $postal = $row["postal"]; $country = $row["country"]; $rating = $row['rating']; $votes = $row['votes']; $imgurl = $row['imgurl']; $comments = $row['comments']; } else { die("No user found"); } } else { die(mysql_error()); } } ?> <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="Mesquite Texas Country Christmas" /> <meta name="keywords" content="Mesquite, Texas, Country Christmas" /> <meta name="author" content="NA" /> <link rel="stylesheet" type="text/css" href="/stylesheet.css" media="screen" title="FBC" /> <script type="text/javascript" src="drop_down.js"></script> <title>A Mesquite Country Christmas</title> </head> <body> <div id="wrap"> <a href="/index.html"> <img id="frontphoto" src="/images/header.png" width="760" height="237" alt="Mesquite Country Christmas" border="0"></a> <div id="menu"> <h2 class="hide">Menu:</h2> <ul id="avmenu"> <li><a href="/index.html">Home</a></li> <li><a href="/christmasstory.html">The Christmas Story</a></li> <li><a href="/directions.html">Directions</a></li> <li><a href="#">Information</a><ul> <li><a href="/information.html">Display Facts & Info</a></li> <li><a href="/faq.html">FAQ</a></li> <li><a href="/playlist.html">2008 Playlist</a></li> <li><a href="#">Christmas History</a></li> </ul></li> <li><a href="#">Photos</a> <ul> <li><a href="/2007photos.html">2007</a></li> </ul></li> <li><a href="#">Videos</a> <ul> <li><a href="/2007videos.html">2007</a></li> </ul></li> <li><a href="/guestbook.php">Guestbook</a></li> <li><a href="/webcam.html">Web Cam</a></li> <li><a href="/webradio.html">Internet Radio</a></li> <li><a href="http://www.noradsanta.org/" TARGET="_blank">Track Santa</a></li> <li><a href="/projects.html">Projects & How Tos</a></li> <li><a href="/links.html">Links</a></li> <li><a href="/contact_us.html">Contact Us</a></li> </ul> <center><a href="http://www.toysfortots.org/" TARGET="_blank"><img src="/images/toys_for_tots.jpg" border="0" width="110" height="153" vspace="10"></a></center> <center><a href="http://christmas.bronners.com/2007/house/534.html"><img src="http://christmas.bronners.com/voteforme/vote.jpg" border="0" width="110" height="153" alt="christmas decorations" vspace="10"></a></center> </div> <div id="content"> <div class="fadebox"> <h2><? echo $row['displayname']; ?></h2> <hr /> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"><img src="<? echo $row['imgurl']; ?>" class="border" height="345" width="460"></td> </tr> <tr> <td> <table align="center"><tr><td>Rated 0 from 0 people | <b>Rate This</b>: <a href="displays.php?id=<?php echo $row['id']; ?>&rate=1">1</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&rate=2">2</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&rate=3">3</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&rate=4">4</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&rate=5">5</a> </td><td> </td></tr></table></td></tr></table> <table align="center" style="border-top: 1px solid rgb(51, 102, 51);" border="0" cellpadding="4" cellspacing="0" width="100%"> <span class="title">About this Display...</span> <tr><td class="bg2" width="100"><b>Display Name</b>:</td><td class="bg2"><? echo $row['displayname']; ?></td></tr><tr><td class="bg1"><b>Display Type</b>:</td><td class="bg1"><? echo $row['displaytype']; ?></td></tr><tr><td class="bg2"><b>Description</b>:</td><td class="bg2"><? echo $row['description']; ?></td></tr><tr><td class="bg1"><b>Address</b>:</td><td class="bg1"><? echo $row['address']; ?><br><? echo $row['city']. "," . $row['state']. " " . $row['postal']; ?><br><? echo $row['country']; ?><br><a href="http://www.mapquest.com/maps/map.adp?searchtype=address&formtype=search&countryid=US&addtohistory=&country=US&address=<? echo $row['address']; ?>&city=<? echo $row['city']; ?>&zipcode=<? echo $row['postal']; ?>&historyid=&submit=Get+Map" target="_NEW"><b>Get Directions</b></a></td></tr><tr><td class="bg2"><b>Website</b>:</td><td class="bg2"><a href="<? echo $row['website']; ?>" target="_blank"><? echo $row['website']; ?></a></td></tr><tr><td class="bg1"><b>Sponsor Links</b>:</td><td class="bg1"> <script type="text/javascript"><!-- google_ad_client = "pub-8048181801684156"; //displays google_ad_slot = "4239948836"; google_ad_width = 234; google_ad_height = 60; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </td></tr></table> </div> </div> </div> <div id="footer"> © 2007 Mesquite Country Christmas <br /> <br /> <script type="text/javascript"><!-- google_ad_client = "pub-8048181801684156"; //468x60, created 1/8/08 google_ad_slot = "0360766123"; google_ad_width = 468; google_ad_height = 60; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> </div> </body> </html> If anyone can help me with this that would be great! -Thanks Hello, im trying to make a webpage and figured invisible tables would be a good way to structurise the page, ive ran into a problem tho as in the cell content alignment is wrong. heres what im trying to achieve: Code: ____________________________________________ | navigation |text starts from up here | | navigation | | | navigation | | | navigation | | |____________|_____________________________| but while the navigation bar is always the same height the text cell is sometimes taller sometimes shorter thus i get situations where the small amount of text starts from the middle of the cell instead of top as i want it to and when there is alot of text the navigation bar moves to the middle of the streched out cell heres the html im using right now Code: <table> <tr> <td> <a href=blah blah>link</a><br> <a href=blah blah>link</a><br> etc </td> <td> here is the text </td> </tr> </table> please help Hi. The pictues on my nav ber have shifted to the left about 40 px. How do I get them to be centerd? (The nav bar is basically the only thing I have on the page..) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<title>Lithium Games</title>
<style type="text/css">
body {
background-color : #D0D0D0 ;
color : #000000;
text-align : center;
margin-top : 10px;
vertical-align : middle;
background-image: url("http://lithium-games.com/pic/BG.png");
background-attachment: fixed;
background-repeat: repeat-x;
}
#content {
width : 80%;
margin-right : auto;
margin-left : auto;
margin-top : 30px;
border : 2px solid #000000;
background-color : #ffffff;
padding : 5px;
text-align : center;
}
#nav {
width:240px;
height:33px;
margin:0px auto;
list-style-type:none;
}
#nav li {
margin:0 2px;
float:left;
display:inline;
}
#nav img {
float:left;
}
</style>
</head>
<body>
<div id="content">
<p>
<img src="http://lithium-games.com/pic/LG_Logo.gif" width="126" height="116" border="0"
ALT="">
<br />
<img src="http://lithium-games.com/pic/Line.gif" width="400" height="2" border="0"
ALT="">
<ul id ="nav">
<a href="http://google.com"
onmouseover="document.B1.src='http://lithium-games.com/pic/H_2.bmp'"
onmouseout="document.B1.src='http://lithium-games.com/pic/H_1.bmp'">
<img src="http://lithium-games.com/pic/H_1.bmp" width="80" height="33" border="0"
ALT="" name="B1" />
</a><a href="http://google.com"
onmouseover="document.B2.src='http://lithium-games.com/pic/G_2.bmp'"
onmouseout="document.B2.src='http://lithium-games.com/pic/G_1.bmp'">
<img src="http://lithium-games.com/pic/G_1.bmp" width="80" height="33" border="0"
ALT="" name="B2" />
</a><a href="http://google.com"
onmouseover="document.B3.src='http://lithium-games.com/pic/F_2.bmp'"
onmouseout="document.B3.src='http://lithium-games.com/pic/F_1.bmp'">
<img src="http://lithium-games.com/pic/F_1.bmp" width="80" height="33" border="0"
ALT="" name="B3" />
</a>
<img src="http://lithium-games.com/pic/Line.gif" width="400" height="2" border="0"
ALT="" style="position:relative; left:0px;
top:+100px;">
</ul>
</p>
</div>
</body>
</html>
i know this question has probably been asked 10000 times, but, how do i align an image so that it will be in the center of the entire page (like dead center) -------|------- -------|------- -----img----- -------|------- -------|------- I'm having trouble getting my image to line up right. Here's what I want out of it: I want that white textbox to be up by the links, but every time I try, it makes the link images jump all over the place. Here's the code: Quote: <!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>Website Test</title> </head> <body style="background-image: url(http://www.freewebs.com/aquafloe/images/wariobg4co.gif);"> <img style="width: 755px; height: 120px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Cbanner.png"><br> <a href="index.htm"><img style="border: 0px solid ; width: 150px; height: 36px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Chome_norm.jpg"></a><br> <br> <a href="pics.htm"><img style="border: 0px solid ; width: 150px; height: 36px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Cpics_norm.jpg"></a><br> <span style="text-decoration: underline;"><br> <a href="videos.htm"><img style="border: 0px solid ; width: 150px; height: 36px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Cvideos_norm.jpg"></a></span><br> <br> <img style="width: 460px; height: 115px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Ctextbox.png" hspace="200"><br> <br> <br> <br> <br> </body> </html> Is there any easy fix, or another way to get the same thing? Thanks. I am having trouble aligning a photo dead-center in a div. Here's a simple breakdown to avoid confusion... <div class="div1"> <div class = "div2"><img src="image.jpg"></div> </div> What I am trying to do is get that image right in the middle of div 1, both vertically and horizontally. Just to give a bit more of an illustration, for argument's sake, let's go by a standard 800px wide and 600px high for div1. The image size could be 400px by 300px. Div2 could be 75% W&H of Div1. I've tried everything I know using CSS and HTML, but I am missing something. All help is appreciated. Thanks, Jake Hello ladies and gentlemen. Im having trouble aligning some buttons i made with an a big image and small image of the like. They need to look like this... http://i217.photobucket.com/albums/c...wayne/main.jpg but currently are out of sync and all stuffed up. I was wondering what i could do to correct he problem and make it like the image above. Thanks in advance Hello folks, I'm trying out some different background images sized 800 x 600, but I'm having trouble getting them to center on the page! The graphic is hugging the right hand side of the screen at a low resolution, and is off center, slightly to the right at a higher res. Here is a url to show you what is happening: http://www.magicalwonders.com/test/ The code is very basic: Code: <body bgcolor="#000000"> <div align="center"><img src="images/background.jpg" alt="background" width="800" height="600"> </div> Not sure what I'm missing out? Any advice would be appreciated. Many thanks, Myles I have three images which I want horizontal on the bottom of my page. One aligned left, one aligned right, and one aligned center. I am having issues with aligning the center image, it is always just placing itself to the right of the aligned left image and not on the center of the page. If anyone could help me out with the code for an image centered between two others that would be great. Hi This is what i have: PHP Code: div id="wrapper"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="17%" ><img src="element.png" width="230" height="381" /></td> <td width="29%" align="left">middle</td> <td width="25%" align="left" background="backimg.png"><p>dfg</p></td> <td width="29%"></td> </tr> </table> </div> and this is what i get: Basically i have a table with 3 cells, the left (with the pink effect), the middle, and the right side. What i want is that image effect which is in left side of the page to be always aligned at top. should i create another <div> inside the <td> and put the image in the <div> ? is there a good way to do this ? Thanks Hi everyone. I'm new at this, so I apologize if this is a simple or redundant question. I'm trying to create a website where the front page is comprised of 5 rollover image links that, when properly aligned (in this case to the right), form one cohesive image. I have tried to individually align each with align="right" but instead of a column of images aligned to the right and directly on top of each other with no spaces, they are instead being organized like text. In other words, the first image is to the right, than the next two span across the page because there is enough room, then the following two do the same. The result is a scattered and disjointed image. I hope that makes sense. How can I get them to stack to the right with no spaces in between? thanks for any help. I've read all over various ways of making the image and the text align horizontally, yet somehow I can't get the darn thing to work in my website. I'm thinking it maybe because of DIV tags I have the following code: <div class="column1"> <div class="column2"><img src="images/logo_sm.png" border=0 height=97 align="bottom"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of </div> <div class="clear"></div> </div> The text is still aligning to the top of the image even though I've indicated bottom alignment. What am I doing wrong or what don't I know? Please help. thanks Navs I'm working on a site which requires a art images to be display centred, and I've been using CSS as much as I can. The content is displayed in a centred div of fixed width, with another div inside it to carry the content. Code: #container {
width: 650px;
position: relative;
/*margin: 0 auto;*/
margin:0 auto;
margin-top: -15px;
margin-bottom: -15px;
padding: 0px;
border: 0px;
background-image:url("images/basiclayoutimages/basicbackground.jpg");
background-repeat: repeat-y;
background-color: #b6463a;
display:block;
z-index: 1;
}
#content {
width: 630px;
position: relative;
margin: 20px;
margin-bottom: 10px;
margin-top: 10px;
padding: none;
border: none;
background-image: url('images/basiclayoutimages/Page Top 2.jpg');
background-repeat: no-repeat;
background-color: transparent;
z-index: 0;
display: block;
}
In Firefox, Internet Explorer, Opera and Konqueror on Windows and Linux the images display perfectly. However, in Mac Firefox, the images are shifting well to the right and refusing to be centred at all. Are there any specific Mac issues with image layout? The css for the images is this: Code: img {
border: 2px solid #1D7155;
/*margin-left: 70px;*/
margin: 15px;
}
img.display {
position: relative;
margin: 0 auto;
text-align:center;
display: block;
}
I've tried setting the old html align=center, along with absolute positioning and a number of other things, to no avail. Are there any tricks I can use to get the thing working? Any tips greatly appreciated. [edit] I should mention that there is a fixed banner of menus across the top of page, absolutely positioned, so the art images are not the only objects on any given page. There is a caption and "previous" "next" links beneath the images too. Hi, I've run into a problem between the rendering of tables in Mozilla and IE, and was hoping you might be able to help me out. The page in question is this one. In Mozilla, the right side of the coin is correctly aligned with the logo, and, using the align="left" tag, I can put content at the top of the page. In IE, however, the coin is separated. If I simply align the image to the left, it lines up with the rest of the logo properly, however, it then doesn't allow for content in all of the blank space to the right of the logo, for 138 pixels of height. Do you have any suggestions on how I can fix this rendering problem? I've tried putting the site together where all parts of the background graphics are, instead of images, backgrounds to table cells, but I still ran into problems there, such as duplication of parts of the logo if the content is too large (which can change if different browsers have different text size). If you have any suggestions, I'd greatly appreciate them! Thanks! Jeremy Ok, so I hope there is a simple answer to this. I just haven't been able to figure it out. I have a basic form that has a dropdown menu. I am using an image as the submit button. The problem I am having is that the image does not align vertically properly next to the dropdown menu. Below is what my form looks like in the browser. Any ideas how to get this aligned correctly? Thanks for all help! On the website: www.jsbseafoods.20m.com Have the following problems: Browser Issues: 1.) When viewed with Microsoft Internet Explorer it is aligned to the left instead of centred, top of the company name is missing, company jpg and gif images missing? 2.) When viewed with Firefox company name is missing? 3.) When viewed with Chrome sometimes when you scroll down the page and then up, top part of the company name is missing? Other Issues2: *SOLVED* 4.) On the Homepage "/div>" appears at the bottom of the page, I cant find where this is in the html code to remove? *SOLVED* 5.) On the Location page in Firefox and Chrome the page has an un-necessary space below the google map, on Internet Explorer the page is cut short. It would be greatly appreciated if you could help with these issues, I have been looking through the html and css code and cant find the problems. Thanks James in fact how to achieve this sequence: 1) user requests index.html, style css 2) preloading image.jpg 3) loading and displaying content in <body></body> these things didn't work for me: <SCRIPT LANGUAGE="JavaScript"> Image1= new Image(498,527) Image1.src = "body_bg-contacts.jpg" </SCRIPT> and #preload img { height: 0; width: 0; border-width: 0; position: absolute; bottom: 0; left: 0; z-index: -30; } <div id="preload"><img style="visibility:hidden;position:absolute;top:-1000px;left:-1000px;" src="images/body_bg-res.jpg" /></div> When I used the above or similar I still had smaller images and buttons loading before my main body_bg-contacts.jpg was actually loaded. Any ideas of how to really control image preload? I've tried some css and javascript codes, but as I said the MAIN IMAGE is not being loaded first. Hi, Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please? http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using! Thansk alot Joe |
|||||||