CSS

41K

Solutions

16K

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 there. I have an email template but I'm trying to make the 3 images to stack over mobile. I've tried to add in the css but it's not working. Any ideas?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Thank You to All Our Veterans!</title>
    <style>
      .preheaderContent a:link{color:#606060;font-weight:normal;text-decoration:underline}
      .preheaderContent a:visited{color:#606060;font-weight:normal;text-decoration:underline}
      .headerContent a:link{color:#EB4102;font-weight:normal;text-decoration:underline}
      .headerContent a:visited{color:#EB4102;font-weight:normal;text-decoration:underline}
      .subheaderContent a:link{color:#ffffff;font-weight:normal;text-decoration:underline}
      .subheaderContent a:visited{color:#ffffff;font-weight:normal;text-decoration:underline}
      .bodyContent a:link{color:#EB4102;font-weight:normal;text-decoration:underline}
      .bodyContent a:visited{color:#EB4102;font-weight:normal;text-decoration:underline}
      .bodyContent2 a:link{color:#EB4102;font-weight:normal;text-decoration:underline}
      .bodyContent2 a:visited{color:#EB4102;font-weight:normal;text-decoration:underline}
      .photoGallery a:link{color:#EB4102;font-weight:normal;text-decoration:underline}
      .photoGallery 

Open in new window

0
Ensure you’re charging the right price for your IT
Ensure you’re charging the right price for your IT

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

My dear experts, what is the best Javascript frameworks for Mobile App Development that can communicate with the server? I have my own server, and I used .asp as my server-side communicator between clients. I need a guide from yours so that I would not be loosing my time in studying this new project.  Thank you!
0
I have created a menu on the desktop view it seems to work just fine when I go mobile or resize the screen something strange start happening. First of all, once resized on the desktop menu does not really load from the first time. Once you get the menu up click on the products and then you would see the list of items they should have a little right angle brackets (missing) . On the top of that menu I should have close and back button it is missing.

Also the once you start navigating through products menu the sub menus shown are not correct

The site is here : http://www.pcoltools493.com:81/
0
Hi Experts, I want to develop Phone Apps using Html, Javascript, Css and .asp. Can you guide me where or how to start it?
0
I have ASP.NET master page with Menu Control and I need to make it 508 compliance which requires onFocus and onBlur events for keyboard equivalent to OnMouseOver and OnMouseOut event. ASP Menu control doesn't provide these events out of box.

I tried Attributes.Add on pageload but it doesn't work for MenuItems.

<asp:Menu ID="Menu1" runat="server">
  <Items>
     <asp:MenuItem Text="Files" Value="File" NavigateUrl="~/HomePage.aspx">
           <asp:MenuItem Text="Items" NavigateUrl="/ItemSelect.aspx" ></asp:MenuItem>
     </asp:MenuItem>
  </Items>
</asp:Menu>

How can I add onFocus and onBlur events for ASP Menu control?
0
I have a table which was created as part of a CRM system. The width of the column changes depending the size of the data field. I need to fix the width of the columns. Can anybody advise what i need to do to fix the column width in the table. Current coding is as below:

<table border="2" cellpadding="1" cellspacing="1" style="width: 700px;">
      <tbody>
            <tr>
                  <td>Rent A/C No. {AccountReference}</td>
                  <td>Name: {TenantName}</td>
            </tr>
            <tr>
                  <td>Address:{TenantAddress}</td>
                  <td>Telephone Contact: {TenantPhone}</td>
            </tr>
            <tr>
                  <td>Eircode: {TenantEircode}</td>
                  <td>Email: {TenantEmail}</td>
            </tr>
      </tbody>
</table>

Thanks in advance
0
Hi everyone,

I have a section of bootstrap code that I would like to appear differently on an iPad pro in portrait mode. The code can be seen here:

https://codepen.io/gwnh/pen/a9a80e51099352cf6622d974c47648e2?editors=1010

In desktop view, the image is placed in a column on the left, while the text is on the right. On an iPad Pro in portrait view, I'd like the image to appear above the text on the left and take up 12 columns on the bootstrap grid, while the text section would appear beneath the image.

Is it possible to do this with bootstrap or would I have to write a media query?

Would really appreciate any assistance.
0
<style>

#html-builder-navbar div, #html-builder-navbar ul, #html-builder-navbar ul li a){
    height:100% !important;
    margin:0;
    padding:0;
}
#html-builder-navbar .dropdown-menu{
    height:auto !important;
}
#html-builder-navbar .row{
    border:none !important;
}
.bg-nav-item {
    background-color: #edeef2!important;
}
.bg-save {
    background-color: #17c671!important;
}
.bg-main{
    background-color: #525d7d!important;
}
.text-main {
    color: #525d7d!important;
}
.text-white {
    color: #fff !important;
}
.font-weight-light {
    font-weight: 450 !important;
}
.font-weight-main {
    font-weight: 600 !important;
}
</style>
<div id="html-builder-navbar" class="header-navbar collapse d-lg-flex p-0 bg-white border-top not-editable">
            <div class="container-fluid m-0 p-0">
              <div class="row mw-100">
                <div class="col m-0 p-0">
                  <ul class="nav nav-tabs border-0 flex-column flex-lg-row p-0 m-0">
                    <li class="nav-item bg-nav-item">
                      <a href="#" class="nav-link p-4 m-0"><i class="fa fa-arrow-left text-main"></i></a>
                    </li>
                    <li class="nav-item">
                      <a  class="nav-link p-4 text-main font-weight-main m-0">Happy Markerter Template</a>
                    </li>
                    <li class="nav-item dropdown bg-nav-item">
                      <a class="nav-link p-4 m-0" data-toggle="dropdown"><i class="fa fa-cog 

Open in new window

0
Hi Experts,
When i'm trying save page in the SharePoint designer, I will get following error message
Server Error: Access denied.
But I'm having all the Administration rights.
See attached screnshot about errorErrorsErrorsI have already clean the Cache
Close SPD if it is open > Open My Computer  > Click the address bar > Paste in: %USERPROFILE%\AppData\Local\Microsoft\WebsiteCache

Delete everything within this location. Click the address bar  > Paste in: %APPDATA%\Microsoft\Web Server Extensions\Cache. Delete everything in this location
0
Hello,
I want to create a web page with 2 divs and 4 buttons:
div iframe1 (shown by default when page is loaded)
div iframe2 (hidden by default when page is loaded and not rendered)
button frame1_show which show the div iframe1 and render the iframe instantly
button frame1_hide which show the div iframe1 and remove the content from memory and html source
button frame2_show which show the div iframe2 and render the iframe instantly
button frame2_hide which show the div iframe2 and remove the content from memory and html source

The goal to achieve is show/hide div's iframe when needed to prevent memory and cpu consuption when the div are hidden.
0
Fundamentals of JavaScript
LVL 19
Fundamentals of JavaScript

Learn the fundamentals of the popular programming language JavaScript so that you can explore the realm of web development.

hi am having this error in my app http error
httpcode
import {Http} from '@angular/http';
import {EventEmitter, Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import {Task} from './task.model';


@Injectable()
export class TaskService {

    onTaskAdded = new EventEmitter<Task>();

    constructor(private http: Http) {

    }

    getTasks() {
        return this.http.get('/api/tasks').map(response => response.json());
    }

    saveTask(task: Task, checked: boolean) {
        task.completed = checked;
        return this.http.post('/api/tasks/save', task).map(response => response.json());
    }

    addTask(task: Task) {
        return this.http.post('/api/tasks/save', task).map(response => response.json());
    }

}


app module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TasksComponent } from './tasks/tasks.component';
import { TasksAddComponent } from './tasks/tasks-add/tasks-add.component';
import { TasksListComponent } from './tasks/tasks-list/tasks-list.component';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';

@NgModule({
  declarations: [
    AppComponent,
    TasksComponent,
    TasksAddComponent,
    TasksListComponent
  ],
  imports: [
    BrowserModule,
      HttpModule,
      FormsModule,

  ],
  providers: [],
  bootstrap: 

Open in new window

0
Hi
My breakthrough mutalisk flyer app project is simply a muta that flaps its way from top left to bottom right.
It will change the industry.

requestAnimationFrame() is super.
I'd like to put it up online. It acquires the muta.gif from my webspace, no file needed.
Is my only option to put the HTML on my webspace? Can I make it into a downloadable app of any kind? Doesn't that require a mac developer membership?
What about other devices? I'd like to know all the problems, workarounds, mistakes before I get too far in.

If this is my content container, how do I make it fullscreen on all devices, not known dimensions only? Slither.io goes browser size in a browser.
Right now, it is all in one HTM file, the HTML javascript and css
The entire HTML is down below
#contentContainer {

      width: 550px;
      height: 350px;
      border: 5px black solid;
      overflow: hidden;
      background-color: FFFF00
    }

Open in new window


Thanks

entire mutalisk flying HTML:
<!DOCTYPE html>
<html>

<head>
  <title>Mutalisk mutalisk</title>
  <style type = "text/css">
    body {
      background-color: #FFF;
      margin: 30px;
      margin-top: 10px;

    }

    #contentContainer {

      width: 550px;
      height: 350px;
      border: 5px black solid;
      overflow: hidden;
      background-color: FFFF00
    }

    #mutalisk {
      position: relative;
      left: :1725px
      top: 11750px
    }mutalisk
    </style>
  </head>

  <body>
    <div id = 

Open in new window

0
how do you validate a file field with the same validating features (CSS Styles)?

<tr valign="baseline">
            <td >Supporting documents:</td>
            <td colspan="2">
            <div class="required">
              <span>Uplode the file is required.</span>
           <!--   <label for="text1"></label>      -->
           <input type="file" name="file" value="" size="32">
                        </div></td>
          </tr>


so i need the spyr validation for file and the css validation for file
0
I have a header menu that I only want to display on desktop screens and not display on mobile. I have my code in my page like

<div class="wrpmnu">

<div 1>
   <div 2>
       <div 3>
       </div>
   </div>
</div>

</div>

My CSS assumption is that I just have to create a visibility:hidden or display:none wrapped by @media query at the bottom of my css stylesheet and it would only be for the "wrpmnu" div.

Shouldn't that just remove all the nested div content? I've even tried to make the "wrpmnu" set height: 0 and it still doesn't make the content disappear.

I've read at least 10 sites that say all I have to do is either put the @media query in my css file or use the <link media="screen and (min-width: 701px)" type condition in the <head> area to only have the stylesheet be used by desktops.

How can I hide nested div contents entirely (remove my header navigation) on a mobile device?
0
Hi,

I have a sass mixin looking like this:
@mixin BannerTop($url, $height) {
  position: relative;
  height: $height;
  background-color: #000;

  &::before {
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.5;
    //background-image: url(../../Images/AdobeStock_27182189_Preview.jpeg);
    background-image: url($url);
    //background-color: rgba(0, 0, 0, 0.8);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    //background-size: 100%;
    height: $height;
  }

  &-TextBlock {
    z-index: 2;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;

    h3 {
      color: white;
      
      font-size: 4rem;
      font-family: $font-display;
      font-weight: 700;
      
      margin-bottom: 2rem;     
    }
  }
}

Open in new window


I then uses it like this:
  .TopBanner {
        @include BannerTop("../../Images/volvo_v90_490922.jpg", 50rem);
      }

Open in new window


My qustion is if it's possible to in someway load the background image dynamically (say from a db request)?

I would like to be able to use the same sass/css but have a different image depending on what id is loaded från the db.

Thanks for help!

Peter
0
I would like to find a tech who can do a remote login and walk me through applying css flexbox code into my web project. I have the website html. I do not understand how to apply the wholy grail template to my site and I would like the tech to show me how its done. I have the wholy grail template but i do not understand how to apply it to my code.

my website:

<html>

  <head>
    <title>TechnicalCafe - Home</titl
  </head>

  <body a link="black" vlink="black">

    <center><h1>TechnicalCafe.com</h1></center>

    <center><b>Home</b> |<a href="about.html">About</a> | <a href="news.html">News</a> | <a href="contact.html">Contact</a></center>
    <center><p>Welcome to TechnicalCafe.com! Please feel free to check out the web pages! Thank you for visiting!</p></center> 

  </body>

  </html>

Open in new window

~
0
Normally when I see a website using Bootstrap 4 I see the grid classes being used in the HTML. Recently I used a developer who has now managed to implement the grid glasses in the CSS. Is this normal practice and does it work out better?

I'm trying to understand if there are performance vs maintenance trade offs to consider as I'm finding it hard to understand the grid behaviour for HTML elements since the grid classes are not in the HTML. Is this related to Bootstrap Sass mixins?
0
popover moves slightly to the right when the first time user clicks popover button twice.

steps to reproduce:
1. Use link  https://jsfiddle.net/girinishantg/m1p75fbx/1/
2. click on popOver button, a popover appears, drag this to any location, let's say the end of the line.
3. click again popover button, the popover will disappear.
4. click on the popover button again, this time popover will appear but slightly to the right where the user left it earlier.

Expected Behaviour: It should appear exactly the same location where left earlier.
0
I'm working on a script to pull various elements from our server environment.
For the sake of simplicity, I've removed a lot of what I'm retrieving from below.

Essentially, I'm extracting the appropriate data - writing that output, then pushing it through a function to compare against some thresholds to determine if it's a concern or not.
That in turns writes out a new object that is comprised of only strings (rather than the child objects produced initially).  In the end, I don't need to know what's working - but what is of a concern.  I.e - if I have 14 volumes, but 13 of them are in good shape, only report on the ones nearing capacity (and change the coloring for that field).

I've got all that working, and I end up just leaving a 'Pass' value if everything looks good.  If not, I prepend the field with Warn or Fail based on the logic I'm using.

Now I want to convert it all to a table and remove the 'Warn' and 'Fail' from the field, but I'm stuck because of my lack of knowledge at how to get at these values and manipulate the data, and have it hold.


Here's what's produced in my [xml]$html variable after running it through Convertto-html (would love to remove the colgroup, since I'm obviously not using that, but haven't found a way to do that either).

InnerText          : 
InnerXml           : <table><colgroup><col /><col /><col /><col /><col /><col /><col /><col /><col /><col 
                     

Open in new window

0
Expert Spotlight: Joe Anderson (DatabaseMX)
LVL 19
Expert Spotlight: Joe Anderson (DatabaseMX)

We’ve posted a new Expert Spotlight!  Joe Anderson (DatabaseMX) has been on Experts Exchange since 2006. Learn more about this database architect, guitar aficionado, and Microsoft MVP.

I am struggling a little bit with the tooltips on the quote form on this page. They are just fine at full size, but when you resize the viewport, they get cut off.

I need them to adjust to fit on the screen no matter the viewport size. Bootstrap does have built in tooltip defaults, but for these specific ones, I have some css in the head of this page to override those as so not to affect the rest of the site. So that's where I need to make the edits.

Thanks!

https://www.stadriemblems.com/products/ajax/custom-enamel-pins/
0
The company intranet site is on Drupal 8 and we would like to create an Event that does not require the email address to be added for authentication and the user to be logged in order to register for the event.  Can someone please let me know if that is possible?  Thanks.
0
Hi, I would like to add a conditional dropdown list to my registration page.

There shall be a dropdown list having 5 entries.

There shall be a second dropdown list, the value of which shall depend on the value in the first dropdown list

Then a third dropdown list which shall depend on the value in the second dropdown.

The second and third dropdowns should have the capability to accept typing out, thus narrowing down the list as the lists are expected to have hundreds of entries.


I am using Ultimate Member plugin. I would like to know how to do this. Or if there is any other/better/simpler way to achieve what I want.
0
CSS Issue.  I'm stuck.  There is a dropdown menu that works fine.  However, if the screen is less than 1250px wide, it changes to a hamburger menu.  When you scroll over, none of the child  menu choices show.  I actually want all menu choices to show and not be hidden. Any ideas?

https://corporatevisions(DOT)com/    Replace the (DOT) so the link works.
0
using Chrome to print a report.  It always comes up in portrait mode.  Is there anything I can do to render the report in landscape format.  Any CSS formatting or something I can default in the browser to force it to always print using landscape?
0
I am using ASP.Net Ajax AutoCompleteExtender with following properties

<div class="col field col-xs-12 col-sm-3 col-md-3 col-lg-2 textBoxAlign fontBold">
                                <div class="row">
                                    <div class="col field col-xs-12 col-sm-12 col-md-12 col-lg-12 textBoxAlign">
                                        <asp:Label ID="lblResStreetName" runat="server" Text="Street Name" />
                                        <asp:Label ID="lblResStreetNameRequired" runat="server" Text="*" CssClass="fontColorRed" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col field col-xs-12 col-sm-12 col-md-12 col-lg-12 textBoxAlign">
                                        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                                            <ContentTemplate>
                                                <asp:TextBox runat="server" ID="txtResStreetName" Width="100%" EmptyMessage="" TabIndex="24" MaxLength="50" AutoPostBack="true" OnTextChanged="txtResStreetName_TextChanged" Class="ResidentialAddressWebFormControls">
                                                </asp:TextBox>
                                                <cc1:AutoCompleteExtender ServiceMethod="SearchStreetNames" MinimumPrefixLength="2" CompletionInterval="10" …
0

CSS

41K

Solutions

16K

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.