Articles & Videos



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

Dear experts,
I am facing a request from a customer, who maintains about 500 product sheets to different products. So far all the data were kept in Word and PDF files were made manually. Th maintenance was a nightmare and publishing online was nearly impossible.

Now the product sheets will be saved in a database / XML so that with help of some CSS libraries/frameworks (bootstrap etc.) site nice layout can be achieved while keeping the simplicity of editing content in a database and displaying the sheets online. For better reading and design reasons the sheets will contain TWO columns on normal screen and paper and 1 column only on mobile devices. This all is doable. Somehow.

However the next requirement is to be able to generate PDFs out of the same source (database/xml) and the PDF shall, of course, keep the layout for DIN A4 paper - header, footer, two columns, which flow always on first page from left column to right column and then on next pages again from left to right column. Like when you load a text in indesign for example. So that the PDFs when printed can be red.

Unfortunately the HTML page does not respect the fixed length of a DIN A4 paper and when showing two columns, they flow till the bottom of the page "infinitely".  When I tried to play with bootstrap for example, I was able to accomplish the HTML part, but then I was unable to either print it to PDF or even while using some PDF library to generate A4 standalone pages.

I hope I am expressing …
Technology Partners: We Want Your Opinion!
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Is it possible to create a search bar like the one shown attached? I'm wanting it to look like one bar but actually have 2 input fields. If this is possible, can someone please draft out the html and css for this? I've tried every possible option to no avail.

