|
HTML - Help With Placement Of An Image On My Navigation Bar
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? Similar TutorialsI 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> 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> Hi, 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 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 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? If I try using the IMG tags in the frame that contains my navigation bar, it moves the picture down and it looks very ugly. In the other hand, I need to create an image map for it but I can't seem to find a way to do that. Halp. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Navigation Bar</TITLE> <LINK REL="shortcut icon" HREF="favicon.ico" TYPE="image/x-icon"> <LINK REL="icon" HREF="favicon.ico" TYPE="image/x-icon"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <META NAME="author" CONTENT="CENSOREDCENSOREDCENSORED"> <META NAME="version" CONTENT="0.7"> <META NAME="description" CONTENT="CENSOREDCENSOREDCENSORED."> <META NAME="keywords" CONTENT="CENSOREDCENSOREDCENSORED"> </HEAD> <BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0"> <TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0" HEIGHT="145"> <TR ALIGN="left" VALIGN="top"> <TD HEIGHT="145" WIDTH="780" BACKGROUND="navbar.jpg" NORESIZE BORDER="0" ALT="Navigation Bar"></TD> <MAP NAME="navbar"> <AREA SHAPE="rect" COORDS="341,99,434,124" HREF="main.html" ALT="Home"> </MAP> </TR> </TABLE> </BODY> </HTML> Obviously incomplete, I was trying to get the map to work. I removed the USEMAP="#navbar" because using it with the IMG tags made it look like crap. navbar.jpg is similar to this. Here's a link to the page I'm currently working on. http://www.vancouver4condos.com/test/ The big map picture is set up as an image map, with all the areas already specified. Each area gets highlighted when viewer hovers the cursor over it. Also, right above the map is a navigation menu, with all the buttons corresponding to each of the areas on the image map below. I was wondering if there is a way to connect each of the navigation buttons with their corresponding map image areas in such a way that when the user hovers the cursor over a button, its map area will automatically get highlighted. Ideally, the opposite would also be true - when hovering the cursor over one of the map areas, its corresponding navigation button would also highlight. 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, 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>
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 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 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 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 Hi Could anyone shed some light on why the footer on this page isn't staying at the bottom of the page? Its ok on the other pages so I'm assuming its got something to do with the contact form on the page. http://www.buckleigh.co.uk/contact.asp Here's the css: http://www.buckleigh.co.uk/screen.css Any help greatly appreciated, thanks. Kev Okay, well lately I've been really into making HTML layouts. To make sure you know exactly what I'm talking about, you can view one I found at the following adress : http://www.horse-lover-layouts.com/p...dow_paints.htm I want to be able to make boxes like that, and also seperate columns, and rows. The code below is the current one I've been using, and I can't figure out what's wrong with it. When I would type in it, and press enter, it would go down a line. All it did was keep going. Another thing, I can't place them for the life of me, like I can't put them somehwere specific. Could you help me out a bit with that? HTML Code: <DIV style="TEXT-ALIGN: left; WIDTH: 100%; FONT-FAMILY: arial; HEIGHT: 100%; COLOR: #cb642d; FONT-SIZE: 9pt; OVERFLOW: auto"> <DIV><BR> <H5>Title goes here</H5> <P>Body here Body here Body here Body here Body here Body here Body here Body here Body here Body here Body here Body here Body here Body here Body here Body here Body here Body here Body here Body here Body here Body here Body here v </ P> <P></P></DIV><BR> |
|||||||