I am using bootstrap css and have defined subtitle.
Fiddle: Fiddle
<div class="center-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzqEv5GXTFGZ1jOzAMNldPJAB6qCU2LRaiiWsld9o7zN1gz_jKaQ" class="img-responsive" alt="Responsive image">
<div class="subtitle">Intention from past</div>
</div>
I want to make first letter font size 36 for I in subtitle.
CSS:
subtitle:first-letter {
font-size: 34px !important;
}
but it does not make affect. what is the issue here?
OOPs ... You just forgot the period there . so it will search for an element called subtitle and not the class
.subtitle:first-letter {
font-size: 34px !important;
}
Demo (Added color to indicate)
Also, don't use !important as you won't need that..
Put your 'I' of "Intention from past" in span tag.
<div class="subtitle"> <span style="font-size:32px";>I</span>ntentio from past </div>
I have used inline css. You can change it to whatever size you want;
You forgot to put . in css before subtitle:first-letter.
Related
Is there a way of writing CSS to reduce the file size of a style sheet containing lots of adjoining classes. Example...
body .elementor-2 .elementor-element.elementor-element-949d9dd .elementor-widget-spacer,
body .elementor-2 .elementor-element.elementor-element-427933f .elementor-widget-spacer,
body .elementor-2 .elementor-element.elementor-element-cb8ce37 .elementor-widget-spacer {
margin-bottom: 0px;
}
hey Use :is selector to reduce the code please check. to learn more about it here
body .elementor-2 .elementor-element:is(.elementor-element-949d9dd, .elementor-element-427933f, .elementor-element-cb8ce37 ) .elementor-widget-spacer {
margin-bottom: 10px;
background: red
}
<div class="elementor-2">
<div class="elementor-element elementor-element-949d9dd ">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
<div class="elementor-2">
<div class="elementor-element elementor-element-427933f">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
<div class="elementor-2">
<div class="elementor-element elementor-element-cb8ce37 ">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
If you use the widget spacer in a different position every single widget makes those classes with the different ids. So you can't reduce the classes.
So if you need not write all the classes on the CSS file.
Use this CSS.
body .elementor-widget-spacer {
margin: 0 !important;
}
or
body .elementor-widget-spacer {
margin: 0;
}
It works with all of the spacer widgets on the webpage.
if you are using elementor.you don't need to do it with custom CSS. Elementor has a dedicated control for this. edit the column, select the layout tab to find widget space, and make it 0. Inside the column, your widget gap will be 0.
Before Doing 0
After Doing 0
Or
you are not using Elementor you can go with :is().To learn more about it follow the article Here
I have my profile image and below it I want to place my name and a few things about me. I don't know what to use for the image div or if I even need a div for it. Are the h1 and p elements used properly?
Snippet
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Full Body HTML
<body>
<div class="page">
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
<div class="sites">
<ul>
<li><img src=""> <img src=""></li>
</ul>
</div>
</div>
</body>
The rest of the site are just app icons taking to my social media sites. There's no other content. My site also doesn't have a header or footer. Not sure if my profile class should be considered the header at this point for good SEO.
You do not need to put the div around the image. Just style it to display: block (img defaults to display: inline)
<div class="profile">
<img style="display: block" src="profile_image.jpg">
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Otherwise, the rest of the code is perfectly fine.
It does depend of what exactly you want to do with it but if I understand your question.
You don't need divs for your image just set up different image classes in your CSS.
.image1
{
width:100px;
height:100px;
}
Then your HTML would look like
<img src="profile_image.jpg" class="image1">
Check out http://www.w3schools.com/css/css_align.asp for more information about how to actually set up alignments in your CSS
It might be worth using a div to style your text into a block or format it to look nice, etc. But you don't need to do it
http://www.w3schools.com/tags/tag_div.asp for div styling .
And finally abit of personal experience, spend an hour or 2 looking through W3Schools CSS section and learning the basics of styling it's a great way to learn the basic tools you need to work with CSS and make your pages look good !
Edit styling text
<h1>first last</h1>
<p>Coffee snob.</p>
so first you could style them in your css as the elements they are
h1
{
text-align:left;
padding-left: 10px;
text-decoration: underline;
}
p
{
text-align: right;
}
Doing thing your HTML would look exactly as it is you wouldn't have to change anything. Obviously this is something you can only do once for all <p> and <h1> content and every time you use those tags without specifying a class for them it'll look exactly like whatever the above CSS is.
The other option is to do what I suggested with the image and give them a unique class.
p.body
{
text-align: right;
}
Here you'll need to add class to <p> jsut like you did for image which will look like
<p class="body">Coffee snob.</p>
Hope that helps !
I have the following alignment:
<div class="main">
<div class="header"></div>
<div class="right-bar">
<div class="chat-user-content">
<span class="chat-user-photo">
<img src="http://d13yacurqjgara.cloudfront.net/users/25963/avatars/mini/2013-avatar_(1).png" />
</span>
<span class="chat-user-name">Fulano Silva</span>
<span class="chat-user-status"><img src="http://www.colorhexa.com/a7ba3d.png" /></span>
</div>
</div>
</div>
.chat-user-status > img{
border-radius: 50%;
height:15px;
width:15px;
}
But I can not align the <SPAN> "user-chat-status" right without using an image. I would like the image that appears in green, were a <DIV> or <SPAN>. What am I doing wrong?
JSFiddle
Check this fiddle out: http://jsfiddle.net/3PduX/18/
I put display:block to the span, which i think may have been what you missed.
Radu Chelariu's idea was even better though. I smashed a working example together without having to use the extra span, check it out here: http://jsfiddle.net/3PduX/22/
It uses the :after pseudo element.
If you are using two divisions one after other, you can use clear:both; in current div.
If you want to align the div to right,you can use .
I hope it will work.
Pish, posh. Images for UI are silly. That's why we have pseudo-elements!
Basically, you just have to replace your image with a :after or :before and style that accordingly. Here's a JSFiddle to illustrate:
http://jsfiddle.net/sickdesigner/N99j3/
Cheers!
http://healthybodyguru.com
If you load the site and wait 3 seconds you'll see the attentionGrabber bar appear in the header. It has shortcodes to add the social buttons (FB, Twitter, G+1), but for some reason the Google +1 button is too high.
I've tried adding custom CSS to lower it by adding margin/padding to the top but that didn't make a difference.
Any ideas what CSS I can use to make it line up with the other social buttons?
Thanks!
Try setting:
#___plusone_0 {
font-size: default; !important
}
Override inline CSS styles with !important.
The solution was to add:
#attentionGrabberWrap .plusoneBtn iframe{
margin-bottom: -3px !important;
}
I got help from the plugin creator :)
try putting a span tag around the google +1 button and pad that top.
<span style="padding-top:5px;">[shortcode]</span>
I don't know if you tried this with custom css but if not give it a shot and see what happens. a style tag in the html should override any styling that the stylesheet is giving the element.
As you can see I like divs and not spans. I've always gotten better results from divs than spans when css is playing around.
<div id="attentionGrabber">
<div id="centeredPart" style="width: 575px; margin:0 auto">
<div style="float:left;" class="facebookBtn">
...like code....
</div>
<div style="float:left;" class="twitterBtn" >
...twitter code...
</div>
<div style="float:left;" class="plusoneBtn">
...+1 code...
</div>
<div style="float:left;" class="linkToForums">
Check out our new forums:
<a class="link" href="http://healthybodyguru.com/forum/">go!</a>
</div>
<div style="clear:both"></div>
</div>
<div id="closeAttentionGrabber"></div>
</div>
I just put an invisible letter behind mine. A bit hacky but it worked for me.
<br><div class="g-plusone" data-annotation="none"></div><span style="font-size:33px;opacity:0;">G</span>
i've searched around and seen some examples of how this is done, but i don't really get it and tried all methods but none worked, so i would like to ask if anyone can show me, for my code below, how can i affect the tournytitle when the img is hovered?
<div id="upevents" class="righty">
<div>
<div class="tournytitle">
<div style="font-weight: bold;">Test 2 Hat</div>
<div style="color: #888888; font-size: 10px;">17 . 12 . 2011</div>
</div>
<img src="/images/tourny/jomjom2.jpg" />
</div>
<div>
<div class="tournytitle">
<div style="font-weight: bold;">Test 1 Hat</div>
<div style="color: #888888; font-size: 10px;">12 . 12 . 2011</div>
</div>
<img src="/images/tourny/bane5.jpg" />
</div>
</div>
how should i write my css code for this?
i tried something like
.upevents img:hover + #tournytitle { background-color: yellow; }
but doesn't seem to work.
help much apperciated
As mentioned, your .tournytitle class must be a child of the img your trying to roll over. Your code .upevents img:hover + #tournytitle { background-color: yellow; } is certainly close, you just need to figure out how to comply to the above rule. With this your saying that .tournytitle is an adjacent-child of img, which is not the case in your given code. Also, your class and id symbols are incorrect, watch out for that.
I managed to get your code working by switching .tournytitle and img so that the class is now the adjacent-sibling - http://jsfiddle.net/gmwjw/1/ - I realize this may not be the design your looking for, but its a start.
This may be helpful to you - http://meyerweb.com/eric/articles/webrev/200007a.html
The .tourneytitle must be a child of the img element for you to achieve this. This fiddle shows the way you can reveal your image by hovering over your .tournytitle: http://jsfiddle.net/fWxH3/203/
To get what you want, you would need to change your HTML so that somehow your tournytitle div is a child of your img tag. Maybe you can use span's inside of your image tag instead of using div's for everything.