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 am going through the process of trying to optimise various websites to improve speed. I am testing on sites like GT Metrix, etc.

The main issue I have is regarding combining CSS & JS into one file and minifying. I understand what I need to do, but it creates a nightmare for me as far as ongoing future development and updates in concerned. i.e. My development site has them in separate files for ease of understand and updating, then it makes it quite time consuming each time as I need to re-combine each time a small update has been done to one of these files. Some of my sites have 15+ separate CSS or JS files.

I would be interested to see how everyone else deals with this process. Is there an easy automated way to get several css & js files into one file?

The sites are generally bespoke sites so not looking for Wordpress plugins.
0
Introducing Cloud Class® training courses
LVL 12
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

Hello Experts!

Something is preventing checkbox and radio to display when this part of my Bootstrap is added. When I remove this part, those inputs show with default style.

Can you help me fix it?

See attached, please.
bootstrap_bug.txt
0
Hi everybody.
I really don't understand how to change the overlay background color in this template: https://colorlib.com/preview/#amado.
I mean: if you hover the mouse on products, a dark semi-transparent overlay appears. The template uses a scss file. In the index a fiola called style.css is linked, but that file is empty and with developer tools I see all styles are set in  style.scss, but I'm not able to find the value that I have to change. I confess I'm totally new to sass, scss.
I post here the scss file:
@import 'theme_color';
@import 'variables';
@import 'mixin';
@import 'responsive';

/* [Master Stylesheet v-1.0.0] */

/* :: :: 1.0 Import Fonts */

