I've got a contact form setup, with DIV's. The issue I have is when the text within the DIV overlaps, it doesnt sit in line.
My HTML and CSS are as follows (HTML First)
<div class="form_label"><span class="number">7.</span> ¿tienen almacenes de existencias significativos al cierre en ubicaciones diferentes a donde se encuentra la entidad?</div>
CSS...
.form_label {
clear: left;
float: left;
font-size: 10pt;
margin-bottom: 5px;
margin-left: 1px;
padding-top: 0;
width: 553px;
}
.number {font-weight: bold;}
I have a feeling its a text-align issue. Any help appreciated!!
You could use a table...Or:
<div class="form_label">
<div class="number">7.</div>
<div class="content">¿tienen almacenes de existencias significativos al cierre en ubicaciones diferentes a donde se encuentra la entidad?</div></div>
With CSS:
.number {font-weight: bold; display:inline; width:23px; vertical-align: top;}
.content {
display:inline-block;
width: 530px;
}
Try using a span as the outer container if you want it all in-line
Try:
Edit: Forgot to add the <ol> tag. The value attribute doesn't work without it.
<ol>
<li value="7">¿tienen almacenes de existencias significativos al cierre en ubicaciones diferentes a donde se encuentra la entidad?
</ol>
You can modify the width property in class form_label and put it to 622px;
Usually, to keep a text in one line, you have to add white-space: nowrap.
In your case, apparently the div hasn't enough room to contain the text: http://jsfiddle.net/PyDAF/
Either you have to shorten text (if you still want width: 553px), or increase the .form-label witdh value.
Related
I have this page 1 and I want the text to be vertically center aligned. I can't use table-cell because when I do, it displays all items in the same row, and that's not the case, as you can see in the image 1. I can't set a fixed line-height also, because each text has a size.
my css
img {
width: 80px;
height: 81px;
float: left;
margin-left: 10px;
margin-right: 10px;
}
my html
<p>
<img src="../assets/imagens/recomendacoes_tenis.png">
Devido ao fato de grande parte do calçamento da cidade ser feito em pedras e, por isso escorregadio, evite o uso de sapatos de salto e/ou desconfortáveis. Dê preferência aos tênis.
</p>
<p>
<img src="../assets/imagens/recomendacoes_mochila.png">
Evite peso extra. Há muitas ladeiras e escadarias na cidade, por isso, prefira mochilas e pastas menores e mais leves, carregue somente o essêncial. Em alguns atrativos será solicitado que bolsas, mochilas e equipamentos fotográficos sejam guardados na recepção.
</p>
...
how it it is looking now
Can someone help me to do this? Thanks a lot
Bootstrap 4 now includes some vertical-align classes.
<div class="align-middle">
this text is vertically aligned in the middle!
</div>
https://getbootstrap.com/docs/4.1/utilities/vertical-align/
Just set the parent of an image to flex and the align-items property to center.
img {
width: 80px;
height: 81px;
float: left;
margin-left: 10px;
margin-right: 10px;
}
p {
display: flex;
align-items: center;
}
Code
I have a box with an image at the right-side and text at the left-side. The box should have a white background. At smaller screens the text goes below the image which is good.
A few px above the bottom of the box I want to have a button.
Think I should do that by using position relative for the box and position absolute for the button.
The CSS and HTML code is
.box {
background: white;
float: right;
position: relative
}
.space {
padding: 15px;
}
.button {
vertical-align: middle;
position: absolute;
bottom: 40px;
margin-left: 15px;
}
<div class="box">
<img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">
<h2 class="space">Amsterdam</h2>
<p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>
<a class="button" href="https://www.buienradar.nl">Slecht weer</a>
<hr>
</div>
Problem is that on smaller screen the text is displayed over the button. Another issue is that padding of the text does not prevent it getting connected to image (laptop/desktop). I do not want to add margin-left to picture because I want the line <hr>to be connected to the image.
The button is over the text because you have used position:absolute to the button.
Set position:relative and bottom:auto in the smaller screen using media query rule...
Also using vertical-align: middle; in the absolute positioned elements will do nothing...so better to remove it
Stack Snippet
.box {
background: white;
float: right;
position: relative
}
.space {
padding: 15px;
}
img {
max-width: 100%;
}
.button {
position: absolute;
bottom: 40px;
margin-left: 15px;
}
#media (max-width:768px) {
.button {
position: relative;
bottom: auto;
margin-left: 15px;
}
}
<div class="box">
<img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">
<h2 class="space">Amsterdam</h2>
<p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>
<a class="button" href="https://www.buienradar.nl">Slecht weer</a>
<hr>
</div>
Well, I searched a lot and everything that I find didn't work for me, like a curse, what I'm tryng to do is blur a background image when the person that is viewing the web page see the div, I started to make this page a short time ago, as soon as I started to try to learn CSS and JavaScript, so, what I've done is this:
html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title> BIRL </title>
</head>
<body>
<div class="bg-img">
<br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center><div class="botao"><img src="play.png" class="playButton"></div></center>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
<div class="info">
<h1 class="titles">Quem nós Somos?</h1>
<a class="macaco">Nós somos uma empresa totalmente responsável e profisisonal inclinada a satisfação de nossa clientela
Nossos produtos sempre foram, são, e sempre serão destinados a nossos clientes, (salve ronildo)</a>
<h1 class="titles">Qual é a nossa missão na terra?</h1>
<a class="macaco">Nossa missão é proporcionar a melhor qualidade de entreterimento sadio para a sua família e amigos afins,
todos os nossos jogos possuem uma qualidade exemplar e classificação livre, ou seje, eles podem ser jogados por qualquer pessoa
em qualquer idade e qualquer lugar do mundo, nós nunca utilizaremos palavras de baixo calão em nossas obras eletrônicas, isto
é um exemplo para os seus filhos.</a>
</div>
</div>
</body>
</html>
css:
#font-face {
font-family: LemonMilk;
src: url(LemonMilk.otf);
}
.playButton {
width: 55%;
height: 40%;
z-index:2;
}
.game {
width: 100%;
height: 100%;
}
body {
background:url('background.jpg') no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.botao {
float: rigth;
width: 100%;
height: 100%;
vertical-align: middle;
z-index:2;
}
.info::before {
display: block;
width: 100%;
height: 100%;
background: url('background-blurred.jpg');
background-size: cover;
content: '';
opacity: 1;
}
.info {
background-color: #FFFFFF;
font-family: LemonMilk, Verdana, Tahoma;
padding: 70px;
text-align: justify;
}
.titles {
color: #000000;
text-align: center;
z-index: 1;
}
.macaco {
color: #000000;
}
I want to make something like this: http://jordanhollinger.com/media/bmu-landing.png
Here you go: How to apply a CSS 3 blur filter to a background image
Now, there is typo float: rigth. Also, there are a lot of unnecessary things in your code, but you are beginner. Keep practicing and everything will fall in its place eventually!
And, it is hard to decipher what you want exactly.
" what I'm tryng to do is blur a background image when the person that is viewing the web page see the div,"
Do you mean, when DIV with the picture is visible?
I want to add links for every box but whenever I try to add an "a" tag it messes everything up. What am I missing :-/ ? I have tried a lot of stuff and still can't figure out what wrong. Would appreciate your help.
Thanks
This is how it is supposed to look
http://oi66.tinypic.com/iykcc5.jpg
https://jsfiddle.net/983wga5c/7/
HTML
<div class="fwsmain">
<div class="fwsside side-text"><span>Tinutul Neamtului</span><p class="text">Pentru cei care au fost prima data, tinutul Neamtului a devenit locul in care te intorci cu bucurie. Platoul cu preparate moldovenesti de la Hanul Ancutei, drumetiile pe Ceahlau, fotografiile de la Barajul Bicaz, viata de noapte din Piatra Neamt, zimbrii, cetatea Neamtului, manastiri din top 10 din Romania, Muzeul de masti de la Tincabesti sau casa memoriala a lui Creanga, sunt doar cateva dintre atractiile memorabile din aceasta zona. Si ai cel putin cinci evenimente de traditie pe care nu trebuie sa le ratezi.</p></div>
<div class="fwsside">
<div class="fwsside-flex1">
<div class="fwsitem"><div class="hoverbg"><span>Case memoriale</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Turnul lui Ștefan</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Orașul de sus</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Hai la ski</span></div></div>
<div class="fwsitem fullw"><div class="hoverbg"><span>Trebuie să vezi</span></div></div>
</div></div>
</div>
CSS
.fwsmain{
width: 100%;
display: flex;
flex-wrap: wrap;}
.fwsside {
height: 100%;
width: 50%;}
.side-text{
margin:auto;
padding:0 20px;}
.fwsside-flex1{
height: 100%;
width: 100%;
display:flex;
flex-shrink:1;
flex-grow:1;
flex-wrap:wrap;}
.fwsside-flex1 .fwsitem {
width:50%;
text-align: center;
background-size:cover;
}
.fullw{
width:100% !important;}
.hoverbg:hover {
background:rgba(0, 0, 0, 0.6);
}
.fwsside-flex1 .fwsitem:nth-child(1) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/calistrat-hogas.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(2) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/clopotnita-turn-pnt.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(3) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/telegondola.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(4) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/ski.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(5) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/cucuteni.jpg');
}
.fwsside-flex1 span {
line-height:33.3vh;
margin:auto;
font-size: 33px;
font-weight: bold;
color: #fff;}
It looks like you have to move your class="fwsitem" to your newly added <a> tags because they are now your flexbox container's (.fwsside-flex1) children.
Here is a updated fiddle.
I have a floated div that has a 200px margin from the right side, and I want to place a table on that empty space.
This is the CSS for the div:
#testo {
border-right: solid black 1px;
background-color: white;
margin-right: 200px;
text-align: justify;
padding: 7px;
float: left;
font-size: 14px;
}
But the table goes under it? Why?
The problem is that the margin of your floating element still takes up space. Therefore, another element in the flow cannot be in that space and gets pushed to the next line.
One solution is to absolutely position the table on the right so that it's removed from the flow.
#wrapper {
position: relative;
}
#wrapper div {
margin-right: 200px;
float: left;
}
table {
position: absolute;
top: 1em;
right: 0;
width: 190px;
border: 1px solid;
}
<div id="wrapper">
<div>Uno Dos Tres Quatro Cinco no Dos Tres Quatro Cinco no Dos Tres Quatro Cinco. Iti ni san shi, Iti ni san shi. Un deux trois quatre. Un deux trois quatre. Um dois três quatro. Um dois três quatro. Uno Dos Tres Quatro Cinco no Dos Tres Quatro Cinco no
Dos Tres Quatro Cinco. Iti ni san shi, Iti ni san shi. Un deux trois quatre. Un deux trois quatre. Um dois três quatro. Um dois três quatro</div>
<table>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>World</td>
</tr>
</table>
</div>
Because your div has an 100% width.
Set a width/max-width to this div and the table won't go under.
It is happening because the div has a display: block by default.
Regardless its size, it will take the full line on the page.
Try to set display:inline-block to the div and see if it works.