I am working on web application using Rect JS and I only have beginners knowledge in HTML and CSS.So can you please suggest me to achieve something like the following with a responsive UI that containing button,text and image.How can I write css styles to curve a div and place another one below it without any blank space.
Can someone please suggest any solution? Any help would be really appreciated.I have tried radial-gradient method like following.
<div className="background1">
....
</div>
<div className="background2">
.....
</div>
.background1 {
width: 100%;
background: radial-gradient(120% 800px at 50% -30px, red 75%,
transparent 75%) no-repeat;
z-index: 2;
position:relative;
margin-bottom: 0px;
}
.background2 {
background-color: #202492;
width: 100%;
background: radial-gradient(120% 800px at 50% -30px,blue 75%,
transparent 75%) no-repeat;
position: relative;
z-index: 1;
margin-top: -50px;
}
But I am getting this
Blockquote
I think you need something like this:
.btn1 {
background: #190b0b;
color: #fff;
padding: 1em 2.5em;
box-shadow: 1px 2px 7px -1px #190b0b;
}
.background1 {
width: 100%;
background: red;
z-index: 2;
position: relative;
margin-bottom: 0px;
padding: 6em 0;
border-radius: 0 0 10em 10em;
text-align: center;
}
.background2 {
background-color: #202492;
z-index: 1;
position: relative;
margin-bottom: 0px;
padding: 6em 0;
border-radius: 0 0 10em 10em;
text-align: left;
width: 100%;
top: -10em;
color: #fff;
}
.background3 {
background-color: blue;
z-index: 0;
position: relative;
margin-bottom: 0px;
padding: 6em 0;
border-radius: 0 0 10em 10em;
text-align: left;
width: 100%;
top: -20em;
color: #fff;
}
.text {
margin-top: 6em;
max-width: 50%;
padding: 0 6em;
}
<div class="background1">
<button class="btn1">Button</button>
</div>
<div class="background2">
<div class="text">
<h2> Text1 </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, nibh sed tempus bibendum, lacus turpis dictum ipsum, nec consectetur diam nisi eget mauris. </p>
</div>
</div>
<div class="background3">
<div class="text">
<h2> Text2 </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, nibh sed tempus bibendum, lacus turpis dictum ipsum, nec consectetur diam nisi eget mauris. </p>
</div>
</div>
Just change in border-radius and padding values to have the perfect curve that you want.
You can use border-bottom-left-radius and border-bottom-lright-radius or border-radius: 0px 0px xxxpx xxpx;
div {
height: 300px;
width: 300px;
border-bottom-right-radius: 200px;
border-bottom-left-radius: 200px;
background: black;
}
<div></div>
Related
Not sure if flexbox is the correct way of going about this, but basically I am looking for a 2 column flexbox.
In the first part I want to put random text in and the width of this part will adapt and become the same size as the text (whatever the text is).
The second part is a dotted hr line, which I want it to basically take up whatever space is remaining on the right-hand side.
Then there'll be a 16px gap in between. Is this the correct way to go about it? Where am I going wrong?
Thanks for any help, much appreciated !
what i want to happen
Edit: Thanks to everyone who answered, they all worked great tbh, but the solution I chose allowed for some extra flexibility. Again, appreciate everyones time, I don't have enough 'reputation' to upvote everybody! =)
body {
font-family: Montserrat;
background-color: #f0f0f0;
color: #34363e;
}
.main {
height:100%;
width: 100%;
padding: 64px 0;
}
.container {
height:100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 32px 16px;
margin: 0;
width: 1136px;
gap: 16px;
}
.h2-box {
width: 100%;
}
h2 {
text-align: left;
font-size: 27px;
margin: 0;
}
.hr-box {
width: 100%;
}
hr {
border: none;
border-top: 4px dotted #cccccc;
width: 100%;
height: fit-content;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}
<div class="main">
<div class="container">
<div class="h2-container">
<div class="h2-box"><h2 class="">This is a title sentance</h2></div>
<div class="hr-box"><hr></div>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>
There are a couple of issue with the implementation. You are heading to the right direction but just need a little bit of a tweak
First of all, remove the width 100% on the h2-box and the dot box.
Add flex-grow: 1; to the dot box and you are good. This will force the element to span the rest of the remaining width.
I am not sure what is expected if your title is more than 1 line long but something to think about for you.
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
Not sure if you meant to set inline-flex, but display flex works just fine.
flex-direction defaults to row so this is not needed
flex-wrap defaults to nowrap so this is also not needed
I am also unsure where you want the dotted line with regards to the title on the left but you can align that vertically with ease using align-items. I have used this in the example below to align the dots to the bottom using align-items: flex-end;
body {
font-family: Montserrat;
background-color: #f0f0f0;
color: #34363e;
}
.main {
height:100%;
width: 100%;
padding: 64px 0;
}
.container {
height:100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: flex;
padding: 0 32px 16px;
margin: 0;
width: 1136px;
gap: 16px;
align-items: flex-end;
}
h2 {
text-align: left;
font-size: 27px;
margin: 0;
}
.hr-box {
flex-grow: 1;
}
hr {
border: none;
border-top: 4px dotted #cccccc;
width: 100%;
height: fit-content;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}
<div class="main">
<div class="container">
<div class="h2-container">
<div class="h2-box"><h2 class="">This is a title sentance</h2></div>
<div class="hr-box"><hr></div>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>
Remove width: 100%; on .h2-box and use either flex: none; or flex: 0 0 auto;.
body {
font-family: Montserrat;
background-color: #f0f0f0;
color: #34363e;
}
.main {
height:100%;
width: 100%;
padding: 64px 0;
}
.container {
height:100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 32px 16px;
margin: 0;
width: 1136px;
gap: 16px;
align-items: center;
}
.h2-box {
flex: none;
/*flex: 0 0 auto;*/
}
h2 {
text-align: left;
font-size: 27px;
margin: 0;
}
.hr-box {
width: 100%;
}
hr {
border: none;
border-top: 4px dotted #cccccc;
width: 100%;
height: fit-content;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}
<div class="main">
<div class="container">
<div class="h2-container">
<div class="h2-box"><h2 class="">This is a title sentance</h2></div>
<div class="hr-box"><hr></div>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>
I have another solution... Choose what is better!
You can remove the after your . You will have only the class .h2-box to make the style of your title.
After, you can use the styles for .h2-box :
flex-basis: content;
white-space: nowrap;
width:100%;
The CSS Flexbox property flex-basis lets you specify the desired initial size of a flex item before downsizing or redistributing the remaining space in their Flexbox container.
So you'll have :
body {
font-family: Montserrat;
background-color: #f0f0f0;
color: #34363e;
}
.main {
height:100%;
width: 100%;
padding: 64px 0;
}
.container {
height:100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 32px 16px;
margin: 0;
width: 1136px;
gap: 16px;
}
.h2-box {
flex-basis: content;
white-space: nowrap;
width:100%;
}
h2 {
text-align: left;
font-size: 27px;
margin: 0;
}
.hr-box {
width: 100%;
}
hr {
border: none;
border-top: 4px dotted #cccccc;
width: 100%;
height: fit-content;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}
<div class="main">
<div class="container">
<div class="h2-container">
<h2 class="h2-box">This is a title sentance</h2>
<div class="hr-box"><hr></div>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>
Don't set any widths from .h2-container down, display: flex; will take care of that. Control the size of the flexbox by setting widths, margins, and paddings on the parents, it will fill the parent width. You want the flexbox child that will fill the available space to have flex-grow: 1;.
body {
background-color: #f0f0f0;
color: #34363e;
}
.main {
height: 100%;
width: 100%;
padding: 64px 0;
}
.container {
height: 100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: flex;
padding: 0 32px;
gap: 16px;
}
.h2-container .grow {
flex-grow: 1;
}
.h2-container h2 {
font-size: 27px;
}
.h2-container hr {
margin-top: 40px;
border: none;
border-top: 4px dotted #cccccc;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}
<div class="main">
<div class="container">
<div class="h2-container">
<div>
<h2>This is a title sentence</h2>
</div>
<div class="grow">
<hr>
</div>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>
This question already has answers here:
Flexbox responsive row column layout
(3 answers)
Converting desktop layout to single-column mobile layout
(1 answer)
Closed 1 year ago.
I am working on a website.
I have a container, that has two columns. On the left, I have a product image, that when you hover on it, it shows that product in use.
To the right, I have a title, description, tech drawings.
I want it so that when the screen is resized to a mobile format, or even if the browser is shrunk, the columns will stack on top of one another.
Right now the image just gets smaller and smaller until you cannot see it.
I tried several attempts at using FlexBox. Did not have any luck. Here was the guide/rules I was following: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here is a quick JSfiddle I made up to see what I am talking about. This does not have any "attempt" code in it. Just the base code for the containing div, left and right columns, with some example images and text. https://jsfiddle.net/fmcdLxa4/1/
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
padding: 15px;
}
/* Columns */
.left-column {
float: left;
width: 50%;
padding: 10px;
position: relative;
border-bottom: 1px solid #E1E8EE;
}
.right-column {
float: left;
width: 50%;
padding: 10px;
}
/* Left Column */
.left-column img {
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: auto;
}
/* Right Column */
/* Product Description */
.product-description {
border-bottom: 1px solid #E1E8EE;
}
.product-description span {
font-size: 12px;
color: #358ED7;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.product-description h1 {
font-weight: 300;
font-size: 52px;
color: #43484D;
letter-spacing: -2px;
}
.product-description p {
font-size: 16px;
font-weight: 300;
color: #86939E;
line-height: 24px;
}
.product-description a {
color: #358ED7;
}
.flip-box {
background-color: transparent;
width: 100%;
height: 100%;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: transparent;
}
.flip-box-back {
background-color: transparent;
transform: rotateY(180deg);
}
<div class="container">
<!-- Left Column -->
<div class="left-column">
<p> </p>
<div height="15"></div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://dogtowndogtraining.com/wp-content/uploads/2012/06/300x300-061-e1340955308953.jpg" style="max-width: 100%">
</div>
<div class="flip-box-back">
<img src="http://www.deepdiveintel.com/wp-content/uploads/2013/09/Owl-Eye-art-300x300.jpg" style="max-width: 100%">
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="right-column">
<!-- Product Description -->
<div class="product-description">
<span>Lorem ipsum dolor sit amet</span>
<h1>Lorem ipsum dolo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu sem, bibendum id tellus ac, aliquam faucibus massa. Nulla facilisi. Fusce vel condimentum velit. Praesent nec ultricies erat. Sed ante lectus, ultrices ut laoreet id, tincidunt
a augue.</p>
<p>Technical drawings: 7/0 | 8/0
<p />
</div>
</div>
</div>
Any help would be awesome!
flex can wrap if you set it so. Also, one of your card's image needs to remain in the flow, so it can size its container. then flex:1 1 XX% will do the job.
https://codepen.io/gc-nomade/pen/MWpxYZw
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap:wrap;
padding: 15px;
}
/* Columns */
.left-column {
flex:1 1 40%;
padding: 10px;
position: relative;
border-bottom: 1px solid #E1E8EE;
min-width:320px;
}
.right-column {
flex:1 1 40%;
padding: 10px;
}
/* Left Column */
.left-column img {
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: auto;
}
/* Right Column */
/* Product Description */
.product-description {
border-bottom: 1px solid #E1E8EE;
}
.product-description span {
font-size: 12px;
color: #358ED7;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.product-description h1 {
font-weight: 300;
font-size: 52px;
color: #43484D;
letter-spacing: -2px;
}
.product-description p {
font-size: 16px;
font-weight: 300;
color: #86939E;
line-height: 24px;
}
.product-description a {
color: #358ED7;
}
.flip-box {
background-color: transparent;
width: 100%;
height: 100%;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-back{
position: absolute;
top:0;
}
.flip-box-front,
.flip-box-back {
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: transparent;
}
.flip-box-back {
background-color: transparent;
transform: rotateY(180deg);
}
<div class="container">
<!-- Left Column -->
<div class="left-column">
<p> </p>
<div height="15"></div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://picsum.photos/id/1003/300/300" style="max-width: 100%">
</div>
<div class="flip-box-back">
<img src="https://picsum.photos/id/10/300/300" style="max-width: 100%">
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="right-column">
<!-- Product Description -->
<div class="product-description">
<span>Lorem ipsum dolor sit amet</span>
<h1>Lorem ipsum dolo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu sem, bibendum id tellus ac, aliquam faucibus massa. Nulla facilisi. Fusce vel condimentum velit. Praesent nec ultricies erat. Sed ante lectus, ultrices ut laoreet id, tincidunt
a augue.</p>
<p>Technical drawings: 7/0 | 8/0
<p />
</div>
</div>
</div>
I'm making a site and using a grid for my body. Now I'm trying to make a footer for my site but my footer is getting placed right of my main body.
I think the problem might be something with my container though I'm not really sure...
.container {
display: grid;
grid-template-columns: 50% auto;
height: auto;
align-self: center;
margin: 0 65px;
height: 90% auto;
}
I really wouldn't know how to fix this. Can somebody please help me?
This is my HTML & CSS:
body,
html {
height: 100%;
margin: 0;
width: 100%;
}
body {
font-family: "Montserrat";
display: grid;
grid-template-columns: 100% auto;
grid-template-rows: 90% auto;
background-color: rgb(27, 27, 27);
color: white;
}
.bg,
.bg2 {
width: 100%;
height: 100%;
position: absolute;
}
.bg {
-webkit-clip-path: polygon(66% 67%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(66% 67%, 100% 0, 100% 100%, 0% 100%);
z-index: -1;
background-color: #053970;
}
.bg2 {
z-index: -2;
background-color: #004288;
-webkit-clip-path: polygon(49% 67%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(49% 67%, 100% 0, 100% 100%, 0% 100%);
}
.container {
display: grid;
grid-template-columns: 50% auto;
height: auto;
align-self: center;
margin: 0 65px;
height: 90% auto;
}
a {
color: black;
}
a:visited {
color: black;
}
ul {
list-style-type: none;
perspective: 1000px;
}
ul a li {
display: grid;
grid-template-columns: 20% auto;
border-radius: 10px;
padding: 15px;
cursor: pointer;
transform: rotateY(-30deg) rotateX(15deg);
position: absolute;
opacity: 0.8;
border-bottom: 4px solid rgba(0, 0, 0, .2);
mix-blend-mode: multiply;
width: 500px;
}
ul a:nth-child(1) li {
background: #a9cfe2;
top: -105px;
z-index: 2;
}
ul a:nth-child(2) li {
background: #85b890;
z-index: 1;
top: 0px;
}
ul a:nth-child(3) li {
background: #cca6a6;
z-index: 0;
top: 105px;
}
ul a li:hover {
transform: rotateY(-22deg) rotateX(7deg) scale(1.05);
transition: transform .45s ease-out;
z-index: 3;
mix-blend-mode: normal;
}
footer {
height: 10%;
width: 100%;
background-color: #333;
bottom: 0;
left: 0;
display: initial;
float: bottom;
}
img {
margin-top: 5;
width: 70px;
}
h1 {
font-size: 3em;
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 2em;
margin-top: 0;
}
#left>p {
color: #aaa;
line-height: 1.5em;
}
#right {
margin-left: 15%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="styles/main.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<div class="bg"></div>
<div class="bg2"></div>
<div class="container">
<div id="left">
<h1>Supercool Website</h1>
<h2>Supercool website for cool kids only</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac quam augue. Suspendisse potenti. Phasellus at vestibulum nunc. Phasellus suscipit elit odio, feugiat varius quam hendrerit sed. Mauris fringilla blandit maximus. Cras magna metus,
imperdiet congue convallis eu, finibus eget urna. In ac porttitor diam, sit amet sagittis tellus. Nullam consequat luctus ornare. Nulla vitae lectus vitae nisi dapibus ultricies. Aenean tempus nisl sit amet augue luctus pulvinar. Phasellus scelerisque
aliquet lorem.</p>
</div>
<div id="right">
<ul>
<a href="#">
<li>
<img src="img/img1.png">
<span>
<strong>Option 1</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</span>
</li>
</a>
<a href="#">
<li>
<img src="img/img2.png">
<span>
<strong>Option 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</span>
</li>
</a>
<a href="#">
<li>
<img src="img/img3.png">
<span>
<strong>Over Ons</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</span>
</li>
</a>
</ul>
</div>
</div>
</body>
</html>
Maybe Your Forgetting
grid-template-rows: auto 1fr auto;?
Check Out This Article Maybe It Might Help.
https://dev.to/niorad/keeping-the-footer-at-the-bottom-with-css-grid-15mf
I have a problem with absolute positioning an element with transform: rotate() css.
I have read other posts on SO with similar problem and I used some solutions but still not solve my problem. I tried transform-origin etc.
I want to place my rotated link at the any X position: left, center, right & Y: bottom of a header. I need solution where I don't know width, height of element (different texts).
I think I have a 90% of solution but problem is my link is not placed whre I want. The X position changes with lenght of text.
I have a working code below:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<style>
body {
background: #333333;
font-family: Arial, sans-serif;
}
.header-content {
background: #cccccc;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
height: 712px;
margin: 0 auto;
padding: 0 45px;
position: relative;
width: 1200px;
}
.link-decor {
border-top: 2px solid #ed217c;
color: #ffffff;
font-size: 14px;
position: absolute;
bottom: 0;
left: 50%;
padding-left: 30px;
transform: rotate(-90deg) translate(50%, -100%);
transform-origin: bottom;
}
</style>
</head>
<body>
<div class="header-content">
<div>
<h1>LOREM<br>IPSUM</h1>
<p>Dolor sit amet, consectetur adipiscing elit. Vestibulum tristique sapien eget magna rutrum, ac fringilla diam elementum. </p>
learn more
</div>
webpageeeeeee<br>scrollersbarrrrrrrrssssssssssssssss
</div>
</body>
</html>
Thanks, for any reply.
I changed your HTML to be like this :
<div class="header-content">
<div class="in-header"> <!-- add class in-header here -->
<h1>LOREM<br>IPSUM</h1>
<p>Dolor sit amet, consectetur adipiscing elit. Vestibulum tristique sapien eget magna rutrum, ac fringilla diam elementum. </p>
learn more
webpageeeeeee<br>scrollersbarrrrrrrrssssssssssssssss
</div>
I added class to the first child of the div.header-content and put the element that you want to rotate inside this div not outside it as you was doing.
Then, I changed the style for the .link-decor to be
.link-decor {
border-top: 2px solid #ed217c;
color: #ffffff;
font-size: 14px;
position: absolute;
top: 100%;
left: 0px;
padding-left: 30px;
transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;
}
and added position relative to the new class .in-header
body {
background: #333333;
font-family: Arial, sans-serif;
}
.header-content {
background: #cccccc;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
height: 712px;
margin: 0 auto;
padding: 0 45px;
position: relative;
width: 1200px;
}
.in-header{
position: relative;
}
.link-decor {
border-top: 2px solid #ed217c;
color: #ffffff;
font-size: 14px;
position: absolute;
top: 100%;
left: 0px;
padding-left: 30px;
transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;
}
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="header-content">
<div class="in-header">
<h1>LOREM<br>IPSUM</h1>
<p>Dolor sit amet, consectetur adipiscing elit. Vestibulum tristique sapien eget magna rutrum, ac fringilla diam elementum. </p>
learn more
webpageeeeeee<br>scrollersbarrrrrrrrssssssssssssssss
</div>
</div>
</body>
</html>
Please note the nav utilises JS as well as the footer text. The rest is all HTML/CSS. I can show the JS if needs be but I believe this issue lies either with the HTML or the CSS.
In the preview of the site, the navigation (nav01/menu) and the body/main area are shifted to the right slightly (approximately by 10px). So instead of the navigation and main red area being in line with the banner image/bg they're offset to the right. I'm assuming this is what has caused a horizontal scroll bar (there's approximately 400px of additional blank space on the right hand side of the website).
I've set margins to 0 in the specific areas but these left and right margins remain.
The second issue is with what will become a hidden content/dropdown area (currently visible) and the page divider for the next page (scrolling single page). In each of these instances, pagedown and hidden box, I've specified the width as 100% yet they remain central and don't even stretch to the actual image sizes.
Any help with these 2 problems would be appreciated. I'm sure it's something simple but I just can't seem to find it after hours of trying.
..............................
#fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
}
#fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
font-weight: thin;
}
#container {
position: absolute;
top: 0px;
left: 0px;
background-color: #73008C;
background-image: url("banner.jpg");
background-size: 100%;
width: 100%;
height: 800px;
content: 60px;
padding: 0px;
border: 5px #73008C;
margin-left: 0px;
margin-right: 0px;
z-index: -3;
}
#header {
position: absolute;
background-color: rgba(255, 255, 255, 0.4);
width: 100%;
height: 12%;
margin: auto;
z-index: 1;
}
#logo {
position: relative;
border: 0px;
margin-top: 9px;
z-index: 2;
}
#nav01 {
position: absolute;
background-color: #374754;
width: 100%;
height: 40px;
padding: 0px;
margin-left: 0px;
margin-top: 85px;
margin-right: 0px;
border-radius: 0px 0px 6px 6px
}
ul#menu {
font-family: Swisz;
position: relative;
background-color: #374754;
padding: 0;
margin-top: 13px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu li {
display: inline;
margin-right: 5px;
}
ul#menu li a {
background-color: #374754;
padding: 10px 10px;
text-decoration: none;
color: #ffffff;
border-radius: 4px 4px 4px 4px;
}
ul#menu li a:hover {
color: white;
font-style: bold;
background-color: #d83030;
}
#overlay {
font-family: Swisz;
position: relative;
margin-left: auto;
margin-right: auto;
top: 250px;
bottom: 200px;
width: 30%;
height: 30%;
background-color: #d83030;
padding: 15px 15px;
color: #ffffff;
border-radius: 8px 8px 8px 8px;
}
#info {
position: relative;
left: 400px;
top: 280px;
}
body {
font-family: "Helvetica", Verdana, sans-serif;
font-size: 12px;
background-color: #ffffff;
color: #ffffff;
text-align: center;
padding: 0px;
}
#main {
position: absolute;
top: 600px;
padding: 10px;
padding-left: 200px;
padding-right: 200px;
background-color: #d83030;
background-position: top center;
margin: 0;
}
#h1 {
font-family: Swisz;
text-shadow: 5px 5px 5px ##374754;
color: #ffffff;
text-align: center;
font-size: 30px;
}
#h3 {
font-family: Helvetica, sans-serif;
color: #ffffff;
text-align: left;
font-size: 12px;
}
.h5 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 16px;
}
#hiddenbox {
position: relative;
width: 100%;
height: 298px;
background-image: url("hidden_bg.jpg");
background-repeat: repeat-x;
padding: 5px;
padding-top: 7px;
margin: 0;
text-align: left;
}
.pagedown {
position: relative;
width: 100%;
padding: 0;
top: 900px;
margin: 0;
}
#sub {
position: relative;
padding-left: 20%;
padding-right: 20%;
padding-bottom: 10%;
padding-top: 1%;
color: #374754;
top: 1200px;
background-color: #ffffff;
margin: 0;
#h4 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 40;
}
#footer {
position: relative;
color: #ffffff;
margin-bottom: 0px;
margin-top: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>TITLE HEREd</title>
<link href="Site.css" rel="stylesheet">
<script src="Script.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="logo.png" alt="Logo" style="width: 20%; height: 20%"></img>
</div>
</div>
</div>
<nav id="nav01"></nav>
<div id="overlay">
<h1>Filler title text here<h1>
<h2>Filler filler filler filler filler</h2>
</div>
<div id="info">
<img src="seehow.png" alt="See How" style="width:345px;height:240px">
</div>
<div id="main">
<h1>LIPSUM</h1>
<h2>main content will al be placed here</h2>
<img src="wilfcent.png" alt="Wilf" style="width:345px;height:428px">
<div id="hiddenbox">
<h3>drop down content/hiddent content here/h3>
<img src="promo.png" alt="Promotion" style="width:321px;height:176px"></img>
</div>
<img src="pagedown.gif" alt="Page down" style="width:100%;height:68px"></img>
</div>
<div id="sub">
<h4> How It Works </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut turpis sapien. Proin tempus nibh ac rhoncus congue. Nullam pretium placerat vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sed est vitae libero placerat tristique. Aliquam pulvinar convallis mi, vitae consequat tortor pellentesque ut. In lacinia, ex vel accumsan viverra, est ex efficitur justo, pulvinar luctus mi leo nec risus. Sed nec tellus bibendum, convallis enim at, elementum lectus. Fusce eu enim blandit, volutpat eros lobortis, auctor odio. Praesent tristique sem elit, nec consequat tortor placerat at. Nullam eu arcu et ex iaculis feugiat ut quis enim. Nulla quis libero placerat, accumsan nulla et, laoreet magna. Sed congue ut nunc maximus gravida.</p>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>
To solve your first issue of the navigation and the body being shifted give the body tag a margin:0px. This will move them back into place.
The 400px of blank space is caused by the left:400px you have on the #info element.
Your second issue is caused by the padding-left and padding-right you have on the #main element. Remove those, and give a width:100% to the #main. The parent and now the child both fill the width of the page.
The first problem is quite simple. All browser handle html tags differently, and most of the browsers for example have given the <body> a margin, which causes you the 10px.
Simply add this to your css file:
body, html {
margin: 0;
padding: 0;
}
The reason for the 400px on the right side is your <div id="info"> tag. This div got the attribute (set by the browsers default) div {display: block}, which says the div does block the full width, that is available by the screen size.
Then you gave it the css attributes position: relative; left: 400px. That means, that the div, as said above, already has the full width plus the 400px added as space from the left. Because of that its overscaled.
A smoother version is to change the leftinto padding, so it becomes:
#info {
position: relative;
padding-left: 400px;
top: 280px;
}
Your second issue is caused by the padding-(left/right)attributes on your #main div. You can simply remove them and your div gets the full width of the page.
Last, you have got one missing <symbol in this line before the closing </h3> tag.
<h3>drop down content/hiddent content here/h3>
Hope this helps, feel free to ask for further information.
Best regards,
Marian.