Questions tagged [css]

150169 questions
1

votes
4

answer
1.3k

Views

How to set img size if image not loaded

I'm create a custom wysiwyg editor, with custom variables which are filled in from PHP after the content is saved. For example {image} is a placeholder, which will be filled from PHP after the content saved. In this case my content template in the HTML code looks like this As this is some kind of dr...
Roland Soós
1

votes
3

answer
12.4k

Views

Input text box and width 100%

I'm writing a simple form for sending some data to a database. I use it in my own company so I don't need to have a perfect style. I am using a table for the layout (this is okay in this application). Born I would like to set the width of the input text to 100% (to the end of the line) , but, if I...
Pepozzo
1

votes
2

answer
6.8k

Views

Vertically align middle without knowing the height

Title1 My content My problem: Yes I know how to vertically align most content. I've used many techniques, for example setting the parent as table and the child as table-cell. However most techniques requires me to either know the height of the parent/child - or they assume you are working with a bl...
1

votes
2

answer
4.6k

Views

Vertical stacking span labels in bootstrap

I am trying to stack spans inside of a bootstrap div.controls. Multiple span.label's default to stack horizontally but I would like each span.label to be vertically listed instead, on it's own line per se. This is currently how I have it displaying: test test 2 http://jsfiddle.net/gMN4f/3/
Jon
1

votes
2

answer
65

Views

CSS change only background without duplicated class

I have this code below: .prev, .next { position: absolute; top: 50%; left: 0; width: 69px; height: 135px; margin-top: -68px; overflow: hidden; text-indent: -9999px; background: url(../images/slider-nav.png) 0 0 no-repeat; } I need these classes on home page but I need the same classes on about page...
Matrosov Alexander
1

votes
1

answer
4.2k

Views

Creating very large form elements with twitter bootstrap

I want to create a form for my front page that has very big elements, so I'm thinking I just define some custom css classes, but I'm struggling with how exactly I'm meant to scale everything up, eg padding, line height, etc. to match font size. I'm thinking of having a horizontal form with labels an...
Tesla
1

votes
2

answer
3.7k

Views

Center child div in parent div

I've gotten blind on this one.. I came across other similar topic but none of them helped in the ind. Long story short, I cant the "a,b,c,d" boxes in the center of the parent div - they need to be aligned to the boxed beneath, so the left is in the very left and the right is all the way to the right...
doingSomeSwiftHere
1

votes
1

answer
6.5k

Views

Display text over Canvas only onmouseover

I have created a triangle shaped image mask with the Canvas element. I have a field of text which I want to display at the bottom line of this triangle when mouse over. I can´t figure out how to make the text display only when hovering. I am a beginner at this... Any help appriciated! This is the...
Lisa
1

votes
1

answer
252

Views

CSS ::after pseudo-element alignment

I'm trying to extend the background colour in a table head beyond the bounds of the table. I've got it to work on the left side using th:first-child::before. I expect th:last-child::after to have mirrored behaviour, but it doesn't appear to do that. I currently use float to take the ::before/::after...
jacob
1

votes
1

answer
654

Views

hide an html div for some devices with bootstrap

I use from bootstrap 3, a have a div, i want to show this in only XS and LG devices. how I can do this work?
2 8
1

votes
1

answer
204

Views

I can't make my navigation bar text links horizontal?

I have spent a while trying to find out how to make text links sit horizontally on a navigation bar, but to no success.I am EXTREMELY new to coding so this is probably extremely easy to do, i am using html and CSS, i have tried just putting them on the same line. Also using: #nav li a { color: black...
user2757607
1

votes
2

answer
2.2k

Views

HTML - Link to anchor without page jumping to top

I have a page with a fixed position header across the top, and links within to page to sections specified by id attributes. When I link to one of these, it puts the section right at the top of the page, so that the first part of it is overlapped by the header. How would I make the section leave spac...
Emma
1

votes
2

answer
2.3k

Views

Force refresh of CSS files

I have a WebView that loads HTML files from within the private data of my app. I load those files from a server, then saves them to the private data folder. They come with JavaScript files, and CSS files, images, etc. So my WebView then display those HTML files just fine. My problem is when I modify...
Guillaume
1

votes
2

answer
2.4k

Views

Reliable way to determine the width of svg text styled with @font-face

I'm having an issue positioning css web-font styled, svg text elements one after another using D3. When I first position the text elements on load they'll overlap. However, when I position the elements moments later using the same function triggered on a delay or through a button they wont overlap....
Yanofsky
1

votes
1

answer
82

