Improve company productivity with a Business Account.Sign Up

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

I have developed a website for a client, in the code i had utilized quite a few CSS tags (To keep the formatting and alignment), to add new content its all done through source code (need to add paragraph tag and heading tags to add new content) , users can add links, upload pictures, URL and amend existing content without touching source code.
After the website has been tested and delivered to client (Desktop, Mobile, tablet), now the client is saying that non technical people will be editing it, so if they accidentally delete a tag from the source code they wont know.

Just wanted to get opinion on what functions are delivered with Drupal website? What are industry norms?  if client had not mentioned anything in initial project scope?

I have found a solution (Drag Drop Builder) to suit client requirements,  but i have to add that function on every page, lots of working hours to me.

How can I justify it to client that its not industry norm to have Drag Drop builder function as industry standard in Drupal website? and what they are expecting from a website  is not industry standard and client never mentioned it in initial job task.
Thanks.
0
Get 10% Off Your First Squarespace Website
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Hi Experts,

     Not able to set width 100% for flex containers.  Is it right? that to set width 100% to flex containers.  I have a flex container, which is like header or nav bar.  I am pasting the code below for reference.  I am also attaching screen shots for referencescreen shot for reference

{% load static %}
{% load pipeline %}
{% load wagtailcore_tags  %}
{% load template_tags %}
{% load render_bundle from webpack_loader %}

<!doctype html>
<html>
  <head>
    <title>NTL</title>
    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.png' %}"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes,shrink-to-fit=no">
    {% stylesheet 'style' %}
    {% block head %}{% endblock %}
  </head>
  {% block body %}
    <body class="{% if body_class %}{{body_class|safe}}{% endif %} navigation-bar-shown">
      <input type="checkbox" class="hide" id="navbar-menu-toggle" />
      <input type="checkbox" class="hide" id="navbar-search-toggle" {% if query|length|get_digit:"0" != 0 %}checked{% endif %}/>

      <header class="navigation-bar-container">
        <label class="screen" for="navbar-menu-toggle"></label>

        <div class="navigation-bar container">
          <div style="background: #facb66; color: #333; font-size: 14px; padding: 10px; text-align: center">
            <div class="page">
              This is alpha. 

Open in new window

0
Hello CSS Experts.

I have a web page that has a left sidebar that is "too wide".   It takes up too much horizontal real estate on the page.

Here's the page  Website link

I need the left side bar to be "narrower""  (looking at the source HTML and  css it appears to be 25%)  And the content to the right of it to be able to take up the rest of the  newly available real estate/  ( looking at the source html and css it appears to be "three-quarters".)

Since this site uses some kind of a grid, I need to do this correctly, which is why I am asking the question here.  

For example, I'd like the left sidebar to be about 15 percent  and right "content"side to be 85 percent -- making it all 100 percent.
page-margin grid collection-sidebar
All of the above appears to be controlled by a class called "page-margin grid collection-sidebar:   But I am not 100 percent certain.  

Needless to say I only  want the content in the page-margin grid collection-sidebar affected by this change  I don't want to change any overall grid settings that might be used elsewhere on the site.

Thanks for any help!

Rowby
0
I created a VB.NET web page that uses the iTextSharp functionality to transform an HTML page to a PDF dynamically.  

The name of the page is feespdf.aspx and it transforms the page FeesForPDF.aspx to a PDF when requested by the user on the page via a clickable link. No parameters are passed.

The problem I'm having is that our marketing department has given me some fonts that they want to use on the PDF - not a problem for simply displaying the ASPX page by using @font-face tags in the CSS file.  But the OTF-formatted font they gave me is not displaying on the PDF. The text that the OTF font is used on is defaulting to Arial.   The other font is an .SVG file and it came with two CSS files that define it (and are referenced on FeesForPDF.aspx). The SVG font works fine, the OTF font is ignored.  

