I'm following an exercise on Pluralsight, but I'm struggling with a part which appears to work on the video, but doesn't with my code.
I've played around with the CSS and tried it in MS Edge and Google Chrome, but the behaviour is the same, so I must be missing something.
I've added a green border in the #wrapper to highlight the problem. There is still a red border above the "The World" header.
Here is the html5 code (super basic btw!):
body {
font-family: sans-serif;
font-size: 14px;
margin: 0;
background-color: red;
}
label {
font-weight: bold;
display: block;
}
input {
width: 150px;
}
/*css selector*/
input[type=text], input[type=password], textarea {
width: 150px;
}
input[type=submit] {
width: auto;
}
#main {
background-color: #e9e9e9;
margin: 0;
}
#footer {
background-color: #222;
color: #eee;
padding: 8px 5px;
position: fixed;
bottom: 0;
width: 100%;
}
.headshot {
max-width: 50px;
border: 1px solid #222;
padding: 3px;
}
.menu {
font-size: 12px;
}
.menu li {
list-style-type: none;
}
.menu li.activeitem {
font-weight: bold;
}
#sidebar {
background-color: #2a2c36;
color: #eee;
position: fixed;
height: 100%;
width: 250px;
overflow: hidden;
left: 0;
}
#wrapper {
margin-left: 250px;
border: 4px solid green;
}
<!DOCTYPE html>
<html>
<head>
<title>The World</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/site.css" type="text/css" />
</head>
<body>
<div id="sidebar">
<img src="Images/User1.jpg" alt="headshot"
class="headshot" />
<span>Joe Soap</span>
<ul class="menu">
<li class="activeitem">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="wrapper">
<div id="main">
<h2>The World</h2>
<p>This will be a fun website soon.</p>
<form>
<div>
<label>Date</label>
<input />
</div>
<div>
<label>Location:</label>
<input />
</div>
<div>
<input type="submit" value="Add" />
</div>
</form>
</div>
<div id="footer">
© 2015 The World Ltd
</div>
</div>
</body>
</html>
Any insights on how to resolve this problem would be great? Also, while a smaller issue, but is it me or does the main body appears to be 1 or 2 pixels higher than the sidebar?
Thanks
UPDATE-1:
I've resolved the problem but I don't understand why that's solving it.
In the #main definition, if I set the padding to 1px it removes the gap above the 'The World' header. If it is set to 0, it is visible. If it is to 4, it removes it, but I can see the content is being pushed further in.
#main {
background-color: #e9e9e9;
margin: 0;
padding:1px;
}
So can someone explain to me why I have to set this to 1px in order to remove this gap and why is it that when I set to 0, it displays it?
Thanks.
Thierry
Add a CSS rule for <h2> with margin:0 or margin-top:0. This overcomes the default browser settings for the element.
The h2 tag gets the style "-webkit-margin-before: 83em" automatically from the browser. You have to reset it explicitly:
-webkit-margin-before: 0
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 2 years ago.
I am developing a website with the help of HTML and CSS. Here, I have two parts of the page, first one - the menu and second part - rest of content. I am seeing an unwanted space between both parts. I checked the code many times but I could not find any reason for this. I used the developer tools to see what could I do. The margin was 0px. When I reduced the margin to -18 or -19px, then I could see both parts joined.
Also, another problem is there. The paragraph text is going outside the container(as shown in the image).
The code is as below -
body {
margin: 0px;
background-color: #d6d6d6;
color: black;
}
a {
text-decoration: none;
color: black;
}
#top{
width: 100%;
height: 80px;
background-color: white;
position: sticky;
box-shadow: 0 0 5px 0.1px;
}
header img {
padding-left: 20px;
padding-right: 20px;
border-right: 1px solid black;
margin-left: 50px;
float: left;
width: 15%;
height: 80px;
}
nav a {
margin: 81px;
font-size: 40px;
font-family: sans-serif;
color: darkgray;
}
nav {
padding: 20px;
}
#container {
width: 1190px;
background-color: white;
margin: 0 auto;
box-shadow: 0 0 5px 0.1px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | Day to Dayz Solutions</title>
</head>
<body>
<div id="top">
<header>
<img src="http://placehold.it/400px80">
</header>
<nav>
Home
Our Services
Contact Us
</nav>
</div>
<div id="container">
<article>
<section>
<h1>About Us</h1>
<p>gwserwsethsyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy5454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454544</p>
</section>
</article>
<footer>© <p>2020 | Site Designed and Developed by Praneet Dixit</p></footer>
</div>
</body>
</html>
I know that the contents of the menu could mess up because I am not using flexbox or anything like that. Please ignore that.
The unwanted space you mentioned is coming because of h1 tag you used for about us.
<h1>About Us</h1>
try changing it to:
<span>About Us</span>
and give custom css to it as you like:
span {
padding: 5px;
margin: 5px;
}
For the content to stay within the box apply this property to your p tag
word-break: break-all;
And if you want your boxes to align one after the other, remove margin from your h1 like this:
h1{
margin: 0;
}
There is a margin on <h1> causing the spacing between header and content. Set margin: 0 to h1 will remove the extra spacing. For the second issue, you may use word-break: break-all; to prevent the text-overflow in the container. Please see code snippet for details.
/* Issue 1: extra space between header and content */
h1 {
margin: 0;
}
/* Issue 2: Overflow with long word */
p {
word-break: break-all;
}
body {
margin: 0px;
background-color: #d6d6d6;
color: black;
}
a {
text-decoration: none;
color: black;
}
#top {
width: 100%;
height: 80px;
background-color: white;
position: sticky;
box-shadow: 0 0 5px 0.1px;
}
header img {
padding-left: 20px;
padding-right: 20px;
border-right: 1px solid black;
margin-left: 50px;
float: left;
width: 15%;
height: 80px;
}
nav a {
margin: 81px;
font-size: 40px;
font-family: sans-serif;
color: darkgray;
}
nav {
padding: 20px;
}
#container {
width: 1190px;
background-color: white;
margin: 0 auto;
box-shadow: 0 0 5px 0.1px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | Day to Dayz Solutions</title>
</head>
<body>
<div id="top">
<header>
<img src="http://placehold.it/400px80">
</header>
<nav>
Home
Our Services
Contact Us
</nav>
</div>
<div id="container">
<article>
<section>
<h1>About Us</h1>
<p>gwserwsethsyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy5454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454544</p>
</section>
</article>
<footer>©
<p>2020 | Site Designed and Developed by Praneet Dixit</p>
</footer>
</div>
</body>
</html>
I just began to play around with HTML/CSS and I'm already stuck.
I tried to google my problem but I think I'm missing some keywords to find a solution. Why isn't the Link and Text inside <div id="NavContent>?
DEMO
body {
margin:0;
background-color: #ffffff;
}
nav {
background-color: #2a9dfc;
padding-left: 20px;
padding-right: 20px;
padding-top: 13px;
padding-bottom: 13px;
}
#NavContent {
border: 2px solid black;
max-width: 900px;
width: 100%;
margin: 0 auto;
}
#Link {
float:left;
}
#Text {
float:right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>scrare</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<nav>
<div id="NavContent">
<a id="Link" href="/">Link</a>
<div id="Text">Text</div>
</div>
</nav>
</body>
</html>
Once you set elements inside a div as float, they lost their influence on height attribute on parent element.
That said, you can:
Set a height for the div; or
Add a empty <div> after <div id="text"> but not inside, with style='clear: both;'
Easy fix is to add overflow: hidden; to #NavContent.
Or you can add the clearfix solution -
#NavContent:after {
content: "";
display: block;
clear: both;
}
body {
margin:0;
background-color: #ffffff;
}
nav {
background-color: #2a9dfc;
padding-left: 20px;
padding-right: 20px;
padding-top: 13px;
padding-bottom: 13px;
}
#NavContent {
border: 2px solid black;
max-width: 900px;
width: 100%;
margin: 0 auto;
}
#Link {
float:left;
}
#Text {
float:right;
}
#NavContent:after {
content: "";
display: block;
clear: both;
}
<nav>
<div id="NavContent">
<a id="Link" href="/">Link
</a>
<div id="Text">
Text
</div>
</div>
</nav>
<main>
</main>
<footer>
</footer>
There are few ways to solve your problem.
Add a suitable height to #NavContent element (like height:200px)
Or
set overflow property of #NavContent to auto
I'm very new to all of this and am trying to build this website, but the main image on the page is not centering. I've tried all sorts of centering things but they don't work. Also, the width percentage is ignored too.
I've readjusted margin/padding to 0. don't know what it could be.
css for the picture:
#pictures img{
width:"70%";
margin: 0 auto;
padding-bottom: 80px;
padding-top: 20px;
}
and the html div that has to do with it:
<div id="pictures">
<img src="img/homepage.png" alt="HomePage"></div>
FULL HTML
<!DOCTTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jacobs Bookeeping</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style-no-grid.css" type="text/css" media="screen">
</head>
<body>
<div class="container clearfix">
<div id="main">
<div id="header">
<img src="img/logo.png" alt="Jacobs Bookkeeping Logo" width="248">
</div>
<div id="twitter">
<img src="img/twitter.jpg" alt="Twitter">
</div>
<div id="facebook">
<img src="img/facebook.jpg" alt="Facebook">
</div>
<ul class="nav">
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
<li class="last">Resources</li>
</ul>
<div id="pictures">
<img src="img/homepage.png" alt="HomePage">
</div>
</div>
</div>
<div id="copyright">
<p>K. RONI JACOBS, <em>KEEPER OF THE BOOKS</em> — EMAIL JACOBS BOOKKEEPING — CALL 206.861.5664 — © 2013 JACOBS BOOKEEPING    </p>
</div>
</body>
</html>
FULL CSS
html {
margin: 0px;
padding: 0px;
}
body {
font-family:'Futura', sans-serif;
color: #FFFFFF;
font-size: 13;
margin: 0px;
padding: 0px;
}
#main {
border-top: 10px solid #EAE1C9;
border-right: 10px solid #EAE1C9;
border-left: 10px solid #EAE1C9;
padding-bottom: 20px;
background: url('../img/bg-jacobs.jpg') repeat;
background-color:#96B9BF;
}
a {
color: #FFFFFF;
text-decoration: none;
}
#facebook img{
float: right;
padding: 45px 5px 10px 10px;
position: static;
}
#twitter img{
float: right;
padding: 45px 50px 20px 0px;
position: static;
}
#header img {
padding: 40px 0px 0px 40px;
float: left;
position: static;
}
ul.nav {
margin-top: 45px;
list-style: none;
text-transform: uppercase;
float: right;
position: relative;
}
ul.nav li {
margin: 0px 50px 0px 60px;
display: inline;
}
ul.nav li a {
color: #FFFFFF;
}
#pictures img{
width:"80%";
margin: 0 auto;
padding-bottom: 80px;
padding-top: 20px;
display: block;
text-align: center;
}
#copyright {
text-align: right;
background: #867131;
border-top: 10px solid #EAE1C9;
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
font-size: 10px;
letter-spacing: 2px;
color: white;
}
.container{
width: auto;
margin: 0 auto;
}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
Put display: block; on it. By default, images are inline.
To center inline —default for image— or inline-block elements, just center it as text. This means, you will need to use text-algin on the parent element:
div#pictures {
text-align: center;
}
The other solution is the one from #One Trick Pony, and display the image as a block element and just then apply the automatic margin.
#pictures img{
display:block;
}
Add this code then i will be centered
i know this is an old post, but wanted to share how i solved the same problem.
My image was inheriting a float:left from a parent class. By setting float:none I was able to make margin:0 auto and display: block work properly. Hope it may help someone in the future.
You have two options:
Remove img from #pictures and then put the image inside that div.
Add the #pictures to the image Tag in html (inline style).
You might remove the display tag in #pictures.
Good luck with that.
I am having a very weird html problem. My main menu is not in its place.
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current">Home</li>
<li>content</li>
<li>search</li>
<li>more</li>
</ul>
<div id="clear"></div>
</div>
<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>
<div id="forms">
<form>
<input type="text" name="submit" size="78" style="font-size:20pt;"/>
</form>
</div>
</div>
</body>
</html>
and here's the css
body {
margin: 0;
padding: 0;
background-color: white;
}
h1,h2,h3 {
margin: 0;
padding: 0;
}
p,ul,ol,li {
margin: 0;
padding: 0;
}
#outer {
background-color: rgb(67,68,71);
}
#outer ul {
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}
#outer li {
float: left;
}
.current {
background-color: rgb(56,63,137);
}
#outer a {
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}
#outer a:hover {
color: black;
background-color: white;
}
#outer .current a:hover {
color: white;
background-color: inherit;
}
#clear {
clear: both;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#pic {
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content {
position: absolute;
top: 60px;
left: 90px;
}
#forms {
margin-top: 50px;
}
Now you may ask that how come i didn't noticed my menu not in placing during early stages of coding. Well the thing is that i was using borders on wrapper div during coding and everything was in place however as soon as i removed the border the whole thing fell apart.
I think it has something to do with the float not being cleared correctly resulting in pic div messing everything up. I would be really appreciative for your suggestions.
Thank you.
I don't know what you mean by "not in its place", but removing a border suggest you have a problem with collapsing margins.
If that's the case, you could solve it by adding overflow: auto or padding: 1px 0 to the rule where you removed the border.
Replace your
<div id="clear"></div>
with
<br id="clear">
or even better change it from and id to a class. That way you can use it multiple times.
For some reason it doesn't work with the div. But the "br" also shorter so I'd prefer that anyway.
As I am transitioning from using template layouts to writing my own css scripts, I have run into many issues, but there's one preventing me from continuing. I have successfully created a 3 column layout with floating divs, however upon browser re-size the right column overlays the middle div. I have imported the script found on Div sections shifts when i resize the window with no success. Basically I want the layout to behave like the current one, at http://www.allstarselectric.com , but using %. I am using % for cross resolution support, so is there a workaround/solution, or are pixels absolutely necessary? Any help would be greatly appreciated.
CSS:
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
color: #666;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background-color: #4a4d51;
background-image: url(images/templatemo_body.jpg);
background-repeat: repeat-x;
background-position: top
}
.content{
position: fixed;
width: 100%;
height: 100%;
background-image: url(images/templatemo_body.jpg);
}
.contentbody{
float: left;
width: 70%;
height: 100%;
}
.wrapper {
width:100%
}
.sidebar{
float: left;
width: 15%;
height: 100%;
border: 0px solid #BBB;
background-color:#dddddd;
}
.sidebar li{
list-style-type:none;
margin:0;
padding:0;
}
.sidebar2{
float: left;
width: 15%;
height: 100%;
border: 0px solid #BBB;
background-color:#dddddd;
}
.sidebar2 li{
list-style-type:none;
text-align: center;
margin:0;
padding:0;
}
.chromestyle{
width: 100%;
font-weight: bold;
}
.chromestyle:after{ /*Adds margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*Affects the background/menustyle*/
.chromestyle ul{
border: 0px solid #BBB;
width: 730px;
height: 45px;
background: url(imgs/navm.jpg) center center no-repeat; /*THEME CHANGE HERE*/
padding: 0 15px;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
/*Affects menu text*/
.chromestyle ul li a{
float: left;
display: block;
color: #000;
padding: 8px 20px;
margin: 0 1px 0 0;
text-decoration: none;
border: none;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
color: #fff;
background: #ff0011
center center repeat-x; /*THEME CHANGE HERE*/
}
.current { color: #fff; background: ; }
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: #d5a30b;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}
HTML:
<html>
<head>
<title>Allstars Electric</title>
<meta name="keywords" content="electricians," />
<meta name="description" content="Electrical Contractor DFW" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/drop.js">
</script>
<style type="text/css">
<!--
.style2 {color: #FFFF00}
.style3 {
font-size: 36px
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function JumpToIt(list) {
var newPage = list.options[list.selectedIndex].value
if (newPage != "None") {
location.href=newPage
}
}
//-->
</SCRIPT>
</head>
<body>
<div class="wrapper">
<div class="sidebar" id="sidebar"><li>home</li></div>
<div class="contentbody">
<center>
<div class="chromestyle" id="chromemenu">
<ul>
<li>Home</li>
<li>Special Offers</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
<li>Themes</li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
1
2
3
4
5
</div>
<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
Electrical
Heating & Air Conditioning
</div>
<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
Dark
Light
</div>
<!-- Dropdown End -->
<br><tr>text/other</br></tr>
</center>
</body>
</div>
</div>
<div class="sidebar2" id="sidebar2"><li>Home</li>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
</div>
</body>
</html>
In your CSS, you have a fixed width set for .chromestyle ul. Change that width to a %, and that should fix your problem.
The first answer to the article you linked provides you with the most reasonable solution: "You can wrap around the two divs with another div of a minimum width you want the page to be viewed in." There isn't much point in trying to fit a page to a 320x240 browser; scroll bars can't be avoided in that kind of resolution.
Something like this
.foowrap { min-width: 550px; width: 100%; overflow:auto; }
.foo { width:30%; float:left; }
<div class="foowrap">
<div class="foo">bar</div>
<div class="foo">baz</div>
<div class="foo">bum</div>
</div>
Then make sure that the total minimum width of the divs inside (class foo in the example) is not more than the min-width you set. Watch out for borders especially.
By the way, you have two </body> and you're using <center>, both of which are things you should avoid. This bit doesn't make much sense either: <br><tr>text/other</br></tr>