|
HTML - Issue With Alignment Of Images
I am having an alignment issue with a row of images. The site is located he http://www.teewala.com/teewala
I cannot figure out why the three images are shifted slightly to the right. The code is very simple, so I figure the solution should be simple. Any help is greatly appreciated. Thanks! Similar TutorialsOK well This workse perfectly with a .html document, but when I use .php it all goes bad, http://rapid-hook.com/script-2/index.php The arrows ar suppose to be aligned with each other, but theres a gap between the table, for the bottom only, not sure how to fix this. Hello All, Wondered if anyone could help. Have designed a website at www.kerrsminaturerailway.co.uk. The first problem is the JQuery slide menu nav bar does not match the width of the body. I've set the width of the nav bar as 100% on the CSS, and with both Firefox and Internet Explorer, there is a white gap on the right hand side. Any ideas how to fill this in and have a nav bar the width of the body? The second problem is I have two links on the banner area, to a Facebook and Twitter group, but both images appear to be hidden by the banner. How do I get them to overlap the banner? Many thanks in advance, we'd be grateful of any help on both, to smarten up the website. Peter I've got a line of text that includes some IMG tags. The images are 23 pixels high and the text is about 16 pixels high. So the IMGs increase the height of the line. Normally, Text and IMGs are aligned to "the bottom", so that the IMGs are much taller than the text. I could increase the size of the text so that it was as tall as the IMGs, but I'd rather not. I want the text to be vertically aligned to the "middle", so that the line looks better. Is that possible? Hi folks, I'm having a distressing issue with my website. I have a table of thumbnails that must line up very specifically to fit with a background image. Not so hard, the page appears perfectly when I view it by itself (http://natehess.org/working/work/rec...rk_layout.html) But when I drop it into a Scrolling DIV script (Aaron Boodman's) a get a peculiar spacing issue on the set of 8 thumbnails in *FireFox*. The issue doesn't appear in IE, but gotta get it right. The problem page is http://natehess.org/working/work/recent_work.html If anyone would be willing to provide a reccomendation or slog through my code I'd appreciate it. I built the page in dreamweaver, so it's not the cleanest code ever, but I'm at a loss at this point. Thanks so much for any help. I'm in the early stages of creating a web site. I've created a banner with a logo, and some links and put it on top of each of the pages. The banner appears in the same place on all but one of the pages--on the page called "video", everything shifts over to the left a little...just a few pixels. I spent sometime looking through the HTML and the CSS for the pages, and through trial and error found the cause to be the height attribute given to a particular div on the page. I can't think of any reason why the height of the div should cause the horizontal position (not just of the div itself, but all elements on the page) to change. Any ideas? Here's the CSS for the site: Code: /***************Body, etc.*****************/
body {
background-color: #000000;
font-family: times, serif;
color: #b0b0b5;
}
#container {
margin: 0 auto;
width: 750px;
/**border: 1px solid red;**/
padding-bottom: 5px;
}
a {
text-decoration: none;
}
a:visited {
color: #b0b0b5;
}
a:hover {
color: #475890;
}
div.blank {
height: 100px;
}
div.blank2 {
height: 50px;
}
/***************Bottom Links*****************/
div.linksBot {
border: 0px;
background-color: transparent;
}
p.linksBot {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
a.linksBot {
color: #c0c0c8;
text-decoration: underline;
}
a.linksBot:hover {
color: #475890;
}
/***************Banner*****************/
.banner {
padding: 0px;
margin: 0px;
background-color: black;
/* for testing ----border: 1px solid red;-----*/
color: #b0b0b5;
font-size: 20px;
font-family: copperplate, times, serif;
}
img.pno_ban {
opacity:0.4;
filter: alpha(opacity=40);
}
/***************Home*****************/
#home {
/**border: 1px solid green;***/
font-family: copperplate, times, serif;
}
#linksTop {
color: #c0c0c8;
width: 500px;
font-size: 20px;
text-align: center;
}
#pno {}
#welccell {
background-color: #444550;
height: 374px;
width: 250px;
}
p#welcome {
margin: 18px;
color: #d0dede;
font-family: times, serif;
font-size: 14px;
}
/***************Audio/Video*****************/
#video {
/******** THIS WAS THE PROBLEM--- height: 750px;***********/
background-color: #444550;
color: black;
padding: 20px;
}
embed {
margin-right: 15px;
}
#audio {
height: 500px;
background-color: #444550;
color: black;
padding: 20px;
border: 1px solid green;
}
and the HTML for the "video" page: Code: <body>
<div id="container">
<div class="banner">
<table cellspacing="0" cellpadding="0">
<tr>
<td><img id="pno_ban" src="assets/images/banner_pno_2.jpg" width="375px" /></td>
<td>
<table width="375px" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" height="75px"><a href="index.html">THE J-SLICE</a></td>
</tr>
<tr>
<td width="93px" height="25px"><a href="bio.html"> Bio</a></td>
<td width="93px" height="25px"><a href="audio.html">Audio</a></td>
<td width="93px" height="25px"><a href="video.html">Video</a></td>
<td width="93px" height="25px"><a href="contact.html">Contact</a></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="blank2"></div>
<div id="video">
<embed src="assets/videos/red_color_room.mov" id="myVid" width="480" height="286" autoplay="false" align="left">
</embed><p>From "The Violence Inherent In Red" - a film by Brian McCarthy</p>
</div>
<div class="linksBot"><p class="linksBot"><a href="index.html">Home</a> | <a href="audio.html">Audio</a> |
<a href="video.html">Video</a> | <a href="contact.html">Contact</a></p>
</div>
</div>
</body>
Now the problem is, the height attribute was there for a reason: since I'm embedding videos into the div, and the <embed> tag seems to not expand the div on its own, I'm not sure how to make sure all the videos (there will be more of them added later) fit within the div background. Thoughts? Thanks. I want to display label and input element like below, Code: user name: <text box>
email address: <text box>
<some lengthy text>
confirm email address: <text box>
I don't want to use table. All the colons at the end of the label should align vertically. All the text boxes also must align vertically. <some lengthy text> must be right aligned along with text boxes. this may wrap to multiple lines. wrapped text also right aligned along with text boxes. please help me. thanks. Hi all, yes it's me again. Just a quick problem I'm trying to solve. I have a script to add tabs to my site, but I can't get the text aligned in the middle of the tabs. I realize this could be solved by having the text actually on the image, but I don't want all my webspace taken up buy a couple hundred images, when one would work. I have attached the scripting for the tabs along with a preview of how it currently looks. Anyone got any ideas? Regards Jake Hello, on my website www.PrinceArmory.com, the header and body closing tables are wider than the rest of the content and it causes alignment issues when shrinking the width of a browser. I want the wider parts to shrink with the body for content purposes instead of adding a spacer on the content left margin. So I need to somehow designate some sort of sacrificial space so that the wider tables & images are slipped behind the browser border. I'm not sure if I described what I want accurately. I couldn't figure out a search term for google to help me so that's why I'm posting here. Thanks for any help Hi I have used a 2 column faux css layout and want to put a javascript calculator in the centre column but it does not align in the centre properly and i cannot see any indent in the column, could someone please help. I have tried previewing in IE, Chrome and Firefox but still have the same problem Thanks, the HTML code is below 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>iCD - Report</title>
<link href="_css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<img src="Images/header3.jpg" width="923" height="92" alt="iCD - The authority in CD's" />
</div>
<!-- End Header -->
<!-- Begin Faux Columns -->
<div id="faux">
<!-- Begin Left Column -->
<div id="leftcolumn">
<a class="nav" href="index.html" title="Home">Home</a>
<a class="nav" href="calculator.html" title="Calulator">Calculator</a>
<a class="nav" href="slideshow.html" title="Slide Show">Slide Show</a>
<a class="nav" href="cds.html" title="CD's">CD List</a>
<a class="nav" href="contact.html" title="Contact Us">Contact Us</a>
<span class="chosen">Report</span>
</div>
<!-- End Left Column -->
<!-- Begin Content Column -->
<div id="content">
<h1>Faux Column CSS Layouts</h1>
<p>
These 2 Column Faux CSS Layouts use a background image to make it look like the
left and right columns are equal in height and independent of each other.
<br />
<br />
Things couldn't be further from the truth. I created a parent column called faux
and vertically tiled the image, that contained both the left and right child columns.
I then vertically tiled the faux background image and viola.
<br />
<br />
I first found about this method from the <a href="http://www.alistapart.com">
alistapart site</a> by a guy called <a href="http://simplebits.com/">Dan Cederholm</a>
</p>
</div>
<!-- End Content Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<p>
hello also
</p>
</div>
<!-- End Right Column -->
</div>
<!-- End Faux Columns -->
<!-- Begin Footer -->
<div id="footer">
<div align="center">© Himesh Siyodia N0181013 </div>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
I am having a problem with content being misaligned in Firefox. If you look at the page in IE it looks fine. But several elements are misaligned in Firefox. If you look at the site www.displaypoints.com/promotions (currently displaying as http://69.89.31.104/~displayp/promotions.html) in IE and then Firefox you can see the issue. This is happening on several pages including this one so I'm sure it's a coding issue but I can't figure it out. Any help would be appreciated. I am trying to left-align this table and I cannot figure out why it will not behave. Mind you, the problem is only occurring in IE7 - IE8 and Firefox are fine. Please help? Code: <table summary="main content panel" align="left" bgcolor="#ffffff" border="0" cellpadding="0" width="535" height="200"> <tbody> <tr align="left"> <td align="left" width="15%"><img src="/images/369/images/content_image.png"><br><br><br><br></td> <td style="background: transparent url(/panel.png) no-repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; vertical-align: middle; text-align: center;" align="left" width="70%"><h2 style="font-family: Arial;"><font color="#0088ce" size="6">Project Initiative</font></h2><h1 style="font-family: Arial; text-align: center;"><font size="3" face="Arial">TEXT HERE</i>.</font></h1><br><br></td> </tr></tbody></table> Hi, I am working for support and got one issue raised.. My webpage has 3 print blocks .. when i minimize the browser the alignment of third block remains same and hence I good horizontal space bar for that while other two blocks align/resize themselves according to new page size.. Kindly suggest which tag /etc i need to check N00b here, brought forth out of desperation and the fact that none of my coder-friends have a clue whats causing this. Currently coding my first website ( by hand in notepad. Awesome learning... thinger ... not so great on the troubleshooting.) So- can anyone help me fix why this site looks fine on IE, but the BG doesn't quite align in firefox? Would be MUCHLY appreciated! http://www.jakobmetzger.com/misc/sites/kindling/ In IE the only pages that render correctly where the top blue line that goes across the screen is the forums page. the other pages have a black space to the right of the menu. Any ideas? Having an issue with page positioning and alignment. My html skills are limited at best but Im trying to set up a layout template for my ebay sales. what I want is for the page/table to have fixed borders so that the horizontal scroll bar at the bottom doesn't' appear as I enter large amounts of text, instead I'd like to have it expand downwards to accommodate whatever I enter instead of expanding outwards to the right as its currently doing. I realize the code may be a bit of a mess, but Im seriously stuck, I've messed with all the tags but I can't seem to figure out what is causing this problem, any tips at all from anyone would be much appreciated. link to layout http://surrenderyourwings.com/layout.html Hello, I realize several threads have already been posted and that many of you dislike tables. I am having, however, a table issue that I think is only solvable through HTML adjustment of said table. In FF and IE8, my homepage looks excellent, just how I've laid it out. However, in earlier versions of IE (which the majority of my demographic still use), the layout of the table is askew. The remainder of my page is made up of various Flash movies, and I have tested that these are not the cause of the layout issue. The 2-cell table I have is being thrown for a loop (laying itself out to the right and stretching the site), and I'm not sure what the cause of it is. It needs to be left-aligned; below is my code: Code: <table summary="main content panel" align="left" bgcolor="#ffffff" width="535"> <tbody> <tr> <td align="left" width="15%"><img src="/images/369/images/content_image.png"></td> <td style="background: transparent url(/images/369/images/panel.png) no-repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; vertical-align: middle; text-align: center;" align="left" width="70%"><h2 style="font-family: Arial;"><font color="#0088ce" size="6">Project Initiative</font></h2><h1 style="font-family: Arial; text-align: center;"><font size="3" face="Arial">Valmont is currently conducting research on producing rice under mechanized irrigation in an effort to conserve water and energy, and increase profitability by bringing land into production, an initiative appropriately titled <i>Circles for Rice</i>.</font></h1></td> </tr></tbody></table> I'm unsure what the "scroll 0% 0%" through "-moz-initial;" is, the CMS I'm using has thrown that code in. (BTW - cannot get out of using CMS, which I would dearly love, this is a work project, so use what I'm given ) Here is why I think I still need to use a table: I need to be able to align two images (a photo and a border) but be able to insert text on top of the border. I had originally created this in Flash, but I totally spaced that I needed some text on the homepage so Google can index the text correctly. Is there another option to accomplish what I'm trying to do, one without tables? I appreciate all other options! Thanks! When you go to my site www.sforu.com with IE 6 or IE7 the picture is all misaligned, So could you take a look and let me know whats wrong with it, because it's driving me crazy Thank you Hi all, beginner question here. I'm attempting at building a small website for my local golf club, one of the tabs on the page is a "Contact" link, inside this tab page I have attempted to embed a small GoogleMap with co-ordinates of the golf club. Whilst testing with IE7 the embedded GoogleMap appears randomly at the bottom of the page totally out of place where it should be. If browsing using Firefox, IE8 or Chrome it appears in the correct place, which is in the middle of the "Contact" page, and only when you click on the "Contact" tab. I only seem to have this issue with IE7, all the other browsers I've tested so far it aligns perfectly (Firefox, IE8, Chrome). As I say above, this issue only appears in IE7 - however I'm more than sure it is just a stupid mistake on my behalf, but I've tried and tried and can't seem to resolve it. Appreciate any help anyone can offer - Many thanks in advance. The website URL is: http://staging.boarsheadgolfcentre.co.uk/ The bit of code that handle the embedded map is: Code: <div class="box" id="contact_page">
<div class="m_table">
<table width="85%" align="left" cellpadding="20">
<tr>
<td>
<h1 align="left">Contact Us</h1>
</td>
<td rowspan="5">
<div id="map_canvas" style="border-style:solid; border-width:1px; float: right; width: 350px; height: 450px"></div>
<strong style='float:right;'><a href="http://maps.google.co.uk/maps?hl=en&expIds=17259,28023&xhr=t&cp=39&um=1&ie=UTF-8&q=Boars+Head+Golf+Centre+Ltd,+Crowborough&fb=1&gl=uk&hq=Boars+Head+Golf+Centre+Ltd,&hnear=Crowborough,+East+Sussex&cid=0,0,4613151939200773413&ei=y98ITfieOYO3hQelsojLDw&sa=X&oi=local_result&ct=image&resnum=2&sqi=2&ved=0CCUQnwIwAQ" style='text-decoration: none;'><font color=#000000>For a larger map click here</font></a></strong>
</td>
</tr>
<tr>
<td>
<p style='border: none;'>
<strong>Boars Head Golf Centre </strong><br />Boars Head, Crowborough, East Sussex, TN6 3HD <br /><br />
<strong>General Manager: </strong>Peter Grenham<br /><strong>Telephone: </strong>01892 664 545<br /><br />
<strong>Professional: </strong>Keith Robson<br /><strong>Assistant Professional: </strong>George Scott
</p>
</td>
</tr>
<tr>
<td>
<p style='border: none;'>
<strong>Location/Description:</strong><br />
Situated just outside Crowborough on the way to Tunbridge Wells on the B2157. Traveling from Crowborough Town turn right on the Boars Head roundabout and head back up the B2157 for about 100 yards, entrance on your left (signposted).<br />
Parkland course with water and trees. 9 hole course, 2698 yards (5396 18 holes), S.S.S. 67 (18 holes).<br /> Practice facilities available (driving range, grass tee, putting green and chipping area).
</p>
</td>
</tr>
</table>
</div>
</div>
Code: <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAGSrquuMPubSa0rTVyaJ2-hRM3sC8BNhS4dKTfFraCAxHin8KOhRLTWtdRIc0Q2_nPROmXypLuvQBUw"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(51.065371, 0.183923);
map.setCenter(center, 13);
var marker = new GMarker(center, { draggable: false });
GEvent.addListener(marker, "dragstart", function () {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function () {
marker.openInfoWindowHtml("Just bouncing along...");
});
map.addOverlay(marker);
GEvent.addListener(marker, "click", function () { marker.openInfoWindowHtml('Boars Head Golf Centre'); });
}
}
</script>
I've just come to do my new site, but for some reason I can't get the site to display properly in Firefox 2.0.0.1. The images aren't working properly, the banner image I have put in place works fine in IE, displays in Opera (I'm still working on the layout), but won't display at all in Firefox. If I use the developer toolbar on my page, it reports as a broken image, but I click the link and the image displays. The alt text appears in my layout, which is more confusing. But I can't find a solution for this. It's nothing to do with the markup, I've tried displaying the image in a completely blank page, still nothing. I have a U3 drive, it has Firefox 1.5 loaded on it, the image displays fine in there. Any ideas? http://www.hypersonicscream.com - Can anyone let me know if it's a problem with my copy of Firefox? |
|||||||