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.
Related
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 specify 2 fonts to have different colors . One font is wrapped around an element called <d> and they are wrapped around an <div> class. The fonts are displyed together perfectly on firefox but in IE 9 or older , the browser displays them the same color , because the older version browser does not recongize the element called <d> and if I put it in an <div> . It would break an line.
How can I make the 2 fonts have different colors work on IE together
MY CSS
.b{float:left;background-color: #EEF2FB;
width: 230px;
font-size: 20px;
font-family: CordiaUPC;
color: #72757A;}
d{font-size: 20px;
font-family: CordiaUPC;
color: #010203;
margin-left: 5px;}
My HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" href="float.css">
<div class="b"> Hello<d>Distance</d> </div>
Use a <span> tag to do this, it will keep things displaying in an inline manner. The reasoning for using a span is because, by default <span> is given a display: inline attribute while some other elements, like a div for example are given display:block as a default by the browser.
<div class="b"> Hello<span>Distance</span></div>
Updated Styles:
.b{
float:left;
background-color: #EEF2FB;
width: 230px;
font-size: 20px;
font-family: CordiaUPC;
color: #72757A;
}
span{
font-size: 20px;
font-family: CordiaUPC;
color: #010203;
margin-left: 5px;
}
Instead of using a <d>, which doesn't even exist, use a <span>:
<div class="b"> Hello<span>Distance</span> </div>
Unlike divs, spans are set to display: inline by default. divs are display: block.
I do suggest you add an id to your span though, because you probably don't want all of your spans to act like this.
That would give you this HTML:
<div class="b"> Hello<span id="mySpan">Distance</span> </div>
And your CSS would then be:
.b{
float:left;
background-color: #EEF2FB;
width: 230px;
font-size: 20px;
font-family: CordiaUPC;
color: #72757A;
}
#mySpan{
font-size: 20px;
font-family: CordiaUPC;
color: #010203;
margin-left: 5px;
}
As mentioned, you can use <span> in place of <d>, or you could even use <b> if you like:
<div class="b"> Hello<b>Distance</b> </div>
b {
font-size: 20px;
font-family: CordiaUPC;
color: #010203;
margin-left: 5px;
font-weight: normal;
}
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.
I have images that have statistics texts printed over them. This worked well with FF, Chrome and IE9 but not on IE8. I cant just seem to figure out what is the problem here.
HTML:
<div>
<div class="image">
<img src="#Url.Content("~/stuff/stuffImage.png")" alt="" />
<GIR1><span>#ViewBag.stuffArray[4]%</span></GIR1>
</div>
</div>
CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
GIR1 {
position: absolute;
top: 110px;
left: 50px;
width: 100%;
}
GIR1 span{
color: white;
font: bold 15px/15px Helvetica, Sans-Serif;
letter-spacing: -1px;
padding: 10px;
}
Instead of positioning the text inside the picture. It positions them outside it like normal text. What could cause the problem here?
I'm reasonably sure it's down to your usage of the custom element <GIR1>.
IE below version 9 does not natively recognize unknown elements.
You can either switch to <div class="GIR1"> (which would be the easy choice here), or:
You have to use a JavaScript fix: http://code.google.com/p/html5shiv/
Note that you'll have to add the custom element to the script yourself.
For the uncompressed version, see: http://www.iecss.com/print-protector/
var elems = 'abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video'
You need to add your custom elements to that list.