I am using a banner image which will resize depending on the width of the screen. I want the other content which overlays the image and also appears under the image to reduce it's top margin as the image changes size. How should I do this?
header {
background-color: #02a5da;
text-align: center;
color: #f7f7f7;
position: absolute;
width: 100%;
top: 0;
font-size: 12px;
}
#media only screen and (max-width: 959px) {
.tpLogin {
visibility: hidden;
}
}
.navBar {
background-color: #02a5da;
text-align: center;
position: absolute;
top: 0;
height: 45px;
}
.navLink {
padding-top: 13px;
padding-bottom: 9px;
}
/*Home*/
.tpLogin {
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
border: 1px solid black;
width: 80%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
font-size: 12px;
background-color: rgba(255, 255, 255, 0.8);
}
#media only screen and (min-width: 960px) {
.tpLogin {
margin-top: 150px;
}
.homeInfo {
margin-top: 200px;
}
}
#username,
#password {
max-width: 80%;
margin-bottom: 20px;
border: 2px solid black;
padding: 5px 10px;
}
#btnSubmit {
width: 40%;
padding: 5px 20px;
background-color: #404040;
color: #f7f7f7;
}
.login {
margin-bottom: 20px;
}
.banner {
width: 100%;
height: auto;
position: absolute;
z-index: -1;
margin-top: -105px;
}
.homeIcons {
font-size: 40px;
}
.homeInfo {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 80%;
}
.homeInfoHeading {
font-size: 26px;
}
.homeInfoText {
padding-bottom: 50px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
#media only screen and (max-width: 767px) {
.textSplit {
border-bottom: 4px solid #02a5da;
}
.iconPadding {
margin-top: 40px;
}
}
.last {
margin-bottom: 50px;
}
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/purecss#1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/pure-release-1.0.0/grids-responsive.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navBar pure-u-5-5">
<div class="pure-g">
<div class="pure-u-6-24"></div>
<a class="active pure-u-3-24 navLink" href='index.html'>
<div class="navText">Home</div>
</a>
<a class="pure-u-3-24 navLink" href='about.html'>
<div class="navText">About Me</div>
</a>
<a class="pure-u-3-24 navLink" href='service.html'>
<div class="navText">Service</div>
</a>
<a class="pure-u-3-24 navLink" href='contact.html'>
<div class="navText">Contact</div>
</a>
<div class="pure-u-6-24"></div>
</div>
</div>
<img class="banner" src="https://s14.postimg.cc/pew1gpjgh/home2.jpg" />
<div class="tpLogin">
<h2>Already a Member?</h2>
<form name="login" class="login" method="POST" action="https://home.trainingpeaks.com/login">
<div class="validation">
</div>
<input class="pure-u-5-5" id="username" type="text" name="username" value="" placeholder="Username" tabindex="1" required>
<input class="pure-u-5-5" id="password" type="password" name="password" placeholder="Password" tabindex="2" required>
<input class="pure-u-5-5 pure-button" id="btnSubmit" name="submit" type="submit" class="buttonBlue1" value="Login" tabindex="3">
</form>
<h3>How do I become a member?</h3>
</div>
<div class="homeInfo pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<i class="fas fa-bullhorn homeIcons"></i>
<h2 class="homeInfoHeading">Service</h2>
<p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<i class="fas fa-cogs homeIcons iconPadding"></i>
<h2 class="homeInfoHeading">Software</h2>
<p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
</div>
<div class="pure-u-1 pure-u-md-1-3 last">
<i class="fas fa-check-circle homeIcons iconPadding"></i>
<h2 class="homeInfoHeading">Goal</h2>
<p class="homeInfoText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
</div>
</div>
</body>
</html>
I have created a JS Fiddle so you can see what I mean. https://jsfiddle.net/xp7b8k8p/7/
You need to make it so you do not absolutely position your image. Absolute positioning shouldn't really be used for layout purposes - it's for when you want to remove something from the natural flow of the document (eg the login box).
With that in mind, I have changed your styles:
#media only screen and (max-width: 959px) {
.tpLogin {
visibility: hidden;
}
}
.navBar {
background-color: #02a5da;
text-align: center;
height: 45px;
}
.navLink {
padding-top: 13px;
padding-bottom: 9px;
}
/*Home*/
.tpLogin {
text-align: center;
border: 1px solid black;
width: 80%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
font-size: 12px;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#username,
#password {
max-width: 80%;
margin-bottom: 20px;
border: 2px solid black;
padding: 5px 10px;
}
#btnSubmit {
width: 40%;
padding: 5px 20px;
background-color: #404040;
color: #f7f7f7;
}
.login {
margin-bottom: 20px;
}
.banner {
width: 100%;
height: auto;
}
.banner-wrapper {
position:relative;
}
.homeIcons {
font-size: 40px;
}
.homeInfo {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 80%;
}
.homeInfoHeading {
font-size: 26px;
}
.homeInfoText {
padding-bottom: 50px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.last {
margin-bottom: 50px;
}
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/purecss#1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/pure-release-1.0.0/grids-responsive.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navBar pure-u-5-5">
<div class="pure-g">
<div class="pure-u-6-24"></div>
<a class="active pure-u-3-24 navLink" href='index.html'>
<div class="navText">Home</div>
</a>
<a class="pure-u-3-24 navLink" href='about.html'>
<div class="navText">About Me</div>
</a>
<a class="pure-u-3-24 navLink" href='service.html'>
<div class="navText">Service</div>
</a>
<a class="pure-u-3-24 navLink" href='contact.html'>
<div class="navText">Contact</div>
</a>
<div class="pure-u-6-24"></div>
</div>
</div>
<div class="banner-wrapper">
<img class="banner" src="https://s14.postimg.cc/pew1gpjgh/home2.jpg" />
<div class="tpLogin">
<h2>Already a Member?</h2>
<form name="login" class="login" method="POST" action="https://home.trainingpeaks.com/login">
<div class="validation">
</div>
<input class="pure-u-5-5" id="username" type="text" name="username" value="" placeholder="Username" tabindex="1" required>
<input class="pure-u-5-5" id="password" type="password" name="password" placeholder="Password" tabindex="2" required>
<input class="pure-u-5-5 pure-button" id="btnSubmit" name="submit" type="submit" class="buttonBlue1" value="Login" tabindex="3">
</form>
<h3>How do I become a member?</h3>
</div>
</div>
<div class="homeInfo pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<i class="fas fa-bullhorn homeIcons"></i>
<h2 class="homeInfoHeading">Service</h2>
<p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<i class="fas fa-cogs homeIcons iconPadding"></i>
<h2 class="homeInfoHeading">Software</h2>
<p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
</div>
<div class="pure-u-1 pure-u-md-1-3 last">
<i class="fas fa-check-circle homeIcons iconPadding"></i>
<h2 class="homeInfoHeading">Goal</h2>
<p class="homeInfoText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
</div>
</div>
</body>
</html>
Related
I am a back-end developer and so im not very familiar with front-end developing. recently due to absence of front end designer, i am designing a website in which i'm facing a problem.
this is a non-responsive website who looks fine in desktop, but in mobile the layout shows more than 100%, i'm attaching screenshots
#charset "utf-8";
/* CSS Document */
.top-all {
margin: 0 auto;
width: 900px;
position: relative;
margin-top: 5px;
}
.top-header {
height: 120px;
background-color: #1A1318;
margin-bottom: -2px;
margin-left: 1px;
margin-right: 1px;
position: relative;
}
.main-body {
margin: 0 auto;
width: 900px;
background-color: #ffffe6;
position: relative;
height: auto;
}
.header {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.logo-container {
height: 100px;
width: 180px;
background-color: #E4E4E4;
float: right;
margin-right: 40px;
margin-top: 5px;
}
.container {
width: 100%;
background-color: #E8E8E8;
}
.main-left {
width: 60%;
display: inline-block;
background-color: #ffffe6;
}
.main-right {
display: inline-block;
float: right;
width: 36%;
}
.news {
border: 1px solid #d5ff80;
margin-bottom: 10px;
border-radius: 8px;
background-color: #f0f5f5;
}
ul {
list-style-type: square;
}
ul li {
color:#00001a;
margin-top: 9px;
}
.announcement {
border: 1px solid #d5ff80;
margin-bottom: 10px;
border-radius: 8px;
background-color: #f0f5f5;
}
.quick-inquiry {
height: 400px;
border: 1px solid #d5ff80;
border-radius: 8px;
background-color: white;
}
h1 {
color: #ffffff;
font-size: 60px;
font-weight: bold;
font-family: "Lucida Console", Courier, monospace;
padding: 30px;
margin-left: 30px;
}
h3 {
font-size: 24px;
text-align: CENTER;
color: white;
}
h4 {
font-size: 18px;
font-family: arial;
margin-right: 6px;
margin-left: 6px;
}
h5 {
color: #ffffff;
font-size: 30px;
}
h6 {
color: white;
font-size: 24px;
margin-left: 8px;
}
.h6 {
padding-top: 1px;
background-image: linear-gradient( #ffff66,#999900, #ffff66);
height: 48px;
width: 400px;
}
h7 {
font-size: 26px;
color: white;
margin-left: 8px;
}
.h7 {
padding-top: 3px;
background-image: linear-gradient(#706B6B,#000000,#706B6B);
height: 50px;
}
h8{
font-size: 20px;
color: white;
margin-left: 8px;
}
.h8{
padding: 4px;
background-color: #006633;
background-image: linear-gradient(#4dffa6,#006633,#4dffa6);
height: 40px;
width: 120px;
}
p{
font-size: 16px;
margin-left: 5px;
}
.p {
background-color: #ffffff;
border: 1px solid #b3b3ff;
margin-bottom: 10px;
border-radius: 8px;
}
.h3 {
background-color: black;
height: 68px;
margin-right: 7px;
margin-left: 7px;
padding-top: 1px;
background-image: linear-gradient(#706B6B,#000000,#706B6B);
}
marquee {
border-top : 4px solid #ffff00;
border-bottom : 4px solid #ffff00;
height: 70px;
background-color: #0EB177;
}
.footer {
height: 200px;
background-color: #150F0F;
margin-bottom: 20px;
}
body {
font-family: Arial;
color: #535151;
background-color: #e6ffff;
padding: 0px;
max-width: 100%;
min-width: 99%;
position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Patliputra ITI</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.navbar.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-all">
<div class="top-header">
<div class="logo-container">
<img src="images/main_logo.png" style="height: 100px; width: 180px;" alt="logo">
</div>
<h1>Patliputra ITI</h1>
</div>
<div class="navbar">
<div class="topnav" id="myTopnav">
Home
About Us
Contact Us
News
Gallery
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</div>
</div>
<div class="main-body">
<div class="header">
<h4> "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain."</h4>
<div class="container">
<h2>Welcome to Patliputra ITI</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to
="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://images.static-collegedunia.com/public/college_data/images/appImage/19709_BBSBCE_APP.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://wallpaperaccess.com/full/1209519.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://www.pixelstalk.net/wp-content/uploads/2016/10/College-Wallpapers-HD-1920x1080.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://adrian.edu/uploads/galleries/TerraceWP.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<marquee width="100%" direction="left" height="100px">
<h5>The standard Lorem Ipsum passage, used since the 1500s
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,</h5>
</marquee>
<div class="main-left">
<div class="h6"><h6>Why Patliputra ITI?</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6>Our Mission And Vision</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6> How to get Admission?</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6>Eligibility</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h7"><h7>Admission process</h7></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="h8"><h8>Process 1</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
<div class="h8"><h8>Process 2</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
<div class="h8"><h8>Process 3</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
</div>
<div class="main-right">
<div class="news">
<div class="h3"><h3>Latest News</h3></div>
<h4>Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</h4>
<ul class="ul_news">
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
<li>News 4</li>
<li>News 5</li>
<li>News 6</li>
<li>News 7</li>
<li>News 8</li>
<li>News 9</li>
<li>News 10</li>
</ul>
</div>
<div class="announcement">
<div class="h3"><h3>Latest Announcement</h3></div>
<h4>Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always fre</h4></div>
<div class="quick-inquiry">
<div class="h3"><h3>Quick-Inquiry</h3></div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
desktop view of the site
mobile view of the site
There's a couple of things you need to change:
Remove the inline-styles on the images in the slider
add a media query for mobile view
Remove the display: inline-block; float: right; on the news and the main-right container.
Remove the marquee tag, it's deprecated.
As already mentioned by someone else, change all the fixed widths to max-widths.
Since you are also including bootstrap, I would make use of their grid system and classes for your layout and basic styling, otherwise remove it.
#charset "utf-8";
/* CSS Document */
.top-all {
margin: 0 auto;
max-width: 900px;
position: relative;
margin-top: 5px;
}
.top-header {
height: 120px;
background-color: #1A1318;
margin-bottom: -2px;
margin-left: 1px;
margin-right: 1px;
position: relative;
}
.main-body {
margin: 0 auto;
max-width: 900px;
background-color: #ffffe6;
position: relative;
height: auto;
}
.header {
height: auto;
margin-bottom: 20px;
}
.logo-container {
height: 100px;
width: 180px;
background-color: #E4E4E4;
float: right;
margin-right: 40px;
margin-top: 5px;
}
.container {
background-color: #E8E8E8;
}
.main-left {
width: 60%;
display: inline-block;
background-color: #ffffe6;
}
.main-right {
display: inline-block;
float: right;
width: 36%;
}
.news {
border: 1px solid #d5ff80;
margin-bottom: 10px;
border-radius: 8px;
background-color: #f0f5f5;
}
ul {
list-style-type: square;
}
ul li {
color:#00001a;
margin-top: 9px;
}
.announcement {
border: 1px solid #d5ff80;
margin-bottom: 10px;
border-radius: 8px;
background-color: #f0f5f5;
}
.quick-inquiry {
height: 400px;
border: 1px solid #d5ff80;
border-radius: 8px;
background-color: white;
}
h1 {
color: #ffffff;
font-size: 60px;
font-weight: bold;
font-family: "Lucida Console", Courier, monospace;
padding: 30px;
margin-left: 30px;
}
h3 {
font-size: 24px;
text-align: CENTER;
color: white;
}
h4 {
font-size: 18px;
font-family: arial;
margin-right: 6px;
margin-left: 6px;
}
h5 {
color: #ffffff;
font-size: 30px;
}
h6 {
color: white;
font-size: 24px;
margin-left: 8px;
}
.h6 {
padding-top: 1px;
background-image: linear-gradient( #ffff66,#999900, #ffff66);
height: 48px;
width: 400px;
}
h7 {
font-size: 26px;
color: white;
margin-left: 8px;
}
.h7 {
padding-top: 3px;
background-image: linear-gradient(#706B6B,#000000,#706B6B);
height: 50px;
}
h8{
font-size: 20px;
color: white;
margin-left: 8px;
}
.h8{
padding: 4px;
background-color: #006633;
background-image: linear-gradient(#4dffa6,#006633,#4dffa6);
height: 40px;
width: 120px;
}
p{
font-size: 16px;
margin-left: 5px;
}
.p {
background-color: #ffffff;
border: 1px solid #b3b3ff;
margin-bottom: 10px;
border-radius: 8px;
}
.h3 {
background-color: black;
height: 68px;
margin-right: 7px;
margin-left: 7px;
padding-top: 1px;
background-image: linear-gradient(#706B6B,#000000,#706B6B);
}
marquee {
border-top : 4px solid #ffff00;
border-bottom : 4px solid #ffff00;
height: 70px;
background-color: #0EB177;
}
.footer {
height: 200px;
background-color: #150F0F;
margin-bottom: 20px;
}
body {
font-family: Arial;
color: #535151;
background-color: #e6ffff;
padding: 0px;
position: relative;
}
#media screen and (max-width: 650px) {
.main-left {
background-color: #ffffe6;
display: block;
width: auto;
}
.main-right {
float: none;
width: auto;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Patliputra ITI</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.navbar.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-all">
<div class="top-header">
<div class="logo-container">
<img src="images/main_logo.png" style="height: 100px; width: 180px;" alt="logo">
</div>
<h1>Patliputra ITI</h1>
</div>
<div class="navbar">
<div class="topnav" id="myTopnav">
Home
About Us
Contact Us
News
Gallery
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</div>
</div>
<div class="main-body">
<div class="header">
<h4> "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain."</h4>
<div class="container">
<h2>Welcome to Patliputra ITI</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to
="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://images.static-collegedunia.com/public/college_data/images/appImage/19709_BBSBCE_APP.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://wallpaperaccess.com/full/1209519.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://www.pixelstalk.net/wp-content/uploads/2016/10/College-Wallpapers-HD-1920x1080.jpg" alt="New York">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://adrian.edu/uploads/galleries/TerraceWP.jpg" alt="New York">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<marquee width="100%" direction="left" height="100px">
<h5>The standard Lorem Ipsum passage, used since the 1500s
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,</h5>
</marquee>
<div class="main-left">
<div class="h6"><h6>Why Patliputra ITI?</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6>Our Mission And Vision</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6> How to get Admission?</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6>Eligibility</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h7"><h7>Admission process</h7></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="h8"><h8>Process 1</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
<div class="h8"><h8>Process 2</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
<div class="h8"><h8>Process 3</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
</div>
<div class="main-right">
<div class="news">
<div class="h3"><h3>Latest News</h3></div>
<h4>Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</h4>
<ul class="ul_news">
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
<li>News 4</li>
<li>News 5</li>
<li>News 6</li>
<li>News 7</li>
<li>News 8</li>
<li>News 9</li>
<li>News 10</li>
</ul>
</div>
<div class="announcement">
<div class="h3"><h3>Latest Announcement</h3></div>
<h4>Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always fre</h4></div>
<div class="quick-inquiry">
<div class="h3"><h3>Quick-Inquiry</h3></div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
I'm trying to create a div with content inside containing an image to the left and text to the right. I'm able to set the margins correctly and the left alignment correctly for the text, however, the image is not vertically aligned and the margins fall off on the right when viewed in the responsive stacked view.
body {
position: relative;
height: 100vh;
margin: 40px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
}
.wrapper div {
min-height: 150px;
overflow: hidden;
}
#one {
background-color: white;
float: left;
margin: 10px 20px 10px 10px;
width: 200px;
white-space: nowrap;
text-align: center;
line-height: 100px;
}
#one img {
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#two {
background-color: white;
overflow: hidden;
margin: 10px;
min-height: 100px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 0;
width: auto;
border: 0;
}
}
<body>
<div class="wrapper">
<div id="one">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</body>
I added
height:100%;
display:flex;
align-items:center;
justify-content:center;
to #one
body {
position: relative;
height: 100vh;
margin: 40px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
}
.wrapper div {
min-height: 150px;
overflow: hidden;
}
#one {
background-color: white;
float: left;
margin: 10px 20px 10px 10px;
width: 200px;
white-space: nowrap;
text-align: center;
line-height: 100px;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
#one img {
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#two {
background-color: white;
overflow: hidden;
margin: 10px;
min-height: 100px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 0;
width: auto;
border: 0;
}
}
<body>
<div class="wrapper">
<div id="one">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</body>
What I am trying to achieve is all images the same level, all headers and paragraphs level no matter what length they are and a button after which as all in the same level... I am also trying to make a 9x9 grid, but as soon as I add more columns they start going next to each other not by the underneath...
.flex-container {
display: flex;
flex-wrap: nowrap;
}
.flex-container .box {
width: 50%;
margin: 10px;
text-align: center;
}
.container {
padding-top: 30px;
height: 300px;
text-align: center;
min-width: 280px;
height: 100%;
margin-left: 100px;
margin-right: 100px;
display: flex;
justify-content: space-between;
}
.box h2 {
text-align: center;
font-family: "Slabo 27px", serif;
font-size: 24px;
font-weight: 700;
text-align: center;
padding-left: 25px;
padding-right: 25px;
}
.box p {
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: 19px;
text-align: center;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 10px;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.column {
text-align: center;
float: left;
width: 50%;
}
}
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.3s;
/* Safari */
transition-duration: 0.3s;
cursor: pointer;
}
.button {
background-color: white;
color: black;
border: 2px solid #008CBA;
text-align: center;
padding-bottom: 20px;
width: 50%;
margin: auto;
align-self: flex-end;
}
.button:hover {
background-color: #008CBA;
color: white;
}
<div class="container">
<div class="flex-container">
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2>Example Header</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. </p>
<div>
Learn more
</div>
</div>
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2>Longer example of a header blah </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper.</p>
<div>
Learn more
</div>
</div>
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2>another short example </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper. Proin est ipsum, rutrum ac est ut, mollis mollis elit. Curabitur eget dolor gravida, rhoncus arcu eget,
rhoncus ante. Nulla rhoncus in mauris et consequat. </p>
<div>
Learn more
</div>
</div>
</div>
This is currently the best I have, I've got all images and header and text to be the same level but as soon as I have the buttons in level the headers or paragraphs wont be level... Any help on this would be amazing!
If you are ok to set some heights and some overflow: hidden; you could do this:
.flex-container {
display: flex;
flex-wrap: nowrap;
}
.flex-container .box {
width: 50%;
margin: 10px;
text-align: center;
}
.container {
padding-top: 30px;
height: 300px;
text-align: center;
min-width: 280px;
height: 100%;
margin-left: 100px;
margin-right: 100px;
display: flex;
justify-content: space-between;
}
.box h2 {
text-align: center;
font-family: "Slabo 27px", serif;
font-size: 24px;
font-weight: 700;
text-align: center;
padding-left: 25px;
padding-right: 25px;
/* ! */
overflow: hidden;
height: 3.6em;
}
.box p {
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: 19px;
text-align: center;
padding-left: 25px;
padding-right: 25px;
margin-bottom: 40px;
/* ! */
overflow: hidden;
height: 12.6em;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.column {
text-align: center;
float: left;
width: 50%;
}
}
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.3s;
/* Safari */
transition-duration: 0.3s;
cursor: pointer;
}
.button {
background-color: white;
color: black;
border: 2px solid #008CBA;
text-align: center;
padding-bottom: 20px;
width: 50%;
margin: auto;
align-self: flex-end;
}
.button:hover {
background-color: #008CBA;
color: white;
}
/* ! */
.fade {
position: relative;
height: 3.6em;
}
/* ! */
.fade:after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 70%;
height: 1.2em;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
<div class="container">
<div class="flex-container">
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<div>
<h2 class="fade">Example Header</h2>
<p class="fade"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. </p>
</div>
<div>
Learn more
</div>
</div>
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2 class="fade">Longer example of a header blah blah blah </h2>
<p class="fade"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper.</p>
<div>
Learn more
</div>
</div>
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2 class="fade">another short example </h2>
<p class="fade"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper. Proin est ipsum, rutrum ac est ut, mollis mollis elit. Curabitur eget dolor gravida, rhoncus arcu eget,
rhoncus ante. Nulla rhoncus in mauris et consequat. </p>
<div>
Learn more
</div>
</div>
</div>
Flow fade thing is from here where you can also find some other approaches to your problem. Hope this helps.
I have a section on a site where the parent ID styling rules are conflicting with how I need a particular area of the section to look. This is how it should look -
And this is the coded version so far -
The rules set for the text above are conflicting with how the h2 / p text should show for the 'CASE STUDY' which I need to push to the left and the image to remain on the right, aligned with the text. I need to overcome the parent rules but I've tried a few different things and nothing. Also, I'm not sure why the background color is not stretching across the page. Here's the code so far -
/* CASE STUDY */
section#casestudy {
height: 750px;
max-width: 100%;
}
section#casestudy div.row {
height: 250px;
max-width: 100%;
text-align: center;
position: relative;
}
section#casestudy .four {
position: relative;
max-width: 100%;
display: inline-block;
margin: 0 auto;
}
#casestudy h4 {
color: #000000;
font-size: 20px;
padding-top: 50px;
line-height: 5px;
}
section#casestudy p {
font-size: 10px;
color: #bdc3c7;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
#council div.row {
display: block;
background-color: #d3d3d3;
width: 960px;
}
#council img {
float: right;
}
#council h2 {
font-size: 20px;
text-align: left;
color: #000000;
}
#council div.row p {
font-size: 10px;
text-align: left;
width: 50%;
}
.four h3 {
position: absolute;
color: #FFF;
font-size: 20px;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
section#casestudy img {
display: block;
margin-left: 20px;
padding: 10px;
}
<section id="casestudy">
<div class="container">
<div class="twelve columns">
<div class="row" id="meettheteam">
<h3>WHAT IS 2D ANIMATION?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar.</p>
</div>
</div>
<div id="council">
<div class="twelve columns">
<div class="row">
<h4>LATEST CASE STUDY</h4>
<h2>Wakefield Council</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci.
<br>
Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi.
</p>
<img src="images/VIDEO.jpg" alt="Video" style="width: 300px; , height: 100px;" >
</div>
</div>
</div>
<div class="row">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
</div>
</div>
</div>
</div>
</section>
Any assistance/guidance appreciated.
I'm having a very strange problem. Here's the HTML that I'm using:
<!DOCTYPE HTML>
<html>
<head>
<style type='text/css'>
<title>Site name</title>
*{
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
html{
background: #BED4EB;
}
body{
background: #FFFFFF;
width: 1000px;
margin: 0px auto;
padding-bottom: 25px;
}
header{
background-image: linear-gradient(to bottom, #004F9E 0%, #00284F 100%);
padding: 10px 0px;
}
header h1{
color: #FFFFFF;
display: inline;
font-size: 2.5em;
}
header nav{
display: inline-block;
float: right;
}
header nav ul li{
margin: 0px 20px;
display: inline-block;
}
header nav ul li a{
color: #FFFFFF;
text-decoration: none;
font-size: 1.4em;
}
header nav ul li a:hover{
color: #FFA54D;
}
section#quick_login{
width: 20%;
float: right;
background: #91A9FA;
border: 1px solid #5D82FC;
margin: 0px 0px 5px 5px;
padding: 5px;
text-align: center;
}
section#quick_login input{
padding: 3px;
border-radius: 3px;
border: 1px solid #BDBDBD;
}
section#notices{
display: inline-block;
width: 75%;
}
section#notices .alert, section#notices .notice{
padding: 5px;
display: inline-block;
}
section#notices .alert{
background: #FA9191;
border: 1px solid #FC5D5D;
}
section#notices .notice{
background: #91A9FA;
border: 1px solid #5D82FC;
}
section#main h2{
margin-top: 25px;
}
section#main p{
margin-top: 5px;
}
</style>
</head>
<body>
<header>
<h1>Site name</h1>
<nav>
<ul>
<li>
<a href='#'>Link 1</a>
</li>
<li>
<a href='#'>Link 2</a>
</li>
<li>
<a href='#'>Link 3</a>
</li>
<li>
<a href='#'>Link 4</a>
</li>
<li>
<a href='#'>Link 5</a>
</li>
</ul>
</nav>
</header>
<section id='quick_login'>
<h2>Quick login</h2>
<form action='login.php'>
Username: <input type='text' placeholder='Your username' name='username' />
<br />Password: <input type='password' placeholder='Your password' name='password' />
<br /><input type='submit' value='Go' />
</form>
</section>
<section id='notices'>
<p class='alert'>
Your email address hasn't been verified; check your email for a link to verify it.
</p>
<p class='notice'>
We received a record 553 visitors yesterday!
</p>
</section>
<section id='main'>
<h2>Subtitle 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl risus, viverra eu sollicitudin volutpat, ultricies vel sapien. Cras in felis eu justo mattis convallis vel et orci. Maecenas consequat fermentum magna, sit amet dapibus nulla pulvinar venenatis. Nullam nulla mi, consectetur id diam at, pulvinar tempus diam. Morbi suscipit odio nec arcu ultricies dignissim. Curabitur consectetur libero lectus, ornare sodales tellus congue nec. Nam id tellus id nulla eleifend condimentum.</p>
<h2>Subtitle 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus nisi, mattis vitae volutpat tempus, suscipit nec lorem. Quisque posuere lectus odio, porttitor sagittis ligula ullamcorper quis. Vivamus ornare ut sapien in rutrum. Nullam et porttitor metus. Curabitur ornare orci sit amet aliquam rutrum. Phasellus scelerisque dignissim tellus in dictum. Pellentesque eu nibh purus. Nulla scelerisque sodales urna in feugiat. Maecenas et eleifend neque. Sed dolor turpis, congue et nisl quis, euismod bibendum magna. Sed eget laoreet urna.</p>
</section>
</body>
</html>
and it displays perfectly (apart from the not vertically aligned menu which I'm working on):
(source: gyazo.com)
but then when I replace the <style> tag with <link rel='stylesheet' type='text/css' href='style.css' /> and copy/paste everything within the <style> tags into style.css it displays like this:
(source: gyazo.com)
What's causing this? How do I fix it? It appears to be browser-specific, since Firefox is displaying it perfectly. Only in Chrome does it appear incorrectly.
The title tag is in the style section and is causing the header to display improperly http://jsfiddle.net/Paul_Geronca/2ZCVw/4/
Fix it to this:
<!DOCTYPE HTML>
<html>
<head>
<style type='text/css'>
<title>Site name</title>
*{
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
html{
background: #BED4EB;
}
body{
background: #FFFFFF;
width: 1000px;
margin: 0px auto;
padding-bottom: 25px;
}
header{
background-image: linear-gradient(to bottom, #004F9E 0%, #00284F 100%);
padding: 10px 0px;
}
header h1{
color: #FFFFFF;
display: inline;
font-size: 2.5em;
}
header nav{
display: inline-block;
float: right;
}
header nav ul li{
margin: 0px 20px;
display: inline-block;
}
header nav ul li a{
color: #FFFFFF;
text-decoration: none;
font-size: 1.4em;
}
header nav ul li a:hover{
color: #FFA54D;
}
section#quick_login{
width: 20%;
float: right;
background: #91A9FA;
border: 1px solid #5D82FC;
margin: 0px 0px 5px 5px;
padding: 5px;
text-align: center;
}
section#quick_login input{
padding: 3px;
border-radius: 3px;
border: 1px solid #BDBDBD;
}
section#notices{
display: inline-block;
width: 75%;
}
section#notices .alert, section#notices .notice{
padding: 5px;
display: inline-block;
}
section#notices .alert{
background: #FA9191;
border: 1px solid #FC5D5D;
}
section#notices .notice{
background: #91A9FA;
border: 1px solid #5D82FC;
}
section#main h2{
margin-top: 25px;
}
section#main p{
margin-top: 5px;
}
</style>
</head>
<body>
<header>
<h1>Site name</h1>
<nav>
<ul>
<li>
<a href='#'>Link 1</a>
</li>
<li>
<a href='#'>Link 2</a>
</li>
<li>
<a href='#'>Link 3</a>
</li>
<li>
<a href='#'>Link 4</a>
</li>
<li>
<a href='#'>Link 5</a>
</li>
</ul>
</nav>
</header>
<section id='quick_login'>
<h2>Quick login</h2>
<form action='login.php'>
Username: <input type='text' placeholder='Your username' name='username' />
<br />Password: <input type='password' placeholder='Your password' name='password' />
<br /><input type='submit' value='Go' />
</form>
</section>
<section id='notices'>
<p class='alert'>
Your email address hasn't been verified; check your email for a link to verify it.
</p>
<p class='notice'>
We received a record 553 visitors yesterday!
</p>
</section>
<section id='main'>
<h2>Subtitle 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl risus, viverra eu sollicitudin volutpat, ultricies vel sapien. Cras in felis eu justo mattis convallis vel et orci. Maecenas consequat fermentum magna, sit amet dapibus nulla pulvinar venenatis. Nullam nulla mi, consectetur id diam at, pulvinar tempus diam. Morbi suscipit odio nec arcu ultricies dignissim. Curabitur consectetur libero lectus, ornare sodales tellus congue nec. Nam id tellus id nulla eleifend condimentum.</p>
<h2>Subtitle 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus nisi, mattis vitae volutpat tempus, suscipit nec lorem. Quisque posuere lectus odio, porttitor sagittis ligula ullamcorper quis. Vivamus ornare ut sapien in rutrum. Nullam et porttitor metus. Curabitur ornare orci sit amet aliquam rutrum. Phasellus scelerisque dignissim tellus in dictum. Pellentesque eu nibh purus. Nulla scelerisque sodales urna in feugiat. Maecenas et eleifend neque. Sed dolor turpis, congue et nisl quis, euismod bibendum magna. Sed eget laoreet urna.</p>
</section>
</body>
</html>
It looks like this is caused by the header h1 { display: inline; } rule not being properly followed.
If you disable this rule when the css included within the page, then this causes the broken rendering you are experiencing with the stylesheet included via a link tag.
Additionally, the title tag should be directly under the head and not in the style section.
Maybe you should try the W3C validator. It will check your HTML or CSS (upload the style.css) for errors. If it doesn't work, I'm asking you to share your HTML-code or give a web address.