Go Premium for a chance to win a PS4. Enter to Win

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

Any idea what I am doing wrong to keep this form from correctly applying the "horizontal form" characteristics and why what should be to the right of it is below it?

Thanks in advance!
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE
LVL 5
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

We recently replaced the middle image logo (which display on all pages but home page) with code for a logo provided by the company that ranked this site.  After doing that, we noticed that the logos are no longer evenly spaced.  See screen shot below:

Site
https://rochesterinn.com/rochester-inn-room-amenities/

Screen shot
https://screencast.com/t/6JeQKW8xVA

I tried using inspector to fix but when I did and you resized site for a phone, then the left and right logo got super tiny.

Here is code provided for middle logo:
<div id="hc-ratingRatingHotel">
<div id="hc-ratingRatingHotel__inner"><img id="hc-ratingRatingHotel__ribbon" src="https://media.datahc.com/ratinghotel/stellar2/ribbon.png" />
<span id="hc-ratingRatingHotel__year">2017</span>
<span id="hc-ratingRatingHotel__award">RECOGNITION OF EXCELLENCE</span>
<div id="hc-ratingRatingHotel__hotelink"><a id="hc-ratingRatingHotel__hotelname" target="_blank"></a>The Rochester Inn</div>
<a id="hc-ratingRatingHotel__hclink" href="https://www.hotelscombined.com/" target="_blank" rel="noopener">HotelsCombined</a>

</div>
<div id="hc-ratingRatingHotel__rating"><span id="hc-ratingRatingHotel__number">9.4</span>
<span id="hc-ratingRatingHotel__pipe"></span> <span id="hc-ratingRatingHotel__ratedby">Rated by Guests</span></div>
</div>
<div id="hc-data__hotellink" style="display: none;">The_Rochester_Inn</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"> </script> 

Open in new window

0
Hi, my LinkedIn Profile badge is misbehaving (see attached image). Almost all of it looks good, but for some reason, the LinkedIn logo is aligning to the left. Going back and forth with LinkedIn's technical support for 1month+ has brought no solutions. Everything they have tried doesn't work.

FYI this is a page hosted on Blogger. I am using a custom theme. I am not an expert, but have not found anything so far that could be a conflict in the theme settings that causes this error.

Help!

LImisalignment.jpg
0
Hi,
I can see Password button below, is enabled, but why can't I press it?

http://my-friend.co/UserMaintenance2/Default.aspx?userid=mc23&readonly=n
0
I have a piece of code in this fiddle, which simulates an iphone unlock screen, and i would now like to reverse the direction of dragging to unlock such that users drag from right to left to perform the unlock actions.

and this is the fiddle:
https://jsfiddle.net/h6avtu7p/
0
How can I add background color to my inline list group:

<ul class="list-inline">
     <li class="list-inline-item">Item 1</li>
     <li class="list-inline-item">Item 2</li>
</ul>
0
Hello Experts currently our website requires CAC or PKI to get to login screen.  Is there anyway to capture CAC Id's as users login?  Rather than having 1500 users send us their CAC Id's & manually tied to their account?
0
Hello,

