Jump to content

Search the Community

Showing results for tags 'css3'.



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 53 results

  1. PROBLEM ::: .navbar >:nth-child(3){margin:auto; } hover is not working in the media quires. Is there any other solution for this code? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> *{box-sizing: border-box;} .navbar { display: flex; background-color: #333; } .navbar > :nth-child(3){ margin-right: auto; } .navbar a{ color: white; text-align: center; text-decoration: none; padding: 14px 20px; } .navbar a:hover { background-color: #A4A1A1; } @media screen and (max-width:700px){ .navbar { flex-direction: column; } .navbar >:nth-child(3){ margin:auto; } } </style> </head> <body> <div class="navbar"> <a href="#">Home</a> <a href="#">News</a> <a href="#">About</a> <a href="#">Contact</a> </div> </body> </html> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> *{box-sizing: border-box;} .navbar { display: flex; background-color: #333; } .navbar > :nth-child(3){ margin-right: auto; } .navbar a{ color: white; text-align: center; text-decoration: none; padding: 14px 20px; } .navbar a:hover { background-color: #A4A1A1; } @media screen and (max-width:700px){ .navbar { flex-direction: column; } .navbar >:nth-child(3){ margin:auto; } } </style> </head> <body> <div class="navbar"> <a href="#">Home</a> <a href="#">News</a> <a href="#">About</a> <a href="#">Contact</a> </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. Dear all, Since bootstrap has container and container-fluid classes, does a heavy lifting, and is easy to use, I am inclined to think that css's media query has no advantage. I'd appreciate sharing any opposite opinion that sees usefulness/advantage in media queries.
  4. Hey folks, I have created a picture that shows my problems with Responsive Design. When I make the window smaller or switch to a smartphone, the Responsive Design should make it look good, no matter what resolution the display has. I'm not a pro in HTML5 or CSS3, especially not when it comes to Responsive Design, so I still don't understand some things correctly. #01: For example, I don't understand why the box with the lamp or the complete headline with subtext and symbolic line under it disappears completely as soon as the website switches to mobile. (Highlights – das gibt es bei uns) #02: Or why the distances to the individual boxes in the mobile design are so gigantic. #03: In mobile design, the W-Lan Icon Box and the text are below each other, but the distance is too big, and the text is no longer centered horizontally. I've been busy with this for a few days now and don't know what to do anymore. I've used a commercial Template to do this: Canvas | The Multi-Purpose HTML5 Template https://themeforest.net/item/canvas-the-multipurpose-html5-template/9228123?s_rank=1 This is the HTML Code of this section <!-- So Funktioniert's ============================================= --> <div class="page-section nomargin"> <div class="container clearfix divcenter center" style="max-width: 1150px;"> <h4 class="divcenter font-body"> Die moderne Kommunikation ist simpel.<br /> Da das Internet schon ohnehin zu unserem täglichen Leben gehört, lässt sich die Nutzung der telba Cloud sehr einfach gestalten. </h4> </div> <div class="row align-items-stretch divcenter center " style="background: #F9F8F7; max-width: 1150px; height: 400px"> <div class="col_half center" style="background: #EAF2F6 url(images/telba/wlan_crop.png) center center no-repeat; background-size: contain; height: 400px"> <h2 class="font-body ">So funktioniert's:</h2> </div> <div class="col_half col_last divcenter" style="background: #F9F8F7; height: 400px; padding: 5%"> <span class="font-body"> Ihre Cloud Lösung wird individuell nach Ihren Wünschen angepasst. Die Telefonanlage wird nicht vor Ort in Ihrem Unternehmen installiert, sondern wird Ihnen virtuell bereitgestellt. Unsere Kommunikationslösung wird in unserem Rechenzentrum betrieben, wodurch wir Ihnen unsere Leistungen, dank Cloud Computing, direkt über das Internet zur Verfügung stellen können. Über unser Internet Portal behalten Sie alles im Blick und können Ihre Aktivitäten leicht managen. </span> </div> </div> </div><!--So Funktioniert's ENDE --> <!-- Highlights ============================================= --> <div class="page-section nomargin"> <div class="heading-block title-center"> <h2>Highlights</h2> <span>das gibt es bei uns</span> </div> <div class="row align-items-stretch divcenter center" style="max-width: 1150px"> <div class="col-lg-4 d-none d-md-block" style="background:#DFEEF2 url('images/telba/lampe_crop.png') center center no-repeat; background-size: contain; height: 600px;"></div> <div class="col-lg-8"> <div class="row align-items-stretch clearfix noborder" style="background: #F9F8F7"> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">One Number</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Faire Preisgestaltung</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Moderne Kommunikation</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Skalierbarkeit</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Immer auf dem neusten Stand</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Schnelle, einfache Einführung</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Motivierte Mitarbeiter</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Betriebliche Flexibilität</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Standort- unabhängigkeit</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">innovative Arbeitsplatzmodelle</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Schnelles Reagieren auf Veränderungen</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Bereitstellen der Leistung über das Internet</h3> </div> </div> </div> </div> </div> </div><!--Highlights ENDE -->
  5. This code works perfectly on a desktop or laptop, and on non-iOS mobile devices. It takes a thumbnail sample of an edited image and displays it at full size in a new canvas. On iOS, I just see a blank screen where the canvas should be. function click5() { document.getElementById("preview").style = "visibility:visible;"; document.getElementById("cPreviewCaption").style = "font-size:90%; font-weight:550; text-align:center; color:#FFFFFF; padding-top:6px;"; // Apply change to preview image which will open beneath thumbnails var cP = document.getElementById("cPreview"); var contextP = cP.getContext("2d"); var cO = document.getElementById("cOriginal"); var contextO = cO.getContext("2d"); var imgData = contextO.getImageData(0,0,cO.width,cO.height); var data = imgData.data; //read full size image //similar image read/write code works fine in another image filter so this does not appear to be the issue for (i = 0; i < data.length; i += 4) { red[i] = imgData.data[i]; green[i] = imgData.data[i+1]; blue[i] = imgData.data[i+2]; alpha[i] = imgData.data[i+3]; } //set adjustments represented by user interaction with thumbnails for (i = 0; i < data.length; i += 4) { red[i] = red[i] + finalRedAdjust; if (red[i] < 0) red[i] = 0; if (red[i] > 255) red[i] = 255; green[i] = green[i] + finalGreenAdjust; if (green[i] < 0) green[i] = 0; if (green[i] > 255) green[i] = 255; } //write full size image with adjustments to memory for (i = 0; i < data.length; i += 4) { imgData.data[i] = red[i]; imgData.data[i+1] = green[i]; imgData.data[i+2] = blue[i]; imgData.data[i+3] = alpha[i]; } //write image in memory to file contextP.putImageData(imgData, 0, 0); //add borders for canvases. document.getElementById('cOriginal').style = "border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060; visibility:hidden; display:none;"; document.getElementById('cPreview').style = "border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060; visibility:visible; display:block;"; //Scroll page to preview image location.hash = "null"; location.hash = "previewAnchor"; } // End Table Click Event Functions I have tried this with small images, so dimensions and file size do not appear to be the issue. Thank you
  6. I'm using somewhat unusual navigation, as seen here. When a user mouses over the bars, they slide out into view. All of that is working fine. The problem is, I cannot find the CSS to make the buttons align left of the edge of the screen (as seen in the image), regardless of the display dimensions. I originally tried: <style> #container {width: 600px; height: 25px; position: relative;} #bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: -340px;}"; </style> Which worked perfectly. But only on my screen. I thought that position:absolute inside position:relative would work regardless of screen dimensions, but I was obviously wrong. I then tried several variations on dynamically adjusting the screen width in the container <div> with a function that runs onload: function populateArrays() { // populate arrays for (i = 0; i <= 5; i++) { position[i] = -340; bar[i] = document.getElementById("bar" + i.toString()); id[i] = i; } // Add a dynamically built style sheet var sheet = document.createElement('style'); var sWidth = screen.width; var lWidth = sWidth - 1024 // 1024px is width of the page body. The result, 342, works perfectly at my resolution of 1366: 1366 - 1024 = 342 (I use -342). sheet.innerHTML = "#container {width: " + sWidth + "px; height: 25px; position: relative;} #bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: " + -(lWidth) + "px;}"; document.body.appendChild(sheet); } But this also did not work. Perhaps I should be using a formula other than screen.width - 1024 = -(lWidth)? All I know is it doesn't work at other resolutions. What is the correct way to align the images to the far left, partially (mostly) off screen, regardless of dimensions? I've lost an entire day's work to this. Thank you very much
  7. Hello I need to get the value of a CSS Filter, Hue in this case, that's currently being applied to a canvas. I tried this: var hue = document.getElementById('canvas1').style.filter('hue-rotate'); and it did not work, several variations on that theme also failed. What is the correct syntax? Thank you very much PS: this could apparently also work var hue = getComputedStyle(canvas1).filter But it will not retrieve just the hue. Thank you
  8. armandesigner

    Css problem

    Hello guys I have a question about CSS: 1.What is the different between these things: div>p {background-color: yellow;} div p {background-color: yellow;} ---------------------------------------------------------- 2.And what is the different between these things: :root {background-color: yellow;} * {background-color: yellow;} ---------------------------------------------------------- 3.And what is this: ::selection ---------------------------------------------------------- I will be happy if you answer me.
  9. I should specify in advance "Using pure JavaScript: I'm working on bare-bones HTML5 / CSS3 / JavaScript image editor and I'm ready to add a fileSave function. I'm going to use toDataURL() to allow the user to (1) save the file with a new JPG quality setting, or (2) save the file to PNG (I'm not aware of any options for PNG), or (3) save the current file format (typically JPG) and current quality setting. This last option will basically be the same thing as "right click" and "save file", but I would prefer something that will work from a button. How would I go about doing this? A code sample would definitely be helpful Thank you
  10. Real simple here: Why does this work.. tr.retired td:not(:nth-child(2)){ background-color:purple; } And this works... tr.retired td:not(:nth-child(3)){ background-color:purple; } But this doesn't work? tr.retired td:not(:nth-child(2)),tr.retired td:not(:nth-child(3)){ background-color:purple; } Fiddle: https://jsfiddle.net/m6z1suyb/ Thanks!
  11. I have the following paragraphs with image on side and I need a "figcaption" on each image. I need to set the "figcaption" text with independent settings. How can i do this? My image.right and image.left class have this settings: .image.right { float: right; margin: 0 0 1em 1.5em; top: 0.25em; } .image.left { float: left; margin: 0 1.5em 1em 0; top: 0.25em; } And I need my figcaption to use this settings: font-size: 75%; font-style: italic; text-align: center; Also, I'm not sure if the figcaption tag is correctly used in my HTML: <p><figure><span class="image right"><img src="images/scania_old.jpg" alt="Stoptrans first truck" /><figcaption>Stoptrans first truck in the 80's</figcaption></span></figure>Vestibulum ultrices risus velit, sit amet.</p>
  12. Hello CSS community! I have a general question about slideshows with CSS3 and Javascript. The 'TryItEditor' examples all call http://www.w3schools.com/lib/w3.css which, when you look at it is a huge block of unintelligible (to me anyway) script. e.g.: ---------------------------------------------------------------------------------------------------------------------- "a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted} dfn{font-style:italic}mark{background:#ff0;color:#000} small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px} img{border-style:none}svg:not(:root){overflow:hidden} code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em} hr{box-sizing:content-box;height:0;overflow:visible} button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold} button,input{overflow:visible}button,select{text-transform:none} button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button} button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0} button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText} fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em} legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto} [type=checkbox],[type=radio]{padding:0} [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto} [type=search]{-webkit-appearance:textfield;outline-offset:-2px} [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-input-placeholder{color:inherit;opacity:0.54} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}" -------------------------------------------------------------------------------------------------------------------------- (this is a small portion). I use html instead of a website editor such as Joomla or Dreamweaver as I am a minimalist and don't like putting huge amounts of code onto the server (giving away my age here). Is there some way that I can produce slideshows myself without recourse to something like this stylesheet. Looking through it, it seems to have catered for every concievable slideshow arrangement that will ever be required. I'd prefer to simplify things if I can. Thanks Max
  13. So So I'am Thinking Of A Way To Detect CSS3 Browser Support Using Client-Side Scripting (JavaScript),I Know There's A Library Out There To Handle Such Situations,But I Need A Code Or A Hint To Do This Without Any External Libraries. Any Suggestions Would Be Appreciated...
  14. I Know That Parameters In The 2D Matrix Function Are: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()). But What Does Those (n)'s Parameters Mean In The 3D Matrix Function? matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
  15. I Can't Understand The Purpose Of That Property,And What Is The Difference Between animation-fill-mode:none; And animation-fill-mode:forwards;?...
  16. How to use the border-image-width property in border-image shorthand? If i try this: border-image: url(border-image.png) 40 30 round; In this i am using 30 as border-image-width but the browser rendering it as the second parameter for the border-image-slice.
  17. Good afternoon Can someone explain to me the difference between these properties, please? As for me are one and the same. Regards: Marek
  18. To sum things up... I'm looking for as much reviews as possible. I've been working on minestatus for the last year now. I've come across many programming roadblocks and developments to further improve the quality, user impression, user interface, and user engagement. If you guys have any ideas on how to make my site better in any of those categories that would be amazing. Thank so much! Link to site: http://minestatus.co Site Name: MineStatus Site Description: MineStatus is a new social sharing plateform I've created. It allows users to make there own profiles, upload content, display the content. You can even share your content on MineStatus to almost any other social network without flaw. I plan on making a developer site to go along with it to share my practices with everybody. Site Owner/Developer: Myself, I am the lead developer and creator of MineStatus Network Site Address: Here is the link to the site : https://minestatus.co Extra Info: Some technologies I've already integrated: Open Graph Protocol* Twittercards* *for those who don't know here is a link, Open Graph Protocol, Twittercards.
  19. Hi, I am trying to come up with a preloader. The problem is none of the animations start. What I am trying to achieve is the following sequence: preloader_wrapper fade in, then fade out as soon as the document is loaded. JS: jQuery(document).ready(function($) {/* * Preloader */$('#preloader_wrapper').addClass('preloader_fadein');$(window).load(function(){$('#preloader_wrapper').addClass('preloader_fadeout');$('header *').css({ -webkit-animation-play-state: 'running'; -moz-animation-play-state: 'running'; -o-animation-play-state: 'running'; animation-play-state: 'running';});});}); CSS: .preloader_wrapper { position: absolute; top: 50%;}.preloader_fadein { -webkit-animation: preloader_fadein 2s ease; -moz-animation: preloader_fadein 2s ease; animation: preloader_fadein 2s ease;}@keyframes preloader_fadein { from { opacity: 0; left: 45%; } to { opacity: 1; left: 50%; }}.preloader_fadeout { -webkit-animation: preloader_fadeout 2s ease; -moz-animation: preloader_fadeout 2s ease; animation: preloader_fadeout 2s ease;}@keyframes preloader_fadeout { from { opacity: 1; left: 50%; } to { opacity: 0; left: 55%; }}.header * { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;}
  20. rgrisham

    Animation ?

    Started on the 2D tutorial and could not get animation to work - IS this explained further along in the animation section of CSS3? Or, is animation in JavaScript? I was hoping it wasn't a computer setting problem because when I was in the CSS3 2D transformation tutorial, the animation was not working. Thanks Rich
  21. Hello, I want ask about css3 animation in exercise 6 in css3 animation using (animation-delay: ease-in-out;) in answer exercise why not use animation-timing-function? Thanks,
  22. Hello everyone! My name is Ron Kane and I am an accomplished web developer and technical writer having done many technical manuals, general information and "how-to"s in the Content Management field. I have significant success in utilizing the Adobe Suite and Microsoft SharePoint products with respect to creating content and following industry based style guides. My biggest success to date was working with one of my past company's Chief of Staff for a SVP in revamping their entire Intranet portal. This portal went from being unprofessional looking and having no web traffic to being very professional looking and increasing the traffic to it ten-fold. Right now, I'm reading through the HTML tutorials in preparation for my first ever HTML certification through here to gain recognition for my commitment to improving my skills and to meet with fellow web developers on here. Ask away if you have quesitons and I'm glad to be on here! Ron
  23. Hey everyone,Trying to make a website for learning purposes and I am totally lost. I'm teaching myself CSS3.0 and HTML 5.0 having learnt CSS2 and HMTL4 many years ago. None and no CSS I write is ever applied to the HTML5 webpage despite being referenced and both the HTML and CSS files being in the same folder together. And yes, I've Googled a lot and looked up my old textbooks and am still super stuck...see attached or look below for the code:PS: Using Microsoft Expression Web 4 (trial) OxfordEngineering.html<!DOCTYPE html><html><meta charset="UTF-8"><title></title><head><link rel="stylesheet" type="text/css" href="Oxford_engineering_CSS.css"></head><body>This is my website!</body></html>Oxford_engineering_CSS.css<div id="slider">div#slider { width: 80%; max-width: 3000px; }<figure><img src="Images/Edited/Engineer1.jpg" alt="Engineer1"><img src="Images/Edited/Engineer2.jpg" alt="Engineer2"><img src="Images/Edited/Engineer3.jpg" alt="Engineer3"><img src="Images/Edited/Engineer4.jpg" alt="Engineer4"></figure>div#slider figure {position: relative; width: 500%;margin: 0; padding: 0; font-size: 0; text-align: left;}figure#imagestrip img {width: 25%; height: auto; float: left;}div#slider {width: 80%; max-width: 3000px; overflow: hidden}</div>body {background-color: #b0c4de;}
  24. I want to create a dynamic header like the image attached... By dynamic i mean the borders should adjust according to the length of the text Help Appreciated
  25. http://jsfiddle.net/makzan/RE2JJ/ The coding in the above link has fixed height and width (180 X 180 i.e Square)...I have images which are not square...they are either landscape or portrait....i tried to make width and height dynamic so that it could fit any size of image but i couldn't do it....Can anyone help me out,... Please.. Help Appreciated
×
×
  • Create New...