[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

CSS

41K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Share tech news, updates, or what's on your mind.

Sign up to Post

Have a jpg image that needs to be:
  • Opened and displayed
  • Resizeable using its lower-right corner
  • Draggable around the screen
  • Closeable
When first opened, it needs to be resized to fit inside whichever parent element is holding it ... a <div> maybe?
There should be no scrollbars.  Whatever size the parent is dragged to then that is the size of the jpg (but it remains the same ratio).
I thought this would be simple, but nothing I tried so far has worked.  Tried <img>.  Tried background-image.  I must be missing something.
Tools we use here are HTML5, CSS3, jQuery, and JavaScript.
Chrome is the web browser used internally.
0
Determine the Perfect Price for Your IT Services
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

ASP.NET - I am looking for recommendations on a good popup window control which can use something like CSS, jquery, or javascript.

I don't have a problem with using codecanyon, but it's so hard to find what is good versus bad out there.

So please recommend something, free or for reasonable purchase, that works well.

I am not interested in using Telerik or AjaxControl Toolkit.

Thanks!
0
Wordpress - I am trying to add three button links to three separate websites and have like to have them evenly spaced horizontally on one line.

SO far I can't seem to figure out WHERE to do this.  I am helping a friend with a Wordpress website that I did not create (and the friend did not do this either).

I actually added the wording "Follow us on Facebook and Instagram" but have had no luck trying to add the logos which will become links.

I attempted to do this under "Theme Options - Footer Settings" and Appearance - Editor - "built-in CSS Editor" and at times some of the coding was visible but not the logos. I have the logos in the Media Library and know that Wordpress has a strange way of linking to the images to begin with.

I don't usually work in Wordpress but am familiar with PHP, and HTML.

Below is a screenshot of the area where I would like to places these logos and would like to put them just under the wording that says "Follow us on Facebook and Instagram".

Thanks

Website Screenshot of Footer area
0
What settings are needed to create responsive emails in Outlook?

Bootstrap and other CSS settings which work on web pages don't work when viewed in Outlook on phones and small form factors.

I know this problem has existed for years. Not sure if this has changed over the years. Any resources or HTML template to handle this would be appreciated. Thanks.
0
Hi There,

I have 3 dynamically constructed Textboxes (input) (Location, keyword, Contributor) on a reactjs application.   I want to filter the below list of checkboxes onChange event of input boxes (Text box).  It is a react redux application.  Please see the embedded image to have a complete idea about UI.   Please suggest how to achieve this result.

to handle onChange event of dynamically created input boxes
Please see the below code which I had done to create this gui on reactjs.

export default class SearchOptions extends Component {
  constructor(props) {
     super(props);
     //this.updateFacet = this.updateFacet.bind(this);
     this.onInputBoxChange = this.onInputBoxChange.bind(this);
  }

  /*updateFacet(key,value,isChecked) {
      console.log("updateFacet - " + isChecked);
      this.props.actions.updateFacet(key,value,isChecked,false);
  }*/

  onInputBoxChange(e,items,key) {
     items.map(i => console.log(i.value + " count (" + i.count + ")" ));
     console.log("target - " + e.target.value);
     var keysList = items.filter(i => i.value.toLowerCase().indexOf(e.target.value.toLowerCase().toString()) >= 0 ? true : false);
     console.log(keysList);
  }

  createListKeyValues() {
        const listKeyValues = (
          <div style={{marginLeft:10}}>
          {(()=>{
               return i.items.slice(0,3).map((j) => {

                  const label = j.value.charAt(0).toUpperCase() + j.value.slice(1);
                  const count = j.count && j.count > 0 ? ` (${j.count})` : '';

Open in new window

0
I have a navigation bar on the left side of the product category per the attached image. There is a  vertical scroll bar. Inside  the bar, there are titles with arrows, when user clicks the arrows, and it will expand and see the contents. When user checks the checkbox, it will expand again. When users selects the checkbox, it will go to the linked page. On the linked page, the checkbox the users just selected should still be collapsed instead of hiding, with the check mark checked   Any simple example?
Navigation-bar.jpg
0
CSS Font size media queries not working on mobile

Can anyone tell me what the issue is here with the font size being so small on a mobile device?
https://shoppinglilly(DOT)com/
0
Hi experts,  I have a page, where I want to display the images of the products. I do not want to restore the images in the database, but in the folder.
Currently I have a problem. Since some of the products have one or two images, and some of the products have more than 2. Per the code below,  if the products have less than 5 images, the image folder which do not have 5 image will be displayed as X (no image).  How to fix it? Thank you!


<ul id="carousel" class="jcarousel jcarousel-skin-tango">
				<li><a href="#" rel="p1"><img src="images/<%=idProduct%>/1.jpg"></a></li>
				<li><a href="#" rel="p2"><img src="images/<%=idProduct%>/2.jpg"></a></li>
				<li><a href="#" rel="p3"><img src="images/<%=idProduct%>/3.jpg"></a></li>
                          <li><a href="#" rel="p3"><img src="images/<%=idProduct%>/4.jpg"></a></li>
  <li><a href="#" rel="p3"><img src="images/<%=idProduct%>/5.jpg"></a></li>
				

				
			  </ul>

Open in new window

1
Hi,

I want to make a javascript app on this page:

www.nlpphysics.com

 that gives people choices, and when they choose one, it pops down to another question until at the end it just gives a box of anchor links to the right techniques based on their choices.

How do I do this?
0
I have an Aveda wordpress website. How do I get this line-height to work? It's the word "NLP Physics Presuppositions" in the menu. I don't want them to be so spread apart.

It's on the site www.nlpphysics.com
0
Big Business Goals? Which KPIs Will Help You
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

There is a Java Spring MVC project and a requirement to delegate the frontend to an external team of frontend developers. The backend is secret (proprietary trading system) and the frontend is therefore the only part of it that can be disclosed (Freemarker templates with HTML + CSS, JS, images).

I figured node.js has a freemarker library and the express server. It can render Freemarker templates:

const express = require('express')
const fs = require('fs');
const app = express()
const port = 3000

const Freemarker = require('freemarker');	 
const freemarker = new Freemarker();

app.get('/', (req, res) => {
	var model = {
		title: 'Test render',
		test: 'freemarker in JS!'
	};	

	console.log("Opening /");
	fs.readFile('main.ftlh', 'utf8', function(err, contents) {
		freemarker.render(contents, model, (err, result) => {
		  if (err) {
			throw new Error(err);
		  }
		  		  
		  res.send(result);
		});
	});	
})

app.listen(port, () => { } /*console.log(`Example app listening on port ${port}!`)*/)

Open in new window


Is there any quick solution to create mock controllers? Mock controllers should have some hardcoded data in their model just to make it possible to render the views.
Ideally, they would be generated somehow from the original Java controllers. I know regular expressions may be able to do it, but is there perhaps a better way? Some tool?
0
Hello everybody. I have a question regarding the following problem:
We would like to improve our web site speed significantly. For this purpose, images (jpg / png), but also CSS, JS etc. are to be outsourced to the CDN. It is the easiest according to our IT, if we put the pictures etc. on another (new!)

Do we have to fear a disadvantage in the ranking google? Does someone have experience with that? And what happens to the JS integrations, are they then executed correctly and, for example, are all the data recorded by Analytics?

I look forward to feedback!
0
How to create sticky on the page?
Using CSS, HTML and JQuery.
My site is responsive.

Sticky should always be at the bottom left.

Please advise.

Regards
1
I'm having a problem with a menu display.  I'm sure this is going to easy.  I'm just out of the hospital and I can't think straight.

The menu has a black bar on top and doesn't display on the top of the page.

I'm attaching all the code.

If you want to look the site is http://joesplaceunion.com/
index.php
Joes.css
menu_inc.php
0
I have a simple table that which has the following HTML code:
Sample HTML used to create the table
But the table looks like:
Table as it is displayed
I cannot figure out why the column width in the header is not the same as in the body
0
Hi,

I have a <ul> which has <li> elements. on click function I want to get the last <li> which opacity is 0 and make its text-decoration to none.
Looking forward for help.

Thanks
0
I have an website and I want to use bootstrap 4 to make it responsive, if possible.
I have current layout ( see at the bottom) , (example contrived for this question). there is standard header , footer and two column layout.
I have left side menu , which is 200px and next to it is main content div, which has certain width, let's say 800px for the sake of this example.
In addition,  in the main content area, I have several input fields with specific height and width.

Now, if I implement bootstrap in the current layout. how should I do it.
can i  create a row and col layout and put the current content inside these rows.
the side navigation menu has certain width which I would like to maintain , because of the content inside it.
how should i approach this?

<div class=container>
<div class=row>
    <div class= col-3>
         <div  class="site-navigation">side navigation menu</div>
    </div>
   <div class=col-9>
            <div class=site-content">
                .........main content.............
                <input type="text" height="30px" width="160px"/>  
            </div>
    </div>
   </div>
</div>  

------------------------------------------------------------------------------------------------------------------------------------------
.site-content {  width: 800px; }
.site-navigation  {  width: 200px; }

<div class="container">
    <div>Header </div>
    <div  class="site-navigation">side navigation menu</div>
    <div …
0
I have following markup, with everything wrapped in bootstrap container class.
In the main-content section. I have created 3 sections , with each set to float:left, so that they stack up on top of each other.
in the middle div, I want to have a table, such that the table is contained inside its border and any overflow is scrollable. so i have set the overflow property to auto. (see below)
the table is a bootstrap 4 striped table, but table appears or overflows outside the content area, it acually appears outside the main-content area. what am i doing wrong.



<div id="container">
      <div id="header"  style="height:120px"></div>
 
      <div id="main-content">
             <div id="content-header" style="float:left; overflow:auto">
             </div>

              <div id="content" style="float:left">
                   <table class="table table-striped">....
                   </table>
              </div>

              <div id="content-footer" style="float:left">
              </div>
        </div>
 
      <div id="footer" style="height:80px"></div>
</div>
0
Hello Experts,

I need help with Bootstrap 4.1.3 and Javascript/Jquery to make it work the way I would like to do it.  
I follow this user's example: https://github.com/bootstrapthemesco/bootstrap-4-multi-dropdown-navbar

What I would like to do:
1. How do I get the "arrow" on the submenu to be right-aligned in the uploaded images?  There is a before and an after image.
2. How can I make it so that when I move/hover away from the dropdown menu item, it will collapse.  For example, if I move away from "About Us", the dropdown menu for it, collapse?
3. Finally, I like that you have to click to get the main menu item (i.e Metrics) to expand the dropdown menu.  However, I want it so that when I hover over Submenu, it will expand auotmatically expand.  No clicking, but hovering.

Please provide any assistance for any or all of my wish list.  Thank you.

Here is my code for my menu:

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
      <li class="nav-item dropdown">
        <a class="nav-link 

Open in new window

0
Need More Insight Into What’s Killing Your Network
Need More Insight Into What’s Killing Your Network

Flow data analysis from SolarWinds NetFlow Traffic Analyzer (NTA), along with Network Performance Monitor (NPM), can give you deeper visibility into your network’s traffic.

I have created a nav/tab menu, as below.
when user navigates to a particular tab, I want to add a border to the selected/active tab item, to show user that this particular tab is selected or say user is in this particular tab.

or may be even make the text bold for the selected item.

is this possible with just css or do we have to use javascript?

<ul class="nav">
  <li><a href="">Home</a></li>
  <li><a href="">About Us</a></li>
  <li><a href="">Contact</a></li>
</ul>

css  ...

.nav{
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
}
0
I am trying to display a custom message when a user closes or about to close a browser tab. In the earlier versions of the browsers I could do this using onunload or onbeforeunload events and display a pop-up message but the newer versions do not allow me to customize the message. Is there anyway I can display a customized message when the user closes the browser tab or when clicks on the close button of the browser tab? A tool-tip could also work when the user is hovering on the close button or clicks on the close button of the browser. Thank you for any help.
0
Hi, I have CSS built vertical tabs. I am new to accessibility. I would like to add accessibility to my vertical tab. Can some one help with that.

expectation:
-----------------
When a end user, tabs through the vertical tab, they should be able to use Enter/Space bar keys on the  tab title  to see the corresponding tab content.

Attached is a HTML to show the vertical tab.

Any help appreciated.
0
I have few icons and images in svg format, that I need to untilize in asp.net site.
I added all the svg icons in an image tag as such

<img src=".../icon.svg>

this way I can't set the color of the svg icon. as there are quite a few icons , i'm using , what would be a best approach  to use such svg icons , so that i can set the color as well.
0
i have file upload control in my website, which is stand a button and show choose file, i want to change its css so it should show file icon instead of standard asp.net file upload control please advice
0
I have added a bootstrap 4 panel. how can I add a right arrow after the anchor tag , when it is collapsed and add a down arrow on expand?  

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>
0

CSS

41K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.