Jump to content

Search the Community

Showing results for tags 'Size'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 13 results

  1. Hello, I have been using W3 tutorials to create custom code elements on my weebly website. Lately I have been having issues with a code I created from two separate tutorials: image roll over and responsive size. The code is situated within a greater grid created with weebly's building tools. Image rollover and responsive size work in W3's try it editor, but on my website only the rollover works. On a full size window everything looks just fine (the bottom left is the custom coded element) but a slighter smaller window results in a slide bar to view the full image, because it will not scale down. On a phone-scaled window, the opposite happens and it doesn't scale up, appearing significantly smaller. Any help would be much appreciated!!! I have included images and the latest code I've tried to show what's happening. Thank you!!!!! <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img{ width: 100%; height: auto; } .box{ width: 100%; height: auto; position: relative; display: inline-block; margin: 10px 0px 10px 0px; } .box .img-top { width: 100%; height: auto; display: none; position: absolute; top: 0; left: 0; z-index: 0; } .box:hover .img-top { display: inline; </style> </head> <body> <div class="box"> <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front"> <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img{ width: 100%; height: auto; } .box{ width: 100%; height: auto; position: relative; display: inline-block; margin: 10px 0px 10px 0px; } .box .img-top { width: 100%; height: auto; display: none; position: absolute; top: 0; left: 0; z-index: 0; } .box:hover .img-top { display: inline; } </style> </head> <body> <div class="box"> <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front" width="720" height= "720"> <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"width="720" height= "720"> </div> </body> </html>
  2. Hello everyone. (Sorry for my bad english, I'm french)So I have an HTML page with a header, a footer, a lateral menu and of course, content.It is perfectly sized for desktops and mobiles (thanks to a media query I invented, which is : @media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px){ /* MY CODE HERE */ } The content is perfectly adjusted like this : , thanks to: html{font-size: 200%} in this media query. I precise that ALL my font-sizes and padding between divs / paragraphs are in "rem" unit. But the problem is, that when I exceeds the precise nuber of 89 characters, the texte suddenly look like this : But only on mobile devices (with the media query I said previously)... I visualized this with the Chrome developer tool -> Device toolbar (Ctrl + Shift + I then Ctrl + Shift + M) There I do a little as if it was not serious but it's days that I drudge everywhere and nobody was able to give me an answer ... I put the page online so you can watch it more precisely...http://vincentvincent.rf.gd/l-histoire.html Thanks for your help.
  3. I have some knowledge about html and css and I am confident in beeing able to hack through most problems through trial and error, but in this case I dont even have an idea on how to fix it and I am afraid it's really simple. So I simply want this black background behind the text and it's supposed to be equal on both sides, but the padding starts virtually too late for that to work. body {position: relative;} body,html,h1,h2,h3,h4,h5,h6,p {font-family: "Lato", sans-serif;} body, html { height: 100%; color: #777777; line-height: 1.8;} html {font-size:1rem;} body {font-size:100%;} h1 {font-size: 1.777em; text-align: center; color: white;} .headline2 {letter-spacing: 0.8em;} .w3-wide {letter-spacing: 0.625em;} <div class="bgimg-1 w3-display-container w3-opacity-min" id="home"> <div class="w3-display-middle"> <h1><span class="w3-black w3-padding-large w3-wide w3-animate-opacity">THORSTEN ERDT</span></h1> <h1><span class="headline2 w3-animate-opacity">ILLUSTRATION</span></h1> </div> </div>
  4. Hi! So, I am having issues with my portfolio gallery... I can get the modal to work, finally, thanks to you guys. I was wondering if you could help with another issue. The gallery has the columns uneven and it is driving me batty. I can get them to be the same size if I adjust the size of the image, but that makes it look tacky in another way, I want the column to extend with blank space to make everything the same height. Is this possible? If so, how? http://technicolor-dreams.net/fan-001.html In the above link you can see what I am talking about =( Also attaching relevant pages of coding. Thanks! -Sarah css.css fan-001.html layout.html menu.html
  5. I recently took over somebody else's website and am trying to get an element to size up and down when the window changes size. I tried to add Position: Absolute; to no avail. I currently have it as Position: Fixed so it moves with the scroll. Specific page is here and I'm referring to the three sidebar nav menus on the left. #mySidenav a { position: fixed; /* Position them relative to the browser window */ left: -25px; /* Position them outside of the screen */ transition: 0.3s; /* Add transition on hover */ padding: 15px; /* 15px padding */ width: 200px; /* Set a specific width */ text-decoration: none; text-align: center; font-size: 18px; /* Increase font size */ color: white; /* White text color */ border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */ } #mySidenav a:hover { left: 0; /* On mouse-over, make the elements appear as they should */ text-decoration: underline; } #board { top: 320px; background-color: #5d2a2c; } #blog { top: 380px; background-color: #5d2a2c; } #kidswehelp { top: 440px; background-color: #5d2a2c; Any help would be beyond amazing.
  6. I've stumbled upon yet another trouble with internet explorer where my images mysteriously becomes 1px by 1px instead of sizing according to it's container like other browsers.I googled the problem and it seems like a lot of people gets this problem when applying heigh:auto; to an image. I accually had this applied but it wasn't solved by removing it.I'll just leave an url for the page here so you can see for yourselves:http://tec.macework.se/catalog/products/components/ Any clues?
  7. Hello, a complete beginner here - I have just built my first website, but to my horror I realized that if I view it with another screen resolution, or on someone else's computer, it changes the whole appearance of the site, esp. the flow of the paragraphs, often to a very ugly result. Images start to overlap paragraph, and paragraphs suddenly look extremely narrow. I am happy to restructure the website, (built in html without Dreamweaver's help) but have no idea how - especially how to make the main structure adjust to different views (larger/smaller screens, i-pads etc) Thank you! You can view the website and its source here - http://www.aidanandrewdun.com/ I'd be grateful if you viewed the page source and let me know what I've been doing wrong.
  8. Hi! I'm experiencing a wierd thing when I open my website in Firefox and Opera. The images loading in with a preloader is shown at actual size shortly before resizing to percentage-size according to my CSS. In Chrome the images appear as they should right from the start. What's the problem here?http://mace.macework.se/trycksaker/ Grateful for help!Thanks
  9. Hi, I need some help. I haven't worked with HTML in a long time and need to edit my website. My web developer friend designed the current template for my website, but he's been too busy to help me edit it. My website is available here: http:///NBCnewman.weebly.com I am in desperate need of some more main content space, but I don't wish to move to a horizontal navigation bar. In looking at my current navigation bar on the left, I believe I can get a bit more content space by making the navigation bar a bit narrower. But, I don't know how to change that in my HTML code (I don't even know what portion of my code refers to the navigation bar). Or, is there a way to make everything wider - my header image and move things out to the left and right a bit into the gray area on the sides so that I have some more white main content space in the middle? I hope what I'm saying makes sense! Please help. I am pasting the HTML code for my web design below in the hopes that someone can tell me where I do this and what code to use. Thank you!! *|* { margin:0pt; padding:0pt;}body { background: transparent url(background2.gif) repeat-x center top; background-color:#333333; font-family:"lucida grande", arial, sans-serif; font-size:12px; color:#464e54; margin:0; padding:0;}p { line-height:1.5;;}h1, h2, h3{ line-height:1.5;;}#wrapper { width:960px; margin:0pt auto; overflow: hidden}#top-buffer { height:30px;}#header { overflow: hidden;}.weebly_header {float:left;background: transparent url(headerNew.jpg) no-repeat center top;width:100%;height:233px; }#sitename-area { background: transparent url(sitename_background.gif) no-repeat center top; width:290px; height:226px; float:right; border-style:solid; border-width:0px border-color:#666666}#sitename { color:#924a2e; font-size:2em; font-weight:bold; padding:50px 20px 20px 20px; text-align:center; width:264px;}#content-wrapper { background: transparent url(content_background.gif) repeat-y center top; overflow: hidden;}a:link, a:hover, a:visited { color:#924a2e; font-weight: bold; text-decoration:underline;} #navigation { float:left; width:246px; height:100%; margin-top:40px; font-family:"lucida grande", arial, sans-serif; font-size:1.3em;} #navigation ul { float:left; position:relative; margin:5px 0 10px 15px; list-style-type:none; }#navigation li { display:block; font-size:1em; padding:11px 0 0 10px; margin:0; width:200px; height:27px; border-bottom:1px solid #d7d5c4; text-align:left;}*html #navigation li { margin-right:4px;}#navigation a:link { float:left; display:block; padding:11px 0 0 10px; margin:-11px 0 0 -10px; width:200px; height:27px; color:#565040; font-weight:normal; text-decoration:none;} #navigation a:visited { color:#565040; font-weight:normal; text-decoration:none;}#navigation a:hover { background-color:#98b4b1; display:block; padding:11px 0 0 10px; margin:-11px 0 0 -10px; width:200px; height:27px; color:#924a2e; font-weight:bold; text-decoration:none;}#active a:link { color:#924a2e; font-weight: bold; text-decoration:none;}#active a:hover { color:#924a2e; font-weight: bold; text-decoration:none;}#active a:visited{ color:#924a2e; text-decoration:none; font-weight: bold; }#content { float:right; width:674px; min-height:400px; height:auto !important; height:400px; background-color:#f8f7f1; padding:30px 20px 30px 20px;}*html #content{ padding-top:35px;}img.image-left { margin-right:15px; float:left;}img.image-right { margin-left:15px; float:right;}#footer { float:left; width:960px; margin:20px 0 30px 0;}#footer-contents { float:left; color:#ebe9dc; font-family:"lucida grande", "lucida sans", arial, sans-serif; padding:12px 0 0 20px; width:940px; height:28px;}*html #footer-contents { margin-top:-5px;}input { background-color:#fff; border:1px solid #999; font-size:12px;}textarea { background-color:#fff; border:1px solid #999; font-size:12px;} /****************************** flyout menus ******************************/ #weebly-menus .weebly-menu-wrap { z-index: 5000;} #weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none;} #weebly-menus .weebly-menu li { float: left; clear: left; width: 170px; text-align: left;} #weebly-menus .weebly-menu li a { position: relative; display: block; width: 100%; height:25px; background: #b5b299; border-right: 1px solid #d7d5c4; border-left: 1px solid #d7d5c4; border-bottom: 1px solid #d7d5c4; text-decoration: none; font-size: 11px; font-weight: normal; line-height:1; padding:8px 0 5px 2px; color: #924a2e;} #weebly-menus .weebly-menu li a:hover { background: #98b4b1; font-weight: bold; } #weebly-menus span.weebly-menu-title { display: block; padding: 5px 10px;} #weebly-menus span.weebly-menu-more { background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top; display: block; position: absolute; right: 5px; top: 0; font-family: Courier; height: 28px; line-height: 29px; padding:3px 0 3px 0;}
  10. I'm just wondering how to fix my problem. I have same game with different width + height and its same size as other while their width + height is smaller? Example http://mudsaf.info/games/index.php?playgame=159(Width: 710, Height: 533) Other site http://www.mochimedia.com/games/play/from-nothing(Width: 640, Height: 480) But its actually same size.
  11. I'm designing a feature-rich website with object-oriented PHP and I have a performance question. My background is in C, C++ and C# (.NET) programming. Now all those are compiled whereas PHP is interpreted. The following require_once statements are at the top of each page: <?phprequire_once "_php/library/Session.php"; // Session class (session related functionality)require_once "_php/library/Databases.php"; // Databases class (database related functionality)require_once "_php/library/DatesTimes.php"; // DatesTimes class (date and time related functionality)require_once "_php/library/User.php"; // User class (user related functionality)require_once "_php/library/Page.php"; // Page class (page related functionality)require_once "_php/library/common.php"; // general functions?> // (X)HTML 5 code Now some of those files are large and have a lot of methods/functions that are rarely used but it makes sense to keep them there because of the design principles of OOP. However, where OOP shines the best is in languages such as C# where only the necessary parts of the application is loaded into memory (on the as-needed basis). My question is, will the PHP engine have to waste a lot of CPU parsing through the classes and their methods every time a page is requested even though they're not being used or is there only a performance cost when the methods are being envoked (this parsing is not necessary in C# because the code has already been compiled)? I'm just wondering if I should break down the OOP architecture into smaller units that don't make as much sense logically but do make sense performance-wise.
  12. Hi! I'm new here, and I'm very new to CSS so I'm sorry if I ask silly questions! I've been working on making a website for a new business, and even though only the 'Coming Soon' page is up, it still demonstrates my problems. http://www.youmightlikethis-music.com I tried to use CSS to make sure the background image fits to whatever size the screen is, but on big screens it is too short, and on smaller screens if you scroll down there is a white bar which I can't get rid of. If someone could help me with this I'd be very appreciative! Thank youu
  13. I'm trying to get these sliders to work so a user can adjust the readability of the website. i have a slider to adjust the font size, the number of colums and the background color. For the background color i want to have some sort of color picker but i still need to look into that but if you have any suggestions please let me know! here's the code: //fontsizewindow.onload = function() {var value_display = document.getElementById("value_display").className.class="value_display";var lorem = document.getElementsByClassName("lorem");document.getElementById("slider").onchange = function() {value_display.value = this.value;lorem.style.fontSize = this.value + "em";}}//kolom aantalfunction changeColumnNoSlider(event) {var val = event.target.value;document.getElementById('columns-no-value').className='columns-no-value'.textContent = val;var el = document.getElementsByClassName('kolom');el.style.webkitColumnCount = val;el.style.MozColumnCount = val;} The problem is that i use it for blog post so it's not just one article i want to adjust. the code works if i use .getElementById but i need to use classes. Thanks in advance!
  • Create New...