Jump to content

Search the Community

Showing results for tags 'CSS'.

  • 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

Calendars

  • Community Calendar

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

  1. BACKGROUND: I have a flexbox (#contact_div) that creates a column of rows (.content_item). Each row represents another flexbox that is divided into two columns (.contact_info and .contact_data). Now, each row of columns is neatly spaced across the entire width of the parent #contact_div when in full-screen browser mode. As the width of the viewport is made smaller, however, spacing problems begin to arise. in smaller viewports the width of each row is no larger than that of the widest content contained in each of the two columns. I would like the columns to fill the entire width of the o
  2. BACKGROUND: In an effort to obtain good responsive design I feel compelled to leave out certain elements that are unresponsive. I am loathe to do this. I have identified the element that is causing the distortion. The element retrieves and displays the referring URL. Unfortunately, in its effort to render the URL fully, the element causes the div to extend beyond the boundaries of the viewport and distorts the page. Now, I have tried to overcome this problem in the following manner, but it fails. #yp_container #current_referral_url { max-width: 100%; overflow-wrap: break-word; }
  3. BACKGROUND: In my most recent effort to fix the alignment problems associated with the responsive design of my site's mainpage I have managed to overcome several important hurdles. There does remain one problem, however, that I cannot seem to fix. This has to do with the rendering of inserted div elements in my site's mainpage. By way of example 1) Open Grammar Captive's mainpage in a smartphone -- preferably iPhone, for this is where I have detected the problem. 2) Click on the About option under Introduction in the navigation bar. The insert appears correct. No background
  4. I have been debating whether to use a canned framework or not (versus raw css) and am still on the fence. Twitter bootstrap seemed bloated to me when I tried it, so today I played around with w3's framework. It's nice, but I feel like I have ZERO control (or at least I can't control it....). The example framework I kicked around a while is this one: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_portfolio&stacked=h The thing I HATE is how the side menu pops up automatically when the window is enlarged. So I just spent literally two hours trying to figu
  5. Hello everybody, I was playing with a template from the w3.css templates from w3 schools and found an issue that I can't get around. In the template called Parralax template or the forth one from top, with the man with grey hat, I saw that the home screen image was loaded from the css .bgimg-1{ min-height: 100%; background-image: url(/w3images/parallax1.jpg); } (from the style brackets after the head tag ) I wanted to do a transition between two images but only found examples on the web that it is possible only when the image is loaded from an html imag
  6. WHO: A problem for Dsonsuke. BACKGROUND: In a recent effort to make my website responsive, I have run into trouble with my website. DILEMMA: I have five panels that appear correctly in two (wide viewport and narrow viewport) of three instances (wide viewport, middle viewport, and narrow viewport). It is the middle viewport that I cannot get to appear correctly, and I do not know what is causing the problem. When one adjusts the browser window from wide to narrow, and the three horizontally aligned panels are reduced from three to two, the contents of the middle panel is no longer
  7. Hello. I am using a bootstrap responsive ecommerce template. The filter buttons work great! BUT, if you click on a "card" or even on the background, the outline around the button disappears. This is a problem that the original W3 example doesn't have. Any ideas would be greatly appreciated. Here is the original: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_portfolio_gallery_filter Here is mine: Here is the page: http://help.cccis.com/static/ccc_one/ELCTraining/EstWorkRO.html Here is the filter buttons: <div id="myBtnContainer"> &l
  8. Hi, I searched the forums but haven't found an answer about this. I have created a simple eBay template based on w3.css inline style sheet. When I paste into the eBay form it passes checks and the mobile test also works. When I publish the advert, however, the images in Chrome, IE, Firefox (latest versions) all are fixed at original size. If I browse from my mobile phone, however, the resizing works well and appears as intended. Any idea why it doesn't work on desktop browsers? Advert is here: https://www.ebay.co.uk/itm/202385270343 and the template I created: <
  9. I have an html email template with social media icons in the footer. When viewed on mobile devices for some reason they are stacking vertically. Below is the footer code <tr> <td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN FOOTER // --> <table border="0" cellpadding="0" cellspacing="0" id="templateFooter" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-collapse: collapse !important; border
  10. Hello Guys, I'm working on a website for my aunt, due to the new privacy law, she needs to update the page with a new Button in the menu. I lost the programm which I created the old .png buttons, so I can't create the new one in the same style. I want to replace the old buttons with new ones, written in css. The only problem is the size of the buttons, they keep scaling with the writting in the button, but I want them all the same size. I attached the code of the css and html, can you help me? I know, the website is written in an old style, her former programmer did all the writting and I
  11. Greetings to all the users and administrators of w3scools invisionzone forum. I would love to get some constructive criticism on this web development tutorial site namely webtrickshome. It's been around for slightly more than a year but I redesigned it recently. Any feedback regarding the design and contents would be highly appreciated. Thankyou
  12. Hi all ! I wrote this short code : <html> <head> <style> table, th{ max-width: 600px; } .e2 { width: 200px; } </style> </head> <div style="background-color:TRANSPARENT;width:603px"> <body> <table> <tr bgcolor="TRANSPARENT" height="20"> <td class="e2" style="background-color:GREEN"></td> </tr> </table> </body> </div> </html> I have a data base column (in oracle apex), And I would like to have something like that (a multiplication)
  13. Hi everyone, I'm trying to have little blur on background which is video. I added filer:blur(5px) on this video, but it won't work. Is there any way to make it work? I searched in google to see some code in, but none of them are working. Can anyone help? Thanks, Gary Taylor
  14. Hello, I am currently in the middle of creating a web comic aggregation website. So far, I have written a PHP-based RSS reader that grabs the image source links and publication dates for various web comics from their RSS feeds, and uses this to update a MySQL database. This RSS reader/database updater is configured to run once every several hours and update the database with any new comics it finds. It seems to be working fine, and now I am starting to work on the front end of the website, which needs to grab this information from the ever-growing database, and display it in a user-friendly an
  15. Hi! I need some help with an exercise I am doing. In my exercise, the borders on the right side is taking too much space, I would like it to take only as much space as it needs, with only around 2em of padding, but for some reason, the left side and the upper side seems to have a lot of space....I would appreciate a lot if you could help me. Attached you can find the file and here is a link with the exercise I am doing (the first one). Exercises Thank you! Ejercicio1prueba.htm
  16. I am creating a re-usable email template. I am not sure if this can be done but wanted to throw it out there and see if anyone had any ideas. I have a button with a link to a form. The link pre-fills fields in the form with merge tags in the url. I need to make/create a "placeholder" for one of the tags so that I can edit/insert different values as needed. Is this possible with HTML? This all resides in PARDOT, which does have a WYSIWYG editor. When I click on the lick I can pull up the WYSIWIG and change attributes etc. I would love to be able to click the link and have an "Event ID"
  17. I have been using the <block-size: XX%;> property to prevent a table from resizing on different screens but I can't seem to get it right, what could I use to solve this? this is an example of how I'm applying the code: HTML <div .div-central> <tr>example1</tr> <tr>example2</tr> <tr>example3</tr> </div> Css .div-central { block-size: 60%; }
  18. I wrote media queries which until recently worked - the images are still resizing but for some reason the text has stopped resizing when I make the window smaller. I don't know what I might have done to render them non-functionable. Can anyone spot what it might be? Thank you very much. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</sc
  19. I have some social nav's at the bottom of my page in the footer which are not appearing. On another page with almost identical css the nav's appear. I can't detect the difference in the 2 pages except one is controlled by an external style sheet (where it's not working properly) and the other the css is inside the html document. I've pasted the relevant html and css below. Can anyone tell me why the facebook and instagram nav's don't appear? Thank you. <!DOCTYPE html> <html> <head><link rel="stylesheet" type="text/css" href="mystyle.css"> <script src="https:
  20. I have a number of web pages that are controlled by an external style sheet. I am pasting the css stylesheet in its entirety. My questions are: all of the web pages have an html and body element with a width of 1108px. (1) What is determining the width of these 2 elements? (2) What is the best practice for defining these elements? I want the web pages to be responsive to different browser sizes. Does defining fixed width constrain an element's responsive behavior? /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, b
  21. Don't matter the browser size, I need that the picture ocup 100% the browser height. For this, I just set the img heith in 100vh, and the code works fine. But, I also need this image be horizontal centered in the browser. For this, I've set the text align of my DIV that contain my IMG in center. When the browser width is greater than the img width, it works fine. But, if the browser width is less than the img width, the img go left aligned. I really need that img be centered in the browser size all the time, don't matter the conditions. I just know that I can do it replacing the img for backgr
  22. I found w3schools' tutorial for "Image Magnifier Glass" and want to use it on my website for multiple images. But I can only get it to work for one, presumably because it uses document.getElementById(imgID) in the js; I tried changing this to document.getElementsByClassName(names) but that didn't work. I'm not an experienced javascript user so don't know how to resolve, but assume something different needs to go where (names) is at the least. Can anyone help? The only thing I changed in the code is to add a little padding to the img-magnifier-container class. Thank you. <!DOCTYPE h
  23. I found code for a scrolling looping slideshow that I like but I can't get the div's to center. The div's seem to be left aligned with more space on the right side of the screen than left; this is evident on my 1366px monitor but much more obvious on a 1920px monitor where there is a lot of blank space on the right side of the screen. I have assigned display:flex to the parent and nested containers and center to align-items and justify-content, but the 2 main div's ("slider" and "wrapper_slider_text") are not centering. If anyone can help, I'd be very grateful. Thanks. <!DOCTYPE HTM
  24. For some reason I cannot determine, there is a scroll bar at the bottom of my page which accesses a blank portion of the viewport on the right. I have a feeling there is something in the stylesheet of the code I am accessing for the slideshow that is responsible, but I don't know how to correct it. I have removed all extraneous code except for the slideshow. Can anybody help? Thank you. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://use.typek
  25. How i make a Real time comment-replay script system in a website ?
×
×
  • Create New...