CSS

40K

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

see1.png
How can I remove that border just for the share? when i hover over it? I dont want a class change I want just for that one, also I have no classes or styles so i think its from bootstrap itself.
0
On Demand Webinar: Networking for the Cloud Era
LVL 9
On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

I have a button and I want to have a background image but then put text vertically centered in the button how can I place the text over the image. The code I have is:

<button class="dropbtn" style="width: 100% height: 20px; background-color: #D0D5E8; margin: 0px; padding: 0px;"><img  src="button-bg.png"></button>

This way the background gives it the style but the text will always be sharp as it is not being scaled.

Thanks,
0
Not familiar with bootstrap.

See the attached image. How can I make such alignment accordingly?

SnapShot.png
1. Make the text field closer to point #1
2. Make the submit button closer to point #2

<div class="form-group">
                                    <label class="col-sm-4 control-label">Primary Contact Number:</label>

                                    <div class="col-sm-5">
                                        <label class="control-label"><input type="text" class="form-control" id="print_send_mobile" autocomplete="off"  name="print_send_mobile" required>
                                    </div>

                                    <div class="col-sm-3">
                                        <label class="control-label"><input type="submit" class="btn btn-default yellowBg" value="Send Me Passcode">
                                    </div>
                                </div>

Open in new window


Thank you.
0
We did this bootstrap html site back in 2014.  I am not that familiar with bootstrap to try and figure out what happened but today, site is whacked out.  

http://www.wiplastic.com

I am trying to fix it.  Found references to css that was commented out and I removed the comments so now this test page is looking more like the site used to look but there are still problems.

1. Font is HUGE
2. Animation doesn't work
3. Right sidebar is pushed to bottom of page
4. footer messed up


http://www.wiplastic.com/test3.html
0
I am trying to center text on the 3 widgets (3 circles with icons).  But, when I modify the css, it centers text on all pages!  Somehow I am not specifying the correct css to just modify the text in the widgets.  I tried modifying the below at it had no effect.

entry-content {
  text-align:center;}

Open in new window


http://25a.e58.myftpupload.com/
0
Can anyone recommend a wordpress plugin that is for responsive tables that I can add links to the content.  I found a bunch but none seem to let me modify table cell data to add html for links.

 I am redesigning this site and need to find a way to organize this content like they have it with the first column having links to related pages.

Old site:
http://cloverleaf.com/locations/

Beta site
http://25a.e58.myftpupload.com/locations/
Note, I just clumped this info on this page.  IT is not in a table.
0
Client wants me to add a top navigation bar (Customer Login, Driver Info, phone number and search box) ABOVE the main navigation bar.  I have seen this on other sites but not sure how to add to this studio press genesis framework wordpress site.  

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

Beta site
http://25a.e58.myftpupload.com/
0
How do I get the three green icons to center over the 3 individual widgets? I tried a bunch of stuff and it just keeps getting worse and worse.

screen shot
https://screencast.com/t/8qNvi4TbzF

beta site
http://25a.e58.myftpupload.com/

Here is what I tried and it didn't work
a.alignnone img, img.alignnone {
  display: block;
    margin: 0 auto;
}

Open in new window

0
The banner at the top of the screen disappears at times and the photo doubles up.  Of course its off and on.

<!-- Banner Overlay Begin -->
    <section class="banner-overlay hidden-sm hidden-md hidden-lg" style="background: url(assets/images/PhoneEPK.png); background-repeat: no-repeat; background-position: center; background-color: #000;">
    </section>
    <section class="banner-overlay hidden-xs" style="background: url(assets/images/TopEPK.jpg) 50% 0px / cover fixed;">
    </section>

Open in new window


http://kingjames3music.com/artist-epk.html

the other pages under bio dont have that problem.
0
Hi. I'm trying to re-use a bit of code on my site but am struggling to get it to do what I'd like it to do. I want to have a semi transparent white background around my text for a new section ID on my homepage. It's working for the Header section ID - with the following set up in the CSS styles file:
#header .header-left{
 background:rgba(255,255,255,0.5);
 padding-top:30px;
 margin-top:80px;
 border-radius:10px;
 }

