Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

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

http://wave.webaim.org/ Does anyone have experience with this free tool?
I have three "RED" errors that need to be repaired they show up as EMPTY BUTTON next to the (3) mentions of button below in the code. I need to repair this

</div></div><div id="cboxOverlay" style="display: none;">
11<div id="colorbox" class="" role="dialog" tabindex="-1" style="display: none;"><div id="cboxWrapper"><div><div id="cboxTopLeft" style="float: left;"><div id="cboxTopCenter" style="float: left;"><div id="cboxTopRight" style="float: left;"></div><div style="clear: left;"><div id="cboxMiddleLeft" style="float: left;"><div id="cboxContent" style="float: left;"><div id="cboxTitle" style="float: left;"><div id="cboxCurrent" style="float: left;">
1<button type="button" id="cboxPrevious">
1<button type="button" id="cboxNext">
1<button id="cboxSlideshow">
<div id="cboxLoadingOverlay" style="float: left;"><div id="cboxLoadingGraphic" style="float: left;"></div><div id="cboxMiddleRight" style="float: left;"></div><div style="clear: left;"><div id="cboxBottomLeft" style="float: left;"><div id="cboxBottomCenter" style="float: left;"><div id="cboxBottomRight" style="float: left;"></div></div><div style="position: absolute; width: 9999px; visibility: hidden; display: none; max-width: none;"></div>
</body></html>
0
Keep up with what's happening at Experts Exchange!
LVL 11
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Please help with my JQuery click logic.
currently I can only hide the mobile menu when I click the menu button. I want it to hide when we click on any menu item or anywhere outside the menu as well. What I cannot figure out is how to hide the main menu in mobile mode but not desktop mode and not breaking the sub-menu function.
Code below is in 3 parts first JQuery, then CSS then HTML

