This is the site:
http://avocat.dac-proiect.ro/wp/?page_id=14
This is the code:
http://jsfiddle.net/s0bsfdu4/
This is an image that I want to understand how I want to arrange text
http://i60.tinypic.com/308w3d2.jpg
Code HTML:
<p id="text3">Am reprezentat şi am acordat consultanţă juridică pentru clienţi persoane fizice române şi străine, instituţii publice, persoane juridice române şi străine în următoarele domenii:
<br><br>
- agricultură, exploatări agricole, prelucrarea şi comercializarea produselor agricole;
<br>
- comerţ cu produse alimentare;
<br>
- imobiliar;
<br>
- distribuţie de carburanţi;
<br>
- transporturi;
<br>
- asigurări;
<br>
- producţie şi comercializare utilaje grele;
<br>
- producţie structuri metalice;
<br>
- producţie automatizări;
<br>
- servicii de proiectare;
<br>
- comercializare automatizări;
<br>
- jocuri de noroc;
<br>
- turism, hoteluri şi pensiuni;
<br>
- medical;
<br>
- construcţii civile şi industriale;
<br>
- comercializare utilaje şi autovehicule, service auto;
<br>
- producţie software, administrarea site-urilor;
<br>
- comerţ;
<br>
- bursier, societăţi listate, investitori, fonduri de investiţii.
<br>
- asistenţă şi îngrijire copii şi vârstnici;
<br>
- exploatări forestiere şi prelucrarea lemnului;
<br>
- exploatări agricole;
<br>
- extracţia şi prelucrarea minereurilor;
<br>
- producţia şi comercializarea materialelor de construcţii;
<br>
- instituţii publice;
<br>
- instituţii religioase.</p>
Code CSS:
#text3{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;font-size: 17px;padding: 45px;margin: 100px;width: 80%;}
Basically I want to arrange text in 3 columns ... the first column to be selected text in the image and the rest of the text to be divided into 2 columns.
It can do this in CSS?
Can you help me to solve this problem?
Thanks in advance!
I've updated your fiddle. Check if is ok HERE
Related
I have a question about list items. How can I code that 3 list items are on top and 3 at the bottom. It just overflowing to the right site.
<div class="container">
<ul>
<li>
<img src="/img/snail.png">
<h1 class="h1-cite">İnternetim neden yavaş?</h1>
<blockquote>Herkes internet dehası değildir, ancak hiç kimse sayfaların yüklenmesini, videoların oynatılmasını veya sosyal medyadan en son bilgileri almayı beklemeyi sevmez. İnternetiniz yavaşsa, bunun olmasının birkaç nedeni olabilir. Sorunun internetiniz mi yoksa bilgisayarınızla ilgili bir sorun mu olduğunu belirlemenin en kolay yolu hızınızı test etmektir. Buna iki kısım dahildir: yükleme hızı, bir web sitesine resim ve video yükleme hızı ve indirme hızı, başka bir yerden ne kadar hızlı bilgi aldığınız. Hiç kimse bir video arabelleğini saatlerce tekrar tekrar izlemek istemez. En sevdiğiniz resimleri sosyal medyaya yükleyememenin hayal kırıklığını hepimiz biliyoruz. Sorunun internet hizmetinizde olup olmadığını anlamak için hızınızı test etmeniz gerekir.</blockquote>
</li>
<li>
<img src="/img/quest.png">
<h1 class="h1-cite">Ne yapmalıyım?</h1>
<blockquote>İlk ve en önemli adım internet hızınızı test etmektir; bu, sorunun bilgisayarınız, ağınız veya internet servis sağlayıcınızla ilgili olup olmadığını anlamanıza yardımcı olacaktır. Bir hız testi çözümü seçerken güvenilir bir hizmet seçmek önemlidir, çünkü yanlış sonuçlar daha fazla hayal kırıklığına neden olabilir ve üretkenliği geciktirebilir. Hız Testi Me, internet hızınızı ölçmek için içeriğe hızlı erişim sağlar, bu da sonuçları indirme ve yükleme hızlarına doğru bir şekilde bölerek yalnızca ana soruna odaklanmanıza olanak tanır.</blockquote>
</li>
<li>
<img src="/img/rocket.png">
<h1 class="h1-cite">İnternet Hızı Neden Bu Kadar Önemli?</h1>
<blockquote>İnternet hızı, çalışmanın, alışveriş yapmanın veya sadece çevrimiçi eğlenmenin kritik bir bileşenidir. İnternet hızınızı arada bir internet hız testi ile kontrol etmek, internet bağlantınızın ödediğiniz internet hızıyla aynı hizada olduğundan emin olmak önemlidir. İnternet hızınızın ne kadar hızlı olduğu, fotoğrafları ne kadar hızlı görüntüleyebileceğinizi, dosya yükleyebileceğinizi, ekleri indirebileceğinizi ve genellikle çevrimiçi olarak yaptığımız günlük aktivitelerin birçoğunu belirleyecektir.</blockquote>
</li>
<li class="content-wrap">
<img src="/img/check.png">
<h1 class="h1-cite">Neden bu hız testini kullanmalısınız?</h1>
<blockquote>Tüm DSL hızlarını ücretsiz ölçün. 60 saniye içinde bir indirme testi gerçekleştirilir. Bunu yaparken, rastgele boyuttaki veri paketleri, bağlantınız aracılığıyla ev bilgisayarına aktarılır. Buradan hesaplanan indirme hızı, kontrol edilen bağlantıya ulaşılabilecek hız hakkında bilgi sağlar. DSL veya ISDN bağlantınız olup olmadığına bakılmaksızın - hız testi sırasında bağlantının gereksiz programlar tarafından mümkün olduğunca az yüklenmesi önemlidir.</blockquote>
</li>
<li>
<img src="/img/reject.png">
<h1 class="h1-cite">DSL testi ne için kullanılamaz?</h1>
<blockquote>Hat testimiz %100 doğru sonuçlar veremez. Bununla birlikte, transfer oranlarının nispeten iyi bir tahmini için değerler çok yardımcı olabilir. Bunun temel nedeni, ölçüm üzerinde az çok büyük etkisi olan birçok parametrenin sürekli değişebilmesidir. Ölçüm sonucu, DSL sağlayıcınız için kanıt olarak kullanılamaz. Ölçüm sonuçları için garanti verilmez. Hizmet kalıcı olarak mevcut değildir.</blockquote>
</li>
<li>
<img src="/img/band.png">
<h1 class="h1-cite">Bant genişliği nedir?</h1>
<blockquote>Bant genişliği, internet dünyasında verilerin aktarılma, yüklenme veya indirilme oranını ifade etmek için kullanılan bir terimdir. Ancak bilgisayarınızın gerçek hızı yalnızca bant genişliğine değil, işlemcisine de bağlıdır. Yavaş bir işlemci ile yüksek bant genişliği, düşük performans anlamına gelir. Yavaş bant genişliğine sahip yüksek işlemci kalitesi de düşük performans anlamına gelir. Müşterilerin internet bağlantılarının hızını düzenli olarak kontrol edebilmeleri için bant genişliği hız testi sunan birçok çevrimiçi mağaza var. Sadece ücretsiz olarak tekliflerinden yararlanın ve bilgisayarınızın neler olduğunu görün.</blockquote>
</li>
</ul>
</div>
You can use css flex (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).
Youll need to set your ul to become a flex element and allow flex content to break into new lines.
display: flex;
flex-wrap: wrap;
Then set the flex property of your li to make the li's take 1/3rd of the width:
flex: 0 0 33.3333%;
For completeness, flex: 0 0 33.3333%; is a shorthand for:
flex-shrink: 0;
flex-grow: 0;
flex-basis: 33.3333%;
Also reset the browser default margin on blockquote to make everything fit nicely.
I put everything together in a snippet down below.
ul {
display: flex;
flex-wrap: wrap;
}
ul li {
flex: 0 0 33.33%;
}
blockquote {
margin: 0;
}
<div class="container">
<ul>
<li>
<img src="/img/snail.png">
<h1 class="h1-cite">İnternetim neden yavaş?</h1>
<blockquote>Herkes internet dehası değildir, ancak hiç kimse sayfaların yüklenmesini, videoların oynatılmasını veya sosyal medyadan en son bilgileri almayı beklemeyi sevmez. İnternetiniz yavaşsa, bunun olmasının birkaç nedeni olabilir. Sorunun internetiniz
mi yoksa bilgisayarınızla ilgili bir sorun mu olduğunu belirlemenin en kolay yolu hızınızı test etmektir. Buna iki kısım dahildir: yükleme hızı, bir web sitesine resim ve video yükleme hızı ve indirme hızı, başka bir yerden ne kadar hızlı bilgi
aldığınız. Hiç kimse bir video arabelleğini saatlerce tekrar tekrar izlemek istemez. En sevdiğiniz resimleri sosyal medyaya yükleyememenin hayal kırıklığını hepimiz biliyoruz. Sorunun internet hizmetinizde olup olmadığını anlamak için hızınızı
test etmeniz gerekir.</blockquote>
</li>
<li>
<img src="/img/quest.png">
<h1 class="h1-cite">Ne yapmalıyım?</h1>
<blockquote>İlk ve en önemli adım internet hızınızı test etmektir; bu, sorunun bilgisayarınız, ağınız veya internet servis sağlayıcınızla ilgili olup olmadığını anlamanıza yardımcı olacaktır. Bir hız testi çözümü seçerken güvenilir bir hizmet seçmek önemlidir,
çünkü yanlış sonuçlar daha fazla hayal kırıklığına neden olabilir ve üretkenliği geciktirebilir. Hız Testi Me, internet hızınızı ölçmek için içeriğe hızlı erişim sağlar, bu da sonuçları indirme ve yükleme hızlarına doğru bir şekilde bölerek yalnızca
ana soruna odaklanmanıza olanak tanır.</blockquote>
</li>
<li>
<img src="/img/rocket.png">
<h1 class="h1-cite">İnternet Hızı Neden Bu Kadar Önemli?</h1>
<blockquote>İnternet hızı, çalışmanın, alışveriş yapmanın veya sadece çevrimiçi eğlenmenin kritik bir bileşenidir. İnternet hızınızı arada bir internet hız testi ile kontrol etmek, internet bağlantınızın ödediğiniz internet hızıyla aynı hizada olduğundan emin
olmak önemlidir. İnternet hızınızın ne kadar hızlı olduğu, fotoğrafları ne kadar hızlı görüntüleyebileceğinizi, dosya yükleyebileceğinizi, ekleri indirebileceğinizi ve genellikle çevrimiçi olarak yaptığımız günlük aktivitelerin birçoğunu belirleyecektir.</blockquote>
</li>
<li class="content-wrap">
<img src="/img/check.png">
<h1 class="h1-cite">Neden bu hız testini kullanmalısınız?</h1>
<blockquote>Tüm DSL hızlarını ücretsiz ölçün. 60 saniye içinde bir indirme testi gerçekleştirilir. Bunu yaparken, rastgele boyuttaki veri paketleri, bağlantınız aracılığıyla ev bilgisayarına aktarılır. Buradan hesaplanan indirme hızı, kontrol edilen bağlantıya
ulaşılabilecek hız hakkında bilgi sağlar. DSL veya ISDN bağlantınız olup olmadığına bakılmaksızın - hız testi sırasında bağlantının gereksiz programlar tarafından mümkün olduğunca az yüklenmesi önemlidir.</blockquote>
</li>
<li>
<img src="/img/reject.png">
<h1 class="h1-cite">DSL testi ne için kullanılamaz?</h1>
<blockquote>Hat testimiz %100 doğru sonuçlar veremez. Bununla birlikte, transfer oranlarının nispeten iyi bir tahmini için değerler çok yardımcı olabilir. Bunun temel nedeni, ölçüm üzerinde az çok büyük etkisi olan birçok parametrenin sürekli değişebilmesidir.
Ölçüm sonucu, DSL sağlayıcınız için kanıt olarak kullanılamaz. Ölçüm sonuçları için garanti verilmez. Hizmet kalıcı olarak mevcut değildir.</blockquote>
</li>
<li>
<img src="/img/band.png">
<h1 class="h1-cite">Bant genişliği nedir?</h1>
<blockquote>Bant genişliği, internet dünyasında verilerin aktarılma, yüklenme veya indirilme oranını ifade etmek için kullanılan bir terimdir. Ancak bilgisayarınızın gerçek hızı yalnızca bant genişliğine değil, işlemcisine de bağlıdır. Yavaş bir işlemci ile
yüksek bant genişliği, düşük performans anlamına gelir. Yavaş bant genişliğine sahip yüksek işlemci kalitesi de düşük performans anlamına gelir. Müşterilerin internet bağlantılarının hızını düzenli olarak kontrol edebilmeleri için bant genişliği
hız testi sunan birçok çevrimiçi mağaza var. Sadece ücretsiz olarak tekliflerinden yararlanın ve bilgisayarınızın neler olduğunu görün.</blockquote>
</li>
</ul>
</div>
I'm creating a website for a class and I need a part of the <p> to have a certain padding but it's only applying to the first line.
The HTML is :
<p>
Some text
<span class="tabulation">
Une ambiance conviviale
<br>
Durant l'été, une grande terrasse ensoleillée
<br>
En hiver, une verrière chauffée
<br>
De l'espace de stationnement
<br>
Un chef cuisinier d'expérience
<br>
Des salles privées pour les repas de groupe
<br>
Un menu pour enfant
<br>
Une vue sur le fleuve
</span>
</p>
What happens is that the span only applies to the first line. I know it's from the br, but I don't know how could I make it work. Thank you
Depending on what you're trying to achieve, try making your span display:block or display: inline-block
.tabulation {
padding: 2em;
display: block;
}
<p>
Some text
<span class="tabulation">
Une ambiance conviviale
<br>
Durant l'été, une grande terrasse ensoleillée
<br>
En hiver, une verrière chauffée
<br>
De l'espace de stationnement
<br>
Un chef cuisinier d'expérience
<br>
Des salles privées pour les repas de groupe
<br>
Un menu pour enfant
<br>
Une vue sur le fleuve
</span>
</p>
Also, see understanding inline box model
Rather than relying on the <br/> element - I would use spans with display: block applied to them - this will force them to be on individual lines and will allow you to apply styling directly to them for the padding etc.
Alternatively - if the children items are a list with the text at the top as a heading - you could use a <ul> or a <dl>. The advantage of a <dl> is that you get the <dt> element to provide the headings and the <dd> elements are already block level elements so you just need to space them out as desired.
.tabulation span {
display: block;
padding: 8px 16px;
}
.tabulation dd {
padding: 8px 16px;
margin: 0
}
<p class="tabulation">
Some text (using spans to show the items)
<span>Une ambiance conviviale</span>
<span>Durant l'été, une grande terrasse ensoleillée</span>
<span>En hiver, une verrière chauffée</span>
<span>De l'espace de stationnement</span>
<span>Un chef cuisinier d'expérience</span>
<span>Des salles privées pour les repas de groupe</span>
<span>Un menu pour enfant</span>
<span>Une vue sur le fleuve</span>
</p>
<hr/>
<dl class="tabulation">
<dt>Some text (using a DL to show the items)</dt>
<dd>Une ambiance conviviale</span>
<dd>Durant l'été, une grande terrasse ensoleillée</dd>
<dd>En hiver, une verrière chauffée</dd>
<dd>De l'espace de stationnement</dd>
<dd>Un chef cuisinier d'expérience</dd>
<dd>Des salles privées pour les repas de groupe</dd>
<dd>Un menu pour enfant</dd>
<dd>Une vue sur le fleuve</dd>
</dl>
i have this site:
http://avocat2.dac-proiect.ro/?page_id=17
Look at the picture below to understand which is my problem
This problem is each page on mobile.
Do not see the last lines of text
<div class="entry-content2">
<div class="gigi">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 style=" "="">
<img src="http://avocat2.dac-proiect.ro/wp-content/themes/WordPressBootstrap-master/images/LOGOb.png" class="img-responsive center-block" style="min-width:156px;min-height:83px">
</div>
</div>
</div>
<div class="parentVerticalCenter">
<div class="childVerticalCenter">
<p class="text-center" style="color:white;font-size:17px;padding-left:50px;padding-right:50px;/*padding-top:20px;*/padding-bottom:20px;">În afara sediului nostru, asigurăm reprezentarea şi consilierea clienţilor noştri în Bucureşti şi în judeţele Alba, Oradea, Arad, Sibiu, Braşov, Timişoara. În domeniul proprietăţii intelectuale colaborăm cu societatea Actamarque S.R.L.Putem asigura colaborari cu notari, traducatori autorizati, consultanti fiscali.</p>
<div class="wrap">
<div class="wrap1">
<div class="image1">
<p class="titlu">Zorica L. Codoban </p>
<p class="subtitlu">Avocat</p>
<p class="bbb">
– avocat din anul 1997;</p>
<p class="bbb">
– domenii de specialitate: drept civil, drept comercial,drept succesoral, drept imobiliar, dreptul muncii,drept administrativ, dreptul familiei;</p>
<p class="bbb">- limbi vorbite: franceza.</p>
<p></p>
</div>
<div class="image2">
<p class="titlu">Sorina Sabo </p>
<p class="subtitlu">Avocat</p>
<p class="bbb">
– avocat din anul 2008, îşi desfăşoară activitatea în calitate de cabinet individual la acelaşi sediu;</p>
<p class="bbb">- domenii de specialitate: drept civil, drept comercial, drept imobiliar, dreptul familiei, drept administrativ, drept penal, proprietate intelectuală;</p>
<p class="bbb">- limbi vorbite: franceza.</p>
<p></p>
</div>
<div class="image3">
<p class="titlu">Susana Mandrutiu </p>
<p class="subtitlu">Asistent manager</p>
<p class="bbb">
– experienta in domeniu din anul 2009;</p>
<p class="bbb">- experienta anterioara ca merciolog;</p>
<p class="bbb">- limbi vorbite: franceza.</p>
<p></p>
</div></div>
<div class="wrap2">
<div class="image4">
<p class="titlu">Andaluna I. Bogdan</p>
<p class="subtitlu">Avocat</p>
<p class="bbb">
– avocat din anul 2013, îşi desfăşoară activitatea în calitate de cabinet individual la acelaşi sediu;</p>
<p class="bbb">- domenii de specialitate: drept civil, drept comercial, drept european, drept imobiliar, drept administrativ;</p>
<p class="bbb">- limbi vorbite: engleza, franceza.</p>
<p></p>
<p></p></div>
<div class="image5">
<p class="titlu">Mihai A. Codoban </p>
<p class="subtitlu">Avocat</p>
<p class="bbb">
– avocat din anul 2009, îşi desfăşoară activitatea în calitate de cabinet individual la acelaşi sediu;</p>
<p class="bbb">- domenii de specialitate: drept comercial, drept administrativ, drept fiscal, dreptul muncii, dreptul asigurărilor, dreptul pieţei de capital, proprietate intelectuală;</p>
<p class="bbb">- limbi vorbite: germana, italiana, engleza, franceza.</p>
<p></p>
<p></p></div>
<p></p></div>
</div></div>
<p></p></div>
</div>
CODE CSS:
#media screen and (min-width: 850px)
{
.image2,.image3,.image5
{
margin-left:20px;
}
.wrap1
{
margin-bottom:20px;
}
}
How can I solve this problem?
Thanks in advance!
The reason is because your mobile menu overlaps the div.
A quick solution is to add padding-bottom: 100px (or change according to what you need) to .entry-content2
I Think this is better than just adding padding bottom to the text, as in this way you avoid the overlap on the image as well.
the reason for that is because on mobile the div s overlap try using padding and more percents instead of set px lengths/padding/etc. really best thing to do is to just make a separate CSS that fits mobile and then when you are on mobile have a button or have it automatically (google it) switch to that
Try to change your ".mobil"-class
/* For Example */
.mobil {
position: fixed;
bottom: 36px;
padding-top: 0px !important;
}
and add a "padding-bottom:75px;" to your body class for example.
#media only screen and (max-width : 480px) {
body {
padding-bottom: 75px;
}
}
So,I'm struggling to solve a strange thing that happens in my html code.
I've been trying to do this for 3 days or maybe more but I simply cannot find out the 'problem'.
.variola {
max-width: 100%;
margin-top: 0.5em;
margin-bottom: 1em;
-webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 0px 20px;
background: white;
border: 1px solid #CCC;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
padding: 8px;
"
}
</style> <style> .cerculet {
display: block;
font-size: 120%;
line-height: 145%;
width: 1.6em;
height: 1.6em;
text-align: center;
border-radius: 50%;
background-color: black;
color: white;
white-space: nowrap;
}
</style> <style> .introducere {
display: table-cell;
vertical-align length: 5;
padding-left: 3em;
padding-top: 0.1em;
}
<!DOCTYPE html>
<html>
<head>
<!-- Aici va fi scris orice cod CSS pentru ca ulterior sa fie "preluat" intr-un
mod indirect de catre codul HTML pentru imbogatirea paginii web. -->
<title>10 cele mai periculoase boli care au facut istorie</title>
</head>
<body>
10 cele mai periculoase boli care au facut istorie
<!-- Tot codul de la tag-ul "body" deschis pana la "body" inchis este strict
codul pentru pagina web.Cei in head sub tag-ul "style" este cod in CSS si
nu va aparea in pagina web,ci va "imbogati" intr-un mod indirect codul html -->
<p style="text-align: left">
<img align="absmiddle" src="http://s2.postimg.org/6zkw8piph/Time.png">26-Martie-2015
<!-- " " este un cod important folosit pentru a crea un blank(spatiu alb)
intre 2 caractere -->
<img align="absmiddle" src="http://s29.postimg.org/tkzbm9nwz/Domeniu.png">Biologie
<br>
<img align="absmiddle" src="http://s22.postimg.org/k7tec39x9/Tags.png">Tags: Pandemii, cele mai periculoase</p>
<hr noshade size="2" style="text-align: left" width="47%">
<br>
<!-- Cu ajutorul tag-ului "hr" se pot introduce linii in pagina web.
"noshade" inseamna ca linia nu o sa aiba contur. -->
<h2></h2>
<div class="cerculet">
<div>
<h2>1 </h2>
<div>
<h2>
<big style="font-weight: bold">A ucis mai mult de 300 de
milioane de oameni<br>
din intreaga lume in secolul al XX-lea si pe cei<br>
mai multi locuitori nativi ai Americii.</big>
<!-- Exact ceea ce spuneam mai sus:codul CSS va fi "preluat" indirect din "head"
si va fi introdus in codul html,combinand cele 2 limbaje. -->
<!-- :-) --></h2>
</div>
</div>
</div>
<br>
<div>
Variola(cunoscuta si sub numele latin "Variola" sau "Variola vera") este o boala contagioasa
<br>unica oamenilor.Variola este cauza fie de virusul numit Variola Major,fie de cel numit Variola
<br>minor.Forma mai letala,V. Major,are o mortalitate de 30-35%,pe cand V. Minor este o forma
<br>mai usoara a bolii numita alastrim si ucide ~1% din victimele sale.Efectele secundare
<br>de termen lung pentru supravietuitori includ cicatrici pe piele.Alte efecte secundare ocazionale
<br>includ orbire datorita ulcerului de cornee si infertilitate la persoanele de sex masculin.
</div>
<!-- Tag-ul "br" sectioneaza textul nostru din pagina web in paragrafe. -->
<br>
<br>
<div>
<b>Variola a ucis aproximativ 60 de milioane de europeni,</b> incluzand cinci monarhi
<br>care conduceau Europa in secolul al XVIII-lea.Pana la 30% din cei infectati,80% fiind copii sub 5
<br>ani,au murit datorita acestei boli si inca o treime din supravietuitori au devenit orbi.
</div>
<br>
<br>
<div>
Cat despre tarile din America,dupa primul contact cu europenii si africanii,unii au crezut ca rata
<br>de mortalitate de 90-95% a populatiei native din Lumea Noua a fost cauza de boala Lumii Vechi.
<br>Se suspecteaza ca variola a fost principalul vinovat si raspunzator pentru uciderea a aproape toti
<br>locuitorii nativi ai Americii.In Mexic,cand aztecii s-au angajat in rascoala impotriva lui Cortés,
<br>depasiti numeric,spaniolii au fost fortati sa fuga.In timpul luptei,un soldat spaniol purtator de
<br>variola a murit.Dupa lupta,aztecii au contractat virusul din cadavrele invadatorilor.Cand Cortés
<br>s-a intors in capitala,variola a devastat populatia azteca.A ucis o mare parte din armata azteca,
<br>imparatul si 25% din populatia normala.Ulterior,Cortés a infrant cu usurinta aztecii si a intrat in
<br>Tenochtitlán unde a aflat ca variola a ucis mai multi azteci decat au ucis tunurile.
</div>
<br>
<br>
<div>
Variola a fost responsabila pentru aproximativ 300-500 de milioane de decese in secolul al XX-lea.
<br>Nu mai tarziu de 1967, Organizatia Mondiala a Sanatatii (OMS) a estimat ca 15 milioane de persoane
<br>au contractat virusul si ca alte doua milioane au murit in acel an.Dupa campanii de vaccinare incheiate
<br>cu succes in timpul secolelor XIX si XX,OMS-ul a oficializat eradicarea variolei in 1979.Pana in ziua de
<br>astazi,variola este singura boala infectioasa care a fost complet eradicata din natura.
</div>
<img class="variola" src="http://s3.postimg.org/cb0l49sw3/Variola.jpg" style="position:absolute; left:150px;">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="cerculet">
<div style="font-family: Cambria; font-size: 120%">
2
</div>
</div>
<!-- Aici am folosit CSS-ul pentru a da un stil imaginii urmat de codul
html specific imaginii "style="position...." pentru a aseza imaginea in pozitia
dorita de mine -->
</body>
</html>
As you can see, after the number 1(colored in black,in a circle),there's a LOT of space that I don't want.
The alignment is not good too.I used lots of   and <br>'s just because I can't find a way to put the text immediately after the number 1. I'm trying to make a "site" for a school project and I am allowed to see other sites to "inspire" myself.You can check http://www.oddee.com/item_90608.aspx
and see what I'm trying to "copy" in some kind of way.
Please help.
In short, you want to float: left the number/circle so that the content wraps around it. You also have several unnecessary elements and, like you mentioned, unnecessary elements - below, I've cleaned the example down to a bare-bones working example.
.cerculet {
display: block;
}
.cerculet:after {
display: block;
clear: both;
content: ' ';
}
.cerculet p{
font-weight: bold;
}
.cerculet h2{
font-size: 120%;
line-height: 145%;
width: 1.6em;
height: 1.6em;
text-align: center;
border-radius: 50%;
background-color: black;
color: white;
white-space: nowrap;
float: left;
margin-right: 15px;
}
<div class="cerculet">
<h2>1 </h1>
<p>A ucis mai mult de 300 de milioane de oameni din intreaga lume in secolul al XX-lea si pe cei mai multi locuitori nativi ai Americii.
</p>
</div>
<p>Variola(cunoscuta si sub numele latin "Variola" sau "Variola vera") este o boala contagioasa unica oamenilor.Variola este cauza fie de virusul numit Variola Major,fie de cel numit Variola minor.Forma mai letala,V. Major,are o mortalitate de 30-35%,pe cand V. Minor este o forma mai usoara a bolii numita alastrim si ucide ~1% din victimele sale.Efectele secundare de termen lung pentru supravietuitori includ cicatrici pe piele.Alte efecte secundare ocazionale includ orbire datorita ulcerului de cornee si infertilitate la persoanele de sex masculin.
</p>
<p><b>Variola a ucis aproximativ 60 de milioane de europeni,</b> incluzand cinci monarhi care conduceau Europa in secolul al XVIII-lea.Pana la 30% din cei infectati,80% fiind copii sub 5 ani,au murit datorita acestei boli si inca o treime din supravietuitori au devenit orbi.
</p>
I want to arrange the text of this site as well as in the picture below
http://i60.tinypic.com/aufae0.jpg
This is my site:
http://avocat.dac-proiect.ro/wp/?page_id=14
This is code HTML:
<p id="text3">
Am reprezentat şi am acordat consultanţă juridică pentru clienţi
persoane fizice române şi străine, instituţii publice, persoane juridice
române şi străine în următoarele domenii:
</p>
<br><br>
<p id="text4">
- agricultură, exploatări agricole, prelucrarea şi comercializarea
produselor agricole;
<br>
- comerţ cu produse alimentare;
<br>
- imobiliar;
<br>
- distribuţie de carburanţi;
<br>
- transporturi;
<br>
- asigurări;
<br>
- producţie şi comercializare utilaje grele;
<br>
- producţie structuri metalice;
<br>
- producţie automatizări;
<br>
- servicii de proiectare;
<br>
- comercializare automatizări;
<br>
- jocuri de noroc;
<br>
- turism, hoteluri şi pensiuni;
<br>
- medical;
<br>
- construcţii civile şi industriale;
<br>
- comercializare utilaje şi autovehicule, service auto;
<br>
- producţie software, administrarea site-urilor;
<br>
- comerţ;
<br>
- bursier, societăţi listate, investitori, fonduri de investiţii.
<br>
- asistenţă şi îngrijire copii şi vârstnici;
<br>
- exploatări forestiere şi prelucrarea lemnului;
<br>
- exploatări agricole;
<br>
- extracţia şi prelucrarea minereurilor;
<br>
- producţia şi comercializarea materialelor de construcţii;
<br>
- instituţii publice;
<br>
- instituţii religioase.</p>
This code CSS:
#text3{
font-size: 17px;
width:20%;
float:left;
padding: 87px 45px 45px 20px;
padding-left:50px;
}
#text4{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
font-size:17px;
padding-top: 50px;
padding-left: 20px;
}
http://jsfiddle.net/s0bsfdu4/10/
The JS editor I managed to arrange text as they wish but I try to make changes on the site looks very ugly ...
Can you help me solve this problem please?
Thanks in advance!
You may solve your problem by simply removing width and float like this:
#text3{
font-size: 17px;
padding: 87px 45px 45px 20px;
padding-left:50px;
}
Have you considered using affix from bootstrap to fix your text to the top?
Right know i write from my mobilephone so I can't test code but here are some ideas:
Use a table with 2 columns and split the text in 2.
<table>
<tr>
<td> first text part </td>
<td> second text part </td>
</tr>
</table>
Table has many elements to set size, position, color, background.
You could also use 2 divs to make the same look
I would put the text into a container. This is centered and a max width of 1200 or whatever you think looks good.
.container {
margin: 0 auto;
max-width: 1200px;
}
Use box-sizing so the border doesn't effect the dimension
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Clearfloat after the div
.grid:after {
/* Or #extend clearfix */
content: "";
display: table;
clear: both;
}
Float all divs and add 0 padding to last column
[class*='col-'] {
float: left;
padding-right: 20px;
}
.grid [class*='col-']:last-of-type {
padding-right: 0;
}
Column width
.col-1-2 {
width: 50%;
}
The HTML
<div class="container">
<p>Am reprezentat şi am acordat consultanţă juridică pentru clienţi persoane fizice române şi străine, instituţii publice, persoane juridice române şi străine în următoarele domenii:</p>
<div class="grid">
<div class="col-1-2">
<div class="module">
<h3>1/2</h3>
</div>
</div>
<div class="col-1-2">
<div class="module">
<h3>1/2</h3>
</div>
</div>
</div>
</div>
I would also edit the list to not use < br >'s and start using lists.
Working jsfiddle http://jsfiddle.net/0dLeqg9s/2/
You can read more about it http://css-tricks.com/dont-overthink-it-grids/