[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

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

Hi,
I want to show the fields within area like the below rectangle. How to adjust the web page having such details?

32z.png
0
Learn SQL Server Core 2016
LVL 12
Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Hi

I want to use CSS styles in my ASP.net web app to style menus, gridviews, textboxes and dropdownlists.

Should I use a professional to do this or are there websites that provide help with this?


Thanks
0
Hello Experts,

I need help with Bootstrap 4.1.3 and Javascript/Jquery to make it work the way I would like to do it.  
I follow this user's example: https://github.com/bootstrapthemesco/bootstrap-4-multi-dropdown-navbar

What I would like to do:
1. How do I get the "arrow" on the submenu to be right-aligned in the uploaded images?  There is a before and an after image.
2. How can I make it so that when I move/hover away from the dropdown menu item, it will collapse.  For example, if I move away from "About Us", the dropdown menu for it, collapse?
3. Finally, I like that you have to click to get the main menu item (i.e Metrics) to expand the dropdown menu.  However, I want it so that when I hover over Submenu, it will expand auotmatically expand.  No clicking, but hovering.

Please provide any assistance for any or all of my wish list.  Thank you.

Here is my code for my menu:

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
      <li class="nav-item dropdown">
        <a class="nav-link 

Open in new window

0
I have anchor links generated for pagination and css to change the color of when selected and also on hover.
Everything works except, I would like not to change the color of the text, of the selected anchor tag on hover. I tried the pseudo class a:hover:not(.selected), but i don't get the desired effect.


<div class="pagination">
    <a ...
    <a...
      ...
</div>

pagination {
    display : inline-block;
}
pagination  a{
    text-decoration : none;
 }
.pagination .selected {
   background-color:blue; color:white;
}
.pagination a:hover:not(.selected) {
   color: blue
}
0
Hi
I have built an ASP.net web application that I need design help with. I don't want to share my entire project with a cuss designer but rather give him just enough access to see my mark up code.
I have never done this before so am looking for advice on the best way to do this.
Is there a way in Visual Studio 2017 to collaborate in this way?
0
Is it possible to add CSS styling to a facebook og:image that you would use for a Facebook share? It needs to be dynamic as well.

So, here is my tag in its current state and it just grabs the image for that particular product. But, it is just an image. I want to use CSS to put a coloured block in the top right corner and put some styled text in there for example.

 <meta property="og:image" content="<?php echo URLROOT . '/uploads/optimized/900x600_' . $data['img_name']; ?>" />

Open in new window


Is this possible?
0
I have created a nav/tab menu, as below.
when user navigates to a particular tab, I want to add a border to the selected/active tab item, to show user that this particular tab is selected or say user is in this particular tab.

or may be even make the text bold for the selected item.

is this possible with just css or do we have to use javascript?

<ul class="nav">
  <li><a href="">Home</a></li>
  <li><a href="">About Us</a></li>
  <li><a href="">Contact</a></li>
</ul>

css  ...

.nav{
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
}
0
I need to change css when my program runs.   would like to change css with jquery on   $(document).ready(function () {}

This is the css.  When the file opens I want to change    top:2500px; to    top:25px;

        .templateViewFrame {
            padding:15px;
            height: 700px;
            width: 800px;
            border: solid 1px black;
            position: absolute;
            left: 50px;
            top:2500px;
            background-color:#ededed;
        }
0
Hello All,

I have a html document like shown below. I am trying to read the text value "123" using Jquery/css selectors. Please advise how can I read text "123"?

The text displayed will not always be 123, it could be 456 or 789 etc. so the url will also change accordingly. The only thing constant in the below table is the word "Chocolate". Is there a way to read the text value 123 based on the key word "Chocolate"?

I was trying div:contains("Chocolate"). I don't know how to traverse html further. I would appreciate your help. Thank you!

****************************************************************************************

<html>
<body>
<table border="1">

        <tr>
            <td>R1C1</td>
            <td>R1C2</td>

        </tr>

        <tr>
            <td>
                <div>Chocolate</div>    
            </td>
            <td>
                <div>
                    <a href="https://123.com">123</a>
                </div>
            </td>
        </tr>
    </table>

</body>
</html>

Open in new window

0
When styling a website, when we set style on a body or html element , as below. will this override style for all the inputs as well?


body{
   font-size : 12px;
   font-family: sans-serif;
}

or like this

* {
      font-size : 12px;
      font-family: sans-serif;
    }
0
Big Business Goals? Which KPIs Will Help You
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

I am working with a Mobile app using XAML and WebView.  It is also using Angular.

In Angular, I know that this syntax is like a "placeholder" for actual data you want to put on the form:

{{task.PartActualEndDate}}

But what I need help determining is what formatting is being applied to this date value?  The CSS class "dataColSig" is just setting the width to 23%.

 <tr><td class="labelColSig">Date:</td><td class="dataColSig">{{task.PartActualEndDate}}</td><td class="labelColSig">Date:</td><td class="dataColSig">{{task.ActualEndDate}}</td><td class="labelColSig">Date:</td><td class="dataColSig">{{task.ApprovedDate}}</td></tr>

Open in new window


There is a lot of .js code to wade through.  How can I quickly find where the date format is being applied by Angular?

Debugging this at runtime is tricky, since this is a XAML app using WebView to display the HTML page.  I can't simply right-click and "Inspect element" on the HTML page at runtime.

I can set breakpoints in the JavaScript and then turn on Script as the debug type in Visual Studio ... so I do have that.  It's just that none of the breakpoints seem to be getting hit where task.PartActualEndDate is referenced in the .js code (that I  can tell).

Screenshot of the date values at runtime:

format date angular
0
I am trying to display a custom message when a user closes or about to close a browser tab. In the earlier versions of the browsers I could do this using onunload or onbeforeunload events and display a pop-up message but the newer versions do not allow me to customize the message. Is there anyway I can display a customized message when the user closes the browser tab or when clicks on the close button of the browser tab? A tool-tip could also work when the user is hovering on the close button or clicks on the close button of the browser. Thank you for any help.
0
Hi, I have CSS built vertical tabs. I am new to accessibility. I would like to add accessibility to my vertical tab. Can some one help with that.

expectation:
-----------------
When a end user, tabs through the vertical tab, they should be able to use Enter/Space bar keys on the  tab title  to see the corresponding tab content.

Attached is a HTML to show the vertical tab.

Any help appreciated.
0
I have few icons and images in svg format, that I need to untilize in asp.net site.
I added all the svg icons in an image tag as such

<img src=".../icon.svg>

this way I can't set the color of the svg icon. as there are quite a few icons , i'm using , what would be a best approach  to use such svg icons , so that i can set the color as well.
0
say, when there is a label/span/anchor next to an image/icon , what is the best way them to align them vertically, so that both are centered vertically.
for example , I have anchor tag and a input type of button next to each other in a div, like below, how can i align them vertically centered?

<div>
    <a href="" ...>
     <input type =button....>
</div>
0
I have an svg icon in my asp.net web site. how can I apply css to this svg file by just using a css file.
say I want to change the color of the this svg icon. is it possible to write just a css rule to do this?

<img src="content/images/companyicon.svg" alt="">
0
My web page has code that is reaching out to google server and I want to copy this CSS code and put it on my web server and change the code so that it now points to my server to get the CSS code.

This is the code:

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600" rel="stylesheet" type="text/css">

I save the code to a .css file and put it on my server then i change the above code on my webpage to this:

<link href="css/google-font.css" rel="stylesheet" type="text/css">

the font on the page is not looking correctly at this point and i want to know how to fix this.

Thanks in advance.
0
Trying to add a right margin (to my first button) so as to present 2 buttons in a cleaner manner that have a pull-right bootstrap class on them ... the pull right seems to remove all margins is there a way around this?

<a href="rev_logout.php" 	class="btn btn-danger navbar-btn pull-right " 	role="button">Log Out</a>
	   <a href="inventory.php" 	class="btn btn-info navbar-btn pull-right" 		role="button">Home</a>

Open in new window

0
www.magickitchen.com/catalog.html - I have this white space at the bottom of every page, and I can't figure out why. It doesn't bother anyone but me, but it bothers me a lot.

Why??
white-space.JPG
0
Introduction to Web Design
LVL 12
Introduction to Web Design

Develop a strong foundation and understanding of web design by learning HTML, CSS, and additional tools to help you develop your own website.

I'm creating a restaurant menu.  I would like the entree name in one font/color and the price on the same line with a different font/color.
I'm using a table but the problem is after the entree name, the price drops to the 2nd line.

This is the code in question:
<table id="Appps" border="0" cellspacing="0" cellpadding="2" width="100%" style="height: 25px;">
	<tr>
	<td>
	<div id="Green_Text" align ="center">
    Appetizers and Soups
	</div>
	</td>
	</tr>
<tr>
	<td width = 50%><div id = "Entree">Millie's Chili</div><div "Price"> crock 6 </div>
    Topped with chopped onions & melted pepper jack cheese, served with Nacho chips
  </td> 

Open in new window


The css is
#Entree
{
 	font-size: 18px;
	color: #BF5940;
}

#Price
{
 	font-size: 18px;
	color: #FFFFFF;
}

Open in new window


Only other question is how do I bold the price?

Thanks
0
Hi Experts,

I am not able set  fixed width and height for a card image in bootstrap.  I want all in same height and width for all the images.  Please see the below image.

tosend.png
I had tried setting min-width:100% height:40vh and object-fit:cover but not able to resolve this issue.   Please find below the debugger window details

tosend.JPG
Please see the below code

 return (
          <div  key={i.id} className={`card paper ${this.props.selected == i.id ? ' selected': ''}`}
                 style={{width:dimension, height:dimension+50}} onClick={() => this.props.actions.viewItem(i)}>

              {!i?.source?.brand ? null :
               <img src={i.source.brand} className="card-img-top img-fluid "  alt={i.source}/>
              }
              <img src={thumbnail} alt={i.title} className="card-img-top img-fluid" style={{width:"100%!important", 'min-width':"100%",height:"15rem", 'object-fit':'cover'}}/>
            <div className="card-body">
               <p class="card-text"> {i.title} {' '} <span style={{color: '#777'}} > {date} </span></p>
            </div>
         </div>);
         });

Open in new window


Please help me in resolving this issue.

With many thanks,
Bharath AK
0
I am trying to adjust the height of input type in bootstrap 4, which has following sample markup.

is there a quick way to do just the input types?

 <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
0
i have file upload control in my website, which is stand a button and show choose file, i want to change its css so it should show file icon instead of standard asp.net file upload control please advice
0
I have added a bootstrap 4 panel. how can I add a right arrow after the anchor tag , when it is collapsed and add a down arrow on expand?  

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>
0
I found this page:

https://bashooka.com/coding/web-background-animation-effects/

And want to use

https://codepen.io/at80/pen/tqdmv

on shared hosting website with hostgator.

I copied the html to a file called index.htm
the css text as a file called index.css
and the js text as a file called index.js

When I go to the website, I get a blank page.  If I show source, I DO see the HTML, so the code is there.

But don't know what I am doing wrong / what I need to do (I really don't know web design. My experience is really front page from YEARS ago : )

THANKS!
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.