Display: inline with scroll overflow-y - html

I can not set the scroll to this item that has the property display: inline
I tried it with white-space: nowrap but does not work
while repositioning overflow under a height
I did not have any changeis the second question I ask above getilmente give me a hand
Solution:
Used inline-block
#Contenitore_Titoli
{
width: 1535px;
height: 30px;
line-height: 35px;
text-align: center;
}
.Elenco_Utenti
{
width: 360px;
height: 25px;
line-height: 25px;
float: left;
text-align: center;
}
.Elenco_Contatti_Whatsapp
{
width: 371px;
height: 25px;
line-height: 25px;
float: left;
text-align: center;
}
.Elenco_Contatti_Skype
{
width: 371px;
height: 25px;
line-height: 25px;
float: left;
text-align: center;
}
.Elenco_Contatti_Facebook
{
width: 371px;
height: 25px;
line-height: 25px;
float: left;
text-align: center;
}
.Contenitore_Lista_Contatti
{
border-top: 1px solid gray;
width: 1480;
height: 25px;
}
#Contatti
{
width: 360px;
height: 31px;
float: left;
color: red;
display: inline;
text-align: center;
}
#Contatti_Whatsapp_Titolo
{
width: 371px;
height: 31px;
color: red;
display: inline;
text-align: center;
float: left;
}
#Contatti_Skype_Titolo
{
width: 371px;
height: 31px;
color: red;
display: inline;
text-align: center;
float: left;
}
#Contatti_Facebook_Titolo
{
width: 371px;
height: 31px;
color: red;
display: inline;
text-align: center;
float: left;
}
#Contenuto_Lista_Guide_Div
{
display: inline;
overflow-y: scroll;
height: 637px
}
<div id="Contenitore_Titoli">
<div id="Contatti">Nome Utente</div>
<div id="Contatti_Whatsapp_Titolo">Whatsapp</div>
<div id="Contatti_Skype_Titolo">Skype</div>
<div id="Contatti_Facebook_Titolo">Facebook</div>
</div>
<div id="Contenuto_Lista_Guide_Div">
<div class="Contenitore_Lista_Contatti">
<div class="Elenco_Utenti"> darkbit </div>
<div class="Elenco_Contatti_Whatsapp"> 345956254</div>
<div class="Elenco_Contatti_Skype"> pipposkype </div>
<div class="Elenco_Contatti_Facebook">facebook</div>
</div>
</div>

You need to use CSS property overflow to scroll after setting a height.
For example, write a class like following:
.aClass{
height: 250px;
overflow: scroll;
}
You can see the overflow property here: http://www.w3schools.com/cssref/pr_pos_overflow.asp

Related

How do I fix that my website doesn't see my hyperlink

(ignore the fact that items in the header are in different language) Hyperlink of header's items doesn't work. I don't know how to fix it. When I put a cursor on a div my cursor doesn't change to a hand. It looks like website doesn't see my div? Or something like that? I've no idea. I send HTML/CSS code.
body {
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
background-color: #DEDEDE;
padding: 0;
margin: 0;
}
#container {
margin-left: auto;
margin-right: auto;
height: 1700px;
}
#header {
width: 800px;
padding-top: 20px;
margin-left: 550px;
margin-right: auto;
float: left;
}
#photo {
height: 980px;
width: 1864px;
background-color: white;
float: left;
background-image: url(domek.jpg);
background-size: cover;
box-shadow: 10px 5px 15px 0px grey;
}
#oferta {
font-size: 25px;
width: 150px;
float: left;
}
#rezerwacja {
font-size: 25px;
width: 150px;
float: left;
}
#atrakcje {
padding-left: 40px;
font-size: 25px;
width: 150px;
float: left;
}
#kontakt {
font-size: 25px;
width: 150px;
float: left;
}
#galeria {
font-size: 25px;
width: 150px;
float: left;
}
<div id="photo" style="position:relative;"></div>
<div id="header" style="position:absolute;">
<div style="clear: both;"></div>
<div id="oferta" style="color: white;">Oferta</div>
<div id="kontakt">Kontakt</div>
<div id="rezerwacja">Rezerwacja</div>
<div id="atrakcje">Atrakcje</div>
<div id="galeria">Galeria</div>
</div>

In a 'div' element, how to align text to the left while aligning all other items to the right?