@font-face {
    font-family: 'helveticaneuebold';
    src: url('../fonts/helvetica_neu_bold-webfont.woff2') format('woff2'),
    url('../fonts/helvetica_neu_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'helveticaneuemedium';
    src: url('../fonts/helveticaneue_medium-webfont.woff2') format('woff2'),
    url('../fonts/helveticaneue_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* :: 2.0 Import All CSS */

@import '../css/bootstrap.min.css';
@import '../css/owl.carousel.css';
@import '../css/animate.css';
@import '../css/magnific-popup.css';
@import '../css/jquery-ui.min.css';
@import '../css/nice-select.css';
@import '../css/font-awesome.min.css';

Open in new window

0
I'm using a wordpress theme and would like to move the site title line up on the line with the logo and menu. Is there an easy way to do this?
0
From some help here on EE I managed to get a 2 tier accordion working but now I need a third level. The problem is that every 2nd level has the same info for it's third level instead of the actual data associated with the second level.

		$this->db->query("SELECT `edition`, `serial`, `rep`, `prod_name`, `reg_price`, `sale_price`, `end_date`, `purchased`, `first_name`, `last_name`, `voucher_id`, `sp_name`
		FROM `vouchers` AS `v`
		INNER JOIN `bb_products` as `bbp` ON bbp.`prod_id` = v.`product_id`
		INNER JOIN `service_providers` AS `sp` ON sp.`service_provider_id` = v.`sp_id`
		LEFT JOIN `bb_users` as `bbu` ON bbu.`uid` = v.`customer_id`
		WHERE v.`rep` = :sp_id 
		GROUP BY `sp_name`, `prod_name`
		ORDER BY `sp_name`, `prod_name`");
		$this->db->bind(":sp_id", $_SESSION['sp_id']);
		$results = $this->db->resultSet();
		$groupedData = [];

    foreach ($results as $record):

        $key = $record->sp_name;
        $groupedData[$key]['header'] = $record;
		$groupedData[$key]['children'][] = $record;
		$groupedData[$key]['grandchildren'][] = $record;

    endforeach;

		return $groupedData;
		
		return $results;

Open in new window



<div class="container">
	<div class="panel-group" id="accordion">
		<?php foreach($data['voucher_history'] as $group): ?>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#<?php echo $group['header']->sp_name; ?>">
			

Open in new window

0
I'm trying to get the middle drop-down on my webpage to display like the other 2. For some reason, the middle drop-down looks different,  How could I get it to look like the other 2?

https://cretecarrier.com/
0
I am using bootstrap 4. My bottom footer I am having an issue making it sticky at the bottom.

CSS:
  .footer {
    position: relative;
    bottom: 0;
    height: 60px;
    width: 100%;
    padding-top:20px;
    background-color: #214761;
    color: #FFFFFF;
  }

Open in new window


If I set the position to absolute the footer is at the bottom but longer content will go past the footer.

My page starts with a <nav> ... </nav> followed by a <div class="container"> ... content ... </div> then followed by <footer> ... </footer>
0
I am adding pages to an existing web site. The current site is using it's own CSS. I need to make a checkout form, and I want to use Bootstrap.

When I add Bootstrap, it breaks all kinds of stuff. How can I use Bootstrap on this new page without breaking existing CSS?

Thanks!
0
I have the following xml input and I want to iterate through each Flight grouped by OanD

<root>
	<Data>
		<Flight OanD="ODC1" CnxxIndicator="Y">
			<Depart>
				<CityCode>MUC</CityCode>
			</Depart>
			<Arrive>
				<CityCode>TXL</CityCode>
			</Arrive>
			<Carrier>
				<AirlineCode>TT</AirlineCode>
				<FlightNumber>2036</FlightNumber>
			</Carrier>
		</Flight>
		<Flight OanD="ODC1">
			<Depart>
				<CityCode>TXL</CityCode>
			</Depart>
			<Arrive>
				<CityCode>FRA</CityCode>
			</Arrive>
			<Carrier>
				<AirlineCode>TT</AirlineCode>
				<FlightNumber>187</FlightNumber>
			</Carrier>
		</Flight>
		<Flight OanD="ODC2">
			<Depart>
				<CityCode>FRA</CityCode>
			</Depart>
			<Arrive>
				<CityCode>MUC</CityCode>
			</Arrive>
			<Carrier>
				<AirlineCode>TT</AirlineCode>
				<FlightNumber>94</FlightNumber>
			</Carrier>
		</Flight>
	</Data>
</root>

Open in new window



The desired output xml :

<Response>
	<OriginDestination>
		<Flight OanD="ODC1" CnxxIndicator="Y">
			<AirlineCode>TT</AirlineCode>
			<FlightNumber>2036</FlightNumber>
			<Departure>
				<AirportCode>MUC</AirportCode>
			</Departure>
			<Arrival>
				<AirportCode>TXL</AirportCode>
			</Arrival>
		</Flight>
		<Flight OanD="ODC1">
			<AirlineCode>TT</AirlineCode>
			<FlightNumber>187</FlightNumber>
			<Departure>
				<AirportCode>TXL</AirportCode>
			</Departure>
			<Arrival>
				<AirportCode>FRA</AirportCode>
			</Arrival>
		</Flight>
	</OriginDestination>
	<OriginDestination>
		<Flight OanD="ODC2">
			<AirlineCode>TT</AirlineCode>
			<FlightNumber>94</FlightNumber>
			<Departure>
				<AirportCode>FRA</AirportCode>
			</Departure>
			<Arrival>
				<AirportCode>MUC</AirportCode>
			</Arrival>
		</Flight>
	</OriginDestination>
</Response>

Open in new window



My current snippet of code is below but it's not building desired results. I tried the Muenchian method to group by but it'd only retrieve unique OanD and not group them so I can get the Flights found within the group.

<xsl:key name="OandD" match="/root/Data/Flight" use="@OanD" />

  
<xsl:apply-templates select="Data"/>


<xsl:template match ="Data">

 <OriginDestination>  
 
         <!--<xsl:for-each select="Flight[generate-id() = generate-id(key('OandD', @OanD))]">-->

       <xsl:for-each select="Flight">    
	   
			//do something
			
	   </xsl:for-each>


 <OriginDestination>  
  
</xsl:template>

	

Open in new window

0
Hi E's,
I want overlay two images in a responsive project. That not easy when we working with CSS position relative.
So, because that, for overlay two images, one will be a background-image, and other is a normal image inside the div, like you can view here:
<div class="row" style="margin-top: 200px;">
        <div class="col s10 l4 offset-s1 offset-l4" id="fundo" style="background-image: url(imagem/MVC-610X.JPG); max-width: 1024px; max-height: 768px;">
        <img src="imagem/MVC-611X.JPG" class="responsive-img" alt="" style="opacity: 0.5">
        </div>
    </div>

Open in new window

With the above code, I can overlay two images (background and div).
I try to found a solution for animate the background image to opacity 0.
With follow code, I try a solution, but all the elements set to opacity 0, include the image inside the div:
$('#fundo').animate({"opacity": 0}, 5000 );

Open in new window



I know the reason why all the elements set to opacity 0, I try to search a solution in the Internet, and I don't find anything related, so I come to EE's to try to get a solution for:
How I create a Jquery animation from opacity 1 to opacity 0, just for the background image, preserve the image in the div?

The best regards, JC
0
Cloud Class® Course: MCSA MCSE Windows Server 2012
LVL 12
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

CSS Vs Jquery Vs Bootstrap

I have watched few videos about CSS , Jquery , Bootstrap and they all seem  to me like  they are used to design the web page.
However I am not sure if I can use just one of them and will be enough or there are some specific things that can be done by one of them and cannot be done by the other.

Any Expert to explain when  to use one and not the other. Which of them I have to focus on learning that can do more of what is needed in Web Development.
I have not included JavaScript, because I am assuming that one is a Must to know for Wed Dev.

Thanks
0
I am having a VERY tough time with this.  This is a wordpress site.  Its a CSS/PHP issue.  Each entry from DB has a picture, name, title.  I want to line them up left to right. 2 people per row.

Here is the code:
<style>
				.ev-speaker-img {
					max-width: 250px;
				}
				
				.ev-list-row {
    				display: table;
    				width: 100%; /*Optional*/
    				table-layout: fixed; /*Optional*/
    				border-spacing: 10px; /*Optional*/
				}
				.ev-list-column	{
					display: table-cell;
				}
</style>
				<?php if($rows): ?>
					<?php foreach($rows as $row): ?>
					<div class="ev-list-row">
					<div class="ev-list-column">
						<img class="ev-speaker-img" src="<?= $row['speaker_image']; ?>"/><br>
						<?= $row['speaker_name']; ?><br>
						<?= $row['speaker_title']; ?>
					</div>
					</div>
					<?php endforeach; ?>
				<?php endif; ?>

Open in new window


Each entry seems to be its own row, no matter how I configure this from a CSS perspective.  Im out of ideas.
0
I'm trying to move a web-app built in html, css and js to Wordpress running the Genesis Theme.
The app uses Leaflet.js to display a map on which the user can navigate and click to perform an action with that place.

In the original web-app, all the css and scripts required were loaded in the header section of the html page. In the Wordpress version they are called from a php file in the plugin which uses
wp_register_script(ScriptName, scriptURL)

Open in new window

and then
wp_enqueue_script(ScriptName)

Open in new window

for each of the scripts.

The Wordpress version is available to view at https://notetheplace.app - if you go there you will see it displays the map OK. But nothing happens when you click on it. looking at the browser console, you will see the error - "leaflet.js?ver=1.3.1:5 Uncaught TypeError: t.addLayer is not a function" - so it appears to be having trouble reaching the leaflet script even though it is loaded when the page loads.

If you look at the page source, you'll see that the actual html for the map section, plus the javascript required to render it, have been embedded after the closing </body> tag.

So I'm obviously doing something wrong...

Can anyone explain to me how I should structure this page as a Child Theme template so that the scripts can be called when the map is clicked?

This is the current structure of the template page. What structure should it have to ensure the html appears within the <body> tags instead of after them... if indeed that is the problem - its likely there may be more than one... can anyone help?


Open in new window

0
objects Drag and drop into forms and web page

Is there a tool that we can use to drag and drop object on a form or a web page instead of using CSS.

I see when creating objects using CSS, there is a lot of details ,about the size , the style, the position of an object to display on the web page.
I thought probably there should be a tool that lets you design the web page without using CSS, and all you will need is the event handler later when data is fetched, validated, presented, saved,etc...

Thank you
0
I'm using this plugin https://eonasdan.github.io/bootstrap-datetimepicker/  (please scroll to Custom Formats)

Is there a way to change the look-and-feel and make it smaller? It's so big...in your face :)

p1.png
0
I can't seem to find why these two pages are showing the header areas differently. I don't see a difference w/in the code that would cause this. Both reports use the same styles and configuration for the tables and images. Only difference is one is an html file and one is a cfm. See below for screenshots and code comparison.

Showing correctly - index.html:

<cfset #date# = #DateFormat("#Now()#","mmmm dd, yyyy")#> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML LANG="EN-US">

<head>
<title>XXXXXXXX Report Query</title>

<script language="JavaScript" type="text/JavaScript">
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
</script>

<link href="../css/home.css" rel="stylesheet" type="text/css" />
<LINK rel="Home" title="Index page of FINCEN Intranet site"
      type="text/html"
      href="https://<cfoutput>#CGI.SERVER_NAME#</cfoutput>">  
</head>

<BODY >
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" background="../images/grad2b.gif">
   <tr>
      <td width="10%">&nbsp;</td>
      <td width="80%" valign="top">
	     <table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" >
            <tr>
   

Open in new window

0
Show and Hide a div based from drop down list.  I have three status, Approved, Pending or Rejected. The problem I'm having is when the default value is "Approved" or "Pending" the text box that I'm trying to hide is still visible.  Once inside the drop down list I can toggle the selection and it will then show or hide the text box correctly.  I would like to have this functionality work on the page load.

I have tried both CSS and Jquery and I'm haivng the same issue with both.  

Text Box
 <div id="hideRejectReason">
                        @Html.EditorFor(model => model.rejection_reason)
                </div>

Open in new window



 function show() {

        var select_status = $('#select').val();
       
        if (select_status == 'Rejected') {
            $('#hideRejectReason').show();          
        }

        else {
            $('#hideRejectReason').hide();          
        }

    }

Open in new window



  function show() {

        var select_status = $('#select').val();

        if (select_status == 'Rejected') {
            $('#hideRejectReason').css('display', 'block');         
        }

        else {
            $('#hideRejectReason').css('display', 'none');
        }

    }

Open in new window

0
Hello everyone.

I am working on a website which currently has a page full of background images that currently have a parallax effect.

I don't want to use parallax effects on this site.  

However I am looking for effects to add to a background image that gives them a subtle animation - triggered by up and down scrolling.

For example, I am thinking of a background image that zooms a little bigger that is triggered when the visitor scrolls DOWN the page, and then is triggered to zoom back to "normal" size when the visitor scrolls UP the page.

The zooming in and out should be subtle. Perhaps approximately 15 pixels zoomed in -- and then when scroll up zoom 15 pixel out,

There may be other effects, but I think if I could get the code for the above effect it just might do the trick -- and get my client's approval :)

I would like to see a demo of whatever solution is suggested. Either though Fiddle or Codepen to a web site that has some examples.

Looking forward to your suggestions.

Best
Rowby
0
What's the best way to view an HTML document in order to see separate sections, separate blocks, which DIV/SPAN Tags pair with which ending tags, etc
I am trying to add some CSS to a bunch of spaghetti-coded HTML4 docs.
I have Dreamweaver5, BBedit, Coda 2. Can buy a 4th tool if it helps, just for viewing HTML structure.
0
The Ultimate Tool Kit for Technolgy Solution Provi
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Does anyone here know how I might adapt this HTML code so that it displays correctly when viewing it as an HTML email using the installed software version of Outlook that's part of the Office365 suite?  It's my understanding that the Office365 version of Outlook doesn't support CSS3 ... and that's fine.  But I'd at least like to get some kind of suitable fallback in place .. even it it's just a single image instead of the slideshow.  Does anyone here have any suggestions?

Thanks in advance,
- Yvan


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

	<title>Slider</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
	<!--[if gte mso 15]>
	<style type="text/css">
		table { font-size:1px; line-height:0; mso-margin-top-alt:1px;mso-line-height-rule: exactly; }
		* { mso-line-height-rule: exactly; }
	</style>
	<![endif]-->   

<style type="text/css">
  .ReadMsgBody { width: 100%; background-color: #F6F6F6; }  
  .ExternalClass { width: 100%; background-color: #F6F6F6; }  
  body { width: 100%; background-color: #f6f6f6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: Georgia,  serif }  
  table { border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    

Open in new window

0
Hello,
I am new to responsive html, and wanted to make a page with images that would shrink or enlarge to max width of the browser without rearranging the image layout.
I have 2 rows with one image each in full width. One row with 3 images, each 1/3 of the max width. And a final row of 2 images, each 50% of the max width. Can this be done without css?
Thank you
0
Usage of Bootstrap

I have done some reading online about Bootstrap, it states that Bootstrap includes HTML and CSS, and makes the web forms generated in easy and faster way.
I am not sure what they mean by that. DO they mean that when we open Bootsrop text editor we can write HTML and CSS on the same page ?
Another thing that I want to know is How does Javascript interact with Bootstrap ?

Thak you
0
Hi Experts,

How can I do a bullet image in TCPDF, for example like the finger bullet in MS Word?

I tried using the following code and extracted the followind bullets from Word, but it looks horrible. I added the border just to see how it aligns, but why does it not go all the way to the right?

Thank you,EE-PDF.zip

My code is

function create_bullet($bullet_name, $bullet_text){
    
    /*Acceptable Bullet Names:
     *              - finger
     *              - rainbow
     *              - square
     *              - square-whole
     *              - star
     */
    
    global $env;
    $img = $env['url'] . "images\bullet_$bullet_name.jpg";
    
    $bullet_html  = "<table style=\"width: 100%;\" border=\"1\"> <tr>";
    
    $bullet_html .= "<td style=\"width: 2cm;\"><img src=\"$img\" /></td>";
    $bullet_html .= "<td>$bullet_text</td>";
    
    $bullet_html .= "</tr></table>";
    
    return $bullet_html;
}

Open in new window

0
I made some changes in my meta file and now my bootstrap datepicker doesn't work.  Here is what I have in the header:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="GENERATOR" Content="Microsoft Visual Studio 6.0">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="alternate" href="http://gopherstateevents.com" hreflang="en-us" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="shortcut icon" href="/assets/images/g-transparent2-351x345.png" type="image/x-icon">
<link rel="stylesheet" href="/assets/web/assets/mobirise-icons/mobirise-icons.css">
<link rel="stylesheet" href="/assets/tether/tether.min.css">
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="/assets/socicon/css/styles.css">
<link rel="stylesheet" href="/assets/dropdown/css/style.css">
<link rel="stylesheet" href="/assets/theme/css/style.css">
<link rel="stylesheet" href="/assets/mobirise/css/mbr-additional.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.css">

<script src="/assets/web/assets/jquery/jquery.min.js"></script>
<script 

Open in new window

0
I have created a refine filter popout using transition CSS. The panel slides out ok, but the transition on the content area isn't working correctly. You can see what the issue is on the following page when viewed at around 998px https://www.ingeniousgifts.co.uk/shop/

Any help would be much appreciated.
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.