I want to know how can I move this text next to an image! I don't know how I made it with the first pic, but I couldn't with the second.
p.mytext {
color: aliceblue;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
border: 2px solid;
border-color: whitesmoke;
margin-left: 90px;
margin-right: 750px;
margin-bottom: 150px;
font-family: Lucida Sans Unicode;
}
p.secondtext {
color: white;
border: 2px solid;
border-color: whitesmoke;
font-family: Lucida Sans Unicode;
padding-left: 15px;
padding-right: 15px;
margin-left: 90px;
margin-right: 500px;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
</head>
<img class="clip" src="../images/clip.png" width="300">
<body id="aboutme">
<h1 class="titulo">About me</h1>
<h2>INFORMATION</h2>
<img class="picofme" src="../images/juli.JPG" width="400">
<p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me
what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing
is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the
film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps
every day"</p>
<img class="china" src="../images/china.JPG" width="450">
<p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después
de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como
nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra
los invasores franceses para restablecer en el trono al monarca legítimo.</p>
</body>
</html>
i suppose you want to this.
.flex {
display:flex;
margin: 20px 0;
}
.flex img {
margin:0 20px 0 0;
}
.flex p {
border: 2px solid;
border-color: whitesmoke;
padding:20px;
margin:0;
}
<img class="clip" src="https://picsum.photos/300/100">
<body id="aboutme">
<h1 class="titulo">About me</h1>
<h2>INFORMATION</h2>
<div class="flex">
<img class="picofme" src="https://picsum.photos/300/300" width="400" >
<p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps every day"</p>
</div>
<div class="flex">
<img class="china" src="https://picsum.photos/300/300" width="450">
<p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra los invasores franceses para restablecer en el trono al monarca legítimo.</p>
</div>
</body>
A couple of pointers to mention:
The body tag does not need an id, the id should be added to a
div tag within the body
Your first image is above the body tag, remember to include all of
your content html within the body
Your paragraphs have many similar style property values, consider
making a class for these. You can add more than one class to a tag.
Avoid adding inline css: your img widths are very similar in width.
For demo purposes, I have created a class with width of 425 (midway) and
removed the 400/425 inline style
I commented out margins that were throwing out position, and changed the color text to black for the paragraphs (just so I could see it!)
The bottom img classes (in my code) that are commented out are examples of css that you could use for your images. The img css that affects the snippet is in the second line.
#aboutme{float:left;}
p{color:#000000; width:60%; display:inline-block; float:right;}
img{max-width:32%; padding:30px 25px; float:left; height:auto; vertical-align:middle;}
p, img{ display:inline-block; vertical-align:top;}
.mytext {
/*color: aliceblue;*/
padding: 15px;
border: 2px solid;
border-color: whitesmoke;
/*margin-left: 90px;
margin-right: 75px;
margin-bottom: 150px;*/
font-family: Lucida Sans Unicode;
}
.secondtext {
/*color: #ffffff;*/
border: 2px solid;
border-color: whitesmoke;
font-family: Lucida Sans Unicode;
padding-left: 15px;
padding-right: 15px;
/*margin-left: 90px;
margin-right: 500px;*/
/*float: left;*/
}
/*.picofme{width:400px;height:auto;}
.china{width:450px;height:auto;}*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<img id="clip" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >
<div id="aboutme">
<h1 class="titulo">About me</h1>
<h2>INFORMATION</h2>
<img class="picofme" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >
<p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me
what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing
is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the
film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps
every day"</p>
<img class="china" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >
<p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después
de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como
nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra
los invasores franceses para restablecer en el trono al monarca legítimo.</p>
</div>
</body>
</html>
Good luck
Related
this might be a stupid question but I'm stuck and need some help. I'm practicing float and div, and I managed to create this simple page but when I zoom out to 90% the box on the far right falls down to below. I tried to debug but I can't figure out what is causing this problem--could anyone help me? Below is the link to the mentioned page.
http://ratiayson.dothome.co.kr/day14_0225/coffeebeans2.html
I noticed you have given width: 876px on the .container.
Bump it up to 900px and it will work.
PIECE OF ADVICE
Hellow #Ratia, using float is a good idea, but using grid and flex based layouts is the best idea.
Float will require you to put lots of code to do a basic thing, Grid and Flex will do everything for you. Even auto responsiveness(Which is what you asked there above)
I urge you to use grid or flex...
Try This:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float Layout</title>
<style>
*{margin: 0; padding: 0;}
a{ text-decoration: none; color:#333;}
li{list-style: none;}
img{border: none;}
body{font-size: 12px; font-family: 'sans-serif';}
.header{
margin:auto;
width:876px;
}
h1{
font-size: 30px;
font-weight: 900;
width:876px;
}
h2{
font-size: 30px;
font-weight: 900;
font-family: sans-serif;
color:saddlebrown;
padding-bottom: 30px;
text-align: center;
}
.container {
display: table;
border-spacing: 10px;
margin:auto;
width: 876px;
clear:both;
}
.container div{
border: 1px dotted brown;
padding: 15px;
}
.Column {
display: table-cell;
}
.container img{
padding-bottom: 30px;
/*overflow:hidden;*/
}
p{
font-size:14px;
font-weight: 600;
padding-bottom: 50px;
}
.container span{
font-size:16px;
background-color:goldenrod;
}
.bottomBox{
background-color: #333;
clear:both;
margin:auto;
width:874px;
height:50px;
color:azure;
text-align: center;
font-size: 16px;
padding-top:30px;
width:874px;
}
</style>
</head>
<body data-new-gr-c-s-check-loaded="8.871.0" data-gr-ext-installed="">
<div class="header">
<h1>coffee beans</h1>
</div>
<div class="container">
<div class="liberica Column">
<h2>Coffee Liberica</h2>
<img src="http://ratiayson.dothome.co.kr/day14_0225/images/bean1.jpeg" alt="">
<p>Desde 1835 se comenzó a cultivar comercialmente <span>el grano de café en Colombia13</span> en Salazar de las Palmas, Norte de Santander. Gran parte del incentivo a la producción se le atribuye a Francisco Romero, sacerdote de la época que imponía a los feligreses de la población, durante la confesión, la penitencia de sembrar café. Esto fue un gran impulso para la propagación del cultivo del grano en esa zona del país. </p>
</div>
<div class="arabica Column">
<h2>Coffee Arabica</h2>
<img src="https://minisoft.com.bd/uploads/portfolios/minisoft.png" alt="">
<p>Desde 1835 se comenzó a cultivar comercialmente <span>el grano de café en Colombia13</span> en Salazar de las Palmas, Norte de Santander. Gran parte del incentivo a la producción se le atribuye a Francisco Romero, sacerdote de la época que imponía a los feligreses de la población, durante la confesión, la penitencia de sembrar café. Esto fue un gran impulso para la propagación del cultivo del grano en esa zona del país. </p>
</div>
<div class="robusta Column">
<h2>Coffee Robusta</h2>
<img src="http://ratiayson.dothome.co.kr/day14_0225/images/bean1.jpeg" alt="">
<p>Desde 1835 se comenzó a cultivar comercialmente <span>el grano de café en Colombia13</span> en Salazar de las Palmas, Norte de Santander. Gran parte del incentivo a la producción se le atribuye a Francisco Romero, sacerdote de la época que imponía a los feligreses de la población, durante la confesión, la penitencia de sembrar café. Esto fue un gran impulso para la propagación del cultivo del grano en esa zona del país. </p>
</div>
<!--<div class='bottomBox'>
<span class='bottomText'><p>유명하고 비싼 커피보다 신선한 커피가 맛있습니다</p></span>
</div>-->
</div>
<div class="bottomBox">
coffee beans
</div>
</body>
</html>
So im just learning to make a webpage with super basic CSS thats supposed to look like this:
i put the class name in red
But when i typed the code,wich is this:
<!DOCTYPE html>
<html lang="es-ES">
<html>
<head>
<title>2do parcial PROYECTO</title>
<style>
h1{
text-align:center;
background-color:violet;
border-width: 2px;
}
p.cul{
text-align: center;
font-family: Aharoni;
font-size: 35px;
background-color:violet;
border-style: dotted;
border-width: 2px;
width: 1050px;
}
div{
float:left;
background-color: lightcyan;
width: 200px;
border: 15px solid red;
padding: 25px;
margin: 15px;
}
img{
float:middle;
}
div.one{
float:right;
background-color: lightcyan;
width: 330px;
border: 15px solid red;
padding: 25px;
margin: 15px;
}
p{
float:left;
background-color:lightcyan;
width:782px;
}
img.one{
float:right;
}
p.dep{
text-align:center;
font-family:Aharoni;
font-size:35px;
width:1050px;
background-color:violet;
border-style: dotted;
border-width: 2px;
}
div.cuadrote{
float:left;
position: absolute;
right: %100;
bottom: 800px;
background-color: lightcyan;
width: 200px;
border: 15px solid red;
padding: 25px;
margin: 15px;
}
img.batorojo{
position: absolute;
right:570px;
bottom: -394px;
}
}
div.cuadrito{
vertical-align:middle;
background-color: lightcyan;
border: 15px solid red;
padding: 25px;
margin: 15px;
}
img.caribe{
float:right;
position: absolute;
right:35px;
bottom:-360px;
}
p.blueboxie{
background-color:lightcyan;
float:left;
width: 1000px;
}
</style>
</head>
<body>
<h1>Evaluacion 2</h1>
<p class="cul">Eventos culturales</p>
<div>¡NUEVOS CURSOS CULTURALES EN CEART DISPONIBLES!Se cuentan con clases de:
*Artes plasticas(Lunes,miercoles y viernes de 5:00 a 6:30pm)
*Ballet(Lunes,miercoles y viernes de 7:30 a 9:00pm)
*Violin(Martes y jueves de 9:00 a 11:00am)</div>
<img src="http://mexicali.org/wp-content/uploads/2012/08/Centro-Estatal-de-las-Artes.jpg" alt="x" width=300 height=200>
<div class="one">Se anuncian proximamente funciones de teatrales de obras de shakespeare en el teatro del estado,
entre ellas se encuentran desde clasicos como Hamlet o Romeo y Julieta hasta los escritos mas recónditos del autor ya mencionado.Puedes conseguir entradas en ticketmaster.com o comprarlas en la taquilla del teatro a partir del 10 de abril.Informes o dudas al (686)111-1111</div class="one">
<p>Con un festival artístico-cultural el Instituto Municipal de Arte y Cultura de Mexicali (IMACUM) conmemorará el 42 aniversario luctuoso del legendario compositor y cantante José Alfredo Jiménez.
El evento tendrá lugar en las instalaciones de la Casa de la Cultura de la Juventu (CREA Cultura) este sábado 21 de noviembre, y para ello se han organizado una serie de actividades gratuitas para el goce de los mexicalenses.
A las 7:00 p.m. en la Galería-Vestíbulo se inaugurará la exposición colectiva “Nomás nuestro amor”, en la que participan artistas gráficos, plásticos e ilustradores, entre ellos Gabriela Badilla, Odette Barajas, Gabriela Buenrostro, Luis Felipe Vargas Brownell, Fernando Corona, Aída Corral, Carlos Cortez, Mara Leticia Dorantes, Roberto Figueroa, Gloria Gachuz, Marco Manríquez, Pablo Martínez, Rogelio Pérezcano, Natalia Rojas, Karla Sánchez, y Karina Venegas.
Estos artistas tomaron el nombre de una canción de José Alfredo para de ahí generar su pieza con libertad de creación, lo que el público mexicalense podrá observar una gran variedad de propuestas en cuanto a trabajo, técnica y colorido.</p>
<img class="one" src="http://www.zonalider.com/sites/default/files/styles/scale_max_width_auto_height/public/article/image/jose_alfredo_jimenez.jpg?itok=9cZnT7Ir" alt="x" width=250 height=200></img>
<p class="dep">Eventos deportivos</p class="dep">
<div class="cuadrote">¿SABÍAS QUE?...El juego de béisbol más Largo tuvo lugar en el año 1981,
en las Ligas Menores donde se jugaron 33 entradas. Se enfrentaban Rochester (NY) Red Wings contra Pawtucket (RI) Red Sox. Al entrar en la entrada número 21 el juego seguía empatado 2-2 y fue suspendido. Dos meses después el juego se reasignó
y en 18 minutos el Pawtucket anotó la carrera del gane.</div>
<img class="batorojo" src="http://allswalls.com/images/boston-red-sox-baseball-mlb-k-wallpaper-1.jpg" alt="x" width=200 height=170></img>
<div class="cuadrito">Respecto al base ball se encuentra proximamente la variedad de juegos de la serie del caribe, incluyendo duelos epicos como el de CUBA vs HAITI , ¡No te los puedes perder!</div>
<img class="caribe" src="" alt="x" width=200 height=170></img>
<p class="blueboxie">¡SE LE CHISPOTEO!GUADALAJARA, JALISCO (02/ABR/2017).- El Zorro es de los pocos animales capaces de tropezar con la misma piedra dos veces.
Anoche, Matías Alustiza había tenido una noche de ensueño. Dos goles suyos tenían al Atlas en la pelea en el partido y en el Clausura 2017.
A dos minutos del final el argentino puso la pelota en el manchón penal por segunda vez en el juego. En sus pies tenía la victoria que colocaba a los tapatíos en zona de Liguilla.
Alustiza cobró el penalti que representaba la victoria igual que el penalti que representó en su momento el empate a tres. Un disparo con mucha dosis de humillación al arquero.
Gibrán Lajud adivinó la intención del argentino y no se dejó sobajar una segunda vez. Recostó a su derecha y se quedó con la pelota y con el punto para su equipo.
Sí, Alustiza hizo un “Ponchito” González y el Atlas empató 3-3 un juego que debía y tenía que ganar.</p>
</body></html>
Everything looks ok on the top but the bottom part of the page has a the textbox "cuadrote" missing and the images are reallocated .Also i used the command poistion (googled it , i dont really know how it works)to fix the images yesterday but they got messed up again.
Heres what the bottom part of the page looks like in my pc
Pretty pretty please help me its a school project due today :P
Something messy about your code, this may sound unrelated but it may speed up with anyone offering help.
Why are you closing your tags with the class in it?
just to name a few:
<p class="dep">...</p class="dep">
<div class="cuadrote">....</div class="cuadrote">
<img class="caribe" src="" alt="x" width=200 height=170></img class="caribe">
Use:
<p class="dep">...</p>
I'm doing some responsive design with columns with HTML5.
I'm stucked trying to make a single column for width<800px and 3 columns for a width>=800px.
I've done it with firefox, but can't do it with chrome and I.E. my code:
<!DOCTYPE html>
<html>
<head>
<title>Media Queries Example 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/default.css" media="screen">
<link rel="stylesheet" href="css/print.css" media="print">
</head>
<body>
<section>
<div class="columns">
<p>
<span class="pTitle">HTML:</span><br>
HTML, sigla en inglés de HyperText Markup Language
(lenguaje de marcas de hipertexto), hace referencia al
lenguaje de marcado para la elaboración de páginas web.
Es un estándar que sirve de referencia del software que
conecta con la elaboración de páginas web en sus diferentes
versiones, define una estructura básica y un código
(denominado código HTML) para la definición de contenido de
una página web, como texto, imágenes, videos, juegos, entre otros.
</p>
<p>
<span class="pTitle">CSS:</span><br>
Hoja de estilo en cascada o CSS (siglas en inglés de cascading
style sheets) es un lenguaje usado para definir y crear la
presentación de un documento estructurado escrito en HTML o
XML2 (y por extensión en XHTML). El World Wide Web Consortium
(W3C) es el encargado de formular la especificación de las
hojas de estilo que servirán de estándar para los agentes de
usuario o navegadores.
</p>
<p>
<span class="pTitle">JAVASCRIPT:</span><br>
JavaScript (abreviado comúnmente JS) es un lenguaje de
programación interpretado, dialecto del estándar ECMAScript.
Se define como orientado a objetos,3 basado en prototipos,
imperativo, débilmente tipado y dinámico.<br>
Se utiliza principalmente en su forma del lado del cliente
(client-side), implementado como parte de un navegador web
permitiendo mejoras en la interfaz de usuario y páginas web
dinámicas4 aunque existe una forma de JavaScript del lado
del servidor (Server-side JavaScript o SSJS).
Su uso en aplicaciones externas a la web, por ejemplo en
documentos PDF, aplicaciones de escritorio (mayoritariamente
widgets) es también significativo.
</p>
</div>
</section>
</body>
</html>
And CSS:
#media (min-width: 800px){
body{
background: #ccccff;
}
div.columns{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-gap: 40px;
-moz-column-rule: 5px solid black;
-webkit-column-rule: 5px solid black;
column-rule: 5px solid black;
}
div.columns p{
page-break-inside:avoid;
}
}
This works PERFECT for FIREFOX (v44.02) but can't do it with chrome or I.E.
I've tried lots of css3 propierties but without luck.
Anyone knows a working method to do it for, at least, Firefox Chrome and Opera?
Thanks!
Look at your media query. You defined (min-width: 1000px) and not like you wrote for 800px width. For me it looks good in Chrome.
See: https://jsfiddle.net/o3gom4p2/
Add display: inline-block to the paragraphs you want to be displayed as one single unit of content.
Here's an updated jsfiddle based on Steffen's:
https://jsfiddle.net/gkazwkfa/
I've been trying for quite a while to achieve the effect of having the background of a text block to be blurred, to be able to have more readability on the text on top of the pictures.
But I keep getting both the background and text blurred. Now this has to be inline css since I have to put it in each entry.
This is what I'm trying
<div style= "background:white; background:rgba(255,255,255,0.5); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); z-index: -1; padding: 5px;">
<p style= "z-index: 1;">
Desde hace 17 años Tybso se mantiene fiel a la filosofía de crear piezas únicas hechas 100% a mano pensadas siempre como ese objeto que es capaz de unir y resaltar el modo en que la gente come, vive y celebra alrededor de la comida y la buena cocina!
</p>
</div>
This is the link to see what's happening.
I agree with #Dryden Long, you should try to avoid long styles like this. However, you also have styled the <div> whereas I would recommend you style the <p>. Like:
<div>
<h1>This is not blurry</h1>
<p style= "background:white; background:rgba(255,255,255,0.5); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); z-index: -1; padding: 5px;z-index: 1;">
Desde hace 17 años Tybso se mantiene fiel a la filosofía de crear piezas únicas hechas 100% a mano pensadas siempre como ese objeto que es capaz de unir y resaltar el modo en que la gente come, vive y celebra alrededor de la comida y la buena cocina!
</p>
</div>
Here is a fiddle: http://jsfiddle.net/sablefoste/JaazU/1/
Filter operates over a whole div, not just the background.
Try adding this
<p style = "filter:-; -o-filter:-; -ms-filter:-; -moz-filter:-; -webkit-filter:-;">
it worked on this JSFiddle
modifying sable foste's code to make the example jsfiddle, but all you need to do is have two divs, 1 with a blur background and 1 that is normal, and position the normal one over the blur.
http://jsfiddle.net/pW83w/
.blur {background:#e5ffcc; background:rgba(229,255,204,0.5); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); z-index: -1; padding: 5px;z-index: 1; height: 5em; width: 20em; position: absolute;}
.noBlur {
font-weight: bold;
z-index: 5;
}
How to ensure that the text does not exceed the gray border, and there is no scroll bar?
Edit I think that the problem is comming from the width of <td class="message">. i've also updated the HTML and CSS code.
Here is the code of that area
HTML
<div class="liste_posts">
<table>
<tr>
<td class="message">
<div class="topic_div">Si vous êtes sur cette page, c'est parce que vous avez décidé de laisser tomber phpbb, ou autre, pour vous lancer dans l'aventure qu'est la création d'un forum. Et ça tombe bien, parce que justement, ici on va voir comment faire ça Smiley. Il faut, avant de commencer, que vous sachiez que je vais montrer comment réaliser une base que vous pourrez ensuite faire évoluer comme bon vous semblera.</div>
</td>
</tr>
</table>
CSS
.message{
background-color: rgb(244, 238, 250);
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.topic_div p {
word-break: break-all;
}
Thanks in advance.
Try to use two different divs, one for the left side and one for the right side. Write text inside the left one.
Hopefully that will work for you.
Try setting a width of the box using the max-width and min-width css properties
I just read the answer below me, this would be an extension of that