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.
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
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
In December last year, CSS3 Hyphens support supposedly came to Chrome. Also, IE should be on board, in addition to other major browsers.
Update: Upon receiving the answers below, I understand that I misinterpreted the footnote on caniuse.com. It says: 'Only supports the auto value on Mac for now'. I interpreted this as meaning 'On the Mac, only the auto value is supported for now'. But what is really meant is 'The Mac is the only platform where the auto value is supported for now'. /Update.
However, I'm having trouble implementing for either Chrome or IE. I have read several older (and now somewhat outdated) SE posts (1, 2, 3) and made a jsfiddle that unfortunately only yields the intended results in Firefox.
Supposedly, hyphenation should work in IE for my target languages, Norwegian (lang="no") and English (lang="en") without manually adding dictionaries (hyphenate-resource).
Are there modifications that can be made to the fiddle that will make the hyphenation work in IE and/or Chrome without dictionaries? If not, does anyone know a useful hyphenate-resource for Norwegian?
If not we'll have to consider using hypher or hyphenator, but I would prefer avoiding a JavaScript implementation for what I should get natively from the browser.
<!DOCTYPE html>
<html lang="nb">
<head>
<meta charset="utf-8" />
<meta http-equiv="content-language" content="no"/>
<title>hyphen tests</title>
<style>
html,body{height:100%}
.uc {
font-family: Code2000, "TITUS Cyberbit Basic", "Doulos SIL",
"Chrysanthi Unicode", "Bitstream Cyberbit",
"Bitstream CyberBase", Thryomanes, Gentium, GentiumAlt,
"Lucida Grande", "Arial Unicode MS", "Microsoft Sans Serif",
"Lucida Sans Unicode";
font-family /**/:inherit; /* resets fonts for everyone but IE6 */
font-size:100%;
}
body{
}
div.main{-moz-column-count:6;
-webkit-column-count:6;
column-count:6;
}
section, article {
margin: 0 0;
outline: 1px orange solid;
}
h2,p{
margin:0;
text-align:justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
/*word-break:break-all;*/
}
</style>
</head>
<body class="uc">
<script>document.write(document.documentElement.getAttribute('lang'));</script>
<div class="main">
<section>
<h2>none</h2>
<p>Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
<h2>no</h2>
<p lang="no">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
<h2>nn</h2>
<p lang="nn">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
<h2>nb</h2>
<p lang="nb">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
<!--<p>– Denne planen vil skape nye muligheter for folk og lokalsamfunn, og bidra til vekst og utvikling både i byer og distrikter, sier Sanner.</p>
<p>Planen for lokalisering av statlige arbeidsplasser er et vedlegg til stortingsmeldingen «Bærekraftige byer og sterke distrikter».</p>
<p>– Så langt i denne regjeringsperioden er det vedtatt å flytte ut eller etablere om lag 630 statlige arbeidsplasser utenfor Oslo. Planen beskriver også hvordan regjeringen nå skal utrede ytterligere etablering av statlig virksomhet i hele landet, sier Sanner.</p>
<p>– Når statlige virksomheter plasseres i hele landet, kan flere få spennende karrieremuligheter i det lokalmiljøet de kommer fra, og dermed kunne flytte hjem etter fullført høyere utdanning. Med ny teknologi kan statlige virksomheter drives flere steder, og samtidig være tilgjengelige både for publikum og samarbeidspartnere, sier Sanner.</p>
<p>De nye oppgavene som kan bli flyttet, finnes innen blant annet kunnskapsforvaltning, landbruksforvaltning og administrative tjenester. Blant disse virksomhetene er Politihøgskolen, Språkrådet, Fredskorpset, Likestillings- og diskrimineringsnemnda og deler av NVE.</p>
<p>- Jeg forstår godt at beskjeder som dette er krevende for de ansatte i disse virksomhetene. Nå skal vi sikre gode prosesser videre, der de ansatte skal bli hørt. Vi har også gode ordninger for ansatte i omstilling, sier Sanner.</p>-->
</section>
<section title="English">
<h2>none</h2>
<p>As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
<h2>en</h2>
<p lang="en">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
<h2>en-au</h2>
<p lang="en-au">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
<h2>en-gb</h2>
<p lang="en-gb">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
</section>
<section title="German">
<h2>none</h2>
<p>Als Designer versuchen, Erstellen von funktionalen arbeiten, sind oft wir verpflichtet, unsere Entwürfe als fertige wie möglich aussehen zu machen.</p>
<h2>de</h2>
<p>Als Designer versuchen, Erstellen von funktionalen arbeiten, sind oft wir verpflichtet, unsere Entwürfe als fertige wie möglich aussehen zu machen.</p>
</section>
</div>
</body>
</html>
I'm afraid Chrome only supports hyphens: auto on Mac for now (and mdn seems to imply only for english as well, not sure). The job to support it for Windows/Android/Chrome OS is here.
To get hyphens: auto to work in IE you have to have the correct language packs installed. I also had to use either lang="nn" or lang="nb". lang="no" didn't seem to work.
Note: I don't actually know what I'm talking about, this is just from experimenting.
A workaround (no CSS solution) for as long as you need to support browsers instead of the other way around:
Use server side hyphenation with the line break interator from ICU, and insert <wbr> tags.
Scripting languages like PHP support these kind of purposes.
Then browsers will hypthenate as dictated, and there is no need for client side JS libraries, you can do everything else with CSS.
I have the chrome google dictionary extension installed. I have a simple html page in my desktop called test.html and I kept some text in it. But when I open the page in google chrome and double click on any word it does not open any pop up box. But the extension works for any other websites.
Anything am I missing?
Here is the sample test.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="content-type" content="text/html" charset="ISO-8859-1" />
</head>
<body>
<h1>My First Heading</h1>
<p>
Till och med självmorden betedde sig illa i Wyoming Valley.
Pojken i motellrummet hade bara ett par boxershorts på sig och låg i fosterställning ovanpå det beiga, indianmönstrade sängöverkastet. Han var högst arton år gammal; halvlångt, rågblont hår, breda axlar, smal om höfterna. Runt vänster biceps var en slips stramt åtdragen, och strax intill de slutna ögonen vilade en tömd uppdragningskanyl som tycktes vara det sista han skådat i jordelivet.
Det var inte första gången George Decker, Bear Creeks polischef, såg ett lik. Han hade tjänstgjort i marinkåren under invasionen av Grenada. Och under de gångna femton åren i Pennsylvanias fattigaste region hade han tappat räkningen: jaktolyckor, bilolyckor med och utan vilt, urspårade knivslagsmål – ett och annat kallblodigt mord, till och med. Men den här gången var det annorlunda. Pojken såg mest ut att ligga och sova, även om han hade spytt ner sig. Det var något med hans ungdom, med att han inte hade råkat ut för en deformerande olycka, som gjorde det hela så mycket mer tragiskt än de fasor Decker sett efter bilkrascher och granatattacker. Det var själva frivilligheten.
För det måste vara självmord, inte en vanlig överdos. Papper och penna på ena nattduksbordet, kläder prydligt hopvikta över en stolsrygg.
Rummet var det billigaste man kunde hitta på flera mils omkrets. Väggarna hade ingen klassificerbar färg. Teven, en burkig tjugotummare som genomlevt decennier i fångenskap, stod fastkedjad ovanpå ett kylskåp med träpanel. Det lilakaklade trånga badrummet var fuktigt som en ångbastu och fläkten överröstade nästan dånet från motorvägen utanför. Alla lampor var tända, ändå var det som om mörkret där inne var för kompakt för att riktigt låta sig skingras. Mellan heltäckningsmattan och det rötskadade rågolvet hade man stoppat tidningspapper som gjorde att det frasade när man gick.
Deckers assistent, en kvinna som luktade hårfärgningsmedel var tredje vecka och alltid harklade sig när det var tyst för länge, klev åt sidan när han gick förbi och förde undan de skotskrutiga gardinerna. Genom fönstren syntes morgondimman ånga in från bergen och sakta dra ner över dalgången.
Han strök handen över skäggstubben.
”Vem är det?”
”Christopher Warsinsky”, sa assistenten och läste vidare på körkortet. ”237 Lakeron Drive. Skulle ha fyllt sjutton om två månader.”
”Bilnycklar?”
”Nej.”
”Hur kom han hit då?” Decker såg sig omkring i rummet.
”Det ligger en busshållplats tvåhundra meter bort. Eller så fick han skjuts.”
På ena nattduksbordet stod en tom, öppen medicinflaska. Decker böjde sig fram och luktade utan att plocka upp den. Ingen doft alls. Heroin, naturligtvis.
”Kolla här”, sa assistenten vid det andra bordet och lyfte papperet med en pincett.
</p>
</body>
</html>
I think it is because you are accessing to local file, so you use the "protocol" file://path/to/test.html. But I think that in your manifest.json, you have injected your content scripts by "http://*/*" pattern.
When you load local file, you don't use HTTP protocol. So you have to modify your manifest or install a local web server on your machine (like WAMP if using windows or LAMP if using linux or MAMP if using macos).
This extension doesn't work with local files. It has been suggested for future versions. A workaround suggested is importing things into google docs. I know its not an ideal solution. Good luck.
There are offline dictionary chrome extensions that will do this for you. I am not sure how they compare.
Go to the extensions page (chrome://extensions/), find Google Dictionary and click on "Details". You'll find an option that says "Allow access to file URLs".
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
};