I'm using attempting to make a quote with :before open-quotes and :after close-quotes. The closing quotes are wrapping to a new line all by themselves in some instances. I'd like to make it so the last word and quotes break together, wrapping correctly. Any thoughts on how to do this in a way that would work across varying content? I'm using this in Drupal and this quote element is used in many articles with different content.
CSS:
p.quote {
background-color: #f0f0f0;
font-family: $didot-font;
font-size: 25px;
font-weight: 400;
padding: 2rem 2.5rem;
-webkit-text-stroke: 0;
letter-spacing: 0.02px;
line-height: 35px;
color: $gray4-color;
#extend %left-align;
text-transform: none;
font-style: italic;
#extend %magin-position;
&:before {
content: open-quote;
}
&:after {
content: close-quote;
}
}
Twig:
<div class="col-12">
<p class="quote" cite="">{{ content.field_quote }}</p>
</div>
Trying adding the display:inline-block; to the elements. This will arrange them in one line.
You can also use position: absolute; then use the top and left properties.
I suspect the whitespace inside the handlebars tag is inserting whitespace between your quote elements and the text itself. Run the following snippet and observe how the addition of whitespace before the end of the <p> element allows a word-break before the closing quote.
.content {
width: 600px;
}
.quote {
background-color: #f0f0f0;
font-size: 25px;
font-weight: 400;
padding: 2rem 2.5rem;
letter-spacing: 0.02px;
line-height: 35px;
font-style: italic;
}
.quote:before {
content: open-quote;
}
.quote:after {
content: close-quote;
}
<html>
<body>
<div class="content">
This one fits:
<p class="quote">This content should appear between quotes, and they are required to "stick" to the words, not wrap.</p>
This one is just a tiny bit wider:
<p class="quote">This content should appear between quotes, and quotes are required to stick to the words, not wrap.</p>
This one has LWS inside the <p> elements that separates the quotes from the text:
<p class="quote">
This content should appear between quotes, and quotes are required to stick to the words, not wrap.
</p>
</div>
</body>
</html>
I assigned a background image for a <div> in the CSS of my HTML code, i assigned the width and height and also add contents to the <div> but the bg still not shown, this is what I've tried:
CSS:
#order_list {
position: absolute;
width: 25%;
height: 100%;
z-index: 2;
left: 75%;
top: 35px;
color: #F33;
background:url(img/ItemList.png)
display: inline-block;
alignment-adjust: central;
font: Arial, Helvetica, sans-serif;
font-size: 14px;
font-size-adjust: inherit;
grid-rows: inherit;
list-style: upper-alpha;
word-spacing: inherit;
word-wrap: break-word;
vertical-align: central;
}
HTML:
<div id="order_list">
<div id="confirm" class="buttonClass">
<div align="center">Confirm</div>
</div>
<div id="total" class="totalClass">
<div align="center"></div>
</div>
</div>
screen shot:
It might depend on how your browser interprets it, but you forgot a semicolon at the end of
background:url(img/ItemList.png)
Without it, browsers won't show the image. Thanks to #Leeish for noting that in this case, a semicolon is absolutely neccessary.
; is missing at the end of background:url(img/ItemList.png) which is why you are not getting the background image.
Semicolon is needed to separate the declarations from one another.
It can be omitted from the last declaration in a CSS rule, but it is recommended so that later if you want to add more declarations, you won’t need to remember to add it in there.
I've made a wrapper div with a text div and a image div floating to the right. A simple task, yes, but not for me tonight it seems. I am unable to make it work and stuck.
Here's how it looks right now: http://bit.ly/RNinCm
CSS:
introwrapper {
width: 938px;
background-color: white;
margin-bottom: -20px;
padding-left: 5px;
}
.introtekst {
font-size: 30px;
text-transform: uppercase;
font-family: Arial, Verdana, sans-serif;
color: #a81c11;
}
.gammeltbilde {
float: left;
}
HTML:
<div id="introwrapper">
<div class="introtekst">
<p>Some text here.</p>
</div>
<div class="gammeltbilde">
<img src="bilder/kjiptbilde.jpg" alt="bilde fra parken"/>
</div>
</div>
Change your CSS like so:
.introtekst {
font-size: 30px;
text-transform: uppercase;
font-family: Arial, Verdana, sans-serif;
color: #a81c11;
display:inline;
width: 80%; /* or dependent on what you like */
float: left;
}
.gammeltbilde {
float: right;
display:inline;
width: 20%; /* relative to width for introtekst */
}
The picture is larger than the container, try setting dimensions on the image:
<img src="bilder/kjiptbilde.jpg" alt="bilde fra parken" width="800" />
(800 makes it fit, but you may want to change that as needed.)
You could place a width="800px" tag on the img, but I would recommend actually staying away from that whenever possible and actually sizing down the images in Photoshop or some similar program. If you have a page with lots of images that you've sized down using the width tag, your page load times can get pretty big.
You could just remove <img src="bilder/kjiptbilde.jpg" alt="bilde fra parken">
I'm currently working on a website design and need to make some changes to an advertisement. The CSS I apply to the main div (.ad_728x90_home) I'm targeting doesn't work. I have applied a margin-top to the div but that doesn't work, tried other CSS but it's not getting picked up.
Any help would be greatly appreciated! The advert is located below the second post.
.ad_728x90_home {
height: 130px;
}
.ad_728x90_home_text {
margin-top: 40px;
}
span.ad_728x90_home_h3text {
color: #FFFFFF;
float: left;
font-family: LeagueGothicRegular;
font-size: 23px;
line-height: 34px;
margin: 13px 0 22px 10px;
text-transform: uppercase;
width: 185px;
}
.ad_728x90_image {
float: right;
margin-right: 10px;
}
<div class="ad_728x90_home">
<div class="ad_728x90_home_text">
<span class="ad_728x90_home_h3text">Need more quality fonts? Head over to myfonts.com</span>
</div>
<div class="ad_728x90_image">
<img class="scale-with-grid" src="images/ad_728x90.jpg" alt="Blog Post" />
</div>
</div>
Be sure you have the right class names between .ad_728x90_home and .ad_728x90_home_text and double check your HTML nesting.
I checked your items with Chrome's inspect element and the <div class="ad_728x90_home_text"> seems to start above your ad, at the top of the page.
Try going to make it a position:relative as it seems like a main div element
.ad_728x90_home {
Postion:relative;
top:10px;}
I cannot say the exact pixel amount of it as the margin-top doesnt work try using it as relative.
What is the best (as in cross-browser) technique to do image replacement in CSS? I am using sprites to do my navigation, but I want the markup to remain SEO friendly. Given the following HTML structure...
<div id="menu">
<ul>
<li>Test</li>
<li>Tester</li>
<li>Testing Testing</li>
</ul>
</div>
What is the best way to replace the text with a background image using CSS only?
I am currently using this...
text-indent: -9999px;
But, it fails with CSS on, and images off.
If this is the html:
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
And this is the css:
#menu ul li a{
display: block;
overflow: hidden;
text-indent: -9999px;
background: transparent url(yourpicture.png) no-repeat 0 0;
width: 100px;
}
#home{
background-position: 0px 0px
}
#about{
background-position: -100px 0px
}
#contact{
background-position: -200px 0px
}
The image would then be 300px wide, and each tab would be 100px wide.
In 2008, Google's presentation at An Event Apart made it clear that valid image replacement will not be penalized by Google. See Mezzoblue's post about it
Basically, as long as the image you replace the text with has the same text in it, it will be considered valid and not trying to cheat search engines. How do they determine whether the image is valid or not? I have no idea... OCR? Manual review?
As far as CSS on/images off, there is no perfect solution, all of them require extra non-semantic markup. See the css-tricks link that beggs posted on the different techniques. I personally do not bother with the very small percentage of users who browse with CSS but no images.
Your choice is simple. Extra markup, or don't care about css on/images off.
The background image is usally applied to the <a> link, giving the entire clickable area an image. To hide the text you can use a very big negative value for text-indent.
I just came up with this, it seems to work in all modern browsers, I just tested it then on (IE8/compatibility, Chrome, Safari, Moz)
HTML
<img id="my_image" alt="my text" src="images/small_transparent.gif" />
CSS
#my_image{
background-image:url('images/my_image.png');
width:100px;
height:100px;}
Pro's:
image alt text is best-practice for accessibility/seo
no extra HTML markup, and the css is pretty minimal too
gets around the css on/images off issue where "text-indent" techniques still hide text for low bandwidth users
The biggest disadvantage that I can think of is the css off/images on situation, because you'll only send a transparent gif.
It might be possible to write a little javascript to help out with this, replacing all the image sources with their background-image css properties. But this would only work if the browsers still attaches css properties to elements and then ignores them. I don't know if this is the case or not, I'll have to test it out. You'd also want to develop a javascript-based test to see if css is being applied to the page (maybe check the position of some test element).
btw, I'd like to know, who uses images without stylesheets? some kind of mobile phone or something?
edit:
Based on comment below... inline styles hrm... maybe I should just make a php helper function like <?php echo css_image('image_id','my text','image_url');?> to generate some code like this:
HTML
<div id="image_id" style="background-image:url('image_url')" class="image">
<img src="image_url" class="alt_text" alt="my text" />
<p>my text</p>
</div><!--/#my_image-->
then just attach some CSS in the stylesheet
#image_id{width:*image width*;height:*image height*}
.alt_text{position:absolute;top:0px;left:0px}
.image{display:block;background-position:left top}
.image p{position:absolute;left:-9999em}
it's an older technique that I'm using, not sure where I found it though. It works with CSS on/images off, CSS off/images on, CSS on/images on.
If a user with CSS off/images off visits, they'll see doubled up text. If a search engine spider visits, they'll see alt text and regular text, an intelligent spider could easily identify this for what it is, an innocent image replacement technique.
So, this technique is worst for screen readers, since alt text is read, but these users should be able to skip to the next paragraph, which is why I stuck <p></p> around "my text".
Everyone else with both CSS and images turned off is some kind of bot, right?
#menu ul li a {
display: block;
background-image: url(images/someimage.png);
text-indent: -9000px;
width: 454px;
height: 64px;
}
The display:block is important or else your width and height may not look right.
This is the code I use for replacing logo text with an image while keeping the text in the code but not shown to the user (this is Google approved). View the completed example here:
http://discretiondesigns.com/overflow/imagereplacement/
Here's the full code (images can be found at the above link - images can be varying sizes - the entire image is clickable and changes upon hover):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Replacement</title>
<style type="text/css">
<!--
#menu li { list-style: none; }
#menu #a { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #a a { background: url(http://discretiondesigns.com/overflow/imagereplacement/a_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #a a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/a_on.gif); }
#menu #a span { display: none; }
#menu #b { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #b a { background: url(http://discretiondesigns.com/overflow/imagereplacement/b_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #b a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/b_on.gif); }
#menu #b span { display: none; }
#menu #c { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #c a { background: url(http://discretiondesigns.com/overflow/imagereplacement/c_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #c a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/c_on.gif); }
#menu #c span { display: none; }
-->
</style>
</head>
<body>
<div id="menu">
<ul>
<li id="a"><span>Nav A</span></li>
<li id="b"><span>Nav B</span></li>
<li id="c"><span>Nav C</span></li>
</ul>
</div>
</body>
</html>
This is touted to work no matter the settings of css/images:
http://www.tjkdesign.com/articles/tip.asp
CSS Tricks has one of the most detailed posts on the subject here
They show various techniques. The one that solves your problem of css on and images off is:
HTML:
CSS Tricks has one of the most detailed pages on the subject here
They show various techniques. The one that solves your problem of css on and images off is the technique #8:
HTML:
<div id="menu">
<ul>
<li><span></span>Test</li>
<li><span></span>Tester</li>
</ul>
</div>
CSS:
#menu a {
width: 350px; height: 75px; /*your values here*/
position: relative;
}
#menu a span {
background: url("images/li.jpg"); /*your image here*/
position: absolute;
width: 100%;
height: 100%;
}
EDIT: Updated the code to the sample provided.
PS: I didn't test the code above.
CSS:
#menu ul li a{
display: block;
background-image: url(http://example.com/sprite.png);
width: 100px;
height: 50px;
}
#a {
background-position: <offset for sprite>;
}
#b {
background-position: <offset for sprite>;
}
#c {
background-position: <offset for sprite>;
}
HTML:
<div id="menu">
<ul>
<li id="a">Test</li>
<li id="b">Tester</li>
<li id="c">Testing Testing</li>
</ul>
</div>
Edit: added the link text back in... 'cause it was missed. :-)