Long(ish) time lurker, first time poster! Apologies if this has been asked a 1000 times I am new to coding and I am currently working on a project with Codecademy and I was hoping someone would be able to provide some help...
I am tasked with replicating the layout you can see in the screenshot below. However I am unable to get any further as I cannot for the life of me get text to appear centered and to the right of the image. The closest I have gotten previously is the text will appear to the top right of the image. I am using a file for html and a seperate style sheet if that helps.
how it should look
how mine looks
This is my HTML code so far
<div class="flex-content" id="banner">
<img class="img2"><img src="images/banner.jpg"></div>
<div class="supporting-content">
<h3>Learn something new every day</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><a class="button" href="#">Start here</a>
</div>
</div>
Any guidance would be hugely appreciated!
Alikin
use flexbox and "flex-direction: row;"
I was wondering if anyone could suggest a shorthand for html coding specifically in naming classes and ids or just designating html elements. Currently with regular html i am forced to write:
<div class='class1'> <div id='id1'> </div> </div>
It seems kind of heavyhanded to me having to write div class='' or div id='' , each time. I keep writing the same type of thing over and over again. I know its normal but it doesnt seem optimal at all. Is there another way this can be written either in standard html, html5 or using a other markup language or preprocessor that still maintains the <> symbols but replaces div class= or div id = with something allittle less verbose? but equally expressive? Thank you.
You could try an HTML pre-processor such as HAML (http://www.haml.info).
With HAML, your code would go from this:
<div class='class1'> <div id='id1'> </div> </div>
to this:
.class1
#id1
And something a little more complicated like this:
<html>
<body>
<h1 class="heading title">Heading</h1>
<p class="paragraph description">Lorem ipsum dolor sit amet...</p>
</body>
</html>
could be written in HAML like this:
%html
%body
%h1.heading.title Heading
%p.paragraph.description Lorem ipsum dolor sit amet...
I'd recommend you to take a look at pug https://pugjs.org/api/getting-started.html
Okey, this is the code i have:
[lazy_load_box effect="slidefromright" speed="550" delay="80"]
[hero_unit text="Progressive business thinking
Lorem ipsum dolor sit amet, conse ctetur" btn_text="soporte 24/7 <br> 123456" btn_link="http://localhost/wordpress/donec-porta-diam-eu-massa/aliquam-erat-volutpat/" btn_style="primary" btn_size="normal" target="_self"]
[/lazy_load_box]
This is part of a code from a wordpress template, i tried to make a jump line here:
btn_text="soporte 24/7 <br> 123456"
But it doesn´t work it just write in the page:
SOPORTE 24/7 <BR> 123456
I hope someone know about this. I'm new working with templates.
Thanks for your time.
Because this line isn't supporting html codes. You should find the html source of this line. So, you can add the br tag after find it.
I would like my tinymce editor to allow all the html elements, include some nested kind.
I read the documents at tinymce: http://www.tinymce.com/wiki.php/Configuration:valid_elements
And also confirmed by this post on Stackoverflow: TinyMce Allow all Html tag
I use valid_elements :"*[*]", in my tinymce options:
$('.page-tinymce-editor').tinymce({
theme: 'advanced',
theme_advanced_buttons1: "fontsizeselect,bold,italic,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink,code,image,uploadimage,uploadattachment",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
width : "660px",
height: "1200",
body_id :"article",
valid_elements :"*[*]",
skin: "wp_theme",
relative_urls: false,
content_css: "http://" + location.host + "/assets/screen.css",
plugins: 'uploadimage,uploadattachment'
})
But there's a nest condition in my html is still remove by tinymce. I have a piece of html like the following:
<span class="text">
<p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</span>
which becomes this :
<p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
Tinymce removes the span outside the p tag. Other span tag are all fine. I studied the tinymce over and over, but didn't come out any idea to fix this.
Is there way to fix it?
Thanks a lot
You will need to adjust the valid_children setting! I guess p-tags are not defined/allowed al child noddes of spans by default.
I think this could not be done on tinymce side. Here is the post talking about it at Tinymce forum: http://www.tinymce.com/forum/viewtopic.php?pid=98807#p98807
Try something like extended_valid_elements : '+span[p]', in addition to the valid_children setting discussed above. And make sure to clear your cache entirely to make sure its not serving your old config file.
This should allow p to be a child of span
More information on that topic:
Alan Storm on Magento TinyMCE
Pixafy - Overcoming Magento's TinyMCE
I know this is an old topic but it still ranks high in the search results so hopefully it will help someone.
I am trying to create a pre-formatted block of text using the pre element where there are sometimes a few blank lines in between the content. The problem is that occasionally the text breaks onto a separate line after either a forward slash(/) or colon(:)
An example is as follows:
<pre>Lorem ipsum dolor sitat: http://wwww.site.com/foo/bar</pre>
Displays as:
Lorem ipsum dolor sitat: http://wwww.site.com/foo
/bar
Does anyone know how to resolve this?
I'm with #Kyle, without seeing the page itself I think that it is too long for the container that you have it in, so maybe make the text smaller or widen the container and see if that helps.
I tried:
<html>
<pre>Lorem ipsum dolor sitat: http://wwww.site.com/foo/bar</pre>
</html>
and didn't get any line breaks.