I am creating a website, but when i try to scroll, the page stays fixed. I can see the scroll bar moving up and down but the page isn't moving. I changed the screen height and width but it didn't change anything. The only way the page actually scrolls the way it is supposed to is when I change the different sections I have on my page from "fixed" position to relative. When I change it to relative though, the entire screen gets distorted and everything gets out of place. My code basically consists of different sections, which are all in the fixed position(I am sure that the position is the problem) and inside the sections, I have text and images(all fixed position). How do I fix this?
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Home|Cloudberrie</title>
<style>
#top{
background-color:#E7E5DF;
height:3rem;
width:100%;
position:fixed;
top:0;
left:0;
z-index: -1;
}
#logo{
background-color:white;
height:3.5rem;
width:100%;
position:fixed;
z-index:-1;
top:48px;
left:0;
}
#banner{
background-color:white;
height:7rem;
width:100%;
position:fixed;
z-index:-1;
top:100px;
left:0;
}
.button{
border:none;
background-color:#1f88ca;
padding: 20px 40px;
font-size: 16px;
cursor: pointer;
display: inline-block;
border-radius:18px;
width:200px;
position:fixed;
top:400px;
left:100px;
color:white;
letter-spacing: 3px;
}
button:hover{
background-color:red;
}
#choose{
background-color:white;
height:30rem;
width:100%;
position:fixed;
z-index:-1;
top:550px;
left:0;
}
html {
height: 100%;
width: 100%;
overflow:auto;
padding-bottom:2000px;
}
</style>
</head>
<body >
<section id ="top">
<p style="position:fixed; right:1800px;bottom:880px;"><i class="fa fa-location-arrow" aria-hidden="true"></i> Plano, Texas</p>
<p style="position:fixed; right:1650px;bottom:880px;"><i class="fa fa-phone" aria-hidden="true"></i> (123) 456 7890</p>
<p style="position:fixed; right:1460px;bottom:880px;"><i class="fa fa-envelope" aria-hidden="true"></i> support#gmail.com</p>
</section>
<section id="logo">
<img src="berrylogo.png"height="25"width="25" style="position:fixed;left:10px;top:56px;">
<img src="cloudberie.png"height="30"width="150" style="position:fixed;left:40px;top:56px;">
<p style="position:fixed; right:350px;top:65px;">Home</p>
<p style="position:fixed; right:275px;top:65px;">About</p>
<p style="position:fixed; right:180px;top:65px;">Services</p>
<p style="position:fixed; right:110px;top:65px;">Client</p>
</section>
<section id ="banner">
<img src="banner-3.png"width="100%" height="450px">
<h1 style="font-family:sans-serif;color:#1f88ca;position:fixed; top:180px;left:100px;">MAIN TEXT</h1>
<p style="font-family:sans-serif;color:grey;position:fixed; top:250px;left:100px; font-size:40px;">Lorem ipsum dolor sit amet, consectetur </p><br><p style="font-family:sans-serif;color:grey;position:fixed; top:290px;left:100px; font-size:40px;">adipiscing elit, sed do eiusmod tempor.</p>
<button class="button">Learn More</button>
</section>
<section id="choose">
<p style="font-size:2.5rem;color:#5e5e5e;position:fixed;top:630px;text-align:center;left:760px;"> <b>WHY CHOOSE US</b></p>
<div style="width:80px;height:3px;border:1px; background-color:#25ace4;position:fixed;top:700px;left:890px;"></div>
<img src="why-us-pic.jpg"width="300px;"style="position:fixed;top:800px;left:425px;">
<p style="font-size:1rem;position:fixed;top:800px;left:800px;">At consectetur lorem donec massa sapien faucibus et molestie ac. Molestie ac feugiat sed lectus vestibulum. Faucibus pulvinar elementum integer enim. Eu consequat ac felis donec et odio. Ac ut consequat semper viverra nam libero justo laoreet sit. Condimentum vitae sapien pellentesque habitant morbi.</p>
</section>
</body>
</html>
Fixed elements do not move on page scroll. That is why they were made. So to fix it, do not set position to fixed. Here is position:fixed defined by MDN:
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
Here is an example of position:fixed:
for(let i=0;i<100;i++){
document.body.innerHTML+="<p>normal positioning</p>"
}
#fixed{
position:fixed;
}
<!DOCTYPE html>
<html>
<body>
<p id="fixed">fixed text</p>
</body>
</html>
Given the small amount of detail I have, I think what you are looking for is absolute instead of fixed. That being said, manual positioning of elements is generally not good practice. If this doesn't work try adding more information like code snippets and screenshots
Related
I am making a website for colleges and I have a gallery, but I cant get all the images to stay at their respective spots on the page when the window is resized. That's my main issue: when the window is resized, all the text and images on every page just covers each other and it's horrible. All my photos are absolute and have percents for left and top. I am modeling my website just like Elon Musk's the BORING COMPANY website. Is there any way someone could help me draft up some code to make my images on my pages not completely collapse when the window is resized?
The Boring Company Gallery I'm Trying to mimic, Also Try Resizing to see the effect I'd like
Here's my Portfolio page:
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="Style.css">
</head>
<body>
<title> Portfolio</title>
<div id="logo">
<img src=Myname.png" width=475px height=225px>
</div>
<table style="position:absolute;top:25%;z-index: 100;width:50%;left:25%;">
<tr>
<td><div id="nav">HOME</div></td>
<td><div id="nav">ABOUT ME</div></td>
<td><div id="nav">PORTFOLIO</div></td>
<td><div id="nav">EXTRACURRICULARS</div></td>
<td><div id="nav">GALLERY</div></td>
<td><div id="nav">CONTACT ME</div> </td>
</tr>
</table>
<div class="portfoliothumbnails" id="thumbnail1"><img src="Medicine.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle1">Lorem Ipsum</div>
<div class="portfoliotext" id="portfoliotext1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare lorem vitae tellus iaculis, id viverra mi pulvinar. Donec sodales commodo mi at commodo. Nullam placerat ut mauris ac maximus. Pellentesque accumsan blandit ante, in pellentesque enim fringilla sed. Nunc magna erat, bibendum et feugiat eu, consequat et leo. Cras commodo fringilla lectus, ut varius ex tempus eget. Duis ultricies, velit et tristique eleifend, velit arcu dignissim elit, sit amet mattis odio dolor ac est. Quisque accumsan convallis accumsan. Suspendisse ornare eros vel velit molestie porta. Fusce vitae euismod ante. Aenean vel justo at odio ornare finibus quis id mi. Integer congue magna non dui blandit, consectetur rhoncus lacus varius. Morbi vel massa orci. Suspendisse gravida lorem id elit mattis tincidunt.</div>
<button class="button" id="button1">Learn More</button>
<div class="portfoliothumbnails" id="thumbnail2"><img src="English.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle2">English Esssays/Documents</div>
<div class="portfoliotext" id="portfoliotext2">A collection of my essays and analysis responses throughout my high school career in Language Arts. </div>
<button class="button" id="button2">Learn More</button>
<div class="portfoliothumbnails" id="thumbnail3"><img src="Trends.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle3">Newspaper Publications</div>
<div class="portfoliotext" id="portfoliotext3">Some of my work in English class was published to the local township newspaper, and was framed by my parents in our living room.</div>
<button class="button" id="button3">Learn More</button>
<div class="portfoliothumbnails" id="thumbnail4"><img src="Art.jpg" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle4">Creative Work</div>
<div class="portfoliotext" id="portfoliotext4">Work from English and Art such as plays, poems, drawings, photoshop work, and other forms of creative literature. The majority of this section is populated by my work from the creative writing and journalism class, Writing for Publication, I took my freshman year and Digital Arts I from my sophomore year.</div>
<button class="button" id="button4">Learn More</button>
</body>
</html>
Here's my style:
#logo{position:absolute;
top:2.5%;
left:25%;}
body {
margin-left:25%;
margin-right:25%;
}
#nav{text-decoration:none;
font-size:15px;
font-family:Roboto, sans-serif;
color:black;}
a{text-decoration:none;}
* {box-sizing:border-box}
.slideshow-container {
max-width: 50%;
position: absolute;
margin: auto;
left:25%;
top:30%;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#headshot{position:absolute;
top:35%;
left:20%;}
#aboutmetitle{position:absolute;
top:45%;
left:25%;
font-family:Roboto, sand-serif;
color:black;
font-weight:bold;
font-size:25px;
margin-left:20%;
margin-right:25%;}
#aboutmetext{position:absolute;
top:50%;
left:25%;
font-family:Roboto, sand-serif;
color:black;
font-size:18px;
margin-left:20%;
margin-right:25%;}
#aboutmelazar{position:absolute;
top:85%;
left:15%;}
.portfoliothumbnails{position:absolute;}
#thumbnail1{left:25%;top:35%;}
#thumbnail2{left:25%;top:65%;}
#thumbnail3{left:25%;top:95%;}
#thumbnail4{left:25%;top:125%;}
.button{ background-color: black;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
padding: 10px 24px;
cursor: pointer;
font-family:Roboto, sans-serif;
position:absolute;
font-weight:bold;}
.button:hover{opacity:0.7;}
#button1{top:55%;left:55%;}
#button2{top:85%;left:55%;}
#button3{top:115%;left:55%;}
#button4{top:145%;left:55%;}
.portfoliotitles{position:absolute;
color:black;
font-size:16px;
font-weight:bold;
font-family:Roboto, sans-serif;}
#portfoliotitle1{top:35%;left:40%;}
#portfoliotitle2{top:65%;left:40%;}
#portfoliotitle3{top:95%;left:40%;}
#portfoliotitle4{top:125%;left:40%;}
.portfoliotext{position:absolute;
color:black;
font-size:16px;
font-family:Roboto, sans-serif;
margin-right:25%;
}
#portfoliotext1{top:40%;left:40%;}
#portfoliotext2{top:70%;left:40%;}
#portfoliotext3{top:100%;left:40%;}
#portfoliotext4{top:130%;left:40%;}
#image1{position:absolute;top:35%;left:7.5%;}
#image2{position:absolute;top:35%;left:40%;}
#image3{position:absolute;top:35%;left:65%;}
#image4{position:absolute;top:85%;left:12.5%;}
I'm really sorry for typing all this, here's my gallery if it matters...
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="Style.css">
</head>
<body>
<title>Gallery</title>
<div id="logo">
<img src="Me.png" width=475px height=225px>
</div>
<table style="position:absolute;top:25%;z-index: 100;width:50%;left:25%;">
<tr>
<td><div id="nav">HOME</div></td>
<td><div id="nav">ABOUT ME</div></td>
<td><div id="nav">PORTFOLIO</div></td>
<td><div id="nav">EXTRACURRICULARS</div></td>
<td><div id="nav">GALLERY</div></td>
<td><div id="nav">CONTACT ME</div></td>
</tr>
</table>
<div id="image1"><img src="\Personal Website 3.0\Gallery\A.jpg" height=450px width=600px></div>
<div id="image2"><img src="\Personal Website 3.0\Gallery\B.jpg" height=675px width=450px></div>
<div id="image3"><img src="\Personal Website 3.0\Gallery\C.jpg" height=450px width=600px></div>
<div id="image4"><img src="\Personal Website 3.0\Gallery\D.jpg" height=800px width=450px></div>
</body>
</html>
Try using Bootstrap, a CSS, HTML and JS library for building responsive websites.
You can download it and find docs and examples at https://getbootstrap.com
Basically it divides the view in 12 columns (it's called Grid system), and screens in 5 categories, xl (extra-large), lg (large), md (medium), sm (small), xs (extra-small); using CSS classes you can decide the number of columns to assing to each element depending on the screen and also column offsets between elements, using classes col-display-n
where display can be xl, lg, md, sm, xs and n an integer from 1 to 12 and offset-display-n for offsets.
I think this can be helpful for you. Here Grid system is explained better
I think this tutorial will help you to achieve what you want:
https://w3bits.com/css-masonry/
Generally using position:absolute cannot help you to achieve what you want. The only way to do it is by using position: absolute and to add width in percentages, but it would be an overkill, it would take you a lot of time to achieve it properly on all resolutions and in the end, using something like the link I sent you will get you the proper result faster
I want to do following:
A div containing an image 50x50 and text next to it of font 25px.
Image and text should align in middle.
The div containing image and text should align to center of it parent.
I tried the followint but it does not give the desired result.
What needs to be done?
http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float
<html>
<head>
<style>
img {
float: center;
}
</style>
</head>
<body>
<p align="center"><img src="w3css.gif" alt="W3Schools.com" width="50" height="50">
Lorem .</p>
</body>
</html>
Try this:
<p align="center"><img src="http://www.ifn-modern.com/skin/frontend/fortis/default/images/phone.png" alt="" width="50" height="50">
Lorem .</p>
p img{
display:inline-block;
vertical-align:middle;
margin-right:5px;
}
Here is jsfiddle link: https://jsfiddle.net/x376p83x/
You can do this with flexbox:
.parent {
height: 300px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: lightgrey;
}
p {
font-size: 25px;
}
<div class="parent">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.</p>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS1EcWaTLIwhn69VJFubIdi4cpn2MYbkYN8hvMk00abhBHoO5fTnjdTgLY" alt="W3Schools.com" width="50" height="50">
</div>
please check this plunker
https://plnkr.co/edit/wlIixTpqm2dUJnalb9b6?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Centered Div</h1>
<div class="parent-div">
<div class="child-div">
<span class="my-text">Iam Centered centerd text very long Iam Centered centerd text very long</span>
<img src="test.svg" style="width:50px; height:50px;"/>
</div>
</div>
</body>
</html>
and CSS
/* Styles go here */
.parent-div{
background:green;
padding:10px;
}
.child-div{
display:table;
margin:0 auto;
text-align:center;
color:white;
}
.my-text{
max-width:200px;
display:inline-block;
}
Generally speaking, you would use text-align: center on the parent container.
http://www.w3schools.com/cssref/pr_text_text-align.asp
You can also achieve this using margins, i.e. margin: 0 auto
where '0' is your vertical margins, and 'auto' calculates the horizontal margins automatically - thus positioning your element in the centre.
For your use case, I'd suggest text-align.
try this
html
<p class="cetner"><img src="http://www.planwallpaper.com/static/images/butterfly-hq-wallpaper_09354994_256.jpg" alt="image" width="50" height="50">
Lorem .</p>
css
p.cetner {
width: 100px;
height: 50px;
text-align: center;
}
img {
display:inline-block;
vertical-align:middle;
}
I'm trying to move the class .column below 50px, but margin-top: 50px moving along with the #section. Why is that and how it can be fixed?
*{ padding:0; margin:0; }
body { width:100%; font-family:"Source Sans Pro" }
#section { height:400px; background-color:#383838; color:White; }
span { font-size:40px; }
.column { width: 300px; border: 2px solid yellow; margin-left:40px; margin-top:50px; }
<html>
<head>
<title>Breadth</title>
<link rel="Stylesheet" type="text/css" href="breadth.css" />
<link href="fonts.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
<div id="main">
<div id="section">
<div class="column">
<span class="icon icon-cogs"></span>
<h2>Maecenas lectus sapien</h2>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
You can apply padding-top: 50px to #section rather than margin-top to .column
Referring from Mozilla Documentation:
If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
Read about Margin Collapsing for more details.
*{ padding:0; margin:0; }
body{ width:100%; font-family:"Source Sans Pro" }
#section{height:400px; background-color:#383838; color:White; padding-top: 50px; }
span{ font-size:40px; }
.column{ width: 300px; border: 2px solid yellow; margin-left:40px;}
<html>
<head>
<title>Breadth</title>
<link rel="Stylesheet" type="text/css" href="breadth.css" />
<link href="fonts.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
<div id="main">
<div id="section">
<div class="column">
<span class="icon icon-cogs"></span>
<h2>Maecenas lectus sapien</h2>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
If you want to use margin-top then give display:block to parent div and display:inline-block to child div.
See here
Fore more info read here
Edited CSS
*{ padding:0; margin:0; }
body{ width:100%; font-family:"Source Sans Pro" }
#section{height:400px; background-color:#383838; color:White;display:block; }
span{ font-size:40px; }
.column{ width: 300px; border: 2px solid yellow; margin-left:40px; margin-top:50px;display:inline-block;}
You should use padding-top for #section like in the fiddle and remove margin-top from child. Since margins will collapse to each other, it's better not to use it for positioning elements. refer this: Margin goes outside div when border is removed
#section {
padding-top: 40px;
...
}
Another approach is use the same code but add overflow:auto to #section like this:
#section {
overflow:auto;
...
}
There's another solutions too like using border on parent, but these are more like hacks since we used margins for positioning.
*{ padding:0; margin:0; }
body { width:100%; font-family:"Source Sans Pro" }
#section { height:400px; background-color:#383838; color:White; padding-top:50px;}
span { font-size:40px; }
.column { width: 300px; border: 2px solid yellow; margin-left:40px; }
<html>
<head>
<title>Breadth</title>
<link rel="Stylesheet" type="text/css" href="breadth.css" />
<link href="fonts.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
<div id="main">
<div id="section">
<div class="column">
<span class="icon icon-cogs"></span>
<h2>Maecenas lectus sapien</h2>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
My horizontal align (justify-content: center) is not working on one of my sections. When I take the paragraph elements out everything seems to work fine, any help would be appreciated! Thank you.
Here is the code:
https://jsfiddle.net/vfo5urd4/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Wed, 30 Dec 2015 06:31:18 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>St Philips</title>
<link rel="stylesheet" type="text/css" href="stphilipscss.css">
<link href='https://fonts.googleapis.com/css? family=Open+Sans:400,300,700,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:700' rel='stylesheet' type='text/css'>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!--HEADER HEADER HEADER HEADER HEADER HEADER HEADER-->
<header>
<h4 id="textlogo">ST PHILIPS NERI</h4>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!--HEADER HEADER HEADER HEADER HEADER HEADER HEADER-->
<!--SECTION1 SECTION1 SECTION1 SECTION1 SECTION1 SECTION1-->
<section id="section1">
<article>
<h1><i>I am the way,</i> the truth, and the life.</h1>
</article>
<button type="button">Come in</button>
</section>
<!--SECTION1 SECTION1 SECTION1 SECTION1 SECTION1 SECTION1-->
<section id="section2">
<article>
<h1>You're Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut posuere dui. Praesent nisl ante, dapibus eget dolor in, imperdiet pharetra tellus. Aliquam euismod hendrerit massa, sit amet interdum risus accumsan ac. In commodo varius felis, quis feugiat tellus tempor quis.</p>
<p>Donec gravida mauris lacinia, pellentesque nisl nec, vestibulum tellus. Maecenas non varius ligula. Ut sit amet leo quis orci porttitor posuere eget vel ex. Fusce sit amet purus ac eros venenatis efficitur nec eu tortor. </p>
</article>
</section>
</body>
</html>
body{
margin:0px;
/*overflow:hidden;*/
}
header{
display:flex;
align-items:center; /* align vertical */
padding-top:10px;
padding-bottom:10px;
position:fixed;
width:100%;
z-index:1000;
background-color:white;
border-bottom-width:1px;
border-color:#e5e5e5;
border-bottom-style:solid;
justify-content:space-between;
}
#textlogo{
margin:0px;
color:#191919;
font-family: open-sans, sans-serif;f;
font-weight:700;
display:inline-block;
margin-left:100px;
font-size:17px;
visibility:hidden;
}
nav{
margin-right:100px;
}
nav li{
display:inline;
padding:10px;
}
a{
color:#191919;
list-style-type:none;
text-decoration:none;
font-family: 'Open Sans', sans-serif;
font-weight:400;
font-size:15px;
}
#section1{
height:667px;
background- image:url("http://i300.photobucket.com/albums/nn18/ojijimanuel/2560x1440_cobble_ stones_zpsy5twolwx.jpg");
background-repeat:no-repeat;
background-size:100%;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
#section1 article h1{
color:white;
font-size:63px;
font-family: 'open sans', serif;
font-weight:700;
margin-bottom:100px;
padding-top:150px;
margin-left:100px;
margin-right:100px;
}
button{
background-color:transparent;
color:white;
border-color:white;
border-style:solid;
font-size:25px;
border-width:1px;
font-family:'Open Sans';
font-weight:300;
padding-left:30px;
padding-right:30px;
padding-top:10px;
padding-bottom:10px;
cursor:pointer;
}
#section2{
height:600px;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}
h1 i{
font-family: 'Playfair Display', serif;
}
My horizontal align (justify-content: center) is not working on one of my sections.
There are two sections in your code. I'll address both.
In #section1, the flex container has flex-direction: column. This means the main axis is vertical.
The justify-content property works along the main axis, so in this case you would use justify-content for vertical, not horizontal, alignment.
For horizontal alignment in column direction use align-items, align-content and align-self, which work along the cross-axis.
Learn more about main-axis / cross-axis and flex alignment properties here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
In #section2, justify-content: center is working fine. The problem is the flex item occupies the full width of the container, so there's no larger space in which to center.
To see what I mean, give the flex item (article) a width: 50%: Revised Demo
I'm rying to create a website with only horizontal scrolling. Please take a look at this demo. My problem is when I resize the browser, the content(the paragraph inside the light yellow box) doesn't reposition. I want that paragraph to be positioned above the yellow ring segment. How can I do that?
Below is my code.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body>
<div id="container">
<img id="backimage" src="images/rings.png" />
<div id="info">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubia
</p>
</div><!-- end of info -->
</div><!-- end of container -->
</body>
</html>
CSS
a { text-decoration:none; }
li {list-style-type:none; }
body { overflow-y:hidden; }
#container {
position:absolute;
height:100%;
width:10000px;
background-color:#FC9;
}
#info {
position:absolute;
width:200px;
height:220px;
background-color:#FFC;
top:180px;
left:250px;
}
#backimage {
position:absolute;
height:100%;
background-size:cover;
bottom:0;
}
I tried setting #info's position as relative but when I do that, it disappears from the page.
what would you like to happen with the content? cause with the current parameters it doesnt matter if the position is relative or absolute, it will stay 180px down and 250px in from backimage upper left corner... also its size won't change.
You are defining every position as absolute. This is not a good solution. Instead you should use relative layouts. They may be a bit more complicated and not as "free", but they do solve most of the problems. Delete backImage and container from you HTML and do something like this:
a { text-decoration:none; }
li {list-style-type:none; }
body {
overflow-y:hidden;
background:url(images/rings.png);
background-color:#FC9;
}
#container { //body is the container. You dont need something like this in this case.
}
#info {
background-color:#FFC;
//width and height are dynamic to the size of content
margin-top:180px; //You just set the margin (outer gap) instead of the position.
margin-left:250px;
}
#backimage { //You don't need a back-image if you use background:url(...) in body
}
If you want the outer gap of the box to get smaller if window is smaller use percentages with margin.
If you want to limit the size of information div use max-width:xyz;
As I read in your comment to the other answer you want the div be over a specific part of the background. You can achieve this with background-position.