Views

Javascript - Editing a class instead of ID not working / Editing the heigh of a class

Well, I tried to make something with JavaScript, but it won't work. I played around with document.getElementById('idhere').innerHTML('whateverhere'); and what not, and it worked fine. Then I was going to edit an class using document.getElementsByClassName('classname').innerHTML('whateverhere'); but...
prk
1

votes
2

answer
2.7k

Views

CSS Layout: no line break between divs, even if browser window is too small

I know this isn't exactly a new topic but all my researches were without a result. What I try to accomplish: Two divs inside one div, next to each other. (easy: float, inline-block) If the browser window is to small the divs should stay next to each other. What happens right now: If the browser wind...
user2550748
1

votes
1

answer
5.7k

Views

On mouse hover show a div like jQuery Tooltip

Let consider fallowing scenario jhony ram lilly $(function() { $('p').hover(function() { $('#about').show(); }, function() { $('#about').hide(); }); }); Know on mouse hover on the p tag a div will showed,But it is taking always a fixed/absolute position,But I want to show it with respect to hov...
manchu
1

votes
2

answer
57

Views

Html Table width automatically expands

My table width automatically expands beyond div width. I searched a long time but I can't find any answer. I don't know where the issue went wrong too. So please help after see the below images. other Image:
Yellow Flash
1

votes
2

answer
310

Views

Using empty CSS class to find HTML elements

I've come across some HTML that uses classes without any real CSS attached to them rather than id's just to group/identify them with jquery selectors: html: CSS: (nothing, just an empty file) javascript: $(".someClass").each( ... ) I think I know why they do this: because html elements can only have...
user1884155
1

votes
1

answer
516

Views

Why use media query type “all” when it's implied?

I recently noticed that I have been using all in every @media query rule and I can't figure out why I did that. I've searched the web and I see that most @media rule examples on the web use some format like this @media all and (some other condition...), why is there media type all when it's already...
Igor Jerosimić
1

votes
2

answer
359

Views

<div> background hide when I use “float: left” on <li> - menu