I recently added code from this site (https://www.w3schools.com/howto/howto_css_modal_images.asp). Everything works great except the close function. See page: http://doeringdesign.com/ED/#!/page_AP.

Does anyone have any solutions on how to close this popup? Maybe just have it link to the original page?

Thank you!
0
Below codes are working except I am not able to get loop listing  like below. My goal is to just html append to <div>
so the web page will show the UI and our end user can enter information.


 <div class="col-lg-12">
            <Input Type="text" Name="licenseNo" ID="additionalInfo_licenseNo" Onchange="fnSaveSingleData('licenseNo','1')" Placeholder="Enter License No." Class="form-control" Title="License is required!" PrefillValue="No" Required="" />
          </div>



<script> 
function fnGetBondAdditionalInformation() {
    $.ajax({
        url: "http://localhost:5489/BondList.xml",
        success: function (xml) {
            parseSelectXMLBondAdditionalInformation(xml, "test", localStorage.getItem('bondState'), localStorage.getItem('bondName'))
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Status: " + xhr.status);
            alert("Error: " + thrownError);
        }
    });
}
function parseSelectXMLBondAdditionalInformation(xml, selectid, bondState, bondName) {
    var html = "";
    var htmlOption = "";
    var additionalInfo = "";
    var selectedBondName = "";
    $('#' + selectid).prop("disabled", false);
    $(xml).find('Bond').each(function (i, e) {
        {
            if (bondState == $(e).find('GeneralInformation').find('State').text() && bondName == $(e).find('GeneralInformation').find('Name').text()) {
                selectedBondName = $(e).find('GeneralInformation').find('Name').text();
          

Open in new window

0
Hello,

I have 4 images that when you click them a large image appears. I cant figure out two things:

1. How do get them to align next to each other rather than under one another.
2. How to move the "X" lower so when you actually click the image you can see it and do not have to scroll up.

Below is my CSS and HTML code and the test website is: http://doeringdesign.com/ED/#!/page_AP

CSS:
/*Eliminates padding, centers the thumbnail */
body, html {
padding: 0;
margin: 0;

}

/* Styles the thumbnail */

a.lightbox img {
height: 200px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 0px 0px 0px 0px;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {

top: -50%;
width: 50%;
background: rgba(0,0,0,.7);
width: 50%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: 

Open in new window

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!

Hi expert,

After some searching I've found a working code snippet that works in most browsers.
But the length (in characters)of the rotated table head still determines the width of the column.
I would like to make content between the <td> tags determine the width of the column.
How can I do this with CSS? And how can I make the rotated table head valign on the bottom of its cell?

<html>
<head>
<style>
table, td, th {
  border-spacing: 0;
  border: 1px solid;
  border-collapse: collapse;
  text-align: center;
  table-layout: fixed;
  white-space: nowrap;
}

.vert > th > div {
  overflow: hidden;
}

.vert > th > div > div {
  display: inline-block;
  vertical-align: middle;
  transform: rotate(-90deg);
  line-height: 1em;
}

.vert > th > div:before {
  content: "";
  height: 0;
  padding-top: 100%;
  display: inline-block;
  vertical-align: middle;
}
td {white-space: nowrap;}

</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th colspan=3>th</th>
      <th colspan=3>th</th>
    </tr>
    <tr class="vert">
      <th><div><div>The first rotated header goes here</div></div></th>
      <th><div><div>The second rotated header goes here</div></div></th>
      <th><div><div>The third rotated header</div></div></th>
      <th><div><div>One more rotated header</div></div></th>
      <th><div><div>And even more</div></div></th>
      <th><div><div>And the last one</div></div></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td</td>
      <td>td</td>
      

Open in new window

0
I found this code which works, but where do I adjust the speed of the carousel?

https://bootsnipp.com/snippets/featured/simple-responsive-carousel
0
Dear EE experts,

We would like to ask for tech support on how to change the Top Bar background color in SharePoint 2013?
The one that have title "SharePoint" above. We want to change the blue color into other color...

I lost my notes on how to change that, and we're searching but couldn't find the one that we got before...

Thank you and hope to hear soon...
0
Hello,
Need some help to style the default checkbox . I would like to make the checkbox bigger and align the label to middle

<label>
  <input  type="checkbox" 
         ng-model="employer.isCurrentlyEmployed">
             current
       </label>
  </div>

Open in new window

Thanks
0
Hello,
I got my CSS design from my designer guy who post it on Zaplin.io please see code below:

.Rectangle {
  width: 118px;
  height: 36px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 1px 2px 4px 0 #e6e6e6;
  border: solid 1px #e6eaee;
}

.Today {
  width: 49px;
  height: 20px;
  font-family: PTSans;
  font-size: 16px;
  letter-spacing: 1.2px;
  text-align: left;
  color: #4a4a4a;
}
.Shape {
  width: 24px;
  height: 24px;
}

.Shape {
  width: 10px;
  height: 5px;
  background-color: #000000;
}

Open in new window


The result suppose to be like in zaplin which is:

Capture.PNG
Please, can somebody help with the html mokup.
Note: I have to use this CSS classes to accomplish my goal.

Thanks
0
I have an image in a div.  I am trying to get it to center.  First do I need the div?  Second I know about the block / image but I have different images on the page that I don't want affected.

<div class="skull"><img src="../../../../Logos/NewsFlash.jpg" width="200" height="275" alt="News Flash" longdesc="../../../../Logos/NewsFlash.jpg" /></div>

Open in new window


.skull {
	display: block;
    margin: 0 auto;
}

Open in new window


www.audiodigz.com

It's the News Flash Skull.  Thank you.
0
Hi guys,
I'm trying to design something like this (please see image below) and I can't make it work:

Capture.PNG
Here is my code:

<style>


   .DHDWDG10005--total-flagged-gripes_firstsq {
  width: 214px;
  height: 219px;
  
}

.Rectangle-secondSq {
  width: 139px;
  height: 139px;
  background-color: #ffffff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.31);
  padding-left: 15px;
}

.layerFornumber {
  width: 30px;
  height: 62px;
  font-family: PTSans;
  font-size: 48px;
  letter-spacing: 3.7px;
  text-align: left;
  color: #ff4d4d;
}

.Total-Flagged-Gripes_message {
  width: 95px;
  height: 32px;
  font-family: PTSans;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 1.1px;
  text-align: center;
  color: #4a4a44;
}

.RectangleButtomsq{
  width: 118px;
  height: 36px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 1px 2px 4px 0 #e6e6e6;
  border: solid 1px #e6eaee;
}

.Today {
  width: 49px;
  height: 20px;
  font-family: PTSans;
  font-size: 16px;
  letter-spacing: 1.2px;
  text-align: left;
  color: #4a4a4a;
}

.Shapedropdown {
  width: 24px;
  height: 24px;
}

</style>

<html>
    <header>
    </header>
<body>
    <div class="DHDWDG10005--total-flagged-gripes_firstsq">
        <div class="Rectangle-secondSq">
            <div class="layerFornumber">
                4
            </div>
            <div class="Total-Flagged-Gripes_message">
                Total Flagged Gripes
            </div>
            <div 

Open in new window

0
Hello,

How do we responsively center these category buttons on all devices?

It's the shop by category buttons on this page:  http://www.usamedicalgloves.com

<div id="shop-by-category-home">
  <div class="header-home-categories">Shop By Category</div></div>
<div class="buttons-home">
  <div class="category-home"><a href="http://www.usamedicalgloves.com/disposable-nitrile-gloves.html"><img src="/assets/images/nitrile-gloves.jpg" /></a></div>
  <div class="category-home"><a href="/latex-gloves"><img src="/assets/images/latex-gloves.jpg" /></a></div>
  <div class="category-home"><a href="/vinyl-gloves"><img src="/assets/images/vinyl-gloves.jpg" /></a></div>
  <div class="category-home"><a href="/medical-gloves"><img src="/assets/images/medical.jpg" /></a></div>
  <div class="category-home"><a href="/latex-free-gloves"><img src="/assets/images/latex-free.jpg" /></a></div>
  <div class="category-home"><a href="/powdered-gloves"><img src="/assets/images/powdered.jpg" /></a></div>
  <div class="category-home"><a href="http://www.usamedicalgloves.com/synthetic-gloves"><img src="/assets/images/synthetic.jpg" /></a></div>
  <div class="category-home"><a href="/sterile-gloves"><img src="/assets/images/sterile.jpg" /></a></div>
  <div class="category-home"><a href="/cheap-disposable-gloves"><img src="/assets/images/cheap.jpg" /></a></div>
  <div class="category-home"><a href="/lab-gloves"><img src="/assets/images/lab.jpg" /></a><a></a></div>
  <div class="category-home"><a

Open in new window

0
How do I target a paragraph with an id using :first-line?
In my jsFiddle, I have a few paragraphs but I only want to target the one with an id.  See fiddle.

http://jsfiddle.net/isogunro/50kdoxo2/1/

Thanks!
0
Concerto Cloud for Software Providers & ISVs
LVL 5
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Dear,
1. I want to cut highlighted part below
2. Re-locate the button at end of 1st row, to end of 3rd row (of the whole record)

http://my-friend.co/HouseList4/Default.aspx?userid=mc23
19p.png
0
Hi, on www dot magickitchen.com, on all pages the dropdown under Menu, Support, More, all those navigation dropdowns work. Except one.

magickitchen.com/exercises/workout-videos.html - on this one, the ekko lightbox works, the videos pop up, but the navigation drop-downs are not working. Can you help?

Thanks.
0
When you create a MVC project in Visual Studio 2015, a default _Layout.cshtml page is created. The markup includes the following DIV (I changed the div a bit):
    <div class= "navbar navbar-collapse collapse navbar-fixed-top">
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("Users", "Users", "Home")</li>
            <li>@Html.ActionLink("General", "General", "Home")</li>
            <li>@Html.ActionLink("Customer Portal", "CustomerPortal", "Home")</li>
        </ul>
    </div>

Open in new window


I want to reduce the height of the div and all its elements to about 25 px,, and move the rest of the body content up to fill in the space created.
0
Hello,

I had a ticket out to add a drop down menu to my website. The code I received worked. The problem now when I go to add items to another link, it does not work on that link. I am looking for a simple way to have drop down's on my menu. Below is what I have in place now which works but only for 1 link.

Website(http://evangelosdesigns.com/#!/)

HTML:
<nav class="menu">
<ul id="menu">
  <li><a href="#!/page_Evangelos">Evangelos</a></li>
  <li><a href="#!/page_Services">Features</a></li>
  <li><a href="#!/page_Gallery">Gallery</a>
       <div>
       <a href="#!/page_Subvices">Sub&nbsp;tures</a><br />
       <a href="#!/page_Subvik">Sub&nbsp;vings</a><br />
       <a href="#!/page_Subart">Sub&nbsp;antine&nbsp;Art</a>
       </div>
  </li>
  <li><a href="#!/page_Carvings">Byzantine Art</a></li>
  <li><a href="#!/page_Carvings">Sculptures</a></li>
  <li><a href="#!/page_Carvings">Carvings</a></li>
  <li><a href="#!/page_Contacts">Contacts</a></li>
</ul>
</nav>


CSS:
.menu { float:right; padding-top:36px;}
#menu > li { float:left; margin-left:30px; position:relative;}
#menu > li div{
display: none;
text-align: center;
position: absolute;
top:22px;
left: -20px;
background: #ccc;
padding: 3px;
border-radius: 8px
}
#menu > li > a{/* display:block;*/ font:17px 'Asap', sans-serif; color:#fff; text-shadow:1px 1px rgba(0,0,0,.5);}
#menu > li > a:hover, #menu > .active > a{background: blue; }


JAVA:
<script>
var lis = …
0
I would like the below to be centered on the  page.  I'm not very good with CSS so if it needs to be modified, please feel free.

#id-block{float:left; padding: 5px;height:150px;width:100px;background-color:#FFFF99;margin:5px; }

nav{clear:left;}

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}
.clear{clear:right};
div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}


<div>Welcome to <b> Flea Market</b><br />Come join us every 2 weeks and find great stuff</div>
<div class="clear">
<div class="gallery">
  <a target="_blank" href="fjords.jpg">
    <img src="fjords.jpg" alt="Fjords" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="forest.jpg">
    <img src="forest.jpg" alt="Forest" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="lights.jpg">
    <img src="lights.jpg" alt="Northern Lights" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="mountains.jpg">
    <img src="mountains.jpg" alt="Mountains" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</div>

<!-- 

Open in new window

0
Hi,

I have a number of images that together form a perfect map. I need to upload and position these images individually, because I want to be able to use every single image as a link. It is some puzzle to get the images positioned, but it is possible :)

My problem is that the images does not maintain their relative sizing according to the originals when uploaded and displayed on the page.

I am sure that it is because I am missing something in the CSS settings. But what ??

I have these global CSS settings for the images:
   .container .image {
    position: relative;
    background-color: transparent;

}

.container:hover .image  {
    background-color: cornflowerblue;
    opacity: 0.9;
}

Open in new window


and the HTML for the images is this:
            <div class="w3-row" style="margin-left: -100px;">

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Hjørring.png" style="margin-top: 30px; margin-left: 283px; width: 100%; height: 100%; " alt="Hjørring" class= "image"> 
                </div>   
                </div>  

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Aalborg.png" style="margin-top: 110px; margin-left: 134px; width: 100%; height: 100%; " alt="Aalborg" class= "image"> 
                </div>   
                </div> 

                

Open in new window

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.