There's a small gap between all my content on my website and the end of the browser window, and I can't figure out why it's there. This is what my CSS code looks like for my Hero Image.
And this is my HTML for that image, as well as for a banner underneath the image with which I have the same separation problem.
.container {
position: relative;
text-align: center;
color: white;
}
.full-width-banner {
position: auto;
background-color: #466995;
padding: 200px;
top: 20px;
text-align: center;
height: 100px;
text-height: 40px;
width: 73%;
overflow: none;
color: white;
font-family: 'Oswald', sands serif;
font-size: 20px
}
<div class="full-width-banner">
<h2> “Change will not come if we wait for some other person or some other time. We are the ones we’ve been waiting for. We are the change that we seek.” </h2>
<p>Barack Obama<p>
</div>
This is a picture of what that creates, an empty gap between the image and the end of the browser page on the left side. The picture is supposed to completely cover its portion of the browser with no border on either side.
I don't know why this is happening or how to fix it.
By default your browser will add a few px of margin or/and padding to your body, just make sure to cleanse that at the beginning of your CSS like so:
body {
margin: 0;
padding: 0;
}
img {
display: block;
}
<img class="full-width-banner" src="https://ijnet.org/sites/default/files/styles/full_width_node/public/story/2020-07/cooper-baumgartner-J9QvzfkQM44-unsplash.jpg?h=8c0e36cd&itok=F6g99LH1">
Related
Now the code below is displaying perfectly on different mobile platforms and different mobile browsers. For some reason when I load it onto my desktop browser the image overlaps the links.
On mobile the image is perfectly centered above the links and desktop version image is overlapping the links. Any help?
The main issue is the placement of the image.
CSS:
html {
font-size: 20px;
box-sizing: border-box;
}
body {
background-color: #1abc9c;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.btn {
border: 5px solid #2c3e50;
color: #2c3e50;
display: block;
font-family: 'trebuchet ms';
font-size: 2rem;
letter-spacing: 0.1rem;
padding: 1rem;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.btn::before {
content: "";
background-color: #E26A6A;
box-shadow: 10px 10px 0 #F1C40F,
20px 20px 0 #3498DB;
position: absolute;
left: 0.25rem;
top: 0.5rem;
height: 102%;
width: 102%;
z-index: -1;
transition: all 0.4s ease;
}
.btn:hover::before {
box-shadow: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.tools
{
position:absolute;
top: 25px;
left: 0px;
z-index: 2;
}
html:
<body>
<img src="tools.png" class="tools">
<div class="wrapper">
< MICROSOFT_LOGGER >
<br>
<br>
< OFFICE_TOOL_LOGGER >
<br>
<br>
< WEB_MON_COMPUTER >
<br>
<br>
< WEB_MON_ANDROID >
</div>
</body>
https://codepen.io/brandon-humphrey/pen/wvMGJzN
Desktop view: https://ibb.co/6YVZC13
Mobile view: https://ibb.co/7QFcdn3
That is because you're using position: absolute to position your image. What this does to your element is that it removes it from the normal document flow, and no space is created for it in the page layout anymore.
I recommend you read more about positioning in CSS so that you could figure out what you need and do it!
Small hint: What you might want is using Flexbox mainly to position everything properly, you can have a better result just by setting the flex-direction in body to column (Although I recommend putting your flexbox as styles for divs not the whole body). Also, remove the CSS class you wrote for tools, and the height you specified for the body.
The fact that you get the effect you want on mobile is a fluke. The wrapper for buttons is vertically centered, so there's space enough for the image to sit on top and not cover your buttons. Once the vertical space is reduced because the screen is landscape your absolutely positioned image covers the buttons.
If you want the effect to be consistent, I suggest you remove all your styling for the tool class and add flex-direction:column; to your body styles. You may still have to fiddle with it for your full effect, but this will get you the basics.
I'm almost there with my CSS design, but I'm just facing a small problem with my implementation.
What I'm trying to do is this:
I want the search bar in between my two color background. The problem is when I increase / decrease my search bar is moving up or down but not following the line and I don't want this.
I was wondering if there is a was to cheat.
For now I will try to do this :
And then adding a second div at the bottom. It's the only solution I've found for now. But maybe if somebody has a better way with linear-gradient or something like that why not!
I leave a link here if you want to see :
jsFiddle: https://jsfiddle.net/yo7pzfda/
Try using a negative margin for your input box and putting it at the top of the content div. This will shift it up a few pixels into the above div and keep it there when you resize the screen.
snippet:
body {
background-color: gray;
margin: 0;
padding: 0;
}
input {
height: 30px;
width: 300px;
border-radius: 5px;
margin-top: -5%;
}
#content {
background-color: blue;
padding: 0;
margin: 0;
margin-top: 7%;
min-width: 100vh;
min-height: 100vh;
text-align: center;
font-weight: bold;
font-family: Arial, sans-serif;
}
<div id="content">
<input placeholder="Search...">
</div>
Here is a picture example of what is happening.
I'm trying to build one of those one-page scrolling websites.
The white background indicates one page, the grey background indicates the beginning of another page.
As I start filling my white page with content, I notice that my button slowly starts sliding down and is now encroaching into the grey page. I don't want that to happen but rather for the white page to extend.
Here is my CSS for the pages:
#white-page
{
background-color: white;
height: auto;
min-height: 100vh;
text-align: center;
}
#grey-page
{
background-color: grey;
min-height: 100vh;
}
Here is my CSS for the button.
.download-center
{
text-align: center;
margin-top: 60px;
}
.btn
{
text-decoration: none;
border: 1px solid gray;
padding: 10px 20px 10px 20px;
border-radius: 25px;
color: inherit;
}
Here is the relevant HTML
<section id="white-page">
//page content here
<div class="download-center">
<a class="btn font-r" href="docs/resume.pdf" target="_blank">
<img id="download-pic" src="pic/download.svg" />Download Résumé
</a>
</div>
</section>
<section id="grey-page">
//page content here
</section>
I tried setting the height to auto for the white page but it doesn't seem to work.
Basically, I just want the page to extend as the content requires but with a minimum of vh so that it takes up the whole of the screen first.
Edit: By removing the margin-top property, here is the result. All it does it pushes the button closer to my content but still encroaches on the page borders.
The reason is you have restricted height and used margin-top:
.download-center {
text-align: center;
margin-top: 60px;
}
Adjusting margin-top to a lesser value, say 30px will make the button stay inside.
Reduce margin from top and add position as like:
.download-center {
text-align: center;
margin-top: 40px;
position: absulote;
}
I'm answering my own post because removing margin-top was not the solution that worked for me. Instead, it was increasing margin-bottom.
margin-bottom: 40px;
I have been trynig to put a background inside a background on my website. I was able to put the background color that I wanted with this code:
<body bgcolor="#F5F2D4">
<div class="Gallery">
<h1> Gallery </h1>
</div>
</body>
After, in CSS I did the following
.Gallery h1 {
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 55px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.3999996185303px;
background-color: White;
}
The background would look something like this (B=Beige, W=White:
-------------------------
|BB|WWWWWWWWWWWWWWWWWW|BB|
|BB|WWWWWWWWWWWWWWWWWW|BB|
|BB|WWWWWWWWWWWWWWWWWW|BB|
|BB|WWWWWWWWWWWWWWWWWW|BB|
|BB|WWWWWWWWWWWWWWWWWW|BB|
-------------------------
This made the colors that I wanted in the background, but it is not scaled. It only has a few pixels of difference from the border of the browser until the White starts, is there any way to make the distance increase?
Also, is there any way to make the White Background scroll all the way down?
Thank you very much.
Give the html, body and .gallery all a height: 100% to make the .gallery take up the entire height of the screen.
If you want the .gallery to have a fixed width (as in the example below) give it a width and add margin: 0 auto to have it center itself horizontally in the screen. If you don't want it to have a fixed width add a padding: 0 100px on the body if you want to have 100 pixels from the left and right side of the .gallery to be beige.
html,
body {
height: 100%;
}
body {
background-color: beige;
margin: 0;
}
.gallery {
background-color: white;
width: 960px;
margin: 0 auto;
height: 100%;
}
<div class="gallery">
</div>
That image isn't made up of a single background: it's made up of multiple elements which have different backgrounds:
+-----------------------+
|BB|YYYYYYYYY|NNNNNNN|BB|
|BB|YYYYYYYYY|NNNNNNN|BB|
|BB|YYYYYYYYY|NNNNNNN|BB|
|BB|YYYYYYYYY|NNNNNNN|BB|
|BB|YYYYYYYYY|NNNNNNN|BB|
+-----------------------+
Where the letters represent certain coloured/different backgrounds.
For example, below I've used three elements:
.all {
min-height: 100vh;
height:500px;
background-color: green;
width: 100%;
display: inline-block;
margin: 0;
padding: 0;
position: relative;
}
.left {
height: 100%;
width: 45%;
background-color: blue;
position: absolute;
margin: 0;
padding: 0;
left: 5%;
}
.right {
position: absolute;
height: 100%;
width: 45%;
background-color: red;
display: inline-block;
margin: 0;
padding: 0;
right: 6%;
}
<div class="all">
<div class="left">i will always be on left. Think of me like a column!</div>
<div class="right">i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i
will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i
will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!</div>
</div>
Note I've used background-colors, but alternatively you can use images/etc.
Hey guys I am having trouble with keeping things aligned on my website. Here is an example of what the website should look like:
Now, here is where it makes unaligned.. When I resize the window to be smaller, the Text shifts over like so:
Currently these are the css attributes applied to my tag which is on the text.
#header_title_container {
width: 1000px;
margin: 0px auto;
padding-left: 85px;
padding-top: 50px;
}
#header_title {
font-size: 33px;
color: #FFFFFF;
font-weight: bold;
}
What would the proper way to approach always having "Title" aligned with the corner of the darkest gray box?
Thanks.
Because your title container has padding inside it, the text "Title" is kept at least 85px from the screen edge. Because it's left-aligned, that means its left-hand edge is always at 85px.
So, when your sidebar gets smaller than 85px, the text cannot align with it.
You could fix this by fixing the size of the sidebar, by eliminating the padding-left directive and replacing it with an element sized as the sidebar is (or replacing it with the same amount as your sidebar width!), or by setting min-width on the sidebar.
Is this the kind of result you are after?
http://jsfiddle.net/2ScZZ/5/
html
<div id="container">
<div id="header_title_container">
<div id="sub_header_title_container">
<div id="header_title">
Title
</div>
</div>
</div>
<div id="middlebit">
</div>
</div>
css
#container {
background-color: lightgray;
}
#header_title_container {
width: 100%;
background-color: black;
}
#sub_header_title_container {
width: 900px;
margin: auto;
padding-right: 20px;
}
#header_title {
font: 33px verdana;
color: white;
padding: 50px 0 10px 0;
}
#middlebit {
margin: 0px auto;
width: 900px;
height: 100px;
background-color: gray;
}