See code, below code is my question ;). HTML: Domov O nás Služby Kontakt CSS: .header { width: 1000px; margin: auto; margin-top: 8px; } .header ul { list-style-type: none; background: #363b40; } .header ul li { float: left; } .header a { color: #a3a7a6; text-decoration: none; } My question is why...
Danny
1

votes
3

answer
2.8k

Views

CodeMirror - PHP Mode Not Working?

For some reason its not displaying the text to be highlighted or anything, not sure why. Links: CSS: .CodeMirror { height: 400px; width: 500px; border-radius:6px; padding-top:3px; border: 1px solid #ddd; } .CodeMirror-scroll { max-height: 400px; width:500px; } .CodeMirror pre { display:inline-block;...
user2812028
1

votes
3

answer
93

Views

CSS 3 animation not working when width or height is provided

I apply width-transition on a div element and the animation on it works perfectly. But providing height and width to the same div in CSS prevents the animation. What am I missing? On hover, neither color nor animation changes. How do I provide common styling for all divs: Default styling Styling on...
Mahesh
1

votes
3

answer
751

Views

CSS - My border-bottom resizes when I resize my browser

I use a border-bottom on my navigation div, which is 100% wide. When I resize my browser window, the border-bottom suddenly gets cut off to te size that I just resized my browser to. Does anyone know a solution to this? my css: #nav { clear: both; height: 40px; width: 100%; text-align: center; bord...
Sam
-1

votes
0

answer
22

Views

Support landscape and portrait images in bootstrap carousel

The goal is to display up to 3 vertical images on the screen. The images sizing allows up to 2 horizontals or a single horizontal and a single vertical if it fits. The sizing on the horizontals is about 66% or col-md-6, with the verticals being about 33% or col-md-4. I can't sacrifice the quality o...
Austin Sweat
2

votes
2

answer
22

Views

Defining fr for grid only for first and second child of ul

I am creating a navigation for a website with ul li. There are currently 7 link in it. I've set the display of ul to grid with repeat(7,1fr). However I want the first and second li to be .5fr and 1.5fr. How can I do it? nav ul { display:grid; grid-template-columns: repeat(7,1fr); } How I want it to...
Andy Brooke
0

votes
0

answer
3

Views

Wait for Element inside Shadow-Root to be present using Nightwatch

Using Nightwatch I am trying to clear the browser cache of Chrome which means I have to click the Confirm button on the settings page and therefore wait for it to be present. (chrome://settings/clearBrowserData) Because Chrome is using shadow-roots this isn't as simple as selecting the element using...
Tom
1

votes
0

answer
13

Views

Slicebox showing no error, but still nothing on screen

The code is not showing any error in developer mode, but still not working. I took it from https://www.youtube.com/watch?v=q_RaXJhcwJE If you find any error or any mistake, please help me. The code's exactly the same as in the video but I think there might be some bug, or perhaps some additional fi...
Abdul Wahab
1

votes
5

answer
185

Views

Vertically align text

Im having problem vertically aligning a text with CSS. I have tried probably everything but it just doesnt want to work. You can see my demo jsfiddle demo here: http://jsfiddle.net/zcU7M/7/ .section { text-align: center; vertical-align: middle; display:table-cell; } With this code it should work but...
Richard Mišenčík
1

votes
4

answer
2.3k

Views

Can I prevent spam bots from submitting a form if its hidden?

If I display:none over a form wrapper on my website contact page will a spam bot still be able to submit it? If no, then would a possible solution be to just place a link saying - send us an email - and when clicked it display:show the wrapper with the form thus this preventing spam? Thanks, -O
MuhuPower
1

votes
5

answer
252

Views

Position image center of div whetever image size

I have in a problem with centering an image.Hence I have many div and in every div have two div that is divided into two.In those two div I will show two image.Each of these two div is 300 pixel.Problem is images may be small or 300 pixel and I have to show images center if small and if image is 300...
Rasel Ahmed
1

votes
1

answer
4.2k

Views

CSS not applying in JSF application

I am new to JSF. I am trying to put my inline styles to a CSS file but it is not working. Please find the code below. My XHTML file is in following location: \WebContent\template\ CSS is in following location: \WebContent\resources\css\ XHTML code: dfdskdksdk Location Coverage* I have tried using t...
user2727493
1

votes
3

answer
68

Views

CSS ,Responsive design

Let's say I have the following mark-up: .floatleft { float: left; } .floatright { float: right; } When I view this on a small screen on an iPad or iPhone etc. The two boxes will either: Shrink (but stay next to each other) or #box2 will "jump" down and position itself under #box1. Q: How do I make...
user2915962
1

votes
4

answer
11.1k

Views

How to move items left and right in an html table using css? -

I have 6 s in my s and I want the last 3 in each row to all be closer together. How can I move them? Here is my html: Test.com Funtown Click Here R My First Try 100 / 250 plays Players Duplicate Archive 1 The best try 0 / 250 plays Players Duplicate Archive Could be better 0 / 50 plays Players Dupl...
MattCamp
1

votes
2

answer
5.6k

Views

How to center two columns using CSS without using a fixed width container?

I have seen this thread which answers how to center two columns given that you know the total width of both columns in pixels. What if I don't know that or don't want to hard code that? If I at any point want to change the width of the columns I need also to recalculate the with of the wrapper manua...
Nilzor
1

votes
2

answer
19.6k

Views

Onclick event on list item

I'm trying to follow this answer, but rather than using a button as he does in his jsfiddle, I'm trying to use list items: http://jsfiddle.net/hqvDT/108/ It looks like it should work, but when I try to select some text and then press B (for bold), it doesn't actually bold the text. What's wrong? HTM...
Bagwell
1

votes
1

answer
900

Views

Single page website with background image attached to bottom

I have a long single page website here with 6 100% long pages. Until here we have no problem, the twist is, the page should scroll from bottom to top and the background image should me aligned to the bottom. Here's what I have until now. I don't yet have the screen starting at the bottom. I'm trying...
Digger
1

votes
1

answer
374

Views

Wordpress pagenavi output at top of page

I have a custom post type through a plugin and I'm using the pagenavi plugin. The page navi plugin works fine apart from it appears at the top of the content instead of at the end of the table. I've tried all sorts of placements with the wp_pagenavi() function and all don't work. I need help. code i...
jolen
1

votes
3

answer
1.9k

Views

how to restrict html table row height in WebGrid

html table one column contains lot of text and table looks ugly, there is too much space between rows. How to make table better so that there is not so much space, long column should be wider and maybe some of content not visible? I tried to use max-height , but it is ignored. Table is generated aut...
Andrus
1

votes
2

answer
6.3k

Views

How does one prevent a fixed element from scrolling over or under another element?

Despite my searches on Google and this site, I haven't been able to find an exact solution to my particular problem. I have a page with a fixed header and a fixed navigation div which is located in the main content along the right side. When the page is scrolled to the bottom, the footer scrolls ri...
DondeEstaMiCulo

View additional questions