I am trying to place some text underneath a picture with a variable height (absolute positioned) I tried setting it to 'relative' but then it won't have the effect of the variable height which I really want for my site.
CSS
header{
background-color: #f49b42;
}
body{
font-family: Lora;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: auto;
clip: rect(0px,10000px,400px,0px);
position: absolute;
}
h1{
font-family: Pacifico;
margin: 0 20px;
}
p#feelgood{
position: absolute;
color: wheat;
margin: 80px 0;
text-align: center;
width: 100%;
text-shadow: 0px 1px #4c2816;
}
p{
margin: 20px;
text-align: justify;
}
span{
font-family: Pacifico;
}
<body>
<header>
<h1> Music </h1>
<img src="https://images.pexels.com/photos/542515/pexels-photo-542515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
<p id="feelgood"> makes me feel good</p>
</header>
<div class="music-quotes">
<p> One good thing about music, when it hits you, you feel no pain.<br>
<span>Bob Marley</span> </p>
<p> If music be the food of love, play on. <br><span>William Shakespeare</span></p>
<p> Where words fail, music speaks. <br><span>Hans Christian Andersen</span></p>
<p> Music is the movement of sound to reach the soul for the education of its virtue. <br><span>Plato</span>
</p>
<p>Music can change the world because it can change people. <br><span>Bono</span></p>
</div>
</body>
here is my jsfiddle (you might not see the effect of the difference of absolute positioning to relative because you can't get it wide enough)
https://jsfiddle.net/goblincake/htgq07pb/
I think this is what you were going for...
https://jsfiddle.net/htgq07pb/5/
header{
background-color: #f49b42;
}
body{
font-family: Lora;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: auto;
clip: rect(0px,10000px,400px,0px);
position: relative;
}
h1{
font-family: Pacifico;
margin: 0 20px;
}
p#feelgood {
position: absolute;
display: inline-block;
color: wheat;
margin: -40% 0;
text-align: center;
width: 100%;
text-shadow: 0px 1px #4c2816;
}
p{
margin: 20px;
text-align: justify;
}
span{
font-family: Pacifico;
}
<body>
<header>
<h1> Music </h1>
<img src="https://images.pexels.com/photos/542515/pexels-photo-542515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
<p id="feelgood"> makes me feel good</p>
</header>
<p> One good thing about music, when it hits you, you feel no pain.<br>
<span>Bob Marley</span></p>
<p> If music be the food of love, play on. <br><span>William Shakespeare</span></p>
<p> Where words fail, music speaks. <br><span>Hans Christian Andersen</span></p>
<p> Music is the movement of sound to reach the soul for the education of its virtue. <br><span>Plato</span>
</p>
<p>Music can change the world because it can change people. <br><span>Bono</span></p>
</body>
Related
I’ve just started to learn HTML/CSS. My goal is to prepare a parallax effect on my test website. I constructed a code with parallax effect in CSS, but the problem is that the images located under the container is unsmooth during scrolling the page (the image extends and rips).
Please consider that I used border-radius method which rounds corners of the containers under which an images are located. I noted that when I cut border-radius method then the unsmoothing effect doesn’t occur. But my goal is to leave this border-radius method unchanged
I know that I can construct similar parallax effect in JS, but my goal is to understand reason why parallax effect doesn’t work correctly in CSS together with border-radius method.
I focused that the unwanted effect occurs only in the case when the browser page is narrowed. Please see the differences between the effect in Codepen one with code (part of the browser page in which finishing page is showed is narrowed):
https://codepen.io/marartgithub/pen/vYpPEjQ
and second one in full page (the problem doesn’t occur):
https://codepen.io/marartgithub/full/vYpPEjQ
I'm sorry if the problem is not the biggest one and for some of you could be insignificant, but my goal is to understand why not all which I wanted works fine to be better programmer.
I would use a :before pseudo tag to achieve this effect. Here are the changes I made:
I remove the about bg div and set each box to flexbox as that will be a cleaner way to acheive this layout.
Then, I removed the border-radius from .about-us-box and added it to .about-us-box:before. In the :before styling, I set it the size of the parent container (.about-us-box) and then set it to have a border radius. You will see box-shadow attribute as border-radius doesn't curve the inside corner. Box-shadow takes care of that for us.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
}
/* n a v */
.nav {
height: 50px;
background-color: #333;
text-align: center;
line-height: 50px;
font-size: 0;
}
.nav-item {
display: inline-block;
}
.nav-item a {
padding: 0 50px;
color: whitesmoke;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
transition: color 0.3s;
font-size: 16px;
}
.nav-item a:hover {
color: royalblue;
}
/* h e a d e r */
.header-jpg {
position: relative;
height: 300px;
background-image: url('https://cdn.pixabay.com/photo/2016/09/29/13/08/planet-1702788_1280.jpg');
background-size: cover;
background-position: 0 50%;
}
.header-text {
position: absolute;
color: whitesmoke;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-bg {
position: absolute;
height: 100%;
width: 100%;
}
.header-text h1 {
direction: rtl;
margin-bottom: 10px;
text-transform: lowercase;
letter-spacing: 2px;
text-shadow: 2px 2px 6px gold;
}
/* m a i n */
main {
margin: 50px auto;
width: 1200px;
}
main h2 {
margin-bottom: 20px;
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-size: 16px;
}
.about-us-box {
position: relative;
height: 300px;
margin: 40px 0;
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
z-index: 0;
}
.about-us-box:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px 0 20px 0;
z-inex: 1;
background-color: transparent;
border-radius: 20px 0 20px 0;
box-shadow: 0 0 0 13px #fff;
}
.top {
background-image: url('https://cdn.pixabay.com/photo/2017/08/06/07/10/coffee-2589761_1280.jpg');
}
.middle {
background-image: url('https://cdn.pixabay.com/photo/2017/06/10/16/19/iphone-2390121_1280.jpg');
}
.bottom {
background-image: url('https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090_1280.jpg');
}
.about-us-text {
text-align: center;
color: whitesmoke;
padding: 2rem 1rem;
background-color: black;
}
.about-us-text h3 {
margin-bottom: 10px;
text-transform: uppercase;
}
/* f o o t e r */
footer {
height: 80px;
line-height: 80px;
background-color: #333;
color: #ddd;
text-align: center;
font-size: 20px;
}
.icon-box {
margin-left: 20px;
}
.icon-box a {
margin: 0 5px;
color: #ddd;
text-decoration: none;
font-size: 20px;
transition: color 0.3s;
}
.icon-box a:hover {
color: royalblue;
}
.ti {
padding-right: 10px;
font-size: 26px;
margin-right: 10px;
}
.elem-main {
width: 300px;
margin: 0 auto;
}
.prices-table {
margin: 0 auto;
}
.prices-table td {
padding: 10px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TASK - WE LOVE COFFEE</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/#tabler/icons#latest/iconfont/tabler-icons.min.css" />
<link rel="stylesheet" href="./css/style_en.css" />
</head>
<body>
<header>
<div class="header-jpg">
<div class="header-bg"></div>
<div class="header-text">
<h1>Creative design</h1>
<p>With our support you will create a dreamlike website</p>
</div>
</div>
</header>
<nav class="nav">
<ul>
<li class="nav-item">home</li>
<li class="nav-item">services</li>
<li class="nav-item">pricing</li>
<li class="nav-item">contact</li>
</ul>
</nav>
<main>
<h2>About us</h2>
<div class="about-us-box top">
<div class="about-us-text">
<h3>We love coffee</h3>
<p>
We interested in coffe in our team on years. We love his smell and
taste. We love the process on which coffee beans goes through
starting from day of cutting during harvest then heat treatment to
grinding process in our coffee grinder and passing it through a
espresso machine.
</p>
</div>
</div>
<div class="about-us-box middle">
<div class="about-us-text">
<h3>We all are creative</h3>
<p>
Characteristic of our work requires from us to be continously a
creative persons, because of competentive market and our clients
demands which expects from us to provide unconventional solutions
supported theri business.
</p>
</div>
</div>
<div class="about-us-box bottom">
<div class="about-us-text">
<h3>We like our job</h3>
<p>
We are young team of simmilar thingking and creative and full
positive energy persons. We meets as well outside of our job to
receive a good balance between proffesionall acvivity and private
life.
</p>
</div>
</div>
</main>
<footer>
<p>
© 2022 Creative design
<span class="icon-box">
<i class="ti ti-brand-facebook"></i>
<i class="ti ti-brand-twitter"></i>
</span>
</p>
</footer>
</body>
</html>
Trying to center link between block 3 and block 2 and make it at the top.
Also, the text is suppose to be white with a blue background.
Can not get it centered and inline with the top of the two block and the text is a purple color instead of white, it's like the blue is filtering the white text.
I stink at css and need some help please.
<!DOCTYPE html>
<html>
<head>
<title>Blocks</title>
<!-- Do not change this file - add your CSS styling
rules to the blocks.css file included below -->
<link type="text/css" rel="stylesheet" href="block2.css">
</head>
<body>
<div id="one">
Turns out you have a really fun time if you
go to work every day and focus on being
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence,
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters
fight fire, what do freedom fighters fight? They never
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote
</a>
</p>
</body>
</html>
body{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 10em ;
border: 2px solid black ;
height: 25em;
}
#three {
display: inline-block;
left:1%;
width: 12em;
margin-top: .25em;
margin-left: .25em;
border: 7px solid orange;
}
#link {
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: blue;
color: white;
width: 7em;
}
#two {
float: right;
right: 75%;
width: 12em;
margin-top: .25em;
margin-right: .25em;
border: 7px solid green;
}
#four {
position: absolute;
margin-top: 8.25em;
width: 12em;
margin-bottom: 12em;
margin-left: .25em;
border: 7px solid yellow;
}
#one {
position: absolute;
margin-top: 17em;
margin-right: 2em;
left: 70.50%;
width: 12em;
border: 7px solid blue;
}
Add color to a tag instead of #link
#three {
display: inline-block;
left:1%;
width: 12em;
margin-top: .25em;
margin-left: .25em;
border: 7px solid orange;
}
#link {
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: blue;
width: 7em;
transform: translateX(50%);
vertical-align: top;
position: relative;
}
#link a{
color: white;
}
#two {
float: right;
right: 75%;
width: 12em;
margin-top: .25em;
margin-right: .25em;
border: 7px solid green;
}
#four {
position: absolute;
margin-top: 8.25em;
width: 12em;
margin-bottom: 12em;
margin-left: .25em;
border: 7px solid yellow;
}
#one {
position: absolute;
margin-top: 17em;
margin-right: 2em;
left: 70.50%;
width: 12em;
border: 7px solid blue;
}
<div id="one">
Turns out you have a really fun time if you
go to work every day and focus on being
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence,
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters
fight fire, what do freedom fighters fight? They never
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote
</a>
</p>
So in order to get your link to change colors, as Master.Deep has stated you need to add the a tag to #link like so:
#link a{
color: white;
}
There are many ways to center something and bring something to the top. I changed your code around a little bit in order to achieve this and to fix some position issues that you have. Pretty much what I did was wrap everything into a container, made that container have position: relative; then set your 4 boxes to their respective corners using position: absolute; on each of them and using the appropriate left right top bottom tags to do so. Then I placed your link to the top with vertical-align: top; and centered it with text-align: top; in the container.
Please see this example:
.container{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 10em ;
border: 2px solid black ;
height: 25em;
position: relative;
text-align: center;
}
#three {
display: inline-block;
width: 12em;
border: 7px solid orange;
position: absolute;
top: 0;
left: 0;
margin: .25em;
}
#link {
display: inline-block;
background-color: blue;
color: white;
vertical-align: top;
width: 7em;
}
#link a {
color: white;
}
#two {
position: absolute;
right: 0;
top: 0;
width: 12em;
margin: .25em;
border: 7px solid green;
}
#four {
position: absolute;
width: 12em;
border: 7px solid yellow;
bottom: 0;
left: 0;
margin: .25em;
}
#one {
position: absolute;
bottom: 0;
right: 0;
width: 12em;
margin: .25em;
border: 7px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Blocks</title>
<!-- Do not change this file - add your CSS styling
rules to the blocks.css file included below -->
<link type="text/css" rel="stylesheet" href="block2.css">
</head>
<body>
<div class="container">
<div id="one">
Turns out you have a really fun time if you
go to work every day and focus on being
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence,
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters
fight fire, what do freedom fighters fight? They never
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote
</a>
</p>
</div>
</body>
</html>
I'm trying to keep my footer down no matter the size of the page. But it gets thrown about when about div encroaches. I want it to display over the about content but for the about content to be scrollable it's too big to display.
Here's the code
fiddle
.footer {
background-color:#FFF;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px;
display: block;
.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width:100%;
min-height: 100%;
margin-bottom: -140px;
}
You need to clear the float. Add clear:both; to the .footer.
(function() {
var img = document.getElementById('container').firstChild;
img.onload = function() {
if (img.height > img.width) {
img.height = '100%';
img.width = 'auto';
}
};
}());
* {
margin: 0;
}
html,
body {
height: 100%;
}
.footer,
{
height: 140px;
display: block;
}
p {
font-family: HindRegular;
font-size: 13px;
font-weight: normal;
display: block;
margin-top: 1.5em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
.article {
float: left;
font-family: HindRegular;
width: 21%;
padding-right: 4%;
color: #999;
}
.article-right {
float: left;
font-family: HindRegular;
width: 21%;
padding-left: 4%;
color: #999;
}
.article-centre {
float: left;
font-family: HindRegular;
width: 21%;
padding-left: 2%;
padding-right: 2%;
color: #999;
}
.blurb {
font-family: HindMedium;
font-size: 24px;
padding-bottom: 100px;
color: #999;
}
.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width: 100%;
min-height: 100%;
/* equal to footer height */
margin-bottom: -140px;
}
.heading {
font-family: HindMedium;
font-size: 24px;
color: #666;
margin-top: 1em;
}
.copyright {
float: left;
}
.contact {
float: right;
font-family: HindRegular;
color: #999;
}
#container {
width: 100%;
}
#container img {
width: 100%;
}
h8 {
font-family: HindRegular;
color: #999;
padding-right: 5px;
font-style: normal;
}
.footer {
clear: both;
background-color: #FFF;
height: 120px;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
}
a {
border-bottom: 1px solid #219edf;
padding: 0;
margin: 0 0 2px 0;
clear: both;
color: #666;
text-decoration: none;
font-weight: normal;
outline: none;
transition: all .15s ease;
}
.services {
width: 100%;
}
a:hover {
text-decoration: none;
color: #999;
border-bottom: 1px solid #999;
}
#details {
color: #666
}
#header {
color: #999;
}
<div class="about">
<div class="blurb">Stunning Imagery and resourceful imaging
</div>
<div class="article">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/OMA%20cctv%20building_.jpg" alt="CCTV building in Beijing By Rem Koolhaas's OMA" />
</div>
<div class="heading">Architectural Photography
</div>
<p>Since 2011 Nathaniel has been scaling China's highs and lows documenting it's varied architectural manifestations for a range of western and Local clients. Often a lone cameraman amongst a sea of Chinese hard hats, part of the job has been to negotiate
sites with little more than a grid reference and reference pictures in inhospitable new cities on the fringes of boom or bust development. Scrambling his way up a half finished sky scrapper fire escapes with little more than a telephone number and
the name of a contractor called Zhou. In the summer of 2017 he relocated to London. He looks forward to shooting a very different type of architecture back home.
</p>
</div>
<div class="article">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/Aerial_drone_photography-.jpg" alt="Aerial Photography with UAV drone" />
</div>
<div class="heading"> Aerial Services
</div>
<p>Large range of services utilizing our fleet of custom built UAS (Unmanned Aerial Systems - AKA drones)</p>
<p>Registered CAA pilot with commercial flight permissons</p>
<p>Up to High resolution stills at 42mp and rich 4k full frame video</p>
<p>Photogrametry - Developing accurately positioned 3D site models up to a 10cm level accuracy</p>
<p>Agronomy - Crop analysis, multispectral imaging</p>
<p> </p>
</div>
<div class="article-centre">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/blank.jpg" alt="Verified View image of existing site with proposed building outline." />
</div>
<div class="heading">Verified Views
</div>
<p>We provide AVR's (Accurate Visual Representations) aka verified views to back up your project proposals with accurate siting in the current landscape.</p>
<p>We don't outsource the photography or site survey whole process is in house</p>
<p>Levels of representation from AVR0 - outlining of proposed project to AVR3 - description of architectural form and materials.</p>
</div>
<div class="article-right">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/Rhizome_logo_square.jpg" alt="Architectural Services by Rhizome" />
</div>
<div class="heading">Rhizome
</div>
<P>Company started in London 2017 to explore and provide bespoke services to small and mid sized architectural firms and developers utilsing emerging technologies in architectural and related fields.</P>
<P>Comming Soon</P>
</div>
<br style="clear: left;" />
</div>
<footer class="footer">
<div class="article"><span id="header">Contact Details</span>
</div>
<div class="article">
<span id="header">Address</span>
<br /><span id="details">Nathaniel McMahon Photography<br />
Maynards Farmhouse<br />
A21, Lamberhurst QTR<br />
Kent<br />
TN3 8AL</span>
</div>
<div class="article-centre">
<span id="header">Mobile</span> <span>+44 (0)7377673765
</span><br/>
<span id="header">Email </span>
nathaniel.mcmahon#gmail.com
</div>
<div class="article-right"> Website and all images <br /><span id="details">© 2017 Nathaniel McMahon Photography</span>
</div>
</footer>
Remove these from your .about class. You should practice some with margin. It doesn't work the way you're trying to use it.
min-height: 100%;
margin-bottom: -140px;
Add clear:both; to your footer declaration.
Also change your body style from height to min-height, so that your body can be larger than the browser.
You can use overflow: hidden on .about and .footer so the floats will stay contained within those containers. You don't need the negative margin on the .about. If you are trying to make the footer stay at the bottom of the page even when the content is very little, you could try positioning the footer absolutely. Here's an example below. You'll need to wrap everything in .wrapper or whatever name you want to use.
.wrapper { min-height: 100%; position: relative; }
.article { overflow: hidden; }
.footer { overflow: hidden; position: absolute; bottom: 0; }
With less content, footer is at the bottom:
https://jsfiddle.net/suefeng/u4coohpp/1/
With more content, footer is still at the bottom:
https://jsfiddle.net/suefeng/u4coohpp/3/
If you want elements to stick out of the .article and .footer containers, or just another option, here's an alternative solution to clearing floats:
You could remove floats on your article and footer containers, but use display: inline-block; with vertical-align: top; instead. You'll need * { box-sizing: border-box; } or change your padding into margin.
https://jsfiddle.net/suefeng/u4coohpp/4/
Also added this to the footer so the email address wouldn't run into the next column:
.footer a[href*="mailto"] {
word-break: break-all;
}
Here's an example of having a fixed footer:
https://jsfiddle.net/suefeng/gv7Lg3e0/1/
.footer {
position: fixed;
bottom: 0;
}
If you are simply trying to pin an element to stay at the bottom of the page and have content scroll under it. You should use position:fixed.
If you update your footer content like so:
.footer {
background-color: #FFF;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px;
display: block;
overflow: hidden;
position: fixed;
left:0;
right:0;
bottom:0;
clear:both;
}
The footer will pin to the bottom. You will also need a spacer after your footer to ensure your scroll bar is sufficient to scroll all content into view.
HTML:
<div class='footer-spacer'></div>
CSS:
.footer-spacer {
height: 160px;
}
Remove these from your .about class. Negative margins will cause odd behavior when it moves an element off page.
min-height: 100%;
margin-bottom: -140px;
Heyah, I have a transition for when you click the 'burger icon'(on mobile screens, max 580px) and then it becomes an 'x', I would like to also add a transition to the menu that then opens, can anyone help me how I can achieve that?
transition: all ease-in-out 0.4s;
Do I use this? and if so where do I put it?
$(document).ready(function() {
$("#burger-container").on('click', function() {
$(this).toggleClass("open");
});
});
$(document).ready(function() {
$("#burger-container").on('click', function() {
$("header nav ul").toggleClass("open1");
$("nav").toggleClass("open1");
});
});
/***** BASE STYLES *****/
body{
font-family: Raleway;
margin: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/************************************/
.wrapper{
max-width: 1180px;
margin: 0 auto;
}
h1.logo {
float: left;
padding: 0;
padding-left: 4%;
}
header nav h2{
height: 0;
margin: 0;
text-indent: -10000px;
}
#main-banner, #main-banner img{
width: 100%;
}
#main-banner img{
border-top: 2px dashed #a5053d;
border-bottom: 4px solid #a5053d;
}
p{
padding: 0 4%;
text-align: justify;
line-height: 170%;
float: left;
}
h2{
text-align: center;
margin: 4px 0 0 0;
}
.bigger{
font-size: 16.25px;
font-weight: bold;
}
.paragraph{
margin-bottom: 4%;
}
.work img{
padding-right: 1%;
}
.work p{
margin-bottom: 5%;
padding: 0 15%;
text-align: center;
}
.work{
text-align: center;
}
#burger{
height: 0;
width: 0;
}
header{
padding: 0;
}
nav{
float: right;
padding-right: 2%;
}
nav ul{
display: flex;
}
nav li{
margin: 10px 20px;
list-style: none;
}
nav li a {
text-decoration: none;
color: #666666;
font-size: 20px;
}
a:hover {
color: #a5053d;
font-weight: bold;
}
/*************FOOTER************/
.links ul {
list-style: none;
display: block;
margin: 0 auto;
width: 300px;
}
.links ul li {
display: inline-block;
}
.links ul img {
margin: 0 4%;
height: 40px;
width: auto;
}
footer{
margin-top: 15px;
}
.bottom{
background-color: #e8e8e8;
height: 70px;
padding-top: 2px;
margin-top: 150px;
}
li img:hover{
box-shadow: 0 0 30px #c1c1c1;
-moz-box-shadow: 0 0 30px #c1c1c1;
-webkit-box-shadow: 0 0 30px #c1c1c1;
-o-box-shadow: 0 0 30px #c1c1c1;
border-radius:100px;
}
/******** BURGER ********/
#media all and (max-width: 580px){
#burger-container{
margin: 25px 0 0 0;
width: 50px;
float: right;
padding-right: 70px;
}
#burger{
cursor: pointer;
display: block;
}
#burger span{
background: black;
display: block;
width: 50px;
height: 3px;
margin-bottom: 10px;
position: relative;
top: 0;
transition: all ease-in-out 0.4s;
}
#burger-container.open span:nth-child(2){
width: 0;
opacity: 0;
}
#burger-container.open span:nth-child(3){
transform: rotate(45deg);
top: -13px;
}
#burger-container.open span:nth-child(1){
transform: rotate(-45deg);
top: 13px;
}
}
/***************mobiles*********************/
#media all and (max-width: 580px){
nav{
width: 100%;
padding-right: 45px;
background-color: #666666;
height: 0;
}
header nav ul{
height: 0;
display: block;
overflow: visible;
}
header nav ul.open1, nav.open1{
height: auto;
}
header nav ul li{
width: 100%;
margin: 20px;
}
nav li a, nav ul li{
color: white;
text-align: right;
display: block;
}
header .wrapper{
width: 100%;
padding: 0;
}
h1 {
margin: 20px;
padding: 0;
}
h1.logo {
padding: 0;
margin: 20px;
}
header{
padding: 0;
}
.paragraph{
padding: 10px 20px 40px 20px;
}
.work p{
padding: 0 0 40px 0;
margin: 0 20px;
}
.work h3{
padding: 0 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="img/heart.png">
<title>heartcube</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/burger.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Raleway" rel="stylesheet">
</head>
<body>
<header>
<div class="wrapper">
<h1 class="logo">Heartcube</h1>
<!-- ............BURGER............ -->
<div id="burger-container">
<div id="burger">
<span> </span>
<span> </span>
<span> </span>
</div>
</div>
<nav>
<h2>Main Navigation</h2>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
</ul>
</nav>
</header>
<!-- START OF HOMEPAGE CONTENT-->
<div id="main-banner">
<img src="http://heartcube.co.uk/img/london.jpg" alt="london banner">
</div>
<div class="wrapper">
<section id="home-menu">
<h2>Betti Bremm</h2>
<p class="paragraph"><span class="bigger">A little bit about me.</span> I'm a young and motivated Webdesigner located in West London. My journey into tech started when I was quite young already, I always loved setting up websites and my own homepages, but without coding
it myself. I've always been fascinated with the internet, it's design and social media. I was hooked and wanted to learn how to build my own site to fit my own specific needs. That curiosity then opened a door that could never be shut. When I
learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for
detail to write clean, elegant code.</p>
<div class="work">
<img src="http://heartcube.co.uk/img/html.png" alt="HTML icon">
<h3>Hand-Coded HTML</h3>
<p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
<img src="http://heartcube.co.uk/img/css.png" alt="CSS icon">
<h3>Well-Organized CSS</h3>
<p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
<img src="http://heartcube.co.uk/img/pencil.png" alt="Pencil icon">
<h3>Ease Converting Designs into Code</h3>
<p>You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.</p>
</div>
</section>
</div>
<!-- ..END OF HOMEPAGE CONTENT-->
<div class="bottom">
<footer>
<div class="wrapper links">
<ul>
<li>
<img src="http://heartcube.co.uk/img/mail.png" alt="Email">
</li>
<li>
<img src="http://heartcube.co.uk/img/twitter.png" alt="Twitter">
</li>
<li>
<img src="http://heartcube.co.uk/img/tumblr.png" alt="Tumblrn">
</li>
<li>
<img src="http://heartcube.co.uk/img/instagram.png" alt="Instagram">
</li>
<li>
<img src="http://heartcube.co.uk/img/linkedin.png" alt="LinkedIn">
</li>
</ul>
</div>
</footer>
</div>
</body>
other links of this code :
Homepage
or on codepen here
Here's a full list of changes to (and notes on) existing snippet I made in order to enable the animation:
You can't animate transition from 0 to auto or to 100%. The only library capable of doing it is velocity.js but they use a kind of a hack to determine the value they are rendering to before animating. To better understand the underlying problem read this.
The article linked above will also explain why I changed animating height to animating max-height.
The #burger element didn't have height and width, making it difficult to use. (One had to click exactly on the lines of the burger on order to open it).
In order to calculate the proper max-height of the element, I chose to wrap your menu inside a wrapper (.animator) as it simplified the JavaScript needed to calculate the height, when opening.
There's no point into making both the container and the contents have height:0 when closed. You're only over-complicating the animation and making it harder for yourself to understand/debug what's going on. So I removed placing open1 on children, I only left it on parent.
There's no point in having more than one instance of $(document).ready(){}. Just place all the code you want to run on that event into one single wrapper.
Generally speaking, there are two types of code you want to run when a page loads:
a. DOM manipulation code - place on $(document).ready(){} - runs first
b. bind to event code - place on $(window).load(){} - runs after
Since this script was a "bind to event" code, I placed it in $(window).load(){}.
Updated pen.
Note: If you ask yourself why I didn't include a SO snippet in the answer and used your pen, the main reason is because your SO snippet is incomplete, as you used relative links for the following assets:
normalize.css,
main.css,
burger.css,
index.js
I'm not the best at CSS and cannot figure out what's wrong. Think it might be the tags I'm using in my sidebar. I would like the nav element with the "vert" id and the div element with the "text-container" id to be NEXT to each other, but the way it is going, it's sending my stuff in the "text-container" into the footer, which is unacceptable.
I'm baffled as to how to get them next to each other. I know elements can be next to each other as it worked in my nav element with the "hor" id with all the a elements next to each other with no problem.
I think it might be the tags, but don't know what I can do about it. I could just axe the navbar as I already have that in the header, but I just spent a lot of time on the navbar to now have to kill it and wish I could keep it.
<html>
<head>
<title> The Resorts </title>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<style>
h1
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 40px;
}
h2
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}
#text-container
{
width: 1045px;
height: 690px; */
zoom: 1;
margin: 0;
display: inline-block
}
#text-container:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility:hidden;
}
#text-container > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
</style>
<div id="content">
<div id="logo">
<img src="./logo.png"></img>
</div>
<div id="container">
<nav id="hor">
<div> Home </div>
<div> The Mountains </div>
<div> The Resorts </div>
<div> Snow Reports </div>
<div> Events & Activities </div>
<div> Plan A Trip </div>
</nav>
<div id="middle">
<nav id="vert">
Home <br/>
The Mountains <br/>
The Resorts <br/>
Snow Reports <br/>
Events & Activities <br/>
Plan A Trip
</nav>
<div id="text-container">
<h1> The Resorts </h1>
<h2> The West Resort </h2>
<p>
The West Resort has everything from wide-open beginner areas to challenging terrain parks to gladed tree skiing hideaways. It has a young, energetic feel, but there's more to it than just jumps and jibs. West is
home to the Children's Sports Center, the Bullwheel Bar and Grill and the Foggy Goggle where fashion shows, movie premieres and live performances are held on a regular basis.
</p>
<h2> The East Resort </h2>
<p>
The East Resort boasts the longest trails in the region serviced by a single high-speed quad. Its long, groomed, cruising trails make it perfect for carving, but it is also home to the Olympic Bowl, the longest,
steepest bump run in the region. After a quick ascent on the Diamond Peaks Express, you'll find an additional 20 acres of beginner terrain up top. With 1,600 vertical feet of uninterrupted corduroy, the East
Resort offers traditional skiers and snowboarders a true alpine experience without having to journey far from home.
</p>
<h2> The North Resort </h2>
<p>
The North Resort is the perfect family-friendly ski resort with 70 acres of gently rolling terrain and historic, log cabins that are terrific for exploring. It is big enough to offer a true winter experience but small
enough to maintain its historical warmth and charm. Spend the afternoon shushing down the slopes or warm up by the fireplace with a cup of hot chocolate at the North Lodge. It is one of the region’s oldest
base lodges with ties that go back to the Big Pines ski clubs of the 1940s.
</p>
</div>
</div>
</div>
<div id="footercontainer">
<footer>
© 2016
</footer>
</div>
</div>
</body>
</html>
==main.css==
#logo
{
border: 1px dashed purple;
width: 1050;
height: 75;
}
#logo > img
{
width: 1050;
height: 75;
}
#content
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 960px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 500;
}
nav
{
border: 10px solid transparent;
padding: 15px;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 170%;
}
nav#vert
{
width: 220;;
height: 540;
margin: 0;
}
body {
color: #000000;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
background-color: #422520;
background-image: url(./image8.jpg);
background-repeat:no-repeat;
background-size:cover;
text-align: center;
background-attachment: fixed;
background-position: center;
}
#footerContainer
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 980px;
background-color: #ffffff;
background-repeat: repeat-y;
}
footer
{
border: 10px solid transparent;
padding: 15px;
text-align: left;
margin: 0 auto;
width: 1000px;
background-repeat: repeat-y;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 170%;
}
#container
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 1045px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 690px;
}
nav > a
{
color: #ccccff;
}
nav#hor > div
{
border: 1px solid white;
float: left;
padding: 10px;
}
nav#hor
{
width: 1000px;
height: 50px;
margin: 0;
}
nav#hor > div > a
{
color: #ccccff;
}
nav#hor>div:hover
{
background-color: #01ff02;
}
Here you go...
https://jsfiddle.net/og9wpLmw/
I coloured the two blocks green and red to make them obvious
I fixed & amp; by putting ; on the ends
I fixed by making it
I made boxes next to each other using display:table-cell;
I put all the CSS into the css file
I fixed the widths in nav#vert by including px in the measurement.
Here is the css that makes the difference:
#text-container {
width: 1045px;
height: 690px;
*/ zoom: 1;
margin: 0;
display: table-cell;
background-color:red;
}
nav#vert {
background-color:green;
width: 220px;
height: 540px;
margin: 0px;
display:table-cell;
}
it might be because your "vert" and/or your "text-container" have too big of widths.
You have a fixed width nav - the width is set to 220px, but then you've got padding / margin etc. so it ends up being 270px wide (nb. If you're not familiar, right click on an element in a modern web browser and select "inspect" you can easily measure elements and check out their properties in CSS).
So to fit your other text-container to the right of it you need to reduce it's width to allow for the width of your nav. This can be achieved easily by using calc
width: calc(100% - 270px);
Add that CSS to your text-container (and remove other width declarations) and it'll work. It's not best practice, but you can enforce this declaration to take precedence by adding !important giving you:
#text-container {
width: calc(100% - 270px) !important;
}
You just need to add that in, or amend your existing CSS and you're good to go.
That works, but the problem I noticed later down the line is that if I have an iframe as the first element in "text-container" and don't have something before that iframe, then the nav bar is messed up again.
Is there another display thing I could use?