天道酬勤,学无止境

css

How to override link color and margins/padding on buttons in twitter Bootstrap?

First post here. I'm trying to override the link colors for Bootstrap buttons, but I can't get it to work. I actually got the background color to change, but I can't get the link colors to change. I also can't figure out how to space the buttons out more. <span> <button type="button" class="btn btn-default btn-lg"><a href="#">Resume</a></button> <button type="button" class="btn btn-default btn-lg"> <a href="#">Twitter</a></button> <button type="button" class="btn btn-default btn-lg"><a href="#">LinkedIn</a></button> </span> My css currently looks like: .btn{ background-color:#d0d0d0; text

2021-09-24 18:53:20    分类:问答    html   css   twitter-bootstrap

Change Website font style

I m using one of the Font for my website i.e. "Aparajita". Which is not required to be available in every system through which my site is getting accessed. My problem is it look's different when this font is installed on the browsing PC and some horrible when the same font is not getting installed. How should i resolve this issue. Should i install "Aparajita" Font on my hosting Server or what else... Thanks in advance..

2021-09-24 18:39:40    分类:问答    html   css

Add pseudo class to nth-child with CSS

I want to use hover so that the bottom border on odd divs is a different color from #75dcff. However, .card:hover div:nth-child(odd) does not work. Can I apply psuedo classes to nth-child elements? .card { margin: 30px; padding: 20px 40px 40px; max-width: 500px; text-align: left; background: #fff; border-bottom: 4px solid #ccc; border-radius: 6px; } .card:hover { border-color: #75dcff; } .card:hover div:nth-child(odd) { border-color: #ff7c5e; } <div class="card"></div> <div class="card"></div> <div class="card"></div>

2021-09-24 18:38:35    分类:问答    html   css   css-selectors   pseudo-class

Scrollable table both horizontally and vertically with fixed header

I am looking for scrollable table. It works fine when width is fixed but it doesn't works while columns are created dynamically. <table cellspacing="0" cellpadding="0" border="0" width="325"> <tr> <td> <table cellspacing="0" cellpadding="1" border="1" width="300" > <tr> <th>col 1 heading</th> <th>col 2 heading</th> </tr> </table> </td> </tr> <tr> <td> <div style="width:325px; height:48px; overflow:auto;"> <table cellspacing="0" cellpadding="1" border="1" width="300" > <tr> <td>col 1 data 1</td> <td>col 2 data 1</td> </tr> <tr> <td>col 1 data 2</td> <td>col 2 data 2</td> </tr> <tr> <td>col 1

2021-09-24 18:22:04    分类:问答    html   css   scroll   html-table

JavaFX: How to disable ScrollBars in TableView

I have a JavaFX TableView and I would like the table behavior to truncate the image of the TableView when the parent node resizes too small to display the data, instead of it becoming scrollable. To clarify, I just want the scroll bars disabled or not visible, so they don't show up. Below is my node hierarchy in SceneBuilder in case that helps. Things I've tried below I read this post, but the answer just makes the cells resize to fit the width, instead of disabling the ScrollBar. I read the documentation on ScrollBars here, but I couldn't find a visible or enabled property. I also read the

2021-09-24 17:57:13    分类:问答    java   css   javafx   tableview

Three Column CSS Layout

I looked at a few other questions before posting this one. Nothing else does quite what I want. My goal is to create a three column layout but with a "tout" hanging down from the center of the top of the page in the middle column. That tout should align with our corporate logo further down the page, with the text of the page flowing under that. HTML is straightforward, three divs in a container followed by a div for the logo and then the body copy: <div class="container"> <div class="topcontain"> <div class="topleft">testing left</div> <div class="topcenter"><img class="floatimg" src="toutdemo

2021-09-24 16:47:15    分类:问答    html   css

Block that grows to fit its children and is horizontally centered

Hoping that this is not a duplicate of one of the many other "centered div" questions... I'm looking for a way to convert a table-based page layout to clean CSS. The existing design has a table with a single cell in a single row, and all the rest of the page content is inside that cell. The table is centered with margin-left and margin-right set to auto. There are many many pages using this layout. Most of them have the same width, so as you move from page to page within the site, the big table container stays in the same place horizontally. Occasionally there's a page with wider content. The

2021-09-24 16:29:50    分类:问答    css

how to implement hover effect that fades in

when you hover over the left side (previous function) slides in and fades darker and vice versa for the right here's what I got so far thanks to Deleteman http://jsfiddle.net/pQzWp/

2021-09-24 16:24:55    分类:问答    javascript   jquery   css

Error "Invalid UTF-8" when compiling sass with @import

There's my project with the folowing structire: project assets scripts styles app.scss bower_components node_modules public css app.css js bower.json gulpfile.js package.json I use gulp-sass to compile app.scss to app.css and i want to include foundation in app.scss gulp.task('styles', function() { return gulp.src(path.src.styles) .pipe(sass({ includePaths: ['./bower_components/foundation/scss'] })) .pipe(concat('app.css')) .pipe(gulp.dest(path.public.styles)); }) Then I white in app.scss file: @import 'foundation/_settings'; @import 'foundation'; And when i run gulp, I get: Error: assets

2021-09-24 16:19:00    分类:问答    css   sass   gulp   zurb-foundation

Center Selected Item Inside a Number Picker Widget in JavaScript

[Precondition] I am having difficulty figuring out how to make a Number Picker Widget behave similarly to the mobile picker component. If the user assigns a number by default, then the selected number should be automatically snap to the center when page load. [Problems] How can I snap this element <div class="cell selected">10</div> to the center of the scrollport by default? Do not rely on any plugins. "use strict"; console.clear(); { const selector = "scrollport"; const selected = "selected"; const scrollports = document.getElementsByClassName(selector); const debouncedFunc = debounce(check

2021-09-24 16:14:28    分类:问答    javascript   html   css   animation   scroll-snap-points