Open in new window


I think this is a class of the section ID header , which has the following criteria set up in the CSS styles file:
 #header{
 background:url('../img/frontimage.jpg') center center no-repeat;
 background-size:cover; /*used to cover the entire page*/
 height:100%;
 color:#000000;
 display:flex;
 align-items:right;
 }

Open in new window


It is implemented in the HTML like this:

<div class="col-md-6 header-left">
<h1>Orangutan Japan</h1>
<br />
<h4>Teach English in Japan</h4>
 </div>  

Open in new window


I want to create the same thing for my contact section ID

I have set up the following in the CSS Style Sheet:
 /*CONTACT*/
 #contact{
 background:url('../img/people.jpg') center center no-repeat;/*Image we display in the header - top part of the webapge*/
 background-size:cover; /*used to cover the entire page*/
 height:100%;
 color:#000000;
 display:flex;
 align-items:center;
 padding:5rem 0;
}

 #contact .boxy{
 background:rgba(255,255,255,0.5);
 padding-top:30px;
 margin-top:80px;
 border-radius:10px;
}

Open in new window


And I tried to implement in the HTML like this:
<div class="container text-xs-center">
	 		 <div class ="row">
	 	 	   		<div class ="col-md-12 boxy">
						
						<h1>Contact Us</h1>
						<hr width="30%">
			  			<br><br>
						<h1><a href="contact.php">Get in touch</a></h1>
						<p><a href="contact.php">Contact us at OrangutanJapan</a></p>
			
     				</div>	
			  </div>
		
 </div><!--end the container -->  

</section>

Open in new window


