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
Hi,
I cannot show the message prompt properly, by the following. Why?

function showMsg0() {
    $.message({
        title: '信息',
        content: 'new或NEW是保护字,不可以选为名字简称!',
        buttons: {
            OK: {
                text: 'OK',
                btnClass: 'btn-green',
                keys: ['enter'],
                action: function () {
                    //$.alert('You clicked OK!');
                }
            },
        }
    });
    return false;
};
...
        protected void userabbr_post_change(object sender, EventArgs e)
        {
            if (tb_userabbr.Text.ToUpper() == "NEW")
            {
                Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "showMsg0()", true);
                tb_userabbr.Text = "";
                return;
            }
        }

Open in new window

0
How I can show soap XML data as text in HTML5? Pre do not work anymore. I think?
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.
0
I'm learning SASS - so this might be a stupid question.

Is it considered convention to open SSH and just leave SASS --watch running all the time?  That way I don't have to bother starting it on the server every time I start making revisions to the scss file?
0
Hi all from my first post / question. I want to create a full-width band in a page of my web site. But I couldn't achieve it at all. My website runs Wordpress and I think main div on the page doesn't let a div to stretch to be full-width. Screenshot : https://i.snag.gy/iJU61t.jpg

Page url
0
 
LVL 12

Administrative Comment

by:Andrew Leniart
Hi Ali,

What you've done here is made a "Post".  

The Post function is designed to share information with the Experts Exchange community.

To get help for problems from our Experts, please use the Ask a Question button at the top of your page.

Ask a Question

Hope that's helpful.

Andrew
EE Topic Advisor
0
 

Author Comment

by:Ali Ali
Got it, sorry. I'll pay attention to it for next time. Thanks for notice.
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
Hello - I'm trying to figure out how to override CSS to make an input box larger.

I downloaded code from github for an ng2 completer (that provides typeahead functionality).
https://github.com/oferh/ng2-completer

I'm trying to make the input box tied to the <ng2-completer> larger and am not having a lot of luck.

I'm seeing some options on-line on items to try...but many of them seem to be depreciated. I do not want to spend time trying to learn something that is being depreciated...so thought I would see if someone could provide some guidance on which method to pursue.

Some sites seem to say that specifying a css style in the components .css file...starting wit with ":host" could do the trick...but I tried that and it did not work.
Css entry:
:host .completerWidth {
  width: 650px;
}

used in HTML by:
<ng2-completer class="completerWidth"
...other completer settings...
closing >

That does not work...works on a regular input box...but not the ng-completer.

Two other items I have tried...

I tried specifying styling in the global css file and using it in the component with the ngcompleter...no luck.

I have also tried viewing the underlying code of the ng completer and determining where the width is specified so I can change it...and have not been able to pinpoint the correct place.

Any tips you can provide would be greatly appreciated.  

Thanks,
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.

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
I copied the code from an example online and included bootstrap 4 css, bootstrap js,  bootstrap.bundle.js and jquery. Looks like I got it all, but instead of displaying nice horizontal menu like in example, I am getting vertical menu on the right-hand side of the page. What am i doing wrong? It does work with Bottstrap 3.3.7 though. What can I change to get it to display correctly with Bootstrap 4?

  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

Open in new window

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
So this one is about the weirdest thing I've ever seen, but let me try to explain. I have a web page set up with multiple accordions (like these, I used this exact code): https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol.

Inside each of those accordions is a grid layout, like this one: http://www.marcorpsa.com/ee/t2716.html

Inside each grid are two inputs (uniquely named across the entire page - no repeats). When I submit the form, none of them are submitting their updated values, except for the inputs in the grids in the last accordion. If I do a var_dump($_POST), I see where the inputs are being submitted, but they don't reflect any values that were put in by the user into them (they're just submitting whatever was in them when the page loaded).

Does anyone have any ideas why this could be happening and what in the world to do to fix?
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
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
[Webinar On Demand] Database Backup and Recovery
LVL 11
[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

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
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
Hi,
When you look at this siten
http://amandawatson,com.au you can see that the html code is showing, instead of content only
I am using Visual Composer, has anyone had an experience like this?
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

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.