HTML and CSS below. Div id "black" seems to be pushing a space between itself and the "brown" div above it. When I remove the "black" div, the excess space disappears. I have all margins and padding at zero. Can't sort out what's causing this. ANy suggestions are appreciated.
html {
padding: 0;
margin: 0;
}
body {
font-size: 62.5%;
margin: 0;
padding: 0;
text-align: center;
font-family: raleway;
font-style: normal;
font-weight: 400;
color: #000000;
}
#greyWrapper {
background-color: #303030;
margin: 0;
padding: 0;
width: 100%;
color: #FFFFFF;
height: auto;
}
#Brown {
margin: 0px;
padding: 0px;
width: 100%;
height: auto;
background-color: #644015;
}
#Brown ul {
text-decoration: none;
list-style-type: none;
text-transform: uppercase;
font-size: 0.7em;
margin: 0;
padding: 0;
}
#Brown ul li {
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
#black {
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
width: 100%;
background-color: #000000;
height: auto;
}
<div id="greyWrapper">
<div id="Brown">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolios</li>
<li>Team</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div id="black">
<p>Grab Your Copy Of</p>
<p>The Premium Quality PSD Template</p>
<p>For free Download</p>
</div>
</div>
Your ps have a margin and this margin extends beyond the limits of the #black div and "push against" the #brown div. There's a good explanation in Why does this CSS margin-top style not work?
You can either:
Put a border around #black. The border will force the div to expand so that it contains all of the margins of the children.
#black {
border: 1px solid black;
}
or
Remove the top margin of the topmost paragraph
#black > p:first-child {
margin-top: 0px;
}
It's the automatic margin-before on the <p> tag that is applied by most browsers. Set:
#black p {
margin: 0
}
and you'll see it go away.
Related
I have an h1 inside a nav that is currently centering based on the width of the h1. How would I use text-align so that the title is centered based on the width of the nav?
Here is my HTML and CSS:
* {
margin: 0;
padding: 0;
font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;
}
h1 a {
text-decoration: none;
color: inherit;
}
.logo {
height: 100%;
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
margin: 15px 0;
color: white;
font-size: 44px;
line-height: 55px;
flex: 1 0 auto;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1> The Novel Column </h1>
</nav>
Thank you in advance for your help!
You can set your nav to have a position of relative which means that any inside absolute element will be within the bounds of this element. Then set the h1 to have a position of absolute this will remove the element from the normal flow of the page and have it flow with the parent element with the position of relative. From there you can center it using margin: 15px auto;, left: 0 and right: 0 this will make the h1 element 100% width of the nav thus centering it correctly.
* {
font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;
margin: 0;
padding: 0;
}
h1 a {
color: inherit;
text-decoration: none;
}
.logo {
height: 100%;
}
nav {
background-color: black;
display: flex;
height: 90px;
position: relative;
width: 100%;
}
nav h1 {
color: white;
flex: 1 0 auto;
font-size: 44px;
left: 0;
line-height: 55px;
margin: 15px auto;
position: absolute;
right: 0;
text-align: center;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1> The Novel Column </h1>
</nav>
Now this method also has its fallback, you will lose the ability to click on the logo, but this can be remedied by setting a position of relative and z-index: 2 so the logo element will be higher up than the h1 making it clickable.
Flexbox is perfect approach, and you were nearly there.
I added an empty div with class .ghost to act as a counter balance to the logo. Since I know the logo is 90px wide I set the ghost div to the same, and both the ghost div and the logo get similar flex settings:
.logo {
height: auto;
width: 90px;
flex: 0 0 90px; // same
}
.ghost {
width: 90px;
flex: 0 0 90px; // same
}
Now, with the <h1> allowed to grow (flex: 1 0 auto), it will take up all the rest of the space naturally and remain perfectly centered thanks to the ghost div flanking the right side.
* {
margin: 0;
padding: 0;
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
}
h1 a {
text-decoration: none;
color: inherit;
}
.logo {
height: auto;
width: 90px;
flex: 0 0 90px;
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
margin: 15px 0;
color: white;
font-size: 44px;
line-height: 55px;
flex: 1 0 auto;
}
.ghost {
width: 90px;
flex: 0 0 90px;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1>The Novel Column</h1>
<div class="ghost"><!-- nothing here --></div>
</nav>
I have tried this very same method on a previous website in which it worked. I am not sure why isn't it working now.
body {
max-width: 100%;
}
#header_encapsulator {
max-width: 1000px;
margin: auto;
background-color: orange;
}
header {
position: fixed;
max-width: 60em;
width: 100%;
}
.logo {
float: left;
font-family: 'Tangerine', cursive;
font-size: 3rem;
padding: 0 0 0 1rem;
text-decoration: none;
font-weight: bold;
color: black;
}
nav {
float: right;
padding: 1.5rem 1rem 0 0;
}
nav a {
text-decoration: none;
}
nav a:first-child {
padding-right: .8rem;
}
h1 {
font-size: 2rem;
text-align: center;
padding: 12rem 0 2rem 0;
font-family: 'Roboto Slab', serif;
}
<div id="header_encapsulator">
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
</header>
</div>
<h1>Heading</h1>
I am not sure why margin:auto inside #header_encapsulator doesn't center <header> if I don't specify a max-width. The website will break on a monitor with >1000px width. It doesn't take 10000px value not does it take % values too.
Secondly, the header_encapsulator should show a orange background image edge to edge of the display. It doesn't show. I know that empty divs/sections doesn't display it's properties, but I have done it before, the exact same way.
Edit:
I have created a simpler html and css file with the same code. You can download it here and test it locally. I don't get the orange background 100% of the monitor width.
Don't know if there's any reason to have the #header-encapsulator not being fixed itself instead of the header inside (which causes the encapsulator to be "empty", thus, not having a height), but simply moving the position: fixed property to #header-encapsulatorand adding a width: 100% should fix the issue
Edit: Removed 10000px max-width property from #header_encapsulator and width:100% from header.
body {
max-width: 100%;
}
#header_encapsulator {
width: 100%;
background-color: orange;
/*Put it in here*/
position: fixed;
}
header {
/*Removed it from here*/
max-width: 60em;
margin:auto
}
.logo {
float: left;
font-family: 'Tangerine', cursive;
font-size: 3rem;
padding: 0 0 0 1rem;
text-decoration: none;
font-weight: bold;
color: black;
}
nav {
float: right;
padding: 1.5rem 1rem 0 0;
}
nav a {
text-decoration: none;
}
nav a:first-child {
padding-right: .8rem;
}
h1 {
font-size: 2rem;
text-align: center;
padding: 12rem 0 2rem 0;
font-family: 'Roboto Slab', serif;
}
<div id="header_encapsulator">
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
</header>
</div>
<h1>Heading</h1>
You are specifying max-width: 100%.
This is the maximum width that will be taken up by the div and in order to reach this width, the div element will require enough content to fill it to 100%.
Use width instead of max-width. This will force any div to be the specified width, regardless of content.
Give a height to your #header_encapsulator like so:
#header_encapsulator {
width: 1000px;
background-color: orange;
height: 100px; // or anything you want
}
plus if you want margin: auto header you should do something like:
#header_encapsulator header {
margin: auto;
//other css if you want
}
im getting a white space when im putting text into the div. How to remove that ? i would like to ask you aswell how to make the text "welkom op dennis website" automatic center in the middle of the div.
here you can see the code :
.container {
max-width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: inline-block;
}
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 5%;
width: 100%;
background-color: white;
}
.top {
height: 40%;
width: 100%;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 10px 20px;
text-decoration: none;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
.logo {
color: white;
display: inline-block;
padding: 10px 20px;
font-family: Arial;
text-decoration: none;
}
p.center {
padding: 150px 550px;
color: white;
font-family: Arial;
font-size: 25px;
{}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="container">
<div class="nav">
<text class="logo">Dennis Zwart</text>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</div>
</body>
The space between your navigation and blue text field is from collapsing margins. You'll need to remove the margins created by your <p> element in .top, more on Collapsing Margins.
If you need the text vertically centered as well, you can use relative positioning and translate.
Other Notes
<text> is not a valid HTML element, use <p>, <span>, <div>, <a> etc. instead. I switched it to an <a> in my answer.
I see that you're using percentage heights. Those can be tricky. In order for percentage heights to work a height has to be set on the parent element. If that parent element's height is a percentage, then it's parent needs a height set. So on and so forth all the way to the root element <html> if percentages are used. In my answer I switch the heights to px values.
A number of block level elements (<div>, <nav>) had width: 100%; applied to them, I removed them as they're not needed. A block level element will always take up 100% width of it's containing element by default.
To vertically center your navigation items I set the line-height of the <a> elements equal to the height of the <nav> element.
I removed your .container element as it wasn't doing anything useful. You might need it later (likely in a different location) if you decide to add media queries and limit it's width for various viewport sizes.
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 45px;
background-color: white;
}
.top {
height: 300px;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav .logo {
float: left;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 0 20px;
text-decoration: none;
line-height: 45px;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
p.center {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0;
color: white;
font-family: Arial;
font-size: 25px;
text-align: center;
}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="nav">
<a class="logo" href="#">Dennis Zwart</a>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</body>
This is because p element has natural margins (defined by browser). Remove it:
p {
margin-top: 0;
}
Then remove the p horizontal padding and center your text with
text-align: center;
In order to remove the blank area on the right side of the screen.
p {
margin-top: 0;
text-align: center;
}
.container {
max-width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: inline-block;
}
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 5%;
width: 100%;
background-color: white;
}
.top {
height: 40%;
width: 100%;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 10px 20px;
text-decoration: none;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
.logo {
color: white;
display: inline-block;
padding: 10px 20px;
font-family: Arial;
text-decoration: none;
}
p.center {
padding: 150px 0px;
color: white;
font-family: Arial;
font-size: 25px;
}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="container">
<div class="nav">
<text class="logo">Dennis Zwart</text>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</div>
</body>
I have a header with a div inside of it, for some reason there is more space under the div then above. I tried setting all the padding to 0 in hope to see which one was causing it but it seems to not be a padding at all.
HTML
<header>
<div class="logo">
<div class="centrDivInDiv">
<h1>Welcome to Planet Earth</h1>
<p>The best planet after Pluto.</p>
</div>
</div>
</header>
CSS
body {
margin: 0px;
}
h1 {
margin-bottom: 0px;
}
header {
background-color: #E74C3C;
padding: 10px;
}
header p {
line-height: 0%;
}
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
}
.logo p {
margin-top: 24px;
}
.centrDivInDiv {
display: table-cell;
vertical-align: middle;
margin: 0;
}
JsFiddle
Add vertical-align:middle to your .logo div (and you can remove it from .centrDivInDiv):
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
vertical-align: middle;
}
jsFiddle example
Your problem is caused by the display: inline-block of your CSS. If you remove that or change it for display: blockit will be fine. You should also set your width: 50%
All of that in your .logo
check the fiddle
jsFiddle
The problem exists because you're using display: inline-block; in .logo
The best way to solve this problem is to set font-size to 0 in header so it will be like this:
header {
background-color: #E74C3C;
padding: 10px;
font-size: 0;
}
Also you should set font-size in .logo so it will be like this
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
font-size: 16px;
}
Maybe this link will help you, it has more details
Fighting the Space Between Inline Block Elements | CSS-Tricks
I've been meaning to replace the tables in my site with css positioning and have been trying to teach myself through tutorials etc. I've had some early success but it all came crashing down when I tried to create a sidebar. I'm hoping the problem has some kind of simple solution. The relative/absolute positioning of the elements is not going anywhere close to what I wanted to do. My goal is to have a sidebar with images that stack (float?) from top to bottom, with the middle elements being part of an unordered list. I got it to work once but now that stack on top of each other. It has to be the way I am setting the float and the absolute/relative positioning. After reading some articles here I tried adding a div wrapper to put them inside but I think I got myself even more confused. Is it possible someone could nudge me in the right direction? Here is the code:
CSS
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 50px;
padding: 0px;
color: #696969;
height: 160px;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS ----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* PRIMARY LAYOUT ELEMENTS ---------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
top: 0px;
left: 0px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 0px 4px 4px 4px;
min-height: 420px;
width: 500px;
float: left;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* MISC ----------------------------------------------------------*/
.clear
{
clear: both;
width: 936px;
height: 35px;
}
.title
{
display: block;
float: left;
text-align: justify;
}
.bold
{
font-weight: bold;
}
p.clear
{
clear: both;
height: 0;
margin: 0;
padding: 0;
}
#wrapper
{
position:relative;
height: 500px;
width: 900px;
}
#insidemain
{
position:absolute;
float: left;
width: 500px;
height 180px;
}
/* ---------------- Sidebar Items ---------------------*/
#sidebar /* Sidebar container */
{
position:absolute;
border-top: 1px solid #99CC33;
border-left: 1px solid #99CC33;
height: 300px;
width: 180px;
margin-right: 5px;
padding: 5px 0 0 5px;
}
#sidebarHeader
{
position:absolute;
height: 37px;
width: 172px;
float: left;
background-image: url(../img/TopMenu.jpg);
background-repeat:no-repeat;
}
#sidebarItems ul
{
position:absolute;
height: 27px;
width: 172px;
float:left;
background-image: url(../img/MenuItems.jpg);
background-repeat:no-repeat;
/*left: 6px;
top: 45px;*/
background-position: 0px -27px;
}
#sidebarFooter
{
position:absolute;
height: 46px;
width: 172px;
float:left;
background-image: url(../img/BottomMenu.jpg);
background-repeat:no-repeat;
}
And the HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<link href="Styles/Simple.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div class="header">header
<div class="title">
<h1>
Test Page
</h1>
</div>
</div>
<p class = "clear">clear</p>
<div id="wrapper">
<div id="sidebar">
<div id="sidebarHeader">
</div>
<div id="sidebarItems">
<ul>
<li>test item</li>
</ul>
</div>
<div id="sidebarFooter">
</div>
</div>
</div>
<div id="insidemain">
main
</div>
</div>
<div class="clear">clear</div>
<div class="footer">
<a href="http://www.google.com/">
Blah blah test to see how far this will go across the page blah blha lorem ipsum and various other stuff that is meaningless etc
</a>
</div>
</body>
</html>
Typically (for non-responsive sites especially), you'd have your .wrapper div around the entire content (header, content, sidebar, footer, etc). Then set your .wrappers width. Your .sidebar would have a set width and it would either float: left; or float: right; depending on the side you want it on. Set your .content div's width which would be less than or equal to your .wrapper width - your .sidebar width. Then add your .clearfix below so the .footer falls beneath everything. In most cases (at least for the large page chunks) you can avoid position:absolute; which helps make things more easily fall into place.
You really shouldn't have to float your div's or list. Those are block elements by default and will stack vertically regardless.
Also, as Scrimothy mentioned, you do not want absolutely positioned elements as that will take the element out of the page flow. In other words, they no longer take up "real" space in the page, and instead render at whatever coordinates you position them.
Similarly, floats also take up no space, except with other floated elements. That's why some UI developers will float almost every element on the page and "clear" them using a footer or at key breaks in the page. I personally don't recommend positioning in that fashion, but to each his own.
See if this quick tutorial helps you with some key positioning concepts: HERE
Don't target the same element with both float and position:absolute. It doesn't make much sense. Anywhere where you have float, you should get rid of position:absolute
Next, get rid of those silly class="clear" elements. Instead, target .footer with clear:both and .page with overflow-y:hidden;