|
CSS - Images Moving Around When Window Resized
Hi.
I have recently 'finished' my website, currently at http://www.aslo50.dsl.pipex.com I have positioned the images of the album cover absolutely (http://www.aslo50.dsl.pipex.com/music.htm) but they are jumping about when the browser window is resized. They are also overlapped on browser windows with different screen resolutions. The Navigation Buttons are also stacking and overlapping in this manner although they are just positioned in flow. I would be really grateful for any help you can offer. Thanks Similar TutorialsHello all I have a page that uses css for the layout. The issue that I can not figure out how to fix is when someone re-sizes their browser the page content is all resized. How would I lock th positions of each span on the page so even if they resize (smaller) the browser the span's will stay where they are when the page is fully maximized on the users screen? I hope it is clear what I am asking. I tried puttin like a float tag but that does not work at all. Thanks all Jason Hi, I have the following horizontal navigation bar: Code: ul#List
{ list-style-type:none;
margin:0;
padding:0;
width:956px;
font-size:13px;
font-weight:bold;
}
ul#List li
{ display:inline;
}
ul#List li a
{ text-decoration:none;
padding:5px 0;
width:100px;
background:#000000;
color:#FFFFFF;
float:left;
text-align:center;
border-left:1px solid #fff;
}
ul#List li a:hover
{ background:#ADFF2F;
color:#000000;
}
<ul id="List" style="position:absolute;left:0px;top:90px;">
<li><a style="width:91px;" href="">something something</a></li>
............ </ul>
The trouble is when the window is resized (maximized or minimized) at certain points the last list overflows and appears on the next line. How can I prevent this, that is, keep the list on one line when the window is resized. Note I have tried using position:relative and putting the above inside <div> but neither solution worked. If the above code cannot be modified I wonder if someone has a horizontal navigation bar that does what I want. I will be very grateful for all help. So this site is having a bit of trouble in WinIE 6.0. If you resize the window after you load the page, the dark brown area behind the content sort of gets stuck on the right. I'm wondering if it might have something to do with the javascript I had to do to get IE to recognize fixed backgrounds. Any ideas? Site: http://dev.sabotagemedia.com/firstclass/ CSS: http://dev.sabotagemedia.com/firstclass/_css/style.css hi i go problem the pictures keeps moving towards right is there way to fix these? the movie pictures so they stay all on left side forever. I have a form that has background images for the inputs. In both IE 6 and IE 7, the background images will move if the text goes outside of the image. You can see what I'm talking about here. Here is the xhtml: Code: <div class="contact">
<form action="sendmail.php" method="post" id="contactform">
<ul>
<li>
<label for="name"><img class="label" src="images/name.png" alt="" /></label>
<input class="inputbox" type="text" name="name" value="" id="name" />
</li>
<li>
<label for="email"><img class="label" src="images/email.png" alt="" /></label>
<input class="inputbox" type="text" name="email" value="" id="email" />
</li>
<li>
<label for="tele"><img class="label" src="images/phone.png" alt="" /></label>
<input class="inputbox" type="text" name="tele" value="" id="tele" />
</li>
<li class="special">
<label for="last">Don't fill this in:</label>
<input type="text" name="last" value="" id="last" />
</li>
<li>
<label for="message"><img class="label" src="images/message.png" alt="" /></label>
<textarea rows="5" cols="30" name="message" class="messagebox"></textarea>
</li>
<li class="submitbutton">
<input type="submit" value="" class="formbutton" />
</li>
</ul>
</form>
</div>
and here is the relevant css: Code: .inputbox {
height: 39px;
width: 246px;
border: none;
padding: 10px 10px 0 10px;
background: url("../images/inputbox.png") no-repeat 0 0;
font: bold italic 1.25em/1.1em Lucida, sans;
color: #3d2d06;
}
I'm sure this is an easy one but I can't really figure it out and googling has not produced any results. Thanks in advance. works in FireFox, page looks the same no matter how u resize the window: http://img63.imageshack.us/img63/3264/firefoxview.png looks bad in IE: http://img63.imageshack.us/img63/8986/ieview.png css: Code: body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#content
{
height: 100%;
width: 100%;
position:absolute;
z-index:2;
}
img#bg
{
width:100%;
height:100%;
position:absolute;
z-index:1;
}
img#titleimg
{
width:100%;
height:100%;/*new*/
}
img#mainmenuimg
{
text-align:center;
width:30%;
height:100%;/*new*/
}
img#analogskillsimg
{
width:40%;
height:60%;
}
img#programmingimg
{
float:right;
vertical-align:bottom;
width:40%;
height:60%;
}
img#analogskillstext
{
vertical-align:bottom;
width:40%;
height:100%;/*new*/
}
img#programmingtext
{
float:right;
width:40%;
height:100%;/*new*/
}
table.introlayout
{
width:100%;
height:100%;
}
td.introtitle
{
width:100%;
height:10%;
}
td.skillpics
{
vertical-align:bottom;
width:100%;
height:70%;
}
td.skilltext
{
vertical-align:top;
width:100%;
height:10%;
}
td.menu
{
text-align:center;
width:100%;
height:10%;
}
xhtml: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Patrick Allard's Very Graphic Website</title> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <img src="backgroundfire2.gif" alt="background image" id="bg" /> <div id="content"> <table class="introlayout"> <tr> <td class="introtitle"> <img src="titlemaxfontgreyredfire.gif" alt="background image" id="titleimg" /> </td> </tr> <tr> <td class="skillpics"> <img src="analogskillspic.jpg" alt="background image" id="analogskillsimg" /> <img src="programmingpic.jpg" alt="background image" id="programmingimg" /> </td> </tr> <td class="skilltext"> <img src="analogskillsmaxfontblackbluefire.gif" alt="background image" id="analogskillstext" /> <img src="programmingmaxfontblackbluefire.gif" alt="background image" id="programmingtext" /> </td> </tr> <td class="menu"> <img src="mainmenumaxfontblackbluefire.gif" alt="background image" id="mainmenuimg" /> </td> </tr> </table> </div> </body> </html> How to make images that are right aligned with the web page window? Anyone helps? Thanks in advance. I have finally got my page set up as required. There is one minor niggle. The footer sits at the bottom of the page when the browser is maximised and has no content. If the browser is not maximised or the content introduces scroll bars the footer is bumped up one pixel in IE. How can I get around this? The footer CSS is below, if you require any more CSS let me know which elements (roughly) as there is a lot of it. PHP Code: #wrap { margin-left: auto; /*center the wrapper CSS2 compliant (all except IE*/ margin-right: auto; margin-top: -21px; width: 760px; top: 21px; min-height: 100%; position: relative; left: 0px; background-image: url(../images/content_bg.gif); text-align: left; } * html #wrap { height:100%; padding-bottom: -20px; } #clear_footer { clear: both; height: 21px; overflow: visible; z-index: 1999; /*background-color: green; Used for demonstration purposes only, remove after testing*/ } #contain_footer { left: 0; margin-top: -21px; width: 100%; height: 21px; background-color: red; background-image: url(../images/contain_footer_bg.gif); padding-bottom: 0px; z-index: 2002; } #footer { position: absolute; bottom: 0; margin: 0 auto; width: 760px; height: 21px; line-height: 21px; vertical-align: center; background-image: url(../images/footer_bg.gif); z-index: 1999; } Perhaps this should go into a Javascript or PHP but I wasn't quite sure. I want to declare a navigation bar's text to a fixed height of 12px which I think is rather easy for MOST anyone to read. What I'm having to do is because the site owner wants a "tabbed" appearance, I'm using images for the sides and will make the background of the text various colors (depending on if their active or not). If a visitor to the site, however, has their text style zoomed, that will considerably disrupt the apparent "image" of the tabs and make it look screwey. Text must be used for SEO so making the tabs a full image is not an option. Any advice? Sorry if this should have gone to a different forum. Thanks. Tim Supposing I have an image that is 200x200 pixels, and I have a div that is 100x100 pixels. I want to place the image inside the div AND have all 4 corners of the image visible. How do I do this? The idea is to fit the image inside the div without the image looking like it got "cut off" on any of its edges. I tried simply changing the CSS width and height but that did not achieve the desired effect. I'm hoping I won't need 4 divs, one for each corner? Hello, For some reason I'm having difficulty with this, I'm designing a page that needs a background image centered even when the browser is resized like on ask.com. I don't need several different background options, just one background. It seems to me it should be simple enough but I'm having one of those nights. Can anyone point me in the right direction? Thanks, Jasontor i have a basic navigation system - 12 items divided into 3 columns - fitted together horizontally in a row. On a windows xp machine with a high resolution display which is set to automatically resize all ie browser pages to make them appear larger (readable or lower-res) - somehow my navigation columns no longer fit into a single row... as far as i know under all other browsers/platforms the menu appears correctly. i've tested the navigation layout in opera, ie, firefox, netscape on my own windows computer, and have tested the pages using some online site that takes snapshots of your page in various browsers on various operating systems (including linux and apple).... the problem may be with the way i am calculating the pixels for the div widths? or...? the page is at gatewoodfarms.com (gatewoodfarms.com/gwf.css) a screenshot of the problem is at gatewoodfarms.com/screenshot.png here is the Basic Structure/CSS: <body style="border:0px;padding:0px;margin:0px;min-width:630px;"> <div id="wrap" style="border:0px;padding:0px;margin:0px auto;width:630px;"> <div id="top" style=""> ... <div id="nav" style="border:0px;padding:0px;margin:0px;height:90px;width:630px;"> <div id="nav1" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div> <div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div> <div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:right;"></div> </div> </div> <div id="main" style="border:0px;padding:0px;margin:0px;height:auto;width:630px;top:250px;"> ... </div> </div> any ideas how i can fix this? thanks! please see following code. (i want myHeight becomes dynamis, that mean when user resize the browser, it will be changed automatic w/o refresh the page). thank you. waitting online for the answer. <html> <head> </head> <body > <table> <tr><td>tasd</td></tr> <tr><td> <script type="text/javascript"> var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } //var height = myHeight *.8; document.writeln("<div style='HEIGHT:" + myHeight *.8 + "; WIDTH:100%; OVERFLOW:auto'>"); //return height; </script> <table> <tr><td> msg </td></tr> </table> </div> <td> msg </td> </table> </body> </html> Code: <style type="text/css">
<!--
div.wrapper {
width: 400px;
margin: 0 auto;
}
div.menu {
color: blue;
white-space: pre;
text-align: right;
font-size: 90%;
margin: 200px 500px 200px 100px;
}
div.submenu {
color: blue;
white-space: pre;
margin: 150px 300px 500px -10px;
font-size: 70%;
line-height: 180%;
}
body {
background: white url("Images/background.jpg") no-repeat top scroll;
text-align:justify;
margin:200;
padding:0;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
}
-->
</style></head>
<body>
<div class="wrapper">
<div class="menu"><span><button style="width:100;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span> <span><button style="width:100;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span> <span><button style="width:200;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span> <span><button style="width:200;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span>
<div class="submenu">
<span> <button style="width:200;height:30" onClick="window.location='prva.htm'">title lef</button><br /></span>
<span><button style="width:200;height:30" onClick="window.location='XXXXXXX.htm'">title lef</button><br /></span>
<span><button style="width:200;height:30" onClick="window.location='prva.htm'">title lef</button><br /></span><br /></span>
<span>title lef<br /></span>
<span>title lef<br /></span>
</div>
</body>
</html>
here is code. please save code with .html and open with browser. Give me sugestions how to move links easily left or right [ write trick if know] thank you in advance loverbugs I developed http://technology-sleuth.com by testing in Firefox and Opera as I am on linux and at the time didn't have access to IE. All is fine in those browsers. However, in IE I see that when the page get too narrow, instead of narrowing the center div, it moves it below the rest of the page. As the center div is the one with the content, this is unacceptable. How can I prevent this? This site as you see it now was 'shortened' so that the center div does not get pushed down in the 800*600 screen resolution. So you will need to make the browser window very narrow to see the effect. But the problem is still visible. Thanks in advance. Dotan Cohen Hi Whenever I shrink my window in Ie, the Links bar stays in the same place. You can view this at http://www.trowbridge-wiltshire.co.uk/newtrowbridge Code:
body {
background:#CBDEF5;
margin: 1em auto;
width: 600px;
}
#leftcontent {
margin: 1em auto;
position: absolute;
top:100px;
left:250px;
width:100px;
background:#CBDEF5;
}
#centercontent {
margin: 1em auto;
width:500px;
background:#87B4EB;
color:#ffffff;
border:2px solid rgb(75,123,211);
margin-left: 140px;
margin-right:20px;
}
#advertising {
margin: 1em auto;
width:500px;
background:#87B4EB;
color:#ffffff;
border:2px solid rgb(75,123,211);
margin-left:140px;
margin-right:20px;
}
#banner {
background:#CBDEF5;
height:40px;
padding:5px;
}
p,h1,pre {
margin:0px 10px 0px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
background: #c3c8c3; }
#button ul {
list-style: none;
margin: 0;
padding:0;
border:;
}
#button li {
border-bottom: 1px solid #CBDEF5;
margin: 0;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border: 1px solid #1958b7;
background-color: #87B4EB;
color: #fff;
text-align:center;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border: 1px solid #1958b7;
background-color: #4B7BD3;
color: #fff;
}
Old story...looks good in IE but, different in FireFox: link to page My goal is to have all the footer infor appear below the content...not wrap up. Any help would be greatly appreciated. Thanks! IE is at it once again.... it is doing VERY odd things.... On the following page, when you roll over the title/type/date and description sections for the related article, it changes backgrounds... this is done mostly with CSS and the smallest amount of javascript (only onmouseover/mouseout is used). It works great elsewhere, but not in IE... any suggestions at what it may be?? THE LINK Hi. This is template I copied just for fun in joomla http://www.worldoffashion.info/test/. I wonder how to move text from border as you can see in gray boxes text is near border. I tried padding but then it makes whole box larger Hi I recently moved a site "http://www.nikkilamann.com/index.php" and after moving it the CSS is all messed up (style.css) The scroll frame box is not centred anymore and the scrollbar is supposed to be white in colour and there is some funny box next to "fashion" on navigation. Site is totally messed up after move. Does anybody know what could cause this? |
|||||||