CSS

40K

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

Hi, I have a dynamic CF page with  printout tables. Problem is with printing. Table printout can be split depending on the dynamic content. I need to force a new page for each table output. Is there a CF or html string I can use to force this break

many thanks
0
Independent Software Vendors: We Want Your Opinion
Independent Software Vendors: 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!

Hey folks. Web design and css is not my day job, more of a side hobby. That said I've been working iteratively on my site for a while now, and have worked myself into a corner when trying to make the site mobile friendly.

Overall I've had pretty good luck taking a two-column dynamic layout I tracked down a few years back and adapting it to mobile. I achieved the dynamic sizing for web with some nested divs that by necessity have a greater width than the window and need to be hidden, though.

On mobile, this only works if I assign overflow-x:hidden; to html,body. If I follow proper procedure and assign it, or the website scrolling setting, to document.body instead (or any other combination therein), the smooth scrolling is broken. I like the smooth scrolling, so even though it cost me the function of tapping the time bar to move to the top of the page, I went with it. It worked, right?

I accepted this compromise until I started to go further and taking my sidebar menus and try to make them fixed position nav menus for mobile. Even that worked fine until I created a logobar that would pop in upon scrolling away from the top of the page. The same compromise that broke "tap to top" has broken any JQuery scrollTop functions I tried to include, on mobile, using a simple enough technique I found here.

Now I have the choice, make any change at all to this css and lose smooth scrolling and gain my logobar and tap to top: as seen in test page 1
0
Is it possible to put an anchor on a html page, and then have a div that is on the same vertical position but locked to the far left of the screen, the idea is to have some icons that are to the left but the move as the user scrolls?
0
I would like to move a div to being relative top: -100px and then lock it to the left with absolute left 20px is it possible to use relative in the y axis and absolute in the x axis?
0
Hi,
Further to this
https://www.experts-exchange.com/questions/29042667/Add-button.html?anchor=a42220705¬ificationFollowed=192653361#a42220705

I adjust the column name in Javascript but the problem persists (I cannot delete the record), after re-deployment.
0
I have some customised thumnails on a page which I would like to link to a specific nexgen gallery.
How can I create a link from my image, or text to the gallery?

I hope someone can help me?
Thanks
0
How do I place some social share icons that will float above and outside everything on the page, stay hard left aligned but horizontally level with a specific item in the webpage.

I have the following code:
<div style="  position: relative;    top: 100px;   left: 30; z-index: 1;">
<!-- Twitter (url, text, @mention) -->
<a href="http://twitter.com/share?url=<URL>&text=<TEXT>via=<USERNAME>"><img src="tw-circle.png" border="0" height="36" width="36"></a><!-- Google Plus (url) 
<a href="https://plus.google.com/share?url=<URL>">    Google Plus</a>--><!-- Facebook (url) -->
<a href="http://www.facebook.com/sharer/sharer.php?u=<URL>"><img src="fb-circle.png" border="0"  height="36" width="36"><!-- Email (subject, body) --><a href="mailto:?subject=<SUBJECT>&body=<BODY>"><img src="tw-circle.png" border="0"  height="36" width="36"></a>
</div>

Open in new window


The problem is that the vertical position I want to lock it to being moving relative is inside a div which means that if I put this code in there the it is clipped and not visible on the left.

What I'm looking for is  a way to say put this code above and outside absolutely everything on the page but move relative to a point on the page.

Thanks
0
I have an ASP.Net app that I am using a PopupModal with a panel and and iframe in the panel with an .aspx webform in the iframe. The aspx will only show the div(1 of 3) that the user selects and everything works fine in FF but when I switch to Chrome the height and width become distorted.  Is there something that I can do to set the height( my biggest problem) and width to fit in the iframe correctly?
0
Take a look at the screenshot below and notice how the word "hello" is hanging off to the right hand side...

screenshot
It only occurs in Landscape mode. Otherwise, it's centered beneath the rest of the content like you would expect of a footer.

It will look OK when I just have the word "hello" in place. As soon as introduce a line break, it gets kicked off to the side.

Why? And how can I fix it?

Here's my code:

