These coding languages are becoming more popular; however, the <p> tag is nowhere to be found in the slid

Question

These coding languages are becoming more popular; however, the <p> tag is nowhere to be found in the slid

Inspect and Fix the Code: Missing p tag when clicked

HTML

Slide up/down

<div class="slideme" class="center">    
    <h1>Hello,</h1>
    <p>Can you see Me</p>
</div>

<button class="center"> Click Me </button>

CSS

body{background-color:yellow;}

.center{
position:relative;
margin:auto;
text-align:center;}


div{
border:20px solid #660000;
margin:-20px auto;
background-color:red;
color:white;
height:600px;
width:300px;
display:none;
line-height:500px;}

.large{
border:2px solid black;}

.small{
border:2px solid black;
color:orange;}


button{
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
cursor:pointer;
padding:3px 150px 3px 150px;
text-align:center;
border-radius:20px;
font-family:Times;}

JQUERY

$(document).ready(function() {
$("button").click(function() {
    $("div").slideToggle("slow");
});});

When running the file, clicking on "Click Me" shows "Hello" but "Can you see me" is not shown. Investigate further to resolve.

jquery css html

Answer 1

Answer №1

To modify your css, simply delete the line line-height:500px;

Here is the updated code:

div {
    border:20px solid #660000;
    margin:-20px auto;
    background-color:red;
    color:white;
    height:600px;
    width:300px;
    display:none;
    /*line-height:500px;*/
}

Check out the updated Fiddle

Answer 2

To modify your css, simply delete the line line-height:500px;

Here is the updated code:

div {
    border:20px solid #660000;
    margin:-20px auto;
    background-color:red;
    color:white;
    height:600px;
    width:300px;
    display:none;
    /*line-height:500px;*/
}

Check out the updated Fiddle

Answer 3

Answer №2

Within the div, the line-height: 500px; is causing the p tag to be pushed down. Adjust it to line-height: 1.3; or another value to resolve the issue.

Answer 4

Within the div, the line-height: 500px; is causing the p tag to be pushed down. Adjust it to line-height: 1.3; or another value to resolve the issue.

Answer 5

Answer №3

If you want to achieve vertically centered text, you can make a simple adjustment to the HTML structure. One way to center text vertically is by using display:table. Here is an example of how you can modify the HTML:

<div class="slideme center"> 
    <div id="table">
    <div id="holder">
    <h1>Hello,</h1>
    <p>Can you see Me</p>
    </div>
</div>
</div>

Keep in mind that I used ids for demonstration purposes, but you can always change these to classes for better accessibility if necessary. When dealing with multiple elements like this on a page, using CSS classes would be more appropriate.

CSS:

.slideme {
    border:20px solid #660000;
margin:-20px auto;
background-color:red;
color:white;
height:600px;

width:300px;
display:none;
}

#table {
    display:table;
    table-layout:fixed;
    width:100%;
    height:100%;
}
#holder {
    display:table-cell;
    vertical-align:middle;
}

For jQuery implementation, ensure you use specific selectors to prevent unexpected behaviors. Here is an example with a class selector:

$(document).ready(function() {
$("button").click(function() {
    $(".slideme").slideToggle("slow");
});});

Check out the DEMO here: http://jsfiddle.net/8vpv1a87/3/

An important note about line-height: While this method works well for single-line text, it may not work as intended for multi-line text due to text being pushed down. Keep this in mind when applying this technique to your design.

Answer 6

If you want to achieve vertically centered text, you can make a simple adjustment to the HTML structure. One way to center text vertically is by using display:table. Here is an example of how you can modify the HTML:

<div class="slideme center"> 
    <div id="table">
    <div id="holder">
    <h1>Hello,</h1>
    <p>Can you see Me</p>
    </div>
</div>
</div>

Keep in mind that I used ids for demonstration purposes, but you can always change these to classes for better accessibility if necessary. When dealing with multiple elements like this on a page, using CSS classes would be more appropriate.

CSS:

.slideme {
    border:20px solid #660000;
margin:-20px auto;
background-color:red;
color:white;
height:600px;

width:300px;
display:none;
}

#table {
    display:table;
    table-layout:fixed;
    width:100%;
    height:100%;
}
#holder {
    display:table-cell;
    vertical-align:middle;
}

For jQuery implementation, ensure you use specific selectors to prevent unexpected behaviors. Here is an example with a class selector:

$(document).ready(function() {
$("button").click(function() {
    $(".slideme").slideToggle("slow");
});});

Check out the DEMO here: http://jsfiddle.net/8vpv1a87/3/

An important note about line-height: While this method works well for single-line text, it may not work as intended for multi-line text due to text being pushed down. Keep this in mind when applying this technique to your design.

Answer 7

Answer №4

My perspective differs from the others; I believe using line-height:500px; is perfectly acceptable. However, you can resolve your issue by enclosing both h1 and p in a container, then setting the line height on that container to your desired value.

Here is the HTML:

<div class="slideme center">
  <spanclass="sub"> 
    <h1>Hello,</h1>
    <p>Can you see Me</p>
  </span>
</div>
<button class="center"> Click Me </button>

You can add this to your CSS:

.sub {
    display: inline-block;
    line-height: 10px;   
}

Check out the Fiddle here

Note: Remember not to have more than one class attribute. Combine your classes into one class attribute with a space in between, like this:

<div class="slideme center">

.

Answer 8

My perspective differs from the others; I believe using line-height:500px; is perfectly acceptable. However, you can resolve your issue by enclosing both h1 and p in a container, then setting the line height on that container to your desired value.

Here is the HTML:

<div class="slideme center">
  <spanclass="sub"> 
    <h1>Hello,</h1>
    <p>Can you see Me</p>
  </span>
</div>
<button class="center"> Click Me </button>

You can add this to your CSS:

.sub {
    display: inline-block;
    line-height: 10px;   
}

Check out the Fiddle here

Note: Remember not to have more than one class attribute. Combine your classes into one class attribute with a space in between, like this:

<div class="slideme center">

.

These coding languages are becoming more popular; however, the <p> tag is nowhere to be found in the slid

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

My custom Material UI table is being hindered by unnecessary div tags that are interfering with my CSS styling

Issue with Javascript Promise causing failure to populate list with objects

What is the best way to trigger a modal on Bootstrap using a JavaScript/jQuery function?

Guide to connecting a different HTML page to a thumbnail image using jQuery

Utilizing JQuery to Retrieve JSONP Data from WCF

How can we eliminate all elements from jQuery except for the first and second elements?

Choose from a variety of video play options

The query does not produce a match when using the LIKE operator with the retrieved ajax data

Limit access to Google Fusion Table to specific types of maps. Eliminate Google Fusion Table for selected map formats

The textbox is not able to process the complete input string provided

Anyone faced the issue of jquery_ujs corrupting the callback URL in Rails 4, causing problems with updating screens via Ajax?

How do you keep the currently selected item in a dropdownlist that has been populated with jQuery AJAX after a postback?

What is the best way to make the buttons on my website shift downwards?

What is the best way to dynamically alter HTML elements on my webpage?

Toggle nested menu within another submenu

What strategies can we implement to reduce the gutter width in Bootstrap 3?

Retrieving information from an AJAX callback

Utilize AJAX to invoke a Web Service

Creating a CSS design where the border is contained within an element, especially when the border radius is specified

Error 404: Django is unable to locate the static/css files