|
CSS - Basic Help Needed Positioning Images Left To Right Horizontally
I'm very new to css positioning so this might be an easy question...
What I'm trying to do happens to position properly in IE6 and Firefox like so: http://whythrowchip.go.dyndns.org/atx1.jpg But it doesn't come out properly in IE 5.X , it looks like this: http://whythrowchip.go.dyndns.org/atx2.jpg It's know it's probably not an IE 5.X quirk, I guess I'm not supplying the right information to tell it to stay where I want it... So what's the best way with CSS to make a row of images that lines up side by side and won't break to the next line? Here is my code now as it stands (I put in three dots in a row in a couple places so there wouldn't be quite so much code pasted here): Code:
from main page:
<div id="wrapper">
<div id="top_banners"><img src="logo.jpg" width="391" height="106" border="0"><img........</div>
<div id="top_menu">img src="menu1.jpg" width="150" height="20" border="0"><img.........</div>
<div id="content">
<p>Some filler text in here</p>
<p>Some filler text in here</p>
</div>
</div>
entire external style sheet:
body{
background-color:#666666;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
#wrapper{
padding: 0;
margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
background-color: #EAEAEA;
border: 1px solid #000000;
width: 750px;
text-align:left;
}
#top_banners{
margin: 0;
padding: 0px;
height: 106px;
}
#top_menu{
margin: 0px;
padding: 0px;
height: 20px;
}
#content p{
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-left: 20px;
}
any help would be greatly appreciated ps:the buttons in the second row are rollover gif images done with Dreamweaver, not that that should matter I guess Similar TutorialsI'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong? <DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV> I'm trying to tile a background image horizontally with a vertically tiled background image centered on the page. Being new to css and not particularly fluent in html (although more so than css), I have no idea how to go about doing this or if it is even possible. I do have both images working separately though. Help would be appreciated. -alexa Hey all, I need some help with a very basic CSS file. Honestly, it is so basic, that I've never done it before, and I can't get it to work. So, basically, what I have, is a flash file, that I want to be in the center of my page. However, in the flash file is a banner, that I want to continue at the sides, using repeating backgrounds. What I need is a simple three column CSS file, where the center has a fixed with of 887px (the width of the swf-file) and the left and right columns change their width to whatever width the visitors web browser has. I just can't get it to work. Can anyone help me? Thanks a lot. Regards. Hello folks, I am trying to get a basic sprite working. I have been reading on this for over a week and I think I am missing something very basic. I made a couple sprite png's in photo shop could not get them to display correctly and I found a place online that makes them for U, it displays just like the ones I made... so http://www.realestateozarks.com/mcnally/mcn.png Ok what is happening when I try and call the sprite and display a pic on it, it does correct width and height but divides the height by the 6 pictures on it and displays all of them instead of 1. http://www.realestateozarks.com/rsstest.htm and U can see what I am trying to say. I am not trying to do anything fancy here only display 1 pic out of the 6 correctly. if I call the sprite in a image statement like <img class="sprite mcn1 mc5"> it does display the img correctly... but that is not correct html code and if alt statment is added it displays it on top of pic. css code passes w3c.org test NOTE: if I try and display a individual pic in a td statment like <td class="sprite mcn1 mc5"> it displays the picture correctly... well as a backround image anyway... here is my html code to call sprite... In head statment Code: <link href="mcsprite.css" rel="stylesheet" type="text/css" > in body to call pic Code: <img src="../mcnally/mcn.png" class="sprite mcn1 mc5"> Here is code in my mcsprite.css file Code: .sprite {background:url(../mcnally/mcn.png);
background-repeat:no-repeat; }
.mcn1 {height:125px;}
/* mcn1 */
.mc1 {width:200px; background-position: 0px 0px;}
.mc2 {width:200px; background-position: 0px -135px;}
.mc3 {width:200px; background-position: 0px -270px;}
.mc4 {width:200px; background-position: 0px -405px;}
.mc5 {width:200px; background-position: 0px -540px;}
.mc6 {width:200px; background-position: 0px -675px;}
If I can get it to display 1 pic correctly then I can change my code and display all 6 pics correctly. I have 24 pic's on my home page so using a couple sprites with 6 pic's each on them with .2 sec latency on grabbing each individual pic will save me about 2 sec load time on my home page. thanks in advance for any suggestions/help whonoes I am trying to create a page to be printed out as a letter but I cannot for the life of me make the footers stick to the bottom when printed. Here is the code: Code:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Header Test</title>
<style type="text/css">
body {
font-family:arial;
font-size:10pt;
}
h1 {
text-align:center;
margin:0;
padding:0;
}
div.letter {
page-break-after:always;
}
.from {
text-align:center;
}
.to {
font-style:normal;
margin-top:30px;
}
.date {
}
.footer {
position:absolute;
bottom:0;
}
</style>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div class="letter">
<h1>Stanley Road Baptist Church</h1>
<address class="from">
Stanley Road, Morecambe, Lancashire, LA3 1UP
</address>
<address class="to">
Joe Bloggs
</address>
<p class="date">
Friday 27th August 2004
</p>
<p>
Dear Joe,<br />
Blah blah blah.
</p>
<p>
Yours sincerely,
</p>
<p>
Matt Fletcher
</p>
<div class="footer">
The Footer In Question
</div>
</div>
<div class="letter">
...
</div>
<div class="letter">
...
</div>
</body>
</html>
I can get it to stick to the bottom of only the first page, but it doesn't appear on any others. I am trying to figure out the best way to right justify an element in relation to other elements within a div. Here is an example: <head> <title>right position</title> <style type="text/css"> #maindiv {width: 600px; background: #cccccc; padding: 10px; border: solid 1px black;} .left {font-size: 2em;} .right {padding-left: 350px} </style> </head> <body> <div id="maindiv"> <span class="left">hello world</span> <span class="right">hi there</span> </div> </body> This can't be the best way to right position something, can it? The only alternatives I can think of are absolute positioning or possibly floating, which seems unnecessarily complicated for something so simple. Can anyone suggest a better way of doing this? Ideally, the element would stay pinned to the right even if the left element changes widths. Thanks in advance, CSS Newbie! Basic positioning problem... Suppose I want to stack two (or more) elements on top of eachother, sort of a column. I want a masthead (images), and boxes of text below it. So I tried this: Quote: <html> <head> <title>No Jail Test Page</title> <style type="text/css" media="screen"> div.box_one { width: 100%; background: url(./Image_Back.gif); } div.image_left { float: left; } div.image_right { float: right; } div.box_two { background-color: #F4F4F4; width: 100%; border: 2px solid #006633; border-collapse: collapse; padding: 10px 10px 10px 10px; } </style> </head> <body> <div class="box_one"> <div class="image_left"><img src="images1.gif"></div> <div class="image_right"><img src="images2.gif"></div> </div> <div class="box_two"> Some Text Some Text </div> </body> </html> But the images end up over the text, so obviously I don't understand the positioning. SEE ATTACHED IMAGE Can someone point out my positioning problem here and recomend a tutorial? [EDIT] This actually looks almost perfict in IE, it's in FF that things "stack up" on eachother... Hi there, I recently started up an internship at a music magazine and they asked me to do a simple side site to present some information. I left it pretty simple for most of it but wanted to challenge myself a bit with some CSS for one of the pages. The page in question is the 05 Panel Page It looked better in Firefox earlier, but I recently made some changes according to the site editors which made it look a lot less clean in Firefox and damn ugly in IE. I would like to have that introductory block of text be where it is with the panel information on the left side and the photos and text wrapping where appropriate. I've been fiddling with padding a lot, but haven't made too much headway. I know that there's a lot going on to be helped out with specific parts (although I wouldn't mind if anyone could). But if you had any topics that I should concentrate looking up information on, then that would be just as helpful. Edit: I was also having problems giving the entire side enough padding to stay away from the edges of the browser window. However I ran into problems on the right side of the page: some of the text would go too far past the headers. And if that didnt happen, extra space in general appears on that right side. i want to position a div 383 pixels left of the center of my browser. i've tried using left:50% and a negative margin..anyone have suggestions on things to try? Well.. I just remembered I am a member here... I usually figure out my problems.. but this one is just annoying me... I haven't really decided on colors or anything.. but I just wanted the basic layout with content on my my site... but I get 1 IE problem.... check it out.. http://centralfloridacomputerrepair.com/test.php the image all the way to the right works fine in FF... but in IE it's below where it should be, and messes up the whole page. the css is here http://centralfloridacomputerrepair.com/style.css (what you are looking at is div#sidetext) and the css/xhtml validates http://validator.w3.org/check?verbo...ir.com/test.php http://jigsaw.w3.org/css-validator/...ir.com/test.php I just can't figure it out... I've tried using left: 735px; ... since it's positioned absolute from the top.. but left didnt work with IE either... it gets to the right place horizontally.. but not vertically... I tried margin-right with negative.. and it didn't work at all.. it just stayed left all the way. any ideas? edit: I've been here a whole year... and this is my first post. HA. Hello, I am having problems positioning my left menu on non IE browsers, The menu appears fine in IE, can anyone help please, I have attached my code Code:
body {
margin:20px;
background:#ffffff;
text-align:center;
padding:0;
}
#outer {
text-align:left;
border:0px solid #000000;
width:785px;
margin:auto;
}
#hdr {
height:30px;
background:#ffffff;
}
#bar {
height:25px;
background:#ffffff;
border:solid #000000;
border-width:1px 0 1px 0;
}
#bodyblock {
position:relative;
background: #fffff;
width:785px;
padding:0;
}
#l-col {
width:204px;
height:452px;
float:left;
background:#fff;
background-image:url(images/left.jpg);
background-repeat:no-repeat;
padding-bottom:10px;
}
#cont {
width:565px;
background:#ffffff;
border:solid #000000;
border-width:0 0 0 0px;
}
#middle {
width:5px;
float:left;
background:#fff;
}
#ftr {
height:25px;
background:#c0c0c0;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}
extremely new to css here...just want a basic template for my first site what im trying to get is.... http://www.samsenterprisesauto.com/template.jpg what im getting is... http://www.samsenterprisesauto.com/ie6.jpg and http://www.samsenterprisesauto.com/firefx.jpg ie "looks" pretty good but i cant get rid of the small space between the logo and the lefthand navigation bar my html looks as follows... 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel=stylesheet href="testy.css">
</head>
<body>
<div id="Header">
<div id="Logo">
<img src="logo.jpg">
</div>
<div class="padder">
<h1>#Header</h1>
</div>
<div id="TopBar">
<div class="padder">
#Topbar
</div>
</div>
</div>
<div id="Main">
<div id="Left">
<div class="padder">
<h1>#Left</h1>
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </div>
</div>
<div id="Middle">
<div class="padder">
<h1>#Middle</h1>
<p>x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x xAll boxes are positioned statically. The #Left and #Right are floated boxes.x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x</p>
</div>
</div>
</div>
<div class="spacer"> #spacer</div>
</body>
</html>
my .css is as follows: Code: body {
margin:0;
padding:0;
background: #fff;
}
#Header {
padding:0 0 0 0;
height: 120px;
background: url(headbg.jpg) repeat-x;
}
#Header #TopBar {
top: 100px;
margin: 0 0 0 150px;
padding:0 0 0 0;
height: 20px;
}
#Logo {
float: left;
}
#Main {
margin: 0;
padding: 0;
}
#Main #Left {
float: left;
width: 150px;
margin: 0;
background: url(sidebg.jpg) repeat-y;
}
#Main #Middle {
margin:0 0 0 150px;
border: 0px;
background: #fff;
}
.padder {
margin: 0;
padding: 10px 20px 0 10px;
border: 0;
}
.spacer {
clear: both;
height: 0px;
font-size: 0px;
border: 0;
margin:0;
padding:0;
visibility: hidden;
}
not exactly sure where that space is comming from....when i add borders to the different sections, the space is in the logo block but im not sure why since neither the headder or the logo block have any kind of padding specified.... any help would be appreciated Hey Guys, I designed a header logo in the top left corner of my psd document. I am now slicing my design up and I can't seem to be able to position the header into the top left hand corner. Any help would be greatly appreciated. Here is my CSS Code: ul#nav { height: 91px; width: 271px; margin:30 auto; background: url(images/logo.jpg) no-repeat; } Hello ppl, the problem I got is the following: I have a set of pages consisting of a header a main content and a footer. I made the footer displaying at the bottom of the page even if the page is empty by the help of the following post: http://forums.devshed.com/showthrea...39&page=1&pp=15 The problem I have now is: in the css file I do not define the variable width for the header and it gets displayed like I would expect it if I said width=100%. Now if I do not define the width of the footer it is really small. If I define it like width=100% it looks ok in IE and like 102% in mozillabased browsers. Now I do not want to talk about IE vs. Mozilla issues, I just want to know why defining no width for the header works but not for the footer. here is a link to my page where footer has a width=100% : www.ovidius-journeys.de/index.html and the link to the coresponding css file is www.ovidius-journeys.de/tierraverde-screen.css here is a link to a test page where footer is lacking a width definition: www.ovidius-journeys.de/test.html and the coresponding css file is www.ovidius-journeys.de/test.css Please remember to test both url with IE and Mozilla to see the difference. I am seriously determined to fix this misbehaviour. THerefore I made a small drawing to illustrate things: www.ovidius-journeys.de/images/diagramm.jpg There is a hotlink protection active, I managed to bypass it a little but you still have to copy the url into a new browser window, meaning only referers from my domain are allowed but entering the url manually without sending a referer will work. The drawing shows how my pages are structured. I also added some atributes from the css file as far as I thought them relevant for this problem. Hey, I have a bit of a problem and am very new to using CSS. On a web site I am making I have used a CSS style sheet to position a table on the page. This what the coding on the sheet is like: table { position: absolute; top: 117px; left: 120px; width: 167px; } However, I have a second table that I wish to position using absolute positioning, but I have no idea how the browser can tell the difference between the two. As you can see above, the first table has been identified as 'table', but what can I call the second table so that I can use different pixel settings without effecting the first? Hi, I'm attempting to apply a left and right image to a tab when hovered. The images aren't simply curved corners, but rather curved inwards corners at the top and outwards at the bottom. The tabs are all of different widths and I'd like to avoid using a class for each tab obviously. here's an image depicting what I mean: So the issue is essentially that I need the a:hover class to apply two background images - one on the left, one on the right - as one image can't deal with different sized tabs. I know that won't be possible until CSS3, but I know there must be a way to do this with today's standards. The image is of the tab on hover. Without hover, it's just the plain gray background to the left and right of it. There's probably a method for these sort of issues on A List Apart or something, but I can't find one. Anybody have anything on hand, or any suggestions? Your help is appreciated. Thanks in advance! Hello I am very new to CSS. One of my problems is that my web experience is only in tools that generate the code. I"m needing what I"m told is a simple thing to do, but not finding it easy for me I tried to post with some links to my site, etc, but the rules won't let me post any links. I have posted in another CSS site, but fine it very inactive and not getting any help. What I'm trying to do All items below to make up the header of the site. A background graphic which fills across the screen, no matter the size of the window. I have this working, although if I shrink the window too far, it overwrites the graphic in item 2 below. A left justified logo graphic. Working fine. A Centered graphic. I have this showing, but it is not quite centered right, and it is a bit smaller than actual, and I cannot get it to space down a bit. (tried padding, does nothing. Trying margin spaces everything down, including item 1 above. A right justified graphic. This shows, but is VERY SMALL, much smaller than original graphic, and it does not right justify. NOTES The current code, below, is based on a tutorial I went through, using % for width. The idea being that if it is built based on percent of width, then whatever width of window, it would adjust. I used 900px for original calculations. I find that it only fills the window as if it is 900 px wide. So I redid the percentages based on 1500px. I've done lots of reading, Googling, and been trying all kinds of stuff and getting not too far with it. Tried px for width too, seems worse. Here is a print screen of the header: [IMG]URL[/IMG] Sigh...sorry...even img code has a url, and even though it showed in preview, I see it will not display it in actual message. The site I"m working on is shuttermaster.co (not com), where you can see what it looks like now. CSS Code Only including the code relevant to the header issue. I do have menu code in CSS, but it is not complete, and I'm not having problems with that. Code: #myHeader {width:auto;height:133px;
background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}
#myLogo {
float:left;
width:10%;
height:150px ;
margin-left:2.22%;
display:inline;
background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}
#myConame {
width: 15.33%;
height:90px;
margin-left:auto;
margin-right:auto;
background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat}
#myBanner {
float:right;
width: 29.73%;
height:150px;
background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}
The HTML Code Code: <div id="myHeader">
<div id="myLogo"></div>
<div id="myConame"></div>
<div id="myBanner"></div>
<div style="clear: both;"></div>
<div class="menu">
<ul>
<li><a href="http://shuttermaster.co">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
<li><a href="Link">Drop 2</a></li>
<li><a href="Link">Drop 3</a></li>
</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">About Me</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>
</div>
<div style="clear: both;"></div>
I hope I have been clear enough. Hoping someone can point me the right direction. Regards, and thanks.... This problem just started happening, but frustratingly I can't remember what I was changing when it started happening. The problem is that (almost) all the images on the site seem to be "bumped" 1px out of place, with a black border showing on the top and left hand sides of the images. This is not showing up with ALL images, however. I've embedded an image and you can see the effect on the logo, on the graphics in the body text, and on the sub-menu items (with the 'empty' box icons). However the effect does not occur on the menu items with the 'full' box icons. OK, apparently, I CAN'T EMBED AN IMAGE. Or a link to an image. Or a link to the site in question. SO I have no idea how I am actually supposed to get help for this problem. If someone can PSYCHICALLY DEDUCE what the problem might be without being able to view the site or an image of the problem, that'd be ACE! GAAAAH Alright, let's see if we can do this with JUST the CSS & HTML. Here is the CSS: Code:
html {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
}
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
background-image:url('background-index.gif');
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #666666;
min-width: 900px;
min-height: 100%;
}
img {
border:0;
}
a:link {
text-decoration: none;
color: #0096db;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #00abc7;
text-decoration: none;
}
#header {
width:900px;
height:80px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0096db;
}
#logo {
float:left;
width:140px;
margin:0;
padding:0;
}
#head_nav {
width:760px;
position:relative;
float: right;
background-color: #ebf9ff;
height: 80px;
margin:0;
padding:0;
}
#clear_both {
clear:both;
}
#sidenav {
float:left;
width:100px;
padding-left:10px;
padding-top:0;
margin-top:0;
}
#content_wrap {
float:right;
width:760px;
background-color: #ebf9ff;
background-image:url('content-background.gif');
}
#content {
float:left;
width:500px;
}
#content h1, h2, h3, ul {
padding-top: 15px;
padding-left: 15px;
}
#content p {
padding-left: 15px;
}
#focus_box {
width:260px;
float: right;
margin-top:0;
padding-top:0;
}
#focus_box h1 {
padding-top:15px;
}
#focus_box p, h1, ul {
padding-left:15px;
}
table.blue_highlight {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#0096db;
margin-left:15px;
margin-right:15px;
padding-top:15px;
padding:0;
margin:0;
}
#menu2 {
float: left;
width: 200px;
}
#main {
float: right;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666666;
}
ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666666;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: 700;
color: #0096db;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color:#666666;
font-weight: bold;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: ;
}
/*!!!!!!!!!!! MENU STYLES FOR LEVEL1MENU !!!!!!!!!!!*/
#level1menu {
position:absolute;
bottom:0px;
padding-left:60px;
}
#sitemap li {
margin-left: 15px;
}
#sitemap ul {
margin-bottom:15px;
}
#sitemap ul li ul {
margin-left:15px;
}
And here is the HTML: Code:
<%@ LANGUAGE="VBSCRIPT" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>BB Group Homes</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">@import "style.css";</style>
</head>
<body class="developments">
<div id="header">
<div id="logo">
<!--#INCLUDE FILE="logo.asp" -->
</div>
<!--END LOGO-->
<div id="head_nav">
<!-- #INCLUDE FILE="menutop.asp" -->
<!-- END MENU_TOP -->
<div id="level1menu">
<!-- #INCLUDE FILE="level1menu.asp" -->
</div>
<!--END level1menu-->
</div>
<!--END HEADER -->
<div id="clear_both"></div>
<div id="sidenav">
<!-- #INCLUDE FILE="menu_developments.asp" -->
</div>
<div id="content_wrap">
<img src="banner_developments1.png">
<div id="focus_box">
<!-- #INCLUDE FILE="focus_boxes.asp" -->
</div>
<div id="content">
<h1>Developments</h1>
<table class="blue_highlight">
<tr>
<td><a href="golfsociety.asp"><img src="Golf_society_residence_logo.gif"></a></td>
<td><h2>Golf Society Residence</h2>
<p>The Golf society project was initiated for a variety of reasons, some of which include the scenic environmental landscape, increasing trend of Bodrum as a holiday destination for tourists and natives, the beach and the close proximity to the airport.</p>
<p><a href="golfsociety.asp">-> More</a></p></td>
</tr>
</table>
<table class="blue_highlight">
<tr>
<td><a href="thevillage.asp"><img src="thevillagelogo.gif"></a></td>
<td><h2>The Village Bodrum - Tuzla</h2>
<p>You will find everything you have dreamed of at Vita Park Golf Resort, a world-c1*** destination in the heart of the peninsula Bodrum, the famed pearl of the Aegean Sea. </p>
<p><a href="thevillage.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
<td><a href="bluemarina.asp"><img src="bluemarinalogo.gif"></a></td>
<td><h2>Blue Marina Bodrum - Yalikavak</h2>
<p>Blue Marina Apartments, overlooking the spectacular view of Yalıkavak amongst the centeranian olive trees, designed for all year long living, your comfort and every desire is planned to the finest detail.
</p>
<p><a href="bluemarina.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
<td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
<td><h2>Blue Life Bodrum -Yalikavak</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
<td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
<td><h2>Kalkan Luxus Villas</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<p></p>
</div>
</div>
</body>
</html>
</body>
</html>
A lot of the images that are showing the 1px-off problem are contained in the SSIs (I don't think anyone here wants me to post the full content of the SSIs, do they?) but quite a few of the images in the main HTML are, as well: banner_developments1.png & all the logos. This would be a lot easier if I could show you a picture of what was going on. I have a table with a width of 100%. At the right end, I want to position an image with its top right corner relative to the top right corner of the table. I cand quite figure out how to do it with CSS. Can someone give me a hint? |
|||||||