Jump to content

Search the Community

Showing results for tags 'CSS'.



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

  1. Trying to modify this for different pages using page ID. Working well for the site, but I need to have different backgrounds on different pages. body { background-image: url("paper.gif"); } New to this and could use some help making it work. Thanks to anyone.
  2. JoanaN

    CSS Animation

    Hi, I have these comic PNG images and I want to animate them using CSS. I want to rotate any resize them; how can I do that? Do you have any other animation ideas that work well with comic style? Thank you!
  3. Noob here. I have been playing around with W3.css, in particular the w3-row-padding, however I would like to set up five columns, with some padding. Can anyone advise me how I might go about this (I'm guessing it will involve nesting some containers?) Many thanks.
  4. Hi The guide on making a scrolling header is great, but it relies on javascript running every time you scroll. That is really expensive (resource-wise) and contributes to a laggy an unresponsive website. I think the guide should be updated to use sticky css-elements instead of js. This method does not have the same performance issues, and I'd argue it's an easier and more elegant solution. The new guide is pretty much already written here. The support for sticky elements is not perfect, so there is a discussion to be had about whether to prioritize browser support or performance, but i think at the very least the page should have a yellow box, mentioning that the sticky element is a better solution.
  5. Hi, I did animated leafs on my web-page and after that my links did'n work. I tried to set the animation to run just one time, but it didn't help. Is just so, that animations and links don't work at the same page? Animation is made with @keyframes.
  6. I'm trying to set up a template for a website, with a responsive top border with dropdowns in the navigation bar. I thought I had it all working at one time, but have gone back to previous files to no avail. The menu is responsive, and goes down into a hamburger icon, but clicking on the hamburger icon does nothing. I'm trying to do this without using too many external files. I think the problem must be in the javascript function combined with the media queries, but I haven't been able to see the problem. I used the W3Schools responsive navbar with dropdowns, from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown as a basis for this. The files I have are index.htm, a top border file, top.htm in the folder _borders, and 2 css files in a css folder: mystyles.css and topnav.css. This is the basic code from index.htm. I excluded site-identifying code and content. I've attached the other 3 files - didn't know how to paste them here separately. In the top.htm and index.htm I've commented out references to the mystyles.css file and it doesn't make any difference. I'm using Brackets for this, and using Live Preview. If I just open the index file directly in Chrome or Firefox, there is no formatting, no nav bar or menu. But it looks just lovely in the Brackets Live Preview (other than the hamburger icon not responding. With my working website, I can open the index file in Chrome or Firefox and all is good. If someone can provide some direction I'd really appreciate it! <!DOCTYPE html> <html lang="en-us"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="author" content="USTaxTips.net"/> <link rel="stylesheet" href="../css/mystyles.css"> <link rel="shortcut icon" href="/favicon.ico"> </head> <body> <div w3-include-html="_borders/top.htm"></div> <script> includeHTML(); </script> <div id="container"> </div> </body> </html> mystyles.css topnav.css top.htm
  7. Hi, Can someone please help with some code I am trying to have the numbers *clicked* & stay blue in color and then display over on the right side in the ? circles only allowing each number to be used once photo is attached of my web page
  8. I finished studying html, and i started CSS but its same as html. should i skip css and just go to JS? i have a background in c (arduino and raspberry pi ), am not interested in the whole front-end code (its like making a power-point presentation more than coding). when am going through css its like a am going through html yet again. i could finish it in a week probably (since i finished studying html and since it seems like css is the style sheet of html). am just feeling like am wasting my time. I have this bad habit, if i start reading something, i don't feel completed if i don't go from cover to cover. PS: even if i got a comment to skip CSS, i would probably do the contrary and finish it (i just don't feel its that important for a person who is interested in the back-end programming ). i have got this bad habit of following numbers and steps even if its so repetitive.
  9. i cant make background color fully the entire page with fixed sidebar, can you help me to give the background color fully in main side bar. sorry for my bad english :) This the link fixed sidebar
  10. Could you please run the following html test case, to help figure out how to make bootstrap 4 tooltip go away when a button is disabled while the tooltip is over the button? All the details concerning my question are in the source code for display when the HTML is displayed. Any help appreciated. Thanks <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Tooltip Persists, Looks Terrible</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Bootstrap 4 Tooltip Persists, Looks Terrible</h3> <br> "Other button disabled" scenario works fine. <br> First, hover over buttons. Look at tooltips while hovering. <br> Then, click button A to disable button B. Works fine: <br> - Button B is disabled, and no tooltip. <br> - Tooltip still works correctly on button A. <br> <br> <button type="button" id="button_a" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button B" onclick='change_button ("button_b", true);'> Button A </button> <button type="button" id="button_b" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disabled by Button A"> Button B </button> <br> <br> <hr> <br> "Same button disabled" scenario fails. <br> First, hover over Button C. Look at the tooltip. <br> Then, click button C to disable button C. Messes up: <br> - Button C is disabled, so that part is OK. <br> - But Button C tooltip persists, looks terrible. <br> <br> <button type="button" id="button_c" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button C" onclick='change_button ("button_c", true);'> Button C </button> <button type="button" id="button_d" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Enables Button C" onclick='change_button ("button_c", false);'> Button D </button> <br> <br> <hr> <br> So if a button is disabled while the cursor is hovering over it, the tooltip persists. <strong> Could you please explain how to make tooltip go away when Button C is disabled? </strong> I would prefer if tooltip went away when Button C disabled, since that is default behavior of bootstrap disabled buttons. And disabled button may later get enabled again, so I do not want to delete title attribute. Basically I want bootstrap to behave the same way as when Button B is disabled. I have looked around and cannot find how to fix this problem, and have tried various things, with no success. There are real instances where a button carries out an action, and then the button needs to be disabled, so I appreciate the help. Thanks </div> <script> $(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();}); function change_button (button_id, bool_val) { var button_obj = document.getElementById (button_id); button_obj.disabled = bool_val; } </script> </body> </html>
  11. MOTIVATION: It is sometimes said that time heals all. With this in mind I am hoping that the W3Schools community has advanced since the last time that I communicated and has found a solution to the following problem. BACKGROUND: Recently I created a new webpage that can be found at www.publiustwo.com/ali. If you open this page in an iPhone with a vary narrow viewport such as my own, you will observe that filling in any of the form items that require text input, and in several cases even those that do not, causes the width of the document to increase beyond the size of the available viewport and does not return it to its former size after the input has been completed. QUESTION: It would appear that there are two solutions to this problem: one, prevent the size of the page from expanding in the first place; two, cause the size of the page to retract after the entry has been completed. Has anyone found a solution to this problem" Roddy
  12. gliak

    Slider height problem

    I am trying to adjust height (manually or automatically) of a slider in css. Problem is that images shown may be shorter or taller than preset and they also carry a piece of text that should be displayed. I attach html, css and a set of screenshots with explanations. Thank you! research_en.html style.css
  13. Raktim

    Animated Modal Box

    I create a modal box that when the user clicks on the button the modal will appear with animation. When the user clicks on the close button ( located on the right side of the header area ) or anywhere of the screen except modal box it will disappear without animation. I want that the modal will disappear/hide with animation. I create two CSS animation. One is animatetop which I already used when modal will open and another is animatedown which I want to use when modal will disappear. But, I can't understand how to do that? See the code on JSFiddle <html> <head> <style> .background{ display:none; position: fixed; z-index: 1; height: 100%; left: 0; top: 0; width: 100%; padding: 100px; background-color: rgba(0,0,0,0.4); } .modal{ background-color: white; position: relative; border: 1px solid #888; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); animation-name: animatetop; animation-duration: 0.4s; width: 80%; } .header{ width: 100%; padding: 8px 20px; background-color: crimson; color: white; } .footer{ width: 100%; padding: 8px 20px; background-color: lime; color: white; } .middle{ width: 100%; padding: 2px 20px; background-color: white; color: black; } h2{ margin: 0px; } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } @keyframes animatedown { from {top:0; opacity:1} to {top:-300px; opacity:0} } span{ float: right; color: white; font-size: 28px; font-weight: bold; cursor: pointer; padding: 2px 5px; } </style> </head> <body> <button onclick="modal()">Open Modal</button> <div class="background" id="MyModal"> <div class="modal" id="modal"> <div class="header"> <span onClick="a()">&times;</span> <h2>Header</h2> </div> <div class="middle"> <h1>Modal</h1><br> <h1>Popup Box</h1> </div> <div class="footer"> <h2>Footer</h2> </div> </div> </div> </body> <script> background = document.getElementById("MyModal"); function modal() { document.getElementById("MyModal").style.display = "block"; } function a() { document.getElementById("MyModal").style.display = "none"; } window.onclick = function (event) { if(event.target == background) { document.getElementById("MyModal").style.display = "none"; } } </script> </html>
  14. I am trying to use a video background (Vimeo iframe) in a DIV, but I cannot get it to fill out the DIV as I want to save my life. I am working from an HTML template and I am an intermediate user at the most. here is a screen capture of what it is doing at the moment when I scale the browser window to check responsiveness: DIV scaling. (the video content almost looks like a still picture, but it's in fact a moving video) What I am trying to do is: The video should be locked to the bottom right corner of the DIV. The left OR the top side of the video should be cropped, depending on the aspect ratio of the DIV. Why am I not getting this? I first thought that it might not be such a big deal, but it just won't work. could anybody help me with this? here is the HTML of the DIV: <div class="imageblock__content videobg col-lg-6 col-md-4 pos-right" data-overlay="0"> <iframe src="https://player.vimeo.com/video/372864200?background=1" style="position:relative;right:0%;bottom:0%;width: 120%; overflow:hidden" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> <div class="background-image-holder"> <img alt="image" src="img/wedding-5.jpg"> </div> </div> and here are all the relevant CSS calls: .videobg .container, .videobg .background-image-holder { opacity: 0; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; } .videobg .background-image-holder { opacity: 0 !important; } .videobg.video-active .container { opacity: 1; } .videobg.video-active .loading-indicator { opacity: 0; visibility: hidden; } .videobg video { object-fit: cover; height: 100%; min-width: 100%; position: absolute; top: 0; z-index: 0 !important; left: 0; } @media all and (max-width: 1024px) { .videobg .background-image-holder, .videobg .container { opacity: 1 !important; } .videobg .loading-indicator { display: none; } .videobg video { display: none; } } .imageblock .imageblock__content { position: absolute; height: 100%; top: 0; z-index: 2; padding: 0; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-md-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .pos-right { right: 0; }
  15. buraana623

    Overlaping NavBar

    Hey y'all I have a problem with my code. It overlaps parts of my design. Here is the css for the navbar. Can anyone help? script.js style.css
  16. So basically, I have my sticky navbar working with a working dropdown inside. My problem: when I scroll down and the sticky class is activated, the dropdown stops working. So how can I fix that? This is the code I have over there <div class="navtop"> <div class="dropdown-user"> <div class="dropbtn"><img src="images/user.png" alt="Perfil de Usuario" width="20px"><span>'.$_SESSION["username"].'&nbsp;&nbsp;<i class="fa fa-angle-down"></i></span></div> <div class="dropdown-user-content" id="dropdown-user-content"> <a href="perfil.php"><i class="fa fa-fw fa-user"></i> Perfil de usuario</a> <a href="mensajes.php"><i class="fa fa-fw fa-envelope"></i> Mensajes</a> <a href="reglas.php"><i class="fa fa-fw fa-book"></i> Reglas</a> <a href="resumen.php?logout=1" style="color:red"><i class="fa fa-fw fa-arrow-right"></i> Salir</a> </div> </div> </div> <style> .sticky { position: sticky; top: 0; z-index: 1; } .navtop { width: 100%; background-color: #000; overflow: hidden; color: #fff; font-size: 12px; } .dropdown-user { float: right; overflow: hidden; } .dropdown-user:hover { background: darkgrey; cursor: pointer; } .dropdown-user .dropbtn { outline: none; height: 31px; background-color: inherit; font-family: inherit; } .dropdown-user img { float: left; margin: 5px 4px 0px 5px; } .dropdown-user span { float: left; padding: 8px 8px 8px 0px; } .dropdown-user-content { display: none; right: 0; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-user-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-user-content a:hover { background-color: #ddd; } .dropdown-user:hover .dropdown-user-content { display: block; } </style Thanks in advance!
  17. I am working with an HTML5 template that supports youtube video backgrounds in a DIV. When I scale the browser window to see how the responsivnes behaves, I notice that the videos crop left/right, top/bottom, depending on the aspect ratio of the DIV. For my purposes, I would need the videos only crop on the right and top only, so that the bottom left is always visible. As I am not a pro I have been doing a lot of trial and error on this, but cannot get it working. I actually need to have two classes available. One where the video scales from the bottom left and one where it scales from the top right corner. I don't quite understand if I need to create two new classes for "videobg" AND "youtube-background" respectively? That would be "videobg-bl, videobg-tr, youtube-background-bl, youtube-background-tr". Or is just one of those classes responsible for the scaling? This is the HTML snippet I use in the template: <div class="imageblock__content videobg col-lg-6 col-md-4 pos-right" data-overlay="0"> <div class="youtube-background" data-video-url="https://www.youtube.com/watch?v=ekthcIHDt3I"></div> <div class="background-image-holder"> <img alt="image" src="img/dancer-1A.png"> </div> </div> and these are the CSS classes for videobg and youtube-background: .videobg { background: #252525; position: relative; overflow: hidden; } .videobg .container, .videobg .background-image-holder { opacity: 0; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; } .videobg .background-image-holder { opacity: 0 !important; } .videobg.video-active .container { opacity: 1; } .videobg.video-active .loading-indicator { opacity: 0; visibility: hidden; } .videobg video { object-fit: cover; height: 100%; min-width: 100%; position: absolute; top: 0; z-index: 0 !important; left: 0; } @media all and (max-width: 1024px) { .videobg .background-image-holder, .videobg .container { opacity: 1 !important; } .videobg .loading-indicator { display: none; } .videobg video { display: none; } } .youtube-background { position: absolute; height: 100%; width: 100%; top: 0; z-index: 0 !important; } .youtube-background .mb_YTPBar { opacity: 0; height: 0; visibility: hidden; } @media all and (max-width: 1024px) { .youtube-background { display: none; } } Also, the template is using ytplayer.min.js for the youtube backgrounds. Unfortunately, the player shows branding watermarked elements during the first 2-3 seconds of the clip, that I have no idea how to get rid of. I also have all my clips on vimeo, so it would be so much more convenient to be able to use vimeo backgrounds instead. Is there a simple way to do this, without breaking the above CSS?
  18. Maddi

    Quotation-Signs

    The exple in https://www.w3schools.com/CSSref/playit.asp?filename=playcss_quotes&preval=%27\2039%27%20%27\203A%27%20%27\00AB%27%20%27\00BB%27 (and possibly in other places) uses examples with the upper quote sign first an the lower quote sign at the end. The correct order in German, Austrian and possibly other countries e.g. Switzerland is: „quoted phrase“
  19. Hi new to this so hopefully, someone can point me in the right direction.. currently trying to use this https://www.w3schools.com/howto/howto_js_collapsible.asp to create a staff profile element. i have changed it so the elements sit side by side but when I click on the hidden content it pushes the other two elements down the page. I would like them to stay in line with the content appearing below. my reworking of the code is this.. HELP /*the team section CSS*/ .the-team{ clear: both; } .the-team-inner{ margin: 0 auto; width: 80%; padding: 4.5em; } .team-members{ width: 25%; display: inline-block; padding: 3.8em; } .team-members img{ width: 100%; } .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 1.4em; } .active, .collapsible:hover { background-color: #555; } .collapsible:after { content: '\002B'; color: white; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } .content { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; } <!-- THE TEAM HTML--> <div class="the-team"> <div class="the-team-inner"> <div class="team-members"> <img src="images/headshot.png" alt="headshot one"> <button class="collapsible">Ronnie Garrick</button> <div class="content"> <p>Ronnie has over 30 years of global energy industry experience and has played an integral role within a number of technology-focused companies. Ronnie has a strong a track record of internationalisation and export in both the onshore and offshore markets – his expertise has been gained within key Director roles in operations, sales, finance and board level activity.</p> <p>Starting his career with BP working at the Grangemouth Oil refinery in Scotland, Ronnie has successfully led a number of M&A’s including the sale of a global oilfield service firm to Lime Rock Partners in 2007. He continued as CEO to lead the company with its international expansion in regions including the US, Norway, Middle East and Europe until his exit following the successful sale to Buckthorn Partners in 2017. </p> <p>He currently sits as a Non-Exec Director on the investor Board of TWMA and is looking forward to assisting and transforming businesses through the combined expertise of Garrick Group. </p> </div> </div> <div class="team-members"> <img src="images/headshot.png" alt="headshot one"> <button class="collapsible">Davie Garrick</button> <div class="content"> <p>Davie started his career in Shetland as an apprentice plant mechanic and has gained years of experience both on and offshore. Playing a key role across multiple disciplines, Davie has been integral in building the capabilities and global reach of oil service businesses within the energy sector.</p> <p>Following the merger to form TWMA, and subsequent sale to Lime Rock Partners in 2007, Davie exited the business in 2017 and continues to sit as a non-exec Director on the Investor Board.</p> <p>With an operational, technical and commercial skillset, he aims to use his experience and track record in the industry for further non-exec and investment opportunities. </p> </div> </div> <div class="team-members"> <img src="images/headshot.png" alt="headshot one"> <button class="collapsible">Douglas Garrick </button> <div class="content"> <p>Douglas has over 25 years of experience gained in directing businesses through acquisitions, disposals, funding and private equity. As Finance Director, Douglas led a global oil services firm from a privately owned SME to become an equity backed £50million turnover organisation with 550 staff. Following his exit from TWMA, Douglas now aims to use his finance and commercial track record to assist other growing businesses in related industries.</p> <p>His other areas of expertise include legal disputes and resolutions, disposals, funding, property management and insurances. </p> <p>Douglas has completed the Non-Executive Director Programme at the University of Edinburgh Business School and Institute of Directors. </p> </div> </div> </div> </div>
  20. I am having what I assume is a CSS issue, because there is a grey background where there should be none. I have attached the code and was hoping someone was able to assist with this issue. Screenshot of the issue: It should look like this: holman-bmw-ft-lauderdale-accordion-x7-page_v3 no carousel.html
  21. Can someone help me understand why the padding isn't applied equally to the top and bottom of my banners div? The top has the 50px padding but the bottom does not. However, when you resize the browser window then the padding seems to be applied equally. <style> /* -------------------- START BANNERS CSS STYLE-------------------- */ div.banners { padding: 50px 0px; margin: 0px 0px; background-color: #f60; } div.banners-third { width: 30%; margin-right: 5%; float: left; text-align: center; } div.banners-third-last { margin: 0px; } /* -------------------- END BANNERS CSS STYLE-------------------- */ /* -------------------- MEDIA QUERIES ---------------------- */ @media screen and (max-width: 820px) { div.banners-third { width: 47.5%; } div.banners-third-second { margin: 0px; } div.banners-third-last { padding: 20px 0px 0px; width: auto; clear: both; float: none; } } @media screen and (max-width:720px) { div.banners-third { width: 33%; margin-top: 25px; } div.banners-third-last { padding: 0px 0px 0px; width: auto; clear: both; float: none; } div.banners-mobile-collapse { width: auto; margin-right: 0px; float: none; } } </style> </HEAD> <body> <!-------------------- START BANNERS HTML --------------------> <!-- banners- --> <DIV class="banners"> <!-- one-third --> <DIV class="banners-third banners-mobile-collapse"> <h2>Banner 1</h2> </DIV><!--/banners-third--> <!-- banners-one-third --> <DIV class="banners-third banners-third-second banners-mobile-collapse"> <h2>Banner 2</h2> </DIV><!--/banners-third--> <!-- banners-one-third --> <DIV class="banners-third banners-third-last"> <h2>Banner 3</h2> </DIV><!--/banners-third--> </DIV><!--/banners--> <!-------------------- END BANNERS HTML --------------------> </BODY> </HTML>
  22. Hi, i'm creating my private webpage with my own styling by css in some forms i need. For the design i used several examples of the HowTo-section of w3schools. On the custom select item i need a scroll element, because the select element has many options hat i should be able to sroll through. How can i add this function? Thanks for your help Harald style.css orange.css Spieler.php helpfile.js
  23. Hi, I'm wondering if there is an equivalent for the sticky footer tutorial in W3CSS. Or this flexbox method. --> preferred result HTML <body class="Site"> <header>…</header> <main class="Site-content">…</main> <footer>…</footer> </body> CSS .Site { display: flex; min-height: 100vh; flex-direction: column; } .Site-content { flex: 1; } I'm only have so so working knowledge on the topic CSS and would like to LIMIT my beginning to W3.CSS as I find it comfortable to use and learn at the same time. And learning any other 'framework' just confuses me more.
  24. Hey, I want to bulid a container that has text in it, is partially positioned outside of the parent element and pushes text away (see image below). In order to push text away, this container has to be floated, right? To position the container, I know of 2 ways: 1. absolute positioning (inside a container with relative positioning) 2. relative positioning (and translating the container to the side). The problem: Absolute positioning will make float completely redundant – the container does no longer push text away. And with relative positioning, the area that pushes text away won't be affected by the transform: translate and will stay in the top left corner of the parent element. The closest I have come to is this: <div class="wrapperSingleProject"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p> <div class="relativeposition"> <div class="quote-div"> <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p> </div> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div> .wrapperSingleProject { padding: 80px 0 80px 0; width: 750px; position: relative; } p { text-decoration: none; text-align: left; font-size: 17px; font-family: 'Roboto', sans-serif; font-weight: 400; letter-spacing: 0.08em; line-height: 1.45; color: black; } .quote-div p { /* relative positioning */ position: relative; text-align: center; width: 200px; color: blue; background-color: #ccc; float: left; top: 300px; left: 0%; transform: translate(-50%, -50%); /* absolute positioning: you need to activate .relativeposition */ /* position: absolute; text-align: center; width: 200px; color: green; background-color: #ccc; float: left; top: 300px; left: 0%; transform: translate(-50%, -50%); */ } .relativeposition { /* position: relative; */ } Do you guys have any ideas how to make this happen? Thanks a lot!
  25. Hey, I am a beginner in desperate need of help. I tried to build a slideshow using the code that dsonesuk provided here: http://w3schools.invisionzone.com/topic/55499-combine-the-manual-and-automatic-slideshow-script-into-one-script/page/2/ I wanted to strip it of parts that I don’t need and add some small modifications. What’s the goal? (See image below) An automatic slideshow with „index indicators“ that can manually be triggered. The active one is highlighted and if you hover over any of the indicators, the slideshow stops until unhovered. So far all features are provided by dsonesuk’s code. I wanted to add a few visual tweaks, animations, a bigger hitbox for the indicators and throw out the code that I don't need. What are the problems? I have been trying to build this slideshow for two days now and my motivation has taken a little bit of a hit. While working on it, some of the elements seem to behave unexpectedly. It might also have to do with the Firefox browser developer tool I am using since some issues don't occur if I scale the browser window by hand but only when mobile presets of the browser are used (using Firefox Quantum 68.0.1, 64-Bit). The version I am showing you right now has some bugs I just don’t know how to fix: The whole .slideshow is not positioned in the center as it should be (visible in screen sizes wider than 1280px). This is because the .slideshow is an inline-block element. But if I set it to just inline or block, the slideshow glitches into the following div (in larger screen sizes). The smaller you make the browser size, the more #myslideFrame expands in height, messing with the positioning of the whole slideshow. I think the JS is responsible for that, but I don’t know how to fix it. Strangely, reloading fixes the issue (until browser window gets resized from big to small again). I can’t get the index indicators back „over“ the img. Any thoughts on the hitbox for the index indicators? I can’t get them to work either. What's the code? You can find the HTML, CSS and JS files attached beneth. The download section doesn't seem to manage folders very well (or at all). But the files "img1.jpg", "img2.jpg" and "img3.jpg" need to go into a folder called "img" in order for the code to work properly. There are a few bits of code that I am not entirely sure if they are still necessary (remaining from dsoneuk's code). As I said I am still learning and this thing grew over my head quickly. Thanks! fact.html script.js style.css .DS_Store
×
×
  • Create New...