Jump to content

Search the Community

Showing results for tags 'resize'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 14 results

  1. Hello! I am quite new to CSS, and have learned much the past months, but I still have some things that trouble me and i struggle to find a sollution. I do work with div tags. Problem 1: At the right, you can see "New Comics" with an unorderd list consisting of two items at this moment. The date is "float: right". it shows good on my screen, and any other medium to large screen resolution, but once it gets to small, the date gets ON the border line. I tried: min-width:300px Result: It jumped UNDER the content that should be on the left of it. URL: http://www.nimblefeather.com/index.php Problem 2: The images here are floating right and left respectively. Again, on my screen, or any other large screen, there is no visible problem, but once you start resizing the screen, the text does no longer fit into the div's. I tried: min-width. Result: No visible change. URL: http://www.nimblefeather.com/comics.php Problem 3: When resizing the width of the comic images gets adjusted, but the height does not, resulting in well, a weird image. The height should also change accordingly. In addition, on smaller screens the word (heading1) Chapters sometimes sticks out of it's Div. How would this be solvable? URL: http://www.nimblefeather.com/comics/drawingshady/thefutureofsumarnya/chptr1.php Question: Is it possible to make the website appaer like on my screen on other resolutions as well? By simply "resizing it" to their resolution (example: My resolution: 800 x 600, and visitor X resolution 400 x 300, to let the CSS resize the page to 50%, including text and images,...?) Thanks in advance =D
  2. jscooper

    Div inside Div moves when Resized

    Hi, I have a page on which I have a div inside a div. <div name="divWrapper" id = "divWrapper" style="overflow:auto;height:90vh;width:98vw" > <div style="-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin: 0 0;overflow:visible;" name="divMap" id="divMap"> <img and ... imagemap tags> The result I'm looking for is an image is in the window, with scollbars around it. I have a script that's run when the user clicks a button and zooms the inner div to make the image bigger or smaller. I have an imagemap for the image, and I found that just resizing the image didn't resize the map, so the coordinates would be off. But if I put the whole thing in a div and resized THAT, it would work. Here's the script that "zooms" the inner div (curScale is set to 1 earlier in the *.js page): function zoomDiv(elementID,change) { var d = document.getElementById(elementID); var newScale; if (change == 0) { newScale = 1; } else { newScale = curScale * change; } var s = "scale(" + newScale + "," + newScale + ")"; d.style.transform = s; d.style.webkitTransform = s; d.style.MozTransform = s; d.style.msTransform = s; curScale = newScale; d.style.width = d.style.width * curScale; d.style.height = d.style.height * curScale;} I'm sure there are better ways to do what I'm trying to do with a lot of this, but it's kind of a slapped togethr page and I'm really interesting in fixing this... Without the transform-origin tags, if I resize the div by making it smaller (zooming "out"), the left side of the div moves to the right, almost as if it's trying to right-justify itself on the page (or in the outer div). If I increase the size back to the original, it doesn't move back to the left. WITH the transform-origin tags, it sticks to the top-left, but is ugly when I make it really small; I'd rather it be centered. So, how can I have a div that when I use transform to shrink or grow its contents, stays at a fixed % of the visible window, and is centered. I cannot use jquery because this is run locally on a workstation (a mac, with web sharing enabled) which may or may not have internet access and from what I have read, all that jquery code links to their site somehow. Thanks, Jeff
  3. Hi, I have a website and, for a weird reason, I want one of its pages to be displayed using a navigator´s window with a smaller size than the normal ones. I would like to resize the window of that page to half size of a normal web page. I think JavaScript could be the solution to what I want. Do you know the script that I should use, in order to resize the navigator´s window? As a new developer, I appreciate your help! Thanks, Yumboxit
  4. anonymous_bosch

    Cropped thumbnail from larger image?

    I am using resized images as thumbnail links. I want the thumbnails to be 100px by 100px but I want the images to be resized so that their smaller dimension becomes the 100px edge and the other dimension gets cropped evenly from either end. For example, if the "src" image is 600px wide by 800px high, I want the thumbnail image to crop to 100px wide and 100px high in such a way that the original image would show up as though 100px had been removed from both top and bottom and then the whole thing was reduced in size by 600%. Here's an example of what I have so far for each image: <img src="img/image01" alt="Image Title" height="100px" width="100px"> This is allowing me to efficiently scale the images to 100px by 100px, but they're being distorted by being forced into a square shape when most of them are rectangular. Is there an easy solution I can paste into each <img> tag? I would also be open to using CSS.
  5. opajaap

    resize event handling

    Although the documentation ( http://www.w3schools.com/jsref/event_onresize.asp ) states: I can not get a situation where resizing a div causes the oresize handler to be executed. It looks like onresize only works on the window object and the body tag. Among other things, i tried this, a simple mod to the example code: <!DOCTYPE html><html><head><script>function myFunction(){var w=window.outerWidth;var h=window.outerHeight;var txt="Window size: width=" + w + ", height=" + h;document.getElementById("demo").innerHTML=txt;}</script></head><body><div style="width:100%" onresize="myFunction()" ><p>Try to resize the browser window.</p><p id="demo"> </p><p>Note: this example will not work properly in IE8 and earlier. IE8 and earlier do not support the outerWidth/outerHeight propery of the window object.</p></div</body></html> I would like to see a working example where the onresize event handler as attribute of a div tag is actually executed, or, if it is indeed not possible, to get the documentation updated according to the actual possibilities.
  6. Think i have a easy issue for all people here. I received some help from stackoverflow and now I need the final adjustment. I would like to change the width on a specific page in Wordpress. I'm using the theme Touchfolio: http://dimsemenov.com/themes/touchfolio/about.html my page: http://karimphoto.com/about/ This is the code I'm using now to adjust the width: .page-id-247 .hentry, .page-id-247 .aligncenter { max-width: 700px !important; The only problem I have now after resizing the width is that the image won't resize any longer. Same problem on both computer and mobile devise. Any input on this? Thanks,
  7. Hello.Each time when i resize window i get mess.What i should add in css?And how to make #body to be midle of schreen always?Here's some codes: <div id="body"><div id="manu"></div></div> body{font-family:Comic Sans MS , Arial;text-align:center;background-color:#000000;color:#179161;cursor:help;}#body{width:700px;height:600px;border:2px solid #179161;box-shadow: 30px 20px 35px #4A804E;position:relative;}#manu{width:600px;height:100px;border:2px solid #179161;margin-top:1mm;margin-left:50px;position:relative;}
  8. I'm trying to implement the sliding transparent overlay on my sight but I'm having a problem with the positioning of the DIV. When the window is re-sized the div does not retain relativity to the menu items above. Can someone give a pointer as to how this can be achieved? This is what I'm trying to emulate.......http://www.daphnes-restaurant.co.uk/general-information/ Here's my website.........http://www.galu.co.uk/newsite/goforitg.html The yellow box remains relative to the red box but when my window is re-sized I would like the red box to be left align to the window so the users can see easier. A kind of "left align object on window re-size. If that makes sense.
  9. hello again, since im not sure this is php coding related, ill just go ahead and type in here.correct me if im wrong.. well, im using latest version of verot.net.its a script created for resize pictures and stuff like that, i have used it ALOT in the past.so i was thinking of using it for a project. and everything works just fine as i can see for now.all but the picture names. when i am uploading a picture, i would like to change the name to the user_id given in the database. i DO had succes with this also on the upload, but the trouble is with the picture.i just CANT in anyway and anyhow i try to change the freaking name once its moving to my server. its keeping the same name, and its pretty annoying -.-'... any ideas?...code below: if(!empty($_FILES['user_picture']))//allways form name...{$handle = new Upload($_FILES['user_picture']);//starting picture uploader..if ($handle->uploaded){ $handle->image_resize = true; $handle->image_ratio = false; //$handle->image_convert = gif;//a different pic format... $handle->image_x = 100; //Width in Pixels... $handle->image_y = 100; //Height in Pixels... $handle->Process('user_pics/'); $id = mysql_insert_id();//id just given in the database... //$image = $handle->file_dst_name;//avatar with real name... $image = $handle->file_new_name_body = $id;//avatar with changed name... (DOSENT WORK...) //mysql_query("INSERT INTO users (user_avatar) VALUES ('$image')"); mysql_query("UPDATE users SET user_avatar = '$image' WHERE u_id = '$id'");}}//end empty statement... thanks ALOT in advance!...
  10. clb2196

    Div falls to new line- why?

    Ok- hope someone can help, as this is driving me nuts! I have 2 divs, left-floated within a wrapper div. The rigth side div is set to overflow:auto. The content correctly shows up with a scrollbar at most sizes. However, when I make the page narrower, it falls to the next line, instead of making the div narrower- why? Now, I realise I can set a min page width to stop this from happening, but right now that would have to be set at something like 1300px, which seems too wide to me for a min width. But I don't understand why the right div would fall to a new line instead of just getting narrower? Here's a link to the page if you want to try it out: http://portraits.carissalyn.com/ Here's my css: #header {height:60px;} body,html{min-width:1000px; height:100%; margin:0; padding:0; min-height:600px;overflow-y:hidden;overflow-x:auto; width: 100%; } body { font-family: Arial; background-color: #B8B8B8;}#wrapper {max-width:1200px;background-color: #B8B8B8;min-height:600px;height: 100%; color: #B8B8B8;margin-left: auto;margin-right: auto;white-space: nowrap;} #logo{float:left;color:#fff;width:200px;padding: 75px 15px 15px 0px;}#content {float: left;max-width:80%;color: #000;overflow:auto;} .table {margin:auto; padding: 10px;}.table td { padding: 5px; font-family: arial, sans-serif; text-align:center;color: #cccccc; font-size: 120%;}.table th { padding: 5px; font-family: arial, sans-serif;} and here's the html: <!DOCTYPE html><html lang="en"><head><title>Carissa Lyn Photography</title><link href="site_style.css" rel="stylesheet" type="text/css" media="screen"> </head><body><div id="header"></div><div id="wrapper"> <div id="logo"><img src="images/logo_design.png" alt="logo"></div> <div id="content"> <table class="table"> <tr> <td><img src="images/photo1.jpg" alt="portrait"></td> <td><img src="images/photo2.jpg" alt="portrait"></td><td><img src="images/photo3.jpg" alt="portrait"></td> <td><img src="images/photo4.jpg" alt="portrait"></td><td><img src="images/photo5.jpg" alt="portrait"></td> <td><img src="images/photo6.jpg" alt="portrait"></td> </tr> </table> </div> </div> </body></html>
  11. chibicheebs

    Simple questions about background resizing

    This should really be basic but for some reason I can't get the background-image to do what I want :/ This is the link: http://webdesign.miad.edu/stimm/ The CSS for the image is: #wrapper{width:1024px;height:768px;} body{background-image:url(../images/bkg.png);background-repeat:no-repeat;width:1024px;height:768px;} And then of course, the wrapper is also in the HTML. I also have some JQuery and Javascript running to create the fade effect. Addt'l notes: I also tried to have no size on the wrapper and background-image, but it still stayed small. If I try to do "cover" as background size, it blows out the entire background and makes it huge. I wouldn't mind the background resizing with the window, but I haven't had much luck with that either. In any case, thanks for the help! -Steffane
  12. raitis

    complicated gallery

    Dear forum, i copied a gallery and adjusted it.the problem is that i can't adjust the image size.right now the image size is like the files original size 1024x768px or 768x1024px. i changed the width to 600px and as you can see it just cuts of some part of the image.what could be the solution?http://quop.eu/quop/...ublic/quop.html here is the HTML code: <html><body><link rel="stylesheet" type="text/css" href="http://quop.eu/quop/wp-content/public/quop.css"><script type="text/javascript"></script><table align="left" style="border-spacing: 0px;width:100%;"><tbody><tr><td><table class="kl_body"><tbody><td class="kl_m"><div class="kl_box"></div><div class="kl_vorschau kl_height_1"> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_3.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_3.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_3.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg);background-repeat:no-repeat;"></div></a><img src="http://quop.eu/quop/wp-content/public/quop_logo.png"> </td></tr></tbody></table></body></html> here is the CSS code: @charset "UTF-8";* {margin:0px; padding:0px; font-family:'Arial'; text-align:left; border-collapse: collapse;}a {text-decoration:none; border:none;}img {border:none;}.kl_info {vertical-align:top;}.kl_m {width:1px; vertical-align:top;}.kl_vorschau {padding:3px;}.kl_vorschau img {border:1px solid black; width:700px; height:700px;}.kl_vorschau a img {width:100px; height:100px;}.kl_vorschau a .kl_foto {display:none; position:absolute; left:3px; width:600px; height:1024px; border:0px solid black; margin:0px; padding:0px;}.kl_vorschau a:hover .kl_foto {display:block;} sincerely,raitis
  13. rootKID

    How to make a Picture Resizer? Oo..

    Hello W3S people again. once again im in a little need of help. at least to get it started, im a little lost in this matter...im in the half-way exams at this week. and we got told to make a admin system that could upload images to products... that part i (CAN) do...but here comes my problem... i dont know the part of resizing the images...any ideas or suggestions would be pretty awsome! and thats not for kidding...i just need a little help for the beginning of it, so i can see the syntax... Hoping answers or suggestions soon!... thanks alot in advance! .
  14. Hi, I have my global navigation inside a div element. On browser resize elements of the navigation jump in next line, so that they are visible. I don't want that to happen. I have tried different solutions: - I gave the div element min-width property -> it works but the problem is that this div also has a background color, and the number of navigation elements changes from site to site. So when i have 5 elements it is ok, but when there is only one, because of the min-width, the background color is stil visible on places where no navigational elements exist. - I tried OverFlow:hidden -> it also hides the dropdowns :\. I tried overflow-x but it doesn't work.IAny idea how to solve this? Sandra
×