I am trying to build a personal site, and just started with some HTML and CSS. The problem is when I resize the browser window, the mountain image chain position and the clouds shift their position, any ideas on how to fix this? Also I am new to stack so sorry if the way I am asking question is incorrect.enter image description here
body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.web {
text-decoration: underline;
}
.top-container {
background-color: #ccf2f4;
position: relative;
padding-top: 100px;
min-width: 100%;
}
.middle-container {
background-color: red;
height: 200px;
width: 200px;
}
.bottom-container {
background-color: blue;
height: 200px;
width: 200px;
}
.bottom-cloud {
position: absolute;
left: 300px;
bottom: 300px;
}
.top-cloud {
position: absolute;
right: 300px;
top: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prajwal Timsina</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="top-cloud">
<h1>I am Prajwal.</h1>
<p>a aspiring <span class="web">web</span> developer.</p>
<img class="bottom-cloud" src="img/cloud.png" alt="bottom-cloud">
<img src="img/mountain.png" alt="mountain">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
You should use max-width:100% for your image.
body {
margin: 0;
text-align: center;
}
.bottom-img {
max-width:100%; /* you should use */
}
h1 {
margin-top: 0;
}
.web {
text-decoration: underline;
}
.top-container {
background-color: #ccf2f4;
position: relative;
padding-top: 100px;
min-width: 100%;
}
.middle-container {
background-color: red;
height: 200px;
width: 200px;
}
.bottom-container {
background-color: blue;
height: 200px;
width: 200px;
}
.bottom-cloud {
position: absolute;
left: 300px;
bottom: 300px;
}
.top-cloud {
position: absolute;
right: 300px;
top: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prajwal Timsina</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="top-cloud">
<h1>I am Prajwal.</h1>
<p>a aspiring <span class="web">web</span> developer.</p>
<img class="bottom-cloud" src="img/cloud.png" alt="bottom-cloud">
<img class="bottom-img" src="https://siber.boun.edu.tr/sites/cyber.boun.edu.tr/files/sample6.jpg" alt="mountain">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
Related
I know the title is vague. I do not know how to better formulate the title as I do not know the name of the design style.
What is the name of this design "style" and how do I achieve the effect with css and html?
I tried to recreate the design with HTML and css. here is the code
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
/*BG*/
main,
.container {
height: 100vh;
width: 100vw;
}
body {
overflow: hidden;
}
#left-top,
#left-bottom,
#right {
position: absolute;
z-index: -10;
}
#left-top {
left: 0;
top: 0;
}
#left-bottom {
left: 0;
bottom: 0;
transform: translate(-0.5vw);
}
#right {
right: 0;
top: 0;
bottom: 0;
transform: translate(10vw);
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-height: 100vh;
max-width: 100vw;
border: 1vh solid lime;
}
.logo {
max-width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.logo img {
width: 80vw;
height: inherit;
}
.links {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<main>
<div class="container">
<img id="left-top" src="https://picoolio.net/images/2020/06/10/Path-52825c75a57b036c8.png" alt="" />
<img id="left-bottom" src="https://picoolio.net/images/2020/06/10/Path-486011727790f3e3d.png" alt="" />
<img id="right" src="https://i.ibb.co/WPqF1dV/Component-4-1.png" alt="" />
<div class="logo">
<img src="https://picoolio.net/images/2020/06/10/Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" alt="Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" border="0" />
</div>
<div class="links">
<ul>
<li>
Kontakt
</li>
<li>
Produkter
</li>
<li>
om oss
</li>
</ul>
</div>
</div>
</main>
<script src="main.js"></script>
</body>
</html>
Whenever I zoom the absolute position background pieces shifts like this.
What is the best way to achieve this design and what is the name of the style?
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
/*BG*/
main,
.container {
height: 100vh;
width: 100vw;
}
body {
overflow: hidden;
}
#left-top,
#left-bottom,
#right {
position: absolute;
z-index: -10;
}
#left-top {
left: 0;
top: 0;
width: 20vw;
}
#left-bottom {
left: 0;
bottom: 0;
height: 50vh;
}
#right {
right: 0;
top: 0;
bottom: 0;
height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-height: 100vh;
max-width: 100vw;
}
.logo {
max-width: 70vw;
display: flex;
justify-content: center;
align-items: center;
}
.logo img {
top: 45vh;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 100%;
height: inherit;
z-index: -10;
}
.links {
margin: 51vh auto auto 7vw;
width: 110vw;
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 1vw;
grid-row-gap: 1vw;
}
.link-text {
width: 100%;
text-align: center;
}
.link-text a {
text-decoration: none;
color: #777;
font-size: 1.25vw;
font-family: helvetica;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<main>
<div class="container">
<img id="left-top" src="https://picoolio.net/images/2020/06/10/Path-52825c75a57b036c8.png" alt="" />
<img id="left-bottom" src="https://picoolio.net/images/2020/06/10/Path-486011727790f3e3d.png" alt="" />
<img id="right" src="https://i.ibb.co/WPqF1dV/Component-4-1.png" alt="" />
<div class="logo">
<img src="https://picoolio.net/images/2020/06/10/Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" alt="Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" border="0" />
</div>
<div class="links">
<div class="link-text">Kontakt</div>
<div class="link-text">Produkter</div>
<div class="link-text">om oss</div>
</div>
</div>
</main>
<script src="main.js"></script>
</body>
</html>
In the above code I have changed the images dimensions and links in <div> tag to achieve that design... You can directly copy and paste the code for your work as I think this is what you wanted to see on the screen.
Explanation
1- I first added vw and vh dimensions to you images which made them responsive according to the viewport...
2- secondly I specified a z-index to your logo image and positioned it according to your need by the help of left and top after specifying absolute position.
3- Thirdly I used css grid layout for links, but it is not essential as you can use other methods also. link for info on cs grids
4- I styled few things with css (mainly the link section) which you can go through in your code...
The above was just a brief overview.
Please help to remove a gap below the slanted div on a mobile version. Look at the image below what i've got and what i need.
Image of a gap on a mobile device
Test page: http://stupen.design/slanted/slanted.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Slanted test</title>
<style>
body {
margin: 0;
padding: 0;
-ms-overflow-style: none;
}
body::-webkit-scrollbar {
display: none;
}
.title {
font-size: 12vh;
margin-top: 10%;
margin-left: 10%;
position: absolute;
z-index: 10;
}
.section1 {
height: 100vh;
background-color: red;
}
.section2 {
height: 100vh;
background-color: blue;
}
.section3 {
height: 100vh;
background-color: green;
}
.slanted {
height: 100%;
width: 100%;
background-color: white;
transform: skew(0deg, -9deg);
transform-origin: 0% 100%;
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div class="section1">
<h1 class="title">First slide</h1>
</div>
<div class="section2">
<h1 class="title">Second slide</h1>
<div class="slanted">
</div>
</div>
<div class="section3">
<h1 class="title">Third slide</h1>
</div>
</body>
</html>
Done! Me stupid. Just change .slanted's height percents to vh.
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I have a box which contain a simple header and footer.
The problem is that appears a scrollbar at the bottom which I don't wont.
I know that is very stupid as question but I don't figure out how to fix it.
.box{
width: 100%;
height: 100%;
}
.header {
background: tomato;
position: absolute;
top: 0;
width: 100%;
height: 5%;
}
.footer {
background: lightgreen;
position: absolute;
bottom: 0;
width: 100%;
height: 5%;
}
<!DOCTYPE html>
<html>
<title>Test</title>
<head>
<link rel="stylesheet" href="Style/StyleSheet.css">
<script type="text/javascript" src="Script/Script.js"></script>
<title>Test</title>
</head>
<body>
<div class="box">
<header class="header">Header</header>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
By default the browsers give custom margin to body. Just set
body{
margin:0;
}
body{
margin:0;
}
.box{
width: 100%;
height: 100%;
}
.header {
background: tomato;
position: absolute;
top: 0;
width: 100%;
height: 5%;
}
.footer {
background: lightgreen;
position: absolute;
bottom: 0;
width: 100%;
height: 5%;
}
<!DOCTYPE html>
<html>
<title>Test</title>
<head>
<link rel="stylesheet" href="Style/StyleSheet.css">
<script type="text/javascript" src="Script/Script.js"></script>
<title>Test</title>
</head>
<body>
<div class="box">
<header class="header">Header</header>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
Applymargin:0 for the body
body {
margin: 0;
}
.box {
width: 100%;
height: 100%;
}
.header {
background: tomato;
position: absolute;
top: 0;
width: 100%;
height: 5%;
padding: 10px 0px
}
.footer {
background: lightgreen;
position: absolute;
bottom: 0;
width: 100%;
height: 5%;
padding: 10px 0px
}
<!DOCTYPE html>
<html>
<title>Test</title>
<head>
<link rel="stylesheet" href="Style/StyleSheet.css">
<script type="text/javascript" src="Script/Script.js"></script>
<title>Test</title>
</head>
<body>
<div class="box">
<header class="header">Header</header>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
I'm new here in Stack Overflow and I have a problem with flexbox.
I want to use a <main> and <footer> with display: flex; where each row of main has 2 columns with height: 100% of the browser and footer has 2 rows, first with 3 columns and the second only one column, both with height: auto;
But when I do this my footer overlaps <main> because its height is 100%, but I need it for the 100% of the children. Am I clear?
#font-face {
font-family: "Open Sans";
src: url(../fonts/OpenSans-Regular.ttf);
}
#font-face {
font-family: "Time Burner";
src: url(../fonts/TimeBurner-Regular.ttf);
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Open Sans";
scroll-behavior: smooth;
}
main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.flex {
height: 100%;
flex-basis: 50%;
box-sizing: border-box;
padding: 20px;
}
.home {
background-attachment: fixed;
background-image: url("../img/bg.jpg");
background-position: 50%;
background-size: cover;
}
.flex:nth-child(even) {
border: 5px solid blue;
}
.flex:nth-child(odd) {
border: 5px solid red;
}
.arrow {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
width: 200px;
height: 50px;
background-color: gray;
text-align: center;
}
footer {
position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.footer {
flex-basis: 100%;
height: auto;
}
.thumb {
position: fixed;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: gray;
right: 20px;
bottom: 20px;
}
#media (max-width: 768px) {
.flex {
flex-basis: 100%;
}
.arrow {
bottom: -100%;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- ¿Qué hacés en mi código? ¿Te gustó algo?
Bueno, como sea, que tengas una linda visita :) -->
<meta charset="UTF-8">
<title>OnePage</title>
<meta name="theme-color" content="#34a853" />
<meta name="viewport" content="width=device-width" />
<meta name="mobile-web-app-capable" content="yes" />
<link rel="icon" href="img/favicon.png" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/dist/css/bootstrap.css" />
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<main>
<section class="flex home" id="inicio">
1 - Izquierda
</section>
<section class="flex home">
2 - Derecha
</section>
<a class="arrow" href="#3">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</a>
<section class="flex" id="3">
3 - Izquierda
</section>
<section class="flex">
4 - Derecha
</section>
</main>
<footer>
<section class="flex footer">
5 - Footer
</section>
</footer>
<a class="thumb" href="#inicio">
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
</a>
</body>
</html>
Here is my solution for you layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
main,
footer {
display: flex;
flex-wrap: wrap;
}
.main-item {
flex:0 1 50%;
height: 100vh;
background-color: tomato;
}
.footer-item {
flex: 1;
background-color: lightsalmon;
}
.footer-item:last-child {
flex: 0 0 100vw;
background-color: blue;
}
</style>
<body>
<main>
<div class="main-item">m1</div>
<div class="main-item">m2</div>
<div class="main-item">m3</div>
<div class="main-item">m4</div>
</main>
<footer>
<div class="footer-item">f1</div>
<div class="footer-item">f2</div>
<div class="footer-item">f3</div>
<div class="footer-item">f4</div>
</footer>
</body>
</html>
Thanks(Gracias), T04435.
Put min-height:100% on body
Remove height:100% from body
I'm trying to position two images and running into difficulties. I want the 'Welcome!' speech bubble to be just to the left of the logo.
Can someone help me with this?
Here is my code:
html {
background-color: #FFFFFF;
}
img {
width: 100px;
height: 150px;
}
#logo {
margin: auto;
width: 10%;
}
#welcome {
margin: auto;
width: 10%;
}
#popUp {
width: 50px;
height: 50px;
}
<! DOCTYPE html>
<html>
<head>
<title>Placehold</title>
<link rel="stylesheet" href="css/stylesheet.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div id='logo'>
<img src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/logo_zpsopheofmw.png" alt="logo">
</div>
<div id='welcome'>
<img id='popUp' src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/welcome_zps3xaw6gge.png" alt="welcome">
</div>
</body>
</html>
An easy fix would be to switch the ordering of the HTML so that the welcome bubble div is before the logo div. All you will have to do then is float each div to the left.
html {
background-color: #FFFFFF;
}
img {
width: 100px;
height: 150px;
}
#logo {
margin: auto;
width: 10%;
float:left;
}
#welcome {
margin: auto;
width: 10%;
float:left;
}
#popUp {
width: 50px;
height: 50px;
}
<! DOCTYPE html>
<html>
<head>
<title>Placehold</title>
<link rel="stylesheet" href="css/stylesheet.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div id='welcome'>
<img id='popUp' src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/welcome_zps3xaw6gge.png" alt="welcome">
</div>
<div id='logo'>
<img src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/logo_zpsopheofmw.png" alt="logo">
</div>
</body>
</html>