I'm trying to figure out why I can't fill this spot, despite trying many things I have been unable to figure out how to fix it. I tried padding the top, but to no avail. I have provided the code below as well as a picture of the space I'm talking about. In the picture there's a white space between the header 2 and the gray area that has a brief summary. I have tried padding and also increasing the height of the background color, but it doesn't seem to work. Thank you in advance for reading this and I really do thank you for taking the time to help me figure this out.
$(document).ready(function()){
$("figure img + figcaption").prev().addClass('hasCaption');
});
.body{
margin: 0px;
}
.homeButton{
width: 40px;
}
#MidPort{
background-image: url("http://www.geocities.ws/spahealthcare/pic/dark-green-home-button.png");
background-size:cover;
position:absolute;
margin-left:1565px;
bottom:10px;
}
.topnav{
font-size: 20px;
font-family: Times New Roman;
position:fixed;
top 0;
width:100%;
}
#bg2{
background-color:red;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow: hidden;
background-color: #333
}
li{
float:left;
border-right:1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.active{
background-color:#4CAF50;
}
li a:hover:not(.active)
{
background-color: #111;
}
li:last-child{
border-right:none;
}
#margintop1{
margin-top: .5cm;
font-family: Gadget;
}
.jumbotron{
height:175px;
background-color:#808080;
}
hr.style17 {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr.style17:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
img.hasCaption {
padding-bottom: 50px;
}
figcaption {
position: absolute;
left: 14px;
right: 14px;
bottom: 16px;
background-color: white;
text-align: center;
color: blue;
font-family: 'Reenie Beanie', cursive;
font-size: 30px;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
left: 0;
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
transform:rotate(-5deg);
}
img {
border-color: white;
border-width: 15px;
-moz-border-image: url(http://tobias-reinhardt.de/img/frame.png) 15 stretch;
border-image: url(http://tobias-reinhardt.de/img/frame.png) 15 stretch;
border-style: solid;
margin: auto;
}
#imgR{
margin-left:1285px;
height:400px;
}
font{
font-family:Gadget;
}
section{
background-color:#00FFFF;
margin-bottom:10cm;
font-family:Gadget;
}
}
<!-- Check to see if the navigation bar remains at the bottom if I use the nav class instead of ul. If not, revert back to ul for when the user scrolls down-->
<div>
<header>
<!--<div class="container">-->
<h2 class="topnav" id="cs2">
<ul>
<li><a class="active" href="/home">Home</a></li>
<li>About Me</li>
<li>Contact</li>
<li id="MidPort"></li>
</ul>
</h2>
</header>
</div>
<body>
<div class="intro-text">
<div class="jumbotron">
<div>
<p id="margintop1"style="margin-right:200px;">
<font color="white">Front-End Developer and Economist, with experience in project management, machine learning, and leadership roles; devoted to functional programming and analyzing mathematical models to solve emerging economic problems
</font>
</p>
<hr class="style17"/>
</div>
<figure>
<img src="http://i.maniadb.com/images/artist/116/116122.jpg" id="imgR">
</figure>
</div>
</div>
<div id="midSec">
<section>
<h2>
<center>
<font color="#2F4F4F" size="20">
Portfolio
</font>
</center>
</h2>
</section>
</div>
</body>
<!--setup a home button at the bottom-->
[![Space is in between Portfolio and the brief summary][1]][1]
You're using an h2 in your code that has a margin.
h2{margin: 0;}
This will fix it.
h2{margin-top:0}
will fix the issue
h2 by default has a margin top . Remove that.
Also, your HTML is not correct . ( that's why i post this as an answer, to explain to the op the problems from his html )
The biggest problem is that you nested ul inside h2 . This practice is not valid.
As stated in the doc
Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.
Heading tags like h1,h2 etc. are pharsing content, ul is a flow content . So you cannot put ul inside h2
You can check your HTML here > HTML validator and check docs here > documentation
Second problem is that you write <li>About Me</li>
So you first open li, then a but you close first the li and then the a. You need to close the a before closing the li. a being a child of li . Correct form :
<li>About Me</li>
Another problem is using tags that are no longer supported in HTML5 . font,center . ( also the use of size is not supported either) You either use inline styles for example <h2 style="font-size:10px;text-align:center"> or you can use CSS styles separately .
These are just the problems i see from a first look over your code
Related
I started making a website and wanted to make a unique shape to go behind my logo and navigation bar. To do this I used clip-path code in my CSS which is new to me and my first time trying this. I am unable to get it to work though as there is either a big gap in between the nav bar and the text on the page if I use relative positioning or it will all be crammed at the top and be layered on top of each other if I use absolute positioning.
I cannot figure out how to get the effect I want. I left it with relative positioning at the moment as it is the closest I could get. Any help would be much appreciated.
body {
z-index: 1;
display: block;
min-width: 44em;
max-width: 60em;
margin: 0 auto;
font-family: 'Times New Roman', Times, serif Arial, Helvetica, sans-serif;
background-color: rgb(76, 119, 175);
}
/*my logos code */
#logo {
z-index: 1;
position: relative;
margin-top: 20px;
margin-left: 10px;
}
/*the purple shapes code */
#purpleL {
z-index: 0;
position: relative;
width: 961px;
height: 80px;
background-size: cover;
background-color: rgba(64, 19, 85, 0.952);
clip-path: polygon(100% 0, 100% 27%, 41% 28%, 0 47%, 0 0);
}
h2 {
text-align: center;
}
.navbar {
z-index: 1;
color: rgb(119, 206, 201);
text-align: left;
padding: 0.25em;
padding-left: 1em;
float: left;
width: 7em;
top: 0px;
}
.navbar ul {
margin: 0;
padding: 0;
position: relative;
top: 2em;
}
.navbar li {
list-style-type: none;
padding: 0.25em;
margin: 0.25em 0;
position: relative;
background-color: darkcyan;
}
#name {
text-align: center;
}
.nav a {
text-decoration: none;
}
nav a:link {
color: black;
}
nav a:visited {
color: purple;
}
nav a:hover {
color: white;
}
nav a:active {
color: blue;
}
/*my solid grey background to go behind everything */
#solid {
z-index: -1;
background-color: grey;
}
<div id="solid">
<!--my logo-->
<img src="images/cm designs.png" width="940" height="180" alt="cm designs" id="logo" />
<div id="purpleL">
<!--the div I used to mark where my purple shape is to go.-->
</div>
<nav>
<ul class="navbar">
<li> Home</li>
<li> acnh calander </li>
<li> about me </li>
<li> art portfolio </li>
<li> contact </li>
</ul>
</nav>
<h2> Home </h2>
<p> Hello! My name is Christie Mattern and I am the creator of this website. I jsut wanted to start by saying thank you for checking out my website! I coded everything myself as well as created all the art for it. On here I have included an about me page
for anyone looking to hire me, a contact page incase someone needs to get ahold of me. This could be becuase there is an issue with the website, about a job offer or because something changed with animal crossing and the calander needs adjusted.
</p>
<p>I also included a page for my art portfolio, I am a freelance artist and my art can be found there. I also designed a calander for the bigs and fish in the new Animal Crossing New Horizons game. I didn't like a lot of the apps and the wikis were not
great. I am wanting to turn this into a full app and am in the process of doing so. For the time being though it is available here and may or may not stay here after the app is done.
</p>
<p> Again, thank you for checking out my website and I hope you like what you see!</p>
<p id="footer">Christie Mattern ∻ Fort Wayne, Indiana ∻ isfsf</p>
</div>
This container stubbornly refuses to center. Demo: http://codepen.io/Diego7/pen/KzXgZN
I've tried just about every centering code I can find on the web, to no avail.
Removing width: 90%; from the css aligns the container to the left, even though margin: 0 auto; is telling it to center.
Sorry if this question isn't up to StackOverflow's 'standards', but codingforums.com are down at the moment :(
Thanks heaps!
HTML
<div class="container">
<article>
<header>
<img src="https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png" width="972px"><br />
<h2>Information</h2>
</header>
<p>There's currently is no information available. Sorry.</p>
<footer>
© 2016
</footer>
</article>
</div>
CSS
##import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
}
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
background: #fff;
border-radius: 6px;
box-sizing: container-box;
}
article header h2 {
color: #282828;
font-size: 1.2em;
font-weight: normal;
display:inline;
line-height: 1.3;
}
article p {
font-size: 1em;
display:inline;
line-height: 1.5em;
color: #282828;
max-width: 972px;
}
article footer {
font-size: .9em;
display:inline;
color: #999;
}
a {
color: #2790ae;
text-decoration: none;
outline: none;
}
a:hover {
color: #0f6780;
}
Your .container is already centered: if you change background to red you will see it. And, if you add text-align property its content will be centered too.
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
border-radius: 6px;
box-sizing: container-box;
text-align:center;
background: red;
}
If you make the width a bit narrower (like 70%), you see that it IS centered.
by the way: " list-style:none;" has no effect whatsoever, and "box-sizing: container-box;" should be "box-sizing: content-box;"
Looks like you're centering the <div class="container">, but it doesn't look like it, because you're looking at the image.
If you want the image to take up the entire <div> element (so that any centering takes effect on both), try something like the following, instead of using an <img> element:
div.container {
background-image: url(https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png);
}
There are other properties you can use to fiddle with precisely how the image is displayed. You can find more info here.
If you are using container after float tag. It can create problem sometimes. So to avoiding this user <div class="clear"></div>. Also clear class properties would be:
.clear{
clear:both;
margin:0px;
padding:0px;
height:0px;
font-size:0px;
line-height:0px;
float:none;
}
Hope it will be helpful..
I am trying to make this exact box with borders lines. you can see after H2 there is new border line and then a paragraph. Please tell me how do I make this? as when I do it with border-bottom:1px solid it just makes a lines but doesn't touch the edges of the main border. here I am attaching the image so you can better understand this here you can see image
my code
<div class="col-sm-8 col-sm-offset-2" id="house">
<h3 class="text">Our house packages include:</h3>
<ul class="lead text" id="list">
<li>Standard site costs (based on 500mm fall to site & ‘M’ Class slab)</li>
<li>Rainwater Tank or connection to recycled water where available.</li>
<li>Concrete driveway (up to 55sqm)</li>
<li>Tiled Front Porch</li>
<li> Internal Floor Coverings</li>
<li> 5+ star gas instantaneous HWS</li>
<li>Wall & Ceiling insulation</li>
<li>‘Classic’ range of inclusions</li>
</ul>
<img src="images/landing.jpg" alt="landing Image">
<p class="note">NB. Please note that all packages are subject to developer and/or council and statutory authorities’ approvals.</p>
</div>
</div>
CSS
#house {
border: 1px solid black;
background:white;
}
#house h3 {
border-bottom:1px solid;
font-size:28px;
font-weight:bold;
margin:10px;
}
#list {
font-size:15px;
margin:15px;
padding:15px;
position:relative;
right:20px;
text-align:left;
}
#house img {
width:40%;
position:relative;
left:500px;
bottom:260px;
}
please tell me how do I make border lines after heading and after list. please take a look into image. It should be responsive.
thank you all
I think your code is missing one div tag on the top, so I'm not able to debug. :/
But this is how I'd solve it if I had to do the same thing:
<style>
html {
background: #EEE;
width: 100%;
height: 100%;
border: 0;
text-align: center;
padding: 40px;
box-sizing: border-box;
color: #AAA;
font-family: calibri;
}
.box{
background: #FFF;
border: 2px solid #DDD;
width: 80%; /*SPECIFY WIDTH HERE*/
display: inline-block;
}
.heading {
border-bottom: 2px solid #DDD;
width: 100%;
padding: 20px;
text-size: 30px;
font-size: 30px;
box-sizing: border-box;
display: inline-block;
}
.content {
border-bottom: 2px solid #DDD;
width: 100%;
padding: 20px;
box-sizing: border-box;
display: inline-block;
}
.footer {
width: 100%;
padding: 20px;
box-sizing: border-box;
display: inline-block;
}
.myList {
display: inline-block;
text-align: left;
padding: 10px;
}
li {
margin: 10px 0;
}
.myImg {
display: inline-block;
padding: 10px;
}
.houseImg {
width: 300px;
}
</style>
<div class='box'>
<div class='heading'>
Our house packages include:
</div>
<div class='content'>
<div class='myList'>
<ul class="lead text" id="list">
<li>Standard site costs (based on 500mm fall to site & 'M' Class slab)</li>
<li>Rainwater Tank or connection to recycled water where available.</li>
<li>Concrete driveway (up to 55sqm)</li>
<li>Tiled Front Porch</li>
<li> Internal Floor Coverings</li>
<li> 5+ star gas instantaneous HWS</li>
<li>Wall & Ceiling insulation</li>
<li>'Classic' range of inclusions</li>
</ul>
</div>
<div class='myImg'>
<img src='http://www.simplyeleganthomedesigns.com/hudson%20cottage%20FL.jpg' class='houseImg'>
</div>
</div>
<div class='footer'>
Some Footer text here
</div>
</div>
The reason h3 is not working the way you want is because you assigned it a margin: 10px; This is going to push the h3 border 10px away from its parent on all sides. If you don't assign it a margin, border-bottom will work fine.
It may be good practice for you to add borders to all elements so you can see how each css rule affects an elements box.
Refer to box model for further information
W3C Box Model
MDN Box Model
1- the border is inside the margin that's img why there is spaces .
try use the padding for h3
padding: 20px;
I fix the list for you as well .
check
jsfiddle
Disclaimer: I'm a Python coder learning to use CSS/html etc etc
Right guys/gals, I'm just working on a sticky bar for my website, and from the picture you will see that the social bar is mis-aligned. Please see attached image. (It's long)
I have used:
* {border: dashed blue 1px;}
within the CSS to see if my divs weren't aligned correctly, but they seem fine.
Here is the html in question (links removed):
<div class="sticky-bar">
<div class="sticky-bar-inner">
<p>©2015 The astrobox.io Project<p>
<ul id="footerlist">
<li class="social"><img src="some link" width="42" height="42"></img></li>
<li class="social"><img src="some link" width="42" height="42"></img></li>
<li class="social"><img src="some link" width="42" height="42"></img></li>
</ul>
</div>
</div>
The CSS in question is:
.sticky-bar {
background: #000000;
bottom: 0;
color: #ffffff;
font-weight: 600;
left:0;
margin: 0;
opacity: 0.95;
padding: 0em;
position:fixed;
width: 100%;
z-index:99999;
}
.sticky-bar-inner {
margin:0 auto;
text-align: center;
width:100%;
background-color: #ffffff;
padding: 3px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #000000;
}
.sticky-bar-inner p {
margin:0 auto;
padding: 3px;
text-align: center;
width:100%;
}
#footerlist li {
display: inline;
list-style-type: none;
/*padding-right: 5px;*/
}
The images are also 512x512 pinned down to 42x42 with the src (could this be a reason) and they are homogenous and come as a set.
If anyone could suggest a fudge fix or better still why it is not aligning correctly I would be very grateful.
Thankyou
Your list has default padding you should remove since it's pushing the contents over to the right a bit:
#footerlist {
padding-left:0;
}
Hey all I posted a question earlier here : Why am I getting white space between my HTML element? which was solved.
I have continued working on this page and have ended up with the following:
IE Screenshot:
http://postimage.org/image/2aqd5k99g/
Chrome Screenshot:
http://postimage.org/image/1xdm95138/
What I really want is basically the chrome screenshot but without the white space below my red footer. What can I do to get this desired effect for both IE and Chrome?
My HTML file is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
</head>
<body>
<img src="final.jpg" id="banner"></img>
<ul id="nav">
<li class="links">Home</li>
<li class="links">Planning</li>
<li class="links">Construction</li>
<li class="links">Evaluation</li>
</ul>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
</div>
<div id="rightcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS file is:
html{
font-family: sans-serif;
background-color:#464E54;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 5px solid black;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#mainc {
float: left;
width: 760px;
background-color: white;
margin: 0;
}
#rightcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 197px;
}
#footer {
clear: both;
background-color: red;
}
.links {
float: left;
margin: 0px;
}
a:link {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
Once again cheers for everyones help - hopefully after this I will be a bit more familiar to these mysterious white lines showing up.
add the following rule
div#footer p {
margin:0;
}
Use inspect element on chrome by right clicking.
you will find the area which is blue by moving mouse over the respected area and then you can solve the problem
Have you checked it on different chrome browsers (From different PCs chrome browsers) or do you have any download manager extension installed on your browser, if yes; then disable that first and then reload your page.
Hope this works for you.
Many of these problems are solved, only by importing and using a CSS Reset. Why don't you use them?
Theory: Browsers apply some default style on HTML elements, and they are not the same in that. For example, IE might add 15px margin to p elements, while Chrome might add 13px. This means that incosistencies can exist between default styles of HTML elements across browsers. CSS Reset is technically a set of CSS rules which zero-outs these default values. For example, you can see that in CSS reset, a p is directed to have 0 margin.
p
{
margin: 0;
}