|
HTML - A Basic Div Question
edit: Problem solved, how do I delete this thread?
Similar TutorialsI normally work in Flash which is much more intuitive for me. I am making and effort to design more in HTML. Here is the most basic of questions.. When doing designs in Photoshop or Illustrator, what is the best way to save slices. Gif or Jpeg. Are there tutorials or personal comment on the forum about the best practice for slicing sites. Thanks! Hi, In microsoft word you can make the text go all the way across the page so that the beginning of each line and end of each line are inline with the one above and below, if you know what I mean. I can't remember what it is called. But it basically adds small amounts of space between each letter so it goes all the way across. How is this done in HTML/CSS if it can be done? Thank you as always, Ash Hi guys, I am trying to help my friend figure out what is going on with his (VERY BASIC) website. I believe that he created it using dreamweaver originally, and then tampered with the code a little. The problem is as follows: The website seems to display perfectly as intended on mac ( safari) however when viewed on PC wit internet explorer the frames do not not work properly, They are opening in different windows etc. I know that no-on ould ever recommend building a site like this with frames, but would recommend iframes etc, however i ws wondering if there is a flaw in the code that can be fixed to resolve his problem simply? Thanks for even taking the time to read this, any helpful advice would be most appreciated! the code is as follows: The code titled "main" the main piece of code, then the coodes titled "top", "middle" and "bottom" are the codes for the respective frames. MAIN: -------------------------------------------------------------------------------------------------------- HTML Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> </head> <frameset rows="67,*,74" framespacing="0" frameborder="no" border="0"> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="topframe.html" name="topFrame" scrolling="No" noresize="noresize" name="topFrame" /> </frameset> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="midframe.html" name="mainFrame" name="mainFrame" title=""mainFrame" target="_self" /> </frameset> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="bottomframe.html" name="bottomFrame" scrolling="No" noresize="noresize" name="bottomFrame" /> </frameset> </frameset> <noframes><body> </body> </noframes></html> TOP: -------------------------------------------------------------------------------------------------------- HTML Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #A890AE;
background-image: url(Images/maze%20strip%20top.jpg);
}
.style1 {font-size: 8px}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
-->
</script>
</head>
<body onload="FP_preloadImgs(/*url*/'Images/image-g.gif'); MM_preloadImages('Images/discography-black.gif','Images/images-black.gif','Images/text-black.gif','Images/download-black 45pt.gif','Images/download-g.gif','Images/download-b.gif','Images/image-g.gif','Images/text-g.gif')">
<div align="center"><img src="Images/divider.gif" alt="." width="65" height="33" /><a href="download.html" target="mainFrame" onmouseover="MM_swapImage('download','','Images/download-g.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/download-b.gif" name="download" width="205" height="10" border="0" id="download" /></a><img src="Images/divider.gif" width="30" height="33" /><a href="images.html" target="mainFrame"><img src="Images/image-b.gif" name="images" width="124" height="10" border="0" id="images" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'images',/*url*/'Images/image-g.gif')" /></a><img src="Images/divider.gif" width="30" height="33" /><a href="text.html" target="mainFrame" onmouseover="MM_swapImage('text','','Images/text-g.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/text-b.gif" name="text" width="104" height="10" border="0" id="text" /></a><img src="Images/divider.gif" alt="." width="65" height="33" /><a href="midframe.html" target="mainFrame"></a></div>
</body>
</html>
MIDDLE: -------------------------------------------------------------------------------------------------------- HTML Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>untitled</title>
<style type="text/css">
<!--
body {
background-image: url();
}
.style1 {
border-width: 0px;
}
-->
</style>
<base target="_self" />
</head>
<body>
<div align="center">
<p> </p>
<p><a target="mainFrame" href="download.html">
<img alt="" src="Images/doomsayercoverthumb.jpg" width="319" height="319" class="style1" /></a></p>
<p> </p>
<p> </p>
</div>
</body>
</html>
BOTTOM: -------------------------------------------------------------------------------------------------------- HTML Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>untitled</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
background-image: url(Images/maze%20strip%20bottom.jpg);
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 13px;
font-weight: bold;
}
.style2 {font-size: 10px}
.style4 {font-size: 12px}
-->
</style></head>
<body>
<div align="center" class="style1">
<p class="style2"> </p>
<span class="style4">last updated 08/12/2011</span></div>
</body>
</html>
I am in the process of writing a spell-checker in PHP, but repeatedly stumble due to my less than perfect knowledge of HTML basics. (1) What's the most straightforward way to open a second page on top of the currently active one? Is it via JavaScript, or can it be done using HTML itself? (2) If I need to update a text area on the original page at the time I close the overlying one, is this again best done by JavaScript? My aim in both of the above is to avoid adding any code to the underlying page, other than the addition of a "SpellCheck" button and the coding associated with that. Many thanks for any pointers. Hi, I am creating a one page site that uses an iframe to display the other pages. So I create an index.html with an iframe in it and drawing an initial 'page': <iframe src="pages/welcome.php" name="carter-fairfax" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="900px" height="910px"></iframe> I then create another 'page' on the site and link to it using the following: <li><a href="pages/who-we-are.php" target="carter-fairfax" frameborder="0" scrolling="no" width="900px" height="500px">who we are</a></li> Everything displays fine except that there is a good deal of white space at the bottom, obviously because there is a difference in the height of the iframe - is there an elegant way to get round this problem. I do have the containing div height set to auto. Many thanks, Keith Hulse hi, I'd like to say that I'm extremely new to xhtml and CSS, so please bare with me. My question is simple, consider I have this code HTML Code: <table class="mainTable" border="0" cellspacing="30">
<tbody>
<tr>
<td>
<p><b><a class="button" href="l1.html"
target="_blank">Link1</a></b></p>
</td>
<td>
<p><b><a class="button" href="l2.html"
target="_blank">Link2</a></b></p>
</td>
<td>
<p><b><a class="button"
href="l3.html" target="_blank">Link 3</a></b></p>
</td>
<td>
<p><b><a class="button"
href="l4.html" target="_blank">Link 4</a></b></p>
</td>
</tr>
</tbody>
</table>
1) what does target="_blank" mean? 2) My intention is to place this table in the upper center of the screen. How can I center the table ? 3) The height on each cell in this table is huge, how can I decrease the height of the cells? Thanks Hi! This is my first post here. I am a part time web designer, (I must admit, better with the graphics than the coding). I am designing a page and I want the background to be black for say 1000 pixels down, and then white after that. How do I accomplish this? Does anyone know an easy way to create backgrounds with several tones? Thanks... Cosmos I want to create a two column table that, in one of the rows, has a large picture in the second column. I wanted to "wrap" the picture in a <div> and give the div scroll bars so the user can scroll horizontally and vertically to see the entire picture, but still keep the width of the table as the same size as the width of the browser window. The div part seems to work fine. The large picture appears in the smaller div and the div has the scroll bars that I want. But, the table is still sized to contain the ENTIRE width of the photo, so the other rows in the table go off the edge of the browser window (because the image is wider than the browser window). Is there a way that I can limit the table width to only be the width of the browser, and have a large photo contained in a scrolling div, within one of the table rows. I will include some basic HTML code to demonstrate the problem. Just insert a path to some large image you might have, for testing, into the image tag's src property. (the image I am using is 1600x1200) Thanks, in advance, for any help you can provide. 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>Test a Large Image in a Table</title> </head> <body> <table style="border-bottom-width:thin"> <tr style="width:300px;"> <td style="width:20%; background-color:gray"> Title #1 </td> <td style="width:80%; background-color:red""> Why does this row go past the edge of the page? </td> </tr> <tr style="width:300px;"> <td style="width:20%; background-color:gray"> Title #2 </td> <td style="width:80%"> <div style="overflow:auto; max-width:60em; min-width:15em;"> <img src="" alt="some large image" /> </div> </td> </tr> </table> </body> </html> Hi all im really new to html. I guess this question is really basic to the expert html ers but just need a bit of help. I want to add some text say i got a <p> tag and want to write just a sentance such as .. <p>I am learning html, it uses tags like this <a,b> which can load images etc. </p> of course a,b isnt a tag, but if i load this basic text in a web browser it would ignore the <a,b> and come up as validation error in the validator. So pretty much is there a way around of displaying <any letters or words> without the browser thinking its some sort of tag? thanks for the help! Im designing a new site and I was kind of wondering a few things that I was hoping to get some answers to. I wasnt sure where this should be posted so if its in the wrong spot please accept my appology. So I do know I want to do alot of css and make it look very professional. 1) I remember at one time that you should make the site big enough to accomidate an 800x600 resolution. But considering that 1024x768 and bigger is pretty common place should I be scaling up to that or still stay at 800x600? Can someone please help me? How do I move the entire image up on following index page: www.AndyG.com Note that there is a one inch gap between top of computer screen and top of image...I just want to move image way up to top... Thanks a lot! Andy Hi, i have been asked to create a page for an existing website. I have created the page using one of the site pages html code, basically i just copied the html layout, and added my own pics/words, and saved it on my computer. What have to do now is get this page to the website administrator. What is the best way?. I tried to upload to a server without success. Can it be emailed?. All i need is for the website admin to view the page so hey can add it to the site. Sory to bother you with simple stuff, Thanks, Tom. hi. i have found a site that displays their images the way i want to http://www.ukhotelsupplies.co.uk/ i want 3 rows and 3 columns of pics with a text lable above it whats the best way of doing this please. a table would be easy but people say not to use them. thanks Hello i hav my own small website that i use for shortcuts for a webiste i use and have this in firefox using the "load this bookmark in the sidebar" option. So what i want is when i click the link in my sidebar that it opens in the tab i have opened and not in the sidebar if you get me. Any help would be welcomed. thanks hi there, i have a basic page layout written consisting of 3 tables. however, i have a queery. How would i go about putting a line break between the top table (the banner table) and the second table (links) and the same again between the second and third (content) tables. I've provided my code below. Thanks Stuart <body> <center> <table id="shell" title="Shell" height="250" width="100%" border="0" bgcolor="black" cellspacing="1" cellpadding="0"> <tr height="50"><td bgcolor="white"> <table title="banner" id="banner"> <tr><td>Banner goes here</td></tr> </table> </td></tr> <tr height="25"><td bgcolor="DFE6EF"> <table title="Navigation" id="navigation"> <tr><td>Links!</td> <td>Links!</td> <td>Links!</td></tr> </table> </td></tr> <tr><td bgcolor="white"> <table title="Content" id="content"> <tr><td>Content goes here</td></tr> </table> </td></tr></table> </body> </html> I got this code (below) from an html tutorial and added into mt index page and my css file. And all that shows on the web page is CONTENT GOES HERE. I guess I need a corner image named box-bg? Can you help me with one? And how do I add a light-grey, thin border around the box? Thanks. Code: In index page:
<div class="box">
<div class="topleft">
<div class="topright">
<div>
CONTENT GOES HERE
</div>
</div>
</div>
<div class="bottomleft">
<div class="bottomright">
</div>
</div>
</div>
and in CSS:
.box div.topleft {
display: block;
background: url("../images/box-bg.png") top left no-repeat white;
padding: 2.0em 0em 0em 2.0em;
}
.box div.topright {
display: block;
background: url("../images/box-bg.png") top right no-repeat white;
padding: 2.0em;
margin: -2.0em 0 0 2.0em;
}
.box div.bottomleft {
display: block;
height: 45px;
margin-top: -2.0em;
background: url("../images/box-bg.png") bottom left no-repeat white;
}
.box div.bottomright {
display: block;
background: url("../images/box-bg.png") bottom right no-repeat white;
height: 45px;
margin-left: 3.0em;
}
I need to create a very basic nav bar with some properties. Here are my requirements below: *I use six images in place for the link *I use six additional images for 'hover images'. So when the user hovers over one of the nav images a new one shows up *Each additional image is different. *I need it to work in ie6(hopeful), ie7, ie8 *I would like for it to be valid code as well. Now I'm busy doing css navs and I forget the 'old school' days of html nav bars. What would be good resources for such a navbar for me to review and create this? Any help would be greatly appreciated. I made a table out of a sliced image out of adobe illustrator. I left a big white space in illustrator where I want to make a seperate frame, and illustrator saved this out as an image file. I would like to take this segment of the table, and make it into a frame. Is there an easy way to make this portion of the table reference another .html file? Thanks in advance. Hi I am trying to add some custom text below a frameset. Basically can anyone add just a simple header below the frameset in the following code> Code: <html> <frameset cols="25%,*,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html> The code comes from this page: http://www.w3schools.com/tags/tryit....tml_frame_cols and I've tried the usual ways of adding a body tag and added a h2 tag below it, but i can't get it to work - either i can get the h2 tag to appear or the frameset. Can anyone help? Thanks I am a newbie to this html thing but I have a task that is a little complicated that I need to do often. I want to be able to work with a design like in the attached. Can someone send me a sample of coding that will make a similar to this? I do not want to use tables because I was told that tables are not a very good way to lay out something with pictures and text. The coding does not have to be complete - just the bare minimum to do the job. I do not expect to be able to make it a file and make it work - I just want to study it. |
|||||||