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
Related
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
This question already has answers here:
How to wrap text inside to different paragraphs around image inside the first paragraph (<p> tag). (Content is inputted using CKeditor Plugin)
(5 answers)
Closed 4 years ago.
I am using CKeditor to input RichText.
Inside the text area of CKEditor, the text is perfectly wrapped over the image.
But the text is not wraping on the html page.
This is how it looks in CKeditor
But my html looks like this.
What may be I am missing here. ?
Here is the actual code snippet
<p>Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups under
<img alt="" src="/media/uploads/2018/09/27/sufs5o_fWCbPPM.jpg" style="float:right; height:1080px; width:420px">
Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. .
</p>
<p>s settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.</p>
<img align="right" hspace="3px" vspace="3px" alt="" src="/media/uploads/2018/09/27/sufs5o_fWCbPPM.jpg" style="height:1080px; width:420px">
Try this on
.floatright {
float: right;
clear: right;
position: relative;
margin: 0 0 0.5em 0.5em;
}
<div style="text-align:justify;margin:6px">
<img src="//upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Mandala1_detail.jpg/150px-Mandala1_detail.jpg" width="150" height="173"
class="floatright"
>
<p>
El arte budista tiene su origen en el subcontinente indio (actuales India, Bangladés, Nepal y Pakistán) en los siglos posteriores a la vida de Siddhartha Gautama, el Buda histórico, entre los siglos vi y v a. C. Más tarde, gracias al contacto con otras culturas, logró evolucionar y difundirse por el resto de Asia y el mundo.
Una primera etapa, llamada preicónica, se sitúa antes del siglo i d. C. y se caracteriza por no recurrir a representaciones directas de Siddhartha Gautama como el Buda Śākyamuni o de los budas míticos que se suponen existieron en eras pasadas. La etapa siguiente, icónica, tiene por el contrario a la imagen humana del Buda y los budas del pasado, del futuro y de otros universos como símbolo central de sus obras de arte.
Desde entonces, el arte budista se diversificó y evolucionó para adaptarse a las nuevas regiones en las que comenzaba a sumar adeptos. Se expandió hacia el este y el norte a través de Asia Central, para formar lo que luego fue clasificado como arte budista del norte —en contraposición al arte budista del sur, que surgiría en el sudeste de Asia. En India, el arte budista floreció e incluso llegó a influir en el desarrollo del arte hindú, hasta que el budismo casi desapareció alrededor del siglo x, con la expansión del hinduismo y el islam.
</p>
<p>
El arte budista tiene su origen en el subcontinente indio (actuales India, Bangladés, Nepal y Pakistán) en los siglos posteriores a la vida de Siddhartha Gautama, el Buda histórico, entre los siglos vi y v a. C. Más tarde, gracias al contacto con otras culturas, logró evolucionar y difundirse por el resto de Asia y el mundo.
Una primera etapa, llamada preicónica, se sitúa antes del siglo i d. C. y se caracteriza por no recurrir a representaciones directas de Siddhartha Gautama como el Buda Śākyamuni o de los budas míticos que se suponen existieron en eras pasadas. La etapa siguiente, icónica, tiene por el contrario a la imagen humana del Buda y los budas del pasado, del futuro y de otros universos como símbolo central de sus obras de arte.
Desde entonces, el arte budista se diversificó y evolucionó para adaptarse a las nuevas regiones en las que comenzaba a sumar adeptos. Se expandió hacia el este y el norte a través de Asia Central, para formar lo que luego fue clasificado como arte budista del norte —en contraposición al arte budista del sur, que surgiría en el sudeste de Asia. En India, el arte budista floreció e incluso llegó a influir en el desarrollo del arte hindú, hasta que el budismo casi desapareció alrededor del siglo x, con la expansión del hinduismo y el islam.
</p>
</div>
Hi guys i have an image side by sdie with some text and i am trying to get it to appear below the text on a mobile device but right now its appearing above it, I'm using bootstrap 3.
html:
<div class="row">
<div class="col-xs-12 col-md-6 ">
<div class="about-img"><img src="img/about.jpg" class="img-responsive" alt=""></div>
</div>
<div class="col-xs-12 col-md-6">
<div class="about-text">
<h2>Title</h2>
<hr>
<p>Bryggeriet är en restaurang, sportbar och nattklubb som ligger mitt på Avenyn i Göteborg. Sedan vi öppnade portarna 1993 har vi varit ett självklart val för alla som vill äta riktigt god mat, ta en trevlig lunch, följa sitt favoritlag i Sportbaren, komma förbi på en after work eller dansa helgnatten lång. Eller om man bara vill beställa någonting gott att dricka i en avslappnad och gemytlig miljö.</p>
<p>Hos oss kan och bör du förvänta dig mat som är en fröjd för både ögat och magen. Här står maten i fokus och vi tillagar alla våra rätter från grunden. Det betyder att du får fräsch mat som tillagas när du beställer den, gjord på råvaror av högsta kvalitet. Vi tar inga genvägar, utan serverar endast sådant som vi själva skulle uppskatta att få på tallriken..</p>
</div>
</div>
</div>
CSS:
#media only screen and (max-width: 768px) {
}
I have tried to float the element and then use clear:both but i cant seem to get anything to work to make the image appear at the bottom od the div below all the text.
Thanks
You could use the following bootstrap push and pull classes on medium and up screens;
col-md-pull-6, col-md-push-6
This will reorganise the flow of content - for example: https://jsfiddle.net/hfwr6n8z/2/
You should also restructure your HTML, and place the image wrapper div last in the DOM, so it is displayed last on small screens.
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!
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
};