Please reference this fiddle for a demo for my question.
TL;DR: I'm looking for a way for the purple border to go as high as the green border (so that the purple border masks the green by overlap). I'm looking for any creative solution, hacks included.
More specifically, for this application in the <section> box there is a <ul> which is populated dynamically varying amounts of items. The design approved by the client has a space in the horizontal top-border between the columns. Because the amount of items in the list varies I'm avoiding using <div>s with floats for columns. I can't find any CSS rules for this and all the other articles I've read are about how to create vertical borders (which I have made purple in the demo for an easy visual), but I can't determine if it's possible to make those borders overlap the parent's outer border.
Edited for clarity 2015-09-27 17:29 UTC-5
Using the "column-rules" property familly doesn't appear to offer what you need.
In my opinion, I would do something like the fiddle below. I agree, it's not very optimised for semantic, and it will not works alone for managing the columns number.
Maybe you can make something in PHP to change the columns number regarding the number of items before generationg your page.
If you're not working with PHP, a little JS function can do the formatting for you :)
/*.list-group > li {
list-style: none;
}
section.row > div {
margin: 0 !important;
display: inline-block;
border: solid 4px #88d0cd;
border-right: solid 4px #FF00FF;
}
section > div:last-child {
border-left: none;
}
section > div:not(:last-child) {
border-left: none;
}*/
.row {
width: 90%;
margin: auto;
}
.row > .col {
float : left;
width: 30%;
}
.col > ul {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
padding: 1em 0 1em 2em;
border-top: solid 4px #88d0cd;
border-bottom: solid 4px #88d0cd;
}
.col:first-child {
border-left: solid 4px #88d0cd;
}
.col:last-child {
border-right: solid 4px #88d0cd;
}
.col:not(:last-child) {
border-right: solid 4px #FF00FF;
}
.col:not(:last-child) > ul {
border-right: none;
}
<html>
<head>
</head>
<body>
<section class="row">
<div class="col">
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
<div class="col">
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
<div class="col">
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</section>
</body>
</html>
Related
I am developing a webpage but a horizontal scroll bar is present in the page. I want to remove it but can not. I have been into web development recently and most of web pages I made for practice faced the same problem.
I expect the following part of code to be faulty
.heading::before{border: 2px solid chocolate;
content: "";
height: 100vh;
background: url(....) no-repeat center ;
width: 100vw;
position: absolute;
top: 0px;
left: 0px;
z-index: -1; }
*{
margin: 0px;
padding: 0px;
}
nav{
position: sticky;
top: 0px;
left:0px;
margin: 0px 0px 10px 0px;
padding: 5px 5px;
background-color: #15191f;
}
.heading{
height: 90vh;
}
.heading::before{
border: 2px solid chocolate;
content: "";
height: 100vh;
background: url() no-repeat center ;
width: 100vw;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.flex{
display: flex;
}
.flex-row{
flex-direction: row;
}
.flex-column{
flex-direction: column;
}
.wrap{
flex-wrap: wrap;
}
.al-cen{
align-items: center;
}
.ju-cen{
justify-content: center;
}
nav a{
text-decoration: none;
background-color: #15191f;
color: #e3ecf3;
padding: 4px 10px;
border: 2px;
border-radius: 10px;
}
nav a:hover{
color: #15191f;
background-color: #e3ecf3;
}
#li1{
margin-left: 50px;
}
#a1{
margin: 0px 4px;
}
#a2{
margin: 0px 4px;
}
#a3{
margin: 0px 4px;
}
#a4{
margin: 0px 4px;
}
nav ul li{
list-style: none;
}
#logo{
width: 5vw;
border: 2px ;
border-radius:100mm;
}
/* -------------------------------------------------------------------- */
div ul{
margin: 0px 40px;
}
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: #e3ecf3;
}
div{
margin: 20px 15px;
}
ol li{
margin: 0px 40px;
}
.block{
display:block;
}
.inline-block{
display: inline-block;
}
.border-red{
border: 3.5px solid red;
border-radius: 12px;
}
.border-green{
border: 3.5px solid green;
border-radius: 5px;
}
.border-blue{
border: 3.5px solid blue;
border-radius: 5px;
}
.line-height{
line-height: 8vh;
}
ol{
border: 2px solid blue;
border-radius: 5px;
text-align: center;
/* display: inline-block; */
margin: 4px 0px;
width:300px
}
.text-cen{
text-align: center;
}
ol li{
margin-left: 40px;
}
input{
display: block;
}
option{
background-color:#15191f;
color:#e3ecf3;
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select{
width: 85px;
background-color:#15191f;
color:#e3ecf3;
height:30px;
border: 2px solid #15191f;
border-radius: 6px;
}
.button{
height: 25px;
width: 25px;
/* border: 2px solid #15191f; */
border-radius: 100px;
/* background-color: #15191f; */
}
/* .button: */
.checkbox{
/* background-color: #15191f; */
height: 25px;
width: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All in One</title>
<link rel="stylesheet" href="../CSS/home.css">
<script src="../JS/home.js"></script>
</head>
<body class="">
<nav class="flex row al-cen">
<img id="logo" src="../random_source" alt="Error loading image">
<ul class="flex row">
<li id="li1"><a id="a1" href="../HTML/home.html" target="_blank">Home</a></li>
<li id="li2"><a id="a2" href="../HTML/about.html" target="_blank">About Us</a></li>
<li id="li3"><a id="a3" href="../HTML/services.html" target="_blank">Our Services</a></li>
<li id="li4"><a id="a4" href="../HTML/contact.html" target="_blank">Contact Us</a></li>
</ul>
</nav>
<div class="heading flex flex-column al-cen ju-cen">
<h1 class="line-height">All in ONE Website</h1>
<p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of
it for future usage.</p>
</div>
<hr>
<div class="border-red firstpara">
<p><b>
<\b>This Bold<\b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<\br> Has been used here and here<\br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
itaque
delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div class="border-green lists">
<div class="orderdlist block border flex-row ">
<ol id="ol1" class="inline-block" type="1">
<h6>OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olA" class="inline-block" type="A">
<h6>OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="ola" class="inline-block" type="a">
<h6>OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olI" class="inline-block" type="I">
<h6>OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="oli" class="inline-block" type="i">
<h6>OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div class="unorderedlist">
<ul type="square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div class="border-blue table text-cen flex flex-column wrap">
<h3>This is a Table</h3>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div class="border-red forms flex flex-column">
<h1 class="text-cen">FORMS</h1>
<h5>Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean.
Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br>
The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
not.
#gmail.com is value below in email. Remaining are Placeholder
</p>
<form action="#">
Button <input class="button" type="button" placeholder="Placeholder">
Checkbox<input type="checkbox" class="checkbox" placeholder="Placeholder">
Color<input type="color" placeholder="Placeholder">
Date<input type="date" placeholder="Placeholder">
Datetime<input type="datetime" placeholder="Placeholder">
Datetime-local<input type="datetime-local" placeholder="Placeholder"><p>Just Testing</p>
Email<input type="email" value="#gmail.com" placeholder="Placeholder">
File<input type="file" placeholder="Placeholder">
Hidden<input type="hidden" placeholder="Placeholder">
Image<input type="image" placeholder="Placeholder">
Month<input type="month" placeholder="Placeholder">
Number<input type="number" placeholder="Placeholder">
Password<input type="password" placeholder="Placeholder">
Radio<input type="radio" placeholder="Placeholder">
Range<input type="range" placeholder="Placeholder">
Reset<input type="reset" placeholder="Placeholder">
Search<input type="search" placeholder="Placeholder">
Submit<input type="submit" placeholder="Placeholder">
Tel<input type="tel" placeholder="Placeholder">
Text<input type="text" placeholder="Placeholder">
Time<input type="time" placeholder="Placeholder">
Url<input type="url" placeholder="Placeholder">
Week<input type="week" placeholder="Placeholder">
Select from a dropdown <select>
<option value="Option-1-Val">Option-1</option>
<option value="Option-2-Val">Option-2</option>
<option value="Option-3-Val">Option-3</option>
<option value="Option-4-Val">Option-4</option>
<option value="Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div class="entities border-green">
<h4>We use entities for displaying some character</h4>
<
<!-- Less Than -->
>
<!-- Greater Than -->
£
<!-- pound -->
©
<!-- copy -->
⇛
<!-- Arrow -->
½
<!-- In form of fraction -->
</div>
<div class="border-blue semanticelements">
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>
</div>
</body>
</html>
Specifically width: 100vw , if I remove this line the scrollbar disappears but so does the image.
width:auto also makes the picture disappears.
I want to display a background picture using this code (picture's address in url). If I remove this code the horizontal scroll bar disappears. Using a border shows that it is indeed the problem. How can I hide scroll bar while displaying an image on whole screen, no matter the size. (I mean no part of screen should be left out.)
Most of the answers out there suggest to remove 100vw and 100% width but that removes the picture
If possible suggest other ways which will allow me to display image on full screen without causing any problems to the aesthetics. The picture should be in background and for a specific tag only, not whole webpage.
You need to set box-sizing specifically for pseudo elements.
*, *::before, *::after{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
position: sticky;
top: 0px;
left:0px;
margin: 0px 0px 10px 0px;
padding: 5px 5px;
background-color: #15191f;
}
.heading{
height: 90vh;
}
.heading::before{
border: 2px solid chocolate;
content: "";
height: 100vh;
background: url() no-repeat center ;
width: 100vw;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.flex{
display: flex;
}
.flex-row{
flex-direction: row;
}
.flex-column{
flex-direction: column;
}
.wrap{
flex-wrap: wrap;
}
.al-cen{
align-items: center;
}
.ju-cen{
justify-content: center;
}
nav a{
text-decoration: none;
background-color: #15191f;
color: #e3ecf3;
padding: 4px 10px;
border: 2px;
border-radius: 10px;
}
nav a:hover{
color: #15191f;
background-color: #e3ecf3;
}
#li1{
margin-left: 50px;
}
#a1{
margin: 0px 4px;
}
#a2{
margin: 0px 4px;
}
#a3{
margin: 0px 4px;
}
#a4{
margin: 0px 4px;
}
nav ul li{
list-style: none;
}
#logo{
width: 5vw;
border: 2px ;
border-radius:100mm;
}
/* -------------------------------------------------------------------- */
div ul{
margin: 0px 40px;
}
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: #e3ecf3;
}
div{
margin: 20px 15px;
}
ol li{
margin: 0px 40px;
}
.block{
display:block;
}
.inline-block{
display: inline-block;
}
.border-red{
border: 3.5px solid red;
border-radius: 12px;
}
.border-green{
border: 3.5px solid green;
border-radius: 5px;
}
.border-blue{
border: 3.5px solid blue;
border-radius: 5px;
}
.line-height{
line-height: 8vh;
}
ol{
border: 2px solid blue;
border-radius: 5px;
text-align: center;
/* display: inline-block; */
margin: 4px 0px;
width:300px
}
.text-cen{
text-align: center;
}
ol li{
margin-left: 40px;
}
input{
display: block;
}
option{
background-color:#15191f;
color:#e3ecf3;
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select{
width: 85px;
background-color:#15191f;
color:#e3ecf3;
height:30px;
border: 2px solid #15191f;
border-radius: 6px;
}
.button{
height: 25px;
width: 25px;
/* border: 2px solid #15191f; */
border-radius: 100px;
/* background-color: #15191f; */
}
/* .button: */
.checkbox{
/* background-color: #15191f; */
height: 25px;
width: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All in One</title>
<link rel="stylesheet" href="../CSS/home.css">
<script src="../JS/home.js"></script>
</head>
<body class="">
<nav class="flex row al-cen">
<img id="logo" src="../random_source" alt="Error loading image">
<ul class="flex row">
<li id="li1"><a id="a1" href="../HTML/home.html" target="_blank">Home</a></li>
<li id="li2"><a id="a2" href="../HTML/about.html" target="_blank">About Us</a></li>
<li id="li3"><a id="a3" href="../HTML/services.html" target="_blank">Our Services</a></li>
<li id="li4"><a id="a4" href="../HTML/contact.html" target="_blank">Contact Us</a></li>
</ul>
</nav>
<div class="heading flex flex-column al-cen ju-cen">
<h1 class="line-height">All in ONE Website</h1>
<p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of
it for future usage.</p>
</div>
<hr>
<div class="border-red firstpara">
<p><b>
<\b>This Bold<\b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<\br> Has been used here and here<\br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
itaque
delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div class="border-green lists">
<div class="orderdlist block border flex-row ">
<ol id="ol1" class="inline-block" type="1">
<h6>OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olA" class="inline-block" type="A">
<h6>OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="ola" class="inline-block" type="a">
<h6>OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olI" class="inline-block" type="I">
<h6>OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="oli" class="inline-block" type="i">
<h6>OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div class="unorderedlist">
<ul type="square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div class="border-blue table text-cen flex flex-column wrap">
<h3>This is a Table</h3>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div class="border-red forms flex flex-column">
<h1 class="text-cen">FORMS</h1>
<h5>Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean.
Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br>
The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
not.
#gmail.com is value below in email. Remaining are Placeholder
</p>
<form action="#">
Button <input class="button" type="button" placeholder="Placeholder">
Checkbox<input type="checkbox" class="checkbox" placeholder="Placeholder">
Color<input type="color" placeholder="Placeholder">
Date<input type="date" placeholder="Placeholder">
Datetime<input type="datetime" placeholder="Placeholder">
Datetime-local<input type="datetime-local" placeholder="Placeholder"><p>Just Testing</p>
Email<input type="email" value="#gmail.com" placeholder="Placeholder">
File<input type="file" placeholder="Placeholder">
Hidden<input type="hidden" placeholder="Placeholder">
Image<input type="image" placeholder="Placeholder">
Month<input type="month" placeholder="Placeholder">
Number<input type="number" placeholder="Placeholder">
Password<input type="password" placeholder="Placeholder">
Radio<input type="radio" placeholder="Placeholder">
Range<input type="range" placeholder="Placeholder">
Reset<input type="reset" placeholder="Placeholder">
Search<input type="search" placeholder="Placeholder">
Submit<input type="submit" placeholder="Placeholder">
Tel<input type="tel" placeholder="Placeholder">
Text<input type="text" placeholder="Placeholder">
Time<input type="time" placeholder="Placeholder">
Url<input type="url" placeholder="Placeholder">
Week<input type="week" placeholder="Placeholder">
Select from a dropdown <select>
<option value="Option-1-Val">Option-1</option>
<option value="Option-2-Val">Option-2</option>
<option value="Option-3-Val">Option-3</option>
<option value="Option-4-Val">Option-4</option>
<option value="Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div class="entities border-green">
<h4>We use entities for displaying some character</h4>
<
<!-- Less Than -->
>
<!-- Greater Than -->
£
<!-- pound -->
©
<!-- copy -->
⇛
<!-- Arrow -->
½
<!-- In form of fraction -->
</div>
<div class="border-blue semanticelements">
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>
</div>
</body>
</html>
On the pseudo element I added box-sizing: border-box and changed the width to 100% instead of 100vw.
box-sizing: border-box
This changes which box is used when declaring absolute widths. When we set this to border-box, it means that the border is placed inside of the declared width, not adding to it.
i.e. I have a 100px wide box with 2px border, I want the border to be included in that 100px, not added to it.
width: 100%
Percent widths are relative to the width of the container, whereas viewport are relative to the viewport. 100% means take up all the width of the container I'm in, 100vw means take up all of the viewport width (including the scrollbar).
* {
margin: 0px;
padding: 0px;
}
nav {
position: sticky;
top: 0px;
left: 0px;
margin: 0px 0px 10px 0px;
padding: 5px 5px;
background-color: #15191f;
}
.heading {
height: 90vh;
}
.heading::before {
box-sizing: border-box;
border: 2px solid chocolate;
content: "";
height: 100vh;
background: url() no-repeat center;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.wrap {
flex-wrap: wrap;
}
.al-cen {
align-items: center;
}
.ju-cen {
justify-content: center;
}
nav a {
text-decoration: none;
background-color: #15191f;
color: #e3ecf3;
padding: 4px 10px;
border: 2px;
border-radius: 10px;
}
nav a:hover {
color: #15191f;
background-color: #e3ecf3;
}
#li1 {
margin-left: 50px;
}
#a1 {
margin: 0px 4px;
}
#a2 {
margin: 0px 4px;
}
#a3 {
margin: 0px 4px;
}
#a4 {
margin: 0px 4px;
}
nav ul li {
list-style: none;
}
#logo {
width: 5vw;
border: 2px;
border-radius: 100mm;
}
/* -------------------------------------------------------------------- */
div ul {
margin: 0px 40px;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: #e3ecf3;
}
div {
margin: 20px 15px;
}
ol li {
margin: 0px 40px;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.border-red {
border: 3.5px solid red;
border-radius: 12px;
}
.border-green {
border: 3.5px solid green;
border-radius: 5px;
}
.border-blue {
border: 3.5px solid blue;
border-radius: 5px;
}
.line-height {
line-height: 8vh;
}
ol {
border: 2px solid blue;
border-radius: 5px;
text-align: center;
/* display: inline-block; */
margin: 4px 0px;
width: 300px
}
.text-cen {
text-align: center;
}
ol li {
margin-left: 40px;
}
input {
display: block;
}
option {
background-color: #15191f;
color: #e3ecf3;
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select {
width: 85px;
background-color: #15191f;
color: #e3ecf3;
height: 30px;
border: 2px solid #15191f;
border-radius: 6px;
}
.button {
height: 25px;
width: 25px;
/* border: 2px solid #15191f; */
border-radius: 100px;
/* background-color: #15191f; */
}
/* .button: */
.checkbox {
/* background-color: #15191f; */
height: 25px;
width: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All in One</title>
<link rel="stylesheet" href="../CSS/home.css">
<script src="../JS/home.js"></script>
</head>
<body class="">
<nav class="flex row al-cen">
<img id="logo" src="../random_source" alt="Error loading image">
<ul class="flex row">
<li id="li1"><a id="a1" href="../HTML/home.html" target="_blank">Home</a></li>
<li id="li2"><a id="a2" href="../HTML/about.html" target="_blank">About Us</a></li>
<li id="li3"><a id="a3" href="../HTML/services.html" target="_blank">Our Services</a></li>
<li id="li4"><a id="a4" href="../HTML/contact.html" target="_blank">Contact Us</a></li>
</ul>
</nav>
<div class="heading flex flex-column al-cen ju-cen">
<h1 class="line-height">All in ONE Website</h1>
<p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of it for future usage.</p>
</div>
<hr>
<div class="border-red firstpara">
<p><b>
<\b>This Bold<\b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<\br> Has been used here and here<\br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti itaque delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div class="border-green lists">
<div class="orderdlist block border flex-row ">
<ol id="ol1" class="inline-block" type="1">
<h6>OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olA" class="inline-block" type="A">
<h6>OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="ola" class="inline-block" type="a">
<h6>OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olI" class="inline-block" type="I">
<h6>OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="oli" class="inline-block" type="i">
<h6>OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div class="unorderedlist">
<ul type="square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div class="border-blue table text-cen flex flex-column wrap">
<h3>This is a Table</h3>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div class="border-red forms flex flex-column">
<h1 class="text-cen">FORMS</h1>
<h5>Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean. Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br> The diff between value and placeholder is that the placeholder
gets removed whan an item is entered, wheras when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is not. #gmail.com is value below in email. Remaining are Placeholder
</p>
<form action="#">
Button <input class="button" type="button" placeholder="Placeholder"> Checkbox
<input type="checkbox" class="checkbox" placeholder="Placeholder"> Color
<input type="color" placeholder="Placeholder"> Date
<input type="date" placeholder="Placeholder"> Datetime
<input type="datetime" placeholder="Placeholder"> Datetime-local
<input type="datetime-local" placeholder="Placeholder">
<p>Just Testing</p>
Email<input type="email" value="#gmail.com" placeholder="Placeholder"> File
<input type="file" placeholder="Placeholder"> Hidden
<input type="hidden" placeholder="Placeholder"> Image
<input type="image" placeholder="Placeholder"> Month
<input type="month" placeholder="Placeholder"> Number
<input type="number" placeholder="Placeholder"> Password
<input type="password" placeholder="Placeholder"> Radio
<input type="radio" placeholder="Placeholder"> Range
<input type="range" placeholder="Placeholder"> Reset
<input type="reset" placeholder="Placeholder"> Search
<input type="search" placeholder="Placeholder"> Submit
<input type="submit" placeholder="Placeholder"> Tel
<input type="tel" placeholder="Placeholder"> Text
<input type="text" placeholder="Placeholder"> Time
<input type="time" placeholder="Placeholder"> Url
<input type="url" placeholder="Placeholder"> Week
<input type="week" placeholder="Placeholder"> Select from a dropdown
<select>
<option value="Option-1-Val">Option-1</option>
<option value="Option-2-Val">Option-2</option>
<option value="Option-3-Val">Option-3</option>
<option value="Option-4-Val">Option-4</option>
<option value="Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div class="entities border-green">
<h4>We use entities for displaying some character</h4>
<
<!-- Less Than -->
>
<!-- Greater Than -->
£
<!-- pound -->
©
<!-- copy -->
⇛
<!-- Arrow -->
½
<!-- In form of fraction -->
</div>
<div class="border-blue semanticelements">
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>
</div>
</body>
</html>
In main tag of your website you should give width 100%:
width : 100%;
if you set 100vw your browser take overflow-x as well as your vertical scrollbar width.
I'm trying to style a reusable component such that it will stay inline but truncate its contents whenever it overflows. What makes it trickier is that I need to have an icon on the right.
The main issue is that I need the icon to stay on the same line, so I compensate for it in the width of the truncated text (width: calc(100% - 40px)), which makes any non-truncating example be that much shorter than it's normal width.
See the snippet below and how the short example is barely visible.
body, .container {
width: 100%;
padding: 0;
margin: 50px 0;
}
.quantity-value {
display: inline-block;
max-width: 100%;
margin-right: 16px;
background: #f1f1f1;
}
.value-and-icon-wrapper {
display: inline-block;
width: 100%;
}
.icon {
padding-left: 5px;
}
.truncated-text {
display: inline-block;
width: calc(100% - 40px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: top;
-webkit-line-clamp: 1;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<div class="value-and-icon-wrapper">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<div class="value-and-icon-wrapper">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
</div>
other content
</div>
This is because you are using a lot of inline-block and the width of inline-block is defined by its content so if you set 100% - 40px for a child item, it means its width minus 40px
Try to do it differently like below using flexbox:
body, .container {
width: 100%;
padding: 0;
margin: 50px 0;
}
.quantity-value {
display: inline-flex;
max-width: calc(100% - 16px); /* don't forget to account for margin here */
margin-right: 16px;
background: #f1f1f1;
}
.icon {
padding-left: 5px;
}
.truncated-text {
flex:1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
Without flexbox you can do it like below:
body, .container {
margin: 50px 0;
}
.quantity-value {
display: inline-block;
max-width: calc(100% - 16px); /* don't forget to account for margin/padding here */
margin-right: 16px;
background: #f1f1f1;
padding-right:20px;
box-sizing:border-box;
position:relative;
}
.icon {
padding-left: 5px;
position:absolute;
right:0;
top:0;
bottom:0;
}
.truncated-text {
display:block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
Try applying the style text-overflow: ellipsis to the div that contains the text to be truncated.
MDN Documentation for text-overflow
I'm trying to fill an unordered vertical list that continues on the next line every time the list reaches the length limit. But instead of simply displaying the next list item on the next line I want the list item to break and continue like this:
I don't want to do this with columns, rather that it breaks dynamically.
Maybe something like this to make the list horizontal and to create your own custom list-style-type?
Code:
<style>
ul {
list-style-type: none;
text-align: center;
width: 450px;
}
li {
display: inline;
}
li:before {
content: "\2022";
margin-right: 2px;
}
</style>
<ul>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
</ul>
How about giving your <ul> a set max-width, then give your <li> display: inline; so they aren't block elements anymore and wrap like you want. However list-style-type will not work on the li's anymore because they are inline elements. You can still get your red bullet points working with background images, looks like you might be already doing this.
ul {
max-width: 220px;
list-style-type: disc;
}
ul li {
display: inline;
}
<ul>
<li>Hey there this is a pretty long sentence</li>
<li>Hey there this is a pretty long sentence</li>
<li>Hey there this is a pretty long sentence</li>
<li>Hey there this is a pretty long sentence</li>
</ul>
You can use css to change the way of items are listed.
Ex:
ul {
width: 250px;
display: inline-block;
}
li {
float: left;
margin-left: 20px;
}
<html>
<body>
<ul>
<li>item 1</li>
<li>item 1 item 2</li>
<li>item 1 item 2 item 3</li>
<li>item n</li>
</ul>
</body>
</html>
I'm using ✈ as list list specifier, it looks nice for my project when it is in single line , but for mobile view (in multiple line of a list) it looks bit ugly . do you have some remedies .. thank you
Actual view :
✈ this is what my problem with li tags please give me some remedies. ✈ this is what my problem with li tags please give me some remedies.
Expected view:
✈ This looks awesome to display is there anyway to do this. ✈ This looks awesome to display is there anyway to do this.
There are couple of different ways to achieve this.
Option 1. CSS Tables
ul {
list-style-type: none;
display: table;
width: 200px;
padding: 0;
}
li {
display: table-row;
}
li:before {
content: '✈ ';
padding-right: 5px;
display: table-cell;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
Option 2. absolute and relative positions
ul {
list-style-type: none;
width: 200px;
padding: 0;
}
li {
position: relative;
margin-left: 25px;
}
li:before {
content: '✈ ';
position: absolute;
left: -20px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
Option 3. Flexbox
ul {
list-style-type: none;
width: 200px;
padding: 0;
}
li {
display: flex;
}
li:before {
content: '✈ ';
margin-right: 5px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
I found a simple solution to use table(without border) with bootstrap.
<style>
table tr td{
vertical-align:top;
text-align:left;
}
</style>
<table>
<tr>
<td>✈ </td>
<td>This looks awesome to display</td>
</tr>
<tr>
<td>✈ </td>
<td>This looks awesome to display</td>
</tr>
</table>
In my code, my footer will display at the bottom of my page, with no space above or below, as long as I specify a height of my page within Google Chrome. I tried doing height: 100% and so forth but still had problems.
When comparing that to my IE 11, the footer with a specified height has space below it. I can't seem to get both browsers to compromise and I have tried various options to make them both work.
My current css code that would affect the footer is as shown:
html {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
min-width: 768px;
/*keeps footer at bottom of page for IE 11 */
display: flex;
}
/* Formating for body of Web Site */
* {margin: 0; padding: 0;}
body {
font-family: times new roman;
background-color: #ebebeb;
zoom: 75%;
/*keeps footer at bottom of page for IE 11 */
width: 100%;
background-postion: 50% 80%;
}
#screen {
/* This locks everything in place*/
top:0px;
margin: 0 auto;
width:1500px;
height: 1500px;
padding-top:0;
padding-bottom: 30px;
postion: absolute;
margin-left: 70px;
margin-bottom: 0;
}
/* footer formating */
#footer {
background-color: black;
height: 40px;
width: 1500px;
color: white;
padding-top: 10px;
position: relative center;
bottom: 0;
text-align: center;
margin-left:70px;
}
My html:
<html>
<div id = "screen">
<body>
............................................. other code
<div id = "footer">
Copyright Notice - Site Maintanence by **********
<br>
Author of Published Text Content: ************<br>
Pagetop
</div> <!-- end footer -->
</div> <!-- end screen format -->
</body>
</html>
What IE looks like:
if i got you right, you want the footer to "stick" the upper part of the website in both Chrome and IE11 browsers.
i'm not sure why you chose this CSS settings because you didn't supply a link to the full website so i don't know exactly what is going on, but, you can get what you want not just on this two, but in all the browsers, the key is in the structure and the CSS, let me show you.
first of all i arranged your HTML and CSS so it will be easier to read and folow, i also deleted not needed code parts but you can do a reference with the old code to see the changes.
the <div id="screen"> element was outside the <body> tag, so i put it in.
as you can see in the HTML code, i've put <div id="leftcol"> and <div id="centercol"> elements with "lorem ipsum" text to Illustrate the situation in your website. i assumed <div id="screen"> is the website wrapper so i wrapped it all inside it.
<div id="screen">
<div id="leftcol">lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet</div>
<div id="centercol">lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet</div>
<div class="clear"></div>
<div id="footer">
Copyright Notice - Site Maintanence by **********
<br />
Author of Published Text Content: ************
<br />
</div> <!-- end footer -->
<div class="center">
Pagetop
</div>
</div> <!-- end screen format -->
you can see in the CSS i've deleted unnecessary code like i said before, the key is to keep the things simple unless you have to make it complicated for some reason, if you will tell me the reason you need the <HTML> element with display: flex; or <div id="screen"> element with position: absolute; i will try to help you with this and solve the problem but otherwise, let's keep it simple:
*
{
margin: 0;
padding: 0;
}
html
{
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body
{
font-family: times new roman;
background-color: #ebebeb;
background-postion: 50% 80%;
}
#screen
{
margin: 0 auto;
}
#footer
{
padding: 5px;
background-color: #000;
color: #fff;
text-align: center;
}
.center
{
text-align: center;
}
#leftcol
{
width: 30%;
float: left;
background: #B4B4B4;
}
#centercol
{
width: 60%;
float: right;
background: #fff;
}
#leftcol, #centercol
{
padding: 2%;
}
.clear
{
clear: both;
}
that's way it's working in all of the browsers include old versions of IE.
example: http://jsfiddle.net/Lvrcw4vw/3/