I am trying to align an icon right next to a text. I have used the :before tag but it doesn't seem to work? Is it because I am using google icons? Below is the code I want to replicate
.review {
width: 317px;
height: 25%;
}
.review h2 {
color: white;
font-style: normal;
font-weight: bold;
font-size: 30px;
line-height: 23px;
margin-left: 15px;
}
.review p {
color: white;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 16px;
text-transform: capitalize;
transition: 0.3s;
/* margin: 20px; */
}
<div class="review">
<h2>Reviews</h2>
<i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
<p class="rec">Most Recent</p>
<p>Most Relevant</p>
</div>
Please google first before asking a question on SO. Just by googling your problem, I found your answer in the first link. It is another question on SO. Click here.
Just put both items inside a <div> element and use the css class display: inline-block as you can see in the example.
<div>
<i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
<p style="display: inline-block" class="rec">Most Recent</p>
</div>
Sorry, Your Question is not very clear, but the use of google icons should not be an issue. My advice would be to use css grid for layout issues (since the code that you have provided is html and css).
Here is a helpful link:
https://www.w3schools.com/css/css_grid.asp
grid-column should solve your problem: have 2 columns, the first one for your image and the second one for your text. You can additionally add grid-row for better layouts
I think you want icon with links.
Put it inside the paragraph tag.
Related
I'm trying to figure out if there's a way to style a paragraph in multiple ways such that the formatting is responsive and the text of different styles remains on the same line. I am a beginner, and have searched for other answers but can't figure it out, so please forgive me if the answer is quite obvious.
For example: I HATE hot dogs!
"I" would need to be 16px, "HATE" would need to be 40px, and "hot dogs!" would need to be 16px again, but I want all of the text within the same <p> if possible, or if not possible, at least to LOOK as if they're all in the same <p>. (The actual text I'm using is rather a long paragraph that needs to respond to different browser widths, so it's important for the text to be able to act as if it's one paragraph.)
I've jerry-rigged an extremely messy and only semi-successful solution using divs but I feel sure there should be a more elegant answer:
.container1 {
position: absolute;
font-size: 16px;
}
.container2 {
position: relative;
float: left;
padding-top: 22px;
}
.container3 {
position: relative;
float: right;
font-size: 40px;
padding-left: 4px;
}
.container4 {
position: relative;
float: right;
padding-left: 4px;
font-size: 16px;
padding-top: 22px;
}
<div class="container1">
<div class="container2">I</div>
<div class="container3">HATE
<div class="container4">hot dogs!</div>
</div>
</div>
As some people already said, you don't use <div> for this type of situation, instead, you need <span></span> which will allow different styles inside the same <p>. You can use CSS to define specific text styles:
CSS Classes defining font size
.textA {
font-size: 16px;
}
.textB {
font-size: 40px;
}
<p>
<span class="textA">I</span>
<span class="textB">HATE</span>
<span class="textA">hot dogs!</span>
</p>
Inline Style
This approach may seem shorter but it won't be as nice when styling a whole paragraph.
Edit (note by #tacoshy): should also never been used outside of email-templates. This will cause major specificty weight issues, cause low readbility and cant be cached which causes longer loading times.
<p>
<span style="font-size: 16px;">I</span>
<span style="font-size: 40px;">HATE</span>
<span style="font-size: 16px;">hot dogs!</span>
</p>
Remember you can also set other styles as font color, italic, bold, background color, etc.
In this case, you would not use <div>. You would use the <span> element. It's meant for applying different styles to the same paragraph. Here the example from the one you gave in the question:
p {
font-size: 16px;
}
.i {
padding-top: 22px;
}
.hate {
font-size: 40px;
padding-left: 4px;
}
.hd {
padding-left: 4px;
font-size: 16px;
padding-top: 22px;
}
<p>
<span class='i'>I</span>
<span class="hate">HATE</span>
<span class="hd">hot dogs!</span>
</p>
One thing no one has noted is that you can (and should, IMO) use native, semantic HTML elements where possible, falling back to generic HTML elements where those fail.
There's no need for more than two elements; the containing paragraph, and the emphasized HATE word. Note I've defined the 16px font at the root level (html) and defined the 40px in relative terms to that (2.5rem). That way if a user changed their font sizes, the HATE would still be relatively large.
html { font-size: 16px; }
em { font-size: 2.5rem; font-style: normal; }
<p>I <em>HATE</em> hot dogs!</p>
You should use inline-elements such as a <span>. You can either add classes to them or just use the :nth-child selector instead. Using float here is completely wrong. Also no reason for position: absolut or relative
p :nth-child(1) {
padding-top: 22px;
}
p :nth-child(2) {
font-size: 40px;
}
p :nth-child(3) {
font-size: 16px;
}
<p>
<span>I</span>
<span>HATE</span>
<span>hot dogs!</span>
</p>
You could use span. So...
HTML
<div class="container1">
<p>I
<span class="text-effect-1">HATE</span>
<span class="text-effect-2">HOT DOGS</span>
</p>
</div>
CSS
.container1 p{
font-size: ---;
font-weight: ---;
color: ---;
}
.text-effect-1{
font-size: ---;
font-weight: ---;
color: ----;
}
.text-effect-2{
font-size: ---;
font-weight: ---;
color: ----;
}
While making some buttons I've run into this issue where the empty spaces/margins beside the buttons are clickable, which is what I'm trying to get rid of now. I've been looking over similar posts that go over this kind of thing but I've had no luck in applying those answers to my code, and unfortunately my messing around with it hasn't helped a whole lot either. This thing is kind of driving me crazy at this point and any bit of help would be greatly appreciated :')
Here's the code itself:
button {
background-color: #edca6e;
border: none;
color: #523e5c;
padding: 8px 60px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
font-family: 'Lucida Console';
margin: 30px;
cursor: pointer;
}
<center>
<img src="https://picsum.photos/300/300" alt="logo" style="width:300px;height:300px;">
<!--portfolio, about, contact, misc.-->
<br><br><br>
<button>text</button>
<button>text</button>
<button style="margin:30px;">text</button>
<button>text</button>
</center>
If anything else needs to be clarified, please let me know :)
When u wrap your button with <a> tag, the whole component of button will be clickable (include the margin). Although it is not practicable to use <a> with <button>, still I have a solution that you can overcome your current issue.
To make the margin not clickable, you can apply the margin in <a> tag and move the display attribute from <button> style to <a> style, Kindly refer to following code:
CSS:
button {
background-color: #edca6e;
border: none;
color: #523e5c;
padding: 8px 60px;
text-align: center;
text-decoration: none;
font-size: 30px;
font-family: 'Lucida Console';
cursor: pointer;
}
a{
display: inline-block;
margin: 30px;
}
HTML:
<center>
<img src="https://picsum.photos/300/300" alt="logo" style="width:300px;height:300px;">
<!--portfolio, about, contact, misc.-->
<br><br><br>
<button>text</button>
<button>text</button>
<button >text</button>
<button>text</button>
</center>
Margin should be moved to a instead of button. As of now, button has some margin, which makes a has some redundant space.
And yeah, you shouldn't be using button inside a. Both are clickable.
I need to align "OUTDOOR" word to center , pls help,
i m new to CSS.
for what i have tried,the "outdoor" is aligned to left , eventhough "Is where life happens" aligns center.
//here is my html part
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main"> outdoor</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
// here is the css parent element
.heading-primary{
color:#fff;
text-transform: uppercase;
margin-bottom: 6rem;
}
here is the child elements
.heading-primary--main{
display: inline-block;
font-size: 5rem;
font-weight: 500;
letter-spacing: 3.5rem;
}
.heading-primary--sub{
display:block;
font-size: 1.6rem ;
font-weight:800;
letter-spacing: 1.35rem;
}
The reason your text is not fully centered is because of the letter-spacing. The letter-spacing property also adds spacing after the last letter, making it so your "Outside" text does not appear centered. I figured this out by highlighting your text and noticing that there is extra spacing after your last letter. To fix this, you can add
margin-right: -YOURLETTERSPACING
to the element with the letter-spacing property to negate the extra space at the end. In your case (as shown below), I added margin-right: -3.5rem since your letter-spacing is 3.5rem for your main class and I did the same for your sub class (with margin-right: -1.35rem). Does that leave you with any questions?
.heading-primary{
color:#000;
text-transform: uppercase;
margin-bottom: 6rem;
text-align: center;
}
.heading-primary--main{
display: block;
font-size: 5rem;
font-weight: 500;
letter-spacing: 3.5rem;
margin-right:-3.5rem;
}
.heading-primary--sub{
display:block;
font-size: 1.6rem;
font-weight:800;
letter-spacing: 1.35rem;
margin-right:-1.35rem;
}
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">outdoor</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
I have this following html codes.
<div class="box extend">
<h1>CLOUD SERVICES FOR SMALL BUSINESS</h1>
<figure><img src="myimg.png" /></figure>
<p>
<strong>Hosted Exchange Server</strong>
<strong>Cloud Server Solutions</strong>
<strong>Backup Servicesd Server Solution</strong>
</p>
</div>
and the css of the above html (updated css)
.box p strong{
font-weight: 700;
font-size: 20px;
color: red;
padding: 0px;
margin: 0px;
background: blue;
}
now the problem is the strong element has spaces between each other as supposedly it should not (base on my css set up), please refer to the image below
Is there anyway I could get raid or remove that space gap between each others element? Any recommendations, suggestions and ideas, I would love to hear! thank you in advance.
It seems making them display block kills the thin line
http://jsfiddle.net/5qqLR/2/
.box p strong{
font-weight: 700;
font-size: 20px;
color: red;
padding: 0px;
margin: 0px;
background: blue;
display: block;
}
After further research setting the parent line-height to 1 will solve this issue
http://jsfiddle.net/5qqLR/3/
.box p {
line-height: 1;
}
Take a look at here http://www.sitepoint.com/forums/showthread.php?824112-space-below-inline-elements-inside-a-block-element
Add to strong HTML tag:
white-space: break-spaces;
I have a question related to the CSS priority.
If I have something like this:
<div id="reportBox">
<p id="reportBoxTitle">MAIN REPORT</p>
<p id="reportBoxContent">Promoting Investment in Agriculture</p>
</div>
And then I have the following CSS settings:
#reportBox p{
text-align: center;
font-size: 12px;
font-weight: bold;
color: #004673;
}
#reportBoxTitle{
padding-top: 5px;
font-size: 18px;
}
In this way the text Promoting Investment in Agriculture that is into reportBoxTitle div still have a size of 12px and not 18px as specified by #reportBoxTitle settings.
It seems that the general #reportBox p settings have the priority on the specific #reportBoxTitle settings.
Is it a normal behavior?
Tnx
Andrea
Yes, it's normal: the specificity for the first selector is higher (id + tag) than for the the second one (just id), so the rules written there prevail.
The easiest way to solve it is to add a tag to the second selector as well, making specificity of the selectors the same so that the last one can 'win' now:
p#reportBoxTitle {
padding-top: 5px;
font-size: 18px;
}
Fiddle.
But actually, I don't understand why you've used <p> here instead of <hN> selector: this paragraph is clearly a header of the report, and should not only be styled, but also marked in HTML accordingly. For example:
<div id="reportBox">
<h3 id="reportBoxTitle">MAIN REPORT</h3>
<p id="reportBoxContent">Promoting Investment in Agriculture</p>
</div>
Now you can use the fact that all the properties you're setting in #reportBox currently are inherited by its children, and rewrite CSS as follows:
#reportBox {
text-align: center;
font-size: 12px;
font-weight: bold;
color: #004673;
}
#reportBox h3{
padding-top: 5px;
font-size: 18px;
}
Fiddle.
All info about CSS specificity nightmare here :D
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Try this :
#reportBox p#reportBoxTitle{
padding-top: 5px;
font-size: 18px;
}