Here's the code of my sub that does the PDF generation.  
	Protected Sub ProcessPDF()

		Dim docWorkingDocument As iTextSharp.text.Document = New iTextSharp.text.Document(iTextSharp.text.PageSize.A4.Rotate(), 25, 25, 25, 25)

		Dim cssFileLocation As String = ConfigurationManager.AppSettings("PDFPrintCSSlocation").ToString()
		Dim strHtml As String
		Dim strCSS As String
		'Dim memStream As New MemoryStream()
		Dim strWriterHTML As New StringWriter()
		Dim strWriterCSS As New StringWriter()

		Server.Execute("FeesForPDF.aspx", strWriterHTML)
		strHtml = strWriterHTML.ToString()
		strWriterHTML.Close()
		strWriterHTML.Dispose()
		Server.Execute(cssFileLocation, 

Open in new window

0
Hi All,
Advance thanks.
 I attached the parent page screen shot which basically shows numbers on blue background. Am showing the dialog window when i hit the numbers.

The issue is in the dialog screen. Am getting gaps between table , th and tbody.

when i click number 1 showing dialog screen shot 1
when click 52 showing dialog screen shot 52..

dialog screen
==========

@model List<Model.Production.PAMReportV3ViewModel>
@{
    ViewBag.Title = "PAMReport";
}

<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/free-jqGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script src="~/Scripts/free-jqGrid/plugins/jquery.tablesorter.pager.js"></script>
<link href="~/Content/themes/redmond/jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />

<style type="text/css">
    .ui-jqgrid {
        font-family: Arial;
    }

    .well {
        padding: 10px;
        background: #d9edf7;
    }

    .ui-jqgrid > .ui-jqgrid-view {
        font-size: 12px;
    }

        .ui-jqgrid > .ui-jqgrid-view button {
            font-size: 10px;
        }

        .ui-jqgrid > .ui-jqgrid-view a {
            color: #428bca;
            font-weight: bolder;
        }

    tr.jqgroup td {
        font-weight: bold !important;
        color: black;
 

Open in new window

0
I'm trying to remember how to add an icon next to a link, for example, I want to add a cart icon next to the text "View My Cart".   This is in the header of a magento website and uses PHP.  I was hoping this can be done with css.  Thanks
0
I have a need to export an HTML div table to csv

I've searched but all the responses talk about exporting table tag data.  Is there a way to do this with div tags?  

I'm happy to use javascript or jquery, but I haven't been able to find it anyway.  If someone has a link that would be great.

again, I don't want to reformat my whole page to use table tags, it's a very complex page and would take a very long time to do.
0
I want to add a css templete to my angular 4 project to give good look and feel.

Please give me complete steps, how to add my free css templete with my angular 4 project.
0
Hi, I need to create web pages with images, videos, animations(flash and swf) and CSS.

I do not know coding.

Can you please suggest a list of open source and also a list of paid WYSIWYG HTML editors that I can use to create HTML pages with minimal coding effort.

Please provide your responses asap.

Thanks for your support.

Warm Regards,
Sriram. K
0
Please how do I write htaccess rewrite for these URLs:

1. http://localhost:8080/reminderapp/user_audio.php?u=xyz
My rewrite rule is this:
RewriteRule ^user/([0-9a-zA-Z]+) ./user_audio.php?u=$1 [NC,L]

Open in new window

But when I apply this rule, all my webpage images and css get messed up. Images doesn't show and the browser URL automatically changed to:
http://localhost:8080/reminderapp/user/bayoojo1/?u=xyz

Open in new window


How can I make this work such that it would produce:
http://localhost:8080/reminderapp/user/xyz

Open in new window

and all my webpage images would show up?

Also please how do I write a rule for this:
http://localhost:8080/reminderapp/postpage.php?u=xyz&id=340&tag=Once

Open in new window

0
Free Tool: Subnet Calculator
LVL 12
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Hello,

I need help centering the copy that is being printed with Slider Revolution's Typewriter add-on (in the hero):
https://proto-dev.laserfiche.com

I am using Multiple/Sequenced lines to display the type, rather than having multiple text objects.

Any ideas?

Thanks!
0
Hello

I am just experimenting with some css transitions and I am moving a div on hover. When you hover on the div it moves to where specififed in css (good) but when you move your mouse from the position it was to start with, hovering over the starting position of the div, the div moves back to its starting position. I have read a few tutorials on css animations but nothing I have seen tells me why this happens. I presume it is some sort of built in default behaviour but I was wondering how I was supposed to know this.  For example, how do I change the following really basic code snippet so that the div moves on its initial hover over but when you hover off it stays where it has been moved to.

The code is just a snippet from a tutorial on css transiations

<!DOCTYPE html>


<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            .box {
                background: lightblue;
                padding: 1rem;
                margin: 4rem;
                text-align: center;
                border-radius: 0.25rem;
                color:#fff;
                border-color: #333;
                width:100px;
                transition: all 3s;
            }
            #linear {
               transition-timing-function: linear; 
            }
             #ease {
               transition-timing-function: ease; 
 

Open in new window

0
I am trying to get my div classes to highlight when the user clicks on one of these buttons: 'search conducted', 'contraband', 'arrest result of stop'.  How do I do this?  Thanks!
Racial-Profiling.html
0
Hi, I need to make the header position of table is to be on fixed and no need to scroll down on the page. But If i give position:fixed on the css for the header row,

table.content-table tbody.content-header {
    position: fixed !important;
content: '';
  width: 100%;
  height: 1em;
  display: inline-block;
  }

Open in new window


I'm getting the below problem
 
1) Its getting merge with the first row of the tbody
2) Then the header row text and their width of the row is getting collapsed.

