|
HTML - Positioning Images?
I'm positioning an image within a divison that also has a paragraph of text. I've got the image floating right. It has these settings: display: inline; clear:both; float: right; I've added padding on the right side to move the image to the left or to control it's right margin so that it's not tight to the right edge of the page. When I apply a border to the image it also goes around the padding which is goes out away from the image. What is recommend as another way to control the right margin or to move image left without the padding?
Think I might have it, making positioning relative and then changing right position. Similar TutorialsHi all, Graphic designer here hell bent on learning web design with a question probably asinine for all those viewing but vexing to me for the last week. I have a site beautifully designed (can be seen here as a static jpeg) and seemingly straight forward and basic but making it functional on the web as I designed is proving to be quite the arduous task. I have many questions concerning this project but I'll keep this thread focused on the code for positioning images on the navbar. I have the buttons (67px by 14px) and sidebar (36px by 594px) all measured out and have tried a few different semantics to accomplish this but all for not. The images always end up stacking in the top left corner. HTML Code: <body>
<div id="butttons">
</div>
<div id="nav">
<img src="images/layout/images/Side_nav.png"/>
</div>
<div id="butttons">
<div id="nav_Home">
<img src="images/layout/images/Home.png"/>
<div id="nav_Portfolio">
<img src="images/layout/images/Portfolio.png"/>
<div id="nav_Contact">
<img src="images/layout/images/Contact.png"/>
</div>
</body>
And then this is the Refferenced style sheet HTML Code: #nav {
position: absolute;
top: 0px;
left: 0px;
}
div.nav_side {
background-image: url(images\layout\Side_nav.gif);
background-repeat: no-repeat;
background-position: top center;
width: 36px;
height: 594px;
}
#buttons {
position: absolute;
background-repeat: no-repeat;
background-position: top center;
top: 500px;
left: 36px;
}
.nav_home {
background-image: url(images\layout\Home.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 552; left: 35;
width: 67px;
height: 14px;
}
.nav_Portfolio {
background-image: url(images\layout\Portfolio.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 566; left: 35
width: 67px;
height: 14px;
}
.nav_Contact {
background-image: url(images\layout\contact.gif);
background-repeat: no-repeat;
background-position: top center;
style="position: absolute; top: 580; left: 35;"/>
width: 67px;
height: 14px;
}
I literally just started learning Html /CSS / Java a month ago; spare no details! ANY help with ANY (text formatting, background gradient that adjusts relative to a screen size, rollovers on the nav etc...) part of putting this site together will be more appreciated then most can fathom. I'd be willing to exchange some graphic work if any of you stuck this out to the end with me. First off, hello everyone, I would like to start by telling everyone thank you for letting me a part of this forum. Now, as to my topic. I am looking for a script that generates a random image of four that I have selected and postions it in the lower left hand corner of the screen every time the screen is refreshed. The only thing is, I need this to be compatible with myspace's possibilites. I would tremendously help it if anyone could give me a helping hand on this issue. I have searched google several times for some help, but all the solutions involve either java script or a certain amount of knowledge of html, neither which I have. Thank you for your time, and here are the urls of the images, I would like shown. http://i23.photobucket.com/albums/b3...cience/All.jpg http://i23.photobucket.com/albums/b3...nce/Turkey.jpg http://i23.photobucket.com/albums/b3...ence/Panzy.jpg http://i23.photobucket.com/albums/b3...ce/Curious.jpg Again, thank you a lot. I want to use my images as links, but I also want them absolutely positioned relative to their parent div. However I have come across a problem, to make them links I need to wrap <a>s around them which then means their positioning becomes relative to the anchor tag. Can anyone suggest anything to counteract this problem? I do need them absolutely positioned. The only alternative is an image map, but I'm reluctant to do that because of the slow load time for the whole image, plus all the extra co-ordinate coding I'd have to do. Thanks for all your help I am making great progress thanks to you all. Here I've posted a picture of my current dilemma. Hopefully it makes sense. http://www.trillionaireme.com You can view my site at www.palermostaging.com. It appears fine in IE but in firefox, the alignment is thrown off a little, I think the orange column is too tall. How can I fix this without changing the text size or placement? Any suggestions are appreciated, source is viewable on the page. Thanks, Anders Hi, I can't seem to get these images to center after using position:fixed on them. Here's the code I have: Code: <html> <head> </head> <body> <div style="position: fixed; top: 0px;"> <img src="top.jpg"> </div> <div align="center"> <table width="1025" bgcolor="gray"> <tr> <td> <middle text> </td> </tr> </table> </div> <div style="position: fixed; bottom: 0px;"> <center><img src="bottom.jpg"></center> </div> </body> </html> I believe this is a HTML problem: Old site: http://www.ardmoreweatherlive.com/ . Old site CSS: http://www.ardmoreweatherlive.com/weather-screen.css New site: http://www.ardmoreweatherlive.com/test3.php New CSS: http://www.ardmoreweatherlive.com/weather-screen2.css I am trying to get rid of the old left side menu and maybe get the page to float in the center with, I think padding(?) around the edges. I really thank everyone for the help, Doug Hi, Would some be able to help me with the layout of my page? I want it to look like this and this is what it looks like now. I don't want to do it using borders but I can't seem to figure it out using positioning. Anyone able to help? CSS Page Regards, Darren Hi! I'm having trouble positioning the footer <div> on my webpage, containing links to my counter and guestbook. I want it to go at the bottom center of the page without overlapping on any of the other <div>s, meaning that if it doesn't fit on the webpage (which it doesn't), you have to scroll down to see it. Here's my webpage: http://www.geocities.com/serenamonster/map.html The footer div displays fine in IE, but displays incorrectly in Firefox: it's smack in the center of the page, instead of the bottom, and I don't know how to fix it. Here's the relevant coding (I think...I'm really n00by so I can't be sure.) I had to use CSS because that's the only way I could stretch the background image to 100% without tiling. Here goes: -------------------------------------------------- <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } img#bg { position:fixed; top:0; left:0; width:100%; height:100%; } #footer { position:relative; } #menu { position:relative; z-index:2 } #box { position:relative z-index:4 } #intro { position:relative; z-index:1 } </style> <!--[if IE 6]> <!--[if IE 6]> <style type="text/css"> html { overflow-y: hidden; } body { overflow-y: auto; } #bg { position:absolute; z-index:-1; } #menu { position:static; } #box { position:relative; } #intro { position:static; } #footer { position:static; } </style> <![endif]--> ...... <div id=footer style:"position:relative"; align="center";> blah blah content </align> </div> --------------------------------------- Can someone please tell me what I'm doing wrong? Thanks a bunch! Which is the better way to position the div tags? Should I use float or some fixed position? I could get two columns positioned with float left and right, but what about a third column? Thanks Hello, I have a bunch of navigational buttons (tables) on the left of my website. I use CSS to control the positioning and formatting of it. What if I wanted another table to contain some text as my main paragraph and I wanted to control the positioning in that table too using CSS, but I want it to have a different position then the navigational buttons, is this possible? Code: <html>
<head>
<style type="text/css">
body
{
background-image:url("http://www.designswan.com/wp-content/uploads/2009/Vector/3DSpaceTexture/space4.jpg");
}
h1
{
color:white;
}
p
{
color:white;
font-size:12px;
text-align:center;
position:absolute;
left:260px;
top:70px;
z-index:-1;
}
img
{
position:absolute;
left:500;
top:170;
}
</style>
</head>
<body>
<center><h1><u>Philosphical Ideas</u><h1></center>
<table border="1" width="70%" cellpadding="1">
<td bgcolor="#ffffff" style="text-align:center">
<center><p><b>This website was created as a sample. In this website you will find philosophical ideas, thoughts, funny stories, quotes, recommended websites, artwork, and much more!</b><br /></p>
</center>
</td>
</table>
<table border="1" width="12%" cellpadding="0">
<td bgcolor="#006600" style="text-align:center">
<a href="http://www.zahnlogics.com/movies" style="color:yellow;font-size:18px;"> <b>Philosophical Ideas</b></font></a> <br />
</td>
</table>
<table border=1" width="12%" cellpadding="0">
<td bgcolor="#006600" style="text-align:center">
<a href="http://www.zahnlogics.com/movie_reviews" style="color:yellow;font-size:18px"> <b>Movie Reviews</b></a> <br />
</td>
</table>
<table border="1" width="12%" cellpadding="0">
<td bgcolor="#006600" style="text-align:center">
<a href="http://www.zahnlogics.com/music_reviews" style="color:yellow;font-size:18px"><b> Music Reviews</b></a> <br />
</td>
</table>
<table border="1" width="12%" cellpadding="0">
<td bgcolor="#006600" style="text-align:center">
<a href="http://www.zahnlogics.com/quotes" style="color:yellow; font-size:18px"><b> Stories</b></a> <br />
</td>
</table>
<table border="1" width="12%" cellpadding="0">
<td bgcolor="#006600" style="text-align:center">
<a href="http://www.facebook.com/matthazan" style="color:yellow;font-size:18px"><b> Facebook Page</b></a> <br />
</td>
</table>
<table border="1" width="12%" cellpadding="0">
<td bgcolor="#006600" style="text-align:center">
<a href="http://www.zahnlogics.com/websites" style="color:yellow;font-size:18px"><b>Websites</b></a> <br />
</td>
</table>
<table border="1" width="12%" cellpadding="0">
<td bgcolor="#006600" style="text-align:center">
<a href="http://www.zahnlogics.com/music_reviews" style="color:yellow;font-size:18px"><b>Artwork</b></a> <br />
</td>
</table>
</body>
</html>
Hi there. I am working on a website for a friend who created it using Word and then found that this doesn't work in FF (the files were .mht). I only know basic HTML, and no CSS. I can do most of what I need to but am having two problems. Firstly, some of the positioning is out in FF, but if I change it so it's ok in FF it's then out in IE. Word appears to have positioned everything using  s: HTML Code: <span style='mso-spacerun:yes'> </span> <span style='mso-tab-count:3'> &nbs p; </span> <span style='mso-spacerun:yes'> </span> <!--[if gte vml 1]> <v:shape id="_x0000_i1030" type="#_x0000_t75" style='width:141pt;height:141.75pt'> <!-- sixth image file --> <v:imagedata src="TA6.jpg" o:title="TA6"/> </v:shape> <![endif]--> <![if !vml]> <img border=0 width=188 height=189 src ="TA6.jpg" v:shapes="_x0000_i1030"> <![endif]> <span style='mso-spacerun:yes'> </span><!--[if gte vml 1]> <v:shape id="_x0000_i1031" type="#_x0000_t75" style='width:141pt;height:2in'> I know this is horrible code. Is there any simple way to ensure that the image ends up in the same place in IE and FF? Do I need to use absolute positioning, and if so, can anyone direct me to good resources on this? Secondly, I'm having problems with an horizontal line which appears in IE but not in FF. The code is HTML Code: <h2 style='margin-left:36.0pt;text-indent:36.0pt'> <!--[if gte vml 1]> <v:line id="_x0000_s1031" style='position:absolute;left:0;text-align:left;z-index:1' from="1in,33pt" to="647.15pt,33pt" strokecolor="#396" strokeweight="3.5pt"/> <![endif]--> <![if !vml]> <span style='mso-igno vglayout;position:absolute;z-index:1;left:0px;margin-left: 93px;margin-top:41px;width:773px;height:6px'> This displays correctly as a shaded green line in IE, but as a white line with a thin black border in FF. From searching I think this is VML and not supported by FF - is this correct? In that case, I think I need to use the <hr> command, but how do I add an attribute to <hr> to ensure it's placed in the right place? Is the only solution a table? Sorry for the stupid questions, I know Word code is a terrible place to start from, I'm just trying to avoid redoing it all. I am having trouble positioning a table on my site. I have managed to align it in the vertical position but using any form of centering only aligns the left edge to the center. I need the centre of the table in the centre if you know what i mean...! Many Thanks for any help Here is the code I am a complete beginner so have faith... <style type="text/css"> TABLE.red {position:absolute; top:310px} </style> <TABLE class="red" WIDTH="200" SPAN style="COLOR: #0000ff" CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="background-color: #660033" position:absoloute; left:"20px"></SPAN> <TR> <TD WIDTH="32"> <IMG SRC="rounded_corner1.jpg" BORDER="0" ALT="..." width="32" height="32"></TD> <SPAN style="COLOR: #0000ff"><TD WIDTH="172"></TD></SPAN> <TD WIDTH="32"><IMG SRC="rounded_corner2.jpg" BORDER="0" ALT="..." width="32" height="32"></TD> </TR> <TR> <SPAN style="COLOR: #0000ff"><TD></TD></SPAN> <TD ALIGN="CENTER"><STRONG>ACTUAL CONTENT</STRONG></TD> <SPAN style="COLOR: #0000ff"><TD></TD></SPAN> </TR> <TR> <TD><IMG SRC="rounded_corner3.jpg" BORDER="0" ALT="..." width="32" height="32"></TD> <SPAN style="COLOR: #0000ff"><TD></TD></SPAN> <TD><IMG SRC="rounded_corner4.jpg" BORDER="0" ALT="..." width="32" height="32"></TD> </TR> </TABLE> </CENTER> 1st i would like to say thank you to all those who have helped me over the last 10 days or so, i know ive really been annoying considering some posts were i suppose unnecessary, so i apologize... 2nd this will be my last annoying post for a while once i get this done im pretty much getting ready to go public after a few updates as far as text material... so heres the issue... im using this code below... now what im trying to do is overlay my image so it appears in the center of the other image but using top: 70px; left 275: px; its not going to be the same depending on how big your screen is and how big your explorer window is set to... so im wondering does any1 know anyway i can get that image to appear dead center regardless of user screen size? <center> <img src = "Best-1.gif" style="position: absolute; top: 70px; left: 275px; "> <img src="banner-top.JPG" width="100%" height="150" /> </center> you can see the results on http://www.freewebs.com/fallingrain11/22.html Look at: http://test6.waltonstreetwebdesign.com/ If you look at it in firefox, it works fine. In IE 7, the positioning for div "logo" is not working properly and you can't see the logo. What is my problem? Thank you. Hey, I was just wondering how I could have the navigation bar centred despite what resolution you view it in rather than fine in one and messed up in others. This is where it's for.. www.aweentertainment.com/tempindex.html Thanks. When i tried to overlap two images, one of them at foreground(with opacity of zero value) and other one at background using absolute positioning. The image with absolute position works well with Google Chrome while when i try to open with any other browser or resoltion, the image displaces from its position i.e. it changes its required position. Code: <img src="myimage.jpg" width="150" height="113" style="opacity:0.0;filter:alpha(opacity=0);position:relative"><img src="myimg2.jpg" style="position:absolute;top:150px;left:150px" /> Please provide possible solutions... Dear Forum Readers, I do not know how this whole forum thing works, and I probably will not be using it much. But I have a very important question to ask you all. If anyone knows, please help me. I searched high and low for a code to place a picture anywhere (out side of the tables) and I finally decided to just use one of the codes that MySpace help pages uses to post banners on your page when you have used their site for codes; and it worked beautifully, the only thing is it will only work on the left side. Here is a link to my page so you can see what I am talking about. MySpace.com/chippycheekschik. The roses on the left, I also want on the right. Will someone kindly help me...I would really appreciate it...:-) My E-Mail is Steph_A_Rios@yahoo.com or AIM SN is ChippyCheeksChik. You may also leave me a message on my MySpace, comment or personal, either will do. PLEASE contact me if anyone has a solution. Thank you so much. Sincerely, Steph R. I've run into a few problems that don't appear in firefox but do in Internet explorer..The first problem I have is that in IE the content box on the right is bumped down, it looks exactly the way I want in FF, but not in internet explorer. The next problem I'm having is the banner in IE..It seems as if theres a pixel or two underneath of the banner I can't get rid of... Also, any ideas on how I can center the navbar? I can't seem to get it to go in any browsers... page: http://www.ssvfd.com/newsite/history.html css file: http://www.ssvfd.com/newsite/style.css |
|||||||