|
HTML - Div Boxes : Placement, And Code Help
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> Similar TutorialsI know these are pretty easy questions, but I don't know that much about html and I couldn't seam to find the answer on w3 or anywhere else. NOTE: This it mainly for html, but if you have a solution in javascript or css, that would be fine. 1. How do you place a table (single celled) at a set distance from the left side and top of the page? 2. How do place a box (with a set color, thickness etc.) anywhere on the page (the same way as the table)? I know I could use the table thickness, but I like it set to "0" because I don't like its border look. Help please, thanks. This is really strange. If I write my code like this, --------------- <td style="height: 100% width 16px; background-image: url('widgets/gen_72.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="1" alt="widget"></td></tr> <tr><td width="16" height="17"><img src="widgets/gen_76.1.gif" border=0 width=16 height=17 alt=""></td> <td style="height: 17px width 100%; background-image: url('widgets/gen_69.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="1" alt="widget"></td> <td style="width: 16px height 17px; background-image: url('widgets/gen_75.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="17" alt="widget></td></tr></table> --------------- my page displays correctly. But if I simple move the end tags for the table like this, ----------------------- <td style="height: 100% width 16px; background-image: url('widgets/gen_72.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="1" alt="widget"></td></tr> <tr><td width="16" height="17"><img src="widgets/gen_76.1.gif" border=0 width=16 height=17 alt=""></td> <td style="height: 17px width 100%; background-image: url('widgets/gen_69.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="1" alt="widget"></td> <td style="width: 16px height 17px; background-image: url('widgets/gen_75.1.gif'); padding: 0px; margin: 0px; border: none;"><img src="widgets/spacer.gif" width="16" height="17" alt="widget"> </td></tr></table> ------------- the page adds an extra table image below the table. Just adding a space before the </td> tag throws off the results. How can this be? I've never had a web page do this before. Can someone explain this to me? It simply doesn't make sense? Am I doing something wrong that I'm not seeing? Thanks i have one blog www.andhratalkies.co.nr i want to put Register and login buttions with text boxes(signup and signin) and it should be work can any one give me the code and instruct me. plzzz it's urgent thanks MO Html code for Text Boxes that the user writes down his details and then click to a button and his details comes to an eimail... look an example ... http://www.arkadiko-meli.gr/form.asp?i=2 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 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. 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> 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 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. 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 . 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 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 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 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 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 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? |
|||||||