|
HTML - Image Placement Woes
G'day,
I've got a three column page including a header and footer too. When I place an image in my header div, my left nav gets pushed into my content DIV. Any idea what I should be doing? Here is the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Impel Personal Training | Mobile Personal Fitness</title>
<style type="text/css">
body {
margin:0;
padding:0;
text-align: center;
background-color:#fff;
color:#000;
font-family: Arial, sans-serif;
font-size: 10pt;
}
#container {
/*width: 100%;*/
/*margin: 0;*/
background-color: #fff;
color: #333;
border: 1px solid gray;/*grey;*/
text-align: left;
/*line-height: 130%;*/
}
#top {
padding: 0;
height: 100px;
background-color: #2F2E7E;
color:#000;
border-bottom: 1px solid gray;
}
#top h1 {
padding: 0;
margin: 0;
font-family: Georgia,serif;
font-size: 130%;
}
#leftnav {
float: left;
width: 160px;
margin: 0;
padding:10px;/* 1em;*/
}
#rightnav {
float: right;
width: 160px;
margin: 0;
padding:10px;/* 1em;*/
}
#content {
margin-left: 180px;/*165px;*/
border-left: 1px solid gray;
margin-right:180px; /*165px;*/
border-right: 1px solid gray;
padding:10px;/* 1em;*/
text-align:justify;
background: url(fadelogo.gif);
background-repeat: no-repeat;
}
#footer {
clear: both;
margin: 0;
padding: .5em;
color: gray;
background-color: #fff;
border-top: 1px solid gray;/*grey;*/
font-family: Verdana, Arial, sans-serif;
font-size: 75%;
text-align: center;
}
#footer span {
margin:0 20px;
}
#leftnav p, #rightnav p {
margin: 0 0 1em 0;
}
#rightnav p {
margin: 0 0 1em 0;
font-family: verdana, arial, sans-serif;
font-size: 75%;
}
#content h2 {
margin: 0 0 .5em 0;
font-family: Century Gothic, Tahoma;
font-weight: normal;
color: #8DBA2C;
}
.smallgrn {
font-family: Verdana, Arial, Sans-serif;
font-size: 100%;
color: #8DBA2C;
}
.smallnrm {
font-family: Verdana, Arial, Sans-serif;
font-size: 100%;
}
#logo {
float: left;
}
#picright {
float: right;
}
/*#content { max-width: 36em; }*/
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Welcome</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="rightnav">
<p>Brendon Osborne<br />
<span class="smallgrn">Accredited Personal Trainer</span>
Ph: 0405 602 979
<span class="smallnrm">bosborne@hotmail.com</span>
</p>
<p>Dean Morrissey<br />
<span class="smallgrn">Accredited Personal Trainer</span>
Ph: 0406 094 261
<span class="smallnrm">deanmorrissey@hotmail.com</span></p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Copyright © 2006 IMPEL Personal Training<span>|</span>ABN: 99 999 999 999<span>|</span>Site Design by Jamie Press
</div>
</div>
</body>
</html>
Cheers guys, I've got no idea what I should be doing. Jamie Similar TutorialsHi, I want to place an image on the bottom right corner of the table box and I want to wrap the text with image. For example: some text some text some text some text some text some text some text some some text some some text some some text some some text some Now this bottom right corner which is blank i want to put image in this area, how can i do this, this is all a table column. Please help thanks Okay so hello everyone, my names chris. I recently decided I was going to do web hosting, and had a friend start building me a template since I lack html. But he only created me a nice background image to add onto. So I centered it on the page and started adding "Draw AP Divs" onto it. At first I had the images perfectly aligned in my firefox browser and I was ready to continue adding stuff to it, however, the images are misplaced in everyone elses browsers (i.e and firefox) And I'm completely clueless on how I can get the images properly aligned in there spots for both browsers.. As you can see there not aligned in that view (internet explorer) but in firefox there fine.. and when I fix them to look right in internet explorer, they mess up in firefox. I'm at a loss. Heres the code if you want it to be posted he 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>***aS Hosting</title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
#apDiv1 {
position:absolute;
left:153px;
top:122px;
width:418px;
height:234px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:95px;
top:310px;
width:56px;
height:48px;
z-index:1;
}
#apDiv3 {
position:absolute;
left:496px;
top:306px;
width:223px;
height:30px;
z-index:1;
}
.style2 {
color: #CCCCCC;
font-weight: bold;
}
#apDiv4 {
position:absolute;
left:496px;
top:359px;
width:401px;
height:256px;
z-index:2;
}
.style3 {color: #CCCCCC}
#apDiv5 {
position:absolute;
left:234px;
top:318px;
width:140px;
height:149px;
z-index:3;
}
#apDiv6 {
position:absolute;
left:237px;
top:508px;
width:138px;
height:150px;
z-index:4;
}
#apDiv7 {
position:absolute;
left:907px;
top:36px;
width:137px;
height:15px;
z-index:5;
}
.style4 {
color: #FFFF00;
}
#apDiv8 {
position:absolute;
left:511px;
top:181px;
width:145px;
height:25px;
z-index:6;
}
.style6 {color: #666666}
#apDiv9 {
position:absolute;
left:712px;
top:219px;
width:160px;
height:22px;
z-index:7;
}
#apDiv10 {
position:absolute;
left:851px;
top:247px;
width:140px;
height:19px;
z-index:8;
}
#apDiv11 {
position:absolute;
left:851px;
top:280px;
width:141px;
height:20px;
z-index:9;
}
#apDiv12 {
position:absolute;
left:854px;
top:312px;
width:138px;
height:21px;
z-index:10;
}
a:link, a:visited, a:hover
{
text-decoration: none;
}
.style7 {color: #FF00FF}
#apDiv13 {
position:absolute;
left:748px;
top:21px;
width:291px;
height:171px;
z-index:5;
}
#apDiv14 {
position:absolute;
left:916px;
top:29px;
width:105px;
height:15px;
z-index:6;
}
#apDiv15 {
position:absolute;
left:919px;
top:54px;
width:106px;
height:16px;
z-index:7;
}
#apDiv16 {
position:absolute;
left:777px;
top:87px;
width:43px;
height:17px;
z-index:8;
}
#apDiv17 {
position:absolute;
left:920px;
top:81px;
width:106px;
height:16px;
z-index:8;
}
#apDiv18 {
position:absolute;
left:918px;
top:105px;
width:107px;
height:15px;
z-index:9;
}
#apDiv19 {
position:absolute;
left:919px;
top:129px;
width:108px;
height:15px;
z-index:10;
}
#apDiv20 {
position:absolute;
left:918px;
top:154px;
width:106px;
height:15px;
z-index:11;
}
-->
</style></head>
<body>
<div class="style2" id="apDiv3">November 02, 2007</div>
<div class="style3" id="apDiv4">
<p>Text</p>
<p><br />
</p>
</div>
<div class="style3" id="apDiv5">Text</div>
<div class="style3" id="apDiv6">Text</div>
<div id="apDiv13"></div>
<div id="apDiv14"><img src="home.jpg" width="45" height="14" /></div>
<div id="apDiv15"><img src="aboutus.jpg" width="67" height="14" /></div>
<div id="apDiv17"><img src="support.jpg" width="61" height="13" /></div>
<div id="apDiv18"><img src="hostingplans.jpg" width="100" height="14" /></div>
<div id="apDiv19"><img src="links.jpg" width="42" height="14" /></div>
<div id="apDiv20"><img src="controlpanel.jpg" width="103" height="14" /></div>
<div align="center"><img src="back.jpg" width="825" height="800" /></div>
</body>
</html>
Any help is great.. and appreciated. www.vintageparlor.com I am trying to place a google map right below the stacked pictures on the site above. The problem I am running into is if I add the code above the paper image, if I move the google script down with <br>'s the paper moves also. If I put the script after the paper image, it appears below it. HTML Code: <html lang="en"> <head> <title>Vintage Parlor L.L.C.</title> </head> <a href="http://www.vintageparlor.com"><img src="logo.png" align="left"></a><img src="facebook2.png" align="right"> <br> <br> <br> <br> <br> <br> <br> <center><font color="white" face="script"><table border="0" cellspacing="20"> <tr> <td><font color="white" face="script" size="6"><a href="http://www.vintageparlor.com">Home</a></td> <td><font color="white" face="script" size="6">Photo Gallery</td> <td><font color="white" face="script" size="6">Contact Us</td> </tr> </table></font> </center> <body background="background_new1.png" link="white" vlink="white" alink="white"> <br> <br> <br> <table border="0"> <tr> <td rowspan="1" colspan="5" width="921" height="747" background="paper.png"> </tr> </table> <br> <br> <br> <br> <br> <br> </body> </html> HTML Code: <iframe align="right" width="300" height="245" frameborder="1" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&ie=UTF8&ll=33.582323,-111.891396&spn=0.009993,0.021136&t=k&z=16&output=embed"></iframe> I am trying to place images along the left and right sides of my page with text running down the center. However, the images in IE tend to line up in the middle with the text but everything is fine in FF. Code: <p class="style3" align="center"> </p> <p align="center"><a href="R100.html">R100</a><a href="FB2.html"><img src="images/FB2.png" alt="FB2" align="right" height="310" width="317" /></a><br /> <a href="ER.html"><img src="images/ER.png" alt="ER" align="left" height="310" width="310" /></a><a href="ER.html">ER</a><br /> <a href="ER-R.html">ER-R</a><br /> <a href="EP.html">EP</a><br /> <a href="EC.html">EC</a><br /> <a href="EC-R.html">EC-R</a><br /> <a href="E3.html">E3</a><br /> <a href="E3-R.html">E3-R</a><br /> <a href="FK.html">FK</a><br /> <a href="FK-R.html">FK-R</a><br /> <a href="GK.html">GK</a><br /> <a href="GT.html">GT</a><br /> <a href="KS.html">KS</a><br /> <a href="GS.html">GS</a><br /> <a href="FB2.html">FB2</a><br /> <a href="HB2.html">HB2</a> <br /> <a href="IB2.html">IB2 </a></p> <p class="style1" align="center"> </p> <p class="style1" align="center"><a href="4-Pole.html">- 4-Pole Alternators - General Information -</a></p> Ok I've redesigned my friends website back to his old look since he didnt like mine http://acidtripmedia.com/lmi/ But I need a little help getting the navigation images & links properly. Right now the 2nd row of links is behind the image for the navigation Here is the original site to compa http://lmiinc.com/LMIinc_Marksmanship.html What can I do to fix the placement of the image? Dear Forum, I'm a new member and needing quick help for a client who wants to rollover images and show different text for each image in a single location. I normally use Dreamweaver to create my rollover images but don't have text associated with that. The image will be a link so the client can click on the rollover image to enter that section of the Web Site. The text location needs to be in a particular location down below the images and in one location. I will have as many a 20 images or more all with different titles. I would like to use a java script since that's what I most familiar with but not opposed to using html. I'm in the process of the design as we speak so I need help as soon as I can receive it. Thanks ahead of time. I'm trying to build a "Start Menu" style nav based on something I created in BlueVoda. I've finally gotten all the java working, but i can't make my button float over my header image like I had it in the WYSIWYG editor. My site is arlenbresh.atspace.me I've tried style="position:absolute" but to no avail. What am i missing? Should I be taking a different approach to this? I am trying my best to get compliant with w3c as i can but when i use these dtd i get major issues. PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01"> with internet explorer; if i use any of those dtds then css styles like the y-overflow:; dont work and also a table border color changes slightly. even with firefox; the table border color changes slightly i guess i was wondering if there was a list or a chart of which css style is not allowed or not functional in each of the major browsers since im new to dtd compliance, i think this would be a very useful tool for me and other newbies as well I got a prob: the site i'm designing looks great in IE, but in Firefox, all the tables collapse and it looks crap. i've taken care to sort the opacity of my transparent divs with the "-moz-opacity" tag, but is there a tag that does the same for tables? check it out he http://www.creativetruth.co.za/divercity/index.html Hello, I have 6 Div's that i need placed one below the other. 3 of the Div's are invisible from the start, so I want the ones below it to take their spot so there's not a big white space where they're gonna be. Right now all the div's are just on top of each other and it's a mess. How would i format the div's so they're stacked? Thanks! www.onlineeire.com I am looking to put my adsense code on the far right of the mainpage. Can someone please write this for me as I dont seem to be able. Adsense Code: <script type="text/javascript"><!-- google_ad_client = "pub-4509855354636499"; /* 600x120, created 22/01/08 */ google_ad_slot = "5686969599"; google_ad_width = 120; google_ad_height = 600; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> Thanks very much in advance. Hi, Let say i want to place a div element 20px from the top vertically and 400px to the right from the center of the webpage, how would I do that? I tried <div style="position: absolute; top: 20px; left: expression(document.body.clientWidth / 2 + 400px); >div content</div> but it's not working. Can someone help me. Thanks Hi, I'm working on trying to build my website with images. The problem that I'm having is that the image for the main part of the website is automatically moved down instead of aligning to the top. I would like a little bit of space between the top and the image, but not so much that it causes the website to have to vertically scroll, as it currently is. Here is a screenshot of the problem: http://img247.imageshack.us/img247/3064/screenvp2.jpg If you want to see the website, go here and click on the image in the middle: http://katelphotography.com/popup.html And here is the code I'm using, if that would be helpful. Thanks! HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>k a t e L p h o t o g r a p h y</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
.style6 {
color: #D9ECBB;
font-size: x-small;
}
.style11 {color: #DEF0C6; font-family: Arial, Helvetica, sans-serif;}
-->
</style>
</head>
<body background="http://img360.imageshack.us/img360/9241/backgroundmo6.jpg">
<div align="center"><br>
<br>
<br>
<br>
<img src="http://img119.imageshack.us/img119/8839/71647178vd9.jpg" width="934" height="679" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="-6,251,92,266" href="photogs.htm">
<area shape="rect" coords="-4,230,95,246" href="me.htm">
<area shape="rect" coords="0,291,92,307" href="pricetag.htm">
</map>
<br>
<br>
<br>
<span class="style6"></span></div>
</body>
</html>
Hello, This is the site in question: www.hbcacworth.org I would like to place a small rectangular logo on the right side of the page on the same line as the church logo which is already there. I cannot figure out how to do this. Does anyone have any suggestions? Thank you so much. bt A friend has asked me to do some modifications to her current website (see sample page here http://allgiftsonline.com/jewelry.php). I'm trying to get rid of the DHTML scripted menu and use simply the large menu graphic and regular links. For some reason I can't wrap my brain around how to get the link placement correct. The way it is now (http://allgiftsonline.com/template2.htm) looks ok in IE but not in all browsers. I'm using the large graphic as the background image for the table cell; my issue is how to get the links to begin a few lines into the solid purple area on all browsers. thanks in advance, Amy I want to put few ads on the given pciture(Attached) but when i do that then one extra space gets created whcih looks bad. I exactly wanna put ad there. Help me there. I m putting source code of my web site.. you can also check my site at www.nutraforum.com Please tell me how to put code and where so and whcih tag shd be added to get my ad there. I will be greateful if you check the sourc code of my forum. i m not abl to put souce code as forum allows only 10000 char . Hi newbie here, hope you can help. I need my buttons to be sitting side by side horizontally but not sure what code should be added to do so. At the moment they are sitting vertically. It appears that the </FORM> at the end of each line creates a BR. Here is example of the code, obviously the urls are fictitious <FORM METHOD="LINK" ACTION="http://joebloggs.com/"> <INPUT TYPE="submit" VALUE="sausages"></FORM> <FORM METHOD="LINK" ACTION="http://fredbloggs.com/"> <INPUT TYPE="submit" VALUE="pies"></FORM> <FORM METHOD="LINK" ACTION="jimmybloggs.com/"> <INPUT TYPE="submit" VALUE="meatballs"></FORM> What do I need to edit to enable the buttons to be horizontally placed. Thank you Jim Hey guys, I customized a table & banner to include a 768x90 advertisement, and it looks fine (tested in Firefox & IE8) in the file I created: http://www.sidelinescouting.net/index7.shtml However, when I try to transfer this header to the main pages, the banner doesn't align anymore. Here's what it looks like when I do that: http://www.sidelinescouting.net/index-bad.shtml There are 3 things I notice: 1) 768x90 is misplaced, obviously (in both browsers) 2) Navigation drop-down raises higher, too close to banner, which may be a result of #3 he 3) Image starts to repeat (Copyright disclaimer shows up twice, should just be up top) Any help is appreciated! This forum has always been good to me. |
|||||||