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

I have an unordered list that has some wacky formatting caused by some padding for a div that it is contained in. How can I clear out the padding or fix the vertical alignment of the list itself?
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 all,

I've pasted an example carousel from bootstrap's page of examples. I'm using bootstrap v4 and the carousel text I copied was also from bootstrap 4. However, when I view the carousel, the arrow indicators don't seem to be displayed. I assume the following part of the code relates to them:

<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>

Open in new window


I have not specified these classes in my css styles file but assumed as they are part of the v4 framework I wouldn't need to.

The entire code is here:

<!DOCTYPE html><!-- Orangutan Japan - Orangutan English Site -->
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	
    <!-- Bootstrap CSS __ these are needed to get the bootstrap framework to appear-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" 

Open in new window

0
Hi,
I use
	<asp:panel id="myPanel6" runat="server" CssClass="dia">
		确定要删除相片吗?
		<br /><br />
        <div style="text-align:center;">
		    <asp:Button id="YesButt6" OnClick="clickMe6" runat="server" Text="是"/>
		    &nbsp;&nbsp;
		    <asp:Button id="Button8" OnClick="clickNo6" runat="server" Text="否"/>
        </div>
	</asp:panel>

Open in new window


to have one confirmation to further delete record but I get
17k.png
What to adjust?
0
Hi Experts,

Is there a simple way to do a callout box (div) with CSS

Thank you.
0
jquery
node.js
css
javascript
html5

great to learn on w3schools.com because code editor is provided and examples are short


is there another w3schools.com so I can become a better beginner
not looking for 500+ characters code samples where i create entire websites
0
Hello Experts-

Wondering if there is a way for me to only show the first 30 characters when using a tooltip?  I am using the following.....

<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

Open in new window


And this in my HTML....
<div class="tooltip"><a href="#scriptURL#" target="_blank">#scriptURL#</a>
  										<span class="tooltiptext">
                                    #scriptURL#</span>

Open in new window

0
Hi all
I have a sidebar like this

.left {
float:left;
width: auto;
height:auto;
}

Open in new window


i center my image whit this one
  p.centerimg { text-align: center; }

Open in new window


my image moves to  right cos, the sidebar,
How to center dear experts!!!!
regards
0
Hello

I'm a programmer trying to learn a little css. I am doing a tutorial and I cannot see what is setting the width of the main-nav on this page

http://www.thetrueselfie.com/test.html

I think the tutorial assumes more css knowledge than I have. I  am not 100% sure where the nav bar it gets its width from. On my machine the browser styles give the body a default margin of 8px. I'm guessing then the body width is the window width less the margin. I am then guessing the div with id #container inherits the width from body and then the nav which is inside this inherits its width from the container div. But when you inspect the element I can't see this inheritance hierarchy showing this. Also not being a css person I was wondering why the nav is rendered as a block as that is not in the css unless that is again inherited

I can see the display block is inherited from body but not the width. Is there a way of seeing this inheritance?

Thanks in advance
0
								   <select  id="select_weeks" style="width:100% " class="inps form-controls">
									  
									<?php 
									
									//$week_date = $row_meal_week['date'];
									for($i=0;$i< 13;$i++) {
								    $weekNumnew = $weekNum + $i;
								    $week_date = date('Y-m-d', strtotime("$thisYear-W$weekNumnew-1"));
								    
								    
								    ?>
										<option <?=$selected_week==$weekNumnew?'selected':''?> value ="<?php echo $weekNumnew?>" ><?php echo "Week of ". date('F dS', strtotime($week_date));?></option>
									<?php 
									} ?>
									</select>

Open in new window


I have this to do a dropdown of the days, however I want to write
"Please Chose a Day" without having it break the code, because alot of my code relies on weeknum
0
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
Free Tool: Subnet Calculator
LVL 9
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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
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
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
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
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
i want to change the text field color when validation fail. i understand this can be achieve using query but i want the validation errors to be post by php because i want to validate a lot of things going to my database. for example, i want to check whether email address already exits in the database and trow an error, while at the same time using the power of jquery and css to style the text field when the error occur.

thanks in advance for your help.
0
[Webinar] How Hackers Steal Your Credentials
LVL 9
[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them.

Hi There,
On this site here
http://ballinacampers.com.au/
and scroll down to the footer, which is on every page actually,  you will notice if you hover over the latest news. or "VIEW ALL EVENTS" in the next footer widger
I would like to make it so when you hover it is NOT the colour of the background..
I have tried #footer .widget_meta ul li a:hover {} and it didn't work.
Can someone please tell me the two classes to make these hovers visable.......Black, would be great
Please help?
0
Hello all,
Im playing around with creating sortable drag and drop lists in Jquery. However, when I try to nest the lists inside another draggable list, while it seems to work, the formatting for the parent list doesnt cover its entire contents.... any ideas why this is happening?

http://www.dnx.org/list.html
0
Is it possible to within an HTML button have text that is aligned to the left and an image aligned to the right?
0
I am trying to style a sharepoint 2010 home page of an enterprise wiki. I edited the page --> Format text --> HTML and i entered my css there.
The problem is: SharePoint keeps adding .ExternalClass in front of my defined classes which prevent them from working.
0
Hello Experts,

I am trying to align the circle (the right column) to the flex-end meaning to the right-end of the column. Currently it is aligned to the left and won't move. Can someone help?

Please see this page online: https://codepen.io/IlanL/pen/ayzqwm
0
Im working with ajax toolkit tabs it is working properly but when i am adding bootstrap css files the tabs css  overwrite
Can u Help me to SOlve this problem?
Thanks in advance
0

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.