This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 10 months ago.
I have
<!DOCTYPE html>
<html>
<head>
<title> Friends </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
background-image: url(images/RegisterAndLoginBackground.jpg);
}
body {
margin: 0px;
}
h1 {
margin-top: 3%;
margin-bottom: 4%;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #03cafc;
}
#Home, #AddFriends {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
li a:hover {
background-color: #058db0;
}
#AddFriend, #RequestsOne, #RequestsTwo {
text-align: center;
padding: 10px;
width: 14%;
height: 30%;
margin-top: 15px;
margin-bottom: 15px;
margin-right: auto;
margin-left: auto;
background-color: #03cafc;
}
input {
width: 60%;
height: 15%;
}
#AddFriendButton {
margin-top: 6%;
border-style: solid;
background-color: #8ae7ff;
border-color: #004354;
width: 50%;
height: 100%;
font-size: 20px;
}
</style>
</head>
<body>
<main>
<div id = "NavBar">
<ul id>
<li id = "Home"> Home </li>
<li id = "AddFriends"> Friends </li>
</ul>
</div>
<div id = "AddFriend">
<h1> Add Friend </h1>
<label for = "Username"> Username: </label>
<input type = "text" id = "Username">
<button id = "AddFriendButton"> Add Friend </button>
</div>
<div id = "RequestsOne">
<h1> Requests Received </h1>
<ul id = "RequestsReceived">
</ul>
</div>
<div id = "RequestsTwo">
<h1> Requests Sent </h1>
<ul id = "RequestsSent">
</ul>
</div>
</main> //Some more code
My problem is that AddFriendButton height does not work. I know the parent height has to be defined, which I believe I did. On another page, it worked. I'm not really sure, this is my first time making a large website. I know it will work if I use pixels instead. It will also get larger if I change the font size, but why won't height percentage work?
The containing block for #AddFriendButton is #AddFriend
It is a percentage of its height.
The height of #AddFriend is 30%.
Again, it is a percentage of the height of the block containing it.
The containing block for #AddFriend is main
But main has no height.
Therefore, browsers cannot calculate heights by percentages.
Try to give specific height to main.
Related
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 have the following HTML5 code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
max-width: 960px;
margin: 0 auto;
font-size: 120%;
}
header, nav {
margin: 0;
padding: 0;
border: 1px solid black;
}
header {
border-color: red;
}
img.mainpicture {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<img class="mainpicture" src="http://s29.postimg.org/ajjbb0n07/apic.jpg" alt="A picture"/></header><nav>Navigation area.</nav>
</body>
</html>
Can someone please explain why there is about 5 pixels of empty space between the <header> and the <nav> content, and how can I remove it?
By adding
header {
padding-bottom: 1px;
}
to the CSS file, the height of the white space is extended by one pixel, so it doesn't seem to have anything to do with the padding of <header>.
EDIT: I would like to do it without using <nav style="position: relative; top:-7px;">.
Set display block on the image for fixing fitting issues.
body {
max-width: 960px;
margin: 0 auto;
font-size: 120%;
}
header,
nav {
margin: 0;
padding: 0;
border: 1px solid black;
}
img.mainpicture {
width: 100%;
display: block;
}
<header>
<img class="mainpicture" src="//lorempicsum.com/futurama/960/200/2" alt="A picture" />
</header>
<nav>
Navigation area.
</nav>
Just add
img.mainpicture{
.....................
.....................
vertical-align: top;
}
That will fix the issue:)
It could be because of the inner elements having a margin, that is protruding outside! And also since you have an <img />, give a display: block; to it. Try overflow: hidden; for both header, nav:
header, nav {
overflow: hidden;
}
header img {
display: block;
}
Set the property margin-bottom equal to zero.
margin-bottom: 0;
Hi I'm trying to style the tab sample i found on net.
here is the sample :
<html>
<head>
<meta charset="utf-8">
<title>Tabs 2</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
}
#header a {
display: block;
padding: 0 1em;
}
#header #selected {
position: relative;
top: 1px;
background: white;
}
#content {
border: 1px solid;
clear: both;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>
the problem is i want to add the background color for header and set it's width to 100%.
see the difference when i add this css code:
#header{
width:100%;
background-color:#b6ff00;
overflow:hidden;
}
before ( selected tab is merged with content )
after ( selected tab has a border-bottom )
how to fix this?
It's because you are adding overflow:hidden to header and
you haven't cleared floats
below are solutions
Clear:both
Here is definition of clear
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats you'll have to command the browsers somehow to stretch up the container all the way.
Here is your solution and A Quick Fix
"Clearing", 21st Century Style
ul:after {
clear: both !important;
content: ".";
display: block;
float: none;
font-size: 0;
}
Here is Fiddle http://jsfiddle.net/krunalp1993/g9N3r/4/
Older Solution
HTML
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
<li class="clear"></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
CSS
#header {
background-color: #B6FF00;
overflow: visible;
position: relative;
top: 1px;
width: 100%;
}
.clear { clear : both; float:none !important}
Fiddle http://jsfiddle.net/krunalp1993/g9N3r/3/
I have just shown a quick clearing technique there are many others
You can see more ways http://www.quirksmode.org/css/clearing.html
Hope it helps you :)
I tried to make a banner for my website I'm creating, but when I add it to my website, it turns out really bad with the text. I'm wondering if I can add text to my banner using HTML5 and / or CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
display: block;
width: 100%;
}
.banner_h img{
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
I'm trying to center / centre my text on the banner, with a white coloured font (font can be varied). What do I have to do to make this happen? Thanks!
It depends on the kind of text you will be adding to the banner. If you want to add text that will be static (as in, it will never or rarely change) and want to add custom fonts, you should probably edit the image in Photoshop.
On the other hand, if the content in the banner will change constantly, then I would suggest adding the image as a background. Your banner h class would look something like this:
.banner_h{
display: block;
width: *actual pixel size of the banner*;
height: *actual pixel size of the banner*;
background: url('*location of file*') no-repeat;
}
If you leave the width to a percentage what will happen is that the div will not have anything inside of it and thus will not show the banner, so you need to figure out what the actual width and height of the banner is and put it in this CSS declaration so that it shows the banner.
Once you have done this, delete the image from the tag and replace it with the content you wish to add.
I have a list like this:
<html>
<head>
<link type="text/css" rel="stylesheet" href="testli.css">
</head>
<body>
<ul id='grok'>
<li>
<img src='na' class='cimg' />
<div class='cinner'>
<p>Title, max two lines.</p>
<p>Some longish text, max two lines, causes problems when too long.</p>
</div>
<div style='clear:both'></div>
</li>
<li>
<img src='na' class='cimg' />
<div class='cinner'>
<p>Title</p>
<p>Some longish text here which may wrap some and cause problems..</p>
</div>
<div style='clear:both'></div>
</li>
</ul>
</body>
</html>
// testli.css
* {
margin:0;
padding:0;
}
#grok {
list-style-type: none;
width: 200px;
}
#grok li {
background-color: lightgreen;
margin: 5px;
padding: 5px;
text-align: left;
}
.cimg {
width:70px;
height:44px;
float:left;
}
.cinner {
float: left;
margin: 0px;
padding: 0px;
margin-left: 10px;
font:14px;
}
when the text in the p elements is short, the layout behaves as I want - the thumbnail and the text should appear as if they're in two separate columns. I'm basically looking to recreate the thumbnails youtube has for recommended items - thumbnail on the left, some text in another column to the right of it. Title and text each allowed two lines of text each.
If the text is too long, the cinner div gets placed below the thumbnail. What's the right way to force it to always be to the right?
Thanks
You could do it by setting a min-height on the <li> and then absolutely positioning the image to the left of the title and description:
#grok {
list-style-type: none;
width: 200px;
}
#grok li {
position: relative;
margin: 5px;
padding: 5px;
min-height: 44px;
/* min-height fix for IE6. Ideally this would be in an IE6 only stylesheet */
height: auto !important;
height: 44px;
background-color: lightgreen;
}
.cimg {
position: absolute;
left: 0;
top: 0;
width: 70px;
height: 44px;
}
.cinner {
padding: 0 0 0 80px; /* Makes room for the image so it doesn't overlap text */
font: 14px;
}
Add max-width to .cinner (if I don't mistaken - max-width: 110px).