Below you can see my code. The problem is that section are supposed to be in top right corner. The only way for me to solve the problem is to use relative and absolute positioning, but unfortunately it doesn't work. Please help me with finding the solution using absolute and relative positioning.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jjjj</title>
<style type="text/css">
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: Helvetica, sans-serif;
}
h1 {
text-align: center;
margin-top: 75px;
margin-bottom: 75px;
}
#test1 {
position: relative;
}
#test2 {
position: relative;
}
#test3 {
position: relative;
}
.base {
background-color: #979691;
border: black solid 2px;
margin: 15px;
padding: 30px;
}
.row {
width: 100%;
}
#p1 {
background-color: #D789B9;
font-size: 20px;
font-weight: 600;
position: absolute;
top: 0;
right: 110;
}
#p2 {
background-color: #D51537;
color: white;
font-size: 20px;
font-weight: 600;
position: absolute;
top: 0;
right: 0;
}
#p3 {
background-color: #D8C84F;
font-size: 20px;
font-weight: 600;
position: absolute;
top: 0;
right: 0;
}
#media (min-width: 992px) {
.col-lg-4, .right-top-lg {
float: left;
}
.col-lg-4{
width: 33%;
}
.right-top-lg {
position: absolute;
bottom: 100px;
left: 0px;
font-weight: 400;
border: black solid 2px;
width: 100px;
text-align: center;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.col-md-6, .col-md-12, .right-top-md{
float: left;
}
.col-md-6{
width: 50%;
}
.col-md-12{
width: 100%;
}
}
#media (max-width: 767px) {
.col-sm-12, .right-top-sm {
float: left;
}
.col-sm-12{
width: 100%;
}
}
</style>
</head>
<h1>
Our Menu
</h1>
<div class="row">
<div id="test1" class="col-lg-4 col-md-6 col-sm-12">
<p id="p1" class="right-top-lg">Chiken</p>
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="test2" class="col-lg-4 col-md-6 col-sm-12">
<p id="p2" class="right-top-lg">Beef</p>
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="test3" class="col-lg-4 col-md-12 col-sm-12">
<p id="p3" class="right-top-lg">Sushi</p>
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>
The position elements were working exactly as you wrote it, but the problem was that you put a margin on the p element that was supposed to look like the container. So the corner label appeared to break out of the box, when in fact it was sitting right where you wanted it to relative to it's parent container.
2 possible solutions.
move the margin: 15px; to the parent containers (#test1 etc)
Put the background color and border on the parent containers so it doesn't appear to break out
Here is option 1.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jjjj</title>
<style type="text/css">
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: Helvetica, sans-serif;
}
h1 {
text-align: center;
margin-top: 75px;
margin-bottom: 75px;
}
#test1 {
position: relative;
margin: 15px;
}
#test2 {
position: relative;
margin: 15px;
}
#test3 {
position: relative;
margin: 15px;
}
.base {
background-color: #979691;
border: black solid 2px;
padding: 30px;
}
.row {
width: 100%;
}
#p1 {
background-color: #D789B9;
font-size: 20px;
font-weight: 600;
position: absolute;
top: 0;
right: 110;
}
#p2 {
background-color: #D51537;
color: white;
font-size: 20px;
font-weight: 600;
position: absolute;
top: 0;
right: 0;
}
#p3 {
background-color: #D8C84F;
font-size: 20px;
font-weight: 600;
position: absolute;
top: 0;
right: 0;
}
#media (min-width: 992px) {
.col-lg-4, .right-top-lg {
float: left;
}
.col-lg-4{
width: 33%;
}
.right-top-lg {
position: absolute;
bottom: 100px;
left: 0px;
font-weight: 400;
border: black solid 2px;
width: 100px;
text-align: center;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.col-md-6, .col-md-12, .right-top-md{
float: left;
}
.col-md-6{
width: 50%;
}
.col-md-12{
width: 100%;
}
}
#media (max-width: 767px) {
.col-sm-12, .right-top-sm {
float: left;
}
.col-sm-12{
width: 100%;
}
}
</style>
</head>
<h1>
Our Menu
</h1>
<div class="row">
<div id="test1" class="col-lg-4 col-md-6 col-sm-12">
<p id="p1" class="right-top-lg">Chiken</p>
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="test2" class="col-lg-4 col-md-6 col-sm-12">
<p id="p2" class="right-top-lg">Beef</p>
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="test3" class="col-lg-4 col-md-12 col-sm-12">
<p id="p3" class="right-top-lg">Sushi</p>
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>
Related
I'm new to web development and I'm trying to replicate this website on my own.
And now I'm encountering a problem.
I'm not sure why the float: left (under #media) is not correctly working. I made sure to apply box-sizing: border-box to allow the inclusion of the padding and border in an element's total width and height.
Below is my code:
* {
box-sizing: border-box;
}
body{
margin-top: 40px;
background-color: #F9F9FB;
}
.container-fluid {
margin-top: 50px;
}
h3 {
border-left: 1px solid black;
border-bottom: 1px solid black;
margin: 0px;
padding: 1px;
width: 33.33%;
height: 28px;
float: right;
text-align: center;
background-color: #B59F84;
}
.row div {
border: 1px solid black;
padding: 0px;
margin: 10px;
background-color: #FFFFF5;
}
p {
margin: 0px;
padding: 10px;
clear: right;
}
/********** Large devices only **********/
#media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Assignment Solution for Module 2</title>
</head>
<body>
<h1 style="text-align: center;">Our Menu</h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<h3>Div 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-lg-4">
<h3>Div 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-lg-4">
<h3>Div 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</body>
</html>
I made sure to apply box-sizing: border-box to allow the inclusion of the padding and border in an element's total width and height.
Edit: it should be float: left not float: right
You need to set the card's width first of all. For responsiveness, go for max-width.
In this example, Im using flexbox along with max-with:400px (change to your needs) for each card. With those few extra lines, your row will be responsive. (In my example, they are centered in the middle of the page, you can change that by playing with justify-content).
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
.row div {
border: 1px solid black;
max-width: 400px;
padding: 0px;
margin: 10px;
background-color: #FFFFF5;
}
I want to add an icon as a connector before a div container: something like this:
This is what I have have (https://jsfiddle.net/kmcursf6/).
.parent {
border-left: 1px solid #ff0000;
}
.child {
position: relative;
margin-left: 20px;
background: #e9e9e9;
margin-bottom: 10px;
padding: 10px;
}
.child::before {
position: absolute;
content: '';
left: -20px;
top: 50%;
border-top: 1px solid #ff0000;
width: 20px;
}
.child:last-child::after {
position: absolute;
content: '';
left: -21px;
top: calc(50% + 1px);
bottom: 0;
border-left: 1px solid #FFFFFF;
}
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</div>
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</div>
<div class="child">
click to add more
</div>
</div>
I tried this to add that icon:
.child::before {
position: absolute;
content: '';
left: -20px;
top: 50%;
width: 20px;
transform: rotate(90deg);
border-radius: 20px;
}
but it doesn't work and it completely throws off what I have. Any ideas how to get there?
.child::after {
position: absolute;
content: '';
left: -10px;
top: 50%;
margin-top: -10px;
width: 20px;
height: 20px;
background: #000;
border-radius: 90%;
clip-path: polygon(50% 0, 50% 100%, 0 100%, 0 0);
}
https://jsfiddle.net/r5z0av87/1/
.parent {
border-left: 1px solid #000;
}
.child {
position: relative;
margin-left: 20px;
background: #e9e9e9;
margin-bottom: 10px;
padding: 10px;
}
.child::before {
position: absolute;
content: '';
left: -5px;
top: calc(50% - 5px);
border: 1px solid black;
background: black;
width: 10px;
height: 10px;
border-radius: 50%;
z-index: -1;
}
.child::after{
position: absolute;
content: '';
left: -20px;
top: 50%;
border-top: 1px solid #000;
width: 20px;
}
.child:last-child::after {
position: absolute;
content: '';
left: -21px;
top: calc(50% + 1px);
bottom: 0;
border-left: 1px solid #FFFFFF;
}
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</div>
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</div>
<div class="child">
click to add more
</div>
</div>
Add an ::before element. Create an square. put border-radius: 50% so you have an circle. Then position the element at the right place. Put z-index: -1 so that the circle is under your div block.
Use calc to calculate the vertical alignment. calc(50% - 5px) here i used 50% like for the lines and 5px are the half of the width or height of the square.
For left i used 6px. Usually 5px, the half of the width, should be the exact half but i decided to go with 6px kinda looks better for me, personal opinion.
.child::before {
position: absolute;
content: '';
left: -6px;
top: calc(50% - 5px);
border: 1px solid black;
background: black;
width: 10px;
height: 10px;
border-radius: 50%;
z-index: -1;
}
It's hard to create a black circle and a horizontal line in the middle with using only CSS. Therefore, I reached the conclusion that the circle and the horizontal line must be two separate pseudo-elements.
In this case, the ::after pseudo-element creates the circle part. Also, we use the z-index to make it so that the full circle appears only as semicircle because half of it is covered by div.child.
As for the horizontal line, we are still creating it using the ::before pseudo-element. However, the line (from the parent's border-left) is protruding and we want to make the last trailing bit of the list-like line disappear. To do this, we can modify the last div.child's ::before pseudo-element so that it is instead a rectangle. Set its height to 50% of div.child, position it to 50% from the top of the div.child, make the border-top black to create the horizontal line, and make the border-left white to cover the parent's trailing line.
Here's a working example. I used 4px on last div.child::before pseudo-element so that it doesn't draw wrongly upon zoom. Also, you might want to read about box-sizing: border-box here (although unrelated).
.parent {
font-family: Helvetica;
font-size: 0.8em;
border-left: 1px solid #000;
}
.child {
position: relative;
margin-left: 20px;
background: #e9e9e9;
margin-bottom: 10px;
padding: 10px;
}
.child::before {
position: absolute;
content: '';
top: 50%;
left: -20px;
border-top: 1px solid #000;
width: 20px;
}
.child::after {
position: absolute;
z-index: -1;
content: '';
top: 50%;
left: -5px;
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
transform: translateY(-50%);
}
.child:last-child::before {
box-sizing: border-box;
border-left: 4px solid #FFF;
height: 50%;
left: -22px;
}
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</div>
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</div>
<div class="child">
click to add more
</div>
</div>
Can someone help me figure out how to make my pseudo element span the entire width of my div element, instead of cutting off at the scroll please?
I've tried a few different things found online including changing display type, width etc. Please keep in mind this needs to be displayed horizontally. If you have any other suggestions how to make this work or any improvements in general that would be great.
thanks
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Vardana';
}
.container {
background: linear-gradient(to right, rgba(20,30,48,.9), rgba(36,59,85,.9));
margin: 20px;
height: 400px;
border-radius: 10px;
overflow: scroll;
font-size: 13px;
}
.container ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
position: relative;
}
.container ul:before {
content: "";
position: absolute;
width: 100%;
height: 4px;
background: white;
margin-top: 20px;
}
.Event1:before {
content: "";
margin-top: -28px;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2));
border: 1.5px solid white;
}
.Event2:before {
content: "";
margin-top: -28px;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2));
border: 1.5px solid white;
}
.Event3:before {
content: "";
margin-top: -28px;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2));
border: 1.5px solid white;
}
.Event4:before {
content: "";
margin-top: -28px;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2));
border: 1.5px solid white;
}
.Event5:before {
content: "";
margin-top: -28px;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2));
border: 1.5px solid white;
}
.Event6:before {
content: "";
margin-top: -28px;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2));
border: 1.5px solid white;
}
li {
list-style: none;
}
.Event1 h4 {
color: #feb645;
font-size: 14px;
}
.Event2 h4 {
color: #feb645;
font-size: 14px;
}
.Event3 h4 {
color: #feb645;
font-size: 14px;
}
.Event4 h4 {
color: #feb645;
font-size: 14px;
}
.Event5 h4 {
color: #feb645;
font-size: 14px;
}
.Event6 h4 {
color: #feb645;
font-size: 14px;
}
.Event1 {
margin: 10px;
margin-top: 30px;
padding: 10px;
border-radius: 10px;
color: white;
width: 200px;
}
.Event2 {
margin: 10px;
margin-top: 30px;
padding: 10px;
border-radius: 10px;
color: white;
width: 200px;
}
.Event3 {
margin: 10px;
margin-top: 30px;
padding: 10px;
border-radius: 10px;
color: white;
width: 200px;
}
.Event4 {
margin: 10px;
margin-top: 30px;
padding: 10px;
border-radius: 10px;
color: white;
width: 200px;
}
.Event5 {
margin: 10px;
margin-top: 30px;
padding: 10px;
border-radius: 10px;
color: white;
width: 200px;
}
.Event6 {
margin: 10px;
margin-top: 30px;
padding: 10px;
border-radius: 10px;
color: white;
width: 200px;
}
<!DOCTYPE HTML>
<html lang=“en”>
<head>
<title>Dads Website</title>
<link rel="stylesheet" href="stylesheet.css">
<script src="JavaScript.js" defer> </script>
</head>
<body>
<header>
<nav class="navbar">
<h1>History Timeline</h1>
</header>
<div class="container">
<ul id="timelineList">
<li class="Event1"><h4>Event 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
<li class="Event2"><h4>Event 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
<li class="Event3"><h4>Event 3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
<li class="Event4"><h4>Event 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
<li class="Event5"><h4>Event 5</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
<li class="Event6"><h4>Event 6</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
</ul>
</div>
</body>
<footer class="footer">
</footer>
</html>
I’ve changed from grid to inline-block to make this still display horizontally. But I think the below worked for me...
Width: max-content;
I have this page here demoPage I am trying to make my navbar brand reponsive with the page. For now i have added custom padding with navbar-brand but i want it to be responsive with the page if i change the size of my browser. Also i want a little space between my school title and its logo. How can i do that? I have written this page in an angular component
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.alignLeft {
float: left;
}
.indented {
padding-left: 50pt;
padding-right: 50pt;
}
.col-sm-9 {
background-color: white;
}
img {
padding-left: 10px;
width: 100%;
height: 100%;
}
h3 {
text-align: center;
padding-left: 20px;
}
h4,
p {
padding-left: 20px;
padding-right: 20px;
text-align: justify !important;
}
.para1 {
text-align: center !important;
}
h4:first-child {
display: inline;
margin-left: 20px !important;
}
h4:nth-child(2) {
text-align: left !important;
}
p:first-child {
text-align: center !important;
}
p:nth-child(3) {
text-align: left !important;
float: left !important;
}
#media (min-width: 480px) {
img {
float: left;
padding-right: 10px;
padding-bottom: 0px;
}
.col-sm-9 {
padding-bottom: 25px;
}
h4,
p {
padding-left: 20px;
padding-right: 20px;
text-align: justify !important;
}
.container-fluid {
text-align: justify !important;
}
}
.columns1 {
align-self: center;
justify-self: center;
background-color: white;
margin-bottom: 0;
}
.center2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-content: center;
padding-left: 400px;
padding-right: 400px;
margin-bottom: 0;
}
.center {
margin: 0 auto;
width: 90%;
padding-left: 300px;
}
.jumbotron {
align-items: center;
}
.center1 {
margin: auto;
width: 50%;
padding-left: 140px;
}
.footer-copyright {
width: 100%;
background-color: gray;
padding-right: 70px;
}
.footer {
font-family: "Roboto", sans-serif;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
border: none;
background-color: grey;
bottom: 0;
position: relative;
left: 0;
z-index: 12;
width: 100%;
white-space: nowrap;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
float: left;
height: 50px;
font-size: 18px;
margin-top: 100px;
}
.footer a {
background-color: transparent;
}
a {
color: white;
text-align: center;
}
.navbar-brand {
padding-left: 450px;
}
.navbar {
font-family: "Roboto", sans-serif;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
border: none;
position: fixed;
top: 0;
left: 0;
z-index: 12;
width: 100%;
}
.navbar .navbar-brand {
white-space: nowrap;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> HTML Code
<div class="container-fluid">
<nav class="navbar">
<a class="navbar-brand" asp-controller="Home" asp-action="Index"><i class="fa
fa-cubes"></i> GEP <span class="header-logo-text">Learning Management
System</span></a>
</nav>
<div class="jumbotron vertical-center">
<div class="row content">
<div class="center2">
<div class="columns1 text-center">
<img class="img-responsive" src="/assets/images/school.png" alt="Smiley face" style="float:left; border:2px solid gray; border-radius: 50%; display: inline; width:90px; height:80px; margin-top:60px; margin-left: 20px;">
<h4 align="left" style="margin-top: 90px;">
School Name/ Title<br><br><br>
</h4>
<br>
<hr>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo </p>
</div>
<br>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:200px;height:200px;">
<p><span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
</div>
<br>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:left;width:200px;height:200px;">
<p><span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
</div>
<br>
<br>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:200px;height:200px;">
<p><span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
</div>
<br>
<hr>
<div>
<h3>Address</h3>
<i class="material-icons" style="color:red;">location_on</i><span id="txt1">Address,County,City,District</span>
</div>
</div>
</div>
</div>
<div class="footer">
<a href="">
<h3>Gep Learning Management Sytem</h3>
</a>
</div>
</div>
</div>
On your navbar-brand, add the class of mx-auto
<a class="navbar-brand mx-auto" asp-controller="Home" asp-action="Index"><i class="fa
fa-cubes"></i> GEP <span class="header-logo-text">Learning Management
System</span></a>
Then, in your css, remove the padding-left that you added to .navbar-brand.
.navbar-brand {
/*padding-left: 450px;*/
}
As for the space between the logo and school title, you can add a class of mr-1, mr-2, or mr-3 (or 4, or 5) to the img, depending on how much space you want.
<img class="img-responsive mr-2" src="/assets/images/school.png" alt="Smiley face" style="float:left; border:2px solid gray; border-radius: 50%; display: inline; width:90px; height:80px; margin-top:60px; margin-left: 20px;">
mx-auto centers content.
mr-1 (or 2, 3, etc.) adds margin-right (hence "m" and "r").
Check out the documentation on spacing on Bootstrap 4: https://getbootstrap.com/docs/4.1/utilities/spacing/
I'm assuming you are using Bootstrap 4. :)
Here is how i solved this
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.alignLeft {
float: left;
}
.indented{padding-left: 50pt; padding-right: 50pt;}
.col-sm-9 {
background-color: white;
}
img {
padding-left: 10px;
width: 100%;
height: 100%;
}
h3 {
text-align: center;
padding-left: 20px;
}
h4, p {
padding-left: 20px;
padding-right: 20px;
text-align: justify !important;
}
.para1 {
text-align: center !important;
}
h4:first-child {
display: inline;
margin-left: 20px !important;
}
h4:nth-child(2) {
text-align: left !important;
}
p:first-child {
text-align: center !important;
}
p:nth-child(3) {
text-align: left !important;
float: left !important;
}
.center3 {
margin: auto;
width: 65%;
margin-bottom: 0;
}
.columns1 {
align-self: center;
justify-content: center;
background-color: white;
margin-bottom: 5px;
padding-bottom: 50px;
}
.thumb {
width: 100px;
height: 100px;
display: inline-block;
border-radius: 50%;
background-image: url(/assets/images/school.png);
background-size: cover;
background-position: center;
margin-top: 60px;
margin-left: 20px;
float: left;
}
.center2{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-content: center;
margin: auto;
width: 65%;
margin-bottom: 0;
}
i.material-icons {
font-size: 16px;
vertical-align: middle;
position: relative;
font-size: 24px;
}
p {
font-size: 17px !important;
}
.center2 .footer {
bottom: 0;
}
.center {
margin: 0 auto;
width: 90%;
padding-left: 300px;
}
.jumbotron {
align-items: center;
background-color: white;
overflow-x: hidden;
}
.navbar {
align-items: center;
}
.center1 {
margin: auto;
width: 50%;
padding-left: 140px;
}
.footer-copyright {
width: 100%;
background-color: gray;
padding-right: 70px;
}
.footer {
font-family: "Roboto", sans-serif;
background-color: grey;
bottom: 0;
margin : auto;
margin-bottom: 0;
position: relative;
z-index: 12;
font-size: 10px;
display: grid;
text-align: center;
margin-left: auto;
margin-right: auto;
text-overflow: ellipsis;
}
.footer a {
background-color: transparent;
}
a {
color: white;
text-align: center;
}
.container-fluid {
background-color: white;
}
#media screen and (max-width: 700px) {
.center2 {
width: 100%;
}
.center3 {
width: 100%;
}
.img-responsive {
width: 100% !important;
}
}
<nav class="navbar">
<div class="center3">
<a class="navbar-brand mx-auto" asp-controller="Home" asp-action="Index">
<i class="fa fa-cubes"></i> GEP
<span class="header-logo-text">Learning Management System</span>
</a>
</div>
</nav>
<div class="jumbotron vertical-center">
<div class="row content">
<div class="center2">
<div class="columns1 text-center">
<div class="thumb"></div>
<h4 align="left" style="margin-top: 100px;">
<span style="margin-left: 20px;">School Name</span>
</h4>
<br>
<br>
<br>
<hr>
<section>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
</div>
</section>
<br>
<br>
<section>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:400px;height:200px;">
<p>
<span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
</p>
</div>
</section>
<br>
<br>
<br>
<br>
<br>
<section>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:left;width:400px;height:200px;">
<p>
<span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</section>
<br>
<br>
<br>
<br>
<section>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:400px;height:200px;">
<p>
<span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</section>
<br>
<br>
<br>
<br>
<section>
<div>
<h3><u>Address</u></h3>
<i class="material-icons" style="color:red; ">location_on</i>
<span id="txt1" style="font-size: 15px;">Address,County,City,District</span>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="footer">
<div>
<a href="">
<h3>Gep Learning Management System</h3>
</a>
</div>
</div>
I try to add a border on the bottom of an h4 title with some extra css and custom length. I know that the only way, compatible with the most browsers is using the ::before rule. However, I have the following problem on the code:
<div class="my_div_class">
<h4>This is a title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
</div>
.my_div_class h4::before {
position: absolute;
margin: auto;
z-index: 1;
content: "";
width: 75%;
height: 2px;
background: black;
left: 12.5%;
bottom: 0;
}
.my_div_class h4 {
margin-bottom: 25px;
}
.my_div_class {
width: 30%;
height: 250px;
}
The border goes to the end of the page (or in my website, to the end of the bigger div element) instead of the end of the h4.
Here is a jsfiddle. You can barely see it in the bottom of the page.
.my_div_class h4::before {
position:absolute;
margin: auto;
z-index: 1;
content: "";
width: 75%;
height: 2px;
background: black;
margin-top:1em;
left: 12.5%;
}
What has changed:
bottom:0; <--- Removed
margin-top:1em; <--- Added
https://jsfiddle.net/550ttypa/3/