This is my total code. There are two div. When I scroll down the page, the 2nd div is overlapping with the 1st one, and it goes below to the 1st div. As you can see in the screenshot, the image and paragraph are over the 1st div.but i want the two div's separate to each other and the 2nd one to properly sit in it's own place. I stack in this portion. Please help me out...thanks in advance
body {
overflow-x: hidden;
}
#particle {
background-color: blue;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 550px;
}
#overlay {
position: relative;
}
#inner-banner-image {
padding-top: 12%;
width: 80%;
margin: auto;
}
#banner-content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow: hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 520px;
margin-top: 5%;
}
#button {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
padding: 10px 16px;
font-size: 15px;
width: 155px;
border-radius: 6px;
}
.about {
background-color: #C57ED3;
padding-top: 100px;
color: #490D40;
height: 510px;
text-align: center;
}
p {
padding: 50px 50px;
text-align: center;
justify-content: center;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--jQuery library-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Latest compiled and minified JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="resume.css" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<title>
RESUME</title>
</head>
<body>
<div id="particle"></div>
<div id="overlay">
<div id="inner-banner-image">
<center>
<div id="banner-content">
<marquee bgcolor="#c9302c" behavior="alternate">
<font color="white">WELCOME TO OUR WEBSITE</marquee>
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF on premium brands </p>
<div id="button">
Shop Now
</div>
</div>
</center>
</div>
</div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="p.js"></script>
<div class="about">
<div class="row">
<div class="col-12 col-md-4">
<img src="p.jpg" class="img-thumbnail">
</div>
<div class="col-12 col-md-8">
<h3>Main Description</h3>
<p>Roll on the floor purring your whiskers off intrigued by the shower burrow under covers, and play time, rub face on everything, intently sniff hand, or pelt around the house and up and down stairs chasing phantoms. Attack feet. Damn that dog shake
treat bag under the bed drink water out of the faucet for lick butt love to play with owner's hair tie. Swat at dog give attitude.</p>
<div class="m">
<a class="btn" id="download" href="#">
<i class="fas fa-download">Download Resume</i>
</a>
</div>
<div class="middle">
<a class="btn" id="b" href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a class="btn" id="c" href="#">
<i class="fab fa-twitter"></i>
</a>
<a class="btn" id="d" href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
If I understood correctly, you want the background of each section to scroll along with the content? Here you go:
body {
overflow-x: hidden;
}
#particle {
position: fixed;
height: 100%;
width: 100%;
}
#overlay {
background-color: blue;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 550px;
}
#inner-banner-image {
padding-top: 70px;
width: 80%;
margin: auto;
}
#banner-content {
padding-top: 6%;
padding-bottom: 6%;
overflow: hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 520px;
margin-top: 5%;
}
#button {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
padding: 10px 16px;
font-size: 15px;
width: 155px;
border-radius: 6px;
}
.about {
background-color: #C57ED3;
padding-top: 100px;
color: #490D40;
height: 510px;
text-align: center;
}
p {
padding: 50px 50px;
text-align: center;
justify-content: center;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--jQuery library-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Latest compiled and minified JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="resume.css" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<title>
RESUME</title>
</head>
<body>
<div id="particle"></div>
<div id="overlay">
<div id="inner-banner-image">
<center>
<div id="banner-content">
<marquee bgcolor="#c9302c" behavior="alternate">
<font color="white">WELCOME TO OUR WEBSITE</marquee>
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF on premium brands </p>
<div id="button">
Shop Now
</div>
</div>
</center>
</div>
</div>
<div class="about">
<div class="row">
<div class="col-12 col-md-4">
<img src="p.jpg" class="img-thumbnail">
</div>
<div class="col-12 col-md-8">
<h3>Main Description</h3>
<p>Roll on the floor purring your whiskers off intrigued by the shower burrow under covers, and play time, rub face on everything, intently sniff hand, or pelt around the house and up and down stairs chasing phantoms. Attack feet. Damn that dog shake
treat bag under the bed drink water out of the faucet for lick butt love to play with owner's hair tie. Swat at dog give attitude.</p>
<div class="m">
<a class="btn" id="download" href="#">
<i class="fas fa-download">Download Resume</i>
</a>
</div>
<div class="middle">
<a class="btn" id="b" href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a class="btn" id="c" href="#">
<i class="fab fa-twitter"></i>
</a>
<a class="btn" id="d" href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
I removed the particle code since it's irrelevant to the question.
Related
I am trying to achieve a result as in the image below.
I have done the border that goes around the div for the card but I don't know how can I put an icon or img on the top border and look interrupted also.
Html code for the Bootstrap 4 card that I am using.
<div class="container pt-5 pb-5">
<div class="row">
<div class="col">
<div class="card card-thin-v2 w-100 bg-dark-green">
<div class="card-body card-thin-body-v2">
<h2 class="card-title"><img src="../assets/main/src/img/present-icon.png" alt="" srcset="">text<span class="orange-text">text</h2>
<p class="card-text">text</p>
buttonr <i class="icon-arrow-right"></i>
</div>
</div>
</div>
</div>
Css code
.card-thin-body-v2 {
border: 1px dotted rgba($color: $white, $alpha: .15);
width: 74rem;
padding: 1rem .3rem 1rem 1rem;
margin: 15px 0px 15px 15px;
background-image: url('../../img/cartu-book.svg');
>h2 {
color: $white;
font-family: "adobe-caslon-pro";
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 48px;
letter-spacing: 0em;
margin-left: 1rem;
>img {
height: 50.66937255859375px;
width: 53.306663513183594px;
border-radius: 0px;
margin: 20px 5px -10px 0px;
}
}
>p {
font-family: "adobe-
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container pt-5 pb-5">
<div class="row">
<div class="col">
<div class="card card-thin-v2 w-100 bg-dark-green">
<div class="card-body card-thin-body-v2">
<h2 class="card-title"><img src="../assets/main/src/img/present-icon.png" alt="" srcset="">text<span class="orange-text">text</h2>
<p class="card-text">text</p>
buttonr <i class="icon-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
Any help is much appreciated. Thank you!
Here you go...
Make two divs:
one without border (outer)
one with dashed border (inner)
To move the image up, set margin-top: -2%; to the image. Also, set padding-left: 2%; and padding-right: 2%; to interrupt the border and set the same background-color to the outer div and image (e.g. background-color: gray;), to make the image actually interrupt the dashed border.
#box {
position: absolute;
width: 90%;
height: 90%;
border-radius: 2vw;
background-color: gray;
margin-top: 2.5%;
}
#dashed {
width: 90%;
height: 90%;
border-width: 5px;
border-style: dashed;
border-radius: 2vw;
}
#image {
width: 10%;
margin-top: -2%;
padding-left: 2%;
padding-right: 2%;
background-color: gray;
}
<!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>Document</title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'>
<script src='javascript.js'></script>
</head>
<body>
<div class='container-fluid d-flex justify-content-center'>
<div class='d-flex align-items-center justify-content-center' id='box'>
<div class='d-flex align-items-start justify-content-center' id='dashed'>
<img id='image' src='https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg'>
</div>
</div>
</div>
</body>
</html>
I am using Bootstrap 4 Slider, and I would like to apply the following CSS that works separately:
.container-p{
width: 600px;
height: 500px;
position:relative;
background-color:grey;
}
.corner {
width: 0;
height: 0;
border-top: 300px solid #ffcc00;
border-bottom: 300px solid transparent;
border-left: 300px solid transparent;
position:absolute;
float: right;
right:0;
}
.corner span {
position:absolute;
top: -220px;
width: 250px;
left: -220px;
text-align: center;
font-size: 30px;
font-family: arial;
transform: rotate(45deg);
display:block;
font-weight: bold;
}
<div class="container-p">
<div class="corner"><span>Comercio local</span></div>
</div>
The thing is that I would like to apply to 'carousel-item' this triangle so my slider at full screen shows the category of each slide. To do this I include class corner next to carousel-item.
<div class="carousel-item corner"></div>
but all I get is a white background.
What am I doing wrong?
PD: The content of each slide is a picture with a few words.
Yes, You can add easily triangle shape on each slides or indivisual slide. Your css code is correct but need to add top:0 in .corner class.
Below snippet is working with use of your css code.
.corner {
width: 0;
height: 0;
border-top: 300px solid #ffcc00;
border-bottom: 300px solid transparent;
border-left: 300px solid transparent;
position:absolute;
float: right;
top: 0;
right:0;
}
.corner span {
position:absolute;
top: -220px;
width: 250px;
left: -220px;
text-align: center;
font-size: 30px;
font-family: arial;
transform: rotate(45deg);
display:block;
font-weight: bold;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="py-3">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1200x650/CCCCCC" class="d-block w-100" alt="...">
<div class="corner"><span>Comercio local</span></div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1200x650/0000FF" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1200x650/00FFFF" class="d-block w-100" alt="...">
<div class="corner"><span>Comercio local</span></div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1200x650/f1f1f1" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
I would like to display dummy images in a row next to each other as shown in this:
As I am not so good with CSS I was wondering how to do this in a proper manner? The pictures I have are all statically served, none of this has to be dynamic, or sliding, or anything, just displaying and scaling up responsively
Thank you for your input
Tried around with position absolute and relative, but was weirdly positioned all over the place. I'm using Bootstrap 4 in this project
You can try this:
body {
background: #20262E;
}
div {
margin: 10px;
padding: 10px;
background: #ffffff;
}
img {
width: 24%;
border-radius: 50%;
}
<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 1">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 2">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 3">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 4">
</div>
And if you want the green tick with image follow this:
body {
background: #20262E;
}
#image-gallery {
margin: 10px;
padding: 10px;
background: #ffffff;
}
.image-box{
display: inline-block;
position: relative;
width: 24%;
}
img {
width: 100%;
border-radius: 50%;
}
.green-tick {
position: absolute;
bottom: 10%;
right: 10%;
border-radius: 50%;
color: #ffffff;
background: #00ff00;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" />
<div id="image-gallery">
<div class="image-box">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 1">
<i class="fa fa-check green-tick"></i>
</div>
<div class="image-box">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 2">
<i class="fa fa-check green-tick"></i>
</div>
<div class="image-box">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 3">
<i class="fa fa-check green-tick"></i>
</div>
<div class="image-box">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 4">
<i class="fa fa-check green-tick"></i>
</div>
</div>
Hello I am trying to develop an alternating two column grid layout with bootstrap, where there would be one image on the lefthand size of the screen, then reverse down the web page until the end user reaches the footer.
I would thought to achieve this using the div row col order and going by using the floats, it has worked for the first row but when it came to developing the secondary row it did not help. I do not know if it is the floats that throwing it out of whack of I literally have to much going on in my code in general. Can someone review for me please? The blank divs are the image's as well.
/* CSS Document */
/* FONT FAMILY */
body{
font-family: 'Montserrat', sans-serif;
}
p {
font-family: 'Montserrat', Gotham, Helvetica Neue, Helvetica, Arial, "sans-serif";
font-weight: 200;
letter-spacing: 0.65px;
line-height: 25px;
text-align: center;
color: white;
}
.lead {
text-transform: uppercase;
}
h2 {
margin-bottom: 1em;
font-weight: 500;
letter-spacing: 1.275px;
font-size: 30px;
color: #cf6766;
}
h3 {
margin-bottom: 1em;
font-weight: 500;
letter-spacing: 0.1em;
font-size: 21px;
color: #cf6766;
}
/**************** NAVIGATION STYLING ****************/
.navbar,.navbar-default {
background-color: #30415d;
padding: 20px;
color: white;
margin: 0 auto;
}
.navbar.navbar-default li a {
color: white;
text-align: center;
margin: 0 auto;
}
.navbar.navbar-default li a:hover{
background-color: white;
color: #031424;
font-weight: bold;
}
.navbar.navbar-default li {
font-weight: 300;
letter-spacing: 0.10em;
text-transform: uppercase;
font-size: 12px;
}
.navbar-brand img {
width: 85%;
}
.navbar-brand a {
padding: 20px;
margin-top: -40px;
}
a.navbar-brand {
margin-top: -20px;
padding-right: 20px;
padding-left: 20px;
width: 85%;
}
.navbar-default {
border: none;
}
/*img.wrap {
float:right;
}*/
/**************HOME PAGE **********/
/* blockquote {
background-color: #8eaebd;
color: white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 36px;
margin-bottom: 50px;
font-style: italic;
font-weight: 400;
} */
.quote {
font-size: 16px;
text-align: right;
font-weight: 300;
letter-spacing: 2px;
}
.jumbotron {
background:linear-gradient(#cf6766, transparent 100%),
url(../img/DSC00154.jpg) no-repeat center;
background-size: cover;
height: 768px;
margin-top: 0px;
padding-top: 0px;
display: table;
width: 100%;
}
.jumbotron h1 {
color: white;
text-align: center;
}
#jumbotron-inner {
display: table-cell;
vertical-align: middle;
}
#jumbotron-inner p {
text-align: center;
}
.senior {
background-color: #30415d;
width: 50%;
height: 500px;
color:white;
padding: 50px;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
float: left;
}
.get-involved {
background-color: #8eaebd;
color:white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
float: right;
}
.get-inolved-img {
background-image: url(../img/grandmother-child.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 500px;
float: left;
}
.newMentor{
background: url(../img/grandparents.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
max-width:1000px 100%;
height:500px;
float: right;
}
.dontations {
background-color: #30415d;
color:white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
}
.btn-lg {
background-color: #cf6766;
}
.btn-lg {
color: white;
font-weight:200;
}
.btn-lg a:hover {
color: #8eaebd;
}
/**************about PAGE **********/
#williams {
width: 40%;
height: 50%;
margin-right: 25px;
margin-bottom: 5px;
}
#goals {
background-color: pink;
padding: 20px;
}
#youth {
background-image: url(../img/youth-2.jpg);
background-repeat:no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 1000px;
}
#mentor {
background-image: url(../img/youth-1.jpg);
width: 100%;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: black;
}
#mentor h1 {
color: rgba(0, 44, 44, 1);
}
#textarea {
display: block;
}
textarea {
display: block;
}
#community {
background-image: url(../img/youth-3.jpg);
width: 100%;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: black;
}
/***************************** FOOTER *****************************/
.copy {
color: #cf6766;
}
<!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">
<title>New Mentoring - 50- Home </title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="https://www.newmentoring.com"><img src="img/logo.png" class="img-responsive"></a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav pull-right">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li> About</li>
<li>Saving the Youth</li>
<li> Mentoring Tips</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" onClick="location.href='community.html'">Community <span class="caret"></span></a>
<!-- DropDown Menu Here -->
<ul class="dropdown-menu" role="menu">
<li> Stories of Wisdom</li>
<li> Guest Book</li>
<li>Donate</li>
</ul><!--community dropdown menu-->
</li><!-- end of comunnity dropdown li & ul -->
<li> Contact</li>
</ul> <!-- end of navbar left -->
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav> <!-- END OF FULL NAVIGATION BAR -->
<div class="jumbotron">
<div class="container" id="jumbotron-inner">
<h1>New Mentoring.com</h1>
<p class="lead">Where our youth gain wisdom and leadership.</p>
<p><a class="btn btn-primary btn-lg" href="#newSenior" role="button">Learn more</a></p>
</div><!-- end of container & jumbtron inner -->
</div><!--jumbotron-->
<!-- BLOCKQUOTE-->
<blockquote>
<p>"Let your age make the difference in your community."</p>
<span class="pull-right quote">- Delece Williams</span>
</blockquote>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 senior">
<h2>What is a New Mentoring?</h2>
<p>The Middle Aged Generation that's considered to be between 30 to 80 whose living healthier, while inspiring youth to engage in healthier life-style choices and those helping to bridge the gap between the traditional values of seniors and the technical appetites of today's youth with wisdom keys. </p>
</div>
<div class="col-sm-6 newMentor">
</div><!-- img div-->
</div><!--row-->
<div class="row">
<div class="col-sm-6 get-involved">
<h2>How to Get Involved?</h2>
<p>We would love for you to get involved and its simple. Just be willing to share your time and /or stories, experience, wisdom and expertise to a young person to help them make better and healthier lifestyle choices for the success of a better path throughout life. You can do that by joining our online conversations or hosting a community forum near you.</p>
</div>
<div class="col-sm-6 get-inolved-img">
</div><!-- background img-->
</div><!--row-->
<!--col-md-12->
</div>
<hr>
<div class="row">
<div class="text-justify col-sm-6">
<h3>Stories of Wisdom</h3>
Share words of wisdom on how you break barriers to get young people to listen. Connect with our online family and help us to inspire others here. </div>
<div class="text-justify col-sm-6">
<h3>Guest Book</h3>
Thank you for visiting I Am The New 50 Campaign. Stop by and sign our guest book and be a part of our community. Tell us how we’ve inspired you to help youth here. </div>
</div><!-- end of row div-->
<div class="col-md-6 dontations">
<h2>Dontations for Kidz Korna</h2>
<p>Women &s; Men T-Shirts are Available for Campaign Fundraising Initiatives</p>
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<p>Price:$20.00 <br>
<br>
<a class="btn btn-lg" href="https://kidzkorna.com/" role="button">Click here to order now</a> </p>
</div>
</div>
</div>
</div>
<footer>
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<p class="copy">Copyright © 2017 · All Rights Reserved · <a href="http://newmentoring.com/" >New Mentoring</a> · Chicago, IL.</p>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
I think you're describing a layout where it's like a checkerboard style. If so you can use offsets on every second div and clear the divs.
http://www.bootply.com/IMtdYhv7bs
HTML:
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
CSS:
.col-md-6 {background-color:red; height:100px; clear:both;}
I'm quite new in web development. I encoutered a problem which is present only in the Internet Explorer - the CSS style of Main Menu is applied after refresh(just F5, not CTRL-F5). I used MVC .NET to make backend of site. I have no idea how to solve this problem.
The web site with this problem is:
http://jakubkowalczykart.com/
Thank you in advance.
#Edit: Cope snippet which reproduces problem. While opening in Chrome or Firefox it looks good, but in IE it doesn't
Style:
.main_menu {
min-height: 40px;
z-index: 10;
height: 8vh;
position: fixed;
top: 0;
width: 100%;
opacity: 0.90;
background: black;
}
.menu_image {
height:100%;
}
.menu_list {
margin: 0 auto;
height: 70%;
list-style-type: none;
overflow: hidden;
}
.menu_container {
display: flex;
align-items: center;
height: 100%;
}
.menu_list {
margin-right: 3vw ;
height: 70%;
list-style-type: none;
overflow: hidden;
}
.menu_list li {
height: 100%;
float: left;
}
Html:
<html>
<head>
</head>
<body id="body">
<div class="main_menu" id="main_menu">
<div class="logo">
<div id="logo_img" ></div>
</div>
<div class="menu_container">
<ul class="menu_list">
<li>
<a href="#">
<img id="first_menu" class="menu_image" src="http://jakubkowalczykart.com/Content/Images/smallportfoliobutton.png" />
</a>
</li>
<li>
<a href="#">
<img id="second_menu" class="menu_image" src="http://jakubkowalczykart.com/Content/Images/smallshopbutton.png" />
</a>
</li>
<li>
<a href="#">
<img id="third_menu" class="menu_image" src="http://jakubkowalczykart.com/Content/Images/smallaboutbutton.png" />
</a>
</li>
<li>
<a href="#">
<img id="fourth_menu" class="menu_image" src="http://jakubkowalczykart.com/Content/Images/smallcontactbutton.png" />
</a>
</li>
</ul>
</div>
<div class="main_container" id="main_container">
</div>
<div class="footer">
</div>
</body>
</html>