As the title says. Can't say much more.
As you can see this occurs on both Chrome and Firefox.
webkit scroll bar, didn't work. Deactivated scroll bar.
Overflow: scroll
My code
I also need to add extra details. My issue occured after not many changes, it worked completely fine before I added a certain section (The button at bottom, with 'All Information'
#font-face {
font-family: Bluu;
src: url(cdn/fonts/BluuNext-master/fonts/BluuNext-Bold.otf);
}
#font-face {
font-family: Karrik;
src: url(cdn/fonts/karrik_fonts-main/fonts/Web/TFF/Karrik-Regular.ttf);
}
html {
scroll-behavior: smooth;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, rgb(122,153,217)),
color-stop(0.72, rgb(73,125,189)),
color-stop(0.86, rgb(28,58,148)));
}
body {
background-color: #64B6AC;
overflow-y: scroll;
overflow-x: hidden;
}
.content {
background-color: #C0FDFB;
max-width: 75%;
min-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.interior {
margin-left: 40px;
}
.hamburger {
font-size: 40px;
color: black;
text-decoration: none;
margin-top: 20px;
}
/* General Styles for all */
.lower-area {
margin-top: 100px;
text-align: center;
margin-bottom: 100px;
}
.button-styles {
background: #FFFFFF;
border-radius: 5px;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 30px;
padding-left: 30px;
border: none;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
font-family: Karrik;
color: rgb(8, 8, 8);
text-decoration: none;
font-size: 16px;
transition: 0.3s ease-in-out;
}
.button-styles:hover {
color: #FFFFFF;
background-color: rgb(8, 8, 8);
}
/* Headings */
.large-heading {
font-family: Bluu;
font-size: 7vw;
}
.medium-heading {
font-family: Bluu;
font-size: 5vw;
}
.sub-heading {
font-family: Karrik;
font-size: 3vw;
}
/* Paragraphs */
.paragraph {
font-size: 1.4vw;
max-width: 90%;
display: block;
font-family: Karrik;
font-weight: 200;
}
/* Mobile responsiveness */
#media (max-width:1000px) {
.content {
min-width: 100%;
min-height: 100%;
}
.hamburger {
font-size: 25px;
margin-top: 40px;
}
.paragraph {
font-size: 4vw;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/9ab5d42652.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>KDGuide</title>
</head>
<body>
<div class="content">
<div class="interior">
<div class="top-area">
<a class="hamburger" href="/">☰</a>
<h1 class="large-heading">Welcome to CODE SNIPPET</h1>
<h1 class="sub-heading">This is a code snippet</h1>
<p class="paragraph">I am having an issue where I can not
scroll higher than a certain point.
</p>
<h1 style="text-align: center; ">
<a href="#alltutorials" class="large-heading" style="text-decoration: none; color: black;">
<i class="fa-solid fa-arrow-down"></i>
</a>
</h1>
</div>
<div class="lower-area">
<br>
<h1 class="sub-heading" id="alltutorials">All Info</h1>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim varius dolor et varius. Duis sit amet rhoncus eros, at consequat nisi. Donec sed finibus enim. Aenean rutrum odio vitae cursus bibendum. Maecenas pharetra libero lorem, sed maximus metus rhoncus.
</p>
View
</div>
</div>
</div>
</body>
</html>
that is probably because of what you used to center your content.
You should consider using display flex to center your content in your body.
You used translate top with 50% which is not related to the height of your page
Related
After moving things around, I tried to change the position: absolute to position: relative of the actual iframe class, it made the video position under 'Featured' but the dimension of the video is messed up. If I change it back to position: absolute, the video covers the entire page banner, but the responsiveness is good, however the dimension is too big. How do I make it look like the video is under the Featured page, aligned in the center, and responsive as well?
This is my code:
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/*setting font size as 62.5%=10px for easier REM fontsize calculations*/
html, body {
font-size: 62.5%;
height: 100%;
margin: 0;
font-family: font-family: 'Playfair Display', serif;
}
/*making the image parallax as a banner*/
.parallax1 {
background: url(https://i.imgur.com/6wPsROo.png);
min-height: 100%;
background-position: center;
position: relative;
opacity: .95;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
top: 0;
}
* {
padding: 0;
margin: 0;
text-declaration: none;
list-style: none;
box-sizing: border-box;
}
body {
background-color: white;
}
/*customizing banner text*/
#slogan {
font-size: 4.5rem;
color: white;
text-shadow: 1px 1.5px 1px #A26B40;
font-weight: lighter;
}
.heading2 {
width: 100%;
height: auto;
left: 0;
top: 50%;
position: absolute;
text-align: center;
line-height: 3.2rem;
}
#slogan-subheading {
font-size: 2.5rem;
color: white;
text-shadow: .5px .5px 1px #A26B40;
font-weight: lighter;
}
#shop-now {
background-color: #bd8d58;
width: 10%;
height: auto;
margin: 0 auto;
position: relative;
padding: 0px;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
}
#shop-now:hover {
cursor: pointer;
}
/*make container for each row comprising an image with caption side by side*/
.prod-container {
flex-direction: row;
display: flex;
padding: 10px 20px;
text-align: center;
justify-content: center;
}
/*customize each cell*/
.image-and-capt {
padding: 10px 40px;
}
/*customize productimg*/
#product-img {
width: 200px;
border-radius: 50%;
box-shadow: 3px 5px 15px rgba(182,124,72,0.3);
}
/*customize product name & description*/
#product-name, #product-descrp {
font-family: 'Open Sans', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: rgba(54, 46, 39, 0.8);
}
#product-name {
font-size: 1.5rem;
padding-top: 10px;
}
#product-descrp {
font-size: 1rem;
padding-top: 4px;
}
.featured-container {
background: rgba(255, 214, 170, 0.6);
padding: 50px 100px;
}
.vid-container {
position: relative;
width: 100%;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
}
.vid-container-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
display: block;
margin: 0 auto;
}
/*centering the logo and customizing size*/
#header-img {
max-width: 200px;
max-height: auto;
height: auto;
width: auto;
padding: 10px 0px 0px 0px;
}
/*customizing the navigation links*/
.nav-link {
text-decoration: none;
color: #54473C;
font-family: 'Playfair Display', serif;
display: column;
font-size: 1.5rem;
}
/*customizing the actual navigation bar*/
#nav-bar {
background-color: rgb(248, 234, 203);
height: 80px;
width: 100%;
padding: 0px 20px 0px 50px;
z-index: 1000;
position: fixed;
top: 0;
width: 100%;
transition: 0.6s;
}
/*aligning the nav links on the right of the header image*/
nav ul {
float: right;
padding: 0px 20px;
}
/*aligning the links to become horizontally aligned next to each other*/
nav ul li {
display: inline-block;
padding: 25px 10px 5px 50px;
margin-left: 0px;
}
/* customizing appearance of nav-links when hovered*/
.nav-link:hover, nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
transition: .5s;
color: white;
}
/* customizing nav-link when focused or clicked */
.nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
color: white;
}
/* customizing the three bars, making it invisible if in default full page view */
.check-bar {
font-size: 2.5rem;
color: #BF8D7A;
float: right;
cursor: pointer;
margin-right: 5px;
line-height: 80px;
display: none;
}
/*making the checkbox invisible, this checkbox is used as a condition later, that when checked itll make the navlinks appear in a a specific media query*/
#check {
display: none;
}
body, html {
height: 100%;
}
.products-container {
background: #f6f7e9;
padding: 50px 80px;
}
#sections {
font-family: 'Open Sans', sans-serif;
text-align: center;
width: 45%;
font-weight: 800;
font-size: 4rem;
margin: 0 auto;
text-transform: uppercase;
font-weight: lighter;
color: rgba(54, 46, 39, 0.5);
width: 100%;
text-align: center;
border-bottom: 1px solid rgba(54, 46, 39, 0.1);
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background: #f6f7e9;
padding: 0 10px;
}
#media (max-width: 792px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 175px;
max-height: auto;
}
}
#media (max-width: 712px){
.nav-link{
font-size: 1.2rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
}
#media (max-width: 675px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -30px;
}
}
#media (max-width: 675px){
.nav-link{
font-size: 1.1rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -40px;
}
}
/*configure what happens when you click three bars*/
#media (max-width: 500px){
.check-bar{
display: block;
}
/*center the logo , not yet done */
#header-img {
max-width: 200px;
max-height: auto;
display: block;
margin: auto;
}
ul{
position: fixed;
width: 100%
height: 100vh;
top: 80px;
/*when three bars are clicked the left bottom right values makes the whole ul disappear*/
left: -100%;
bottom: -100%;
right: 100%;
text-align: center;
background: rgba(255, 214, 170, 0.9);
transition: all .5s;
/* for stack, this makes the ul box in front of the parallax image since its z index is greater than the parallax*/
z-index: 2;
}
nav ul li {
display: block;
padding: 20px;
}
.nav-link {
font-size: 1.6rem;
font-weight: bold;
margin-left: 60px
}
#check:checked ~ul {
left: 0;
right: 0;
bottom: 0;
}
.nav-link:hover {
background: none;
color: #BF8D7A;
}
.parallax1 {
z-index: 1;
}
}
#media (max-width: 467px){
#header-img{
max-width: 190px;
}
.nav-link {
font-size: 1.6rem;
}
}
#media (max-width: 314px){
#header-img{
max-width: 200px;
margin: auto auto 0px auto;
padding-top: 10px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar {
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
#media (max-width: 271px){
#header-img{
max-width: 200px;
margin: auto auto 0px 0px;
padding-top: 5px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar{
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
#media (max-width: 251px){
#header-img{
max-width: 180px;
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
.nav-link {
font-size: 1.2rem;
}
#nav-bar {
padding-left: 8px;
}
.check-bar {
font-size: 1.8rem;
padding-top: 0px;
}
}
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<body>
<header id="header">
<nav id="nav-bar">
<input type="checkbox" id="check">
<label for="check" class="check-bar">
<i class="fas fa-bars"></i>
</label>
<img id="header-img" src="https://i.imgur.com/zxchwt8.gif">
<ul>
<li id="nav-links-list"><a class="nav-link" href="#the-products">products</a></li>
<li id="nav-links-list"><a class="nav-link" href="#featured" target=_blank>featured</a></li>
<li id="nav-links-list"><a class="nav-link" href="#pricing" target=_blank>pricing</a></li>
<li id="nav-links-list"><a class="nav-link" href="#contacts" target=_blank>contact</a></li>
</ul></nav></header>
<div class="parallax1">
<div class="heading2">
<span class="border">
<h1 id="slogan">Pamper your skin.</h1>
<h3 id="slogan-subheading">Cruelty-free, environmentally conscious, and organic. </h3>.
<span id="box"><h4 id="shop-now">SHOP NOW</h4></span
</div>
</div>
<div class="products-container">
<section id="the-products">
<h2 id="sections"><span>products</span></h2>
<div class="image-and-capt">
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/iSuRo4f.png" alt ="mock-up foundation">
<h3 id="product-name"> Foundation with SPF 50 </h3>
<p id="product-descrp"> Medium-coverage, long-lasting, and available in 50 shades.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/KSXpO9w.png" alt="moisturizer">
<h3 id="product-name"> Moisturizer for All Skin Types</h3>
<p id="product-descrp"> Nourishing and brightening, reduces appearance of fine lines and wrinkles.
</div>
</div>
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/cqzlfal.png" alt ="mock-up tinted moisturizer">
<h3 id="product-name"> Tinted Moisturizer </h3>
<p id="product-descrp"> Light-coverage with 50 shades, nourishing and brightening.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/UdInLk3.png" alt ="mock-up face wash">
<h3 id="product-name"> Facewash </h3>
<p id="product-descrp"> Gentle and hydrating facewash, thourougly cleanses dirt, make-up and sebum.</p>
</div>
</div>
</section>
</div>
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class"vid-container">
<iframe class="vid-container-iframe" src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560" height="315" frameborder="0"></iframe>
</div>
</section></div>
<section id="pricing">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
<section id="contact">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
</div>
</header>
</body>
Your code is a mess to be honest. You have multiple div without closing tag,p without closing tags,
also some = are missing while declaring classes in your html code.
First go through your code, make sure that every single tag has a closing tag, after that continue with your video because if you dont fix these things, then your responsivity will be broken because of those unclosed tags.
Have a look into that, i have fixed the video so now it is under your featured section, you just have to play around with it to make it responsive after you closed every unclosed tag.
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class="vid-container">
<iframe class="vid-container-iframe"
src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560"
height="315" frameborder="0"></iframe>
</div>
</div>
</section>
Not sure why I am unable to butt the .png image to the border of the container. I have tried everything. Padding, margin, position, and the image does not move down. I even tried moving the image out of the container but that would add too much extra work and script. I am hoping someone can help me here. I was unable to load the code. It's a document with HTML and CSS. The image is a class within a div. Any help would be wonderful. I am unable to load the image as well.
file:///Users/suzannehunter/Desktop/web%20development/CSS-My%20Site/index.html
Give your parent div position relative and the child position absolute. Then you specify on with side the image is going to overlap the border. if the left side use left: -5px(the negative value of the border thickness), or right: for the right side.
<div style="background:red;border:5px solid black;position: relative;height: 200px;width: 100px;">
<div style="background: blue;height: 50px;width: 50px;position: absolute;right: -5px;"></div>
</div>
Thank you so much for your response, I tried changing the position's like you stated. The Parent was already (top container) was already relative. When I changed the child (img of boxer) absolute it stays fixed and doesn't float with the rest of the children within the Parent. Do I add Float? Placement is another matter. I will try once again to include the code. Wouldn't let me add the code and the image last time. How do you add the code or won't they allow it?[
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>AnimalKrate</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Open+Sans+Condensed:wght#300&family=Raleway&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img class="top-bone" src="images/bone.png" alt="bone-img">
<h1>AnimalKrate</h1>
<h2><span class="pet">PET</span> source for everything</h2>
<img class="bottom-bone" src="images/bone.png" alt="bone">
<img class="boxer" src="images/boxer.png" alt="boxer-img">
</div>
<div class="middle-container">
<div class="profile">
<img src="images/pawprint.png" alt="pawprint" style = "padding-top:25px">
<h2 style="margin-bottom:5px;">Woof</h2>
<p class="intro">We are your source for everything a pet lover loves. Buying and selling only the most sought after specialty items.</p>
</div>
<hr>
<div class="skills">
<h2>Pet Toys</h2>
<div class="skill-row" style="margin-top: 30px;">
<img class="dog-ball" src="images/dog-ball.png" alt="dog-ball">
<h3>Lorem & Ipsum</h3>
<p>Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros.</p>
</div>
<div class="skill-row" style= "margin-bottom: 50px;">
<img class="dog-toy" src="images/dog-toy.png" alt="dog-toy">
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu, rutrum nam.</p>
</div>
</div>
<hr>
</div>
<div class="bottom-container">
<div class="contact-me">
<h2 style = "padding-top: 25px;">Get In Touch</h2>
<h3>Lorem ipsum dolor sit amet, non elit.</h3>
<p class="contact-message">Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
<a class="myButton">Contact Me</a>
</div>
<a class="footer-link" href="https://www.chewy.com/">Chewy</a>
<a class="footer-link" href="https://www.krisers.com/">Krisers</a>
<a class="footer-link" href="https://www.petsmart.com/">Petsmart</a>
<p class="copyright">© 2018 Hunter.</p>
</div>
</div>
</body>
</html>
]1
body{
color: #405143;
margin: 0;
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
h1{
color: #5b5b5b;
font-size: 60px;
margin: 50px auto 0 auto;
font-family:'Fredoka One', cursive;
}
h2 {
color: #5b5b5b;
font-family: 'EB Garamond', serif;
font-size: 2rem;
font-weight: normal;
margin-top: 25px;
}
h3 {
color:#794646;
font-family: 'open sans condensed';
font-weight:bolder;
}
a{
color: #794646;
font-family: 'EB Garamond', serif;
margin: 5px 5px;
text-decoration: none;
}
a:hover{
color: #5b5b5b;
}
p {
line-height: 1.5;
}
.top-container {
background-color: #d8c292;
position:relative;
padding-top: 20px;
}
.middle-container{
}
.bottom-container{
background-color: #c19065;
position: relative;
padding-bottom: 25px;
}
.pet {
text-decoration: underline;
}
.bottom-bone{
position: absolute;
left: 150px;
bottom: 300px;
}
.top-bone{
position: absolute;
right: 200px;
top: 150px;
}
.contact-message {
width: 40%;
margin: 20px auto 30px;
}
.copyright{
font-size: 1rem;
padding:20px 0px;
}
.skill-row{
width: 50%;
margin: 100px auto 100px auto;
text-align: left;
}
.intro {
width:30%;
margin: auto;
}
.pawprint {
width: 25%;
}
.dog-ball {
width: 35%;
float: left;
margin-right: 30px;
}
.dog-toy {
width: 35%;
float: right;
margin-left: 30px;
}
hr{
margin-top:40px;
margin-bottom: 40px;
border-style: none;
border-top-style: dotted;
border-color: grey;
border-width:5px;
width: 5%;
}
.style {
margin-top:30px;
}
.boxer{
}
.myButton {
margin-bottom: 20px;
box-shadow: 0px 1px 0px 0px;
background-color:#eae0c2;
border-radius:6px;
border:1px solid #333029;
display:inline-block;
cursor:pointer;
color:#505739;
font-family: 'Arial';
font-size:14px;
font-weight:bold;
padding:9px 10px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
background-color:#ccc2a6;
}
.myButton:active {
position:relative;
top:1px;
}
body{
color: #405143;
margin: 0;
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
h1{
color: #5b5b5b;
font-size: 60px;
margin: 50px auto 0 auto;
font-family:'Fredoka One', cursive;
}
h2 {
color: #5b5b5b;
font-family: 'EB Garamond', serif;
font-size: 2rem;
font-weight: normal;
margin-top: 25px;
}
h3 {
color:#794646;
font-family: 'open sans condensed';
font-weight:bolder;
}
a{
color: #794646;
font-family: 'EB Garamond', serif;
margin: 5px 5px;
text-decoration: none;
}
a:hover{
color: #5b5b5b;
}
p {
line-height: 1.5;
}
.top-container {
background-color: #d8c292;
position:relative;
padding-top: 20px;
}
.middle-container{
}
.bottom-container{
background-color: #c19065;
position: relative;
padding-bottom: 25px;
}
.pet {
text-decoration: underline;
}
.bottom-bone{
position: absolute;
left: 150px;
bottom: 300px;
}
.top-bone{
position: absolute;
right: 200px;
top: 150px;
}
.contact-message {
width: 40%;
margin: 20px auto 30px;
}
.copyright{
font-size: 1rem;
padding:20px 0px;
}
.skill-row{
width: 50%;
margin: 100px auto 100px auto;
text-align: left;
}
.intro {
width:30%;
margin: auto;
}
.pawprint {
width: 25%;
}
.dog-ball {
width: 35%;
float: left;
margin-right: 30px;
}
.dog-toy {
width: 35%;
float: right;
margin-left: 30px;
}
hr{
margin-top:40px;
margin-bottom: 40px;
border-style: none;
border-top-style: dotted;
border-color: grey;
border-width:5px;
width: 5%;
}
.style {
margin-top:30px;
}
.boxer{
}
.myButton {
margin-bottom: 20px;
box-shadow: 0px 1px 0px 0px;
background-color:#eae0c2;
border-radius:6px;
border:1px solid #333029;
display:inline-block;
cursor:pointer;
color:#505739;
font-family: 'Arial';
font-size:14px;
font-weight:bold;
padding:9px 10px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
background-color:#ccc2a6;
}
.myButton:active {
position:relative;
top:1px;
}
So i'm working on a nav bar which should be aligned horizontally, but it won't. If i try to use
display: inline-block;
and then
float: left;
the navbar collides with the rest of my divisions
Here's my code:
http://jsfiddle.net/0p287vmb/
Try this:
nav
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
}
nav
a:hover {
background-color: white;
display: inline-block;
}
I removed the commas because with commas it translates to nav & a. In your case removing it solves the problem also it overwrote the width of the nav that's why it doesn't seem to take up the whole width.
That's because you are overriding the width of the navbar in
nav,
a {
...
width: 200px;
...
}
and the display block here:
nav,
a:hover {
background-color: white;
display: inline-block;
}
Just move the navbar styling after nav,a:hover ..., and remove nav from the same place because you are also ovveriding the background color of the nav.
Also, on the last line it should be font-weight not text-weight.
* {
font-family: Verdana;
font-size: 14px;
margin: 0;
}
p {
padding 20px;
}
#wrapper {
width: 900px;
background-color: #ff3333;
margin: auto;
}
header {
background-color: #00c9fd;
width: 900px;
}
nav,
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
float: left;
}
a:hover {
background-color: white;
display: inline-block;
}
nav {
background-color: #cccccc;
width: 900px;
}
#bigimage {
width: 900px;
}
#bigimage,
p {
color: #00c9fd;
background-color: #ffffff;
font-size: 12px;
}
main {
width: 900px;
}
article {
background-color: #cccccc;
width: 900px;
}
#contact {
background-color: #cccccc;
width: 900px;
}
footer {
background-color: #00c9fd;
width: 900px;
}
header,
h1 {
padding: 20px 0px 5px 0px;
color: rgb(255, 255, 255);
font-size: 30px;
font-family: Impact;
text-weight: normal;
}
<div id="wrapper">
<header>
<h1>SUPERCOMPUTERS</h1>
</header>
<nav>
Home
Meer informatie
Tijdlijn
</nav>
<div id="bigimage">
<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
<p>
<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
at, dignissim faucibus eros.
</p>
</div>
<main>
<article>hoi1</article>
<article>hoi2</article>
<article>hoi3</article>
</main>
<div id="contact">hoi4</div>
<footer>hoi5</footer>
</div>
Your selector was wrong. You wrote nav, a which would mean to apply those styles to both nav and a elements. Infact you needed nav a which means to only apply those styles to a elements that are children of nav elements.
nav a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
float: left;
}
You should remove the width from nav tag.
* {
font-family: Verdana;
font-size: 14px;
margin: 0;
}
p {
padding 20px;
}
#wrapper {
width: 900px;
background-color: #ff3333;
margin: auto;
}
header {
background-color: #00c9fd;
width: 900px;
}
nav {
background-color: #cccccc;
width: 900px;
}
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 5px 10px;
float: left;
}
nav,
a:hover {
background-color: white;
display: inline-block;
}
#bigimage {
width: 900px;
}
#bigimage,
p {
color: #00c9fd;
background-color: #ffffff;
font-size: 12px;
}
main {
width: 900px;
}
article {
background-color: #cccccc;
width: 900px;
}
#contact {
background-color: #cccccc;
width: 900px;
}
footer {
background-color: #00c9fd;
width: 900px;
}
header,
h1 {
padding: 20px 0px 5px 0px;
color: rgb(255, 255, 255);
font-size: 30px;
font-family: Impact;
text-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_new.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>SUPERCOMPUTERS</h1>
</header>
<nav>
Home
Meer informatie
Tijdlijn
</nav>
<div id="bigimage">
<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
<p>
<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
at, dignissim faucibus eros.
</p>
</div>
<main>
<article>hoi1</article>
<article>hoi2</article>
<article>hoi3</article>
</main>
<div id="contact">hoi4</div>
<footer>hoi5</footer>
</div>
</body>
</html>
everyone.
I'm having a problem with responsive layout. On big screen everything looks fine, the problems emerge when I resize the browser. My navigation doesn't stretch in full width, even though Its width is 100%.
html for nav:
<header>
<div class="navigation">
<h3>lorem<span class="bold">ipsum</span></h3>
<div class="logo">
<h3>your<span class="red">logo</span></h3>
</div>
<div class="nav">
<ul>
<li class="active close">Home</li>
<li class="subMenuToggle">About us</li>
<li>Our work</li>
<li>Our process</li>
<li>Our people</li>
<li>Social</li>
<li>Get in touch</li>
<li><span>Hire</span></li>
<li><span>Careers</span></li>
</ul>
</div>
</div>
<div class="subMenu">
<div class="subNav">
<ul>
<li class="active2">WHAT WE DO</li>
<li>PEOPLE</li>
<li>SERVICES</li>
<li>CONTACT</li>
<li>VALUES</li>
</ul>
</div>
</div>
And, SCSS:
.navigation {
width: 100%;
height: 70px;
background: white;
.nav {
float: right;
margin-top: 10px;
box-sizing: border-box;
ul {
margin: 32 0;
li {
display: inline-block;
margin-right: 30px;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
height: 38px;
font-family: 'Open Sans', sans-serif;
transition: all 200ms ease-in;
span {
color: gray;
}
a {
color: inherit;
display: inline-block;
height: 40px;
text-decoration: none;
}
&:active {
border-bottom: 4px solid rgb(185, 151, 106);
color: rgb(185, 151, 106);
}
}
.active {
border-bottom: 4px solid rgb(185, 151, 106);
color: rgb(185, 151, 106);
}
}
}
Also, images are doing the opposite, they go beyond to view port, so you need to scroll in order to see full width. Since all images are done the same way, he's a one example:
HTML:
<div class="container">
<div class="section1">
<img src="Assets/img/Header/Header.PNG" alt="header1">
<div class="contentBox1">
<p class="kicker2">Sed ut Perspiciatis</p>
<h2>Nemo Enim</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis feugiat risus nec scelerisque. Sed sagittis magna quis sodales convallis. In convallis nec lacus sed fermentum. Integer ultrices felis ac quam commodo, a viverra enim condimentum. Praesent gravida magna in aliquet luctus.</p>
<button type="button" class="cta1">AT VERO EROS</button>
</div>
<div class="contentBox2">
<h2>QUIS AUTEM VEL<br> EUM DOLOR</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis feugiat risus nec scelerisque. Sed sagittis magna quis sodales convallis.</p>
</div>
<div class="ImageBox1">
<img src="Assets/img/Header/img1.PNG" alt="img1">
</div>
</div>
</div>
and CSS:
.container {
margin: 0 auto 395px;
width: 1210px;
#include clearfix;
.section1 {
width: 1210px;
position: relative;
img {
width: 100%;
height: 480px;
z-index: -1;
}
.contentBox1 {
position: absolute;
width: 450px;
height: 543px;
background: white;
bottom: -270px;
left: 65px;
z-index: 1;
p.kicker2 {
margin: 80px 0 0 90px;
text-transform: uppercase;
color: $ThemeColor;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
h2 {
margin: 18px 0 32px 90px;
text-transform: uppercase;
font-size: 45px;
font-family: 'Droid Serif', serif;
}
p {
margin: 0 50px 0 90px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
color: grey;
}
.cta1 {
background: white;
color: black;
font-size: 14px;
font-weight: bold;
justify-content: center;
width: 235px;
height: 60px;
border: 2px solid black;
margin: 37px 0 0 90px;
font-family: 'Open Sans', sans-serif;
&:hover {
cursor: pointer;
background: rgb(233, 233, 233);
}
&:active {
position: relative;
top: 1px;
}
}
}
.contentBox2 {
position: absolute;
width: 270px;
height: 274px;
background: rgb(40, 40, 40);
bottom: -270px;
left: 515px;
z-index: 1;
h2 {
color: $ThemeColor;
margin: 40px 0 18px 37px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
p {
color: rgb(153, 153, 153);
margin: 0 56px 0 37px;
font-size: 17px;
font-family: 'Open Sans', sans-serif;
}
}
.ImageBox1 {
img {
position: absolute;
width: 180px;
height: 182px;
bottom: -270px;
left: 965px;
z-index: 6;
}
}
}
It really drives me crazy. Also, why when I make a media query, for example, for (max-width: 700px), it starts to effect page much sooner, like around 1000px? It's like it's not in sync. This whole responsive layout gives me a headache...
Sorry for a long post...
P.S.
If you wanna see whole code, here's a gitHub reppo: https://github.com/Vukasin90/test
#media screen and (max-width: 770px) {
body {
min-width: 770px; }
body .navigation {
width: 100vh; /* <----- here*/
height: 70px;
background: white;
}
I think this might be an issue. Your navigation width has value in viewheight instead of viewwidth is that intentional?
Currently working on adding a page to a website, and what I want to do is make boxes appear in HTML on my site.
I've looked through the HTML and CSS and there does not seem to be any issues with formatting, syntax, etc. So, my question is why won't the boxes appear?
I'm trying to do something similar to this here:
CodePen Example
.
This is my HTML & CSS for the page
Website HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Projects</title>
<!-- Custom styles for this template -->
<link href="css/main.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="inner">
<h3 class="masthead-brand">FV4</h3>
<ul class="nav masthead-nav">
<li class="active">About Me</li>
<li class="active">Contact</li>
<li class="active">Projects</li>
</ul>
</div>
<div class="mainContent">
<div class="box">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.</p>
</div>
<div class="box">
<h2>Title 2</h2>
<div class="box-banner"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box">
<h2>Title 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.</p>
</div>
<div class="box">
<h2>Title 4</h2>
<div class="box-banner"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box">
<h2>Title 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.</p>
</div>
<div class="box no-text">
<h2>Title 6</h2>
<div class="box-banner"></div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
<script src="../../scripts/scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Website CSS
/*
* Globals
*/
#import 'http://fonts.googleapis.com/css?family=Open+Sans:400,700';
.mainContent{
perspective: 80em;
width: 960px;
margin: 0 auto;
}
.box{
float:left;
position: relative;
display: inline;
width: 300px;
height: 180px;
background: #FFFFFF;
box-sizing: border-box;
padding: 15px;
margin: 10px;
box-shadow: 0px 0px #shadowBlurRadius fade(#page-background-main-color, 35%);
opacity: 0;
}
h2 {
margin: 0;
margin-bottom: 10px;
}
p {
margin: 0;
}
.box-banner{
background: #CCCCCC;
height: 80px;
margin: 0px -15px;
margin-bottom: 6px;
background-position: center center;
}
&.no-text .box-banner{
height:129px;
}
.toolbar{
position: absolute;
display:block;
z-index:999;
top: 0px;
right: 0px;
width:100%;
transform:scale(0);
}
.btn{
font-size:1.5em;
font-weight: 700;
text-decoration:none;
background: rgba(0,0,0,0.4);
padding: 0px 10px 4px 10px;
color: lighten(#page-background-main-color, 10%);
display:block;
&.left {
float:left;
font-weight:400;
}
&.right{
float:right;
}
}
a,
a:focus,
a:hover {
color: #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: white;
}
body {
color: black; /*#bf0a0a*/
text-align: center;
text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 200px rgba(0,0,0,.5);
box-shadow: inset 0 0 200px rgba(0,0,0,.5);
}
/* Padding for spacing */
.inner {
padding: 30px;
}
.headshot{
width: 25%; /* you can use % */
height: auto;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8 proofing */
color: black;
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:focus {
color: black;
border-bottom-color: #bf0a0a;
}
.masthead-nav > .active > a:hover {
color: #bf0a0a;
border-bottom-color: black;
}
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
/*
* Affix and center
*/
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
a .fa:hover{
color: white;
}
/* HyperLink Style */
a:link {
color: #BF0A0A;
text-decoration: none;
}
a:visited {
color: #87CEEB;
text-decoration: none;
}
a:hover {
color: #780078;
text-decoration: none;
}
a:active {
color: #FF0000;
text-decoration: none;
}
/* End HyperLink Style */
And this is the only thing that appears when I open the index.html in my browser:
Have you tried removing opacity:0 from your .box css?
http://codepen.io/anon/pen/EaopWv
.box{
float:left;
position: relative;
display: inline;
width: 300px;
height: 180px;
background: #FFFFFF;
box-sizing: border-box;
padding: 15px;
margin: 10px;
box-shadow: 0px 0px #shadowBlurRadius fade(#page-background-main-color, 35%);
/*opacity: 0;*/
}
I have run the code using HTML and CSS files attached.
Problem is with css file. In .box css declaration at line 27, opacity set to 0 because of which boxes are not visible. Change this to 1 and run the code again.
More about Opacity CSS:
http://css-tricks.com/almanac/properties/o/opacity/