FAQ Database Discussion Community


Standard resolution sizes to optimize for

css3,responsive-design,media-queries
I'm working on one of my first responsive websites and I'm trying to figure out for what kind of resolutions to optimize for. Is there any standard or what? What are your practices? It would be nice to know....

Div Text's Color Changes when Printed

html,css,css3,media-queries,media
I have a div with white text color. Using css media queries. @media print { .myid_print_duo_name { z-index: 2; position: absolute; left: 0px; top: 330px; width: 303px; height: 28px; line-height: 28px; text-align: center; color: white !important; font-weight: bold; font-size: 20px; font-family: "Times New Roman"; } } My text looks like...

Bootstrap Navbar Logo pixelated on phone

jquery,html,css3,bootstrap
I was wondering if anyone know how to solve this problem: I am creating a website with bootstrap, I've been trying to do the navbar and everything works perfectly except on my mobile phone because the logo gets blurry or pixelated, I am not sure if its getting resized automatically...

Using CSS :after to shade a button:hover

css,css3,button
I'm trying to add a bunch of different color classes to my buttons and allow additional classes to be added arbitrarily. All of these should darken on hover. It seems tedious to write button.(color):hover rules for every single color, so I've written this such that the :after section gets darker...

Lightbox with transition

css,css3,transition,lightbox
I wanted to do a smooth transition of a fullscreen lightbox, my actual code is <a href="#_" class="lightbox" id="img1"> <img src="images/photo.jpg"> </a> And my style: .lightbox { display: none; position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8); } .lightbox img { max-width:...

Flexbox in Chrome doesn't seem to respect 'aspect ratio' padding; fine in Firefox

css,css3,flexbox
I have a containing row that contains up to three divs. Each child div either has a background image, or just some text. As the image divs are using background-image and have no defined width/height, they have an aspect ratio set using the aspect ratio padding method (using pseudo-elements in...

Content section overlap footer

html,css,twitter-bootstrap,css3,twitter-bootstrap-3
I have a a page as following that works fine in big screens but in small screens the mainsection overlap the footer. How can I have the footer always at the bottom of the page. Also in small screens the location of the footer should be based on content of...

Child element's box-shadow superior to parent's?

html,css,css3,parent-child,box-shadow
Somehow I find this wierd and I couldn't solve it myself. I have form with large outset box-shadow which overlaps top inner (inset) box-shadow of the parent container. I need to have parent's black inset shadow to be visible. See this fiddle z-index does nothing. My CSS: #description { display:...

css disappears on the click of a button

javascript,jquery,html,css,css3
I got a countdown timer that starts working on click of a button. i tried to apply css to it, but when i click on the start button the css disappears. can anyone tell how i can retain my css the whole time here is my code @fiddle $('#startClock').click(function() {...

Transitions when switching from top to bottom position

css,css3
If there's a better way of doing what I'm about to ask, please let me know, but so far this is the best I could come up with I want to have a set of divs that contain a sliding div inside of them. The sliding divs would contain content...

CSS drop down navigation

css,html5,css3,drop-down-menu,navigation
I'm sure this is something simple I'm missing... My drop down menu is opening within the main navigation, widening it. Here is a link to the page I'm working on. The issue is with the navigation below the App buttons. http://membershq.incentiveusa.com/AwardPages/GoalUp_Test2/index_test3.html# Here is my HTML: <div class="container-fluid"> <div class="section-title2 text-center">...

Hold ul visible when parent loses hover (pure css if possible)

javascript,html,css,css3
I'm quite new with css. I want hold the ul visible when hovering from parent to ul. I don't know how do it. HTML Markup <drop-down class="dropdown"> <span>Dropdown menu<i class="fa fa-cog"></i></span> <ul> <li> <a href="#">Github<i class="fa fa-github"></i></a> </li> <li> <a href="#">BitBucket<i class="fa fa-bitbucket"></i></a> </li> <li> <a href="#">Dropbox<i class="fa fa-dropbox"></i></a> </li>...

custom table td witdh

css,css3
The problem : HTML <div class="visible-sm visible-xs " id="aatablet" style="padding-left: 0px; padding-bottom:10px; padding-top:10px; text-align: center;"> <table border="1"> <tr> <td colspan="4" class="item_title"> <div style="padding-top:5px;"> Available at: </div> </td> </tr> <tr> <td > <img src="img/amazon-lrg.gif" alt="amazon" /> </td> <td> <img src="img/ebay-lrg.gif" alt="ebay" /> </td> <td > <img src="img/tomatomill-lrg.gif"...

Issue with multiple links from anchor tag - php

javascript,php,html,css3
Greetings for the day. I am in the middle of a coupon based website development. As part of it, once the user clicks on the get coupon button, I need to display to the user the coupon code as well as redirect them to the merchant website. To achieve this...

Two hover states for a single class

html,css,css3
I've got a common button set in my css. Also 've got a hover set to it. .myBtn { background-color: #f60; border: none; font-size: 12px; } .myBtn:hover { background-color: #fff; } .myBtn is mostly on a black background, so the button is visible on hover state. But when .myBtn is...

Two div side by side in one container css

css,css3
I want to have two div side by side in one container: the first is an image (the width is fixed but the code should be applied for different images with different widths) . The second will take the rest of the container. .conteiner { position: relative; } .image{ display:...

How create shadow effect for div [duplicate]

html,css,html5,css3
This question already has an answer here: 3D Box Shadow effect 4 answers How can I set the shadow as in the picture using css? This is my current css code div{ -webkit-box-shadow: 76px 50px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 76px 50px 5px 0px rgba(0,0,0,0.75); box-shadow: 76px 50px 5px 0px...

CSS Background slideshow animation

css3
I have this code HTML: <div> <ul class="cb-slideshow"> <li><span>Image 01</span> </li> <li><span>Image 02</span> </li> <li><span>Image 03</span> </li> <li><span>Image 04</span> </li> <li><span>Image 05</span> </li> </ul> <div class="container"></div> </div> In this demo as you can see, my content part also gets faded. I tried with lot of options but I didn't get...

How manage styles in Vaadin portlet in Liferay

css3,liferay,vaadin,portlet
I have a Portlet, where is used Valo theme. Most graphical components are displayed properly, but TextField not. It should have rounded border radius and height should be about 35px. It has normally about 15px and the field is angular. When I narrow width of browser window to about 200px...

Fit an image inside a div that also has a title?

html,css,css3
Here's my fiddle Here's my HTML: <div class="block"> <h2>Title</h2> <img src="http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png" /> </div> I'm trying to have an image inside my block. I want to size the image so that it fits inside the block fully. I've tried with height 100% but the title of the block is not taken...

CSS: Selecting a group of parents

html,css,css3
For the following generated HTML: <div id="parent1"> <div class="child" /> </div> <div id="parent2"> <div class="child" /> </div> <div id="parent3"> <div class="child" /> </div> I would like to select .child from #parent1 and #parent2 like: #parent1 .child, #parent2 .child { Do stuff... } However, this can become messy. Is it possible...

How to position div which contains font-awesome icons to centre of another div?

jquery,html,css,css3
I'm trying to position div which contains font-awesome icons to centre of another div but i cannot make it in the right way. I have following code: HTML: <div id="menuRightSide" > <div class="rightSideMenuItem"> <div class="fa fa-facebook fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div> </div> <div class="rightSideMenuItem"> <div class="fa fa-twitter fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div>...

Display some HTML when mouse over in a table row using CSS

html,css,css3
I have a HTML table tr and it looks like this: <tbody> <tr> <td><input type="checkbox" /></td> <td> <a href="" class="name">This is Pet Name</a> <div class="manage-link"> <a href="">Edit</a> | <a href="">Delete</a> | <a href="">View</a> </div> </td> <td>Administrator</td> <td><a href="">German Shepherd</a>, <a href="">Dogs</a></td> <td class="center">View</td>...

Edit and Delete on mouseover of jQuery Datatable

jquery,css3,datatables,jquery-datatables-editor
I am trying to show edit and delete buttons on mouse over of a tr in jQuery Datatable. In the process, I am almost done, but I have defined 3rd column to contain edit and delete buttons. Below is the html and jQuery code <table id="example" class="display" cellspacing="0" width="100%"> <thead>...

how to use .load(function() { on a large function

javascript,jquery,ajax,css3
I have 5 pretty large CSS3 / jQuery chain animations within a web page, these occur at 5 subpages, when the user navigates to each individual (5) subpages.. I would like to use / have the effect of jQuery's $( img ).load(function() { // Run code }); Except I only...

customize the handler of input range

css,html5,css3
When we use input range <input type="range", there is a handler which is moveable as how we handle it. Now I need a help how to customize this handle, in this case I want to change the default handler with my own handler(image of button). Thanks for the help <input...

Building a chess diagram with css

css3
Trying to build a chess diagram with just css3, but seems like my result is far from correct (for now, just a line of 4 cells) : cells seems to have margin different from 0 cells are not squares, though I've used box-sizing css property What did I misunderstand ?...

Parent container have children with different width

css,html5,css3,jquery-ui
I have used auto-complete J-query as the following shows : (function( $ ) { $.widget( "custom.combobox", { _create: function() { this.wrapper = $( "<span>" ) .addClass( "custom-combobox" ) .insertAfter( this.element ); this.element.hide(); this._createAutocomplete(); this._createShowAllButton(); }, _createAutocomplete: function() { var selected = this.element.children( ":selected" ), value = selected.val() ? selected.text() :...

Setting overflow: scroll on a table with display: flex

html,css,css3,overflow,flexbox
I have a table with the display: flex property, whose cells will be centered vertically. When there are more cells than the table can show, the overflow: scroll property doesn't take the top ones into account. In the sample code below, the scroll stops at the letter K when it...

How to animate the progress element with CSS3?

html,css,css3
I have a progress element like so: body { background: grey; } progress[value] { -webkit-appearance: none; appearance: none; height: 25px; width: 95%; position: relative; top: 10px; right: 50%; left: 2.5%; } progress[value]::-webkit-progress-bar { background-color: rgba(255,255,255,0.2); border-radius: 50px; border: solid; border-width: 0px; border-color: rgba(255,255,255,0.1); } progress[value]::-webkit-progress-value { background-image: repeating-linear-gradient( 45deg, #fff,...

Div disappears when page scrolls

jquery,html,css,css3
Fiddle: http://jsfiddle.net/ud6hejm6/ I was asked to develop a website for a videogame tournament. If you open the fiddle, you will find a preview of the page. There is a div in the middle as you can see (with this code): <div class="middle teko" id="mezzo"> <span style="color: purple">EndGame</span><span style="color: yellow">TV</span> &nbsp;...

CSS Image Background - Same Scale Across Different Devices

html,css,css3
I'm trying to create a website with possible multiple fluid background sections that are consistent in scale between mobile, tablet and desktop (including different resolutions). The background is to stay in the centre to cover the whole area and appears in the same scale across all device types. Things I...

Is there an opposite CSS pseudo-class to :hover?

css,css3,css-selectors,pseudo-class
Is there a pseudo-class in CSS to specify :not(:hover) Or is that the only way to specify an item that is not being hovered? I went through several CSS3 references, and I see no mention of a CSS pseudo-class to specify the opposite of :hover....

Delayed CSS3 modal window fade in

css3,css-animations
I have a modal window that I'm trying to have appear after about 7 seconds, with a close button so users can close it if they want to. I got it to close when you click the close button with this code: .tip { z-index: 99999; -webkit-transition: opacity 400ms ease-in;...

How to properly position divs for overlay hover effect with text underneath

html,css,css3
I have two rows of 4-boxed divs. The goal is to have a header within each box, and then hovering over the box will present more detailed p text with a faded background. I'm close, I just can't figure out how to actually layer the span overlay on top of...

How to align text and images in the middle

html,css,css3,vertical-alignment
I added a bar on the top of my website, and I want to align the images and text to the middle. How can I do that? This is what I tried so far, and it seems like I'm doing something wrong. What the best proper way? <div class="casual" style="...

How to set divs to take percentage of remaining width

html,css,css3
Let's say I have 7 divs of which I have several of fixed width, and the others should take a portion of remaining width. Example: <li> <div id="1">Should take 20%</div> <div id="2">Should take 30%</div> <div id="3" style="width:2em">Something</div> <div id="4" style="width:1em">&nbsp;/&nbsp;</div> <div id="5" style="width:2em">Something</div> <div id="6">Should take 30%</div> <div id="7">Should take...

Keep images centered when resizing

css,css3,responsive-design
I want to keep the image centered when I resize the browser. Check out my fiddle I'm using the following code but everytime I resize the browser, my image does not keep center (x/y). Also it should work with IE9 and up. Any help would be appreciated! .container { height:...

CSS Background horizontal centering

html,css,css3,center
I have an image as background with the following CSS setup #background { background-image: url('../img/bgimage.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; opacity: 0.8; filter:alpha(opacity=80); top:0; } My aim was to center the background ( add a little opacity ), but still have its beginning at the top of the page....

Pure Css transition slide down panel not working

html,css,css3
Im trying to make slideDown Menu on hover.So on hovering HButton3 i want to extend the height of AccomodationPanel so that the buttons inside it display becasue the extend but nothing happens on hover it looks like its something in the position of the elements HTML : <asp:Panel runat="server" ID="Header"...

boostrap & Normalize.css: spacing problems

html5,twitter-bootstrap,css3
Boostrap normalize does not seem to remove top and left/right spacing from theme i am developing. Could somebody give hint where is the problem in my code. I have tried several reset css files also without any effects. Index <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- GOOGLE FONTS -->...

Setting up the page grid using push and pull

html,twitter-bootstrap,css3,twitter-bootstrap-3
I'm using Bootstrap and I'm having issues setting up my grid. How do I use bootstrap's push/pull to setup my columns as below? This is what I've got so far, <div class="row"> <div class="col-xs-5 col-sm-3 col-md-3">A</div> <div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div> <div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div> </div> ...

Add line transition above and below text

html,css,css3,css-transitions
this question is a follow on from my previous question. I have some style used from this website, to create a slide in underline effect, please see example on this jsfiddle. My previous question was asking how to adapt this so the line came in from right to left, and...

Navbar CSS not properly displaying hover functions and menu items

html,css,twitter-bootstrap,css3
Previously I have asked a question about how to make hover border appear on menu items without re sizing image here and one of the member gave me a solution which works with what I want. But recently I have been noticing a glitch in my navbar where by when...

Z-index issues, z-index isn't working as it should

javascript,jquery,css3,z-index
My issue is when ever the links are hover, the hidden sub menu pushes the below div with it. I've tried playing around z-index but still no luck. Can someone please help me with this. my jsfiddle HTML: <div class="row" id="top-eybrow"> <div class="eyebrow-section right text-left"> <ul> <li> <a href="#">Sign in</a>...

CSS media-query to squeeze image into container

css,css3,responsive-design,media-queries
I am forced to work with a table-based layout and need to make it responsive. Am struggling with images: when the image-width exceeds the screen-width, it should shrink to fit on the screen. In several articels here I found max-width being recommended, but somehow I'm not getting it to work....

CSS List Navigation: Align All Items Left, but Last Item Right

css3,navigation
I've got a simple list driven navigation that looks like this: Page 1 Page 2 Page 3 My Account I need 'My Account' to float right: Page 1 Page 2 Page 3 My Account Here's the list: <nav class="nav"> <ul class="menu"> <li>Page 1</li> <li>Page 2</li> <li>Page 3</li> <li>My Account</li> </ul>...

CSS3 Columns children with margin issue w// Chrome

javascript,jquery,html,css,css3
http://dev.metertech.co.uk/technologies/patents-and-licensing On the page above you can see that the second column is pushed down a little from the top. On a page resize the issue corrects itself. All other pages, even those with the same number of <p> tags for the .content render the columns correctly. I have no...

Issue on Adding Animation Effect to Active Class

jquery,css,css3,animation
Can you please take a look at this demo and let me know why I am not able to add the animate effect to active class through jquery I have class called .sliding-middle-out { display: inline-block; position: relative; padding-bottom: 3px; } .sliding-middle-out:after { content: ''; display: block; margin: auto; height:...

How to delete an
  • element by using ul li:before and clicking on the content?
  • jquery,html5,css3
    I have an <ul> element and within it some <li> elements. The list item contains some content before the actual item by removing the standard dot with an x using list-style-type: none; and :before HTML <ul id="list1" class="basic"> <li>space</li> <li>planet</li> <li>planet2</li> </ul> CSS ul li:before { content:"x"; position:relative; left:-25px; }...

    CSS Nav Menu Fade Out OFF Hover

    html,css,css3,navbar
    Still learning as I go with CSS styling, and I want to implement a fade-in/fade-out navigation menu. Reading up, I was able to code a fade in on hover successfully to the effect that I want. Now I'm being challenged logically and can't seem to come up with how to...

    Animated text gets hidden after completion of the animation

    css,css3,css-animations,keyframe
    I had tried a simple animation. See this fiddle. HTML: <div class="special_sec"> <span class="sub_heading">About Us</span> <span class="sub_heading1">Services</span> <span class="sub_heading2">Portfolio</span> <span class="sub_heading3">Clients</span> <span class="sub_heading4">Contact Us</span> </div> CSS: .special_sec span { font-size:30px; list-style:none; text-align:center; padding:10px 0; display:block; animation:subheadinganimation 17s; color: transparent;...

    how to center big image in a small div?

    jquery,css,html5,css3
    I have a div with 264width/264height i need to put an image with 1600x1067 in the center of div i don't know what is the best prattice <div style="width:264px;height:264px"> <img> <!-- img with 1600px / 1067px --> </div> ...

    Two divs next to each other, one moves down when text is in the other

    html,css,css3
    I have two divs displayed using display: inline-block, in order to have them next to each other. This works when neither of the divs have text in them. However, when I put text in one div, it moves it down dramatically, while the other keeps the same position. This happens...

    :nth-of-type selector overrides all other CSS selectors

    html,css,css3,css-selectors,css-specificity
    I am trying to revise for my exam on HTML, JavaScript and CSS3; and I am a little confused at CSS selectors and which take priority. I have the following CSS: table { border: 1px solid black; } tr:nth-child(odd) { background-color: red; } tr td:nth-of-type(even) { background-color: blue; } td...

    Scroll effect on website?

    jquery,html,css,css3
    I saw this website online: http://manipal.edu/mu.html, I have only one question, is it difficult to create a scroll effect like this and what's the name of it? And how do I only activate him on scroll? It there a library for this or something? Thanks in advance....

    Smooth mouse-out animation

    css,css3,css-transitions,css-animations
    I have a diamond shaped div that spins 360 degrees around its own axis on hover by using CSS animation. I can't work it out how to ensure smooth going back to the original state when not hovering anymore? So far it "jumps" when the diamond is in the middle...

    Elements with fixed position moving when body overflow is hidden

    javascript,html,css,css3
    I want to open a modal layer which overtakes the body scroll. To accomplish that, when the layer is shown I'm setting the body overflow to hidden and the overflow to scroll on the modal layer. Visually, one scrollbar replaces the other. In the background I have a top bar...

    CSS: How to flow text around both left and right images

    css,css3
    I know float:left will allow text to flow around an image floated on the left. And float:right will allow text to flow around an image floated on the right. Is there a way to flow text around both a left and right image? ...

    Add CSS3 transitions to jQuery Animate script

    javascript,jquery,html,css,css3
    Below I have a script that loads images in a random order and flies them onto the screen beside each other. You can find the script here: https://jsfiddle.net/38e126f4/ I would now like to be able to add different random CSS3 transition effects to each image as they fly onto the...

    CSS: The body font style is not showing in the table

    html,css,html5,css3
    The body of my CSS has a font style set using CSS, but it is not showing in the table. I then added it into the table and it still seems to not want to adopt the font style. I had a look through some other posts and am still...

    Round edges on shorter side in CSS [duplicate]

    css,css3,css-shapes
    This question already has an answer here: Border-radius in percentage (%) and pixels (px) 1 answer I want to make my text input have rounded edges on the shorter side, which is vertical side. The effect I need looks like this: If I use border-radius: 50%;, which makes corders...

    CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds

    html,css,css3
    I want to apply css3 gradient (left and right transparent) background color for a TR element like below. Below code is working fine if it has only one TD element, where as more than one td, background gradient started repeating for each td... Am I missing something? Online Demo CSS...

    How do I target a first-child that is visible (after children that are set to display:none), with only CSS

    css,css3
    I need to target the first <td> element in a table row that is visible--meaning it does not have inline styling of display:none. Here's the gotchyas: They are not always hidden Sometimes more than one is hidden. I can't edit the HTML or use javascript/jQuery--This needs to be a pure...

    Dynamic font-size according to device

    css,css3
    Small question, for which I can't find any answer. Is there a way to do this? I have 3 elements with different sizes. One with 30px, other with 22px and other with 16px. Now, when using a tablet to check this elements, they go off limits since I need to...

    Swap nav and div vertically uing CSS only

    html,css,html5,css3
    So I have a <nav> in my <header> tag and just below it I have a <div> which shows the date. Now the problem is, my design is in such a way that I cannot put the <div> for the date inside my <header>. However since I'm working with a...

    Colour overlay on hover

    css3,hover,overlay,css-transforms
    I'm playing with a self developed theme on my blog. I've got a grid of images that click through to a particular category. I'm having a problems trying to create a hover effect over the images. I think probably because of the way I've used the link (absolutely positioning it,...

    Pure CSS animation visibility with delay

    css,css3,css-animations
    I am trying to implement some animation onLoad without Javascript. JS is easy, CSS is ... not. I have a div which should be on display: none; and should be display: block; after 3 secondes. Lots of resources told me animate does not work with display, but should with visibility...

    aligning controls vertically in bootstrap

    css3,twitter-bootstrap-3
    I'm new to bootstrap and css3. I want to align my controls vertically in middle but some how not able to find elegant solution to it using bootstrap classes. Pls check sample code snippet below : <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-md-12"> <div class="form-group col-md-5"> <span class="fieldtext">Field 1</span>...

    Is there a way to get my anchor links to appear below my header?

    html,css,css3
    I've been handed the reigns on a website that is having issues with anchored tags not displaying correctly when a page is loaded from the FQDN. That is if I reference http://www.foo.com/news#bar the entire div for bar will be hidden behind the header. Where if I use the anchor tag...

    Responsive css always applying landscape

    html,css3,responsive-design,screen-orientation
    I'm trying to understand why my css is always applying the h1 font size in landscape instead of portrait when I am in portrait (I'm a noob in responsive design). Anyone have an idea of what I'm doing wrong ? Thank you ! Guillaume **** edited new version: now working....

    expanding/animating a div from center when width is 100%

    css3,keyframe
    I have a div with a border and i used keyframes to expand it onload but I want it to expand from the center rather than left to right. http://andylilien.com/index2015.html the css: .navback { position:absolute; bottom:0px; padding-bottom:-8px; width:100%; height:17px; background-color:#FFF; border-top: 1px solid #d0d0d0; z-index:999; } @-webkit-keyframes expandline{ 0%{width:0%;} 50%{width:50%;}...

    css3 animation text repeatly

    css,css3,css-animations,keyframe
    I am beginner of css3 animation. I want to rotate the text continuously. I tried, this is my fiddle location. https://jsfiddle.net/v3jds98d/ span { font-size:30px; position:absolute; top:40%; text-align:center; width:100%; left:0; color: transparent; opacity:0; -webkit-animation: textanimation 3s ; -moz-animation: textanimation 3s ; -ms-animation: textanimation 3s ; animation: textanimation 3s ; } .animation_text1...

    How to prevent the vertical scroll of this div?

    html,css,css3,scroll,xhtml
    I am not so into CSS and I have the following problem. I have the following situation: into a page I have a very large table (that was horizontally truncated because it not entered in the page). So to solve this issue I put this table into a scrollable div,...

    CSS :hover that shows more than one image

    html,css,css3
    I have an icon on my website. I want to change the icon to 4 different images when ever I hover over the first one. So I know how to switch between the regilar image to yellow0.png, but how do I continue to the next one (after half a second...

    Is it possible to grow a div if it has relative position element?

    html,css,css3,css-position,autogrow
    For every element inside a div it grows it's width , however when we placed a positioned element , here the error message is positioned to relative and has top of 3px. As it is showing container isn't growing. If I use overflow: hidden; /* the message will be cut...

    Set variable value based on screen size [duplicate]

    css,css3,sass
    This question already has an answer here: Using Sass Variables with CSS3 Media Queries 3 answers I'm using sass. I want to add button paddings depending on the screen size. My only requirement is to have button padding: 8px 8px; for small screens and button padding: 5px 8px; for...

    How to make my nav bar responsive

    html5,css3,media-queries
    I would like to use media query to make my navbar responsive. @media screen and (max-width: 600px) { .nav-wrap { position: relative; min-height: 40px; } .nav-wrap ul { position: absolute; } .nav-wrap li { display: none; /* hide all <li> items */ margin: 0; } .nav-wrap .current_page_item { display: block;...

    Animate removal of list items with css

    css,angularjs,css3,animation,css-animations
    I have made the animation of a showing/hiding a list of messages. See this plunk. But how can I adapt it to also make an animation when a message is removed from the list? My css: .messages-active.messages { max-height: 50px; } .messages { -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition:...

    Click on link next link should be display on same page

    javascript,php,jquery,html,css3
    I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...

    How to avoid wrap in IE7 when I have two ul in a navigation?

    html,css,css3,internet-explorer,internet-explorer-7
    In ie8 or firefox browser,My code runs well,the two ul are in the same line.But when I ie7,the two ul are in the diffrent line,How to make then in the same line in ie7? <DIV id='navigation'> <ul><li><span> leftspan </span></li></ul> <ul style='float:right;'> <li><span> leftspan </span></li> <li><a href="http://www.google.com" target="_blank">google</a></li> <li><a href="http://www.apple.com" target="_blank">apple</a></li>...

    How do you make a div only extend in one direction when the outer container size increases?

    javascript,html,css,css3,layout
    I'm trying to make a a page container with a navigation bar on the left (inside of the container). When the outer page is wider than the container, I would like just the navigation bar to extend left up to a certain size while the rest of the container's contents...

    Alternate div to have images left(even) or right(odd)

    html,css,css3
    I am trying have a better arrangement of images instead of just images in 1 column. See example in attachment, the images for each article can be on left and right. This is my code. HTML: <section class="content list_page"> <article id="post-66"> <div class="list_img"><img src="img1.png"></div> <div class="list_text">Content 1</div> </article> <article id="post-63">...

    Having 4 images in each row in a div

    html,css,html5,css3
    I want to have 4 images in each row of my content div After I insert the first four images, they will be shown in the row one. If I add more images the will go to the next row until it reaches four numbers, then it will go to...

    Prevent bootstrap 3 tab from stacking when window is resized (made smaller)

    html5,css3,twitter-bootstrap-3
    I have two tabs and I do not want them to stack when the window is resized. How do I do so? As shown below this is the code I've used to create my tabs. I don't understand why they would stack up when my window is resized. HTML Tab...

    how to align column to the right?

    angularjs,css3,twitter-bootstrap-3
    I am getting my head around twitter bootstrap 3 and specifically the column setup. I got a 2 columns on the same line: <!--datetime row--> <div> <div class="col-md-6 form-group"> <label for="">Title:</label> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li...

    Why does the box come out like this (padding/border/margin)?

    html5,css3,border,margin,padding
    So this is my first day learning HTML&CSS and I'm currently having a problem. Why does this block come out like this (on left is what I get & on right is what I'm trying to achieve): HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Temporary</title> <link rel="stylesheet" href="main2.css"> </head>...

    CSS Container Wrap shaped Polygons

    css3,polygon,css-shapes
    How can I build the white/green Container (shaped Polygons) with CSS / CSS3 ? ...

    Center only 1 image when 2 images present in a div

    html,css,css3
    I'm trying to make a website and it has, what I call, a banner on top of its navbar. The banner has two images in it. I intend one image to be aligned to the right in the banner and one image to be aligned to the center, both vertically...

    Float left and float right not working + sub-menu positioned under first UL item?

    html,css,css3
    Been learning CSS and HTML quite a lot lately, and although I already know about stuff like float, positioning, margins, padding, etc, for some reason splitting up these 2 things are not working... And also my submenu is a bit wrong, refer to the image below: As you can see...

    CSS Transition not working accordingly

    html,css,css3,jade,css-transitions
    Not sure what I'm doing wrong here. The hover is definitely working, as the top and bottom properties get changed, but the transition just isn't there. .info{ position:absolute; transition: opacity 2s; top:0px; bottom:0px; right:0px; left:0px; background:rgba(0,0,0,0.8); color:white; text-align:center; justify-content:center; display:none; opacity:0; } .content ul li:hover .info{ top:-10px; bottom:10px; opacity:1; display:flex;...

    list checkboxes displayed horizontal

    html,css,html5,twitter-bootstrap,css3
    I have the following markup:- <div class="fil hori now"> <span class="label-new"> <ul class="ngc"> <li> <input class="any" id="any" name="any" type="checkbox"> <label id="any" for="any">Any</label> </li> <li class="new-select"> <input id="item1" name="item1" type="checkbox"> <label id="item1" for="item1">item1</label> </li> <li class="new-select"> <input id="item2" name="item2" type="checkbox"> <label id="item2"...

    Svg set new coordinates with animation on 2 lines simultaneously

    jquery,html,css,css3,svg
    I need a way (with CSS3 or jQuery) to change this SVG shape from X to ↓ (Down arrow). I tried more ways but i still have problems. My basic idea is to get lines with id (svg_5, svg_6) and make these the head of my arrow. $('a').click(function (e) {...

    Navigation Menu Shrinks with Browser Sizing - CSS Issue

    html,css,html5,css3,navigationbar
    I created a navigation menu for a re-design of a website that's a Printing Company. Everything is working perfectly, but I can't find out why the Navigation shrinks when you change the browser size. I've created these menus before, and I've never had a problem with shrinking. Here is the...

    Dojo infinite bounce animation

    javascript,css3,dojo
    I need to make this css3 animation using Dojo, but I'm not getting the desired result. The arrow should bounce when its hovered. Simiilar to this http://codepen.io/dodozhang21/pen/siKtp but horizontal. HTML: <a href="#" class="uiAnimatedArrow" title="Buying a Home"> <!-- --> <span> <i data-copy="Learn More"><b></b></i> Buying a Home </span> </a> CSS: a.uiAnimatedArrow i...

    compilation errors in sass with 2 instances of @media (max width / min) [duplicate]

    css,css3,sass,compass
    This question already has an answer here: Compass wont generate cause an “invisible” error 1 answer When writing the below under just as is, one in-between width media call on top of another in SASS I get a compilation error - error says 'Invalid CSS after "TCY": expected selector,...

    How to make css3 steps animation using `position` property

    jquery,css3
    I am trying to make a steps animation using css3. but i am not able to get result. requirements: According to the array value .digits need to change it's top position. i have the @keyframe with the name of move. i am adding to the .digits on button click. but...

    How can i change a Google Recaptcha Width?

    css,asp.net,css3,captcha,recaptcha
    I try to implement the google recaptcha v1 in a ASPX project, and i use a DLL for that and i have a control validator for all fields of my form. My web site is responsive but i can change the with of my Google recaptcha to become responsive too....

    Creating a responsive cloud shape

    html,css,css3,svg,css-shapes
    I've been trying to create a responsive cloud shape in CSS for a project. I am trying not to do this with images due to HTTP requests and the requirement for responsiveness. The shape in question would be this: (but can be similar - slight variations/improvements would be cool): I...

    drop down menu toggle does not work

    jquery,html,css,css3
    So I am trying to create a dropdown menu using jQuery and I have tried several things. I tried using .hover(), .click(), and mouseenter() for the user's action, but nothing seems to work. I even tried toggle() and slideDown() for the event but nothing shows up on the screen when...