I have a problem with my website. It looks great on my 20" screen but on the 11" it does not. The #logo is covering #menu and the #bubble appears beneath the #frame. As you see in the code, I have set up precentage size parameters because I found such a solution in a tutorial. It worked for many elements but not for all. What is the problem?
I believe this may be something to do with the #bubble height and width because it is still in ems. When I tried doing it with percentages, I lost the circular shape and the #bubble went to the bottom of the page often.
HTML:
<body>
<div id="top">
<div>
<p id="logo">XXXXXXXXXXX</p>
<div id="menu">
<h3 id="test">xxxxxx</h3>
<h3 id="test2">xxxxxx</h3>
<h3 id="test3">xxxxxx</h3>
<h3 id="test4">xxxxx</h3>
<h3 id="test5">xxxxxx</h3>
</div>
</div>
</div>
<div id="frame">
<div id="main"></div>
</div>
</body>
CSS
body {
width: 100%;
margin-top: 0%;
margin-left: 0%;
margin-right: 0%;
background-image: url("http://www.wallpapersmood.com/uploads/2010-07/july-high-defintion-wallpaper/1280109101-FWEMRDA.jpg");
}
#top {
background-color: black;
width: 100%;
height: 50px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
#logo {
text-align: center;
position: absolute;
margin-top: 0.5%;
margin-left: 2%;
color: white;
font-family: Impact,cursive;
font-size: 160%;
}
h3 {
width: 10%;
height: 10%;
border-radius: 9px;
text-align: center;
line-height: 2;
display: table-cell;
font-size: 120%;
font-family: "Verdana";
color: white;
}
h3:hover {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.35, rgb(60,156,196)),
color-stop(0.68, rgb(90,188,236)),
color-stop(0.84, rgb(117,226,255)));
opacity: 1;
}
#menu {
float: left;
width: auto;
height: auto;
margin-left: 20%;
margin-top: 0.5%;
}
#frame {
width: 78%;
height: 90%;
border: 1px solid;
border-radius: 20px;
margin-left: auto ;
margin-right: 5%;
margin-top: 1%;
background-color: white;
opacity: 0.9;
float: right;
}
#main {
height: 90%;
width: 80%;
border: 1px solid black;
border-radius:15px;
float: right;
margin-right: 2%;
margin-top: 2%;
margin-bottom: 2%;
background-color: white;
overflow: auto;
}
#main img {
max-width: 60%;
max-height: auto;
margin: auto;
margin-top: 2%;
display: block;
border-radius: 15px;
}
#bubble {
position: absolute;
height: 14em;
width: 14em;
border: 6px dashed white;
text-align: center;
border-radius: 100%;
margin-left: 1%;
margin-top: 1%;
opacity: 0.6
}
#bubble p {
position: relative;
top: 20%;
font-size: 200%;
color: white;
font-family: "Impact";
}
You can use CSS #media queries to apply different styles for different screen sizes.
Read here.
Basically it's like if statements.. "if the window size is more than 500px" apply a certain set of CSS rules.. "if the window size is less than 500px and more than 300px" apply another set of rules etc..
Related
I am making a user profile page for our group app, I want to know that how I can make the size of the picture and the size of the text shrink when I shrink the size of the browser.
below are the scss code for classes:
.show-picture{
width: 200px;
height: 150px;
border-radius: 10%;
size-adjust:relative;
}
.Trip_info{
width: 20%;
height: 200px;
float:left;
}
.Planner_page{
width: 20%;
height: 200px;
margin-left:40%;
}
.Social{
width: 20%;
height: 200px;
float: left;
}
.Setting{
width: 20%;
height: 200px;
margin-left:40%;
}
.button{
font-size: 2em;
letter-spacing: 0px;
margin-bottom: 30px;
margin: 4px 2px;
cursor: pointer;
text-align: center;
text-decoration: none;
color: grey;
}
I tried to divided them into div of rows but the size will not shrink. And also I tried the width and height auto but that size will be very werid.
body{
margin: 0;
padding: 0;
background-color: grey;
text-align: center;
}
p{
color: blue;
font-size: 40px;
}
img{
width: 300px;
height: 300px;
}
/* media query breakpoints */
#media screen and (max-width: 480px){
body{
background-color: lightblue;
}
p{
color: red;
font-size: 20px;
}
img{
width: 150px;
height: 150px;
}
}
<p>Dummy Text</p>
<img src="http://docllpdemo.com/asteroid/wp-content/uploads/2020/11/dummy-man.png" alt="dummy-man">
use media query breakpoints for a responsive website
I'm currently working on a website where I work with perfect squares and rectangles. These need to perfectly fit on mobile devices and laptop screens, tablets and so on. Therefore I want exactly now and be in control how much space every element is taking.
My problem: it goes about the light blue color, these div is taking 50% of the width and a height of 100%. Next I set the purple div to a height of 60% with a margin on top of 10% (so 70%), then I have the green div with a height of 30% which will bring the total to 100%. As you see in the example it isn't taking 100% but more than that.
I've red that the margin is calculated from the parent div (so the light-blue div I suppose), so I need to change my way of thinking-calculating I suppose but don't know how. Someone who can help me out?
.toegelatenDagWeek {
float: left;
background-color: yellow;
}
.verhoudingTijd {
float: right;
background-color: red;
}
.extraTijdDagWeek {
float: right;
background-color: silver;
}
.square-box{
position: relative;
width: 50%;
overflow: hidden;
}
.square-box:before{
content: "";
display: block;
padding-top: 50%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
text-align: center;
margin: 1%;
}
.vierkanttt{
width: 35%;
float:left;
text-align:center;
margin-left: 37.5%;
margin-right: 37.5%;
margin-top: 1%;
margin-bottom: 2%;
position: relative;
}
.vierkanttt-marges {
flex: 1;
margin: 1px 1px 1px 1px;
position: relative;
}
.inputTimeSmall {
background-color: #b721ff;
border: none;
border-radius: 0.5em;
padding: 15% 0% 20% 0%;
width:100%;
text-align:center;
font-size:0.8em;
}
input {
color: white;
}
.inputTimeSmall::placeholder {
color: white;
}
.inputTime:focus {
outline: none;
}
.inputTime {
background-color: #b721ff;
border: none;
border-radius: 0.5em;
padding: 15% 0% 20% 0%;
width:100%;
text-align:center;
font-size:4em;
color: white;
}
.gespeeldeTijdTitel {
color: white;
width: 100%;
padding-left: 5%;
float: left;
text-align: left;
text-decoration-line: underline;
//background: purple;
font-size: 1.5em;
padding-bottom: 3%;
padding-top: 3%;
background-color: blue;
}
.toegelatenTijdTitel {
background: blue;
height: 30%;
width: 100%;
position: relative;
}
.toegelatenTijdTitel div {
position: absolute;
top: 50%;
color: white;
text-decoration-line: underline;
transform: translateY(-50%);
margin-left: 5%;
font-size: 1.5em;
}
.testje {
width: 100%;
height: 70%;
background-color: black;
}
.spaceInputTimeSmall {
background-color: #21d4fd;
border-radius: 0.5em;
float:left;
width: 50%;
height: 100%;
}
.inputTimeMini {
width: 80%;
background-color: #b721ff;
font-size:2em;
height: 60%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
border-radius: 0.5em;
display: table;
}
.textBoxSmall {
height: 30%;
width: 80%;
background-color: green;
margin: 00% 10% 0% 10%;
vertical-align: center;
display: table;
}
.centerText {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.boxtienprocent {
background-color: grey;
}
#container {
width: 90%;
height: 90%;
margin: 5%;
position: relative;
color: white;
}
<div class="square-box toegelatenDagWeek">
<div class='square-content '>
<div class="toegelatenTijdTitel">
<div>
toegelaten tijd
</div>
</div>
<div class="testje">
<div class="spaceInputTimeSmall">
<div class="boxtienprocent"></div>
<!--<input type="text" class="inputTimeSmall" id="inputHoursMaandag" name="maandagUren" placeholder="00" maxlength="3">-->
<div class="inputTimeMini" name="uren" id="DisplayToegelatenHours" ><div class="centerText">05</div></div>
<div class="textBoxSmall"><div class="centerText">uren</div></div>
</div>
<div class="spaceInputTimeSmall">
<!--<input type="text" class="inputTimeSmall" id="inputMinutesMaandag" name="maandagMinuten" placeholder="00" maxlength="2">-->
<div class="inputTimeMini" name="uren" id="DisplayToegelatenMinutes" ><div class="centerText">05</div></div>
<div class="textBoxSmall"><div class="centerText">minuten</div></div>
</div>
</div>
</div>
</div>
Instead of margins, you need to use padding, because padding is the space between the content and the border, meanwhile margin is the space outside the border. In your example, you used margins, so it pushed the rectangular outside.
I'm currently working in a final assignment for a class. I need to create a basic webpage (actually, the main goal of the assignment is to learn to use the local storage) but i got stuck on a very early stage of the making (i'm pretty novice in this). I've been using fixed divs for the main structure of the webpage and now idk how to add more content. i tried inherent position but everything went wrong.
the code: https://codepen.io/ipanonima/pen/WNbNeJm
html of the body:
<body>
<div class="main">
<div class="main-bar">
<div class="main-bar-container">
<div class="main-bar--logo">
<img src="./public/logo.png">
</div>
<div class="main-bar--info-container">
<div class="main-bar--info-container--buttons">
<div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
<div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
<div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
</div>
<div class="main-bar--info-container--login">
<div class="main-bar--info-container--login--b"><p>login</p></div>
</div>
</div>
</div>
</div>
<div class="example-section">
<div class="example-section--pictures" id="ex1">
<div class="example-section--pictures-pic"><img src="./public/canada-example.jpg"></div>
<div class="example-section--pictures--overlay"><div class="overlay--text">canadá</div></div>
</div>
<div class="example-section--pictures" id="ex2">
<div class="example-section--pictures-pic"><img src="./public/mexico-example.jpg"></div>
<div class="example-section--pictures--overlay"><div class="overlay--text">méxico</div></div>
</div>
<div class="example-section--pictures" id="ex3">
<div class="example-section--pictures-pic"><img src="./public/eu-example.jpg"></div>
<div class="example-section--pictures--overlay"><div class="overlay--text">EE.UU.</div></div>
</div>
</div>
<div class="banner-sesion"></div>
</div>
</body>
and my css (which is getting really long)
*{
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
input{
border: none;
border-bottom: 2px solid #74b5fa;
background-color: rgba(250, 167, 116, 0);
}
.box-session{
box-sizing: content-box;
position: relative;
background-image: linear-gradient(to top left,rgba(152, 116, 250,.1 ), rgba(250, 167, 116, 1));
width: 232px;
padding-left: 15px;
padding-right: 17px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 11%;
border-radius: 20px;
margin-left: calc(50% - 116px);
}
.session{
box-sizing: border-box;
position: relative;
width: 232px;
}
body{
background-color: #E2EBF8;
height: 100%;
width: 100%;
}
.relative{
position: relative;
height: 100%;
width: 100%;
}
.alto20{
height: 20%;
width: 100%;
}
.navBar{
position: fixed;
height: 100%;
width: 11%;
background-color: blue;
border-radius: 20px;
background-image: linear-gradient(#71AEFF, #4080FF);
}
.navBar--perfil{
position: relative;
float: left;
/* background-color: yellow; */
}
.navBar--photo{
position: relative;
margin-top: 25%;
/* background-color: blue; */
width: 100%;
height: 50%;
}
.navBar--photo img{
height: 30px;
width: 30px;
background-color: #FFFFFF;
border-radius: 5px;
margin-left: 40px;
}
.navBar--photo p{
color: #FFFFFF;
font-weight: bold;
font-size: 16px;
padding-left: 26px;
margin-top: 4px;
}
.navBar--opciones{
float: left;
width: 100%;
height: 60%;
}
.navBar--botones{
position: relative;
float: left;
width: 100%;
height: calc(100%/5);
}
.navBar--blanco{
position: relative;
height: 65px;
width: 65px;
/* background-color: green; */
margin-top: 3.5%;
margin-left: calc(50% - 52px);
box-sizing: border-box;
padding-top: 8px;
}
.navBar--blanco img{
height: 30px;
width: 30px;
margin-left: 19px;
}
.navBar--blanco p{
width: 100%;
color: #FFFFFF;
font-weight: bold;
font-size: 12px;
text-align: center;
}
.selected{
background-color: #FFFFFF;
border-radius: 20px;
color: #71AEFF;
}
.selected p{
color: #71AEFF;
}
.navBar--ayuda{
float: left;
/* background-color: green; */
}
.navBar--ayuda p{
position: relative;
background-color: #FFFFFF;
width: 70px;
height: 20px;
border-radius: 7%;
text-align: center;
color: #71AEFF;
font-weight: bold;
top: 75%;
left: 15%;
}
.main{
position: fixed;
height: 100%;
width: 55%;
background-color: #FFFFFF;
border-radius: 20px;
margin-left: 8%;
/* background-color: lightblue; */
}
.main--scroll{
position: absolute;
width: 90%;
/* background-color: pink; */
float: left;
overflow-y: scroll;
height: 95%;
overflow-y: auto;
overflow-x: hidden;
margin-top: 2.5%;
margin-left: 2.5%;
}
.lista ul{
float: left;
/* list-style-type: upper-roman; */
list-style-position: inside;
list-style-image: url('../public/man.png');
}
.tabla table{
border: 2px solid red;
border-collapse: separate;
}
.derecha{
position: fixed;
height: 100%;
width: 40%;
margin-left: 60%;
border-radius: 20px;
background-image: linear-gradient(#F3FAFC, #CCDBEF);
}
.ej{
background-color: greenyellow;
width: 100%;
height: 200px;
border: 1px solid black;
}
.noteblock{
width: 150px;
height: 150px;
background-color: #ff7190;
border-radius: 20px;
margin-left: 20px;
margin-top: 20px;
padding-top: 10px;
padding-left: 10px;
position: relative;
float: left;
}
.noteblock p{
color: white;
}
.noteblock h3{
color: white;
}
.boton{
margin-left: 20px;
margin-top: 20px;
position: relative;
}
thanks for all the patience
I think you may have misunderstood the fixed position. As it is, you can add more content perfectly well in your site: try setting .new { height: 2000px; background: orange;} and you'll see the orange wall does appear and the site scrolls. One thing that might be misleading you is because your header is also fixed, so any content you do add (an <h1> for example) is going to go under it.
In any case, because the banners are fixed, their position is relative to the screen, so they "go down" as you scroll, and they'll be in front of any content you add.
I don't understand what led you to set them fixed in the first place, but it's probably not a good idea. Try taking that out, give the ejemplo pictures a fixed height and let it scroll (try setting you header to sticky rather than fixed). When you're done with your homework, try researching CSS positions a bit more.
I would like put the red box(Block E) below Block C and next to Block D, and at the same time move BLOCK C up with 1% margin between the block A and itself. I've tried with different strategies but never been able to solve the problem.
Here's my code:
.newsblockContainer {
background-color: #000000;
width: 89.2%;
margin-left: 4vw;
margin-top: 3vw;
height: 73.3vw;
overflow: hidden;
}
.blockA {
width: 59%;
height: 27vw;
background-color: #FFAE00;
margin-left: 1%;
margin-top: 1%;
float: left;
position: relative;
}
.blockB {
width: 38%;
height: 34vw;
background-color: #FFAE00;
margin-left: 1%;
margin-top: 1%;
float: left;
position: relative;
}
.blockC {
width: 59%;
height: 23vw;
margin-left: 1%;
float: left;
background-color: #FFAE00;
margin-top: -9.45%;
position: relative;
}
.blockD {
height: 36.7vw;
width: 38%;
margin-left: 1%;
background-color: #FFAE00;
float: left;
margin-top: 1%;
position: relative;
}
.blockE {
height: 15vw;
background-color: red;
position: relative;
margin-top: 1%;
width: 59%;
margin-left: 1%;
}
<div class="newsblockContainer">
<div class="blockA">
block A
</div>
<div class="blockB">
block B
</div>
<div class="blockC">
block C
</div>
<div class="blockD">
block D
</div>
<div class="blockE">
block E
</div>
</div>
Any suggestions?
Fiddle: https://jsfiddle.net/j8hg3hf1/1/
Use absolute positioning instead of relative positioning for the ones you need to move. You 'll need include attributes for the location in px, %, etc.
Edit:
You can keep the relative positioning and utilize the top attribute. The 1% margin thing may be slightly tricky this way but it can surely approximate it.
.blockE{
height: 15vw;
background-color: red;
position: relative;
top: 308px;
margin-top: 1%;
width: 59%;
margin-left: 1%;
}
This along with changing the .blockC to top: -10px changes the image to this.
Here's a link to how the image appears
https://i.imgur.com/zLhoPgb.png
Check this out. It worked. If you need modification, please comment.
.newsblockContainer {
background-color: #000000;
width: 89.2%;
margin-left: 4vw;
margin-top: 3vw;
height: 73.3vw;
overflow: hidden;
}
.blockA {
width: 59%;
height: 27vw;
background-color: green;
margin-left: 1%;
margin-top: 1%;
float: left;
}
.blockB {
width: 38%;
height: 34vw;
background-color: blue;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%;
float: right;
}
.blockC {
width: 59%;
height: 23vw;
margin-left: 1%;
margin-top: 1%;
float: left;
background-color: pink;
}
.blockD {
height: 36.7vw;
width: 38%;
margin-left: 1%;
background-color: #FFAE00;
float: right;
margin-top: 1%;
margin-right: 1%;
position: relative;
}
.blockE {
height: 15vw;
background-color: red;
margin-top: 1%;
width: 59%;
float: left;
margin-left: 1%;
}
<div class="newsblockContainer">
<div class="blockA">A</div>
<div class="blockB">B</div>
<div class="blockC">C</div>
<div class="blockD">D</div>
<div class="blockE">E</div>
</div>
<html>
<style>
.leftColumn {
width: 49.2%;
float: left;
padding: 0;
font-size: 15px;
}
.rightColumn {
width: 48.9%;
float: right;
padding: 0;
font-size: 15px;
}
.horiHR {
width: 100%;
background: #e1e1e1;
padding: 0;
border: solid;
border-width: 2px;
border-color: #e1e1e1;
border-radius: 10px;
}
.centerHR {
margin-left: auto;
margin-right: auto;
width: .1%;
height: 100%;
background: #e1e1e1;
padding: 0;
border: solid;
border-width: 2px;
border-color: #e1e1e1;
border-radius: 10px;
margin-top: 0;
margin-bottom: 0;
}
.superContainer {
height: 330px;
margin-top:200px;
margin-top: 0px;
width: 100%;
}
/*The superContainer is in the headway block, which is another container. this means that the margin of the superContainer actually makes the block taller; it doesn't push the block further down. This must be done in headway*/
.superContainer:hover {
background: #007fff;
}
.topContainer {
width: 100%;
height: 30%;
margin-top: -45px;
text-align: center;
font-size: 24px;
font-family: Arial;
line-height: 33px;
}
.midContainer {
width: 100%;
height: 55%;
margin-top: 0;
margin-bottom: 0;
background: transparent;
}
.bottomContainer {
width: 100%;
height: 10%;
margin-top: 60px;
margin-bottom: -10px;
}
.leftPar {
text-align: center;
font-size: 22px;
line-height: 35px;
background: transparent;
}
.leftBottom {
padding-bottom: 10px;
margin-top: -15px;
width: 20%;
float: left;
margin-left: 18.5%;
}
.midBottom {
padding-bottom: 10px;
margin-top: -15px;
width: 20%;
margin-left: 8.75%;
float: left;
}
.rightBottom {
padding-bottom: 10px;
margin-top: -15px;
margin-left: 7.25%;
width: 20%;
float: left;
}
</style>
<div class="superContainer">
<div class="topContainer">
WE MAKE IT EASY
</div>
<div class="midContainer">
<hr class="horiHR"></hr>
<div class="leftColumn">
<p class="leftPar">
We have detailed lessons, quick review guides, and quizzes for over 15 courses
</p>
</div>
<div class="rightColumn">
PICTURE
</div>
<hr class="centerHR"></hr>
<!--I don't know why, but you have to put the float left first, then the float right, and then the center thing-->
<hr class="horiHR"></hr>
</div>
<div class="bottomContainer">
<div class="leftBottom1">
A</div>
<div class="midBottom">
B</div>
<div class="rightBottom">
C</div>
</div>
</div>
</html>
The Above is my code, but for some reason, I cannot get it to format properly. the bottom letters A, B, and C don't split the bottom container, and the content in the top container doesn't even show. Anyone have any idea what's wrong with my code?
You have small mistakes in your code:
1- .topcontainer as a negative margin, so the text it's outside the screen margin-top: -45px;
2- <div class="leftBottom1"> should be without the "1", just "leftBottom"
It works good here after those small corrections: jsfiddle.net/GXJJW/