But it doesn't work and I don't get the background around the text (I don't get anything). Is there something obvious I'm not doing correctly? I've been playing around with it for three hours now and can't seem to configure it correctly.
Any help would be greatly appreciated.

Many thanks.
0
New feature and membership benefit!
LVL 9
New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

I have the webmethod below and it works fine.
Now, I need to add database bind  because I have gridview inside of this page. In this case, what can i do?

 [WebMethod]
        public static string RemoveXMLData(int messageID)
        {
            string result = "";
            try
            {
                string templatePath = HttpContext.Current.Request.PhysicalApplicationPath + "UserMessages.xml";
                XmlDocument xmlDoc = new XmlDocument();
                xmlDoc.Load(templatePath);
                try
                {
                    XmlNodeList nodeList = xmlDoc.SelectNodes("Users/User[MessageID = " + messageID + "]");

                    foreach (XmlNode xn in nodeList)
                    {
                        xn.ParentNode.RemoveChild(xn);
                    }                   
                    result = "Data deleted";                    
                }
                catch { result = "Some error in node deletion"; }
                finally
                {
                    xmlDoc.Save(templatePath);
                }
            }
            catch { result = "Eror in xml file loading"; }
            return result;
        }

     html = html + "<ul class='list-unstyled'>" +
                                          "<li class='left clearfix'>" +
                                          "<span class='chat-img1 pull-left' style='vertical-align: text-top;'>" +
                                          "<i class='fa 

Open in new window

0
Hi,
To map within the following, we double-click the map area to increase its size. What is the way to "decrease" it (for showing more area)?

http://my-friend.co/RegRec2/?id=18&user_abbr=mc2&readonly=y
0
I have a table with Babies as rows.

In each row, user needs to select
  Gender (DropDownList, Male/Femal)
  then select baby Name (DropDownList)

But user cannot repeat the same selection/combo select in a different row.

How can I prevent the duplicate select options. If I use disable option, then the values do not POST to server.

__________
<tbody id="TS">
 <tr class="rowCss">        //ROW 1

<td>
  <span class="project">
    <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList">
      <option value="">Male</option>
      <option value="1">Female</option>
      <option value="2">Male</option>
    </select>
  </span>
</td>
<td>
  <input type="hidden" name="Records.Index" value="0">
    <span class="billingcodeCss">
      <select class="form-control timecodeDdlId" id="Records_0__SelectedBillingCodesFromList" name="Records[0].SelectedBillingCodesFromList">
        <option value="">John</option>
        <option selected="selected" value="5">Sam </option>
        <option value="6">Mel       </option>
      </select>
    </span>
  </td>
</tr>
<tr class="rowCss"> //ROW 2

  <td>
    <span class="project">
      <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList">
        <option value="">Female</option>
        <option value="1">Male</option>
        <option value="2">Female</option>
      </select>
    </span>

Open in new window

0
Hello CSS experts!

I have some css that I only want to affect devices that are in landscape mode.   Specifically iphone, ipad and android.  (I think that covers all popular devices :)

Here's the current css:  
.video-section iframe {
    height: 527px;
    width: 100%;
    margin-top: -80px;
}

Open in new window


Thanks!

Rowby
0
I have the word "edit" and a white line with a small diamond appearing on my site pages.

<a class="post-edit-link" href="https://tonycazeau.com/wp-admin/post.php?post=343&action=edit">Edit</a>

<a class="post-edit-link" href="https://tonycazeau.com/wp-admin/post.php?post=2459&action=edit">Edit</a>

<img alt="" src="https://tonycazeau.com/wp-content/themes/strings/images/mini_divider_n.png">

<img alt="" src="https://tonycazeau.com/wp-content/themes/strings/images/mini_divider_n.png">


I can't recall placing them on the site, but can't delete them.

https://tonycazeau.com
0
Hi all
what is the proper sintax for

<input type="text" class="form-control" requiered placeholder="Nombre de Usuario" minlength="3" maxlength="30"  name="name"/>

Open in new window


requiered is marked green
regards
0
Is it possible to make a form responsive for mobile phones that lives on another server and is pulled into a page using an iframe? This is a bill pay form. The setup provided by the merchant services vendor does have a custom CSS option via a field they provide in their page building app used to setup the fields, labels, buttons, etc. Tried it but won't work so far. Main issue is the iPhone.
0
hi all

i got this for my header

.top {
background: white;
width: auto;
height: 92px;
}

Open in new window


how to do the same for a strip at the foot of page, the same boot on foot
regards!
0
oh men, i need to improve a plain web page,
Need to add a heder, a sidebar and a footer, please you experts any idea o examples or already done layer for translate my info

regards!
0
What does it mean to be "Always On"?
LVL 4
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.

I am trying to center my icon.  I tried text-align: center, margin: 0 auto; position: absolute.  I don't know how to center the icon.  Can you help me?

Thanks
css.png
html.png
webpage-screenshot.png
0
Hi,
I have problem to show Baidu map within this
http://my-friend.co/RegRec2/?id=18&user_abbr=mc2&readonly=y

What to adjust?
0
I have this site: https://goo.gl/iwpDzp

I am having issues with the navigation drop down on touch devices only, IE: Dell Latitude E7250. To be clear, this does not include tablets or mobile devices, this problem only occurs when using these new hybrid laptop/touchscreen devices. When you "touch" an item in the navigation, nothing happens. The drop down navigation will not appear.

Navigation: https://www.dropbox.com/s/qsicl6h9knkixzq/Screenshot%202017-08-09%2017.16.10.png?dl=0
Example of screen: https://www.dropbox.com/s/0z4y7knf9var709/Screenshot%202017-08-09%2017.16.45.png?dl=0

I have searched high and low on how this can be fixed and cannot find a solution. Any help is appreciated.
0
Hi you all
some code or already function or something  
for force strong password from the user?

is for an vb.aspx developement
0
Hi there, I have some code to define/use a font (from a file), however I want use multiple.

current code:
<html>
<head>
<style>
@font-face {
	font-family: "Futura BT";
	font-style: normal;
	font-weight: 400;
	src: url("ufonts.com_futura-md-bt-medium.woff");
}
p {
    font-family: "Futura BT";
}
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>

Open in new window


What I want to do is add more fonts from files, every time I add another (copying the existing code) all fonts default to Times Roman New.

Help?
0
PriorityQuestions-SocialMedia-Onsite.jpgHave you tried to ask a Priority Question? Check out this article to learn how you can ask your questions and alter the priority of your issue to place it in front of topic Experts!
5

CSS

40K

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.