| View previous topic :: View next topic |
| Author |
Message |
jlm22
Joined: 05 Feb 2009
Posts: 31
|
| Posted: Sun Mar 29, 2009 3:26 pm Positioning IFrame |
|
|
| How do I position my iframe so that it shows up to the right of one of my images? It keeps coming up under the image, but I want it to the right of it. |
|
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 3598
Location: Biloxi, MS
|
| Posted: Sun Mar 29, 2009 6:40 pm |
|
|
| Need link to problem page. |
|
|
jlm22
Joined: 05 Feb 2009
Posts: 31
|
| Posted: Sun Mar 29, 2009 7:22 pm |
|
|
http://missjoy.comyr.com/
i want the text box to be next to the navigation to the right |
|
|
sticks464
Joined: 31 Dec 2006
Posts: 2311
|
| Posted: Sun Mar 29, 2009 8:14 pm |
|
|
Give this a try
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DiagKnowSys LLC, "Beyond Healthy"</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:none;
}
:focus {outline:none;}
/*----- Global -----*/
body {
font-family: 100%/.88em/ "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;
background: #fff ;
color:#000;
text-align:center;
}
#container {
width:100%;
text-align:left;
}
#header {
position:relative;
width:100%;
background:url(bwtitle.jpg) no-repeat top left;
width:668px;
height:163px;
}
#content {/* use for left sidebar, menu etc. */
float: right;
margin: 0 0 0 -291px; /* adjust margin if borders added */
width: 100%;
}
#content .wrapper {
position:relative;
margin: 0 0 0 291px;
overflow: hidden;
padding: 0; /* optional, feel free to remove */
}
#sidebar {
float: left;
width: 271px;
padding: 0 10px;
}
#main { /* this is the iframe */
width:1000px;
height:auto;
border:1px solid #000000;
margin:20px 0;
visibility: block;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><!-- Header info --></div>
<div id="content">
<div class="wrapper">
<!-- Main content goes here -->
<IFRAME id="main" src="main.html"></IFRAME>
</div> <!-- end wrapper div -->
</div> <!-- end content div -->
<div id="sidebar">
<img src="sunnav.png" width="271px" height="270px" alt="">
</div> <!-- end sidebar div -->
</div> <!-- end container div -->
</body>
</html> |
|
|
jlm22
Joined: 05 Feb 2009
Posts: 31
|
| Posted: Sun Mar 29, 2009 8:28 pm |
|
|
works great thanks!
so if i want to make the iframe not as wide, would i tweak the 'content: wrapper' part of the css? |
|
|
jlm22
Joined: 05 Feb 2009
Posts: 31
|
| Posted: Sun Mar 29, 2009 8:31 pm |
|
|
oh wait...that's the 'main' part of the CSS.
thanks! |
|
|
jlm22
Joined: 05 Feb 2009
Posts: 31
|
| Posted: Sun Mar 29, 2009 10:08 pm |
|
|
| how would i turn my image on the left (the sun w/ the navigation points) into live links? |
|
|
sticks464
Joined: 31 Dec 2006
Posts: 2311
|
| Posted: Mon Mar 30, 2009 3:35 am |
|
|
| Whatever graphics program you used to create it can probably be used to create an image map also. |
|
|
jlm22
Joined: 05 Feb 2009
Posts: 31
|
| Posted: Mon Mar 30, 2009 8:33 am |
|
|
| i did it on photoshop ... not sure how i'd do it there? |
|
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 3598
Location: Biloxi, MS
|
| Posted: Mon Mar 30, 2009 9:07 am |
|
|
Try uploading your image and make your image map with any of the following free online tools:
http://www.image-maps.com/
http://www.online-image-editor.com/
http://www.maschek.hu/imagemap/imgmap
http://www.kolchose.org/simon/ajaximagemapcreator/
http://mapit.utah.gov/steps.htm |
|
|
jlm22
Joined: 05 Feb 2009
Posts: 31
|
| Posted: Mon Mar 30, 2009 10:06 am |
|
|
| I used the 3rd link you provided but for some reason it didn't work. I think I'm doing it wrong because I'm uploading just that one image (the sun navigation) so it's probably using the wrong coordinates? |
|
|
sticks464
Joined: 31 Dec 2006
Posts: 2311
|
| Posted: Mon Mar 30, 2009 10:48 am |
|
|
Give this a try
Code:
<div id="sidebar">
<img name="sunnav" src="sunnav.png" width="279" height="270" border="0" id="sunnav" usemap="#m_sunnav" alt="navigation"><map name="m_sunnav" id="m_sunnav">
<area shape="rect" coords="84,194,186,228" href="#nogo" alt="home" title="Home">
<area shape="rect" coords="82,142,186,182" href="#nogo" alt="about" title="About">
<area shape="rect" coords="83,91,186,127" href="#nogo" alt="products" title="Products">
<area shape="rect" coords="82,43,187,79" href="#nogo" alt="contact" title="Contact">
</map>
</div>
Replace #nogo with the path to your files |
|
|
jlm22
Joined: 05 Feb 2009
Posts: 31
|
| Posted: Mon Mar 30, 2009 10:58 am |
|
|
| I just tried that and now my header overlapped w/ the navigation |
|
|
sticks464
Joined: 31 Dec 2006
Posts: 2311
|
| Posted: Mon Mar 30, 2009 11:10 am |
|
|
That's because you put it in the wrong place. That code is meant to replace this code
Code: <div id="sidebar">
<img src="sunnav.png" width="271px" height="270px" alt="">
</div> <!-- end sidebar div -->
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DiagKnowSys LLC, "Beyond Healthy"</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:none;
}
:focus {outline:none;}
/*----- Global -----*/
body {
font-family: 100%/.88em/ "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;
background: #fff ;
color:#000;
text-align:center;
}
#container {
width:100%;
text-align:left;
}
#header {
position:relative;
width:100%;
background:url(bwtitle.jpg) no-repeat top left;
width:668px;
height:163px;
}
#content {/* use for left sidebar, menu etc. */
float: right;
margin: 0 0 0 -291px; /* adjust margin if borders added */
width: 100%;
}
#content .wrapper {
position:relative;
margin: 0 0 0 291px;
overflow: hidden;
padding: 0; /* optional, feel free to remove */
}
#sidebar {
float: left;
width: 271px;
padding: 0 10px;
}
#main { /* this is the iframe */
width:1000px;
height:auto;
border:1px solid #000000;
margin:20px 0;
visibility: block;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><!-- Header info --></div>
<div id="content">
<div class="wrapper">
<!-- Main content goes here -->
<IFRAME id="main" src="main.html"></IFRAME>
</div> <!-- end wrapper div -->
</div> <!-- end content div -->
<div id="sidebar">
<img name="sunnav" src="sunnav.png" width="271" height="270" border="0" id="sunnav" usemap="#m_sunnav" alt="navigation"><map name="m_sunnav" id="m_sunnav">
<area shape="rect" coords="84,194,186,228" href="#nogo" alt="home" title="Home">
<area shape="rect" coords="82,142,186,182" href="#nogo" alt="about" title="About">
<area shape="rect" coords="83,91,186,127" href="#nogo" alt="products" title="Products">
<area shape="rect" coords="82,43,187,79" href="#nogo" alt="contact" title="Contact">
</map>
</div> <!-- end sidebar div -->
</div> <!-- end container div -->
</body>
</html> |
|
|
jlm22
Joined: 05 Feb 2009
Posts: 31
|
| Posted: Mon Mar 30, 2009 11:49 am |
|
|
thanks! i think i have 1 more question -
how would i open the links in the iframe? do i just include target="nameofiframe.html"?
I tried that but it ended up opening in a new window. |
|
|
| |
|
|
|