It's like a post where the title appears on the left and the dropdown settings menu's arrow on the right..
This is what I have till now
<style>
.thread {
background-color: skyblue;
height: 50px;
width: 90%;
align-self: center;
text-align: end;
display: inline-block;
border-radius: 6px;
position: relative;
}
.header {
width: fit-content;
display: inline-block;
align-self: right;
}
.arrow {
display: inline-block;
vertical-align: bottom;
height: 50%;
}
.titletext {
display: inline-block;
text-align: left;
}
</style>
<div class="thread">
<p class="titletext">Title</p>
<div class="header"><img class="arrow" onclick="showPopover(this)" src="https://image.flaticon.com/icons/png/512/7/7584.png" /></div>
</div>
It appears like this
And I'm trying to achieve this
Sorry if the code is too random or if some lines are unneeded but I've been searching and trying many stuff so that's what I have right now.
You can use float:right on the arrow, and text-align:left on the entire header.
.thread {
background-color: skyblue;
height: 50px;
width: 90%;
text-align: left;
display: inline-block;
border-radius: 6px;
position: relative;
}
.header {
display: inline-block;
float: right;
}
.arrow {
display: inline-block;
vertical-align: bottom;
width: 25px;
height: auto;
float: right;
margin: 12px;
}
.titletext {
display: inline-block;
text-align: left;
}
<div class="thread">
<p class="titletext">Title</p>
<img class="arrow" onclick="showPopover(this)"
src="https://image.flaticon.com/icons/png/512/7/7584.png" />
</div>
.titletext {
display: inline-block;
float: left;
}
just use float:left;
.thread {
background-color: skyblue;
height: 50px;
width: 90%;
align-self: center;
text-align: end;
display: inline-block;
border-radius: 6px;
position: relative;
}
.header {
width: fit-content;
display: inline-block;
align-self: right;
padding:15px 10px;
}
.arrow {
display: inline-block;
vertical-align: bottom;
height: 50%;
}
.titletext {
display: inline-block;
text-align: left;
float:left;
padding-left:10px;
}
<div class="thread">
<p class="titletext">Title</p>
<div class="header"><img class="arrow" width="20" onclick="showPopover(this)" src="https://image.flaticon.com/icons/png/512/7/7584.png" /></div>
</div>
Just put you´r class="titletext" like:
.titletext {
position: absolute;
top;
left: 0;
}
You can use float:left on the titletext
<style>
.thread {
background-color: skyblue;
height: 50px;
width: 90%;
align-self: center;
text-align: end;
display: inline-block;
border-radius: 6px;
position: relative;
}
.header {
width: fit-content;
display: inline-block;
align-self: right;
}
.arrow {
display: inline-block;
vertical-align: bottom;
height: 50%;
}
.titletext {
display: inline-block;
float:left;
}
</style>
<div class="thread">
<p class="titletext">Title</p>
<div class="header"><img class="arrow" onclick="showPopover(this)" src="https://image.flaticon.com/icons/png/512/7/7584.png" /></div>
</div>

Text is pushing DIV below