<html>
<head>
<title>NEX Transport Employees - EZOnlineRegistration</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
	html, body {
		margin: 0px;
		padding:0px;
		font: 14px sans-serif;
		height:100%;
		background:#eaad02;
		background: -webkit-linear-gradient(#eaad02, #ffe39a); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#eaad02, #ffe39a); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#eaad02, #ffe39a); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#eaad02, #ffe39a);
		min-height: 100%;  /* Fallback for vh unit */
		min-height: 100vh; 
	}

	h4 {
		margin: 10px 0;
		color: #1823a0;
	}
	
	.container {
		height:100%;
		display:flex;
		justify-content: center;
		align-items: center;
		flex-flow:column wrap;
		flex-direction:column;
	}
	
	.content {
		max-width:625px; 
		border:1px solid #7b5b01;
		-moz-border-radius: 14px 14px 14px 14px; 
		border-radius: 14px 14px 14px 14px; 
		box-shadow:7px 7px 10px #7b5b01;
		display:flex;
		

Open in new window

0
http://dev.techgardens.com/home/  - I don't think you should have to log in to view, if so please let me know.

the slide show at the top is admittedly roughed in. What I need to do is have the second slide come in from the right, like:
slide-in.JPG
I have added to slide description and slide image in the custom css for each slide and the slide module: animation-name:fadeInRight;

But it is still just doing the standard fade up. Any suggestions? Maybe there's a plug-in? Thanks.
It's DIVI theme 2.7.9 and WordPress 4.8.
0
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!

Greetings experts,
We have a very long form. So we decided to break up the contents into manageable sections by using the multi step form with progress bar approach used in the link below:

http://www.jqueryscript.net/form/Creating-A-Modern-Multi-Step-Form-with-jQuery-CSS3.html

Prior to using this link, we were able to navigate to Next /Preview/Previous pages using the MultiView control.

However, since implementing the approach on the link above, we are unable to see the Next link.

Any ideas where the mix up may have occurred?

Our primary interest is the progress bar. If we could use it along with the MultiView control alone, that would be great.

Any assistance is greatly appreciated.

Below is the code. I tried to show only relevant to code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Freeport.aspx.cs" Inherits="Freeport" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Aircraft Personal Property Tax Return</title>
  <link  type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
  <link href="styles/boxformats.css" rel="stylesheet" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
  <script src="js/jquery.easing.min.js" type="text/javascript"></script> 
  

Open in new window

0
I have a form from a vendor which has too many fields on it for my users. I would like to hide specific fields and labels from the form to make it easier to use. I initially though to hide all of the labels with CSS and then only show the labels I wanted with Javascript (using either getElementsByClassName or querySelectorAll) but in this case its just too slow and causes a 1 minute delay in showing the labels I need.

Below is a portion of the form html code. I am looking to hide specific <p> tags (Short Description & Image are examples) with the css class of stec-layout-event-create-form-inner-label. The input fields I can take care of on my own but the <p> tags are proving difficult. ANy help would be appreciated.

<div class="stec-layout-event-create-form-inner stec-layout-event-inner">
	<form>
		<p class="stec-layout-event-create-form-inner-label stec-layout-event-title2-fontandcolor">
		Title </p>
		<input class="stec-layout-event-input-fontandcolor" name="summary" placeholder="Event Title" required="required" type="text" value="" />
		<p class="stec-layout-event-create-form-inner-label stec-layout-event-title2-fontandcolor">
		Description (optional) </p>
		<textarea class="stec-layout-event-input-fontandcolor" name="description" placeholder="Event Description"></textarea>
		<p class="stec-layout-event-create-form-inner-label stec-layout-event-title2-fontandcolor">
		Short Description (optional) </p>
		<input class="stec-layout-event-input-fontandcolor" 

Open in new window

0
I have been asked to update a site and its using a the Genesis theme and I cannot for the life of me find where they have added in the internal and external products.
There is NOWHERE, repeat NOWHERE I can see where this content could be hiding.
I have checked widgets, plugins for products, the theme code....its all written in a bizarre way
Can anyone help me solve this issue.

In addition I would like to make this header and navigation sticky, but of course the header.php file doesn't lend itself to presenting the banner, header and nav in one div so I just don't know how to develop that.
Can anyone help?
A
0
Hello, with my code below I'm attempting to center my form in a div, when I do so the glyphicons stay left aligned and do not stay with the input control which do center align. How do I get this to work correctly?

 <div class="text-center">
                    <form action="" id="loginForm">
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input class="form-control" type="text" name='username' placeholder="username" />
                        </div>
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input class="form-control" type="password" name='password' placeholder="password" />
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-def">Login</button>
                        </div>
                        <input hidden id="hdnUserEnviroment" />
                    </form>
                </div>

Open in new window

0
Hi you guys my carrousel do not fit to movil devices,
any idea please you guys,
 <div class="container">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <div class="c-wrapper">
                    <div id="carousel-example-generic" class="carousel slide">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>
                         
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="Images/carrousel11.jpg" alt="" style="width:100%">
                            </div>
                            <div class="item">
                                <img src="Images/carrousel5.jpg" alt="" style="width:100%">
                           </div>
                            <div class="item">
                                <img src="Images/carrousel3.jpg" alt="" style="width:100%">
                            </div>
                        </div>

                        <!-- Controls -->
                     

Open in new window

0
<asp:GridView ID="GridView1" runat="server" HeaderStyle-CssClass="GridHeader" HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Middle" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
                        AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None">
                       
                        <EditRowStyle BackColor="#999999" />
                        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <HeaderStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True"></HeaderStyle>
                        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" Font-Names="Calibri" />
                        <AlternatingRowStyle BackColor="White" ForeColor="#284775" Font-Names="Calibri" />
                        <Columns>
                            <asp:BoundField HeaderText="Sevak ID" DataField="Sevak ID" ItemStyle-Width="100" >
                                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                <ItemStyle Width="100px" HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>
                            </asp:BoundField>
                            <asp:BoundField HeaderText="Sevak Name" DataField="Sevak Name" ItemStyle-Width="250" >
                                <HeaderStyle …
0
Experts,

I am new to JS and jQuery. I have learned that you need jQuery in the code below to run a modal button.

For the most part, the below code works. What I am trying to accomplish is when you select the set of three @text modal buttons I would like for the end user to see the recipient field filled with testuser@cbatest.com and message field blank. What ultimately I want is for when the end-user hits submit, it actually sends the email with the above test account to the recpeint field and the message the end-user puts.

Can you show me how this is done?

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">

<script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
  

<style type="text/css">
    * {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 

Open in new window

0
I have the CSS code on the bottom of this question. I don't have access to the html so I can't change it.
When I run the code I get a table which is similar to below . Title is coming from the html and I don't have control on it. I want Item 4 to be same level as the Item 1. How can I do this using only CSS?

Title 1      Item 4
Item 1
Item 2
Item 3




/* #region region1 */
.ffregion1 {
  padding: 0;
float: left;
width:20%

   -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
      -moz-column-fill: auto;
      column-fill: auto;
      max-height: 100vh;
 
 
}
.ffregion1.ffwidth12 {
  margin-left: 0%;
  margin-right: 0%;
  width: 100%;
  margin-top: 10%;
}
.ffregion1 ul {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  list-style: none;
}
.ffregion1 ul li {
  margin: 8px 0 0 0;
}
.ffregion1 ul li:first-child {
  margin: 0;
}
.ffregion1 ul li.ffindent1 {
  margin: 2px 0 0 30px;
}
.ffregion1 ul li:before {
  float: left;
  width: 0;
  white-space: nowrap;
}
.ffregion1 ul span:first-child {
  padding-right: 0.33em;
}
.ffregion1 ul span:first-child:after {
  content: leader('.  ');
}
.ffregion1 ul span + span {
  float: right;
  padding-left: 0.33em;
}
/* #endregion */
0
I have been working with Adobe Muse theme - "Club Hero".  When I go to upload the project to WordPress, I receive the following error.
"Error uploading file master_a-master.css. Click Resume to try again. If this problem persists, try again later. [Failure initializing sftp session: Unable to startup channel]. I have installed MuseXpress on my WordPress site. When I look for the ".css file" I can't locate it
0
Announcing the Most Valuable Experts of 2016
LVL 6
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Hi Experts

Need help making this link display 4 columns with smaller "portrait images", any ideas on how I can do so by editing css/js

http://www.stockimagesafrica.com/downloads/category/southern-africa/

Stuck on this, and need smaller portrait images..

Thanks in advance
0
Hi,
i am trying to design responsive tabs  for showing registration form using html controls. then how can i design it or make it responsive
0
Google use beautiful fonts and colors. Does Google have an option to download and use its fonts and colors on personal websites?
0
Hi,
 
Using Nintex forms (v2.8.1.0) standard edition in SharePoint 2013 Enterprise - on prem.
 
I am running into difficulty trying to add a page break via CSS in my Nintex form before the Extra Info section (see Capture_Nintex_Form.png). I have specified a CSS class called pageBreak3 for a panel in my Nintex form (see panel.png). Whenever I select Print preview, the CSS does take affect. Please see my CSS below. I know page breaks are possible in my installed version of Chrome (v44) as I carried out the following test:
 
1) Created a simple HTML page and
2) applied a page break via CSS i.e. using @media print -> page break always.
 
Nintex Forms Enterprise has page break functionality out of the box, but that is not an option for us.

Any help is much appreciated.

CSS I am using:

/*This script changes the layout of the printed page */
@media print
{
    /*Hides the SharePoint blue nav bar at top of page and Content Type item details at end of form */
    #suiteBar, .nf-form-footer
    {
        display: none;
    }

    .pageBreak3
    {
        page-break-before: always;
    }
}
Panel.PNG
HTML.PNG
Capture_Nintex_Form.PNG
0
I can not understand why the "list-group panel" does not line up with the text on the first row.  I assumed the grid design would be very easy to implement, I am finding it more challenging than I thought it would be.  Any help would be appreciated.

Please reference https://jsfiddle.net/Spleendrivel/h69gtxzy/   (it will take awhile to load because of the js and css bootstrap code included.)

I have tried adjusting the size of the column in line 26 and 56
0
Hi, I validated my html it says no errors.  

Here is my message I got : Document checking completed. No errors or warnings to show.
but still no h2 tags??

I validated my css and it says this: Error: Non-space characters found without seeing a doctype first. Expected e.g. <!DOCTYPE html>.
From line 1, column 1; to line 1, column 6
body {↩    b
Error: Element head is missing a required instance of child element title.
From line 1, column 1; to line 1, column 6
body {↩    b
Content model for element head:
If the document is an iframe srcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content, of which no more than one is a title element and no more than one is a base element.
Otherwise: One or more elements of metadata content, of which exactly one is a title element and no more than one is a base element.

Here is the html and css:
Can you check it?  Thanks...I asked on stackflow and noone knew.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Travel With Us</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet">

    <link href="style.css" rel="stylesheet" type="text/css">

</head>
<body>
  <header>
     <div id="header-text">
        <h1>Travel With Us</h1>
        <h2>Travel to the most fun and exciting…
0

CSS

40K

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.