|
HTML - Picture On The Title Bar
how do i put a picture on the title bar? well, some sort like the bulb on this website.
Similar Tutorialsis there a way to put a href into a title of an image? Sorry that my first post on this forum is a question, but I've spent way too much time trying to figure this out on my own. What's the HTML or code to place images in the title of a webpage? As in this image... Any help you can give would be greatly appreciated!! -Matt Hello, Im tyring to create a group by box with a title identical to the attached, I cant figure out how to make this happen Can someone show me a mock up of this? Need some info on <title>. which file do i edit to change the title tag? lol i know i suck. i've noticed that when i use the <alt> tag and rollover an image the alternative text doesn't show up, it only show's up when i use the <title> tage... do i need to be using both? My title disappears in Ie, but is visible in FF. Site validates. Any ideas? http://www.apnaonline.ca Thanks, Geoserv. Hi I'm trying to make some text sit under a photo, and it works fine except in IE6, where the first word starts at the side of the photo, then the rest sits underneath. The page is at www.bigbadroo.com.au/top-stitching/www/ - the photo is of the woman on the left. Here's my html: <div id="wilma"> <img src="images/wilma.jpg" alt="Wilma" ><em><strong>Over 40 years industry experience!</strong></em> </div><!-- end #wilma --> and the CSS: #wilma { float:right; margin-top:10px; font-size:7.5pt; width:213px; } Is there anything obvious there? Thanks for your time and help Shaun Hello.. i am creating a work webpage to display goodies are staff might like to buy for christmas! Ive got a slide show in the middle and other images around Ive been able to code the slide show so that when i click the image on the slide it display it in another window Im having a problem though with being able to code the images around the slide when i click the individual ones it just brings up the picture in the slide ? Ive had a little play with it and cant get my brain around it! It may be simple but ive been doing these for days and i am extremly tired from them lol.. can anyone help? i will display code below thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}
.boxed {
position:absolute;
left:25%;
border: 2px black;
border-style: plain;
width: 700px;
height: 800px;
}
.boxed1 {
position:absolute;
left:25%;
border: 1px blue;
border-style: dotted;
width: 700px;
height: 350px;
text-align:center;
float: left;
padding:2px;
background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}
</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>
<div class="image">
<img src="360s.jpg" border="0" width="200px" height="100" href="360s.jpg" />
</div>
<div class="image">
<img src="ps3.jpg" border="0" width="200px" height="100" />
</div>
<div class="image">
<img src="DS.jpg" border="0" width="200px" height="100" />
</div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"
}
//-->
</script>
</body>
</html>
Hello! I have a bunch of picture i wish to have on a internal webpage to go around the sides and bottom of the page, positioned around a slideshow in the center. I have managed to get some to go down the left, and i can get them some to go to the bottom but once there they sit on top of each other not side by side? how can i overcome this?? I have tried the 'float' but this was no luck. Also can you tell me how get the images to come down the far right hand side of the page Thanks I have inc my code.. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}
.boxed {
position:absolute;
left:25%;
border: 2px black;
border-style: plain;
width: 700px;
height: 800px;
}
.boxed1 {
position:absolute;
left:25%;
border: 1px blue;
border-style: dotted;
width: 700px;
height: 350px;
text-align:center;
float: left;
padding:2px;
background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}
.image1 {
border: 1px blue solid;
width: 200px;
height:100px;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 0px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 400px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>
</a>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="360s.jpg" width="198px" height="98px" border="0" /><span><img src="360s.jpg" /><br />Xbox 360 Slim</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="ps3.jpg" width="198px" height="98px" border="0" /><span><img src="ps3.jpg" /><br />Play station 3.</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="wii.jpg" width="198px" height="98px" border="0" /><span><img src="wii.jpg" /><br />Nintendo Wii</span></a>
</div>
<br>
<br>
</br>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv1.jpg" width="198px" height="98px" border="0" /><span><img src="tv1.jpg" /><br />Sony Bravia KDL-40W2000</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv2.jpg" width="198px" height="98px" border="0" /><span><img src="tv2.jpg" /><br />Toshiba Regza AV61 (32AV615DB)</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv3.jpg" width="198px" height="98px" border="0" /><span><img src="tv3.jpg" /><br />Samsung B550 (LE40B550)</span></a>
</div>
<br>
<br>
</br>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="ttg.jpg" width="198px" height="98px" border="0" /><span><img src="ttg.jpg" /><br />Tom Tom GO</span></a>
</div>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat2.jpg" width="198px" height="98px" border="0" /><span><img src="sat2.jpg" /><br />Garmin nuvi 3790T</span></a>
</div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"
}
//-->
</script>
</body>
</html>
For the site that I am currently in charge of I removed a slideshow because it took too long to load. In it's place i tried to add just a picture, but it will not work. I uploaded the picture to the site, have the correct html, and placed the html where the code for the slideshow used to be but it doesn't appear on the page. It doesn't even give one of those X's to show you the picture isn't loading. Here is some of the code surrounding where I'd like the picture to be. <div id="text6" style="position:absolute; overflow:hidden; left:22px; top:628px; width:929px; height:205px; z-index:5"> <div class="wpmd"> <div><font face="Times New Roman" class="ws16">Mission Statement</font></div> <div><font face="Times New Roman" class="ws16"><BR></font></div> <div><font face="Times New Roman" class="ws16">A collaborative team including individuals impacted by neurological conditions, providers who serve them, members of communities in which they live, advocates, and researchers who investigate these impairments will identify, develop and disseminate information and strategies, and maximize resources to improve outcomes and quality of life. <a href="http://www.karrn.org/SCIRehabProgram.pdf">2010 SCI Rehab Conference Program</a></font></div> <div><font face="Times New Roman" class="ws16"><BR></font></div> </div></div> <div id="shape1" style="position:absolute; overflow:hidden; left:698px; top:248px; width:310px; height:320px; z-index:7"><img border=0 width="100%" height="100%" alt="" src="images/shape3078289.gif"></div> <div id="text5" style="position:absolute; overflow:hidden; left:19px; top:591px; width:238px; height:25px; z-index:8"> <div class="wpmd"> <div><font color="#000000" face="Times New Roman" class="ws18"><B>Welcome to our site</B></font></div> </div></div> The blank area there is where the code for the slideshow was. All I need is a simple picture. Anyone know why it's not working? Thanks ahead of time! After re-structuring the whole website, i got some problems with my pictures. As you see on theese 2 pics i can't get the pictures centered, even with the <center> tag! (images removed) before re-structuring i couldn't center the pictures neither, so it isn't because of the new structure. Please take a look on this Code and tell me if you know how to fix this problem. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Urne's Website - Community</title> <link rel="stylesheet" type="text/css" href="style/style2.css"> </head> <body> <div id="container"> <div id="header"></div> <div id="left" style="width:210px;float:left;"> <a href="index.html"><img alt="Home2 (15K)" src="img/Home2.png" height="50" width="200" border= "0px"/></a> <p><a href="Community.html"><img alt="Community (15K)" src="img/Community.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Tracks.html"><img alt="Tracks (17K)" src="img/Tracks.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Videos.html"><img alt="Videos (15K)" src="img/Videos.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Images.html"><img alt="Images (15K)" src="img/Images.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Other.html"><img alt="Other (13K)" src="img/Other.png" height="50" width="200" border= "0px"/></a><p/> <p><a href="Trackup.html"><img alt="Track Updates" src="img/trackup.png" height="50" width="200" border= "0px"/></a><p> <p><a href="Settings.html"><img alt="Settings (13K)" src="img/Settings.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Search.html"><img alt="Search (14K)" src="img/Search.png" height="50" width="200" border= "0px"/></a><p> <p><a href="About.html"><img alt="About (12K)" src="img/About.png" height="50" width="200" border= "0px"/></a></p> </div> <div id="main" style="margin-left: 210px;"> <h1>Urne's Tracks</h1> <p>Here i have all the tracks i ever made for Re-Volt. Please check this one weekly/monthly, because the site will be updated at least once/month.<img alt="Smiley" src="img/Smile.gif" border= "0px"/></p> <a href="Bone+Island.html"><img alt="Bone Island" src="img/Bone+Island+hot.png" height="200" width="200" border= "0px"/></a> <a href="At+The+Farm.html"><img alt="At The Farm" src="img/At+The+Farm.png" height="200" width="200" border= "0px"/></a> <a href="Forgotten+City.html"><img alt="Forgotten City" src="img/Forgotten+City.png" height="200" width="200" border= "0px"/></a> <br> <a href="Cyberspace.html"><img alt="Cyberspace" src="img/Cyberspace.png" height="200" width="200" border= "0px"/></a> <a href="Dark+Park.html"><img alt="Dark Park" src="img/Dark+Park.png" height="200" width="200" border= "0px"/></a> <a href="Pisa+Grandprix.html"><img alt="Pisa Grandprix" src="img/Pisa+Grandprix+hot.png" height="200" width="200" border= "0px"/></a> </br> </div> </div> </body> </html> Hope this can help you! Regards Urnemanden Hey all got bit of a prob here! I need the bg picture to fit the background plz help HTML 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>
<title>I-C-U - The corner inside the code</title>
<meta name="author" content="DarkHat" />
<meta name="subject" content=
"anonymous, antivirus, chat, hacker, hackers, internet security, proxy, security, trading, webdesign" />
<meta name="Description" content="Trade your secrets at I.C.U" />
<meta name="Classification" content=
"I-C-U is here for you and you are there for the others who needs the help with security etc..." />
<meta name="Keywords" content=
"anonymous, antivirus, chat, hacker, hackers, internet security, proxy, security, trading, webdesign" />
<meta name="Geography" content="Sweden/Usa" />
<meta name="Language" content="English, Swedish, Danish, Norwegean" />
<meta http-equiv="Expires" content="Dec 2012 10:10:10 GMT" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta name="Copyright" content="DarkHat , -I.C.U-" />
<meta name="Designer" content="DarkHat" />
<meta name="Publisher" content="I.C.U" />
<meta name="Revisit-After" content="10" />
<meta name="distribution" content="Global" />
<meta name="Robots" content="INDEX,FOLLOW" />
<meta name="city" content="Gothenburg" />
<meta name="country" content="Sweden" />
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<link rel="stylesheet" href="/css/frontstyle.css" type="text/css" />
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" type="/ico" href="/favicon.ico" />
<script type="text/javascript" src="js/jquery-1.2.6.js">
</script>
<script type="text/javascript" src="js/startstop-slider.js">
</script>
</head>
<body>
<div id="page-wrap">
<div id="slider">
<div id="mover">
<div id="slide-1" class="slide">
<h1>LinkerZ</h1>
<p>LinkerZ nr.1 webpage for the hacker! There is links to different communitys,
movie portals, radio stations, all about the interesting world thrue the
hackers eyes</p><a href="http://i-c-u.se/LinkerZ/"><img src=
"images/slide-2-image.jpg" alt="learn more" /></a>
</div>
<div class="slide">
<h1>Designz Webdeveloper</h1>
<p>Designz Webdeveloper! oh well the name say it all. A team of web designers
that makes designs to a new level of creating living appearense</p><a href=
"http://i-c-u.se/EliteDesignz/index.html"><img src="images/slide-1-image.jpg"
alt="learn more" /></a>
</div>
<div class="slide">
<h1>I-C-U Chat</h1>
<p>The place for you that got somthing to say! A place for the sharing of
interest off all from hacking to music to security etc...</p><a href=
"http://i-c-u.se/icuchatter.html"><img src="images/slide-3-image.jpg" alt=
"" /></a>
</div>
</div>
</div>
</div>
</body>
</html>
HTML Code: { margin: 0; padding: 0; } body { font-family: "Lucida Grande", Arial, Sans-Serif;
background: #000;} a { text-decoration: none; outline: none; } a img { border: none; }
h2 { font-family: Georgia, Serif; font-size: 36px; text-align: center; font-weight:
normal; } #page-wrap { background: black; width: 980px; margin: 0 auto; padding: 50px
0; } #slider { background: white url(../images/slider-bg.jpg); height: 475px; overflow:
hidden; position: relative; margin: 50px 0; } /* DEFAULT is for three panels in width,
adjust as needed This only matters if JS is OFF, otherwise JS sets this. */ #mover {
width: 2800px; position: relative; } .slide { padding: 40px 30px; width: 900px; float:
left; position: relative; } .slide h1 { font-family: Helvetica, Sans-Serif; font-size:
30px; letter-spacing: -1px; color: #ac0000; } .slide p { color: #000000; font-size:
12px; line-height: 22px; width: 300px; } .slide img { position: absolute; top: 20px;
left: 400px; } #slider-stopper { position: absolute; top: 1px; right: 20px; background:
#ac0000; color: white; padding: 3px 8px; font-size: 10px; text-transform: uppercase;
z-index: 1000; }
If you could take a look HERE and tell me how I would do the same sort of picture menu with text to the right and in line with the centre of the pic WITHOUT using a table? The table is just giving me trouble!! Sorry to ask so many questions BTW. I was wondering if there was a simple way or script out there that anyone knows that can change a picture at a certian time? I am doing a website for a diner and they close at 3:00pm and I was thinking about putting a sign on the website that would simply say "Open" when the diner is open and "Closed" when its obviously closed. Thanks in advanced I'm trying to make a picture button. I have a little so far can you help with the rest. <input type="button" onclick="javascript:alert('Noob, u fell for it!!!')" /> I'm having trouble fixing some bugs when viewing my site on IE 6. Here is my problem........ I have IE 6 and everything looks fine to me. But on other computers it looks messed up. So.... I was wondering if someone could help me out and take a screenshot of a page using IE 6. I want to see how it looks on other computers when the page fully loads up. This is the page http://webtvdeluxe.com/v2/Art Show Thank you in advance is there a specific one which i should use when making my site? jpeg or gif or any other format? Thanks Hi everyone, I'm new here and new to html stuff. I really need to learn it to make my website. I've been messing around all day with the codes and so far all I got is this: <TABLE BORDER="0" cellpadding="0" CELLSPACING="0" bordercolor="#330000" width="100%"> <TR> <TD WIDTH="950" HEIGHT="17" BGCOLOR="#000000" VALIGN="top" align="left"> <font face="edwardian script itc" style="font-size: 65pt" color="#FFFFFF">George Gabrielle Couture </font></TD> </TR> </TABLE> <table border="0" width="20% align="right" bgcolor="FFFFFF"> <tr> <TD BGCOLOR="#000000"> <font face="pica10 bt" color="FFFFFF" size="3">Fall/Winter</font></td> </tr> <tr> <TD BGCOLOR="#000000"> <font face="pica10 bt" color="FFFFFF" size="3">Holiday</td> </tr> <tr> <TD BGCOLOR="#000000"> <font face="pica10 bt" color="FFFFFF" size="3">Resort</td> </tr> <tr> <TD BGCOLOR="#000000"> <font face="pica10 bt" color="FFFFFF" size="3">Baby</td> Now I need to add some pics to the white part of the page (left-hand side). Forgive me everyone, when you answer this please treat me like I'm a 5 year-old, LOL . I am soooo html challenged. I'm only a seamstress, and sewing clothes is all I know . I use HTML 4.01 transitional, with some style sheets. I'd like to put a frame around a picture on an inspirational website for purely ascetic reasons. I don't want to use a table for a frame like some folks do. It' s kind of tacky. Does anybody know what code I'd need to do this? Is there some kind of style sheet I could use? |
|||||||