Please see the jsfiddle link

https://jsfiddle.net/orfgrs23/30/

Please help me on this. Thanks in advance
0
I'm trying to make a website compliant with the Americans with Disabilities Act. We want visually impaired people to be able to use OCR software more effectively with our college websites. Here is the site:
https://devallauth.dcccd.net/Pages/default.aspx
The OCR reads the page fine. Then when someone enters a search with its Google custom search, the site presents the results in an overlay div but the OCR does not read the search results in the overlay div. The OCR continues to read the original page elements. The overlay div gets added by the Google custom search code.
I then tried adding some code (in a test version of the site) to set the focus to the overlay div; but the OCR still didn't read the search results. Then I noticed that when I would hit the tab key or the enter key, the OCR would start reading the data on the overlay div so I added some JavaScript to force a tab keystroke; but that didn't work. I think that if I can just simulate a tab keystroke or an enter keystroke the right way then the OCR would start reading the overlay div. Here is the code I have for setting the focus on the overlay div wrapper and then forcing a keyboard enter press:
				visibleWrapper.setAttribute('tabindex', -1);	
				visibleWrapper.focus();
				keyUp = jQuery.Event("keyup", {keyCode: 13});
				jQuery(visibleWrapper).trigger(keyUp);

Open in new window

Maybe I should trigger the key event from the <body> or the window? Is there a better route? Any suggestions are appreciated. Thanks.
0
Here I have provided the link of Js fiddle https://jsfiddle.net/orfgrs23/8/

While scrolling the page, the header is also getting scrolling down. But I need header needs to be in fixed position. Please provide me suggestion on this.

Thanks in advance
0
Jquery Drag and Drop on Sortable
jquery css jquery-ui jquery-ui-sortable jquery-ui-draggable

Edit: I believe my problem is that when I drag the Field into a fielder it looses the draggable attribute.  But I do not know how to fix it.

I need help getting a drag and drop function to work. I have a form builder that works as follows. You drag and drop a Fieldset from the left list into the "work area". You can drag and drop multiple fieldsets into the work area and then reorder/sort them. Once in the work area, you can drop a "Field" from the bottom left menu into the fieldsets you just dropped into the work area.

I want to be able to move a dropped field from one fieldset to another within the work area. For example, I placed a field in the wrong fieldset and want to move it. However, I cannot move the field once it is dropped into a fieldset. Please help me figure out what I am doing wrong. Fsfiddle link below.

https://jsfiddle.net/humphrey_brent/hdb0epx6/91/

Code:

