This website shows some text which is strike through. Its nowhere mentioned in the CSS or html as far as I could look. Here is the code for it,
<div style="width:100%;height:259px;background-image: url('<?php echo get_template_directory_uri(); ?>/images/child.png'); color: #f3ffcd;">
<div class="container">
<div class="row health_text">
394,000 Children die in Pakistan before their fifth birthdays due to poor access to healthcare facilities.
</div>
</div>
</div>
CSS:
font-size: 36px;
margin: 85px 0;
font-family: 'Maven Pro', sans-serif;
It seems it is the s tag which is doing that :
It has property : text-decoration: line-through;
You could use the <del></del> tags, this should be what you're looking for.
Related
In one of my page I can have two situation.
The first, in case no event found
<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
<div class="mec-skin-list-events-container" id="mec_skin_events_1210">
No event found! </div>
</div>
or this if at least event is found
<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
<div class="mec-skin-list-events-container" id="mec_skin_events_1210">
<div class="mec-wrap colorskin-custom">
<div class="mec-event-list-minimal">
<article data-style="" class="mec-event-article mec-clear mec-divider-toggle mec-toggle-202003-1210" itemscope="">
ARTICLE HERE
</article>
</div>
</div>
<div class="mec-skin-list-no-events-container" id="mec_skin_events_1210">
Nessun evento trovato! </div>
</div>
I need to hidden the first situation, I don't see the "No events found"
I have found a solution with css.
This work fine, but if I use display instead visibility, the code not work.
Work fine the "display:none" but I can't make it reappear the structure if event is found.
I have tried every value for "display" (block, flex, etc. etc.) nobody works
https://codepen.io/MarcoRM69/pen/VwLrXWb
.mec-skin-list-events-container {
visibility:hidden;
}
.mec-skin-list-events-container > div {
visibility:visible;
}
Any suggestions?
Modern browsers doesn't yet have impletemted has() pseudo-class unfortunately.
You can that easily with a JavaScript or library such as jQuery instead of using CSS. jQuery implement :has() selector.
Description: Selects elements which contain at least one element that matches the specified selector.
The expression $( "div:has(p)" ) matches a <div> if a <p> exists anywhere among its descendants, not just as a direct child.
$('.mec-skin-list-events-container').addClass("d-none");
$('.mec-skin-list-events-container:has(div)').addClass("d-block");
body {
color: green;
font-size: 1.25em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.mec-skin-list-events-container+div:not(:has(div)) {
color: black;
}
.d-none {
display: none;
}
.d-block {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
<div class="mec-skin-list-events-container" id="mec_skin_events_1210">
Nessun evento trovato! </div>
</div>
<hr>
<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
<div class="mec-skin-list-events-container" id="mec_skin_events_1210">
<div class="mec-wrap colorskin-custom">
<div class="mec-event-list-minimal">
<article data-style="" class="mec-event-article mec-clear mec-divider-toggle mec-toggle-202003-1210" itemscope="">
ARTICLE HERE
</article>
</div>
</div>
<div class="mec-skin-list-no-events-container" id="mec_skin_events_1210">
Nessun evento trovato! </div>
</div>
</div>
display: none... is not working, while visibility:hidden... is working because display: none removes the affected element from the page while visibility:hidden does not.
Since display:none removes the containing div, you cannot then ask to display the contained div.
From your codepen:
.mec-skin-list-events-container {
visibility:hidden;
/*display:none;*/
}
.mec-skin-list-events-container > div {
visibility:visible;
/*display:block;*/
}
I want to style the font/text to bold to text inside the
col-md-6 label-wrapper
I tried some css styling but does not affect the current font of my webpage when printing
.col-md-6{
display: relative;
}
.col-md-6 label-wrapper{
font-weight: bold;
}
Also I want to display it horizontaly in print, something like
purchase order: 34567
name: abcd
street: ca
qty: ty
Currently, when I print the selected html content using Javascript print function, the output looks like this
purchase order:
34567
name:
abcd
qty:
67
My content
<div class="col-md-4 order-column prod-wrapper">
<h3 class="vo-title"> Order Details </h3>
<div class="prod-row vo-content">
<div class="col-md-6 label-wrapper"> Purchase Order #: </div>
<div class="col-md-6 "> <?php echo $order[0]['po_number']; ?></div>
</div>
</div>
HTML:
<div class="col-md-4 order-column prod-wrapper">
<h3 class="vo-title"> Order Details </h3>
<div class="prod-row vo-content">
<div class="col-md-6 label-wrapper"> Purchase Order #: </div>
<div class="col-md-6 result ">3567</div>
</div>
</div>
CSS :
.col-md-6{
display: relative;
}
.label-wrapper{
font-weight: bold !important;
}
.col-md-6 {
display: inline;
}
Demo Link
Try font-weight:bold !important; or font-weight:600;
If that doesn't work, font-weight: 600 !important;
!important overrides the previous statement.
OR, if that doesn't work, play around with the .bold() function, or place the output between <b></b> or <strong></strong> tags.
On you CSS you have:
.col-md-6 label-wrapper{
font-weight: bold;
}
You forgot to set .(dot) on labe-wrapper (it's a class)
.col-md-6 .label-wrapper{
font-weight: bold;
}
To display both lines in the same line use on col-md-6
display: inline;
I'll guess You need for the font problem to use
.label-wrapper
{
font-weight: 600+ (<900) (!important if the style sheet is override by bootstrap)
}
And to get your element in one line you can use white-space: nowrap
try this,
.my-data {
font-weight:bold !important;}
<div class"col-md-6 my-data">Purchase Order#:
<span><?php echo echo $order[0]['po_number']; ?></span>
</div>
I have created my first website using instructions from the old introduction to HTML and CSS on http://codecademy.com
The code works well in the special constructor page, but now when I try to take out into the wild my HTML and CSS do not seem to link up. I try to view in a browser but no joy, I think I tried to upload the files to a file server but still no joy and tried several tutorials.
Can someone please tell me where I am going wrong? is it something to do with the CSS style sheet references at the top of the HTML?
Here is my HTML and CSS code:
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About us</li>
</ul>
<ul class="pull-right">
<li>Services</li>
<li>Prices</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Computer repairs and upgrades.</h1>
<p>Fast and friendly services for all your computer needs. Call 07952270940 for a free consultation.</p>
<p>- PC and Laptop repair to your door</p>
<p>- Virus/Malware Removal</p>
<p>- Tune up / Speed up</p>
<p>- Computer Upgrades</p>
<p>- Internet Security</p>
<p>- No-fix / No-fee Policy</p>
<p>- 7 days a week service</p>
<p>- Guaranteed work & parts
</p>
Learn More
</div>
</div>
<div class="neighborhood-guides">
<div class="container">
<h2>Neighborhood Guides</h2>
<p>We pride ourselves on openness and fairness with accurate quotes and no hidden costs.</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
Laptops
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_39726_20150729_zpsyypbc60q.jpg">
</div>
<div class="thumbnail">
Website development
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40106_20150820_zpsxs617yvx.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
PC's
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40371_20150828_zpsmabjmlys.jpg">
</div>
<div class="thumbnail">
Upgrades
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_41306_20150916_zpsw0mykfns.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
Price promise
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40001_20150814_zpsk1nnnytm.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
Security and virus removal
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/c775776e-19e5-40f4-a651-7d73434ce9d0_zpsr59jga2j.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Laptop screen repair</h3>
<p>We are specialists in laptop screen repair. We provide screens for all laptops.</p>
<p>I dunno yet</p>
</div>
<div class="col-md-4">
<h3>No-fix / No-fee Policy</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p>Learn more about hosting</p>
</div>
<div class="col-md-4">
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p>Learn about trust at Airbnb</p>
</div>
</div>
</div>
</div>
</body>
</html>
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
background-image:url('http://pcmedcenter.com/wp-content/uploads/2015/03/banner12-1920x600.jpg');
height: 470px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:0px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 15px;
color: #fff;
}
.learn-more {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.neighborhood-guides {
background-color: #efefef;
Border-bottom: 1px solid #dbdbdb;
}
.neighborhood-guides h2 {
color: #393c3d;
font-size: 24px;
}
.neighborhood-guides p {
font-size: 15px;
margin-bottom: 13px;
}
Since the third stylesheet's path is relative, you have to make sure the path is correct and you have a main.css file in the same folder as your html file.
Oh man, a few suggestions to help keep you on track!
First off copy your CSS code and store it locally. Create a web project folder and then a themes folder to keep your CSS in.
C:\web
C:\web\index.html
C:\web\themes\classic\style.css
Also avoid BootStrap like the plague! It's CSS done by server guys and it uses jQuery (CSS is client side, not server and client/server are two different mentalities). You don't need to over-complicate your understanding. Stick to HTML and CSS and "vanilla" (plain) JavaScript as adding dependencies makes your code weak and locks you in to things that you're not ready to understand whether it will benefit you or not (hint: those won't). Most people who use that stuff couldn't code vanilla if their lives depended on it so learn real code first and then consider third party stuff per project and only if it fits a given project.
Also understand that there are two parsers in browsers, HTML and XML parsers. You can serve code loose or strict; the HTML parser is loose while the XML parser is strict. Firefox is great for working with the XML parser (save your files as .xhtml) and you can still use HTML5 (it's just HTML5 served XML compatible) but when you make an error (with few exceptions) the whole page will break and you'll get an error message telling you what is wrong which is great because now that you're aware you can quickly fix it and move on.
One of the best resources is Mozilla Developer Network. Generally opt for that when looking things up. Beyond that focus on what you want to achieve and sites like http://caniuse.com/ will give you some (though not all) the insight in to what technologies exist that can be used. Good luck!
This
<link rel="stylesheet" href="main.css">
If your HTML document is not being styled correctly, then you need to make sure that href is pointing to the correct destination for your stylesheet.
If your stylesheet happens to the be in the same directory as your HTML file, you can use this to view it locally on your computer to make sure it is working as expected:
<link rel="stylesheet" type="text/css" href="./main.css">
Also, did you actually copy your CSS into a separate file called main.css? Make sure you do that.
This is kind of hard to explain but I'm trying to place a text next to another text. A picture is worth a thousand words so here's what I'm trying to achieve.
Here's a picture of what it should look like
http://imgur.com/hc3dNJx
http://i39.tinypic.com/24kxft3.jpg
And this what I have so far. As you can see, the text that I want to place next to this text is not where it should be. I'm talking about the bold text that should be on right "9.1, Date, Author".
JSFiddle
http://jsfiddle.net/NmUaX/20/
HTML
<li class="post" >
<article class="in-column" style="height:300px;"> <p class="article-title" style="font-size:26px; padding-bottom:10px;">Grumpy Cat</p><img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" height="200" width="300" style="float:left; padding-right:20px;">
<p class="excerpt" style="width:700px; line-height:20px;">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism. Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism.</p>
<p class="excerpt" style="float:right; font-size:70px; font-family:Segoe UI;"><b>9.1</b></p>
<p class="excerpt" style="float:right; font-size:14px; font-family:Segoe UI;"><b>Date: </b>2 June 2012<br/><b>Author: </b> John Smith</p>
</article>
</li>
</section>
</section>
CSS
article.in-column {
border-bottom: 1px solid #dddddd;
text-align: left;
padding-left: 25px;
padding-right: 25px;
padding-top: 15px;
}
article.in-column .excerpt {
color: #2f2f2f;
font-size: 11px;
margin: 0px;
padding-bottom: 5px;
}
p.article-title{
line-height: 19px;
margin: 5px 0px;
color: #151515;
font-weight:bold;
font-size:16px;
}
that content <p> Element you need to give width:500px; float:left
and the bold text 9.1 you need to give a line-height:50px
Check this fiddle http://jsfiddle.net/NmUaX/21/
I tried replacing your HTML (and some CSS) on the right-floating element:
<div style="float:right;">
<div class="excerpt" style=" font-size:70px; font-family:Segoe UI;">
<b>9.1</b>
</div>
<div class="excerpt" style="font-size:14px; font-family:Segoe UI;">
<b>Date: </b>2 June 2012
<br/><b>Author: </b> John Smith
</div>
</div>
if you want to float an element to the right top, it would be best to place it before the article content. Also, it would be best to wrap both elements (the 9.1 and the date) into one container before floating them to the right.
This is my first HTML to Wordpress conversion that I am doing for a bakery. I've attempted to trouble shoot with the wordpress codex and forums with non-successful responses.
The following scenarios are for a full-width page. I'm sure it's something simple (I could be wrong) but I'm not seeing it.
Scenario 1: When I type the text alone, the alignment works just fine but, the return key between paragraphs will not separate the paragraphs like it should
Scenario 2: The image alignment to the right moves only 1 sentence line next to the picture and the rest below it.
Scenario 3: When inserting an image or a table, everything moves out of the designated container (div) and losing the style set to it.
http://www.treunorth.com/pennycakes/about/
Is there a line of code I need to add to the 'page-full.php' or adjust the css to make this work?
page-full.php:
<?php /* Template Name: Page - Full Width */ ?>
<?php get_header(); ?>
<!-- Page Article -->
<div class="clear"></div>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<section id="story" class="container_16 clearfix">
<div class="story-top grid_16"></div>
<div class="story grid_16">
<h1 class="meander"><?php the_title(); ?></h1>
<p class="m500">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php edit_post_link( __( 'Edit', 'pennycakes' ), '<span class="edit-link">', '</span>' ); ?>
<?php endwhile; endif; ?>
</p><!-- .entry-content -->
</div>
<div class="story-bottom grid_16"></div>
</section>
</article><!-- #post-<?php the_ID(); ?> -->
<div class="clear"></div>
<!-- //Page Article -->
<?php get_footer(); ?>
Stylesheet:
.container_16 .grid_16 {
width: 972px;
}
/*--------------------------------
9) STORY
--------------------------------*/
#story { margin-top: 30px; }
.story-top { background: url('../css/images/bg-full-top.png') no-repeat center top; height: 30px; }
.story { background: url('../css/images/bg-full.png') repeat-y center top;}
.story h1 { font-size: 64px; color: #BF4A72; text-align: center; padding: 15px 0;}
.story p { font-size: 13px; color: #73656e; line-height: 19px; padding: 0 42px 0 42px; }
.story p.signature { background-position: 0 -949px; font-size: 26px; line-height: 51px; margin-bottom: 20px; margin-left: 42px; margin-top: 24px;}
.story-bottom { background: url('../css/images/bg-full-bottom.png') no-repeat center top; height: 31px;}
The table has no width, neither has the cells in it. So styling it is not easy...
The paragraph tag has some styles also. Like a line height of 19px f.x and more.
Also most styles isn't inherited from the div to a table that is in it. You need to ad some styles to the table also.
You have missed few paragraph tags. Put these text in paragraph tag in about page
<p>I am a trained chef. I went to school at the California Culinary Academy in San Francisco. There I took courses in baking. Through my journey of gaining experience in the field I spent a year of that working in a bakery specializing in cake decorating. Post bakery my cake journey has gained me experience state side and 2 years in Finland baking cakes in restaurants and for family and friends.</p>
and
<p>I am a trained chef. I went to school at the California Culinary Academy in San Francisco. There I took courses in baking. Through my journey of gaining experience in the field I spent a year of that working in a bakery specializing in cake decorating. Post bakery my cake journey has gained me experience state side and 2 years in Finland baking cakes in restaurants and for family and friends.
</p>