I am working on a small project just for my own fun. I have made a navbar at the top of the html page and I used some css to make it look nicer.
Here is the html
<html>
<head>
<title> Website </title>
<style type="text/css">
body {
margin: 0;
background: #F2F2F2;
}
.navbar {
margin: 0;
padding: 0;
width: 100%;
height: 45px;
background: #12B0CD;
position:fixed;
}
#navbar-logo {
font-family:'Lato', Arial;
font-size: 35px;
color: white;
border: none;
background: #12B0CD;
}
.content {
top: 50px;
margin: none;
width: 100%;
height: 50%;
z-index: -1;
}
</style>
</head>
<body>
<div class="navbar">
<div id="navbar-logo">
<button id="navbar-logo">Fancy Name </button>
</div>
</div>
<div class="content">
<div id="content-box">
</div>
</div>
</body>
</html>
If you pop this into notepad and open it in a browser you will see that the class content does not show and I don't know why. I need help. In the normal code I use stylsheets I don't know if that would change anything.
Since your content box is empty, and you are using percentages, the box needs it's parent (body) to have a height. If you set, width:100%;height:100%; on your body you should see the box.
Related
I am struggling with in-page links and fixed header.
I have a sticky header (position fixed) of 50px. This allows me to have the header always visible even if scrolling down in the page.
In my page, I have then a menu with links to other sections in the page.
I used href with IDs target.
Problem is that when I click on the link, the page positions the target at the very top of the page, where the header hides my target section for 50px.
The code below shows the issue
<html>
<head>
<style>
.header {
position: fixed;
top: 0px;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
background-color: red;
height: 50px;
}
.container1 {
content: none;
height: 200px;
background-color: green;
}
.container2 {
content: none;
height: 800px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container1"></div>
<div class="container2">
block1
<div id="block1">Some text</div>
</div>
</body>
This is just how anchors work.
To achieve your goal, try giving the target a padding of your header height. That will fix it.
#block1 {
padding: 60px 0;
}
Hello fellow web developers, I am quite new to web development and have been practicing on my own. I'm trying to create a website and am currently using HTML and CSS. I want the following presentation for the homepage of my website:
I have been testing around with wrappers and body wrappers so that when I open the website on one monitor all the elements are displayed in the middle like the picture above, and when I open the website on my other smaller monitor it should be the same and display all the elements with the same layout. The problem is the navigation bar the title and everything changes position once the window size changes.
Here is the code i currently have:
<!DOCTYPE html>
<html>
<title>WUNI</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<body>
<!-- !PAGE CONTENT! -->
<div>
<!-- NAV BAR -->
<a id="nav">
Archive
Home
Contact
</a>
<div id="title">
<h1 class="max-width">WUNI</h1>
</div>
<p id="motto" class="max-width">With a wide range of skills, we generate cohesive content that
span from physical posters to interactive 3D web content
</p>
</div>
<!-- BODY BORDER XD -->
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<!-- Footer -->
<footer id="footer">
<i></i>
</footer>
</body>
</html>
and here is my css:
body {
background-color: red;
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
}
/**
* Using max-width
* will improve the browser's handling of small windows.
* This is important when making a site usable on small devices.
*/
.max-width {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
/* end of special */
/* NAV BAR */
#nav{
display: inline-block;
padding-top: 20%;
padding-left: 0%;
}
.item{
color: white;
text-decoration: none;
font-size: 50px;
padding-bottom: 20px;
padding-left: 50px;
font-family: Impact;
}
.item:hover{
background-color: blue;
}
/* END NAV BAR */
#title{
position: absolute;
color: white;
font-size: 150px;
text-align: center;
font-family: Impact;
top: 10%;
left: 30%;
}
#motto{
position: absolute;
color: white;
font-size: 20px;
text-align: center;
font-family: Impact;
top: 70%;
left: 20%;
}
#footer{
position: fixed;
left: -3%;
bottom: 0;
padding-bottom: 8%;
width: 100%;
background-color: transparent;
color: white;
text-align: center;
}
/* BODY BORDER */
#top, #bottom, #left, #right {
background-color: white;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 30px;
}
#left { left: 0; }
#right { right: 0; }
#top, #bottom {
left: 0; right: 0;
height: 30px;
}
#top { top: 0; }
#bottom { bottom: 0; }
/* END BODY BORDER */
If anybody could help me out, I would greatly appreciate it! :D
I would recommend using a grid system to achieve this. A grid system solves all the issues you are having currently with your css. One of my personal favorites is bootstrap as it works across browsers, various screen sizes and comes bundled with a bunch of other useful features as well.
As you are new to web development and bootstrap, you can use a visual bootstrap builder such as layitout to get off the ground really quickly.
Also another tip based on your css, you might want to think about making your font sizes responsive too. This answer should be a good starting point
Use Css grid system, with template areas and media queries. In this video is a clear example to achieve what you want https://youtu.be/7kVeCqQCxlk
I'm attempting to learn HTML and CSS, but have run into a tiny stumbling block.
I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Testing My HTML and CSS</title>
<style>
* {
padding: 0;
margin: 0;
}
.header {
background-color: black;
height: 100px;
width: 100%;
}
.header h1 {
margin-top: 0;
text-align: center;
color: white;
height: 100px;
width: 100%;
}
.sidebar {
background-color: #ebebeb;
position: absolute;
width: 200px;
height: 100%;
}
</style>
</head>
<body>
<div class="header">
<h1>Hello, World!</h1>
<div class="sidebar">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>
which can be ran here.
I want to have the <h1>Hello, World!</h1> in the center of the .header. I've tried playing with the margin-top in .header h1, but it moves the entire .header.
Sorry for such a simple question -- I'm a complete newbie.
If your're not planning to add more elements to the header, you can just add line-height: 100px; to the .header h1 ruleset. That's it...
Vertical align can be tricky, if you don't want to mess around with a lot of code, this is the shortest way to accomplish it. As a general rule, to center text vertically into an element, just make its line-height equals to the element's height (unless you have some padding or margin changing stuff).
Use line-height instead as following:
.header {
background-color: black;
height: 100px;
width: 100%;
line-height:2;
}
Please try this demo
or you can try this using
.header{
line-height:3;
}
I tried to recreate the problem I'm having in my current design. First of all, here is the link:
http://cssdeck.com/labs/tohtb9gx
HTML:
<head><title>test</title></head>
<html>
<body>
<div id="container">
Test what is going on?
</div>
</body>
</html>
and css:
body {
margin: 0;
background-color: black;
font-size: 2em;
color: white;
}
#container {
margin: 100px;
}
the problem is margin. When there is this big margin, no matter how little the content is, IE always renders the page with scroll. The page is fine in Chrome and FireFox, but even with no content, the magical mighty IE is always hungry for the mysterious scroll.
Why is this happening?
How can I solve this?
Here is the Solution for your problem.
Give float for body.
body {
margin: 0;
background-color: black;
font-size: 2em;
color: white;
height: 100%;
width: 100%;
float: left;
}
#container {
margin: 100px;
}
<html>
<head>
<title>test</title>
</head>
<body>
<div id="container">
Test what is going on?
</div>
</body>
</html>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make the web page height to fit screen height
I've an HTML page that doesn't take up the whole screen. It just takes the size of the HTML content & the footer is not at the end of the page (as it should be)
How can I fix it?
I just need the footer to be at the end of the page.
My HTML structure is as follows:
<body>
<div id="app">
<!-- Header -->
<div id="header"></div>
<!-- Hero container -->
<div class="container">
<!-- Sub container -->
<div class="container"></div>
</div>
<!-- Footer -->
<div id='footer'></div>
</div>
</body>
My CSS is as follows:
html {
height: 100%;
}
body {
color: hsl(0, 0%, 33%);
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 1;
background: none repeat scroll 0 0 hsl(0, 0%, 98%);
margin: 0;
padding: 0;
height: 100%;
}
* {
outline: 0 none;
}
#app {
min-height: 100%;
margin:auto;
width: 100%;
}
div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,big,cite,code,del,dfn,em,img,small,strike,strong,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tr,th,td,embed,menu,nav
{
border: 0 none;
font: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
}
.container {
margin: 0 auto;
position: relative;
width: 990px;
}
#footer {
margin: 100px 0 0;
}
Can anyone please guide me. I'm new to CSS. :( Stuck bad! :(
EDIT
Can it be because I have float in some of the div elements inside body?
EDIT 2
Strange thing is that even if the page is long and I scroll down, after the footer there's this small strip of white space which never goes.
When I try to select the white space with Firebug, it shows me as the element.
One way would be using Jquery to set the minimum height of the app div to be the height of the screen, which means if the content doesnt fill the screen it will still fill that height.
Something like this would probably do the trick:
$(document).ready(function() {
var screenHeight = $(document).height();
$('#app').css('min-height' , screenHeight);
});
You may need to tweak the style a bit to account for padding, but this has shown some potential in Chrome (I'm away from a windows machine right now). The trick to specifically assign "position: relative" to the container, and "min-height: 100%" to the body, otherwise it doesn't work.
<html>
<head>
<style type="text/css">
body {
min-height: 100%;
padding: 0;
margin: 0;
}
#app {
min-height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
background: red;
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<div id="app">
<!-- Header -->
<div id="header"></div>
<!-- Hero container -->
<div class="container">
<!-- Sub container -->
<div class="container"></div>
</div>
<!-- Footer -->
<div id='footer'>Content</div>
</div>
</body>
</html>
If you only want to position your footer at the bottom of the screen, you do not need to worry about the page's height:
#footer {
position:absolute;
bottom: 0;
}