I can't seem to position the image around the text. I am working with wordpress. I tried many solutions with the float property with no effect. The content is placed in an inner content div, maybe that will help. The html is like the following:
img class="alignright size-medium" src="http://www.puregraze.com/images/paginas/114_kaas_klein.jpg" alt="Puregraze Graskaas" width="640" height="480"
around this text:
<h2>De Graskaas van Pure Graze®: lang verwacht, toch gekomen!</h2>
<h2>Gra(a)skaas</h2>
Een heerlijke kaas, romig, gemaakt van volle melk!
Ze smaakt pittig, is jong voor haar leeftijd en smelt op je tong!
De nasmaak is prettig en fris.
Dat is Pure Graze® Gra(a)sKaas!
Deze kaas is gemaakt met behulp van alleen natuurlijke middelen en is, door het gebruik van microbieel stremsel, ook geschikt voor vegetariërs.
Ga naar 1 van de <a title="verkooppunten graskaas" href="http://puregraze.com/consument-retail-horeca/waar-te-koop/is-pure-graze-vlees-verkrijgbaar/" target="_blank" rel="noopener">verkooppunten</a> of bestel de Pure Graze® Gra(a)sKaas in onze <a title="Graskaas webwinkel" href="http://puregraze.com/webwinkel/" target="_blank" rel="noopener">webwinkel</a>.
Geniet er van!
This how it is supposed to look like:
https://www.google.nl/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjBypOVwb3VAhXDYlAKHXSXAJ4QjRwIBw&url=https%3A%2F%2Fblog.spoongraphics.co.uk%2Ftutorials%2Fwrapping-text-around-an-image-in-illustrator&psig=AFQjCNFeNvCD88DZijVS12b68drJuctu1w&ust=1501933696149010
Is this what you need? You have to view full page because of the size of the image.
EDIT: I changed the size of the image
img { float: left; margin-right: 1em; }
<img class="alignright size-medium" src="http://www.puregraze.com/images/paginas/114_kaas_klein.jpg" alt="Puregraze Graskaas" width="320" height="240">
<h2>De Graskaas van Pure Graze®: lang verwacht, toch gekomen!</h2>
<h2>Gra(a)skaas</h2>
Een heerlijke kaas, romig, gemaakt van volle melk! Ze smaakt pittig, is jong voor haar leeftijd en smelt op je tong! De nasmaak is prettig en fris. Dat is Pure Graze® Gra(a)sKaas! Deze kaas is gemaakt met behulp van alleen natuurlijke middelen en is,
door het gebruik van microbieel stremsel, ook geschikt voor vegetariërs. Ga naar 1 van de <a title="verkooppunten graskaas" href="http://puregraze.com/consument-retail-horeca/waar-te-koop/is-pure-graze-vlees-verkrijgbaar/" target="_blank" rel="noopener">verkooppunten</a>of bestel de Pure Graze® Gra(a)sKaas in onze <a title="Graskaas webwinkel" href="http://puregraze.com/webwinkel/" target="_blank" rel="noopener">webwinkel</a>. Geniet er van!
Related
I already use border-spacing, border-collapse, padding to reduce the space, but it doesn't reduce the space as much as I wanted to. Can we reduce more than this?
before added border spacing :
after added border spacing etc:
no se como tengas colocadas las etiquetas, pero si los elementos que estan dentro de la celda estan contenidas dentro de un div podrias añadirle a la clase propiedad tipo asi :
div class="row-12" dado que al igual que el column el ancho max es de 12
I have this code and I'm using this HTML validator to check it: https://validator.w3.org
When I've put this code through it, one error that appeared was:
Element arcticle not allowed as child of element main in this context
which I don't really understand.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vuestras mascotas</title>
</head>
<body>
<header>
<nav>
Inicio
Informacion
Formulario
Vuestras mascotas
FAQ
</nav>
</header>
<main>
<h1>Vuestras mascotas</h1>
<arcticle>
<h2>Estas son alguna de vuestras mascotas:</h2>
<section>
<h3>PatoLucas</h3>
<p>Subespecie: Anatino</p>
<p>Hola! Me llamo PatoLucas. Soy un pato de 4 años! Me gusta mucho nadar en la piscina y soy un poco
travieso jijiji. Me encanta graznar a las 05:00am y despertar a mi familia.</p>
<img src="imagenes/pato1.png" alt="PatoLucas" width="250" height="250">
</section>
<section>
<h3>Paquito</h3>
<p>Subespecie: Tardonino</p>
<p>Mi nombre es Paquito. Soy un pato que le encanta viajar en furgoneta con sus dueños. Mi ultima
aventura ha sido recorrernos todo Europa en furgoneta. Sigueme en mi canal de youtube
#paquitoViajerito y se mi nuevo amigo de aventuras.</p>
<img src="imagenes/pato2.png" alt="Paquito" width="250" height="250">
</section>
<section>
<h3>Lazo</h3>
<p>Subespecie: Mergino</p>
<p>Encantada :) me llamo Lazo. Soy una patita de Portugal que le encanta robar lazos. Soy mas bien
tranquilita, y me gusta quedarme en el sofa sentada junto a mi familia. Me gusta mas la comida de
mis dueños que la mia, pero no me suelen dar :(</p>
<img src="imagenes/pato3.png" alt="Lazo" width="250" height="250">
</section>
</arcticle>
</main>
<footer>
<p>© 2021 Tyler de Mier</p>
</footer>
</body>
</html>
Here's the full error message from validator.w3.org:
Error: Element arcticle not allowed as child of element main in this context. (Suppressing further errors from this subtree.)
From line 22, column 9; to line 22, column 18
>↩ <arcticle>↩
Here's line 23:
<main>
<h1>Vuestras mascotas</h1>
<arcticle> <-- Line 23
<h2>Estas son alguna de vuestras mascotas:</h2>
Very simply: "arcticle" isn't a valid HTML element name. It's probably just a typo. Try changing it (and the end tag) to article
Hi I want to make the text on the page have a photo next to using flex.
I managed to do something like that, I couldn't find your way
https://codepen.io/Kxamil/pen/OJJBRLR
It must look like this and next to the text the picture
<main class="main-aboutus">
<div class="about">
<div class="aboutimg">
<img class="aboutusimg" src="./images/buiten.png" alt="">
<!-- </div> -->
<h3 class="head-about">Over Ons</h3>
<p class="desc-about">Fritz De Meyer uit Kaprijke, is de specialist bij uitstek voor alle binnen- en
buitenschilderwerken.
Schilderwerken De Meyer werkt met kwalitatieve producten om bij de klant een perfect resultaat te
garanderen. U als klant, kiest de graad van afwerking. Wij geven daarenboven steeds decoratieadvies
U kunt ons steeds contacteren voor een vrijblijvende prijsofferte.
Wij werken met Boss, Sikkens en Herbol
</p>
</div>
</div>
</main>
If is the about div to have display:flex, you just need to create 2 div inside it, and in the first one insert the text, and in the second one the image, display:flex will give around 50% each and align horizontally
I have a request in my web api that give me a Json like this
{
"$id": "1",
"ID": 9710,
"post_author": 2,
"post_date": "31/08/2017",
"post_content": "Assim como aconteceu no primeiro Destiny, a <strong>Bungie</strong> e a <strong>Activision</strong> lançaram nesta quinta-feira (31) um trailer live action de <strong>Destiny 2</strong>, com direito a <strong>Cayde-6</strong> fazendo um discurso motivacional, lembrando que todas as coisas que você ama na Terra se foram (inclusive os cachorrinhos).<br><br><div class=\"video\"><iframe src='https://www.youtube.com/embed/UhE6B3MPsUM'></iframe></div><br><br>O trailer por <strong>Jordan Vogt-Roberts</strong> mais conhecido pelo seu trabalho em <strong>Kong: A ilha da Caveira</strong>.<br><br>A nossa aventura em Destiny 2 começa com os <strong>Guardiões</strong> buscando vingança após ter a última cidade segura na Terra destruída pela Legião Vermelha, liderada pelo poderoso <strong>Ghaul</strong>. Com isso, será necessário que exploremos novos mundos do sistema solar, em busca de armas e habilidades para vencer essa guerra e recuperar a nossa luz.<br><br><strong>Destiny 2</strong> será lançado em 6 de setembro pra <strong>Xbox One </strong>e <strong>PS4</strong>. No PC o jogo será lançado um mês depois no dia 24 de outubro.<br><br><strong>Saiba mais sobre Destiny 2</strong>",
"post_title": "Destiny 2 ganha trailer live action ao som Sabotage",
"post_name": "destiny-2-ganha-trailer-live-action-ao-som-sabotage",
"guid": "http://nextseason.com.br/?p=9710",
"meta_value": 9711,
"id_post_img": 9711,
"link_imagem": "http://nextseason.com.br/wp-content/uploads/live-action-destiny-2.jpg",
"id_post_categoria": 9710,
"category": "Games"
}
and in app using Ionic 2 i put the code
<div [innerHtml]="post.post_content"> </div>
where post.post_content is the post_content from my request.
inside the post_content has an with a embed youtube video, but when i run the, the video does not show. In debug appears like that.
<div>Assim como aconteceu no primeiro Destiny, a
<strong>Bungie</strong> e a <strong>Activision</strong>
lançaram nesta quinta-feira (31) um trailer live action de <strong>Destiny
2</strong>, com direito a <strong>Cayde-6</strong> fazendo um discurso
motivacional, lembrando que todas as coisas que você ama na Terra se foram
(inclusive os cachorrinhos).<br><br><div class="video"></div><br><br>O
trailer por <strong>Jordan Vogt-Roberts</strong>
the div element always shows empty. Someone can help me? have any idea why this occurs?
Sorry my english!
I would like to have two divs (left and right) which take each 50% of browser width and 100% of browser height (for displaying fullscreen on info display), and make the content of each div size to the availbale space. Is this possible at all?
Here is my CSS so far: http://jsfiddle.net/n3ug7/
<div class="left" id="test1">
<h1>Dit is een eerste event</h1>
<p>Dat schrijft De Morgen. Zelfs als er een bouwvergunning is verleend kan een buur alsnog protest aantekenen. Jaarlijks komen er zo'n 880 dossiers binnen bij de bevoegde instanties. De Raad voor Vergunningsbetwistingen werd in 2009 in het leven geroepen om 'snel' een beslissing te nemen in die dossiers, maar ook die kijkt dus volgens De Morgen al tegen een enorme achterstand aan. </p>
</div>
<div class="right" id="test2">
<h1>Dit is een tweede event</h1>
<p>Dat schrijft De Morgen. Zelfs als er een bouwvergunning is verleend kan een buur alsnog protest aantekenen. Jaarlijks komen er zo'n 880 dossiers binnen bij de bevoegde instanties. De Raad voor Vergunningsbetwistingen werd in 2009 in het leven geroepen om 'snel' een beslissing te nemen in die dossiers, maar ook die kijkt dus volgens De Morgen al tegen een enorme achterstand aan. </p>
</div>
Thanks!
I found a similar problem here: How to automatically resize the size of text inside a div?
And I made a little modification on your code. Replaced P with DIV and added a jQuery function: JSFiddle
$(function () {
$('#test1 div').css('font-size', '1em');
$('#test2 div').css('font-size', '1em');
while ($('#test1 div').height() + $('#test1 h1').height() < $('#test1').height()) {
$('#test1 div').css('font-size', (parseInt($('#test1 div').css('font-size')) + 1) + "px");
}
while ($('#test1 div').height() + $('#test1 h1').height() > $('#test1').height()) {
$('#test1 div').css('font-size', (parseInt($('#test1 div').css('font-size')) - 1) + "px");
}
while ($('#test2 div').height() + $('#test2 h1').height() < $('#test2').height()) {
$('#test2 div').css('font-size', (parseInt($('#test2 div').css('font-size')) + 1) + "px");
}
while ($('#test2 div').height() + $('#test2 h1').height() > $('#test2').height()) {
$('#test2 div').css('font-size', (parseInt($('#test2 div').css('font-size')) - 1) + "px");
}
});
And you can add this function to window.onresize and it will dynamically fit your text. However you are working with padding and a H1 header and that would require a little play with WHILE parameters.
Appending to window resize function:
window.onresize = function() {
... // function body
};