I know it's much to read but I hope anybody takes the time to help me. Thanks!!!
This is a pice of my code from my responsive website.
<!DOCTYPE html>
<html>
<head>
<style>
#media (max-width:1227px) and (min-width:769px) {
html {
background-color:rgba(228, 40, 40, 0.66);
}
#navigation_ul_left {
padding-left:7px;
padding-right:4px;
list-style-type:none;
}
main {
margin-left:210px;
}
nav {
width:200px;
min-height:600px;
position:absolute;
border-style:solid;
border-width:1px;
border-color:black;
margin-right:10px;
background-color:white;
}
#book_cover {
width:100%;
}
#book_informations {
display:table;
width:100%;
}
#book_left {
margin-right:20px;
float:left;
width:300px;
display:table-header-group;
}
#book_middle {
margin-right:20px;
width:500px;
float:left;
display:table-footer-group;
}
#book_right {
float:left;
width:300px;
border-style:solid;
border-width:1px;
padding:5px;
display:table-row-group;
}
}
</style>
</head>
<body>
<nav class="navigation">
<ul id="navigation_ul_left">
<li class="li_navigation_left">Test1</li><br>
<li class="li_navigation_left">Test2</li><br>
<li class="li_navigation_left">Test3</li><br>
<li class="li_navigation_left">Test4</li><br>
<li class="li_navigation_left">Test5</li><br>
<li class="li_navigation_left">Test6</li><br>
</ul>
</nav>
<main>
<div id="book_informations">
<div id="book_left">
<img id="book_cover" src="http://lorempixel.com/g/400/200/">
<p>Test123ABC</p>
<p>Test456DEF</p>
<p>Test789GHI</p>
</div>
<div id="book_middle">
<p id="book_title">Lorem ipsum dolor sit amet.</p>
<p id="book_discription">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="book_right">
<div id="payment_div">
<p id="chose_payment">Das ist mein Test-Text.</p></div>
</div>
</div>
</main>
</body>
</html>
The CSS is for the layout between 769px and 1227px. Within this dimensions I want the layout look like this:
The left "column" in the main (excluding the navigation on the left side) should be fixed size, ca. 250 px. The right "column" (the big Lorem-ipsum-placeholder-text) should be variable (perhaps width in %) and fill the space between left "column" and right browser border.
The problem is, I'll have to do it without changing the HTML code. I only can change the CSS code.
I tried this with display:table;, display:table-row-group;… But that doesn't work.
Does anybody know what I'm doing wrong?
What you need to use is #Media ruling in your css in order to maintain both resolutions and to make sure that your html will adapt depending on what resolution the user is using.
please check this code
<!DOCTYPE html>
<html>
<head>
<style>
html {
background-color: rgba(228, 40, 40, 0.66);
}
#navigation_ul_left {
padding-left: 7px;
padding-right: 4px;
list-style-type: none;
}
nav {
width: 200px;
min-height: 600px;
position: absolute;
border-style: solid;
border-width: 1px;
border-color: black;
margin-right: 10px;
background-color: white;
float: left;
clear: both;
}
#book_informations {
width: 100%;
float: left;
}
#book_left {
margin-right: 3%;
float: left;
width: 25%;
display: table-header-group;
}
main {
width: 75%;
float: left;
margin-left: 230px;
}
#book_cover {
width: 100%;
}
#book_middle {
width: 70%;
float: left;
display: table-footer-group;
}
#book_right {
float: left;
width: 100%;
border-style: solid;
border-width: 1px;
padding: 5px;
display: table-row-group;
}
#media screen and (max-width: 768px) {
#book_middle {
margin-left: 2%;
}
}
</style>
</head>
<body>
<nav class="navigation">
<ul id="navigation_ul_left">
<li class="li_navigation_left">Test1</li>
<br>
<li class="li_navigation_left">Test2</li>
<br>
<li class="li_navigation_left">Test3</li>
<br>
<li class="li_navigation_left">Test4</li>
<br>
<li class="li_navigation_left">Test5</li>
<br>
<li class="li_navigation_left">Test6</li>
<br>
</ul>
</nav>
<main>
<div id="book_informations">
<div id="book_left">
<img id="book_cover" src="200.jpg">
<p>Test123ABC</p>
<p>Test456DEF</p>
<p>Test789GHI</p>
<div id="book_right">
<div id="payment_div">
<p id="chose_payment">Das ist mein Test-Text.</p></div>
</div>
</div>
<div id="book_middle">
<p id="book_title">Lorem ipsum dolor sit amet.</p>
<p id="book_discription">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum. 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. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.</p>
</div>
</div>
</main>
</body>
Related
I've made a basic parallax website and I am looking to put a simple navigation bar on the top right of the screen. When I load up the website in my browser, the link (which at the moment is linked to #) won't allow me to click it until I reach the class .section. If it is touching any of the images that have the parallax effect, it becomes opaque, and won't allow me to click. I had a feeling it had something to do with bad placement, and even when I moved it around it seemed to have no effect. It also won't float to the right. Here is some of the HTML and CSS:
body, html {
height: 100%;
margin:0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color:#666;
}
.navbar {
list-style: none;
color:#779cd8;
position:fixed;
float: right;
margin-right: 20px;
}
.pimg1, .pimg2, .pimg3{
position:relative;
opacity:0.70;
background-position: center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
}
.pimg1 {
background-image: url('../AlignedResonance/mountainsvg.svg');
min-height: 100%;
}
.pimg2 {
background-image: url('../AlignedResonance/tree.jpg');
min-height: 400px;
}
.pimg3 {
background-image: url('../AlignedResonance/lake.jpg');
min-height: 400px;
}
.section {
text-align:center;
padding: 50px 80px;
}
.section-light {
background-color: #f4f4f4;
color:#666;
}
.section-dark {
background-color: #282e34;
color:#ddd;
}
.ptext {
position:absolute;
top:50%;
width: 100%;
text-align: center;
color:black;
font-size: 27px;
letter-spacing: 8px;
text-transform:uppercase;
}
.ptext .border {
background-color: #111;
color: #fff;
padding:20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Aligned Resonance</title>
<link rel="stylesheet" type="text/css" href="../AlignedResonance/style.css">
</head>
<body>
<ul class="navbar">
<li>Home</li>
</ul>
<div class="pimg1">
<!-- class ptext -->
<div class="ptext">
<span>
Aligned Resonance
</span>
</div>
</div>
<section class="section section-light">
<h2>Section One</h2>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">
Text 2
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section One</h2>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">
Text 3
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section One</h2>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div class="pimg1">
<div class="ptext">
<span>
Aligned Resonance
</span>
</div>
</div>
</body>
</html>
Sorry if I don't have a correct format etc., as I am new to HTML as well as this site.
Try updating the z-index for your navbar class:
.navbar {
list-style: none;
color:#779cd8;
position:fixed;
float: right;
margin-right: 20px;
z-index: 1;
}
I have three paragraphs with heading and each heading have a border-bottom which is on the left side.
I used h2:after{//CSS here } to display the border. I used left: 13.5%; for the first heading to display the border on the left side.I can use the left:25% for second and left:39% for the last heading to display the border but I know this is not a good way to display. Because If I used to like this then I have to use the media query for all the device to set the border.
I want to know which is the best way to use the border-bottom and all are display on the left side.
Getting the output
I need a output
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
}
.heading h2:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 13.5%;
transform: translateX(-13.5%);
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
Simply apply it to the span instead of the h2 and no need to specify a specific value to left, simply make it 0 and also bottom to 0 (or any negative value if you want it to be lower)
[don't forget position:relative on span]
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
position:relative;
}
.heading h2 span:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 0;
bottom:0;
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
You should put your pseudo element :after in your span because it covers the exact width of your heading text. Then you should give your span a relative positioning so it will become its parent. Then just give it a 0% left positioning so it will align with the left. Your code should look like this.
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
position: relative;
}
.heading h2 span:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 0;
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
Can someone help me animating a div? I am currently working on a web with a div that slides from left side of the window. It is working on chrome and mozilla desktop but i cant make it to work on android system webview. EDIT: i also found that a div that is fix-positioned is still moving when i scroll the screen.
I tried using #keyframe for animations but it doesnt work anyway.
I tested it on my xiao mi redmi note pro 3.
Here is the html, css and js code. Any help is greatly appreciated.
window.onload=init;
function init(){
//localStorage.clear();
addEventListener("scroll",detectScroll);
}
function detectScroll(){
var maxScroll=document.body.scrollHeight-innerHeight;
var percent=pageYOffset/maxScroll*100;
console.log(localStorage.getItem("timer"),new Date().getTime());
if(percent>50 && new Date().getTime()>localStorage.getItem("timer")){
//debugger;
var slider=document.getElementsByClassName('box')[0];
slider.classList.add("slideOut");
}
}
function minimize(){
var slider=document.getElementsByClassName('box')[0];
slider.classList.remove("slideOut");
slider.classList.add("slideIn");
localStorage.setItem("timer",new Date().getTime()+1000);
// localStorage.setItem("timer",setTimeout(function(){
// localStorage.setItem("reopen",1);
// localStorage.setItem("sliderClosed", "open");
// console.log("timeout "+localStorage.getItem("reopen"));
// },10000));
}
/*#keyframes slideOut {
from {transform:translateX(-110%);}
to {transform:translateX(0%);}
}
#keyframes slideIn {
from {transform:translateX(0%);}
to {transform:translateX(-110%);}
}
#-webkit-keyframes slideOut {
from {-webkit-transform:translateX(-110%);}
to {-webkit-transform:translateX(0%);}
}
#-webkit-keyframes slideIn {
from {-webkit-transform:translateX(0%);}
to {-webkit-transform:translateX(-110%);}
}*/
* {
webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img{
max-width:100%;
height:auto;
}
.body{
margin-left:0px;
margin-right:0px;
margin-top:56px;
font-family: arial;
padding:15px;
}
#container{
margin-left:auto;
margin-right:auto;
width:480px;
font-family: arial;
}
#media only screen and (min-width: 480px) {
.box{
width:480px;
}
}
.col-xs-12{
width:100%;
padding:15px;
}
#media all and (min-width: 768px) {
#container{
width:750px;
}
.box{
width:450px;
}
.col-sm-9{
width:75%;
padding:15px;
}
.col-sm-6{
width:50%;
padding:15px;
}
.col-sm-3{
width:25%;
padding:15px;
}
}
#media screen and (-webkit-min-device-pixel-ratio: 3.0) and (min-width: 992px) {
#container{
width:970px;
}
.box{
width:450px;
}
.col-md-9{
width:75%;
padding:15px;
}
.col-md-6{
width:50%;
padding:15px;
}
.col-md-3{
width:25%;
padding:15px;
}
}
#navbarButton{
background-color: #E26A50;
border-radius: 4px;
border:none;
color:white;
padding:7px 25px;
}
#readMore{
background-color: #f5f5f5;
border-radius: 4px;
border:1px solid;
padding:10px 25px;
}
#emailText{
border: 1px solid #c7c7c7;
border-radius: 4px;
height: 28px;
}
.row{
width:100%;
display: flex;
flex-wrap: wrap;
/*flex-flow: row wrap;*/
justify-content:center;
}
.emailForm{
padding-left: 5px;
padding-right: 5px;
margin-bottom:0;
margin-top:0;
}
.navbar{
background-color: #e4e4e4;
padding:5px;
width:100%;
position: fixed;
left: 0;
top: 0;
display: flex;
flex-wrap: wrap;
justify-content:center;
}
#readMore{
background-color: #f5f5f5;
border-radius: 4px;
border: 1px solid #c7c7c7;
padding: 10px 25px;
}
.box{
display:flex;
justify-content:center;
background-color: #e4e4e4;
position: fixed;
border:none;
box-shadow:2px -1px 3px #888888;
border-radius:3px;
padding:15px;
left:-120%;
bottom:0;
height:auto;
max-width:100%;
}
#boxTextEmail{
width:100%;
height:30px;
padding:5px;
border-radius:3px;
border:1px solid #c7c7c7;
}
.box #boxForm{
margin-bottom:0px;
}
.box #boxButtonEmail{
background-color: #0F52BA;
color:white;
width:100%;
height:45px;
padding:5px;
border-radius:3px;
border:none;
}
.slideOut{
left:0%;
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
}
.slideIn{
left:-110%;
-webkit-transition: 1s;
-moz-transition:1s;
transition:1s;
}
.p{
text-align: left;
}
.box #header{
font-size: 25px;
font-style:normal;
}
.box span{
font-size: 12px;
}
.minimizeSlider{
background-color: #e4e4e4;
border:none;
position:absolute;
right:0px;
top:0px;
}
<html>
<head>
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">
<title>Cermati Banner and Slider</title>
<link rel="stylesheet" href="css/cermati.css">
</head>
<script src="js/cermati.js"></script>
<body class="body">
<header class="navbar">
<!-- <div><span style="vertical-align: middle; padding:0px;">Mau voucher diskon belanja up to 70%?</span></div> -->
<span style="vertical-align: middle; padding:6px;">Mau voucher diskon belanja up to 70%?</span>
<div class="emailInputHolder">
<form action="" class="emailForm">
<input type="text" id="emailText" placeholder="Masukkan email kamu"/>
<button id="navbarButton">DAFTAR</button>
</form>
</div>
</header>
<div id="container">
<div class="row">
<div class="col-xs-12 col-sm-9 col-md-9">
<button id="readMore">Baca Lebih Banyak <span>></span></button>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-9">
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="images/hijab01.jpg"/>
</div>
</div>
</div>
<div class="box">
<div id="content">
<h1 id="header" style="">Belanja Gak Pake Pusing!</h1>
<button class="minimizeSlider" onclick="minimize()">❌</button>
<p>Yuk daftarin emailmu untuk melihat pilihan barang-barang fashion MURAH dan TERKINI dari ribuan toko online terpercaya langsung ke email kamu</p>
<form id="boxForm">
<p><input id="boxTextEmail" type="text" placeholder="Masukkan email kamu disini"/></p>
<p><button id="boxButtonEmail">DAFTARKAN SEKARANG</button></p>
</form>
<span>powered by SumoMe</span>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
I have an issue with the child divs not appearing side by side. There are two divs which appear at the bottom of the first div.
I have tried display:inline-block - but to no avail.
div.bodyClass {
background-color: D4BD6A;
height: 850px;
}
div.navClassItems {
text-align: center;
display: inline-block;
width: 250px:
}
div.secClass1 {
background-color: F9E18D;
display: inline-block;
}
div.secClass2 {
background-color: F9E18D;
display: inline-block;
}
<div id="mainbodyWithNav" class="bodyClass">
<div class="navClassItems">
<hr>Main Page
<br>
<hr>Metrics
<br>
<hr>Contact us
<br>
<hr>
</div>
<div class="secClass1">
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. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="secClass2">
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. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
you need to apply display:inline-block and set a (max)-width to all the children
.bodyClass {
background-color: #D4BD6A;
height: 850px;
font-size:0 /* inline-block gap fix */
}
.bodyClass > div{
text-align: center;
display: inline-block;
vertical-align:top;
max-width: 250px;
font-size:16px /* reset font-size */
}
[class*="sec"] {
background-color: #F9E18D;
}
<div id="mainbodyWithNav" class="bodyClass">
<div class="navClassItems">
<hr>Main Page
<br>
<hr>Metrics
<br>
<hr>Contact us
<br>
<hr>
</div>
<div class="secClass1">
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. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="secClass2">
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. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
Try this...
div.secClass1
{
background-color:F9E18D;
width:50%;
float:left;
}
div.secClass2
{
background-color:F9E18D;
width:50%;
float:left;
}
and put an <hr /> just before the secClass1 div so that it separates it from the menu above.
Use "Float:left" and set their width both to 50% (Or width of container divided by 2):
//below is container class
container{
width: 100%;
}
div.secClass1
{
float: left;
width: 50%;
background-color:F9E18D;
display:inline-block;
}
div.secClass2
{
float: left;
width: 50%;
background-color:F9E18D;
display:inline-block;
}
One option would be to set width to calc(50% - 125px) and float them left. See fiddle: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/39/
div.secClass1
{
width: calc(50% - 125px);
float: left;
background-color:#F9E18D;
}
div.secClass2
{
width: calc(50% - 125px);
float: left;
background-color:#F9E18D;
}
try using "float: left;" instead
I cannot get my menu bar to appear horizontally. I am still working on the whole page itself, but just need to focus on the #nav items not displaying correctly. Right now it is appearing centered and I would like it to be inline in the upper-right.
How can I fix this?
body {
background-image: url("http://i59.photobucket.com/albums/g304/ecarlson_2010/Mobile%20Uploads/2E3938F1-33FA-4CF1-A13A-F86E536A7CEA.jpg");
background-size: 30%;
background-repeat: no-repeat;
height: 500px;
top: 0;
font-family: cursive;
margin: 0 auto;
max-width: 500px;
background-color: black;
}
.left {
background-color: red;
}
a {
font-size: 15px;
}
#nav {
background-color: purple;
width: 15px;
height: 25px;
border-radius: 5px;
}
#nav li {
margin: 10px;
text-align: center;
float: right;
display: inline;
background-color: pink;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
<body>
<header>
<h1>Plant Tissue Culturing </h1>
<div id="nav">
<ul>
<li> HOW TO
</li>
<li> WHY
</li>
<li> HOW TO
</li>
</ul>
</div>
</header>
<h2>Micropropagation</h2>
<div class="first">
<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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div class="second">
<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. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<div class="third>
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
Just need to add display: inline-block; to your #nav li
#nav li {
margin: 10px;
float: left;
background-color: pink;
display: inline-block;
height: 25px;
border-radius: 5px;
}
jsfiddle
body {
background-image: url("http://i59.photobucket.com/albums/g304/ecarlson_2010/Mobile%20Uploads/2E3938F1-33FA-4CF1-A13A-F86E536A7CEA.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: cursive;
margin: 0 auto;
}
a {
font-size: 15px;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
float: right;
}
#nav li {
margin: 10px;
float: left;
background-color: pink;
display: inline-block;
height: 25px;
border-radius: 5px;
}
h2 {
position: relative;
}
<title>Plant Tissue Culturing</title>
<header>
<h1>Plant Tissue Culturing </h1>
<div id="nav">
<ul>
<li> HOW TO
</li>
<li> WHY
</li>
<li> WHERE
</li>
</ul>
<br/>
<br/>
<h2>Micropropagation</h2>
</div>
<br />
</header>
<body>
<div class="first">
<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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="second">
<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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="third">
<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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</body>