h1,h2,h3,h4,h5,h6 {
font-size: 100%;
}
<!--top Div-->
<div style="width: 100%; height:100%;background-color: orange">
<div style="width: 80%; height:20%;color: navy; background-color: yellow; solid blue;text-align:right;align:center;margin: 0 auto;">
<div style="width: 20%; height:80%;color: navy; background-color: pink; border: 1px black; padding: 5px;float:right">
<h2> <p style="text-align:right;">Enter Site Title</p> </h2>
<h1> <p style="text-align:right;">Enter Site Slogen</p> </h1>
</div>
</div>
<!-- top Div Close -->
<div style="width: 80%; height:80%;color: navy; background-color: pink; solid blue;text-align:right;align:center;margin: 0 auto">
<div style="width: 100%; height:85%;background-color: green;position: relative;">
<div style="width: 30%; height:100%;color: navy; background-color: blue; solid blue;text-align:right;align:left;float: left">
<h1 style="text-align:right;" style="margin-right: 20px">Enter Site Title</h1>
<h2 style="text-align:right">Enter Site Slogen</h2>
</div>
<div style="width: 65%; height:100%;color: navy; background-color: cyan; solid blue;text-align:right;align:left;float: right;">
<h1 style="text-align:right;margin-right: 20px;">Enter Site Title</h1>
<h2 style="text-align:right">Enter Site Slogen</h2>
</div>
</div>
<div style="width:100%;height:15%;background-color: red;position: top;clear: both">
<p style="text-align:right;font-size:15px;">Enter Site Title</p>
</div>
</div>
</div>
You can see red Div get little out of parent div and also little space between blue Div and Red Div.
You are trying to make a footer.
To make a footer snatch to the bottom.
Instead of typing inline CSS, make a CSS file and call it in the HTML page by writing:
<head>
<link rel="stylesheet" href="styles.css">
</head>
In the <head> section.
In the HTML div, write:
<div id="footer"> Footer text here </div>
In the CSS file, write:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
It should stay at the bottom. :)
Related
I'm trying to place a calender inside a transparent div container, however I'm having some issues, i want each calender box to form a row that takes up 100% in width in the transparent box. So basically at the moment the page looks like this:
screenshot.
What you probably noticed is if you look at container with the "click on the images text" is that the box is wider than the rows under it.
This is the CSS code for the calender: Basically everything relating to .transbox has something to do with the transparent box. The calender days are the classes .weekdayssttart and weekdays. The remaining classes are the calender days with numbering. So since there is 7 days a week i just thought that I had to divide 100/7 which is 14.2857142857 and set each box type to that width in percentage. However this is the result i get: screenshot2. What I obviously notice is that the row is to small to contain the calender boxes, does anyone have an idea to fix this? Sorry for my bad english.
.transbox {
background: #fff;
padding: 2%;
width: 70%;
margin-left: 15%;
margin-bottom: 1%;
position: relative;
background-color:rgba(255,255,255,.9);
border-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.9);
overflow: auto;
}
.transbox p {
color: darkslategray;
margin-bottom: 2%;
font-size:13px;
}
.transbox img {
width:100%;
height: 100%;
}
.weekdaysstart {
width: 14%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
float: left;
}
.weekdays {
width: 14%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
float: left;
}
.hint {
width: 99%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
padding-top: 5px;
}
.one {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.nextrow {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
clear:left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.nextmonth {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.lastrow {
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
background-color: floralwhite;
margin-bottom:2%;
}
.pancakes {
width: 14%;
height: 100px;
float:left;
background: url(images/pancakes.jpeg);
background-size: cover;
border: 1px solid darkslategrey;
}
.meatballs {
width: 14%;
height: 100px;
float:left;
border: 1px solid darkslategrey;
background: url(images/kotbulls.jpg);
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Tasty recipes</title>
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<ul>
<li>HOME</li>
<li>RECIPES</li>
<li>CALENDAR</li>
<li class="tastyrecipes">Tasty Recipes</li>
</ul>
<h1>Calendar</h1>
<h3>November 2017</h3>
<div class = "transbox">
<div class="hint">
<p>Click on the image of a dish to go to its recipe-page.</p>
</div>
<div class="weekdaysstart">
<p>Monday</p>
</div>
<div class="weekdays">
<p>Tuesday</p>
</div>
<div class="weekdays">
<p>Wednesday</p>
</div>
<div class="weekdays">
<p>Thursday</p>
</div>
<div class="weekdays">
<p>Friday</p>
</div>
<div class="weekdays">
<p>Saturday</p>
</div>
<div class="weekdays">
<p>Sunday</p>
</div>
<div class="nextrow">
<p>30</p>
</div>
<div class="one">
<p>31</p>
</div>
<div class="one">
<p>1</p>
</div>
<div class="one">
<p>2</p>
</div>
<div class="one">
<p>3</p>
</div>
<div class="one">
<p>4</p>
</div>
<div class="one">
<p>5</p>
</div>
<div class="nextrow">
<p>6</p>
</div>
<a href="meatballs.html">
<div class="meatballs">
<p>7</p>
</div>
</a>
<div class="one">
<p>8</p>
</div>
<div class="one">
<p>9</p>
</div>
<div class="one">
<p>10</p>
</div>
<div class="one">
<p>11</p>
</div>
<div class="one">
<p>12</p>
</div>
<div class="nextrow">
<p>13</p>
</div>
<div class="one">
<p>14</p>
</div>
<div class="one">
<p>15</p>
</div>
<div class="one">
<p>16</p>
</div>
<div class="one">
<p>17</p>
</div>
<div class="one">
<p>18</p>
</div>
<div class="one">
<p>19</p>
</div>
<div class="nextrow">
<p>20</p>
</div>
<div class="one">
<p>21</p>
</div>
<div class="one">
<p>22</p>
</div>
<div class="one">
<p>23</p>
</div>
<div class="one">
<p>24</p>
</div>
<a href="pancakes.html">
<div class="pancakes">
<p>25</p>
</div>
</a>
<div class="one">
<p>26</p>
</div>
<div class="nextrow">
<p>27</p>
</div>
<div class="lastrow">
<p>28</p>
</div>
<div class="lastrow">
<p>29</p>
</div>
<div class="lastrow">
<p>30</p>
</div>
<div class="nextmonth">
<p>1</p>
</div>
<div class="nextmonth">
<p>2</p>
</div>
<div class="nextmonth">
<p>3</p>
</div>
</div>
</body>
</html>
Like Matthew JohnSon said, you could do this using flexbox. I'm not totally sure, but I believe the calc() function will let it fit.
.transbox {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
.weekdaysstart, .weekdays {
width: calc(100% / 7);
}
Edit
I changed the names of the classes to those of your html classes.
You should use a clearfix container per each row.
https://css-tricks.com/snippets/css/clear-fix, and try to use flex instead of float, set each .row display: flex, and then set flex-grow: 1; flex-shrink: 1; flex-basis: auto; to the elements inside the row.
I have a site that is a 1 page with different sections. On the first section I am adding a blue overlay over the first section using the below code:
<header class="text-center" name="home">
<div class="cover blue" data-color="blue"></div>
<div class="intro-text">
<h1 class="wow fadeInDown">Site Header</h1>
</header>
Here is the css for .cover.blue:
.cover{
position: fixed;
opacity: 1;
background-color: rgba(0,0,0,.6);
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;}
.cover.blue{
background-color: rgba(5, 31, 60, 0.6);
In the 2nd section I want to use an orange overlay but when I apply the div for the overlay the overlay on the 1st section is going in front of my text, buttons, etc and the color is changing to orange.
2nd section html:
<div id="about-section">
<div class="container">
<div class="cover orange" data-color="orange"></div>
<div class="section-title text-center wow fadeInDown">
<h2>Section 2</h2>
<hr>
<div class="clearfix"></div>
<h4>Choose</h4>
</div>
</div>
</div>
</div>
Css for .cover.orange
.cover{
position: fixed;
opacity: 1;
background-color: rgba(0,0,0,.6);
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;}
.cover.orange{
background-color: rgba(37, 28, 5, 0.6);}
What am I doing wrong?
Thanks for any input.
If i corectly understand what you want to do, you try to add 1 overlay by section, which you want to cover only his own section.
To do taht, I would choose to add a container for each section (to help standardize behaviour with classes) a use "absolute" positionning rather than "fixed".
.container {
position: relative;
z-index: 1;
}
.cover{
position: absolute;
opacity: 0.5;
background-color: grey;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 3;
}
.cover.blue{
background-color: blue;
}
.cover.orange{
background-color: orange;
}
<header class="text-center" name="home">
<div class="container">
<div class="cover blue" data-color="blue"></div>
<div class="intro-text">
<h1 class="wow fadeInDown">Site Header</h1>
</div>
</div>
</header>
<div id="about-section">
<div class="container">
<div class="cover orange" data-color="orange"></div>
<div class="section-title text-center wow fadeInDown">
<h2>Section 2</h2>
<hr>
<div class="clearfix"></div>
<h4>Choose</h4>
</div>
</div>
</div>
Note: your HTML snippets have issues : in the first, you forgot to close div, and in the second you close the last div twice.
I am learning HTML and CSS. My <h3> text will not align to the center of the page. I know this has to do with the background width being 50%, but I need that in order for the page to be two colors. Any way around this?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact">
<h3>Contact Me</h3>
</div>
</section>
And my CSS:
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 60px;
margin-bottom: 60px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s, transform .35s;
transform: scale(1.0);
}
.affect:hover img {
opacity: 1;
transform: scale(1.15);
}
/* CONTACT */
.contact {
background: linear-gradient(to right, black 50%, gray 50%);
}
h3 {
color: white;
text-align: center;
}
This rule in your CSS is setting the background color of every element to #070606, as you're using the asterisk, which is a wildcard selector that catches everything.
* { background: #070606; }
If you only meant to set the background color of the page to that color, use body instead of *.
Your text is not centered because text-align:center refers to the parent width so it means it's centered in the 50% wide div. In order to center it you can wrap contact and h3 in a wrapper with a position relative. Then set position absolute to h3 (you need to move it out of .contact div) and set 100% width for h3. It should work in that way. Remember that if you position if with absolute you need to set up height for parent.
.contact {
background-color: black;
background-attachment: fixed;
background-size: cover;
width: 50%;
overflow-x: hidden;
position: absolute;
height:100%;
}
h3 {
text-align: center;
font-size: 300%;
position: absolute;
width:100%;
}
.wrapper{
position:relative;
height:200px;
}
<section class="wrapper">
<div class="contact"></div>
<h3>Contact me</h3>
</section>
But this example is not a best approach. The best approach in this case is to make a gradient background (like showed in comments snippets) for the parent container with 50/50 of the colors. This won't make your HTML structure and CSS code messy.
I really need some help with some easy css that I just can't get my head around.
I want to create boxes like in the link below.
I guess I could have the code for just one of them, and then use it over and over again, but how do I create the boxes so that they don't mind the other stuff around them?
Example here: http://s23.postimg.org/qypbfvv0r/boxes.jpg
Here: I have figured out a way of doing this. I hope that this helps you in some way in helping you figure out how to finish your task.
HTML:
<div class="containers">
<p class="heading">Heading</p>
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="containers">
<p class="heading">Heading</p>
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="containers">
<p class="heading">Heading</p>
<div class="inner1"></div>
<div class="inner2"></div>
</div>
CSS:
.containers {
width: 300px;
height: 150px;
border: 1px solid black;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}
.inner1 {
margin-left: 5px;
width: 135px;
height: 80px;
border: 1px solid black;
background-color: blue;
}
.inner2 {
position: relative;
float: right;
top: -60%;
margin-left: 5px;
margin-right: 5px;
width: 135px;
height: 80px;
border: 1px solid black;
background-color: red;
}
.heading {
padding-left: 20px;
}
You can start off using this code. After this you can give border styles and colors to the individual divs.
<div>
<div style="float:right"> Content </div>
<div style="float:left"> Content </div>
</div>
<div style="padding-top:10px">
<div style="float:right"> Content </div>
<div style="float:left"> Content </div>
</div>
<div style="padding-top:10px">
<div style="float:right"> Content </div>
<div style="float:left"> Content </div>
</div>
Hope this helps
So I got a question about DIVs. I want 2 rows with 3 divs in each, centered. But the problem is if I do clear: left; all 6 will be next o eachother. Here is how my code looks like right now and I hope you can help me out.
CSS:
.row1 {
position: absolute;
height: 270px;
}
.row2 {
position: absolute;
height: 270px;
}
.columns {
width: 190px;
height: 274;
border-top: 1px solid #EBEBEB;
border-right: 1px solid #EBEBEB;
padding-top: 25px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 15px;
}
Here is my HTML:
<div id="row1">
<div class="columns"> </div>
<div class="columns"> </div>
<div class="columns"> </div>
</div>
<div id="row2">
<div class="columns"> </div>
<div class="columns"> </div>
<div class="columns"> </div>
</div>
this is one div:
head text
paragraph text
They are all floating next to each other. You should add a clear row where you want to seperate them. We usually call it clearfix.
<style>
.clearfix{ clear:both; }
</style>
</div>
<div class="clearfix"></div>
<div id="row2">
Try to use "display: inline-block" instead of float and remove "position: absolute". Add closing divs for the columns. And change css for the rows to refer to id, not class.
CSS:
.columns {
display: inline-block;
width: 190px;
border-top: 1px solid #EBEBEB;
border-right: 1px solid #EBEBEB;
}
#row1 {
height: 270px;
}
#row2 {
height: 270px;
}
HTML:
<div id="row1">
<div class="columns">1.1</div>
<div class="columns">1.2</div>
<div class="columns">1.3</div>
</div>
<div id="row2">
<div class="columns">2.1</div>
<div class="columns">2.2</div>
<div class="columns">2.3</div>
</div>
JsFiddle: http://jsfiddle.net/a5vKH/1/