(function($) { // Begin jQuery
  $(function() { // DOM ready
    // If a link has a dropdown, add sub menu toggle.
    $('nav ul li a:not(:only-child)').click(function(e) {
      $(this).siblings('.nav-dropdown').toggle();
      // Close one dropdown when selecting another
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    // Clicking away from dropdown will remove the dropdown class
    $('html').click(function() {
      $('.nav-dropdown').hide();
    });
    // Toggle open and close nav styles on click
    $('#nav-toggle').click(function() {
      $('nav ul').slideToggle();
    });
    // Hamburger to X toggle
    $('#nav-toggle').on('click', function() {
      this.classList.toggle('active');
    });
  }); // end DOM ready
})(jQuery);
body {
  margin: 0;
}

nav {
  float: right;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  float: left;
  position: relative;
}

nav ul li a {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #262626;
  color: #ffffff;
  text-decoration: none;
}

nav ul li

Open in new window

0
background-colorI try to create sections on a landing page in my website. In video and text section I want to give background color to that section. The color even contains h1 and but not background of video. Where is the point I missed ? Any help really appreciated.

You can look at here deeply. Thank you so much.
0
Hi,
I did check the current .php file but I cannot find out how highlighted message would be trigger, within the Web page.

20u.png
0
Trying to get this to look good on all devices. Please help.

Page: http://www.idiaper.com/depends-diapers

It's just the top blue box with the ask-a-nurse image in it. It looks bad when I resize the screen and also on tablet and mobile.

Need the font to be big all the time. We are dealing with older people:

Sometimes text-align:center has to be inline with our cart, btw.

Looking for html and css to copy and paste in, and if you want to explain your code so I can learn that would be great.

<div id="category11">
	<div id="ask-a-nurse-cat">
	<a href="http://www.idiaper.com/Ask-A-Nurse_ep_29.html"><img class="responsive-left" 				    	src="/assets/images/ask-a-nurse-cat2.gif">
	</a>
	</div>
	<div id="cat-top-right">
	  <h1 style="font-size:120%">Depends Diapers for Adults at iDiaper.com </h1>
	Below are Depends Diapers for men and women. There's some unique items in these 				categories like the Depend Adjustable Underwear (heavy) that's a pull up but it has tabs 	on the side for adjustment as well. 
	</div>
</div>

Open in new window


#category11
{background-color:#3690cf;
padding:5px 5px;
}

#category11 h1
{
color:#fff;
font-size:20px;
}

#category11 p
{
color:#fff;
}

#category11 p a, #category11 p a.visited
{
color:#0d3d5f;
text-decoration:underline;
}

#ask-a-nurse-cat
{
display: inline-block;
width:18.289%;
height:auto;
}
#ask-a-nurse-cat img
{
display: inline-block;
width:100%;
height:auto;
}
#cat-top-right
{
width:81.7%
height:auto;
text-align:left;
display: inline-block;
vertical-align:top;
padding-left:2%;
}


@media screen and (max-width: 600px){
#ask-a-nurse-cat
{
display:block;
max-width:171px;
padding-right:10px;
padding-bottom:10px;
}


#category11
{
font-weight:normal;
}

Open in new window

0
On this page, I'm trying to center the text for the order steps vertically so that it looks better in relation to the images, It just will not cooperate. https://www.stadriemblems.com/order_process/

I'm using this CSS:

.process-text {
		display: table;
		height: 100%;

	}
	.process-text-elements {
		display: table-cell;
    	vertical-align: middle;
		height: 100%;
	}	

Open in new window


And this HTML:

 <div class="row">
       <div class="col-md-4 col-xs-12">
       <div class="process-text">
      <div class="process-text-elements">
      <div class="process-number">1</div><div class="clear-div"></div>
      <h2>Request a Quote</h2>
       <p>The first step is to let us know the basic details of your order.
We need to know the quantity, size, backing, and the date you need your order by to give you an accurate price quote. </p></div></div></div>
       <div class="col-md-8 col-xs-12">
       <img src="{% static 'images/orderprocess-uploadartwork.jpg' %}" class="img-responsive">
       </div>
       </div>

Open in new window



I assume it's not working because it's not obeying the width:100% that I have defined, but I'm not entirely sure why. Perhaps when elements are displayed as a table you can't put % height values on them? I don't know.

Is there a better way to do this?
0
Hi

Currently I am using CKPlayer for my video in the website.
But in the source code, it showed all the video url.
Is there a method to hide them?
Thank you



<div class="g-sectionWrap">
<div class="section">
<div class="m-vod">
<div class="title">Video Title</div>
<div class="playbox">
<div id="playbox" style="background-color: rgb(0, 0, 0); width:

962px; height: 400px;"><video controls=""
src="http://www.xxx.com/video/firstvideo.m3u8" id="ckplayer_a1"
width="100%" height="400" autoplay="autoplay"></video></div>

<script type="text/javascript">
var flashvars={
f:'http://www.xxx.com/video/ckplayer/firstvideo.swf',
a:'http://www.xxx.com/video/firstvideo.m3u8',
c:0,
s:4,
h:3,
p:1,
i:'',//
};
var video=['http://www.xxx.com/video/firstvideo.m3u8'];


if(navigator.userAgent.indexOf('Mobile')>0||navigator.userAgent.indexOf('Pad')>0){

var html5first = true;
}else{
var html5first = false;
}
CKobject.embed('http://www.xxx.com/statics/building/js/video/ckplayer/ckplayer.s
wf','playbox','ckplayer_a1','100%','400',html5first,flashvars,video)

</script>
</div>

Open in new window

0
I have following xml
<root>
	<Telephone>
		<ElementNumber>2</ElementNumber>
		<ElementNumber>1</ElementNumber>
		<TelephoneNumber>7865554433</TelephoneNumber>
	</Telephone>
	<Telephone>
	<TelephoneNumber>68021212111</TelephoneNumber>
	</Telephone>
</root>

Open in new window


and following xjs logic:
var nodeTravelerContact = domReq.Root.SelectSingle("Telephone[ElementNumber ='1']/TelephoneNumber | Telephone[not(ElementNumber)]/TelephoneNumber");

if ((!nodeTravelerContact || !nodeTravelerContact.NormalizedText))
	false;
else
	return true;

Open in new window

     
      
I want my function to return true because it found a Telephone where ElementNumber=1 , but my variable returns false because it does not find match (specifically, because it's searching for first position which in this case = 2). I've used .SelectNode, .Select and it never traverses through ALL ElementNumber to find match.

Please advise.
0
https://www.stadriemblems.com/products/custom-enamel-pins/

At the top of this page, I am working on some code that will allow me to use a different background image for different media queries. That part is working, but I can't figure out whether or not there's a way to make the height of the div match whatever the height of the background image is at any given time. Right now I'm using min-height, which really doesn't work, because the height will be constantly changing as the image resizes.

CSS is in enamelpins.css

Also, why is there space on the left and right on the image? How to I make it touch the sides?
0
Hello,

How do I get the buttons that are under the ask-a-nurse button on the attached screenshot (broken.png) to float left next to the nurse? Looking for 6 buttons to the right of the nurse.

Also, make sure it looks good on mobile.

Looking for html & css

<div id="nurseLinks">
<a href="http://www.idiaper.com/Ask-A-Nurse_ep_29.html"><img id="left-nurse1" alt="ask a nurse button" src="/assets/images/left-nurse2.jpg"></a>
<div id="iconDiv-nurse">
  <a href="http://www.idiaper.com/womens-diapers"><img alt="for women button" src="http://www.idiaper.com/assets/images/women-nurse2.jpg"></a><a 
  href="http://www.idiaper.com/Auto-Reorder_ep_43-1.html"><img alt="auto-reorder button button" src="http://www.idiaper.com/assets/images/auto-ship-nurse3.jpg"></a><a 
  href="http://www.idiaper.com/mens-diapers"><img alt="for men button" src="http://www.idiaper.com/assets/images/men-nurse.jpg"></a><a 
  href="http://www.idiaper.com/overnight-adult-diapers"><img alt="overnight products button" src="http://www.idiaper.com/assets/images/overnight-nurse2.jpg"></a><a 
  href="http://www.idiaper.com/adult-pullups"><img alt="pull ups button" src="http://www.idiaper.com/assets/images/pull-ups-nurse2.jpg"></a><a 
  href="http://www.idiaper.com/adult-cloth-diapers-briefs"><img alt="adult cloth diapers button" src="http://www.idiaper.com/assets/images/acd-nurse2.jpg"></a>
</div>
</div> 

Open in new window


#imgLinks-nurse {
text-align:center;
background-color:#3babdd;
}

#iconDiv-nurse {
padding-top: 0.8em;
float:left;
background-color:#59c8fd;
}

#left-nurse1
{
float:left;
width:29.2674%;
}

#iconDiv-nurse img{
width:23.2086%;
border:0;
margin-top:-5px;
flaot:left;
}

#iconDiv-nurse a{
border:0;
margin:0;
vertical-align:center;
}


@media screen and (max-width: 600px){
   #iconDiv-nurse img {width: 50.33%;}
   #leftnurse1 img {width: 100%;}
}

Open in new window

broken.png
0
What does it mean to be "Always On"?
LVL 5
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

In my navbar I have 4 buttons. "Home" "About" "Contact" "Products". How do I take these 4 buttons and have them spread out evenly across the line?navbar
0
I've got a jQuery toggle on this page:

http://sandbox.intrepidrealist.com/cazoozsb/test-page/

I'm not sure what's causing it to be dead in the water. It works in the example:

https://codepen.io/derekjp/pen/pPqwXJ
0
Hello,

page: www.idiaper.com

I am serving something different to under 600px. Everything is working right now but the code is very bloated with a lot of unnecessary items. I'm going to first attach the code that is working that I'm using, then attach some code that Slick812 gave me that is a partial solution to the bloated code that you can use to complete the clean code. Hoping Slick812 can step in, anyone else is free to help.

Thanks.

My CSS and html:

#smallhomemenu
{
height:0px;
overflow:auto;
}

#home-menu
{
background:#3babdd;
max-width:100%;
height:auto;
}

#home-menu, #home-menu .top,#home-menu .bottom
{
max-width:100%;
height:auto;
}

#home-menu, #home-menu .top,#home-menu .bottom,#home-menu .top-4-guides,#home-menu .8-minute-video,#home-menu .faq,#home-menu .glossary, #home-menu .best-6-adult-diapers
{
float:left;
padding:0px;
margin:0px;
background:transparent;
}

#home-menu .top-4-guides,#home-menu .8-minute-video,#home-menu .faq,#home-menu .glossary, #home-menu .best-6-adult-diapers
{
max-height:155px;
max-width:133px;
overflow:hidden;
background-transparent;
}

#home-menu .top
{
margin-bottom:0px;
max-width:100%;
}

.bottom
{
margin-top:-5px;
max-width:100%;
background-color:#3babdd;
}

.holder-buttons-home
{
max-width:100%;
height:auto;
}

.holder-buttons-home div {
	width: 16.666666%;
	height:auto;
	background-color:#3babdd;
}

.holder-buttons-home div img {
	width:100%;
	max-height:133px;
}


@media screen and (max-width: 600px) {

Open in new window

0
Have a well-written article.  Lots of good content.  

On top of the page is a detailed set of in-house text ads.  

First thing spiders see when arriving at the page is this word salad of ads.  Ranging from services to products, these words can be far removed from the actual content of the page.  

The page is appropriate for the advertiser.  But, the text in their ads can be far afield from the content of what we'd like the page to be indexed for.

Have heard in the past that there is a way to write HTML so one could have specific elements up at the top of the code of the page, even though those elements may themselves be physically lower on the page itself, when rendered.

So that the code of the page would look something like this

<header>
</header>
<body>
<h1s h2s and well-written content>
<batch of text ads>
</body>

While the page itself would RENDER as

Batch of Text Ads
H1s H2s and Well-Written Content

I'd seen the code for doing this in the past.  Need examples of how it could be done today.

Many thanks,

OT
0
Head out to http://brucegust.com/adm/bootstrap/sandbox.php

What you're looking at is a scaled down / streamlined version of a mess I'm trying to clean up and I'm stuck.

Bottom line: Despite the fact that you've got more than one "footer" class, I want to dictate the placement of the footer at the very bottom of the page using some inline styling. What's frustrating is that I had this working, but I'm part of a team and I'm thinking someone may have overridden some code, but no matter...

What can I put within the inline CSS that will force that footer to the bottom of the page?
0
Here's the page: https://www.stadriemblems.com/products/custom-enamel-pins/

As you can see on this page, I have text overlayed on this hero image, and in the code you'll see that the placement is defined as such

data-x="['-350','left','center','center']"

There are four different breaks where it changes. The problem is that the largest size is just too broad. If you start resizing the browser window, it doesn't take long for the text to get cut off on the left because it's still obeying the -350 requirement, (Note that I have a 27" 4k monitor).

Is this pulling from the master bootstap media query definitions? If so, is there a way to override it and define the breaks right in this code?

Also, is there a way to control which section of the image is displays at different screen sizes? When you shrink it down to phone size, all you really see is the woman's hand.

Am I making an sense at all?
0
Hi Experts,

Is there any software or tool where I will provide both content and then it will show me the difference between them as missing or modified code please?
0
Hi, I can't seem to figure out where this is coming from. I am on windows 7 using IE11. page is magickitchen.com/menu/MK-meals-portion-control.html

Here's how it should look:
correct.JPG
and how it looks on IE. I can't replicate this on any simulators.

IE.JPG
0
Hi Chris,

About the page http://kroweb.dk/gfdev/ft_raw3/

Get those bits sorted and then we can move on to the logic you've applied to your SQL code. That's going to need some working out.

Well - I have done some cleaning, and regarding that I have an initial question.

I still have a number of red lines in my main file caused by a styling of a number of the year values in a select box. I need to style these with color:red. But perhaps there is a better way to do that than the way I have done it?
<label for="aar">År</label>                
                <select id="aar" name="query_start" style=" width: 100px; margin-right: 20px; font-weight:normal; ">
                    <option value=""></option>

                    <option value="1787">1787</option> 
                    <option value="1801">1801</option> 
                    <option value="1834">1834</option>
                    <option value="1835">1835</option>
                    <option value="1840">1840</option>
                    <option value="1845">1845</option>
                    <option value="1850">1850</option>
                    <option value="1855">1855</option>
                    <option value="1860">1860</option>  
                    <option value="1870">1870</option>
                    <option value="1880">1880</option> 
                    <option value="1890">1890</option> 
                    <option value="1901">1901</option>
                    <option 

Open in new window

0
Concerto's Cloud Advisory Services
LVL 5
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Hi,

I have a page where I need to use this bootstrap stylesheet
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

Open in new window


I have also my own stylesheet which is loaded after the boostrap stylesheet.

In my own stylesheet I have set these stylings for links, but the only one that seems to have any effect is the hover. How do I make the other ones overwrite the default bootstrap styling.
    /* unvisited link */
    a:link {
        color: blue;
        text-decoration: none;
    }

    /* visited link */
    a:visited {
        color: blue ;
    }

    /* mouse over link */
    a:hover {
        color: red;
        text-decoration: underline;
    }

    /* selected link */
    a:active {
        color: blue;
        text-decoration: none;
    } 

Open in new window

0
Hi,

I have question about this, I am searching on Internet but I didnt found something similar.

I want when user in form choose date from date picker in input field, in other input field automaticaly show content, confisaction ofpicked date and current date, and show value depending on result >18 or <=18  ADULT or YOUNG.

Which is the best way to make that?
So, form will write entries to MySQL database with PHP.

Thank you
0
I'm using an HTML template and it's got a cool Pre-loader (the image that comes up briefly while the page loads). However, I'd like to swap that out for a gif image. What can I add to the existing code to achieve this?

#load {  
  z-index: 9999;
  background-color: #000000;
  opacity: 0.75;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  margin: -5px auto 0 auto;
  left: 0;
  right: 0;
  border-radius: 0px;
  border: 5px solid #FF4136;
  box-shadow: 10px 0px #000000, 10px 0px #000000;    
  animation: shadowSpin 1s ease-in-out infinite;
}

Open in new window


Thanks for your help
0
Hello,

Can you tell me the code adjustments (both html and css) to get this:

www.idiaper.com (top row of buttons and blue box)
Note that it's an online store service so sometimes you have to hard-code text-align:center

1. Looking good on all devices
2. With the circles centered at all browser widths (right now they go to the left)
3. blue background on all devices and browser widths
4. anything else that needs adjustment.

Thanks.

<div id="home-menu" style="text-align:center;background-color:#3babdd;">
<div class="holder-buttons-home" style="text-align:center">
	<div class="top" style="float:left">
	<img alt="top of menu that says, relax, breath, you've come to the right place, clickable menu below" src="/assets/images/top.gif">
	</div>
			<br>
		<div class="top-4-guides" style="float:left">
		<a href="#top-4-guides"><img alt="top 4 guides button" src="/assets/images/top-4-guides.gif"></a>
		</div>
		<div class="shop-by-category" style="float:left">
		<a href="#shop-categories"><img alt="shop-by-category button" src="/assets/images/shop-by-category.gif"></a>
		</div>
		
		<div class="8-minute-video" style="float:left">
		<a href="#8-minute-video"><img alt="8-minute-video button" src="/assets/images/8-minute-video.gif"></a>
		</div>
		
		<div class="best-6-adult-diapers" style="float:left">
		<a href="#best-6"><img alt="best-6-adult-diapers button" src="/assets/images/best-6-adult-diapers.gif"></a>
		</div>
		
		<div class="faq" style="float:left">
		<a

Open in new window

0
Just pushed site live.  Noticed that the company logo in upper left "vibrates or flashes" when you mouse over it.  Not sure why that is.  Any idea how to correct?

http://endriesexpressinc.com
0
I need to find and fix the following CSS errors on my site...

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.fortressharvard.com%2F

but am not sure where to begin.

I do have an Admin log-in and am curious how and where to make these fixes. I will do a push to BitBucket before I do any experimentation...

I was told it would take 6-8 hours to complete, and suspect that removing things flagged as unnecessary may not be as simple as it sounds.
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.