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.
Related
I'm trying to altar two buttons (Easy, Hard) on a web app I'm building. I am trying to alter them to remove their borders, and when a button is selected, I want to background to flow up into the header as a visual indication for being selected.
Note: I am linking Bootstrap 4 at the moment.
Current Visual:
Desired Visual:
body {
background-color: #232323;
}
.header {
text-align: center;
color: white;
padding: 1.5rem;
background-color: #66b0c4;
}
.header h1 {
margin: 0;
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0 auto;
}
#stripe {
background-color: white ;
height: 30px;
text-align: center;
color: black;
}
.selected {
background:#66b0c4;
border: none;
}
<div class="header">
<h1>The Great <br><span id="colorDisplay">RGB</span><be>
Color Game</h1>
</div>
<div id="stripe">
<button id="reset">New Colors</button>
<span id="message"></span>
<button id="easyBtn">Easy</button>
<button id="hardBtn" class="selected">Hard</button>
</div>
I hope this can help you.
body {
background-color: #232323;
}
.header {
text-align: center;
color: white;
padding: 1.5rem;
background-color: #66b0c4;
}
.header h1 {
margin: 0;
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0 auto;
}
#stripe {
background-color: white ;
height: 30px;
text-align: center;
color: black;
padding-top: 5px;
}
.selected {
background:#66b0c4;
border: 0;
padding: 5px;
position: relative;
}
.selected::before {
position: absolute;
content: '';
top: -10px;
left: 0;
width: 100%;
background-color: #66b0c4;
height: 10px;
}
<div class="header">
<h1>The Great <br><span id="colorDisplay">RGB</span><be>
Color Game</h1>
</div>
<div id="stripe">
<button id="reset">New Colors</button>
<span id="message"></span>
<button id="easyBtn">Easy</button>
<button id="hardBtn" class="selected">Hard</button>
</div>
Solved by adjusting the height of background on the selected class. Also solved the selection issue with
*:focus {
outline: 0 !important;
}
CSS Now:
.selected {
background:#66b0c4;
border: none;
height: 30px;
}
*:focus {
outline: 0 !important;
}
I have 3 main sections to the site I'm practising on: Nav, Header and Section.
My header bar contains an image with some text in the middle, I spent a long time trying to find how to allow the image to accept the text on top of it and then have it go straight in to the centre(both vertically and horizontally) of the img.
I found something that worked, but after finding that solution, my Section decided to also go on top of the image, which I'm certain it is because of the position: absolute; on the image.
The help I need; how do I get the section to go under the header, with keeping the piece of text on top of the image and in the centre of it?
* {
box-sizing: border-box
}
body {
margin: 0px;
padding: 0px;
background-color: #f2f2f2;
}
html {
margin: 0px;
padding: 0px;
}
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: "Open Sans", arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
nav {
margin-bottom: 0;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
height: auto;
text-align: center;
display: table;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
margin: 0;
padding: 0;
vertical-align: middle;
display: table-cell;
}
#bannerImage {
height: 500px;
width: 100%;
position: absolute;
z-index: -1;
}
section {
background-color: white;
font-family: arial;
width: 100%;
border: 1px solid #e7e7e7;
text-align: center;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif" />
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png" />
<h1>Codewarts</h1>
</header>
<section>
<h2>Welcome!</h2>
<div id="content">
<p>Do you have a name?.....Great!</p>
<p>Insert it in the box below!</p>
</div>
</section>
Do You want somenthing like this?
header {
position: relative;
}
header h1 {
top: 50%;
left: 50%;
transform: translate(-50%,-50% )}
I'm trying to get full screen background image for this container:
<div class="header"
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">test1</h2>
<p class="lead text-center">test2</p>
<p class="text-center"><a class="btn btn-lg btn-success"
href="http://localhost/"><span
class="glyphicon glyphicon-plus"></span> something</a></p>
</div>
</div>
</div>
But, the picture is showing without fullscreen view and i'm trying to get something like this:
http://ironsummitmedia.github.io/startbootstrap-business-frontpage/
and i followed every tutorial for it, but nothing is worked.!
i'm not sure if i'm using Yii2 with this bootstrapmakes any sense.
Btw, this is my site.css
html,
.my-navbar {
background-color: #ffffff;
height: 10px;
border-bottom: 1px solid #eeeeee;
}
body {
height: 100%;
background: #F5F5F5;
}
.footer {
height: 180px;
background-color: white;
border-top: 1px solid #eeeeee;
padding-top: 20px;
}
.wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
.wrap > .container {
padding: 70px 15px 20px;
}
.header {
height: 400px;
background: url('../images/header.jpg') no-repeat center center;
min-height:100%;
background-size:100px 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
width: 100%;
-o-background-size: cover;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
.not-set {
color: #c55;
font-style: italic;
}
/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings', fantasy;
font-style: normal;
font-weight: normal;
line-height: 1;
padding-left: 5px;
}
a.asc:after {
content: /*"\e113"*/ "\e151";
}
a.desc:after {
content: /*"\e114"*/ "\e152";
}
.sort-numerical a.asc:after {
content: "\e153";
}
.sort-numerical a.desc:after {
content: "\e154";
}
.sort-ordinal a.asc:after {
content: "\e155";
}
.sort-ordinal a.desc:after {
content: "\e156";
}
.grid-view th {
white-space: nowrap;
}
.hint-block {
display: block;
margin-top: 5px;
color: #999;
}
.error-summary {
color: #a94442;
background: #fdf7f7;
border-left: 3px solid #eed3d7;
padding: 10px 20px;
margin: 0 0 15px 0;
}
What should i do for achieve full screen background image like this example in header?
http://ironsummitmedia.github.io/startbootstrap-business-frontpage/
Add this to the header css
position: absolute;
top: 0;
left: 0;
right: 0;
It should work now.
Could you try to putt it up as an example on Codepen?
Your div class "header" doesn't have an ending ">" which might be causing some problems.
Try with the following in the CSS where the background img is specified:
background-size:cover;
Add a other class with container class and use background image with cover option. Here i use .bimg for example.
<div class="container bimg"></div>
.bimg{
width:100%;
background:url('PATH');
}
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.