I know this is a common problem, but I can't get my header the same size like my screen.
I already tried to wrap the header into another div and make width: 100%. This didn't help.
Thanks for your help!
body {
font-family: 'avenirregular';
padding: 0;
margin: 0;
background-color: #f4f4f4;
width: 100%
}
/* Global */
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
/* Header **/
header {
background: #16205E;
color: #ffffff;
padding-top: 30px;
min-height: 7.5vh;
border-bottom: #2B8AFF 3px solid;
display: table-cell;
vertical-align: middle;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
vertical-align: top;
padding: 0 20px 0 20px;
}
header #branding {
width: 20%;
float: left;
padding-top: 0px;
padding-bottom: 20px;
}
header #home img {
width: 100%;
height: 100%;
}
header nav {
float: right;
margin-top: 20px;
}
<header>
<div class="container">
<div id="branding">
<a id='home' href="index.html"><img src='./img/test_logo_v1.svg'></a>
</div>
<nav>
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
</ul>
</nav>
</div>
</header>
Just remove the display:table-cell from the header
body{
font-family: 'avenirregular';
padding:0;
margin:0;
background-color:#f4f4f4;
width:100%
}
/* Global */
.container{
width:85%;
margin:auto;
overflow:hidden;
}
/* Header **/
header{
background:#16205E;
color:#ffffff;
padding-top:30px;
min-height:7.5vh;
border-bottom:#2B8AFF 3px solid;
}
header a{
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size:16px;
}
header li{
float:left;
display:inline;
vertical-align:top;
padding: 0 20px 0 20px;
}
header #branding{
width:20%;
float:left;
padding-top:0px;
padding-bottom:20px;
}
header #home img{
width:100%;
height:100%;
}
header nav{
float:right;
margin-top:20px;
}
<body>
<header>
<div class="container">
<div id="branding">
<a id='home' href="index.html"><img src='./img/test_logo_v1.svg'</a>
</div>
<nav>
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
</ul>
</nav>
</div>
</header>
</body>
I have a good convention for you to follow which I have designed for myself and it works pretty well. Look Below.
Side-Note: I would remove the UL list. And just use links straight up then you can use CSS to style your menu links. it will make your life easier.
Every page must have a wrapper div to wrap all of your html.
Then inside your wrapper you can manage your content. But your wrapper must always have a width of 100%, and your box-width will will never be full width, the name explains it's purpose. This standard allows you to control your pages full width content such as banner or whatever you may want full width at any level on the page. And then if you have something like text content you use the box-width style class to center you content.
The way in which I have left the code for you will also take mobile into consideration, responsive design is important. But you can optimize it however you feel. :)
To get all your elements inline, investigate these functionalities based on what works best for you.
https://www.w3schools.com/css/css_inline-block.asp ->inline-block
and
https://www.w3schools.com/css/css_float.asp ->float
Then apply the appropriate style to your div elements inside the surrounding div.
<div class="wrapper">
<!-- Header Div -->
<div class="header">
<!-- Your header Content goes here -->
</div>
<!-- Body Div -->
<div class="body box-width">
<!-- Your body Content goes here -->
<!-- This body will be box width -> 1200px -->
</div>
<div class="body-2">
<!-- Your body Content goes here -->
<!-- This body will be full width -->
</div>
<!-- Footer Div -->
<div class="footer">
<!-- Your footer Content goes here -->
</div>
</div>
<style type="text/css">
#media only screen and (min-width: 1024px) {
.wrapper{
width: 100%;
max-width: 100%;
}
.box-width{
width: 1200px;
max-width: 100%;
margin: 0px auto;
}
}
#media only screen and (max-width: 1023px) {
.box-width {
max-width: 90%;
margin: 0px auto;
}
}
</style>
header{
display:inline-block;
width:100%;
}
You have display: table-cell; that means it baheve like table cell... and table cells are content related. You can just remove it and then your header will be display:block that means its automaticly 100%. Retrospectively my answer is not as good as the other one here... so just remove display:table-cell.
Related
What I am trying to accomplish is to get the footer of all my pages underneath the content of the body. All pages will have different sizes of body content. The challenging bit for me is to keep only one CSS for all pages.
I tried my best showing the css and HTML here but no luck. Instead here is a the JSFiddle of my code: https://jsfiddle.net/zsrsd20m/
.container {
min-height:80%;
position:relative;
}
.titleText{
width:100%;
padding-top: 35px;
padding-bottom: 35px;
background-color: #127577;
color: white;
text-align: center;
}
.navBar{
padding-right: 20px;
float:left;
}
.mainText{
height:100%;
padding-left:220px;
padding-right:250px;
padding-bottom:0px;
font-size: 20px;
text-align: justify;
}
.footerText{
width:100%;
padding-top: 35px;
padding-top: 23px;
background-color: #127577;
color: white;
text-align: center;
}
.Container and all the other Divs made in HTML was made because of this: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I want it so that even if the body content is too small the footer always stays at the bottom of the page. Same applies for if the body content is big. Currently when setting the height of the body content to 100% it shows me a scroll bar even when the content is small and doesnt need a scroll bar. When removing the height it makes the footer directly under the small body content which is half good but its not at the bottom of the page so it looks horrible.
Screenshots of the problems:
https://imgur.com/a/x16RC
Wow - that link's old. We've got some better techniques available these days, namely flexbox.
/* The magic: */
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
/* Stlyes to make the demo easier to see: */
body { margin: 0; }
header { background-color: #FDD; }
main { background-color: #DFD; }
footer { background-color: #DDF; }
<body class="Site">
<header>Header</header>
<main class="Site-content">Content</main>
<footer>Footer</footer>
</body>
You can read all about it right here
Use sticky footer CSS https://css-tricks.com/couple-takes-sticky-footer/
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
</body>
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
Try this.
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
<a href="" >Test Link</a>
</p>
<a href="" class="navbar-btn btn-danger btn pull-right">
<span class="glyphicon glyphicon-star"></span>Copyright 2017</a>
</div>
Reference: https://bootsnipp.com/snippets/featured/easy-sticky-footer
I'm experiencing an issue with overflow content in divs. I am using SharePoint and some of the content [namely Libraries or Lists or big webparts containing the aforementioned] will extend past the visible display space, but the body content doesn't scroll properly.
My structure looks something like this:
html {100%}
body { background: #010831; font: 500 1em 'Raleway'; height: auto; min-height: 100%; margin:0; overflow:hidden;}
#container { margin: 0 auto; min-height: 100%; }
#topBar {background: #010831; font: inherit; padding: 5px; height: 80px; margin-bottom: 1px;}
.topline {width:100%; height:20px; font-size:0.8em; color:#fff;}
.social {width: 30%; float:right; text-align: right; font-size: 1.2em;}
#searchBar {width: 25%; float:right;}
#searchBox {border-radius: 10px; width: 250px; background:#343a5d; height:25px; color: #fff; font-size:1.2em;}
#quicklaunch {width:18%; min-height: 35%; color: #666; font: 600 1em 'Raleway'!important; padding-top:4px;}
#main {width:100%; background:#fff; display:flex;}
#s4-workspace {width:auto!important; overflow:auto!important; background:#fff;}
#content {width:80%}
#footer {background:#000; width:100%}
<body>
<div id="s4-workspace">
<div id="bodyContainer">
<div id="container">
<!-- this is the beginning of my custom coding, and my own styles. -->
<header id="topnav">
TOP NAV MENU HERE
</header>
<section id="main">
<div id="quicklaunch"> SIDE NAV HERE</div>
<div id="content"> ALL USER DRIVEN CONTENT GOES HERE</div>
</section>
<footer id="footer"></footer>
</div>
</div>
</body>
What's happening is that the Content div that's set to 80% won't display content that extends past the screen properly. The content overflows but the background is my body color (dark Blue). I can't set the content div width to 100%, as that will make the entire div go under the sideNav AND it affects how webparts then display. [They stretch across the entire screen forever, since by default SP allows the webparts to take up full width of their containing zone].
Essentially, all I want is for the background color of my content div to stretch when the content overflows.
I am trying to make a navigation bar in the top of my website and my logo appears but the "home" doesn't when i try to float left. What am I doing wrong?
When I make the site as small as it will go, it appears left of the logo, but I want it to be to the right.
<html>
<head>
</head>
<style>
body{
margin: 0px;
padding: 0px;
}
#topBar{
background-color: #242424;
height: 63px;
}
#logo{
height: 40px;
}
#logo-item{
float: left;
margin-left: 90px;
padding-top: 10px;
}
.menu-item{
float: left;
margin-top: -28px;
font-size: 110%
margin-right: 20px;
font-color: white;
}
.topBarItems{
}
</style>
<body>
<div id="topBar">
<div id="logo-item"> <img id="logo" src="backflip-logo.png"> </div>
<div class="menu-item">HOME</div>
</div>
</body>
</html>
Here is your code with a few edits:
<body>
<div id="topBar">
<img id="logo" class="menu-item logo-item" src="backflip-logo.png"><!-- Updated the class -->
<div class="menu-item">HOME</div><!-- Updated the tag placement to fall within top bar -->
</div>
</body>
Also edited your CSS a bit:
#topBar{
background-color: #242424;
height: 63px;
}
#logo{
height: 40px;
}
.logo-item{
float: left;
margin-left: 90px;
}
.menu-item{
padding-top: 10px;
float: left;
font-size: 110%
margin-right: 20px;
color: #ffffff;
}
.topBarItems{
}
But, instead of doing everything from scratch, you may just want to use a framework such as Bootstrap : http://getbootstrap.com
Here is a fiddle for it: https://jsfiddle.net/windrunn3r1990/fck4zsue/
There are several problems with this HTML
First you have the style tag between the head and body tag, it should go inside the head tag - which may cause strange behavior or simply not work depending on the browser
You are using a margin of -28px, which effectively moves the inner div above the outer div which in turn renders it invisible (as it is above the visible page).
font-color should be color
You can solve your issue by using display:inline-block; rather than floating components. https://jsfiddle.net/oxycm856/
HTML
<body>
<div id="topBar">
<div id="logo-item"> <img id="logo" src="backflip-logo.png"> </div>
<div class="menu-item">HOME</div>
</div>
</body>
CSS
#topBar{
width:100%;
background-color:#242424;
height: 63px;
}
#logo-item, .menu-item{
display:inline-block;
color:#fff;
}
I have Googled this and tried all they suggested and it doesn't seem to be working.
I am making a template - so it all has to be in one HTML file. I am guessing something is screwy with my CSS that I'm just not catching... I've scanned it several times though.
Picture of problem (I want the white to extend to the bottom of the page; even if there isn't enough content):
CSS (there is more, but I figure these are the only ones that matter):
html, body
{
padding: 0px;
min-height: 100%;
margin: auto;
background-image: url("http://www.pixieduststudio.net/images/stripes.png");
background-repeat: repeat;
}
#wrapper
{
width: 80%;
margin: auto;
background-color: transparent;
}
#navbar
{
background-color: white;
text-align: center;
width: 100%;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
display: block !important;
margin: auto;
height: 75px;
}
#sidenav
{
width: 20%;
float: left;
border-bottom-left-radius: 5px;
border-right: 1px solid pink;
background-color: white;
}
#content
{
padding: 25px;
width: 80%;
float: left;
background-color: white;
margin: auto;
}
#content #pageTitle
{
margin: 0;
padding: 25px;
letter-spacing: 3px;
}
#pageContent, img
{
width: 80%;
}
HTML
<div id="wrapper">
<div id="navbar" class="navbar navbar-default" role="navigation">
<ul id="nav">
<!-- LINK ARE HERE BUT I REMOVED THEM -->
</ul>
</div>
<div id="sidenav">
<div id="socialBar">
<img src="http://www.pixieduststudio.net/images/facebook.png">
<img src="http://www.pixieduststudio.net/images/Instagram.png">
<img src="http://www.pixieduststudio.net/images/EmailUs.png">
</div>
<div id="shopBar">
<img src="http://www.pixieduststudio.net/images/shoppen.png">
<hr class="section">
<figure>
<img class="icon" src="http://www.pixieduststudio.net/images/bag.png">
</figure>
<img src="http://www.pixieduststudio.net/images/shopinfpen.png">
<hr class="section">
<div class="sidelinks">
<li>Meet Pixie</li>
<li>Shipping</li>
<li>Site Map</li>
<li>Order Tracking</li>
<li>Guest Chat</li>
</div>
<img src="http://www.pixieduststudio.net/images/searchpen.png">
<hr class="section">
<p style="margin: 25px;">%SEARCH_SITE%</p>
</div>
</div>
<div id="content">
<img id="pageTitle" class="img-responsive" src="http://www.pixieduststudio.net/images/headertitle.png" />
<hr>
%CONTENT%
<!--<p id="pageContent" style="padding: 25px;">
<img src="http://www.pixieduststudio.net/images/camp.png">
</p>-->
</div>
<div id="foot">
<!--<img src="images/footer.png">-->
</div>
</div>
You have to move background-color: white; to #wrapper, which is the container of both the content and the sidebar, to make the full box bg white.
Change #sidenav and #content to display: inline-block rather than float: left to allow #wrapper to adjust to the height of its contents. Add vertical-align: top so they will properly top-align to eachother.
#wrapper
{
width: 80%;
margin: auto;
background-color: white;
}
#sidenav
{
width: 20%;
display: inline-block;
vertical-align: top;
background-color: white;
}
#sidenav .nav {
border-bottom-left-radius: 5px;
border-right: 1px solid pink;
}
#content
{
padding: 25px;
width: 80%;
display: inline-block;
vertical-align: top;
margin: auto;
}
You'll also have to get rid of the 1px right border on #sidenav, which will make the contents of #wrapper add up to more than 100% of its with (and therefore wrap).
Change your sidenav content to:
<div id="sidenav">
<div class="nav">
...
</div>
</div>
In order to fix this, you can change the height of your container to use the vh unit
In your css, set the height of your main content container to:
#content
{
height: 100vh;
}
This will set the height of the container to 100% of the browsers vertical height in the viewport, please note this may have compatability issues with older browsers.
In the case of your problem, you will also need to set the parent elements height to 100vh too, this is because the child element (your main content) will fit to 100% of its parents height, which doesn't fit the whole page, to fix this, add the following to your css:
#wrapper
{
height: 100vh;
}
The child elements will now be able to fill the entire screen.
Consider the following example...
CSS
html,
*
{
border : 0;
box-sizing : border-box;
margin : 0;
padding : 0;
}
#wrapper
{
background-color : red;
display : flex;
min-height : 100vh;
}
#col-1
{
background-color : blue;
display : block;
float : left;
width : 25%;
}
#col-2
{
background-color : yellow;
display : block;
float : left;
width : 75%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport"
content = "width = device-width, initial-scale = 1.0"
>
<link href = "CSS/Example.css"
rel = "stylesheet"
type = "text/css"
>
<style>
</style>
</head>
<body>
<div id="wrapper">
<div id = "col-1">
<p>Column1</p>
<p>Column1</p>
<p>Column1</p>
</div>
<div id = "col-2">
<p>Column2</p>
</div>
</div>
</body>
</html>
The * section in the CSS file gets rid of any default borders, margins and padding for all elements unless they are subsequently specified. The box-sizing : border-box; line makes sure that any borders, margins and padding are contained within the specified width and height, which makes laying out a page much easier.
Please visit https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for an explanation of flexbox.
Applying this structure to your page should solve the specified problem nicely.
If you have any questions, then please feel free to reply.
I have written this code,all the divs are working properly also the nav is. But the black color of the "header" does not seem to work. I have posted the whole code below.Please have a look at the following code.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
padding: 0;
}
#container
{
margin: 0 auto;
width:100%;
height: 1500px;
padding: 0px;
}
#header
{
background-color: black;
margin: 0px;
}
#logo
{
background-color: green;
}
#headTable
{
float:right;
}
#logo
{
margin: 5px 0px 5px 70px;
float: left;
width:150px;
height:100px;
}
#headTable ul
{
list-style-type: none;
margin: 0;
}
#headTable ul li
{
color: black;
float: left;
margin: 10px 50px;
}
#nav
{
clear: both;
width:100%;
height: 100px;
background-color: purple;
}
#nav ul
{
margin-left: 100px;
padding: 0;
}
#nav ul li
{
display: block;
margin: 10px;
padding: 20px;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="plane.jpg" width="150" height="100">
</div>
<div id="headTable">
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Menu</li>
<li>Blog</li>
<li>Ins</li>
<li>BBC</li>
<li>Contact</li>
<li>Others</li>
</ul>
</div>
<div id="content">
<div id="page">
<p>This is a paragraph that should
stay intact inside the id of Page.
</p>
</div>
<div id="top">
<p>THis is a paragraph that should
stay intact inside the id of top.
</p>
</div>
<div id="low">
<p>This is a paragraph that should
stay intact inside the id of bottom.
</p>
</div>
</div>
</div>
</body>
</html>
Add overflow:auto to #header:
#header {
background-color: black;
margin: 0px;
overflow:auto;
}
jsFiddle example
Floating the content makes the parent act as if there's no content and it collapses. Adding the overflow rules restores the behavior you seek.
Because #header in this context has no defined size because the only elements it contains have floats.
Three easy ways around this:
Explicitly define dimensions for #header.
Add display:inline-block to #header.
Use a clearfix after the two floated elements in #header. This is done most commonly by using <div style="clear:both;"><!-- --></div>
you must put some "Height" to you #header tag in CSS. Good Luck !
I created a jsfiddle : http://jsfiddle.net/JsA7y/.
So , of course I might have the same "problem" as you ;
the img src point nowhere (in the jsfiddle).
? Where does your img point to ?
? Is the img in the same directory as your html ?
=> Other wise , you will need to use the correct uri ;
such as , if the img is in a directory at the same level as the html :
<img src="directory/plane.jpg" width="150" height="100">
...
Hope this helps.