Questions tagged [css]

CSS (Cascading Style Sheets) is a representation style sheet language used for describing the look and formatting of HTML (HyperText Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colours, layout, fonts, and animations. It also describes how elements should be rendered on screen, on paper, in speech, or on other media.

Filter by
Sorted by
Tagged with
-2
votes
0answers
9 views

How to get this onload screen effect

How to get this initial onload effect in my web page. Am using bootstrap4 and javascript. Am new to javascript Template Link
-4
votes
0answers
14 views

Why does innerHTML not react to a .innerHTML JS function? [closed]

I'm attempting to make navigational tabs using buttons and JS functions, and the tab part seems to be working great. However, the content that's supposed to change when you click the tab won't change. ...
0
votes
0answers
9 views

How do I add css class names to text blocks in Squarespace?

I need to add a class name or an ID to a Squarespace textblock to be targeted by JavaScript. If I use a code block to add the text, I can add a class name, however it can't be edited easily like other ...
-1
votes
1answer
15 views

How can i position several elements with icons beside each other in one div?

I want to create a call to action section in the header of my site, i want a picture on one side, and on the other side i want to put a title (h1 specifically) and a paragraph and finally a button to ...
-1
votes
0answers
20 views

Buggy Variable JQuery [closed]

Below is some code that I have been working on. For some reason console.log(arrayOfSelection[i] + ': loaded fully!'); sometimes states undefined: loadedfully! rather than what is in the array. The ...
0
votes
0answers
8 views

SVG image with gaussianBlur flickering around the edges in Firefox latest

codepen: https://codepen.io/cryptodescriptor/full/QWLrKMx github: https://cryptodescriptor.github.io/survey-form/ github repository: https://github.com/cryptodescriptor/survey-form Frosted Panel (...
0
votes
2answers
19 views

Why isn't pseudo-element content being replaced by more specific declarations?

I've got this <ul> set up with pseudo-element icons before each item. Font Awesome's check mark icon is set as the default for every <li>, but I want to use specific icons for certain ...
-1
votes
2answers
22 views

Can I change the background color for italic text?

I'm not really sure why my italic text has a black bg, but p { } is not getting it done and Google just tells me how to make italic text. full css // full html *Edit: You'll see I had to specify ...
0
votes
0answers
16 views

Apply style from Bootstrap theme

I have this JSF code which I use to create table pagination table: <h:commandButton value="first" action="#{registeredAttendies.pageFirst}" ...
0
votes
0answers
7 views

Bootstrap: bring fixed horizontal nav bar above other elements

I have a vertical bootstrap sidemenu that would responsively switch to horizontal. The problem I have is that the sidemenu would hide behind other elements once it turns horizontal, see example in ...
-1
votes
1answer
16 views

Do I need to keep all the bootstrap files in my root folder

Am new on bootstrap usage. I am designing a website using bootstrap so I want to know, I already linked my local bootstrap CSS file in the head section of the html file and it's working fine, however ...
0
votes
0answers
7 views

scrollspy nav bar sticks on active after scrolling away

I am using a scrollspy navbar so that the navbar automatically switches to whichever sections that the user is on; this works fine. Although if I click on a section e.g. 'Contact' and I then scroll up ...
0
votes
0answers
9 views

Justify self property doesnt align the item to the right [duplicate]

<div class="add-dashbord-div"> <button class="new-dashboard-btn" data-toggle="modal" data-target="#new-dashboard-modal"><i class="material-icons">add</i></button> ...
-1
votes
1answer
19 views

How to save an image to a database?

sample predefined icons I kind of wanted the user to choose one image from the predefined set of icons and then the image will be saved in the database after submitting the form. (I also want to know ...
0
votes
1answer
26 views

Showing two selection boxes side by side

I have the following code which I wrote: <div class="selectAorB" *ngIf="this.objects.length > 1"> <div> <select (change)="this.AorB($event)"> <option value=...
0
votes
0answers
21 views

Odd behaivour of clientWidth and offsetWidth, why do they return wrong values?

I am trying to understand why the below code snippet returns the wrong value and it doesn't matter whether I use clientWidth or offsetWidth. const imgSize = document.querySelector('.slides').children[...
0
votes
0answers
14 views

How to set the minimum width on a react material ui grid item?

I've got this code... I'd like to have one 'column' that is a minimum of 250 pixels wide... I tried the material ui suggestion for sizing: https://material-ui.com/system/sizing/ and didn't seem to ...
1
vote
0answers
10 views

How to make css grid - grid-template-columns: auto-fit work in IE

Hello I am creating a project that explores many of the things css grids can do as well as flex. I am having trouble finding a solution to get grid-template-columns: repeat(auto-fit, minmax(100px, ...
0
votes
1answer
13 views

How to position an element on another responsive element?

I have a responsive image that increases size with the browser window. I also am planning on putting icons on this image(which is a map) in the correct locations. I would usually use position absolute ...
0
votes
0answers
16 views

When hovering over text, change the text and background image

I am new to coding and wrapping my head around utilization of JavaScript it still hard for me. My problem is that I have like a navigation menu, those have one word in them. I want that when I hover ...
-1
votes
0answers
16 views

How to prevent linebreak in blockquote(HTML)

Looks like the line breaks when there is a space and Length is long enough... Here is my code <blockquote> <p>...
0
votes
1answer
33 views

Should we use Material-UI with React

I am trying to design a login page in react and found material-ui, now question is should be use Material-UI? Also, in following examples how I can put styles in a separate file? I think it should be ...
0
votes
0answers
22 views

(.getBoundingClientRect().height are giving wrong values

i am trying this code in an angular project but not working, although it does in an HTML template the main goal of the code is to make the div to fit with its content function resizeGridItem(x,item){ ...
0
votes
1answer
30 views

fixed div scroll along with page

Is it possible to make a fixed div scroll along when page scrolls, using CSS? And yes, it needs to remain fixed for other reasons. .fixedDiv{ width:100%; height:200px; font-size:4em; position:...
0
votes
0answers
18 views

Create a React card component from scratch

So I've created react cards with boot strap... very easy, and I know how to create cards with pure HTML and CSS/Grid. But form some reason I am having super hard time creating a react card inside of ...
1
vote
2answers
24 views

Unexpected result from margin-top next to a floated element

I'm having issues with a layout like this: .wrapper { clear: both; background-color: #ccc; } .wrapper+.wrapper { margin-top: 50px; } .side, .main { height: 100px; padding: ...
0
votes
0answers
12 views

Custom navigation bar in wordpress. How to properly style it?

I'm new to wordpress and making my very first theme from scratch. I can sort of cheat my way into making a navigation with bootstrap, but I still don't understand how to make small customization I'm ...
1
vote
3answers
31 views

Aligning items inside a button

I'm trying to align a triangle next to written text in a button using only HTML and CSS. For the life of me, I can remember how. .room-info-btn { background-color: #FFA500; color: #fff; ...
-1
votes
1answer
16 views

HTML footer on print on every page without fixed footer [closed]

i want to add a footer to every page if i print this page. I do that with fixed-position the problem ist that the content of the page is overlapping the footer. Is there a chance to avoid that or ...
-3
votes
0answers
18 views

I have a problem with height 100% in navbar

I have a problem with my navbar that not fit the entire page also if it is in height:100%. Sorry i'm new... I'm posting here my code html and css there are some errors i think buy my main problem it's ...
-1
votes
0answers
21 views

Can SVG with z-index > 0 not block HTML?

I am looking at the following demo, which has HTML divs being connected by SVG lines. http://www.chromophilia.uk/web_techniques/draw_arrow_demo.html (demo) http://www.chromophilia.uk/web_techniques/...
-2
votes
2answers
36 views

Why my divs' background image doesn't display in ReactJS

I am trying to make some transitions between my two background images in ReactJS. Here I am blocked at the stage in which I would display the backgroundImage first, using the inline style attribute of ...
0
votes
0answers
8 views

Parent box size in percentage [duplicate]

I have a parent div which has all children sizes in percentages (because I need the children to be resized relative to the parent div). Problem is, the parent div is a component that needs to be ...
0
votes
0answers
9 views

CSS display:table-row How to width:100%? And border-bottom for rows with padding for table content?

trying to create table with 100% width content, but "width" did not work. can anyone help plz. how can I fix it? And there is "div" inside table cos I can't padding content another way. I need paddin ...
0
votes
0answers
11 views

Leaflet Cluster Marker messing with my jquery selector

So I have the leaflet cluster working. I have a bunch of circle markers with polylines connecting them. I want to be able to hover over a circle marker and highlight the polyline that connects the ...
0
votes
2answers
26 views

Select one of two iframes with no id in javascript

How do I select 1 of 2 iframes on page with the following code? window.onload = function() { let frameElement = document.getElementsByTagName("iframe"); let doc = frameElement.contentDocument; ...
0
votes
0answers
18 views

How to save-as html file, an embeded browser display?

I have upgraded the performance of the VS 2019 WebBrowser control by adding to the html file, thanks to https://weblog.west-wind.com/posts/2011/may/21/web-browser-control-specifying-the-ie-version. ...
-1
votes
0answers
14 views

Dynamic 1\2 column table

I want to make a site that will control 16 switches through RaspberryPi. I want it to look like this on computers: |button|some text|button|some text| and on phones: |button|some text| |button|some ...
0
votes
1answer
22 views

how to align one element to the left and another in the middle in the same row using syntaxis “flex: x”

I am using react native using flexbox. the display: flex property does not exist, but it does exist for example flex: x I'm trying to do something like this: an element on the left retaining the ...
-3
votes
0answers
21 views

Is it important to define width and height attribute for image tag? [closed]

Width and height property or width and height attribute? Which of them is better? Most developers use both of them, Why? What is the real difference between them?
0
votes
1answer
30 views

How do i make my logo to scroll as i scroll?

I am practicing building a website. In the website:http://auchevaldiner.com/new-york/ you can see the logo in the bottom left corner, and when you scroll it scrolls with you what do I have to do in ...
1
vote
2answers
31 views

Use CSS to overlay a color on an image missing an alt text

For the life of me I am trying to find a simple way to overlay a color over an image when it is missing an alt or the alt is empty. I have been able to get the code right for discovering if the alt is ...
-1
votes
1answer
39 views

Different CSS for Different Modals?

I have been struggling for the last several days with modal styles. I have a help modal that opens an external help.html file and then all other modals, which are tables, open within the parent HTML ...
-3
votes
1answer
27 views

Does the layout of html code effect the displayed output? [closed]

I'm currently working on a project for a class am having some trouble isolating where my HMTL has gone wrong. I'm designing a single page and two of my flex-box images are tiling horizontally rather ...
0
votes
0answers
23 views

How to get a nice transition when switching class [duplicate]

im trying to switch class on a div, but i want to have a css transition who change my background-color smoothly. I tried that ... if (event == "hover") { l.bars.forEach( b => { let old = b....
1
vote
1answer
21 views

Chrome does not keep consistent rem units on zoom-in

I want to make use of rem units in CSS, so I set a font-size to my <html> tag so I can set child elements with rem dimensions. The problem however is that when you zoom in on Chrome, the font-...
-1
votes
0answers
16 views

How can I make my banner stick to the top without losing center alignment?

Here's the site: https://optiprime64.github.io/funsizejustice/ When I make the .header class position:fixed; the whole banner aligns to the left, and a margin gets added to the top. Also, the below ...
-2
votes
0answers
22 views

problem adding a css file in a php project

I need help please. I have a problem: I use the link tag to add a css file which is in the css folder in the Public folder, but it doesn't work I use a wamp server virtual host Here is the httpd-...
1
vote
1answer
18 views

Creating multi-layered SVG waves in CSS

I am trying to create a wave effect on a website like this: https://dribbble.com/shots/5115653-Augmented-reality-web-concept-work/attachments where there is a main color wave (dark purple) and then ...