I have a table where I'm trying to display two tabs on the first line of each cell. I've divided the left tab into three images (left, middle, right), and it displays some text. It's supposed to be aligned with the left margin. The right tab has no text and should be aligned with the right margin. In between the two tabs is a line at the bottom of the tabs connecting the two - the right tab is one image and the connector is also one image, so there are five images I want to display. It should also stretch to fit the text (which it's doing) and the cell (which it's not).
It should look something like this:
[Text]__[]
The left tab is displaying fine, but the right tab is not. Here's my code:
HTML
<div class='category'>
<span><span><span><span>".$results['category']."</span></span></span></span></div>
<div class='righttab'><span><span></span></span></div>
CSS
.category
{
display: block;
}
.category *
{
height: 27px;
}
.category span
{
display: block;
float: left;
color: rgb(240,208,128);
}
.category span span
{
background: url(tabmiddle.png) top left repeat-x;
float: left;
margin: 0 0 0 0px;
}
.category span span span
{
background: url(tabright.png) top right no-repeat;
float: left;
display: block;
padding-right: 19px;
}
.category span span span span
{
background: url(tableft.png) top left no-repeat;
display: block;
padding-left: 19px;
padding-top: 3px;
}
.righttab
{
display:block;
float: right;
}
.righttab span
{
background: url(topborder.png) top repeat-x;
display: block;
}
.righttab span span
{
background: url(righttab.png) top right no-repeat;
display: block;
float: right;
margin-left: 75px;
}
Related
I need to place an image behind (or in front of - it doesn't matter) my h1 text, with it positioned so that it will always be a little to the right of the end of the text, like this:
I can't seem to get the background image to display either on top of or behind the text. What am I missing?
h1 {
text-align: center;
}
h1:after {
content: "";
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") no-repeat;
background-position: -85px 12px;
background-size: 32%;
width: 400px;
height: 50px;
position: absolute;
}
<h1>Dynamic Headline</h1>
With :after, I can't get the image to display behind or above the text.
In order to shift the background to display on top of the text, instead of the background-position you're looking for margin-left. Note, however, that you can't apply margin-bottom to an absolutely-positioned element, so you'll still need to make use of background-position to adjust the vertical offset. I've changed this to 4px in the following example:
h1 {
text-align: center;
}
h1:after {
content: "";
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") no-repeat;
background-size: 32%;
width: 400px;
height: 50px;
position: absolute;
margin-left: -85px;
background-position: 0 4px;
}
<h1>Dynamic Headline</h1>
I would wrap the text with a span, that has left and right padding, and then put the image as the background of the span, and position it to the right:
h1 {
text-align: center;
}
h1 span {
padding: 0 1.3em;
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") right top no-repeat;
background-size: contain;
}
<h1>
<span>Dynamic Headline</span>
</h1>
And the same idea without a span, but not supported by IE/Edge due to width: content-fit.
h1 {
width: fit-content;
margin: 0 auto;
padding: 0 1.3em;
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") right top no-repeat;
background-size: contain;
}
<h1>Dynamic Headline</h1>
I'm trying to get a text within div to be entered with word spacing and image in the background.
An example of what i'm trying to achieve:
Her's a fiddle that shows what I achieved so far:
div {
width: 200px;
}
h2 {
display: inline-block;
text-align: center;
color: #000000;
word-spacing: 40px;
background: url("http://s33.postimg.org/twxfn1by7/Playlist_Triangle.png") top center no-repeat;
background-size:50px;
padding: 20px 0;
}
<div>
<h2>
Some text
</h2>
</div>
https://jsfiddle.net/wes2sa1t/
You'd have to wrap the words in something like a span so you can center them. This is how to do it with CSS, as you tagged this with the CSS tag, but you could also achieve this with jQuery.
HTML:
<div>
<h2>
<span>Some</span> <span>text</span>
</h2>
</div>
CSS:
h2 {
display: inline-block;
text-align: center;
color: #000000;
word-spacing: 40px;
background: url("http://s33.postimg.org/twxfn1by7/Playlist_Triangle.png") top center no-repeat;
background-size: 50px;
padding: 20px 0;
}
span {
width: 100px;
display: inline-block;
text-align: right;
}
span:nth-child(2) {
text-align: left;
}
Rather than centering something, it more seems like you want the image evenly spaced between the words. I agree w/ Blaine that the words need to be wrapped in a span. I don't agree with setting a fixed width though, as that is very constraining.
Instead, I would move the background image from the h2 and place it on a psuedo-element of one of the spans:
h2 {
display: inline-block;
text-align: center;
color: #000000;
padding: 20px 0;
font-size: 0; // gets rid of whitespace between the spans
}
span {
font-size: 24px; // resets the font-size of the words
}
span:nth-child(1):after {
content: '';
display: inline-block;
width: 50px;
height: 50px;
background: url("http://s33.postimg.org/twxfn1by7/Playlist_Triangle.png") top center no-repeat;
background-size: 50px;
}
Using inline-block places everything right next to each other, and putting a font-size: 0 on the h2 removes any whitespace.
Now the words can be any length, and the image will remain perfectly spaced between them.
Here's a demo: https://jsfiddle.net/rq8u5b3k/1/
If you can't control the markup for whatever reason, here's a jQuery snippet that will wrap each word in a span:
var words = $("h2").text().split(" ");
$("h2").empty();
$.each(words, function(i, v) {
$("h2").append($("<span>").text(v));
});
Updated demo: https://jsfiddle.net/rq8u5b3k/3/
I'm making my first site and I'm having an issue with some buttons I've created. They are three divs within another div, and horizontally aligned. Here's the html:
<div class="buttons">
<div id="next-event"></div>
<div id="blog"></div>
<div id="about"></div>
</div>
Here's the CSS:
.buttons {
height: 200px;
}
#next-event, #about, #blog {
width: 155px;
padding-bottom: 30px;
}
#blog {
margin-right: 125px;
float: right;
height: 155px;
background: url(assets/blog.png) no-repeat;
}
#blog:hover {
background-position: -155px 0px;
}
#next-event {
margin-left: 125px;
float: left;
height: 155px;
background: url(assets/next-event.png) no-repeat;
}
#next-event:hover {
background-position: -155px 0px;
}
#about {
display: inline-block;
width: 95px;
height: 155px;
background: url(assets/about.png) no-repeat;
}
#about:hover {
background-position: -155px 0px;
}
I'm having problems when I resize the window in and out, as you can see at the site: http://madeitseries.com/
For scrolling in, how to I set it so the containing div for the yellow buttons gets longer only when the window is below a certain width?
And for scrolling out, how do I set it so the yellow buttons distribution only spreads to a certain point?
Thanks so much!
So to position the buttons, you could use a grid: http://youtu.be/0IrWRuEyXYA
Or you could use a media query to change the styles once the screen gets to a certain size so they don't overlap each other
Edit: Here's a link to the fiddle with the media query and it working properly as I imagine you want it to. I've removed the floats and margins, set the .buttons div to be the width of the buttons, set .buttons height to auto, and centred them using margin: 0 auto; http://jsfiddle.net/W6B2L/
#media screen and (max-width: 770px) {
#about {
display: block;
}
.buttons {
height: auto;
width: 185px;
margin: 0 auto;
}
#blog {
margin-right: 0px;
float: none;
}
#next-event {
margin-left: 0px;
float: none;
}
}
set the height of the buttons div to auto
if you want the buttons to resize according to the width of the screen, give them each a width of 33.33%.
Why can't you use css media query like below,
#media (max-width: 740px)
{
.buttons div
{
height: 100px !important;
width: 100px !important;
background-size: 200% !important;
padding: 0 !important;
}
}
Just copy this code into your css file.. when your webpage shrinks(resize) below 740px, then your images automatically resized as per the below code.. Like that you can customize your own codes for your desired screen resolution...
Note: Just use this code in your web page.. It might works.. And you need to customize for the hover state only..
I have an <li> which is constrained in width and the height is set to an aspect ratio of 1:1.
I then have an element inside which is positioned absolutely with a 100% width and height. I then add an icon font to the :before pseudo element. How can I vertically center that pseudo element?
My code is:
li
+span-columns(1, 6)
a
+border-radius(50%)
display: block
position: relative
width: 100%
border: 5px solid $bright-blue
border: remCalc(5px) solid $bright-blue
&:before
padding-top: 100%
content: ''
display: block
span
display: block
position: absolute
top: 0
left: 0
width: 100%
height: 100%
&:before
// Content is added via the style for data-icon
display: inline-block
min-height: 100%
vertical-align: middle
width: 100%
color: $white
font-size: 32px
text-align: center
outline: 1px solid red
A pic of the problem. The red outline is on the span:before
COMPILED OUTPUT:
li {
width: 150px;
}
li a {
border-radius: 50%;
display: block;
position: relative;
width: 100%;
border: 5px solid blue;
}
li a:before {
padding-top: 100%;
content: '';
display: block;
}
li a span {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
li a span:before {
content: attr(data-icon);
font-family: 'IconFont';
display: inline-block;
min-height: 100%;
vertical-align: middle;
width: 100%;
color: white;
font-size: 32px;
text-align: center;
outline: 1px solid red;
}
I'v created a fiddle with a solution for you.
Here: http://jsfiddle.net/avrahamcool/h3e2G/
your span is called Content in my fiddle, and I've add a new span called Centerer.
also, I centered some text in the layout, but you can change it back to your logo without noticing any differnce.
the main ideads are:
fix the height of the li (you already fixed the width, and if it should be a circle, I dont see a problem with also fixing the height).
lossing the relative and ablsolute way
instead of centering the text inside the span (while the span was height:100%), we center the span inside his holder.
Had to solve this with top padding like so:
$half-width: space(1, 6) / 2
$half-font: remCalc(33px) / 2
$border-widths: remCalc(5px)
+rem(padding-top, $half-width - $half-font - $border-widths)
That gives me custom top padding in rems depending on the width of the circle at the time and it scales perfectly when the body font size is increased or decreased.
I have a few css sprites for a rating system: http://i.imgur.com/qeb2b.png
When loading the thumbs
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
width: 15px;
height: 16px;
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
width: 15px;
height: 16px;
}
The only way I can get the thumbs to show up is if I do this:
Was this review helpful? |
If I remove all the then the thumbs disappear. If I leave only one then it shows a partial view of the sprite.
How can I display the sprite without the need of ?
by using float:left:
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
width: 15px;
height: 16px;
float: left; /* OR float:right, depending on what you need */
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
width: 15px;
height: 16px;
float: left;
}
As the links are inline elements, you can't specify the width and height for them. They get their size only from their contents, that's why the spaces gives them size.
I think that the best option for your use is to make the links inline-block elements. That way they are block elements so that they can have a specific width and height, but they are still inline elements in the text flow so that you don't have to change your markup.
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
display: inline-block;
width: 15px;
height: 16px;
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
display: inline-block;
width: 15px;
height: 16px;
}
The image is a background. But for the background to be visible, the element must have some height and width. In your case an empty tag has no height and width. You should make it display:block
Just use display: inline-block; in both of your CSS classes.