BBC Logo: http://www.bbc.com/ (This is the BBC page that's since been updated from the one I'm attempting to recreate; subtle differences)
My goal is to set the background of the individual BBC letters. I'm remaking the site for a course I'm taking on Udemy. I'm not having trouble in actually setting the background to white, but actually in setting the width and height of the background.
Whenever I specify the width/height in the background shorthand property there is no effect.
Sorry if I'm leaving something out here, first real post.
My current effort (sample):
HTML:
<div id="logo">
<div class="letter>
<h1>B</h1>
</div>
<div class="letter>
<h1>B</h1>
</div>
<div class="letter>
<h1>C</h1>
</div>
</div>
CSS:
#logo {
display: inline-block;
}
.letter {
display: inline-block;
color: #7A0000; (Set text to color of page background)
background-color: #fff; (Want to create white box around each letter)
background-size: 25px 25px;
}
background-size is to set the size of background images, not size of background-color. For set width and height possibly set the div those sizes.
.letter
{height:25px;
width:25px;
}
Make sure you set the font size to less than 25px for the h1 if you want to set the height of .letter to 25px. You should also remove the top/bottom margins of the h1 tag, otherwise, it will come out of the box.
.letter h1{
font-size:20px;
margin:0px;
}
Here is a demo
Related
To have a fully responsive website, I used the wizardry technique. There you set the body font size to 1vh and based on that you set everything else in em: the padding, width, font-sizes etc. Here is the link to the technique: https://wizardry-technique.webflow.io
Now in Chrome, I am experiencing a weird white space as shown on the screenshot beneath.
In the Chrome inspector, I tried to check off everything and came to the conclusion it is the font size that makes the white space appear.
Link to the page: https://www.designdan.london/vcard
Any ideas about what I am doing wrong, or how to solve it?
Your problem is not about the font-size, but the border with em units. The result is a size in fractions of pixels that is not correctly rendered (a sub-pixel problem). I have tried many solutions with no results. My advice is to change the border to px.
Below I managed to replicate the problem (at least on my browser I have the same visual problem as you) in the right and bottom sides of the first square.
.businesscard {
float:left;
width: 100px;
height: 100px;
border: solid 0.33333em #000000;
}
.content {
width:100%;
height:100%;
margin:0px;
padding:0px;
background-color: #333333;
}
.px-border {
margin-left: 25px;
border: solid 5px #000000;
}
<div class="businesscard">
<div class="content">
</div>
</div>
<div class="businesscard px-border">
<div class="content">
</div>
</div>
I have this html and this css.
.entry-content > .greyfruitdrawing {
height:2000px !important;
width:2000px !important;
margin-top:40px;
}
.redletters1 {
font-size:40px;
opacity:0.7;
color:red;
position:relative;
top: 20px;
font-weight: bolder;
line-height:1.6;
text-align:justify;
}
<div class="greyfruitdrawing">
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" alt=""width="300" height="201"class="alignnone size-medium wp-image-6978"/>
</div>
<div class="redletters1">SOME TEXT.</div>
The problem is that a) it won't expand by the size css is telling it to. b) elements are interacting in a way they shouldn't. Adjusting greyfruitdrawing affects position of redletters1
Site: https://4309.co.uk/about-us/
Set the height and width of an outer container and then give the image itself a height and width of 100%:
.container {
text-align: center;
width: 2000px;
height: 2000px;
margin-top: 40px;
}
.greyfruitdrawing img {
height: 100%;
width: 100%;
}
.redletters1 {
font-size: 40px;
color: rgba(255,0,0,0.7);
font-weight: bolder;
line-height: 1.6;
}
<div class="container">
<div class="greyfruitdrawing">
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" />
</div>
<div class="redletters1">SOME TEXT.</div>
</div>
Edit
There are a few problems with what you are doing here. First off, height and width are not properties that are inherited. In your example, you are defining the height and width of the div surrounding your image in your css, not the image itself, which is why it is affecting the "position" of the red lettering. The div is getting bigger and pushing the text downwards.
Simply move the greyfruitdrawing class inside your image tag instead of your div surrounding it.
Also, it is generally bad practice to use the !important property, although I don't know what the other classes you are linking to do, so maybe they are needed to override some presets you are using.
You have many different classes and properties trying to change the size of the image. I would recommend you do something simpler.
Either change the height and width properties within the tag to match how big you want the image to be, or remove these properties and define it in your css.
Alternatively, if you want the image to fill the size of the div then I would recommend the answer by symlink.
The reason this is affecting the position of the red lettering is because you are making the div bigger, which is pushing the letters down the page. You can't see what is happening because the div is the same color as the background.
Using css to define height and width:
<div>
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" class="size"/>
</div>
//notice the class is in the <img> tag and not the <div> surrounding it.
.size {
height: 2000px;
width: 2000px;
}
or defining height and width within the tag:
<div>
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" height="2000" width="2000" />
</div>
I didnt find an answer to this, so:
I am trying to do this in my blog:
- 2 rows (using div tag, not table)
- In each row, there will be a square image of certain size in percentage of width (e.g. 40%, I dont know how to set height to keep square form) and a color square with text inside, from the same size as the image.
square image text inside square
text inside square square image
I have this so far:
<style type="text/css">
.element {
float:left;
width: 50vh;
height:50vh;
border: 1px solid #000000;
margin:0 10px 0 0;
margin-left:5%;
margin-right:5%;
margin-top:10%;
align:center;
}
</style>
<div class="element">
<img src="wp-content/uploads/2015/04/luices.jpg" alt="Mountain View" width="400px">
</div>
<div class="element">Some text</div>
<div class="element">Some text</div>
<div class="element">
<img src="wp-content/uploads/2015/04/luices.jpg" alt="Mountain View" width="400px">
</div>
But have many problems:
1- I dont know how to use "vh" in width, and also, as far as I know, Browser compatibility is a problem with it. I just want to place these two squares 40% of width each one, separated by 7% of width (from sides and from each other).The same for the second row.
2- I need mobile compatibility also.
3- When you open the website in a small window (or phone), the second square will go down (thats ok) but I need that the order of squares to be:
square image
text inside square
square image
text inside square
Which is different from what every browser does with my code, wich is keeping the same original order: image,text,text,image.
I hope I explained well.
Thank you very much.
Bob
So in order to get the correct layout on a mobile device, you need to use the #media attribute, to set the css properties to be mobile friendly.
I made a plnkr that I tested on both my desktop and nexus 5, the key though are these two css properties:
div.row{
min-height: 25vh;
margin-bottom: 4vw;
}
div.col-40{
background-color: #333;
width: 44vw;
min-height: 25vh; /* set to the same as div.row min-height */
max-height: 25vh; /* set to the same as div.row min-height */
margin-left: 1vw;
padding: 1vh;
overflow: hidden;
text-align: center;
display: inline-block;
}
http://plnkr.co/edit/d2C3xOiNYjaUqVeX2yf4?p=preview
Basically you need to wrap the div's that you want next to each other, in another div, in this case .row.
If you have images that are larger than the div, the overflow will be hidden. You will more than likely need to mess with the css for your blog, but hopefully this gets you where you need to be.
You also should probably be using vw for the width properties (vw = viewport width). 1 vw or 1 vh = 1/100th of the viewport width or height.
The float:left; more than likely is messing up the div order. I prefer to use a display:inline-block; with a relational width value, as done with vw.
can you help me make this "stamp" responsive ?
I would like the fonts (numbers and text) to keep occupying the same space over the background image, so the stamp stays clean whatever the viewport size.
Without using css vw vh, etc... because it must work on old browsers.
<div id="tamponBLfactor_welcomepage" class="tampon" >
<div class="userWeightInOtherUnit rotateimagecredits"> </div>
<div class="userWeight"></div>
<img class="tamponImg" src="images/tampon100px.png" />
<div class="levelText rotateimagecredits">LEVEL</div>
<div class="userLevel"></div>
</div>
Thanks
http://jsfiddle.net/5x5jfcyu/
The best answer is to use em or rem units, for everything including the height of the container and the font sizes of the text inside.
Updated fiddle :
http://jsfiddle.net/5x5jfcyu/
#tamponBLfactor_welcomepage {
position: relative;
text-shadow: none;
height: 6rem;
display: inline-block;
}
#tamponBLfactor_welcomepage img {
height:100%;
}
So I want to make the background of my website two tone. What I mean is have a dark gray in the center, going all the way down, but then have a lighter gray on just the sides. Maybe 80-85% of the pages width.
Do would I go about doing this?
So what I want is the middle to be one color, and the two sides to be another color. Is there a way to set the bgcolor and then set it's width to 80% or something like that?
You'd be much better off using a background image, mate; assuming you know your target audience's primary monitor size, you could just make, say, a 1024x1 image with the parameters you require. If, however (and this is more likely the case), you are trying to get this to be dynamic, why not just use a div element, like so:
<style type="text/css">
#main
{
width: 84%;
background-color: #666666;
border: 1px solid #cccccc;
border-width: 0 8% 0 8%;
}
</style>
<div id="main">#content#</div>
I take that back... Really?! No percentage widths for borders?
If you're center area is of fixed width, then you can produce an image with that width, one pixel high, and then write the following CSS:
body {
background-color: #ccc;
background-image: url('some-image.jpg');
background-position-x: center;
background-repeat: repeat-y;
}
If not, you'll have to define a <div>. Odds are you'll have to define a <div> to hold your content anyway, if you want your content to be centered on page...
CSS
<style type="text/css">
body { background-color: #ccc; }
div.page { margin: 0 auto; width: 85%; background-color: #ddd; }
</style>
HTML
<div class="page">
<h1>Your page</h1>
<p>Coming soon...</p>
</div>
No. You'll need to create an element with the dark gray background separately from the light gray element.
Something like:
<body style="background-color:#ccc;">
<div style="margin:0 auto;background-color:#555;width:85%;">
<!-- rest of the page contents -->
</div>
</body>
Or use a background image on the body, but that's less scalable, and can't be used for percentage width.