I am trying to code a special background that keeps himself centered on screen. So I used div and pseudo elements to do so, but I keep getting a undesired "margin" between my divs and their pseudo elements, specially in small screen devices.
Screenshot from my phone showing some white undesired margins
Any idea on how to prevent this 'margins'?
Thank you very much!
*,*:after,*:before,body{margin:0;padding:0;border:0}
.row{width:100%;display:inline-flex}
.cont1920{width:100%;max-width:1920px;float:left;margin:auto;background:#8dbb70;position:relative;overflow:hidden}
.artw{width:1920px;position:absolute;left:50%;margin-left:-960px}
.h23{height:910.77px}
.rec2,.rec3{position:relative;background:#3F7F7D;content:''}
.rec2{width:631.10px;height:441.33px}
.rec3{width:631.10px;height:469.44px}
.rec2:after,.rec3:after{width:0;height:0;border:0;content:'';position:absolute}
.rec2:after{
right:-167.26px;
border-left:167.26px solid #3F7F7D;
border-bottom:441.33px solid transparent;
}
.rec3:after{
right:-396.37px;
border-left:396.37px solid #3F7F7D;
border-top:469.44px solid transparent;
}
<div class='row'>
<div class='cont1920 h23'>
<div class='artw'>
<div class='rec2'></div>
<div class='rec3'></div>
</div>
</div>
</div>
Try minifying your html as well during build. If we do indentation in HTML sometime some browsers add hairline space between them while rendering.
Add some padding to .rec2:after, .rec3:after
.rec2:after,.rec3:after{
padding: 2px;
width:0;
height:0;
border:0;
content:'';
position:absolute;
}
By the way, I don't recommend using width and height like you're doing in your css code, example: width:631.10px; height:469.44px, because if you want to make it responsive and perfect in all devices you should use % instead of px. I guess you're learning or/and trying something new.
Look this error when using px and when your design/page isn't using responsive design (and not using meta:viewport):
So there is white space and the design not fill the whole screen
*,*:after,*:before,body{margin:0;padding:0;border:0}
.row{width:100%;display:inline-flex}
.cont1920{width:100%;max-width:1920px;float:left;margin:auto;background:#8dbb70;position:relative;overflow:hidden}
.artw{width:1920px;position:absolute;left:40%;margin-left:-960px}
.h23{height:910.77px}
.rec2,.rec3{position:relative;background:#3F7F7D;content:''}
.rec2{width:631.10px;height:441.33px}
.rec3{width:631.10px;height:469.44px}
.rec2:after,.rec3:after{width:0;height:0;border:0;content:'';position:absolute}
.rec2:after{
right:-167.26px;
border-left:167.26px solid #3F7F7D;
border-bottom:441.33px solid transparent;
}
.rec3:after{
right:-396.37px;
border-left:396.37px solid #3F7F7D;
border-top:469.44px solid transparent;
}
<div class='row'>
<div class='cont1920 h23'>
<div class='artw'>
<div class='rec2'></div>
<div class='rec3'></div>
</div>
</div>
</div>
Related
I'm following a tutorial on youtube to create a replica of LinkedIn with CSS + ReactJS. I've been following the tutorial exactly (using it as more of a learning opportunity than anything) yet sometimes when the tutorial adds certain code, it doesn't appear on my environment when I try to add it. I found a work around for one case, but when I try to add a border-bottom to css it just won't show up.
CSS:
.header{
position: sticky;
top: 0;
display: flex;
justify-content: space-evenly;
border-bottom: thin solid lightgray; /*this is a vscode shortcut*/
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
z-index: 999;
}
JS:
function Header() {
return (
<div className ='Header'>
<div className="header__left">
<img src="https://www.flaticon.com/svg/static/icons/svg/174/174857.svg" alt=""/>
<div className="header__search">
<SearchIcon/>
<input type="text"/>
</div>
<div className="header__right">
<HeaderOption Icon= {HomeIcon} title="Home"/>
<HeaderOption Icon={SupervisorAccountIcon} title="My Network"/>
</div>
</div>
</div>
);
}
*HeaderOption is an imported JS function I created. It isn't conflicting with the CSS I believe because I have removed it and the border still won't appear.
Thank you in advance.
CSS is case insensitive.
But in HTML the class and ID are case sensitive
change
<div className ='Header'>
to
<div className ='header'>
First off, you might wanna check your classNames' spelling for case-sensitivity.
If that's not the issue, your divs are probably collapsing with each other, so it renders the pixels through approximation. This is usually the case if you try zooming in your page and the missing border magically appears.
I suggest setting a height for your header where the borders don't collapse with the other divs' borders. Also, I prefer setting a fixed measurement unit rather like px,rem,%, etc. rathen than using thin.
I'm having trouble doing my homework with an HTML exercise. Basically I have to place multiple images in different locations on the screen/body but the problem comes from placing a line "hr" element to the right of the image..mine is being placed under it. Here are the photos with my progress and the exercise. I would be glad if someone could help me. Have a great day!
[1] https://imgur.com/6SWWGx1 "Exercise"
[2] https://imgur.com/0qL3V32 "My Progress"
<!DOCTYPE html>
<html>
<head>
<title>ES 8</title>
</head>
<body>
<img src="erba.jpg" width="10%">
<hr>
<img src="erba.jpg" width="30%">
<img src="erba.jpg" width="10%" align="top">
<div><hr align="left" width="20%"></div>
</body>
</html>
That's because by default most elements including <hr/> and <div/> are full-width boxes - or blocks stacked on top of each other. Read a bit more about the box-model of CSS elements here.
Taking it out of that <div/> and changing the <hr/>'s CSS to display: inline-block will add it to the side because it will set it as "inline" to the images. Keep in mind this will only work if it actually has room - so elements widths and borders and margins put together <= 100%.
You can also achieve the same effect with a transparent </div> where you just set one of its border to be visible instead of using <hr/>.
However, looking ahead at the rest of the exercise as well you will probably want to look at at some general layout elements such as flexbox and grid. They make positioning things in the page a whole lot easier once you get the hang of them.
Do you want something like this?
.upper img{
width:15%
}
.lower{
display:flex;
border-top:1px solid black;
padding-top: 1rem;
margin-top:1rem
}
section{
flex-basis:calc(100% / 3);
}
section img{
width:100%
}
section:nth-child(2) div:first-child img{
width:25%
}
section:nth-child(2){
margin:0 1rem;
}
section:nth-child(2) div:nth-child(2){
display:flex;
justify-content:flex-end;
border-top:1px solid black;
padding-top:1rem
}
section:nth-child(2) div:nth-child(2) img{
width:80%;
border: 2rem solid black
}
<div class="upper">
<img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/>
</div>
<div class="lower">
<section>
<img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/>
</section>
<section>
<div><img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/></div>
<div><img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/></div>
</section>
<section>
<img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/>
</section>
</div>
Back in the 2003, when my templates where cut into a tables, I used to position all the text how I wanted.
I know it's a newbie question and I should probably take some beginner css courses, but the question is - how to position text with as little fuss as possible like that:
start at 0 px start at 100px start at 300px
For the example you post in your question, I would go about it something like this:
span {
display: inline-block;
}
span:nth-of-type(1) {
width: 99px;
}
span:nth-of-type(2) {
width: 199px;
}
<span>Start at 0px</span>
<span>Start at 100px</span>
<span>Start at 300px</span>
HTML
<div class="item start0">
start at 0px
</div>
<div class="item start100">
start at 100px
</div>
<div class="item start300">
start at 300px
</div>
CSS
.item{
float:left;
}
.start0{
width:100px;
}
.start100{
width:200px;
}
.start300{
width:100px; // example
}
Width is the best bet. If you're going to use a div, you need to float left or the divs will be pilled up.
I have this CSS class
.background-color-blue {
background-color: #00C0FF;
}
and I want to be able to use it on some elements if needed.
I now it is not very semantic, but it is used for HTML template that is meant to be easy to use, small in size, and universal.
I want to be able to use it on elements like some panels, sidebars, modals, top-bar menu , or whatever I want
of course it works, but only for divs that do not have background-color already specified.
in this case:
<div class="modal background-color-blue"></div>
.modal has already specified bg color to #fff. now it does not work - it stays white.
I have found two solutions for that:
.background-color-blue {
background-color: #00C0FF !important;
}
and
div.background-color-blue {
background-color: #00C0FF;
}
I am not sure about these... which solution is better? Or is there any other solution that would work better?
I think this method:
.modal.background-color-blue {
background-color: #00C0FF;
}
is not good since I would have to do it with any similar element.
and
<div class="modal">
<div class="background-color-blue">
</div>
</div>
also isn't good since modal already has some padding.
Just use !important it will help to override
.background-color-blue {
background-color: #00C0FF !important;
}
Take a look at this : when-using-important-is-the-right-choice
If you think that modal will be able to have different colors, i guess you'd like this (ITCSS - BEM inspired). This will help you to stay at a low specificity rate, preventing you to have some problems with future classes or have to overwrite them.
Exemple here :
http://codepen.io/AxelCardinaels/pen/ZGVKzp
HTML :
<div class="container">
<div class="modal modal--grey">
<h1 class="modal__title"> Modal Title</h1>
<p class="modal__text">Hello this is the content of the modal !</p>
</div>
</div>
CSS :
/*Base Class */
.modal{
width:40%;
margin:0px auto;
padding:20px;
text-align:center;
border-radius:10px;
box-shadow:1px 1px 1px rgba(1,1,1,0.3);
}
/*Attribute classes for the modal, just make a choice in your HTML ! */
.modal--grey{
background:rgb(220,220,220);
border:1px solid rgb(200,200,200);
}
.modal--blue{
background:rgb(65,105,225);
border:1px solid rgb(58,95,205);
}
The proper usage is
! important
Normally it should have been blue background. Perhaps something else that is preventing the elements of blue.
But don't forget that; the last !important taken into account.
I'm converting an Access application to web, and need to print reports from it. These are letters mailed out and so the bottom of the letter, which is the 'please return' portion, will always be at the bottom of the page, regardless of how big the body of the letter is. I've used DIVs to lay out the letters and mimicked Access quite well, but I don't know how to get each letter's header at the bottom of its page. Using the CSS position: fixed; for the footer just makes every footer show up at the bottom of every page, and we would like to be able to print off multiple letters at once.
If I remove the fixed, it does display each footer on its own page, they weren't aligned to the bottom of it.
Can I have my cake and eat it too? Doesn't need to be cross-browser, and I'll move to PDF if absolutely necessary, but what are my options in CSS/HTML? Somehow converting it all to a table and trying out tfoot? But will that enforce it to be at the bottom of each page?
Edit: A sample of the CSS/HTML:
.reportcontainer {
width: 100%;
page-break-inside: avoid;
page-break-after: always;
position: relative;
}
.reportbody {
float: left;
text-align: left;
}
.reportfooter {
width: 100%;
float: left;
bottom: 0;
position: fixed;
}
<div class="reportcontainer">
<div class="reportbody">
yadda yadda yadda
</div>
<div class="reportfooter">
stuff goes here
</div>
</div>
Try this. I've had to figure out a lot of html printing lately as well. You can figure out how you want to replicate the divs, either backend or using jquery cloning for each report. Borders are just to illustrate containers.
.reportcontainer {
width:8.5in;
height:11in;
page-break-inside:avoid;
page-break-after:always;
border:1px solid red;
}
.reportbody {
width:100%;
height:10in;
border:1px solid yellow;
}
.reportfooter {
width:100%;
height:1in;
border:1px solid blue;
}
</style>
<div class="reportcontainer">
<div class="reportbody">
yadda1 yadda1 yadda1
</div>
<div class="reportfooter">
footer 1 goes here
</div>
</div>
<div class="reportcontainer">
<div class="reportbody">
yadda2 yadda2 yadda2
</div>
<div class="reportfooter">
footer 2 goes here
</div>
</div>
<div class="reportcontainer">
<div class="reportbody">
yadda3 yadda3 yadda3
</div>
<div class="reportfooter">
footer 3 goes here
</div>
</div>
I would recommend using PDF. If you need that level of control for printed material, you're going to be fighting to get HTML to work across browsers and this is really what PDF is designed for.
tfoot would not help, it only ensures that the footer is at the bottom of the table, not the bottom of the page.