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.
Related
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 trying to set div's position like this:
but i can't set image (green box) in position.
orange box is on top
blue and lightgreen div are buttons
red frame is static distant under orange box
green box is link with image inside, covering partly blue and lightgreen buttons.
every links must stay clickable every time.
I can't centering green image and set it above orange div partly.
Example code here
<div class="header-container">
<div class="nav-container">
<div class="logo">
Click!
</div>
<div class="nav">
Click!
</div>
</div>
<div class="header-image">
<div class="image">
Click!
</div>
</div>
<div class="menu-container">
Click!
</div>
.nav-container{
width: 100%;
height: 50px;
background: orange;
}
.logo{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightblue;
float: left;
}
.nav{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightgreen;
float: right;
}
.header-image{
width: 100%;
border: 1px solid green;
position: relative;
z-index: 2;
text-align: center;
}
.image{
height: 100px;
width: 60%;
background: green;
opacity: 0.6;
}
.header-image a{
padding: 40px 0;
}
.menu-container{
width: 100%;
border: 1px red solid;
height: 40px;
margin-top: 50px;
}
I've uploaded your jsfiddle here.
Addded the following css:
.header-image {
position: absolute;
top: 40px;
left: 20%;
}
also added extra margin-top for the .menu-container
.menu-container {
margin-top: 80px; //instead of 50px
}
I've positioned it absolute because this way it will go wherever you want it based on the body relative positioning.
adding this to image should work:
margin:0 auto;
position:relatve;
z-index:66;
margin-top:-10px
http://jsfiddle.net/o3oyuzb9/2/
try this
only changed the css
body,html{margin: 10px;}
.header-container{
width: 100%;
}
a{
text-decoration:none;
color:#000;
padding: 10px 0px;
display: block;
text-align: center;
}
.nav-container{
width: 100%;
height: 50px;
background: orange;
}
.logo{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightblue;
float: left;
}
.nav{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightgreen;
float: right;
}
.header-image{
width: 100%;
border: 1px solid green;
position: relative;
z-index: 2;
text-align: center;
}
.image{
height: 100px;
width: 60%;
margin: 0 auto;
margin-top: -20px;
background: green;
opacity: 0.6;
}
.header-image a{
padding: 40px 0;
}
.menu-container{
width: 100%;
border: 1px red solid;
height: 40px;
margin-top: 50px;
}
just add this to your image class:
margin: 0 auto;
margin-top: -20px;
Sorry if this is already in the lexicon, but I couldn't find it. I have what I think is a pretty simple three column header, where I can't get the right column to align with the left two columns. It shows up below the left columns even though there is plenty of space. I have three divs that make up each column, and I am guessing the problem is in there somehow.
Here is the css I am using:
body {
background-color: #ffaa00;
}
#container {
width: 1268px;
height: 900px;
background-color: #fff;
margin: 0 auto;
}
/* header styles */
#main {
height: 110px;
width: 715px;
margin: 0 auto;
background-color: #ccc;
border-radius: 6px;
}
#frame {
height: 100px;
width: 705px;
background-color: #336699;
position: relative;
top: 5px;
left: 5px;
border-radius: 6px;
}
#content {
height: 90px;
width: 695px;
background-color: #ffc;
position: relative;
top: 5px;
left: 5px;
border-radius: 5px;
text-align: center;
vertical-align: ;
}
/* left header */
#left {
float: left;
height: 110px;
width: 268px;
margin: 0 auto;
background-color: #ccc;
border-radius: 6px;
}
#left-frame {
height: 100px;
width: 258px;
background-color: #336699;
position: relative;
top: 5px;
left: 5px;
border-radius: 6px;
}
#left-content {
height: 90px;
width: 248px;
background-color: #ffc;
position: relative;
top: 5px;
left: 5px;
border-radius: 5px;
text-align: center;
}
/* right header */
#right {
display:inline-block;
float: right;
height: 110px;
width: 268px;
background-color: #ccc;
border-radius: 6px;
}
#right-frame {
display:inline-block;
height: 100px;
width: 258px;
background-color: #336699;
position: relative;
top: 5px;
left: 5px;
border-radius: 6px;
}
#right-content {
display:inline-block;
height: 90px;
width: 248px;
background-color: #ffc;
position: relative;
top: 5px;
left: 5px;
border-radius: 5px;
}
h1 {
display: inline-block;
margin-top: 15px;
font-size: 3em;
font-family: lucida grande;
color: #336699;
}
And the html:
<body>
<div id="container">
<div id="left">
<div id="left-frame">
<div id="left-content">
<img src="images/keyboard.jpeg" style="width:248px; height:90px; border-radius:5px;"
alt="this is a picture">
</div>
</div>
</div>
<div id="main">
<div id="frame">
<div id="content">
<h1>HERE IS A HEADING!</h1>
</div>
</div>
</div>
<div id="right">
<div id="right-frame">
<div id="right-content">
</div>
</div>
</div>
</div>
Any insight is appreciated.
What you really need to do is just float the three elements left and if you want spacing between then set the left/right margins on #main. This solution keeps all items in the document flow properly.
#main {
height: 110px;
width: 715px;
margin: 0 8px; /* changed 'auto' to '8' to even up padding */
background-color: #ccc;
border-radius: 6px;
float: left; /* added float */
}
#left {
float: left;
height: 110px;
width: 268px;
margin: 0; /* removed 'auto' because it isn't necessary when floated */
background-color: #ccc;
border-radius: 6px;
}
#right {
display:inline-block;
float: right; /* no need to adjust this */
height: 110px;
width: 268px;
background-color: #ccc;
border-radius: 6px;
}
JSFiddle Demo
<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/
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..