October 22, 2024
Chicago 12, Melborne City, USA

CSS

CSS (Cascading Style Sheets) is a representation style sheet language used for describing the look and formatting of HTML

CSS

Carousel as a background in my hero section

How do I use a carousel as a background in my website using html and css? I also want to have texts overlaying the carousel.. I have trying using the url option in adding the background but i can’t link the carousel I would really appreciate your assistance on this. Thank you You need to

Read More
CSS

How to make sure my mega menu floats over website content

I’m using Avada Child theme in WordPress and recently started experimenting with Mega Menus on our top navigation. The mega menu works on the homepage, but on other pages it sits "behind" the content. I see a lot of information regarding z-index and absolute/relative positioning. Does anyone have a suggestion on where exactly to enter

Read More
CSS

New Filament project Styling not applied correctly

I just created a new filament project, no custom pages. Just added a filament resource ‘customers’ and with some basic textInputs in the form and table: public static function form(Form $form): Form { return $form ->schema([ TextInput::make('first_name') ->label('First Name') ->required(), TextInput::make('last_name') ->label('Last Name') ->required(), TextInput::make('phone_number') ->label('Phone number') ->required(), TextInput::make('email') ->label('Email') ->required(), Select::make('status') ->options(collect(CustomerStatus::cases())->mapWithKeys(fn($case) => [$case->value

Read More
CSS

Get hover effect when hovering on text that is over the image

I am trying to get a hover effect when trying to hover over a text that is on top of my image. You can see in this codesandbox that I am trying to scale my image when the cursor is hovering over it, however, I noticed the hover effect does not take place when the

Read More
CSS

How to make curved lines inside of div

Trying to make border-rounded div containing curved lines just like the screenshot below. White boxes would be some texts as display:flex applied on that div. Not too sure to make the two curved lines in it. Tried so far.. <!DOCTYPE html> <html> <head> <style> body { background-color:#E7E9EB; } #myDIV { height:300px; background-color:#FFFFFF; border: 1px solid

Read More
CSS

Size of non-floating element determines if it wraps the floating element

I doubt how non-floating block elements are positioned with respect to floating elements. Let’s consider the HTML code below. The third div is correctly positioned on the right of the two floating divs. <section style="width:150px;"> <div style="float:left; width: 50px;height: 150px;background: pink;border:solid 1px;">3</div> <div style="float:left; width: 50px;height: 150px;background: pink;border:solid 1px;">3</div> <div style="background: cyan;">3</div> </section> If I

Read More
CSS

Specified input file src/main/resources/static/css/input.css does not exist

enter image description hereMy input css file is at the correct place still i am fetting the below error. I havce checked file has the permission of read and write. Error is PS C:\Users\kt443\Downloads\ncv2.0> npx tailwindcss -i src/main/resources/static/css/input.css -o src/main/resources/static/css/output.css –watch Specified input file src/main/resources/static/css/input.css does not exist. i was trying to enable output css

Read More
CSS

Images not showing Azure Devops repository README when .md is rendered from R markdown

I have a repository for an R project in my organisation’s Azure Devops. I wanted to include an image in the README file, which I created with R markdown using github_document as the output. I referred to the image in the document as below: ![Fig. 1 - Parameters to select](./images/Knit_with_params.png) where images is the name

Read More
CSS

Image overlapping in css grid-template-areas div

I have 6 images that I want to align with grid-template-areas. The problem is when I set one image to cover a bigger grid-area, the next image does not move to the next grid area but overlaps the bigger image. css as below. .image-gallery{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 40rem; grid-gap:1.5rem; grid-template-areas: 'img-1

Read More
CSS

How can I create a fly-out column menu

I’m trying to develop the following vertical navigation. If parent item has children, show those children in a smooth transition (i’ve used translateX) in a column next to the first one. So for the first level of children, show a new column. But if those children have child items, you need to show them under

Read More