I'm trying to contain an image inside the first div of this page and it's outside of it for some reason. All the assets are in a flexbox. It works completely fine when I put text inside that div but not an image.
I've circled in red which image and div I'm talking about. The code snippet won't show you what I'm talking about since it isn't the full code.
Here is the github repository if someone needs the full code: github.com/hiashley/Ashley-Yu-React-Portfolio
.landing {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.introWrapper {
width: 1000px;
}
.intro1 {
font-size: 25px;
text-align: center;
font-family: 'Yapari';
align-items: center;
justify-content: center;
margin-top: 23px;
}
.intro2 {
font-size: 25px;
text-align: center;
font-family: 'Yapari';
/* font-weight: 72; */
margin-top: 50px;
}
#introCircle {
border: 2px solid black;
border-radius: 50%;
width: 230px;
height: 70px;
margin: auto;
}
.icons {
border: 2px solid black;
height: 50px;
}
.icon1 {
width: 30px;
}
<div id='landing' className={styles.landing}>
<div className={styles.introWrapper}>
<div className={styles.icons}>
<img src={icon1} className={styles.icon1}/>
</div>
<div id={styles.introCircle}>
<h1 className={styles.intro1}>HELLO I'M</h1>
</div>
<LastName />
<h1 className={styles.intro2}>A FULL STACK DEVELOPER</h1>
</div>
</div>
As I checked the code, You have added Position "Absolute" to the "img" tag, That's why Image is going outside to your div. You must need to add class and then add CSS to image tag.
View Screenshot
Add style to className rather than add style to html tags directly.
Tag style is globally, module className style is locally.
Related
In the above image, Chrome is on the left and Safari is to the right. The wrapper (green) element in my code is being rendered with different heights in Chrome and Safari.
Other similar questions on stackoverflow direct to this stackoverflow question/answer. I applied the solution given there and added specific heights to all elements and made them display: flex.
What do I need to do to make the wrapper element to be rendered with the same height across Chrome and Safari ?
.block, .level-1, .super-wrapper, .wrapper, .wrapper-initial, .initial {
display: flex;
justify-content: center;
align-items: center;
}
.block {
border: 1px solid #c4c4c4;
height: 2em;
width: 4em;
}
.level-1 {
height: 3em;
}
.super-wrapper {
height: 3em;
font-size: 0.4em;
}
.wrapper {
background-color: #8fbc8f;
height: 3em;
width: 3em;
}
.wrapper-initial {
height: 2em;
}
.initial {
height: 2em;
}
<div class="block">
<div class="level-1">
<div class="super-wrapper">
<div class="wrapper">
<div class="wrapper-initial">
<div class="initial">X</div>
</div>
</div>
</div>
</div>
</div>
The problem is in using em without unifying the base (resetting), if you checked the computed styles tab in DevTools, you'll find that font-size: 0.4em; is computed to different px values,
You don't want to use px and still want to use em? you just can add:
html {
font-size: 16px; // or any value you want!
}
html {
font-size: 16px;
}
.block, .level-1, .super-wrapper, .wrapper, .wrapper-initial, .initial {
display: flex;
justify-content: center;
align-items: center;
}
.block {
border: 1px solid #c4c4c4;
height: 2em;
width: 4em;
}
.level-1 {
height: 3em;
}
.super-wrapper {
height: 3em;
font-size: 0.4em;
}
.wrapper {
background-color: #8fbc8f;
height: 3em;
width: 3em;
}
.wrapper-initial {
height: 2em;
}
.initial {
height: 2em;
}
<div class="block">
<div class="level-1">
<div class="super-wrapper">
<div class="wrapper">
<div class="wrapper-initial">
<div class="initial">X</div>
</div>
</div>
</div>
</div>
</div>
The problem is that Safari and Chrome use different font sizes for your elements. When you use em, it scales to the current element's font size.
To fix your problem, make sure that the element's font size is the same in every browser, or use rem as a unit instead. rem always uses the root font size of the document.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
This question already has answers here:
Why the content is not covered by the background of an overlapping element?
(8 answers)
Closed 3 years ago.
I have two divs with a background color, one overlapping the other. The problem is that I can see the content of the underlying div through the top div.
https://jsfiddle.net/jost_s/0dxwtbvn/23/
div {
background-color: lightblue;
width: 100px;
height: 100px;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.overlapping {
margin-left: 50px;
margin-top: -50px;
border: 1px solid white;
}
<div>AB</div>
<div class="overlapping">CD</div>
Use position: relative
div {
background-color: lightblue;
width: 100px;
height: 100px;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.overlapping {
margin-left: 50px;
margin-top: -50px;
border: 1px solid white;
position:relative;
}
<div>
AB
</div>
<div class="overlapping">
CD
</div>
Without a position property, they're not really overlapping in the context of the way the browser renders them.
There's probably a better explanation of why the second block overlaps the first block, but not it's content, but I'm sure it involves a deep understanding of how the rendering engine works. You might even get a different result in different browsers.
To get the desired effect, position the overlapping block instead of using the margin...
div {
background-color: lightblue;
width: 100px;
height: 100px;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.overlapping {
position: relative;
top: -50px;
left: 50px;
border: 1px solid white;
}
<div>
AB
</div>
<div class="overlapping">
CD
</div>
I would use transform: translate(); to position the elements instead of margin.
Since its triggering the stacking context and assure that the elements are "stacket" in the right way.
I cannot really explain why margin behaves in this way but maybe someone wants to educate me.
div {
background-color: lightblue;
width: 100px;
height: 100px;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.overlapping {
border: 1px solid white;
transform: translate(50px, -50px);
}
<div>
<p>
AB
</p>
</div>
<div class="overlapping">
<p>
CD
</p>
</div>
So I'm questioning myself why the div with the class champ_info isn't placed next to the image because the image is an inline-block element. So the Text in my div element lies under the image instead of next to the image. My code is below.
.champ_info {
background: #0b2e33;
color: white;
}
.champ_container {
background: #10474e;
}
.champ_img {
border: 3px solid #1ba9bd;
border-radius: 50%;
margin: 5px;
height: 5rem;
width: auto;
}
<div class="champ_container">
<img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
<div class="champ_info">
Some Text
</div>
</div>
Thank you in advance.
I personally find making inherently block level elements inline counter intuitive. Flex box is the perfect solution to your problem.
.champ_container {
width: 40%;
margin: 0 auto;
display: flex;
/* justify-content: center; */
align-items: center;
background: #10474e;
}
.champ_info {
background: #0b2e33;
color: white;
width: 100%;
height: 100%;
}
.champ_img {
border: 3px solid #1ba9bd;
border-radius: 50%;
margin: 5px;
height: 5rem;
width: auto;
}
<div class="champ_container">
<img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
<div class="champ_info">
Some Text
</div>
</div>
<div> is a block element, which means it takes up the whole line. Put display: inline; inside the css for the <div> and it places it next to the image like you wanted.
Add vertical-align: top; if you want the text to align to the top. Since the image and the text align to the bottom of the parent, you need to manually set them to align to the top.
.champ_info {
background: #0b2e33;
color: white;
display: inline;
vertical-align: top;
}
.champ_container {
background: #10474e;
}
.champ_img {
border: 3px solid #1ba9bd;
border-radius: 50%;
margin: 5px;
height: 5rem;
width: auto;
}
<div class="champ_container">
<img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
<div class="champ_info">
Some Text
</div>
</div>
Regarding https://jsfiddle.net/postiffm/74cxr092/
> <div id="Tagline">
> I'm in the center.
> <div id="TaglineLeft"></div>
> <div id="TaglineRight">I am a phone #</div> </div>
How can I align the text in the TaglineRight so it has some space above it like the text in the center section? I've tried some padding and margin stuff, but nothing seems to work.
Thanks.
add line-height:30px; to #TaglineRight a
#TaglineLeft, #TaglineRight {
position: absolute;
color: white;
font-weight: normal;
text-align: center;
height: 100%;
width: 30%;
top: 0;
border-radius: 7px;
height: 20px;
padding: 5px;
}
you may add height: 20px; and padding: 5px; to #TaglineLeft, #TaglineRight { class
an old fashion way is to treat the child element as an table data by set it to display: table-cell, vertical-align: middle; & set it's parent to display: table;.
in that way you can change the height of the parent to whatever/whenever you like to and the child element will always stay vertical aligned. not like CSS3 solutions, it will work in old browsers too and cross browser support of course.
https://jsfiddle.net/ryf0w7rp/ - try to change the "#Tagline" element's height from 20px to other value and see the result.
*if you don't want main wrapper elements to use display: table so you can create another level of element to use display: table.
*for the example i made the solution just for the "#TaglineRight" element which has an inner <a> element. to make the other elements work the same, add the same structure and set the CSS to the right elements.
Instead of playing around with position:absolute/relative.
Consider using display:flex
check this solution
#Tagline {
color: white;
font-weight: normal;
letter-spacing: 2px;
text-align: center;
margin-bottom: 10px;
border: 0 solid #ff9706;
border-radius: 7px;
background-color: #ff9706;
display: flex;
height:30px;
line-height: 30px;
justify-content: space-between;
}
#TaglineLeft,
#TaglineRight {
color: white;
height: 100%;
width: 30%;
border-radius: 7px;
text-align: center;
}
#TaglineLeft {
margin-top: 0px;
background-color: #6673aa;
order: -1;
}
#TaglineRight {
border: 0 solid #7e922e;
background-color: #7e922e;
}
#TaglineRight a {
color: white;
letter-spacing: 1px;
text-decoration: none;
}
<div id="Tagline">
I'm in the center.
<div id="TaglineLeft">left line</div>
<div id="TaglineRight">I am a phone #
</div>
</div>
Hope it helps
I have a panel. Which looks like this:
It's not best, but its a copy of things I have in a PSD. The problem is that when you check HTML <a> is before image display and it still make <a> as 0x0px, the problem is with all 3 images in that panel and I don't know how to fix it. Can somebody help me to make each <a> to be as big as that image and button are?
HTML:
<section class="panel">
<img src="images/right_banner.png">
<div class="panel_button"><span class="text">NAHLĂSIT CHEATERA</span></div>
<div class="panel_button"><span class="text">CW/TG REZERVACE</span></div>
</section>
CSS:
.panel {
width: 200px;
float: left;
margin-top: 13px;
}
.panel a {
width: 201px;
height: 200px;
display: inline-block;
}
.panel_button {
background-image: url("images/panel_blue_button.png");
background-repeat: repeat-x;
width: 198px;
height: 93px;
margin-top: 5px;
font-weight: 16px;
}
.panel_button span{
color: #ffffff;
text-align: center;
display: inline-block;
margin-top: 40px;
margin-left: 30px;
}
Live preview
The anchor element is currently an inline element. You could change it to either block or inline-block to achieve the desired results.
.panel > a {
display: block;
}