Questions tagged [css]

CSS (Cascading Style Sheets) is a representation style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, fonts, and animations. It also describes ...

0
votes
0answers
5 views

How to position an “overlay rectangle” on a HTML CSS Grid, but offset horizontally from column boundaries? (per my image)

How to position an "overlay rectangle" on a HTML CSS Grid, but offset horizontally from column boundaries? (per my image) Background: Assume using HTML5 and CSS3 Grid created using div's, formatting ...
0
votes
0answers
4 views

Why is overflow in css working with a delay?

I'm trying to achieve a drop down cover effect (Not sure how it's really called) with the following code: .new_events_list { position: absolute; width: 26%; height: 28vh; background-...
0
votes
1answer
6 views

how to use sass to give users multiple theme options

I am trying to provide multiple themes for web site. I know how to use sass. As far as I understand, the steps are like followings. creating sass file. sass file is pre-processed. the corresponding ...
0
votes
3answers
20 views

How can I get second (third, etc.) line indentation to match first line in a list with custom numbering using CSS?

I'm new to HTML, CSS and JavaScript, so this may be a very basic problem, however, I haven't been able to find a solution by searching. Most solutions I've found deal with automatically numbered lists,...
0
votes
0answers
6 views

Aligning overflow scroll with picture height

bit noob here, but hope someone could help. I have a left hand side picture that occupies 2/3 of a flexbox div, and a text div on the right hand side that occupies 1/3. How can i get the right hand ...
0
votes
1answer
15 views

How to prevent click release on different element

According to MDN If the button is pressed on one element and released on a different one, the event is fired on the most specific ancestor element that contained both. Is there a way avoid that? ...
0
votes
0answers
9 views

Window scrollbar is not shown when a absolute div is bigger than the window's body

I'm very confused what I have been facing but I been searching all over the internet and even on google on this topic for some time so I usually notice when I have a absolute div bigger than the ...
0
votes
0answers
12 views

Social Media Icon won't stay in the same spot for different sizes of windows

I am creating a website that contains a header. Inside the header they would like social media logos for their social media. I'm wanting it to look like this. However when I preview it, the icon isn'...
0
votes
0answers
8 views

Why isn't middleman (4.2.1) generating a sass map

While running middleman 4.2.1 in server mode I don't seem to be getting a sass map when I inspect my page within chrome. Do I need to enable this somewhere first?
-2
votes
1answer
10 views

How to remove JQuery's Ui-Datepicker-Year select arrows

I am using jquery's ui-date-picker and have modified the css. I am having trouble removing the arrows from beside the year. I just want to be able to click on the year then the drop down shows and ...
0
votes
2answers
18 views

Block level elements overlaying eachother

With some help I put together the "about_us" section in the following code and it functions exactly as I want it to (ignore the misbehaving text, works fine in the full project). The problem I have is ...
0
votes
2answers
21 views

move box from right to top when screen shrinks

I have two blocks of text I want to display on the screen. When the screen is wide, I want to display them like this: +---------+ +---------+ | Block B | | Block A | +---------+ +---------+ When ...
0
votes
4answers
16 views

How can I center multiple inline-block divs in a div? [duplicate]

I see this. I have a div with inside 20 inline-block div. I centered with "text-align:center". A javascript code write some text to first div. The first div is above than others. How can I center ...
0
votes
2answers
26 views

How to align an element within a div to be even across the others in a row?

I'm having difficulty trying to align the three icon containers that are presented in the row. I tried a combination of flex-end and baseline but they did not work, neither on the img tags or the h3 ...
2
votes
2answers
23 views

Parent relatively positioned and it's children

Given the example below function clickme() { console.log(' button been clicked') } .d1, .d2 { border: 1px solid red; z-index: -99; opacity: .5; position: relative; } .d2>...
0
votes
1answer
9 views

Disabling header effect in wordpress theme (Bulan)

I've got a small problem with disabling a feature from a free WordPress theme. The theme is called 'Bulan" and adds a yellow glow over the header image but I can't seem to get rid of it in the code. ...
0
votes
4answers
30 views

Remove spacing between spans using css

For some reason I can't seem to get rid of the vertical spacing between these two spans, I know I'm missing something simple but any help would be appreciated. The issue I'm having is the ...
-2
votes
0answers
7 views

A icon and text together in a single line

so i want ICON + TEXT, ICON + TEXT, ICON + TEXT in a line, with a different icon each time. what i want it to say is (let capital letter = icon) X Episodes Y Seasons Z Rating also i don't mind ...
1
vote
1answer
22 views

Combining flex with position:fixed

I want to show a modal dialog but I am struggling with the combination of a flex layout and the dialog with a fixed positioning. The header and footer need to be fixed in height; the content section ...
-7
votes
0answers
24 views

How to move a line under text with an audio file? [on hold]

How to move a line or under text with an audio file https://youtu.be/-KOtJR4t2w0
0
votes
0answers
17 views

CSS - Transform for pseudo element

I'm trying to center an image that is placed under each navigation item (menu item) using the :after pseudo-element. I've been trying to use the transform: translate(...); method, but depending on ...
2
votes
1answer
24 views

CSS-Filter on parent renders child invisible

I am currently working on a website and encountered this weird behaviour. I am not sure if it is a bug or how to deal with it so I'm asking you guys for help. So I have this title-screen "animation" ...
0
votes
0answers
28 views

How to override hover event to click event for CSS dropdown menu

I am attempting to create a pure CSS multi-level dropdown menu. I got it to work for hovering. However, I only want it to hover in the submenu, but the main menu item to be clickable to expand the ...
-4
votes
0answers
23 views

Border has margins I can't get rid of

Hey, first off, thanks for helping. As you can see, to the left, right, and top of the purple background, there is a margin, I have no padding or margin code that should be doing this as for as I know,...
0
votes
1answer
14 views

Words are cut in first line of ion-item in ion-list

Io ionic 3, I am using an ion-list, inside it I have an ion-item, but first line inside each ion-item is cut. As you can see, the capital 'A' letter is not entirely visibile. Can you help me? Thanks ...
0
votes
1answer
11 views

i need to specify some id in django to later add it in bootstrap

i want to make a portfolio in django, i have a section in html that with {% for ... %} i connect it to my jobs list in dajngo to show my job's pictures,summary and title but in html code there is an ...
0
votes
1answer
23 views

React JS add local font

I looked at every question here non of them helped, I want to add a custom font which is in my local machine, I added the font in the src/fonts/ the font file itself is named DIN Next LT Arabic ...
0
votes
0answers
20 views

html/css Why are the images not properly separated?

I have searched and tweek around and the last image still shows up very close to the second. This is a very simple responsive web layout that, for some mistake, it is not displaying properly. this ...
0
votes
0answers
35 views

Don't show element if on top of main content

Is there a general way to check if a content is on top of another element? For example: In this page, the element .ads is not on top of the .content, therefore it's not a problem. But in this page, ...
0
votes
1answer
24 views

CSS opacity transition fade in one line at a time

I am trying to use transitions to change the opacity and fade in three lines one after another. There is a div on my page with 3 p and strong tags and I am trying to fade in each line after about 2 ...
1
vote
0answers
17 views

When Print Preview styles not working for Chrome

I have problem with cross browser compatibility, the Print Preview showing blank for Chrome and Edge. The logs shows this: [Deprecation] Styling master document from stylesheets defined in HTML ...
-1
votes
0answers
19 views

How to access static sources after spring boot security activation

I am creating a normal login html page login.html, and inside it I am using a CSS file called fe-login.css. Before I use spring security I did not have a problem with fetching the static files. ...
-1
votes
1answer
12 views

How might one go about styling tabs in CSS?

So, I'm trying to style some tabs using CSS. I want them to end up looking similar in style to the new chrome tabs, but I cant seem to figure out how to get the bevels on the bottom corners. Any ideas?...
1
vote
2answers
28 views

Why a button doesn't work in any layer of CSS?

I'm having a hard time understanding why a button doesn't work within the styles of a hero image. I've tried adding a z-index to bring it to the top, but nothing is making sense why this button is ...
1
vote
1answer
13 views

CSS to turn image into black and white with no grays

I'm trying to convert logos to black and white, without any grays and have gotten this far, but can't get rid of the gradient effects. I'd like to make it purely black and white (where the mix-blend-...
0
votes
2answers
22 views

Bootstrap form shifting to the top for no apparent reason

Using Bootstrap 3 and the simplified code from below, I cannot figure out why the first form shifts a bit to the top compared to the other two forms in the row: <!DOCTYPE html> <html ...
1
vote
1answer
15 views

Web Scraping contents of ::before ::after CSS Psuedo element using BeautifulSoup

I'm learning Web Scraping. I would like to know how can we fetch participants count from below element? <li class="header-hero__stat header-hero__stat--participants"> ::before "255,590 ...
0
votes
2answers
18 views

display a text box inside my getStepContent method

I am new to react and I am trying to learn react by using material-ui. I am trying to display a text box inside my getStepContent method. For each stepper I need to develop different ui, so I gave ...
1
vote
2answers
19 views

Wordpress Plugin wont load css

My add_action() isn't working and i have no clue why. This is my php function mapstyle() { wp_register_style('mapstyle', plugins_url('assets/css/mapstyle.css' , __FILE__ )); wp_enqueue_style(...
0
votes
1answer
27 views

Image Swap using CSS only and having link on image once swapped

I'm looking to swap on an image when clicked using CSS only. When the image is clicked and the swap has been made there should be a link to a new url when the new image is clicked, not swapped back as ...
0
votes
1answer
8 views

Why does my dropdown menu not work in ASP.NET?

I am kinda new to ASP.NET and also I am a rookie. I wanted to create a menu that has dropdown menu, but I have a problem: whenever I click the dropdown menu, nothing happens, like nothing pops out, ...
0
votes
0answers
16 views

Enviar dados do formulário web para google planilhas [on hold]

Boa tarde Dev's. Estou criando um formulário html baseado somente em javascript-html-css. onde possuem 3 comboxes dependentes que popula seus itens através do Javascript. Esse formulário está ...
0
votes
1answer
22 views

SCSS randomly stops compiling partials

I have the following file structure: /dir/style.css /dir/scss/style.scss /dir/scss/_fonts.scss /dir/scss/_footer.scss /dir/scss/_header.scss /dir/scss/_home.scss /dir/scss/_vars.scss I import each ...
0
votes
1answer
14 views

SVG tspan element + font-family style?

I am trying to specify the font family inside of a tspan element within an svg button. It doesn't seem to register and I have not been able to find any documentation on this. I have only found ...
2
votes
1answer
35 views

Problem with section show and hide with javascript code not work

everyone, I have a problem with javascript and HTML sections. I need to click the down arrow to change from the first to the other, etc. Unfortunately, the code does not react, so I really do not ...
1
vote
1answer
23 views

How to make only flex item overflow and not whole parent?

I have a small basic layout page. Content in the center with a sidebar that contains filters. Please see: https://codepen.io/anon/pen/ePLmKB?editors=1100 I would like my .heading and .filter-block-...
1
vote
0answers
42 views

Drop-down Menu on Hover

I am trying to make a drop-down menu that expands when I hover over or click on gallery in the menu bar. I thought I knew what I was doing, but it is not working so obviously I am doing something ...
0
votes
1answer
31 views

Add bottom border to columns by row, but not the last + responsive

Basically I'm displaying an varying amount of columns (cells, it's based on Foundation) in a grid. 3 column span on desktop, 2 on tablet and 1 on mobile. I need to add a border bottom to each column ...
0
votes
2answers
14 views

Form doesn't align properly on Safari but works well on Chrome

I have a form that works well on Chrome but it wrap to on Safari in my Ruby on Rails application. Here is the code .panel.panel-primary .panel-heading h4.panel-title = t('admin.statistic....
0
votes
1answer
24 views

Setting page specific header images with Jquery

I have a Woocommerce store running on Wordpress. There is the option for a header Image included in the "Trusted" theme which I am using and keen to use this option. It shows on every page, however, ...