<body onload="load_animes()">
<div class="head">
<!-- <h1 id="head_title">Hello</h1> -->
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7206d8a9-d46d-4479-b47a-8cf6d05bc830/d7zzah3-c53850a6-5d66-437b-a581-99d84fea1923.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNzIwNmQ4YTktZDQ2ZC00NDc5LWI0N2EtOGNmNmQwNWJjODMwXC9kN3p6YWgzLWM1Mzg1MGE2LTVkNjYtNDM3Yi1hNTgxLTk5ZDg0ZmVhMTkyMy5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.oSQAAL-K2KoIhZJTBTpnvqqcy2cC8QjmgsUwlsS-0Uk" id="head_bg">
<h1 id="desc">
This is a website where I post my shitty reviews about anime that I have watched. All anime are sorted based on the first alphabet of their names
</h1>
<h1 id="note">
<strong>Note:</strong> There will be spoilers in my reviews
</h1>
</div>
<div id="view">
<div id="layer"></div>
<div id="content">
<h1 id="view_title"></h1>
<h2 id="view_genres"></h2>
<p id="view_note">Note: I don't assign the genres according to MAL, I assign the genres based on my own opinion</p>
<h3 id="view_rating"></h3>
<h4 id="view_review"></h4>
<button id="back" onclick="back()">Back To List</button>
<img id="view_img">
</div>
</div>
my style:
body {
background-color: #28282B;
/* background-image: url("img_tree.gif"); */
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
*{
font-family: Arial, Helvetica, sans-serif;
}
#view{
z-index: 0;
position: relative;
height: max-content;
margin: -8px;
}
#view #layer {
background-color: black;
opacity: 0.5;
height: max-content;
width: 100%;
position: absolute;
z-index: 0;
}
#view div {
position: absolute;
}
#view #view_title{
font-size: 4rem;
color: white;
margin-left: 2%;
z-index: 1;
}
#view #view_genres{
margin-left: 2%;
}
#view #view_note{
color: rgb(243, 226, 226);
font-size: 1.5rem;
border-radius: 10px;
margin-left: 2%;
font-weight: bolder;
}
#view #view_rating{
color: white;
margin-left: 2%;
font-size: 1.5rem;
font-family: 'open sans',arial,sans-serif;
}
#view #view_review{
background-color: #18181a;
color: white;
font-size: 2rem;
margin-left: 5%;
margin-right: 5%;
border-radius: 5px;
z-index: 1;
font-weight: lighter;
}
#view #view_img{
max-height: 80%;
max-width: 70%;
z-index: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
#view #back:hover{
color: #FFD700;
}
#view #back{
font-size: 3.5rem;
background-color: #18181a; /* Green */
border: none;
color: white;
text-align: center;
outline: none;
border-radius: 5px;
font-family: Arial, Helvetica, sans-serif;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: 5%;
}
i set my #view element (which is the parent element) to height: max-content but it isn't setting the height, the height is still 0, but the width is maxed and as u can see, there are no other parent elements containing #view. I've changed the body's style to height: max-content as well but it ain't working
Related
I'm struggling to get my logo to sit top middle of the page and to be responsive. I currently have it in a container div where it sits next to two other divs navOne and navTwo. Although I want it to be more independent and responsive at the top middle of the page.
This is my component:
import React from "react";
// import landingVideo from "../assets/landing.mp4";
// import landingVideo2 from "../assets/landing.mp4";
import landingVideo3 from "../assets/landing3.mp4";
import ellena from "../assets/ellena.png";
import "./landing.css";
function Landing() {
return (
<div className="main">
<div className="heading">{/* <img src={ellena} alt="" /> */}</div>
<div className="overlay"></div>
<video src={landingVideo3} autoPlay loop muted />
<div className="container">
<div className="title">
<img className="logo" src={ellena} alt="" />
</div>
<div className="navOne">
<h1>Commercial</h1>
</div>
<div className="navTwo">
<h1>Weddings</h1>
</div>
</div>
</div>
);
}
export default Landing;
And my css:
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100vh;
position: relative;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: -1;
}
.title {
display: block;
}
.logo {
max-width: 40%;
max-height: 40%;
}
.container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: aliceblue;
justify-content: space-around;
padding: 5px;
}
.navOne {
border: 1px white solid;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - 0.2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-family: futura-pt;
font-weight: 500;
font-style: normal;
font-size: 14px;
letter-spacing: 0.2em;
font-family: "Inria Serif", serif;
}
.navTwo {
border: 1px white solid;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - 0.2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-family: futura-pt;
font-weight: 500;
font-style: normal;
font-size: 14px;
letter-spacing: 0.2em;
font-family: "Inria Serif", serif;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background-color: rgba(252, 226, 160, 0.2); */
}
Should I remove the logo from the container div?
Any help would be appreciated.
Hey friends I'm writing the media query for the footer of my website. I'm starting on a max-width of 425px. The first thing that gets messed up when i shrink the screen to this size is shown here - The red line doesn't add up, so i adjust and fix it, but when i shrink the screen to a max-width of 375px the red line moves again, so I create another media query with a max-width of 375px and adjust the line and fix it at 375, but now when i move the screen back up to 425 that line moves again? completely ignoring that style. So i have to adjust it again. But this then messes it up at 375??? What's happening? It's back and forth plz help -Example below
1st thing I do when I resize the screen to 425px and see the problem(as shown in the picture
`#media screen and (max-width: 425px) {
.social .inner:after {
margin-top: -40px;
}
}`
The above code aligns the red line where it needs to be when the screen has a max width of 425px. However when I shrink the screen to 375px the line moves again so maybe I do something like this
`#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -38px;
}
}`
This fixes at 375px. What now happens though is when i go back to 425px the line moves again? and then if that wasn't enough if you shrink down to 375px its misaligned??? Try it out and see
html, body {
margin: 0;
padding: 0;
}
/*---HEADER---*/
header {
background-image: url(../img/contact.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
}
.contact-wrapper{
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
}
header h1 {
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
}
/*---NAV---*/
nav {
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
}
li a {
text-decoration-line: none;
color: rgba(102,102,102,0.75);
}
ul {
margin-right: 30px;
margin-top: 25px;
}
li {
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
}
li a:hover {
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
}
.after:after {
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
}
.logo {
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
}
/*---MAIN---*/
.contact h2 {
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
}
.contact h2:after {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
}
.contact h2:before {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
}
.quote-info {
display: flex;
flex-direction: column;
width: 30%;
margin: 20px;
background-color: rgba(102, 102, 102, 0.2);
margin-bottom: 15px;
}
.quote-info input, .quote-info textarea {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-bottom: 17px;
font-family: 'Rajdhani';
font-size: 1.2rem;
}
.quote-info p {
color: rgb(102, 102, 102);
text-align: center;
font-size: 1.45rem;
font-weight: bolder;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.quote-info .send-quote {
width: 85%;
background-color: red;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
font-size: 1.2rem;
color: white;
font-family: 'Rajdhani';
border: none;
outline: none;
padding: 5px;
}
.send-quote:hover {
transition: all 0.5s ease;
background-color: #cc0000;
}
textarea {
resize: none;
}
hr {
width: 100%;
color: rgba(102, 102, 102);
}
.contact .container {
display: flex;
}
.contact-info h3 {
color: rgb(102, 102, 102);
font-size: 2.3rem;
margin-left: 25px;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.contact-info h3:after {
content: '';
height: 1.5px;
display: inline-block;
background-color: grey;
width: 340%;
position: relative;
top: -30px;
}
.contact-numbers div {
margin-left: 30px;
font-family: 'Rajdhani';
font-size: 1.35rem;
}
.contact-numbers i {
color: red;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
}
.footer div {
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
}
.footer h1 {
font-size: 2rem;
margin-top: 15px;
}
.footer .inner {
margin-left: 55px;
}
.social .inner {
margin-left: 45px;
}
.contact .inner {
margin-left: 35px;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
}
.links .inner:after {
content: '';
width: 10.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -151px;
}
.social .inner:after {
content: '';
width: 5.8%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -171px;
}
.contact .inner:after {
content: '';
width: 7.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -174.5px;
}
.wrap:before {
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
}
.links a {
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
}
.links a:hover {
color: red;
}
.contact p {
position: relative;
top: -10px;
}
.social i {
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.social i:hover {
color: red;
cursor: pointer;
}
#msg {
margin-top: -15px;
}
.footer-textarea {
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 102%;
}
.footer button {
position: absolute;
margin-left: 23.2%;
margin-top: -40px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
}
button:hover {
cursor: pointer;
color: red;
}
.dark {
color: red;
}
.copyright {
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
}
/*------MEDIA-QUERIES------*/
#media screen and (max-width: 425px) {
/*---NAV---*/
.logo {
font-size: 2.5rem;
margin-left: 10px;
}
ul {
margin: 0;
padding: 0;
}
nav li {
display: none;
}
.ham-menu {
width: 55px;
height: 55px;
position: fixed;
right: 0;
top: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.m1, .m2, .m3 {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
}
/*---MAIN---*/
header h1 {
font-size: 3rem;
}
.quote-info {
width: 90%;
}
.quote-info p {
position: relative;
top: 2px;
}
.contact .container {
flex-direction: column;
}
.contact-info h3 {
margin-top: 0;
}
.contact-info h3:after {
width: 95%;
}
.contact-numbers {
margin-top: -15px;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
flex-direction: column;
}
.footer div {
margin: 0;
}
.footer h1 {
font-size: 2rem;
margin-top: 10px;
}
.footer .inner {
margin: 0;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 100%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
}
.links .inner:after {
width: 33%;
margin-top: -152px;
}
.social .inner {
position: relative;
top: -10px;
}
.social .inner:after {
content: '';
width: 18%;
height: 2px;
background-color: red;
position: absolute;
left: 0;
margin-top: -40px;
}
.contact .inner:after {
content: '';
width: 24%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -148px;
}
.links a {
margin-left: 5px;
}
.social h1 {
margin-bottom: 10px;
}
#msg {
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
}
.footer button {
right: 9.25%;
margin-top: 0.2px;
}
.social i {
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.footer-textarea {
width: 88.5%;
margin-top: 5px;
margin-left: 5px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
}
.copyright span {
color: white;
background-color: red;
}
}
#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -36.5px;
width: 20%;
}
.links .inner:after {
width: 37%;
}
.contact .inner:after {
width: 27%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
<title>Contact | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/contact.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="contact-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
</div>
<ul>
<li class="after">Home</li>
<li class="after">About</li>
<li class="after">Services</li>
<li class="after">Careers</li>
<li>Contact</li>
</ul>
</div>
</nav>
<h1>Contact Us</h1>
</div>
</header>
<section class="contact">
<h2>Get in touch</h2>
<div class="container">
<div class="quote-info">
<p>Get a Quote</p>
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type="text" placeholder="Phone Number">
<input type="text" placeholder="Email">
<textarea name="project-details" id="" cols="40" rows="7" placeholder="Give us the specifics on your project"></textarea>
<button class="send-quote">Send</button>
</div>
<div class="contact-info">
<h3>Contact info</h3>
<div class="contact-numbers">
<div>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Matt</p>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Keegan</p>
</div>
<div>
<i class="fas fa-envelope"></i>
<p>P.O. Box 50860 IF, ID 83405</p>
<i class="fas fa-at"></i>
<p>KaneConcrete#fake.com</p>
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1>Quick Links</h1>
Home
About
Services
Careers
Contact
</div>
</div>
<div class="social">
<div class="inner">
<h1>Social</h1>
<i class="fab fa-linkedin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter-square"></i>
<p id="msg">Send some feedback!</p>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="type here..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1>Contact</h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete#fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
</body>
</html>
I couldn't reproduce the problem here (or I didn't understand it completely). But let me point some possible problems with the CSS code there:
To create the red lines, you create an element after the content of the sections. To adjust the position, you are setting the margin to a negative value. This is problematic because the size of the section is not constant, so, the red line will have a sort of undefined position (actually it is bottom of section minus some pixels).
You can set the margin to 0 to verify how the size of the section is volatile (it will change when a line wraps, if the font changes, maybe from browser to browser, etc). I recommend instead using a natural flow, and add a line where its position is. A simple example could be:
header {
width: 300px;
}
h1 {
margin: 0;
margin-bottom: 10px;
}
.line {
height: 2px;
background: black;
}
.red-line {
height: 2px;
background: red;
width: 30%;
margin-top: -2px;
}
<header>
<h1>Quick Links</h1>
<div class="line"></div>
<div class="red-line"></div>
</header>
The negative margin here works because .red-line will always be 2px below .line.
Cya!
A section consists of a navigation group with elements floated to the sides, a center text group, and a background image. The section height was not manually set to fit the background image.
How do I go about vertically centering the text group? It is div.h1-container.
Plunkr: https://plnkr.co/edit/rSWgdfPQEbIeXbPh4wO1?p=preview
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
.clear {
clear: both;
}
ul {
margin: 0;
padding: 0;
}
section h2 {
line-height: 1.0;
}
.button_1 {
height: 34px;
background: tomato;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
width: 200px;
}
.showcase-nav a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
.showcase-nav {
padding-top: 30px;
margin-top: 10px;
float: right;
}
.showcase-nav li.social i {
padding: 0 4px;
}
.showcase-nav li {
display: inline;
padding: 0 20px 0 20px;
}
.showcase-branding {
float: left;
}
.showcase-branding h1 {
font-size: 26px;
margin: 0;
padding-top: 30px;
color: #fff;
}
.showcase-branding .highlight {
color: #e8491d;
font-weight: bold;
}
.showcase-nav a:hover {
color: #cccccc;
font-weight: bold;
}
.h1-container {
width: 70%;
margin: auto;
}
.h1-container h1 {
text-transform: uppercase;
text-align: center;
color: #fff;
}
.h1-container p {
width: 81%;
background: tomato;
margin: auto;
border-radius: 10px;
text-align: center;
color: #fff;
}
/* Showcase */
#showcase {
background: url('http://i68.tinypic.com/2j5jho4.png') no-repeat;
background-size: contain;
width: 100%;
display: inline-block;
position: relative;
margin: 0 auto;
}
#showcase:after {
padding-top: 51.46%;
display: block;
content: '';
}
#showcase .container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
#showcase .h1-container h1 {
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
padding: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<section id="showcase">
<div class="container">
<div class="showcase-branding">
<h1>Title</h1>
</div>
<nav class="showcase-nav">
<ul>
<li class="current">About</li>
<li>Contact</li>
<li class="social"><i class="fa fa-linkedin-square"></i><i class="fa fa-facebook-official"></i><i class="fa fa-twitter"></i></li>
</ul>
</nav>
<div class="clear"></div>
<div class="h1-container">
<h1>Text on line 1<br>text on line 2</h1>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum <i class="fa fa-caret-right"></i></p>
</div>
</div>
</section>
Given the current context there are two simple ways to go about this.
One way would be to give .h1-container display: flex, flex-direction: column, and justify-content: center.
Here is a jsfiddle.
However, if you were to do it this way, each element and every new element placed in .h1-container will end up being stacked vertically and centered vertically in relation to .h1-container, so it will appear as if the children elements are not centered if .h1-container is not properly centered.
Also remember that justify-content always positions the children elements relative to the direction of the flex-box. Therefore, if your flex-box direction is not explicitly set, and since the default is flex-direction: row, justify-content would position the children horizontally. align-items will always be the opposite of the flex-box's direction property.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
.clear {
clear: both;
}
ul {
margin: 0;
padding: 0;
}
section h2 {
line-height: 1.0;
}
.button_1 {
height: 34px;
background: tomato;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
width: 200px;
}
.showcase-nav a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
.showcase-nav {
padding-top: 30px;
margin-top: 10px;
float: right;
}
.showcase-nav li.social i {
padding: 0 4px;
}
.showcase-nav li {
display: inline;
padding: 0 20px 0 20px;
}
.showcase-branding {
float: left;
}
.showcase-branding h1 {
font-size: 26px;
margin: 0;
padding-top: 30px;
color: #fff;
}
.showcase-branding .highlight {
color: #e8491d;
font-weight: bold;
}
.showcase-nav a:hover {
color: #cccccc;
font-weight: bold;
}
.h1-container {
width: 70%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.h1-container h1 {
text-transform: uppercase;
text-align: center;
color: #fff;
}
.h1-container p {
width: 81%;
background: tomato;
margin: auto;
border-radius: 10px;
text-align: center;
color: #fff;
}
/* Showcase */
#showcase {
background: url('http://i68.tinypic.com/2j5jho4.png') no-repeat;
background-size: contain;
width: 100%;
display: inline-block;
position: relative;
margin: 0 auto;
}
#showcase:after {
padding-top: 51.46%;
display: block;
content: '';
}
#showcase .container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
#showcase .h1-container h1 {
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
padding: 5px;
}
<body>
<section id="showcase">
<div class="container">
<div class="showcase-branding">
<h1>Title</h1>
</div>
<nav class="showcase-nav">
<ul>
<li class="current">About</li>
<li>Contact</li>
<li class="social"><i class="fa fa-linkedin-square"></i><i class="fa fa-facebook-official"></i><i class="fa fa-twitter"></i></li>
</ul>
</nav>
<div class="clear"></div>
<div class="h1-container">
<h1>Text on line 1<br>text on line 2</h1>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum <i class="fa fa-caret-right"></i></p>
</div>
</div>
</section>
</body>
The other way would be to give .container position: relative, and then give .h1-container position: absolute, top: 50%, and transform: translateY(-50%).
Positioning .container as relative allows you to absolutely position .h1-container in relation to .container as opposed to the entire document.
.container {
position: relative;
}
.h1-container {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Here is a jsfiddle.
The following is an inline version which won't display properly due to the dimensions of everything, but it has at least centered the .h1-container.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
position: relative;
}
.clear {
clear: both;
}
ul {
margin: 0;
padding: 0;
}
section h2 {
line-height: 1.0;
}
.button_1 {
height: 34px;
background: tomato;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
width: 200px;
}
.showcase-nav a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
.showcase-nav {
padding-top: 30px;
margin-top: 10px;
float: right;
}
.showcase-nav li.social i {
padding: 0 4px;
}
.showcase-nav li {
display: inline;
padding: 0 20px 0 20px;
}
.showcase-branding {
float: left;
}
.showcase-branding h1 {
font-size: 26px;
margin: 0;
padding-top: 30px;
color: #fff;
}
.showcase-branding .highlight {
color: #e8491d;
font-weight: bold;
}
.showcase-nav a:hover {
color: #cccccc;
font-weight: bold;
}
.h1-container {
width: 70%;
margin: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.h1-container h1 {
text-transform: uppercase;
text-align: center;
color: #fff;
}
.h1-container p {
width: 81%;
background: tomato;
margin: auto;
border-radius: 10px;
text-align: center;
color: #fff;
}
/* Showcase */
#showcase {
background: url('http://i68.tinypic.com/2j5jho4.png') no-repeat;
background-size: contain;
width: 100%;
display: inline-block;
position: relative;
margin: 0 auto;
}
#showcase:after {
padding-top: 51.46%;
display: block;
content: '';
}
#showcase .container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
#showcase .h1-container h1 {
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
padding: 5px;
}
<body>
<section id="showcase">
<div class="container">
<div class="showcase-branding">
<h1>Title</h1>
</div>
<nav class="showcase-nav">
<ul>
<li class="current">About</li>
<li>Contact</li>
<li class="social"><i class="fa fa-linkedin-square"></i><i class="fa fa-facebook-official"></i><i class="fa fa-twitter"></i></li>
</ul>
</nav>
<div class="clear"></div>
<div class="h1-container">
<h1>Text on line 1<br>text on line 2</h1>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum <i class="fa fa-caret-right"></i></p>
</div>
</div>
</section>
</body>
I'm following this SO post here and the p element is not centering.
Basically I gave the containing div a width and height and then set text align attribute to center for the p element inside the div. No go.
What can I try next?
The containing div is id=Y1aa
I only need horizontal centering for now.
#Y1 {
z-index: 4000;
position: relative;
width: 100%;
height: 30px;
background: #ffffff;
opacity: .95;
}
#Y1a {
position: relative;
width: 320px;
height: 30px;
margin: 0 auto;
border-left: dotted 1px #000000;
border-right: dotted 1px #000000;
}
#Y1aa {
position: relative;
width: 320px;
height: 30px;
top: 5px;
}
.top {
color: #000000;
display: inline;
font-size: 9px;
font-weight: bold;
font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
text-align: center;
line-height: 10px;
}
<div id='Y1'>
<div id='Y1a'>
<div id="Y1aa">
<p class="top">Foo</p>
</div>
</div>
</div>
Change display:inline to display:block in your top class, or delete the display style all together.
You can remove from your .top class this: display: inline;.
#Y1 {
z-index: 4000;
position: relative;
width: 100%;
height: 30px;
background: #ffffff;
opacity: .95;
}
#Y1a {
position: relative;
width: 320px;
height: 30px;
margin: 0 auto;
border-left: dotted 1px #000000;
border-right: dotted 1px #000000;
}
#Y1aa {
position: relative;
width: 320px;
height: 30px;
top: 5px;
}
.top {
color: #000000;
font-size: 9px;
font-weight: bold;
font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
text-align: center;
line-height: 10px;
}
<div id='Y1'>
<div id='Y1a'>
<div id="Y1aa">
<p class="top">O: 832-418-9180 M: 281-923-3638 S: 281-968-0727</p>
</div>
Alternatively, you could add text-align: center to #Y1aa if you need to keep the p as an inline element.
#Y1 {
z-index: 4000;
position: relative;
width: 100%;
height: 30px;
background: #ffffff;
opacity: .95;
}
#Y1a {
position: relative;
width: 320px;
height: 30px;
margin: 0 auto;
border-left: dotted 1px #000000;
border-right: dotted 1px #000000;
}
#Y1aa {
position: relative;
width: 320px;
height: 30px;
top: 5px;
text-align: center;
}
.top {
color: #000000;
display: inline;
font-size: 9px;
font-weight: bold;
font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
text-align: center;
line-height: 10px;
}
<div id='Y1'>
<div id='Y1a'>
<div id="Y1aa">
<p class="top">O: 832-418-9180 M: 281-923-3638 S: 281-968-0727</p>
</div>
</div>
</div>
To center a paragraph inside a div you will have to use the margin attribute in the CSS style for the paragraph
In this example i am centering the first paragraph inside the div with class 'wrap'
.wrap p:first-child {
text-align:center;
margin: 0 auto;
}
<div class="wrap">
<p>Some p tag</p>
</div>
This is the layout I'm trying to achieve with my page:
Basically, the hero and sidebar are two columns on the page. The hero text and image should both be in one div, so they should be treated as one element, like the sidebar. The div with the content ID has max-width: 1150px;. The reason I'm including the hero text and image separately is because I want to point out that the hero image is a div with a background-image, as opposed to an img element.
The elements are structured like this:
<div id="content">
<div id="hero">
<div id="heroText">
</div>
<div id="heroImage">
</div>
</div>
<div id="sidebar">
</div>
</div>
The method I'm using right now is where I put float: left; on the div with ID hero, and float: right; on the div with ID sidebar.
When I do this, and resize my browser below 1200px (margins + hero max-width + sidebar width), the sidebar goes below the hero, instead of the hero shrinking below its max-width value 800px.
How can I make the hero start to shrink instead of what happens now, the hero holding up until the browser shrinks below 900px (margins + hero width).
The CSS used currently is below:
#content
{
margin: 0px auto;
max-width: 1150px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
padding-top: 25px;
}
#hero
{
float: left;
max-width: 800px;
width: 100%;
}
#heroText
{
font-family: Lato;
font-size: 24pt;
font-weight: lighter;
height: 150px;
margin: 0px auto;
max-width: 600px;
text-align: center;
}
#heroText p
{
margin-bottom: 20px;
margin-top: 0px;
}
#heroImage
{
background-image: url(heroImage.png);
background-repeat: no-repeat;
background-size: contain;
height: 450px;
text-align: center;
}
#heroButton
{
margin-top: 90px;
width: 240px;
}
#news
{
float: right;
width: 300px;
}
#newsPane
{
background-color: #666666;
border-radius: 10px;
display: inline-block;
color: #fff;
height: 450px;
width: 300px;
}
#newsPaneText
{
font-size: 12pt;
font-weight: lighter;
max-height: 350px;
overflow: auto;
padding-left: 10px;
padding-right: 10px;
}
#newsPaneText h1
{
font-size: 18pt;
font-weight: lighter;
margin-top: 5px;
}
#newsPaneText small
{
font-size: 10pt;
font-weight: bold;
}
#newsPaneButton
{
margin-left: 60px;
margin-top: 25px;
width: 180px;
}
#emailPane
{
background-color: #e5e5e5;
border-radius: 10px;
color: #333;
display: inline-block;
height: 130px;
margin-top: 20px;
}
#emailForm
{
padding-left: 10px;
padding-right: 10px;
margin-top: 5px;
}
#emailField
{
background-color: #fff;
border: none;
border-radius: 5px;
color: #333;
font-family: Lato;
font-size: 14pt;
height: 27px;
margin-top: 10px;
padding: 0px;
width: 280px;
}
#emailSubmitButton
{
float: right;
margin-top: 10px;
width: 120px;
}
#emailFormStatus
{
float: left;
font-size: 11pt;
font-weight: bold;
margin-top: 15px;
}
FIDDLE
HTML:
<div id="content">
<div id="news">
</div>
<div id="hero">
<div id="heroText">
</div>
<div id="heroImage">
</div>
</div>
</div>
CSS:
#content {
margin: 0px auto;
max-width: 1150px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
padding-top: 25px;
}
#hero {
max-width:800px;
margin-right:300px;
}
#heroText {
font-family: Lato;
font-size: 24pt;
font-weight: lighter;
height: 150px;
margin: 0px auto;
max-width: 600px;
text-align: center;
background:#FF6699;
}
#heroImage {
background-image: url(heroImage.png);
background-repeat: no-repeat;
background-size: contain;
height: 450px;
text-align: center;
background:#6699FF;
}
#news {
float: right;
width: 300px;
height:600px;
background:#66CC33;
}