1.How to fill a border with background color?
the edges of the border aren’t colored in.
Hard to tell from a screen shot. Is that one image that has a border on it? Is it a table/grid/flexbox with items inside?
flexbox
.Container{
display: flex;
text-align: center;
border: 10px solid rgb(97, 83, 49);
flex-direction: row
}
If you give the container a background the same colour, does that work?
1 Like
Don’t see anything obvious there. You may need to inspect the element and see
- Does the container have padding?
- Do the flex box elements have margins on them?
Plus, by a mark one eyeball, it looks like 10 is taller than 1-9, which would partially explain the gap shining through…
All my code
.box{
font-size: 100;
height: 100%;
}
.box1{
background-color: red;
}
.box2{
background-color:blue
}
.box3{
background-color:black
}
.box4{
background-color:orange
}
.box5{
background-color:green
}
.box6{
background-color:yellow
}
.box7{
background-color:firebrick
}
.box8{
background-color:purple
}
.box9{
background-color:grey
}
.box10{
background-color:lime
}
.Container{
display: flex;
text-align: center;
border: 10px solid rgb(97, 83, 49);
flex-direction: row
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="flexbox.css">
</head>
<body>
<div class="Container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
</div>
</body>
</html>
I copied everything I did from the flex box tutorial in video 2 and 3, but I got a different outcome like always lol.
He doesn’t have any problems that I have somehow.
https://courses.wesbos.com/account/access/6202dab1f38d7b6990eedb90/view/195969097
That’s not what the flex box tutorial guy did.
probably my vscode is busted.
Copying what you have into Codepen looks a bit different.
All I changed was adding (presumed) units to the text size.
1 Like
I hadn’t notice that the content is escaping the border. There is so much problems that I have that the tutorial doesn’t have lol.
How is that possible if I copied everything?
You don’t need the height, and the font-size is a bit odd. If you set the font-size to use rem instead, and set the flex-grow to 1 to make them equal size, you get what you’re looking for.
.box{
font-size: 10rem;
flex-grow: 1;
}
I think the reason why I have a different outcome is because I didn’t get normalize css
Unfortunately none of the code you supplied creates the display that we see in your image.
When you ask a question it’s always best if you can replicate the problem with code that produces the problem you are trying to fix or better still create a codepen that shows the problem in action.
Presently you have asked a question that remains unanswered and of no help to you or indeed anyone else that reads the thread.
You have mentioned that the problem may have been because you didn’t have normalize css added but as far as I can see normalize will have little effect on that css you posted.
I have created a codepen with normalize css added and using the code you provided and the display does not look like the image you posted in your first post (with or without normalize added).
For example the numbers are vertically centred in your example but the code supplied has no vertical centering added. Therefore there must be more rules that you are showing us that apply to that demo. You also left the unit off the font-size (font-size:100 instead of font-size:100px) and that won’t render in standards browsers (see doctypes below).
It is very important that you find out the exact reason for the discrepancy in your display otherwise you will not learn how to do it properly. There is a reason for everything and when learning you have to be sure you know why something is not right before you move on to the next thing. (Even if the problem is a bug then you still need to acknowledge why it happens and how to avoid it.)
As an aside I notice that you posted the html without the doctype and hopefully you do have a valid current doctype on the real page that you are using as without a doctype some browsers will slip into quirks mode rather than standards mode.
I also note you are using the old meta tag for old versions of IE ( <meta http-equiv="X-UA-Compatible" content="IE=edge">). That was only needed for IE9 and less (IIRC) and only then when you had no valid doctype. Therefore it is mainly redundant unless you are working on some local intranet with old versions of IE installed. Otherwise IE11 should really be the only browser to support these days and it takes no notice of that meta tag anyway. (Indeed IE11 is not widely supported these days and usage is very low.)
Unfortunately that looks like a paid course which we can’t access without signing up. Wes Bos does some good courses so I don’t expect his code will have the same issues as yours so there is likely something you have missed. Maybe go through the tutorials again and see if you can spot the problem.
2 Likes
I have the same FREE course he offers here, and you code is different in some areas then what he has typed out. Your code for the box class??
His container class content is different also and he only includes a height with a vh property. You mentioned you have his exact code?? Yours is different and you should follow completely what he is doing. Then remove or add code once you can duplicate what he has in his editor.
“Plus, by a mark one eyeball, it looks like 10 is taller than 1-9, which would partially explain the gap shining through…”
6 is also higher than 1…5 and 7…9
There is also a gap at the left of 1 and the right of 10
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.