$(document).ready(function() {
    var fs_count = 0;
  $("#drop-area").droppable({
    accept: '.ui-draggable:not(.draggableField)',
    drop: function(event, ui) {
        fs_count++;
      var clone = $(ui.draggable).clone()
      clone.addClass('.connectedSortable')
      // clone.removeClass('.ui-draggable');
      if (clone.hasClass('dropped')) {
            return false;
        }
        clone.addClass('.connectedSortable').addClass('dropped').attr('id', 'fs_' + fs_count);
      

Open in new window

0
Hi, The checkbox is not getting focus while pressing the Tab keys for the IE and Firefox. But if I press enter or using mouse, the checkbox is working fine. For the Chrome, Its working fine.

IE & Mozzila



Chrome



I'm really don't know there is having problem with either javascript or CSS.

While Inspect the checkbox Id, its having delete-for-reals

<input name="delete-for-reals" class="ember-view ember-text-field text-field component" id="ember7661" type="checkbox">

Open in new window


So I have find the id names on my projects in

CSS file as below:

.delete-for-reals img,
.delete-for-reals input {
  vertical-align: middle;
}
.delete-for-reals .rsuite-message {
  vertical-align: -2px;
}

Open in new window


Hbr file:

      
{{#if view.isReferenced}}
		<p class="delete-for-reals">
			<label for="delete-for-reals">
				{{icon model=view.trashCan size=20}}
				{{view Ember.Checkbox checked=view.deleteMode id="delete-for-reals"}}
				{{#if view.deleteMode}}
					{{message "dialog/destroy/labels/uncheck-to-remove"}}
				{{else}}
					{{message "dialog/destroy/labels/check-to-delete"}}
				{{/if}}
			</label>
		</p>
	{{/if}}

Open in new window


And Dialog.less file;

.delete-for-reals {
	img, input {
		vertical-align: top;
	}
	.rsuite-message {
		vertical-align: -2px;
	}
}

Open in new window


So totally the id available in .css, .hbr and .less files.

Please help me on this. Thanks in advance.
0
I have this JS function to reveal a password field:
<script>
function myFunction() {
    var x = document.getElementById("pw");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
}
</script>

Open in new window


I called the JS via this checkbox under the password field via <input type="checkbox" onclick="myFunction()">Show Password.

I wanted to move the ability to reveal the password to inside the input field so change added this to the input field:
input[type=password], select {
    width: 70%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
font-size: 14px;
background: url(eye.png)  no-repeat right 10px center;

Open in new window


The question I had was how can I run the function now as I used to call the onclick function for the checkbox and I am not sure how to do it for this element?

Thanks in advance!
0
Easily Design & Build Your Next Website
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Hi I was wonder How can I make my scroll bar match the one in the photo.
This is my css for the scroll bar:
display: inline-block;
    width: 200px;
    margin-left: 30px;
    margin-top: 34px;
    overflow-y: scroll;
    height: 800px;

Open in new window

This is my scroll bar now:
my scroll
The scroll I want:
scroll I want

Also my current scroll height depends on the elements in it. Can't I made it as long as the page even if its empty users can scroll?
0
How to insert date from form to database like phpMyAdmin and then show on page while selecting from database?

<td class="text-center"><?php echo date("d/m/Y") ?></td>
1
Actually, I'm having problem with the Internet Explorer (IE Edge and IE11) taking more time to load a main page after login page. When I'm checking the Inspect element, the network page(Ctrl+4) shows all the js, css and image files loading on the page seeming more seconds to run. But its running good with chrome and mozilla. Any suggestion regarding this. Thanks in advance.
0
I'm interested to know what languages are the best to learn or learn more of.  
I have a pretty good understanding of PHP.  I also know some Javascript and am taking a course through Udemy to further understand it.  Right now I have time to learn/study a little.  What would be the best things to know and understand? Node, API, advanced CSS???  What are your thoughts?
0
Hi everyone,

I'm unable to set fixed margin-top and margin-bottom for all pages.
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate>
	var insurance= new GlideRecord("u_insurance");
    insurance.query();
	insurance.next();
	</g:evaluate>
<style>
	img {
	margin-left:auto;
	}
	
	p, b, td{
	 margin-top:15px;
	font-family: arial;
	font-size:18px;
	}
	
	table {
	font-family: arial, sans-serif;
    border-collapse: #000000;
    width: 100%;
}
	
	.head_black {
	background-color:#666666 !important;
	color:white;
	text-align:left;
	font-size:20px;
}

	.head_black_center{
	background-color:#666666 !important;
	color:white;
	text-align:center;
	font-size:20px;
}
.floatLeft { width: 50%; float: left; }
.floatRight {width: 49%; float: right; }
.container { overflow: hidden; }
	
	.as {
    
	border-top: 0px solid;
	border-bottom: 0px solid;
}
	
	button {
	align:center;
	margin-left:50%
	}
	
	
.fixed-header{
        width: 100%;
        position: fixed;
	    top: 0;
        
        
    }
	
	.fixed-footer{
        width: 100%;
        position: fixed;
	    bottom: 0;
        
        
    }
	
	#content {
    margin-top: 50px; // however many pixels you need
}

</style>

	
<div class="fixed-header"> <img src="ICICI%20image.png" width="259" height="61" style="visibility: visible; display: block;"/></div>
<div class="fixed-footer"><img src="WCMC.png" width="527" height="189" 

Open in new window

0
Hi everyone,

I'm unable to set fixed margin-top and margin-bottom for all pages.
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate>
	var insurance= new GlideRecord("u_insurance");
    insurance.query();
	insurance.next();
	</g:evaluate>
<style>
	img {
	margin-left:auto;
	}
	
	p, b, td{
	 margin-top:15px;
	font-family: arial;
	font-size:18px;
	}
	
	table {
	font-family: arial, sans-serif;
    border-collapse: #000000;
    width: 100%;
}
	
	.head_black {
	background-color:#666666 !important;
	color:white;
	text-align:left;
	font-size:20px;
}

	.head_black_center{
	background-color:#666666 !important;
	color:white;
	text-align:center;
	font-size:20px;
}
.floatLeft { width: 50%; float: left; }
.floatRight {width: 49%; float: right; }
.container { overflow: hidden; }
	
	.as {
    
	border-top: 0px solid;
	border-bottom: 0px solid;
}
	
	button {
	align:center;
	margin-left:50%
	}
	
	
.fixed-header{
        width: 100%;
        position: fixed;
	    top: 0;
        
        
    }
	
	.fixed-footer{
        width: 100%;
        position: fixed;
	    bottom: 0;
        
        
    }
	
	#content {
    margin-top: 50px; // however many pixels you need
}

</style>

	
<div class="fixed-header"> <img src="ICICI%20image.png" width="259" height="61" style="visibility: visible; display: block;"/></div>
<div class="fixed-footer"><img src="WCMC.png" width="527" height="189" 

Open in new window

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.