CSS3 fading out text

Issue I’ve been trying to get my text to fade out. I’ve tried some codes I’ve found on the internet, but they seem to be only for block elements. Solution Never mind, I’ve found my own solution. blablablabla<span class=”readmore”>blablablabla</span> .readmore

Continue reading

html space which belongs to no html tag

Issue I have this html code <img src="/static/media/call-of-duty-mobile-promo-banner.c6a9b17af598e76351f1.jpg" id="banner" alt=” /> <div id="DIV_1"> <div id="DIV_2"> <div id="DIV_3"> login </div> </div> <div id="DIV_4"> <img src=’cart.jpg’></img> </div> </div> but there is a white space between first img and div with id DIV_1

Continue reading

Hiding Google Translate bar

Issue I have the following code: <div style=”” class=”skiptranslate”> <iframe frameborder=”0″ style=”visibility:visible” src=”javascript:”” class=”goog-te-banner-frame skiptranslate” id=”:2.container”></iframe> </div> I need to hide it but if I only hide the goog-te-banner-frame using: .goog-te-banner-frame { display:none !important } It still throws my header

Continue reading

Increase input field width

Issue I am new to Tailwind CSS and am trying to make a responsive search bar. When I increase the width it becomes unresponsive. How can I fix this? <form className="flex items-center mx-4" onSubmit={submitHandler}> <label htmlFor="simple-search" className="sr-only">Quick search</label> <div className="relative

Continue reading

Make circle on same image

Issue I am using below image. Now I want to clickable all circle. This is a simple image. Every circle will redirect to different different links. Is this possible? Solution Html image maps may be the fitting tool. Conceptually the

Continue reading

Rotate image on hover

Issue I’m trying to make this image rotate 360 degrees when it it hovered over, but it does not rotate and moves to a random location when it is hovered over. I have tried changing its location on the page

Continue reading

Assistance with sliding menu items

Issue Here’s my menu: <ul class="menu"> <li><img src="#" title="???"/></li> <li>Home<img src="#" title="Home"/></li> <li>Forums<img src="#" title="Forums"/></li> <li>Chat Rooms<img src="#" title="Chat Rooms"/></li> <li>Messages<img src="#" title="Messages"/></li> <li>Profile<img src="#" title="Profile"/></li> <li>News<img src="#" title="News"/></li> <li>Help/FAQ<img src="#" title="Help/FAQ"/></li> </ul> Here’s my CSS: body { background-color: lightred;

Continue reading

Show/Hide Divs by name in jQuery

Issue I have the following JavaScript at the end of the body of my HTML: <script> $(document).ready(function() { $("a").click(function(event) { var div_to_show=event.target.id; var real_div=div_to_show.split(‘-‘); var display_div=real_div[0]; var elementPos=$("#"+div_to_show).offset(); var top_pos=elementPos.top-118.5; $(‘#board-right div’).hide(); $("#" + display_div).css(‘margin-top’,top_pos); $("#" + display_div).show(); }); });

Continue reading

On Raw HTML, website looks as I intend it. But on Django, there is some blank space created during the for loop

Issue <div id="Project" class="bg-white fnt-white brdr project-div "> <div class="float-left image-for-project-container brdr"> <img src="{% static ‘./Images/manworking.webp’ %}" alt="manworking" height="630px"> </div> {% for project in project_details %} <div class=" project-container inline-block "> <h2 class="text-center fnt-black head-portfolio"> {{project.project_name}} </h2> <br> <br> <p

Continue reading

Use CSS to make a span not clickable

Issue <html> <head> </head> <body> <div> <a href=”http://www.google.com”> <span>title<br></span> <span>description<br></span> <span>some url</span> </a> </div> </body> </html> I am pretty new to CSS, I have a simple case like the above. I would like to make the “title” and “some url”

Continue reading

Fullpage.js disable on mobile/below given pixels?

Issue https://alvarotrigo.com/fullPage/ I’ve tried code like this but that doesn’t work sadly. I want to disable it after 976px for mobile users. <script> if (screen && screen.width > 768) { document.write(‘<script type=”text/javascript” src=”http://your-file-path/fullpage.js”><\/script>’); } </script> Solution Just use the responsiveWidth

Continue reading

How to make fixed header table inside scrollable div?

Issue I want to make header of my table fixed. Table is present inside the scrollable div. Below is my code. <div id=”table-wrapper”> <div id=”table-scroll”> <table bgcolor=”white” border=”0″ cellpadding=”0″ cellspacing=”0″ id=”header-fixed” width=”100%” overflow=”scroll” class=”scrollTable”> <thead> <tr> <th>Order ID</th> <th>Order Date</th>

Continue reading

scrolling text over static image css

Issue How do I make background image stay static and scroll only text? #wrapper{ height: 100%; width: 100%; background-image: url(‘background.jpg’); background-size: 100%; background-position: fixed; } That’s my styling for the background, but it still scrolls leaving white space below until

Continue reading

CSS fill remaining width

Issue I have this header bar. <div id=”header”> <div class=”container”> <img src=”img/logo.png”/> <div id=”searchBar”> <input type=”text” /> </div> <div class=”buttonsHolder”> <div class=”button orange inline” id=”myAccount”> My Account </div> <div class=”button red inline” id=”basket”> Basket (2) </div> </div> </div> </div> I

Continue reading

textarea changing text colour when editing it

Issue I have a text area <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required=""></textarea> with the style :root { –color-back: #000; –color-text: #fff; } textarea { background-color: var(–color-back); color: var(–color-text); } When I’m not editing (i.e. cursor not selected inside the

Continue reading