My text is pushing div element that contains them below.
slidepassos{
position: relative;
height: 100vh;
width: 100%;
background: rgba(0,0,0,1);
float: left;
margin-top: -1px;
}
#anchorHow{
margin-top: 65px;
width: 100%;
float: left;
}
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap{
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
.passo-um{
height: 100vh;
width: 100%;
background: #000101;
}
.passoumback{
height: 100%;
width: 100%;
background-image: url("../img/passoumu.jpg");
background-position: top center;
}
.passoumgrad{
height: 100vh;
width: 100%;
background: rgba(0,37,63,0.7);
}
.passo-um h1{
color: white;
font-weight: bold;
font-size: 45px;
text-align: center;
}
.passo-um h2{
color: #EBAC00;
font-weight: bolder;
font-size: 53px;
text-align: center;
margin-top: 15px;
margin-left: 35%;
}
.passo-um p{
color: white;
padding: 18px 8%;
font-size: 20px;
font-weight: lighter;
text-align: center;
margin-top: 23px;
float: left;
}
.passoumilu {
width: 300px;
float: left;
margin-left: 9%;
margin-top: 50px;
}
.swipeleftcontent{
z-index: 1;
background-size: 60px 60px;
margin-left: 157px;
width: 60px;
height: 60px;
position: absolute;
bottom: 14%;
}
<div id="slidepassos" class="swipe slidepassos">
<div class="swipe-wrap">
<div class="mySlides">
<div class="passo-um">
<h1>How?</h1>
<h2>Step 1:</h2>
<img src="img/passoumilu.svg" class="passoumilu">
<p>Do your coach oriented WOD. Remember, know your limits and try to break them.</p>
<div class="passoumback">
<div class="passoumgrad"></div>
</div>
<img src="img/swipeleft.png" class="swipeleftcontent">
</div>
</div>
</div>
</div>
image showing the text on top of the DIV instead inside it.
example
Ive tried to mess with the floats, and inline-blocks, but nothing affects it. Dont know how to fix it.

Creating this graph using css

I need to create this image into my HTML using CSS.
As you can see, there is two bar graphs aligned to the right. each bar graph has a set of bars, numbers and texts. the text is the to left aligned right, the number is to the right aligned right, and each bar is in between the text and the number.
Like I said, I have no understanding of this level of css so please treat this as a css newbie
any information would be greatly appreciated.
UPDATE
I have not tried producing any code for this. I have no idea how to handle this task.
So I was able to get the text on the left but i cannot get the value on the right. Its showing up as a new line on the right
Here is my css:
.container {
width: 500px;
margin-bottom: 20px;
margin-top: 10px;
background: #fff;
padding-bottom: 20px;
padding-top: 10px;
overflow: hidden;
float: left;
}
.horizontal .progress-bar {
float: left;
height: 45px;
width: 100%;
padding: 12px 0;
}
.horizontal .progress-track {
position: relative;
width: 50%;
height: 20px;
background: #FFFFFF;
float:right;
margin-left:-20px;
}
.horizontal .progress-fill {
position: relative;
background: #2272af;
height: 20px;
width: 50%;
color: #fff;
text-align: center;
font-family: "Lato","Verdana",sans-serif;
font-size: 12px;
line-height: 20px;
border-radius: 5px;
}
.horizontal .progress-bar-label
{
position:relative;
display:inline-block;
white-space:nowrap;
padding-left:215px;
}
.horizontal .progress-bar-value
{
position:relative;
display:inline-block;
white-space:nowrap;
padding-right:-15px;
/**padding:0;*/
}
And here is my HTML:
<div class="progress-bar horizontal">
<span class="progress-bar-label">test</span>
<div class="progress-track">
<div class="progress-fill" style="width: 100%;">
</div>
</div>
<span class="progress-bar-value">125</span>
</div>
Not quite sure how to get the value of 125 on the right of the graph bar
This is using HTML CSS and Jquery http://codepen.io/ntibbs/pen/MaPpKr
<div class="progress-bar">
<div class="progress-bar-label">test</div>
<div class="progress-track">
<div class="progress-fill" style="width: 100%;">
</div>
</div>
<div class="progress-bar-value">125</div>
</div>
.container {
width: 500px;
margin-bottom: 20px;
margin-top: 10px;
background: #fff;
padding-bottom: 20px;
padding-top: 10px;
overflow: hidden;
float: left;
}
.progress-bar {
height: 45px;
width: 100%;
}
.progress-bar-label {
position:relative;
display: inline-block;
width: 10%;
}
.progress-track {
display: inline-block;
position: relative;
height: 20px;
background: #FFFFFF;
width: 75%;
}
.progress-fill {
position: relative;
background: #2272af;
height: 20px;
color: #fff;
text-align: center;
font-family: "Lato","Verdana",sans-serif;
font-size: 12px;
line-height: 20px;
border-radius: 5px;
}
.progress-bar-value {
display: inline-block;
float: right;
}

I need help arranging div positions

Example: https://jsfiddle.net/La9jd2y7/
.one {
height: 50px;
width: 200px;
background-color: #F60;
float: left;
text-align: center;
}
.two {
height: 25px;
width: 25px;
background-color: #6F0;
float: left;
text-align: center;
}
.three {
height: 25px;
width: 25px;
background-color: #F20;
float: left;
text-align: center;
}
.four {
height: 50px;
width: 200px;
background-color: #C90;
float: left;
text-align: center;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
I need div 3 to go below div 2, so the left of div 4 pushed up against 2 and 3.
Result: http://i.imgur.com/N8VZ4HO.png
Thanks.
Try this:
.one {
height: 50px;
width: 200px;
background-color: #F60;
float: left;
text-align: center;
}
.two {
height: 50px;
width: 25px;
background-color: #6F0;
float: left;
text-align: center;
}
.two >div {
height: 25px;
}
.four {
height: 50px;
width: 200px;
background-color: #C90;
float: left;
text-align: center;
}
<div class="one">1</div>
<div class="two">
<div>2</div>
<div>3</div>
</div>
<div class="four">4</div>
So, as you notice I've changed the HTML to place the 2 and 3 inside the .two. That way you have 3 columns, and 2 and 3 are inside the middle column. No need for 4 columns.
Here is Demo
HTML:
<div class="one">1</div>
<div class="box">
<div class="two">2</div>
<div class="three">3</div>
</div>
<div class="four">4</div>
CSS:
.one {
height: 50px;
width: 200px;
background-color: #F60;
float: left;
text-align: center;
}
.two {
height: 25px;
width: 25px;
background-color: #6F0;
float: left;
text-align: center;
}
.three {
height: 25px;
width: 25px;
background-color: #F20;
float: left;
text-align: center;
}
.four {
height: 50px;
width: 200px;
background-color: #C90;
float: left;
text-align: center;
}
.box{
float: left;
width:25px
}
https://jsfiddle.net/La9jd2y7/3/
Try this:
.three {
height: 25px;
width: 25px;
background-color: #F20;
float: left;
text-align: center;
margin-top: 25px;
margin-left: -25px;
}
DEMO
.one {
height: 50px;
width: 200px;
background-color: #F60;
float: left;
text-align: center;
}
.two {
height: 25px;
width: 25px;
background-color: #6F0;
float: left;
text-align: center;
}
.three {
height: 25px;
width: 25px;
background-color: #F20;
float: left;
text-align: center;
}
.four {
height: 50px;
width: 200px;
background-color: #C90;
float: left;
text-align: center;
}
.two+.three{
margin-top: 25px;
margin-left: -25px;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>