Thanks so much for your help!
My Css is not applying . Here is the codes from code behind!!!

        //Get list of all products in DB
        EventDetail eventDetail = new EventDetail();
        List<EventDetail> details = eventDetail.getAllEventDetail();

        //Make sure events exist in database
        if (details != null)
            //Create a new panel with an image button and 2 labels for each event
            foreach (EventDetail detail in details)
                Panel eventPanel = new Panel();
                ImageButton imageButton = new ImageButton();
                Label lblName = new Label();
                Label lblPrice = new Label();

                //set childcontrols' properties
                imageButton.ImageUrl = "~/EventImages/Events/" + detail.eventImage;
                imageButton.CssClass = "eventImage";
                imageButton.PostBackUrl = "Detail.aspx?id=" + detail.EventDetail_ID;

                lblName.Text = detail.eventDetailName;
                lblName.CssClass = "eventName";

                lblPrice.Text = "$ " + detail.eventPrice;
                lblPrice.CssClass = "eventPrice";
                //Add child controls to panel
                eventPanel.Controls.Add(new Literal { Text = "<br />" });
                eventPanel.Controls.Add(new Literal { Text = "<br …
Am am looking for either a library or some code to use that would allow me to add code snippets to my html pages with syntax highlighting.

What options do I have that will work with or on top of Bootstrap 3?
WP Twenty Twelve theme

When page displays on a mobile device, a "MENU" button appears behind pages' menu items.
When page displays on larger display (>800 x 600, for insance) "MENU" button does not appear.
How can this "MENU" button be hidden on mobile device displays so only menu items appear?

Many Thanks ~ Jacob
I would like some help with trying to resolve why my CSS is not correctly sizing an element of my site.  

Please go to this page:

If you shrink the screen size down to  a small size (i.e. less than 500) it puts the bottom gray box into one column which is appropriate. Then as you increase the screen size the width of the gray box sizes appropriately until you get to 1200px. At that time, the gray box jumps down to a smaller size and stays that way.

I'm sure it is a simple piece of CSS code or a <div> that needs to be added. But I'm having trouble finding it and would like some help.

The attached video shows this on my computer.

Thank you for helping me solve this.
Hi, This has been bugging me for a long time and I can't seem to solve it.
There is a slider at the bottom of this page: http://2017.lucidityfestival.com. At different screen resolutions, I can see the hidden logos peeking up underneath the slider. I just can't figure out which div is causing the problem.
I want to reduce the height of input fields. So, I have created a css class

.input-field {
  height: 20px

Open in new window

This works fine for text fields and also reduces the height of drop downs. However, in drop down the selection text is cut. How can I ensure that the complete text inside the drop down is visible

Here is the fiddle - https://jsfiddle.net/zvn3wknj/

The selection text 'Approve' and 'Reject' is cut and not displayed correctly.
I have a sidebar that converts to a tab for smaller screen sizes. This is mostly done with css, using JavaScript to open and close the tab. When the tab is open, I've made it so that the user can click anywhere on the screen to close it.

My resize() function will convert the tab back to a sidebar, but, if the user clicked on the tab at the smaller size, then enlarges their browser, clicking anywhere on the screen will make the sidebar disappear.

Basically, all I need to be able to do is to remove the onclick I've set up here, something like
    if($(window).width() > 751
        {remove the event set up in $(document).click(function(e)}

Open in new window

I've tried using the jQuery ".off" function; stop propagation - nothing seems to work. Even with the right syntax, I'm not sure .off will do the trick, which. I think, may turn off any event clicks which, of course, I don't want to do. Things just need to return to normal when screen size is greater than 751.

    <script type="text/javascript">
                if($('#Sidebar1').css('margin-left') != '-300px')  // The Sidebar/Tab is open
                    $('#Sidebar1').css('margin-left', '-300px');  // Hide the Sidebar (only Tab is exposed)
                    $('#Sidebar1').css('margin-left', '0px');  // Open the 

Open in new window

I am using centric pro theme on genesis platform.  On home page, there is Home 2 widget where I can put a featured page and can show featured image.  

The size options offered are not ideal.  The one we are using now is pretty large at 960x700.  Is there a way we can modify it so there is a smaller size option?  The next size down is 400x300 which is too small.  

screenshot of widget

Beta site
Free Tool: Path Explorer
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

The navigation on a CELL phone is two lines full width.  This gets confusing because some buttons have drop downs.  I like it full width for other screen sizes but not the smallest size.  How do I change navigation to float left for smallest screen sizes?

beta site

 I tried this but it didn't work.

@media only screen and (max-width: 320px) {
.genesis-nav-menu li a {

Open in new window

How do I change hamburger icon color?  Right now it is set to white and disappears because header is white.
I am trying to get the footer credits a:hover link "Nsite Designs" to turn another color other than white.  When I make a change to css, it changes the colors in the tan box immediately above the footer.  I can't seem to single out just this link.  I tried using inspector did not have any luck with that.

I am creating a form in Bootstrap 3. Would like to have the input fields and label surrounding them to appear smaller than what bootstrap provides by default.

In order to do so, I have created a couple of css classes

.input-field {
  height: 20px

.label-size {
  font-size: 10px;
  line-height: 1.2;

Open in new window

however, this has messed up the alignment for checkboxes. The label for each checkbox does not appear properly aligned with the checkbox and also the label for the field (<label> tag) appears mis aligned.

Here is the fiddle - https://jsfiddle.net/yyky0ms1/1/

How can I correct this?
Further to this

and I have ImageHandler.cs like
using System;
using System.IO;
using System.IO.Compression;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Data.OleDb;
using System.Xml;
using System.Globalization;
using System.Collections.Generic;
using System.Drawing;
using System.Text; // This was needed to make ASCIIEncoding function
using System.Security.Cryptography; // This was needed to make everything related to MD5 function
using System.Web.Services;

namespace Own_rec
    public class ImageHandler : IHttpHandler
        /// <summary>
        /// You will need to configure this handler in the Web.config file of your 
        /// web and register it with IIS before being able to use it. For more information
        /// see the following link: http://go.microsoft.com/?linkid=8101007
        /// </summary>
        public void ProcessRequest(HttpContext context)
            //string userId = string.Empty;
            int userId = 0;
            //-- get the ID from query string you get from <img src tag
            if (null != 

Open in new window

Hello All;

Either on resize with user controller the browser window.
Or, on resize, on smaller monitors.
I would like to have the layout to have one width at over 1119px
And another, under 1118px.

This is my example. (i just threw this together, to mimic the behavior I am having with the actual site.
A good majority of the code is what is used on the site. Just names of divs have changed.)

When you make the window smaller, the sidebar will jump to underneath the main content panel.
This, cannot, happen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
        <meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>Untitled Document</title>
html {
  height: 100%;
  box-sizing: border-box;

html, body {
	height: 100%;
	clear: both;
	display: table;
	width: 100%;
	height: 100%;
	min-height: 100%;
	position: relative;
	margin: 0 auto;
	border:1px double #000;
	padding-top: 55px;
	margin:70px 10px 0 0;
	display: inline-block;
	display: inline-block;
	vertical-align: top;

@media (max-width:1920px), (min-width:1119px) {

Open in new window

I am using Centric theme from Studio Press. I was able to replace blue colored box with an image of a lady with arms outstretched on my home page. The problem is that image of a lady is on every page!  How do I remove that master large image from interior pages?  This site for zurix did it but I can't figure out how.

Default theme from Studio Press

My Beta site

Goal site
Using these codes

        public static List<HouseData> GetHouseList()
            List<HouseData> houseList = new List<HouseData>();
            using (SqlConnection sqlConn = new SqlConnection(ConfigurationManager.ConnectionStrings["Mssqlconn3"].ConnectionString))
                using (SqlCommand sqlCmd = new SqlCommand("SELECT house_name, address1, address2, price, price_curr, raised_by_user_id FROM house_tab", sqlConn))
                    sqlCmd.CommandType = CommandType.Text;
                    SqlDataAdapter sqlAd = new SqlDataAdapter(sqlCmd);
                    DataTable sqlDt = new DataTable();
                    if (null != sqlDt)
                        houseList = sqlDt
                                        .Select(dataRow => new HouseData
                                            house_name = dataRow.Field<string>("house_name"),
                                            address1 = dataRow.Field<string>("address1"),
                                            address2 = dataRow.Field<string>("address2"),
                                            price = dataRow.Field<decimal>("price"),
                                            price_curr = 

Open in new window

Dear Experts,
I have been working with Wordpress, but ran into something I cannot figure out and need help.
Here is what I want to do.  I have a website that has 5 menus, which the 5th is "Member Login".  When you click on Member Login, I would like to bring up a webpage, which has Caspio Authentication functions.  ( It is a basic login form but sends information to Caspio database ).
Once the user logs in, I would like to bring up another set of pages with different menu than the top primary menu.
I have been searching on Internet, but found no answer.  Is this something that I cannot do easily, unless I write code for?
Does Wordpress not allow 2 sets of menus within the same website?
Please advise.
Free Tool: Site Down Detector
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Hi - I inherited this WordPress website and there is a strange issue happening with the small, square slider widgets on the lower-right  section of the home page, to the right of the featured restaurant editorials.

All the images are getting the right and bottom cropped by ~8px if I had to guess.

Is there a CSS rule that could be leading to this? Or does anyone have a guess what may be causing this? I can play with CSS, but my attempts to isolate via Firebug were unsuccessful - I couldn't seem to find anything obvious.

Thanks for any ideas.
Im trying to make my Master page a little more presentable. I have an app that I built and we have named it EAST(its an acronym for Expense Account Submission Tracking). I want to display the E, A, S and T in caps(id like it in some type of block font in gray, and the small letters in black, but I will figure that part out).
So at the top of my page I had the following:
        <div id="header" >
            <div id="title" >
			        <asp:HyperLink ID="HyperLink1" NavigateUrl="UserLogin.aspx" ForeColor="White" runat="server">CRIB</asp:HyperLink>
                <div style="width:auto; height: 45px;">  --HERES MY ISSUE
            <br />
            <div style="float:right;padding-right:125px;padding-top:10px">
                <asp:UpdatePanel ID="upUserLabel" runat="server" UpdateMode="Conditional">
                        <asp:Label ID="lblUser" runat="server" ForeColor="White" Width="260px" Font-Bold="true" style="margin-right: 20px;text-align:right;"></asp:Label>
                        <asp:LinkButton ID="lnkSignOut" runat="server" Text="Sign Out" ForeColor="White" PostBackUrl="~/UserLogin.aspx" OnClick="lnkSignOut_Click" Visible="true"  ></asp:LinkButton>

Open in new window

RE: https://srothan.com/

I'm attempting to change the font color and size of the "Tagline" for this site.
However, the following in the Twenty Twelve child theme is not having an effect.
(I would also like to control margins above and below tagline.)
Could you explain how this change is not recognized?

.site-header .site-description h2{
     color: #515151;
     font-size: 24px;

I would appreciate WordPress illumination here!

Thank You, Jacob
qwqw.png  I was making up a layout and got stucked while making up this image. What I have done till now is that I have inserted a blue rectangle for background but confused how to get that profile picture and user name and followers onto that rectangle. Any help would be appreciated.
Hello ~

RE: https://srothan.com/

Using WP Twenty Twelve theme.
Menu items (as a group) do not appear centered on page.
Tried recreating the menu to no avail.
'Would really appreciate some illumination here.

Many Thanks ~ Jacob

I have created a child theme, with a if structure that dynamically loads different headers based on the parent ID of the current page.  Those headers load in secondary menu structures correctly, but they come through as basic as can be (just plain ul/li's).  I am using this theme (for reference):
And would like it to come through with the same CSS classes, etc, so that the styling looks consistent.  Or if that isn't possible, understand how they are dynamically injecting the classes (ie. all the li's have classes attached to them), so that I can try to manually recreate this and style it on my own.

Thank you,





Articles & Videos



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.