I am trying to do some basic web development, but for some reason, there is a huge whitespace between the opening body tag and the first div. How do I move the div to the top /or remove whitespace/ without using 'position: fixed;'?
body {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.top_bar {
margin: 0;
padding: 0;
text-align: center;
background-color: black;
color: rgb(179, 0, 0);
width: 100%;
height: auto;
font-size: 200%;
position: absolute;
}
<div class="top_bar">
generic string
<br>
<br>
<br>
</div>
That is because html, by default has 8px margin. To remove it, use the code below.
* {
margin: 0px;
padding: 0px;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.top_bar {
margin: 0;
padding: 0;
text-align: center;
background-color: black;
color: rgb(179, 0, 0);
width: 100%;
height: auto;
font-size: 200%;
position: absolute;
}
<div class="top_bar">
generic string
<br>
<br>
<br>
</div>
Try It Once
html,body{
margin:0px;
padding:0px;
}
Sorry to post, but apparently I forgot to remove the extra newlines from the header that I send with CGI. It worked out properly.
Related
I have been looking everywhere for a solution to my problem, but nothing seems to work. It always bugged me that the top of my website always had a gap on the top and all the answers to the problem did nothing. I inspected the website in firefox and found that there was a whitespace between the body and first div (I tried putting the code on the same row but that did nothing). Any Idea on how to remove the whitespace? (I can remove it in inspect on firefox and it goes away there)
Here is the HTML and CSS:
/* CSS Document */
html,
body {
height: 100%;
}
* {
overflow: auto;
margin: 0;
}
body {
margin: 0;
background-color: #111111;
padding: 0;
font-family: verdana;
box-sizing: border-box;
font-size: 1rem;
font-weight: 400;
color: white;
text-align: left;
}
video {
width: 100%;
z-index: 0;
}
.menubar {
left: 100;
}
.ulmenubar {
list-style-type: none;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.ulmenubar a {
float: left;
}
.space {
margin: 0;
padding: 0;
}
.rightside {
float: right;
}
.ulmenubar a {
display: block;
color: whitesmoke;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.ulmenubar a:hover {
color: grey;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #181818;
}
::-webkit-scrollbar-thumb {
background: white;
border-radius: 10px;
}
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}
#contact {
width: 200px;
margin-left: auto;
margin-right: auto;
}
#cover {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 5;
width: 100%;
height: 100%;
display: none;
}
<div class="menubar">
<ul class="ulmenubar">
<div class="rightside">
Home
Portfolio
About
Contact
</div>
</ul>
</div>
<div class="space"><video id="background-video" autoplay="" loop="" muted=""><source src="vid.mp4" type="video/mp4"></video></div>
<div id="vids"></div>
<div class="row">
<div class="column">
<img src="https://media0.giphy.com/media/xT8qBoDhee6aWOhLqw/giphy.gif?cid=790b7611a86749120009311d9c18651c96962c8e7e27def2&rid=giphy.gif&ct=g" alt="Sea" style="width:100%">
</div>
<div class="column">
<a onclick="openWin()"><img src="https://media4.giphy.com/media/UxTZDNv0Zej4s/giphy.gif?cid=790b76118b066a194adc23988667623a5aea3c7b55f3c44b&rid=giphy.gif&ct=g" alt="Forest" style="width:100%"></a>
</div>
<div class="column">
<img src="https://media4.giphy.com/media/l41lQIclE3lItAlfq/giphy.gif?cid=ecf05e47mgmmt0kas0kp9zc0435gcanw878chwmk129z9uhf&rid=giphy.gif&ct=g" alt="Sky" style="width:100%">
</div>
</div>
* {
margin: 0px;
padding: 0px;
}
Add this to your CSS
After many hours of trying, I figured out what the problem was. This may not be the case but when I went into the HTML file on text edit, I saw two <body> on the top, I deleted one and also deleted the space between <head> and <body>. It worked.
I'm working at learning css and webdesign and I'm trying to get the basics of how a simple website is organized.
Ideally I would like there to be no space between the main navigation and the main content. Unfortunately, there is a space between them that appearantly even setting both div's margins to 0 won't fix (I originally thought it was just the margins collasping).
body {
background-color: black;
margin: 0 0 0 0;
}
#main-nav {
height: 37px;
width: 100%;
overflow: hidden;
background-color: blue;
margin: 0 0 0 0;
}
#main-content {
height: 100px;
width: 100%;
background-color: red;
margin: 0 0 0 0;
}
p {
color: lime;
}
<div id="main-nav">
<p>This is just a demonstration of my problem.</p>
</div>
<div id="main-content">
<p>This is just a demonstration of my problem.</p>
</div>
There is a space because of p element tag. Browsers set default margin and padding to all the elements. You could add HTML reset to your code to avoid it.
You can check it out - HTML5 Reset
Here is your modified code without the reset.
body {
background-color: black;
margin: 0 0 0 0;
}
#main-nav {
height: 37px;
width: 100%;
overflow: hidden;
background-color: blue;
margin: 0 0 0 0;
}
#main-content {
height: 100px;
width: 100%;
background-color: red;
margin: 0 0 0 0;
}
p {
color: lime;
margin:0
}
<div id="main-nav">
<p>This is just a demonstration of my problem.</p>
</div>
<div id="main-content">
<p>This is just a demonstration of my problem.</p>
</div>
Follow this CSS code
* {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
#main-nav {
height: 37px;
width: 100%;
overflow: hidden;
background-color: blue;
margin: 0;
}
#main-content {
height: 100px;
width: 100%;
background-color: red;
}
p {
color: lime;
}
Add this css:
.main-nav p,
.main-content {
margin:0;
}
I am trying make this layout responsive. The problem I am having is like the images are on foreground. I've tried with background position cover, but did'nt work out. I am not supposed to use any javascript for this
Below is the fiddle link
http://jsfiddle.net/6jhx7du6/
HTML:
<div class="page-wrap">
<h1>Make This Responsive</h1>
<p>While maintaining the heirarchy of importance.</p>
<article class="main-story">
<img src="http://f.cl.ly/items/2e3c2a1Z0D1H3u0W2K12/shera.jpg" alt="Sha Ra Rocking" />
<div class="story-intro">
<h1>Most Important Story</h1>
<p>This article has the most visual weight. image source.
</p>
</div>
</article>
<section class="sub-stories">
<article class="sub-story">
<img src="http://placekitten.com/250/350" />
<div class="story-intro">
<h2>Less Important Story</h2>
<p>This story has less visual weight.</p>
</div>
</article>
<article class="sub-story">
<img src="http://placecage.com/250/350" />
<div class="story-intro">
<h2>Less Important Story</h2>
<p>This story has less visual weight.</p>
</div>
</article>
<article class="sub-story last">
<img src="http://placebear.com/250/350" />
<div class="story-intro">
<h2>Less Important Story</h2>
<p>This story has less visual weight.</p>
</div>
</article>
</section>
</div>
CSS:
* {
box-sizing: border-box;
}
.page-wrap {
width: auto;
margin: 20px auto;
}
.main-story {
position: relative;
margin: 0 0 25px 0;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: lightblue;
}
.story-intro {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.75);
padding: 20px;
color: white;
}
h1 {
font-size: 4em;
}
h1, h2 {
margin: 0 0 10px 0;
}
.story-intro h1 {
font-size: 2.5em;
}
.story-intro p {
margin: 0;
}
.sub-stories {
overflow: hidden;
margin: 0 0 25px 0;
}
.sub-story {
float: left;
width: 250px;
margin-right: 25px;
position: relative;
font-size: 80%;
}
.last {
margin-right: 0;
}
Thanks in advance..
Now define your class .main-story img
this style
.main-story > img{
width:100%;
}
hello what you mean is that you want the design fluid, not responsive,
one solution is to set the width as percent like here:
http://jsfiddle.net/6jhx7du6/1/
.sub-stories {
overflow: hidden;
margin: 0 0 25px 0;
max-width:800px;
}
.sub-story {
float: left;
width: 31%;
margin-right: 3.5%;
position: relative;
font-size: 80%;
}
You need to set a max-width in the container of the image then set the image width to 100%. like this
.sub-story {
float: left;
max-width: 250px;
margin-right: 25px;
position: relative;
font-size: 80%;
}
img {
width:100%;
}
To do that add .sub-story { width: x%;} and .sub-story img { width: 100%;}.
So the image will fill the .sub-story which is now responsive.
You can adjust the width of the .sub-story to 33.33% or 50% or any other value using the #media query in CSS.
Hey try this replace this css to your css code.
and after resizing you need change width and font size according to media queries.
JS Fiddle Link:
http://jsfiddle.net/abidkhanweb/r97d1w64/
* {
box-sizing: border-box;
}
.page-wrap {
width: auto;
margin: 20px auto;
}
.main-story {
position: relative;
margin: 0 0 25px 0;
}
img {
display: block;
max-width: 100%;
height: auto;
width:100%;
}
a {
color: lightblue;
}
.story-intro {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.75);
padding: 20px;
color: white;
}
h1 {
font-size: 4em;
}
h1, h2 {
margin: 0 0 10px 0;
}
.story-intro h1 {
font-size: 2.5em;
}
.story-intro p {
margin: 0;
}
.sub-story img{
width:100%;
height:auto;
}
}
.sub-stories {
overflow: hidden;
margin: 0 0 25px 0;
}
.sub-story {
float: left;
width: 32%;
margin-right: 2%;
position: relative;
font-size: 80%;
}
.last {
margin-right: 0;
}
I am going to make so that you can turn things up on the website like facebook, but this is how I have come into problems with my text content and my footer bar where it just gives some air in between these two.
Html here:
<div class="statusOpslag">
<asp:TextBox ID="TextBoxStatusTekst" CssClass="statusTekst" runat="server" TextMode="MultiLine"></asp:TextBox>
<div class="Statusfooter">
<asp:Button ID="ButtonSend" OnClick="ButtonSend_Click" runat="server" Text="Slå op" CssClass="statusKlikButtonOUT" />
</div>
</div>
CSS here
.statusOpslag {
background: #ffffff;
margin-bottom: 30px;
margin-top: 0;
margin: 10px;
padding: 0;
width: 95%;
}
.statusTekst {
width: 100%;
overflow: hidden;
word-wrap: break-word;
height: 120px;
max-height: 120px;
margin:0;
}
.Statusfooter {
background: #F4F4F4;
padding: 15px;
margin:0px;
}
.statusKlikButtonOUT {
background-color: #5cb85c;
border: 0;
color: green;
}
You can see it problems here
EIDT CSS
I have done as you have described in your answer and it helps nothing. - sorry
.statusOpslag {
background: #ffffff;
padding: 0;
margin: 0;
}
.statusTekst {
width: 100%;
overflow: hidden;
word-wrap: break-word;
height: 120px;
max-height: 120px;
margin:0;
}
.Statusfooter {
background: #F4F4F4;
padding: 15px;
margin:0px;
}
.statusKlikButtonOUT {
background-color: #5cb85c;
border: 0;
color: green;
}
Get rid of all the margins you set. Then, add this in css:
*{
margin: 0:
padding: 0:
}
Once it's set, you don't need to set
margin: 0;
No where again.
Also, in your statusOpslog class you set margin twice:
margin: 10px;
margin-bottom: 30px;
You should only set it once.
If you do not want that margin you got in your question you should not set margin at all for that element.
I have some code to display a separator and header
I currently have
.content-wrap {
width: 1024px;
margin: 0 auto;
}
.content-wrap section section {
background: none;
margin: 0;
}
.content-wrap section {
position: relative;
padding: 125px 0 25px 0;
background: url(http://www.lebiscuit.com.mx/section-sep.png) repeat-x left 25px;
}
h1 {
font-size: 40px;
float: right;
line-height: 50px;
letter-spacing: -0.9px;
color: #ffffff;
padding:25px 0;
}
body {background-color:#b0c4de;}
this is the html
<div class="content-wrap">
<section id="services" >
<h1>title</h1>
</section>
</div>
The desired output is
How to keep the separator and add the separator to h1?
Please find the jsfiddle here
html
Something like
<h1 class="bck"></div>
.bck h1
{
float: right
margin: 10px
background-color:transparent;
}
Since you're using relative positioning on the section, you would do well to use absolute positioning on the heading (h1):
#services h1 {
position: absolute;
margin: 0;
padding: 0;
top: 0;
right: 0;
background-color: lightSteelBlue;
}
The background-color is so the border line does not go through the header.
http://jsfiddle.net/ExplosionPIlls/HR2Xa/2/