[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

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
Starting with Angular 5
LVL 12
Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

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 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
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
Determine the Perfect Price for Your IT Services
Determine the Perfect Price for Your IT Services

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

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 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
I need to fix the orange button in the right column that appears outside of the blue box. It should be on the inside of the blue box. Here is the page: https://ccdenver.org/givethanks/

Any ideas experts?
0
I need to use a font in a web site ("1998A__TFF").  This was down loaded from the net.  
Where do I put it on the site to access it.  I've tried the root and a sub with no joy.

The css reads:
#Green_Text
{
      font-family: /seabreezesoftware.com/Joes/Drop.TTF;
       font-size: 24px;
       font-weight: normal;
       font-style: normal;
         color: #4cbb17;
}

The code reads:
<?php
echo "<div id=\"Green_Text\" align =\"center\">";
            echo "Phone:  (908) 881-9615";
            echo "<br>";
            echo "2032 Morris Avenue, Union  NJ";
            echo "</div>";
?>      

What an I doing wrong?
0
dev2magickitchen.com - on screenfly, when I select the size tablet 800x400 or 900x600, the background of the navigation bar is purple. On these sizes, it needs to be white, but I can't seem to come up with the right media query to make that work.

I tried @media (min-width: 600px) and (max-width: 800px) {
background-color: #fff;
}
and that works, but it also makes the background white on desktop size.  Not sure what I am doing wrong there. Another alternative at that size would be to keep the background, but turn the hamburger icon white.  That would work for me as well. Thanks in advance.
0
when designing a website. say, for example I want to style all the buttons with same background color.

size of the buttons may vary depending up the page where it is displayed, but I want to outline some basic rules.
same for other inputs like text box , e.t.c

should I define one class or use same ID , and write css like below - similar the classes are in bootstrap.

or can I choose all the input type of button. what is the best way to do this.

Also , can i style the text within the button , with in the same class .  and will the size of the button adjust automatically to the size of the text within it?




.button {
   background-color : gray;
   border : 1px solid gray;
   ...
}
0
How to add the active class to current element with this responsive navigation bar: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

When the menu buttons are clicked the 'active' class doesn't change.

Any advice most welcome.
0
Rowby Goren Makes an Impact on Screen and Online
LVL 12
Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

web site design:

I have a small website which I maintain myself. Bit of HTML and bit of CSS modified from various books etc.

www.richardknight.co.uk

Yes I know I could afford to hire someone but I like tinkering. I have used some basic media queries to feed the mobile version as it were.

"website grader" says my mobile effort only scores 15 out of 30

The mobile version is lacking a bit of style

I own the domain and host the site with fasthosts.  
I upload files via an old copy of dreamweaver.

The site is reasonably responsive and it is very fast to load but lacks a bit impact. (but google says it is mobile friendly)

It has fallen down the ratings for "Solicitors Syston"  in the last couple of years as some big names have come into the town.

I am tweaking the SEO

However I am in the lead with Google Reviews. yay!

Given that I don't want to spend £5 to £10k on a full site redesign-(I like the elements, header style etc) what would be your advice.
ps:  I am only a year or three away from retirement and business is pretty good anyway.

Should I

1 ask a local designer to sort out the CSS for the mobile site

2  use an app like duda mobile or go mobi to create a mobile-only version and leave the desktop untouched.

3 use Divi (wordpress) I have tinkered with this-I can get what it does and cope with it-I have six months of a subscription left.

4  leave it alone

5 get out more

6 None of the above
0
If you go to this page and scroll down to the gallery section, https://www.stadriemblems.com/products/enamel-pins-test/ I want the links in the image descriptions to open in their own windows and not behave as if they are part of the image slideshow. This is probably a dumb question, but is there a way to accomplish that without re-configuring all the code and css?
0
I want to count the amount of unique Traveler/@Type given the below xml input

I'm iterating through Ticket/TravelerRQ to get all my TktTraveler  but then I want to match it to View/Traveler/ElementNumber and group by Traveler/@Type to see how many of that type I have.



<root>
	<Ticket>
		<TravelerRQ>
			<TktTraveler Element="1"/>
			<TktTraveler Element="2"/>
		</TravelerRQ>
		<View>
			<Traveler Type="ADT">
				<ElementNumber>1</ElementNumber>
				<TravelerName>
					<LastName>DOE</LastName>
					<FirstName>JOHN</FirstName>
				</TravelerName>
			</Traveler>
			<Traveler Type="ADT">
				<ElementNumber>2</ElementNumber>
				<TravelerName>
					<LastName>DOE</LastName>
					<FirstName>JANE</FirstName>
				</TravelerName>
			</Traveler>
		</View>
	</Ticket>
</root>

Open in new window


Expected response = 2 ADT
0
Hi,
I'm trying to make an image to fit the full height of a div in the body of the page. I'm using master pages.

This is the code in the master page:

<html>
<head runat="server">
    <title></title>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>


</head>
  


<body>
    <form id="form1" runat="server">
        <nav class="navbar navbar-expand-lg  navbar-light bg-primary  fixed-top">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbar">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Item 1 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item 2</a>
                    </li>
           

Open in new window

0
Hello,

I am trying to split color in a <div> then place a transparent PNG image over the colors:

background: linear-gradient(to bottom, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, 1.0) 50%);
background-image:url(../images/header.png);

or

background-image:url(../images/header.png);
background: linear-gradient(to bottom, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, 1.0) 50%);

The latter of the 2 overrides the former.

Please advise.

Thank you,

Don
0
Hi all,

I am building a test site and it is very nearly complete, however when i have put everything in a container and given everything a background an object has disappeared.

The item class item is called 'yellow-block' and as far as I can tell it is being hidden by the container or content class.

I have attached my whole project folder;Web-Challenge-Site.zip

Would someone be able to offer advice please?

Thank you,
Josh
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.