OK, I would like make my "compass" move so it will not block the text when the screen gets smallar.
http://www.mateuszrybinski.com/
The point is not to make the compass go over the text.
["I’d love to travel but...
I don’t have money.
I don't have time.
I can't speak the language.
What is your excuse?"]
#main_box {
margin: auto;
background-color: #c95242;
overflow: auto;
padding-top: 50px;
padding-bottom: 70px;
background-image: url(http://www.mateuszrybinski.com/wp-content/uploads/2013/04/half.png);
background-repeat: no-repeat;
how can I do it? The best solution would be if the compass was going down as the text was closing in.
If you want to customize the position of the compass image, I would recommend not applying it as a background image. Instead, make it show up inline so that your text will never overlap it, similar to what you've done with your portrait image.
That being said, I'm not totally sure where you want your image to show up and that heavily influences how the layout would be coded.
I don't know about the layout code, but have you considered instead changing the color of the compass so that the text is still legible when over the compass image? For example, the compass could be a slightly different shade of the red background color.
Related
So I have an image, more of a screen shot, but I am not sure what I should do to make the image scale. Should I export the text as some kind of SVG? I don't want to have to re-write the text, that doesn't seem to make sense to me in this context.
The image is:
What would you do to make it so the image will scale, the text is readable and life is grand.
I have never worked with an image that has text on it. I am sure the first step is to remove the text, but does that literally mean I recreate the text with a bunch of spans and divs to get the colors? Or is there an easier way?
Update
Some people might not be clear as to what context of scaling I mean. I am talking web responsive.
That is scaling the browser. Right now the image sort of scales, how ever the text is unreadable.
img {
display: block;
max-width: 100%;
width: auto;
height: auto;
}
DEMO: http://jsfiddle.net/7d064qao/
I hop this answers your question, wasn't sure what you meant
I'd set the image as a background-image of a div and use CSS to make the div itself responsive--width: __% or auto, etc. The background-image attributes are pretty flexible: http://www.w3schools.com/cssref/css3_pr_background-size.asp.
I have a lot of css looking like this:
.T {
background-size: 1.8rem, auto;
background-image: url('./Images/ListIcons.svg#T');
padding-left: 1.8rem;
}
Where ListIcons.svg is a stacking of images (amongst which one "is" T).
I can then use such class on text containing node like:
<label class="T">some text</label>
which renders like:
<T image>some text
It doesn't work in Chrome anymore, and will stop working in other browser soon (standard gurus had to fix a issue with SVG/CSS*).
I hear one should just go back to the good* old sprite maps technique.
As far as I know, there's no way to clip a background image to the portion wanted, let alone while using background-size.
Is there a workaround?
http://robert.ocallahan.org/2012/10/impending-doom-for-svg-stacks-sort-of.html
not good imho
EDIT:
I figured out I could somehow hide portions of the backgroud instead of clipping it.
It goes like this:
.ButtonType {
background-size: 0.1rem 100%, 100% 100%, auto 1.8rem;
background-position: left center, 1.9rem center, calc(-6 * 1.8rem + 0.1rem) center;
background-image: url('./Images/White.png'), url('./Images/White.png'), url('./Images/ListIcons.svg');
}
(6th image with a size of 1.8/1.8 rem padded 0.1rem from left + concealment of "non 6th image" using white images).
It's long, color dependent (wherever background is another color, one have to rewrite the almost exact same two line), and has to be repeated for every single use of the sprite map as a background.
Simply put: it sucks (yet it works).
I feel like going back to 1 image = 1 file, and not trying to reduces # files accesses.
So I had my "My Work" page laid out exactly the way I wanted it yesterday, and I needed to change servers. I changed servers, and all my other sites are fine, but the look of my "My Work" page got messed up. Basically the background image from the bottom widget area is now in the middle of the page. It looks like nothing on this page is inside of its container anymore. It definitely was before I changed servers.
Any help would be greatly appreciated, I've no idea why it's only affecting this one page on this one site. I tried re-uploading the css file, and the entire theme to the new server and nothing changed.
Edit: Sorry, here is the css for the widget area that's floating in the middle of the page:
.widget-area {
padding-top: 40px;
font-family: 'Alegreya Sans', sans-serif;
font-size: 20px;
color:#d2c1ad;
margin-top: 3%;
background-image:url(images/widgetarea.png);
background-repeat:no-repeat;
background-size: 101%;
}
EDIT:
Floated items do not take up any space. So even though you have a bunch of .gallery-item divs in there, they are not making the container have a height since they're floated. You need to clear the float. The easiest way is to add a div after the last .gallery-item. Give it the css of clear:both;
On line 555 of your stylesheet where you have .widget-area, add:
background-position: bottom center;
The problem is the margin-top on your aside objects in the widget. To prove this, change the margin-top to a smaller value for your .widget class. For me, this moved the black wiggly thingy to the bottom, just above the footer, and the three aside elements were to the right, all above or below each other.
I'm guessing there is a better way to make this work, and I personally would stay away with using percentages. But I'm in no way a css expert and there are plenty of those on here that might give you a better, more robust solution to your problem.
I'm having a big issue with something so "small" I can't figure it out and I'm reaching out to everyone here. The issue I'm having is this:
I have photos which are roughly 512px or 800px wide I want to fit, CENTERED, in a circle display area and keep my hover effects. I also need to size them the photos so the centered part shows a decent amount of the photo.
The current code I'm working with will make them perfect circles IF the photos are perfect squares. The problem is when the photo is a rectangle, it turns into an oval.
I had created a div like below using overflow:hidden and the css but it conflicted with the current CSS. Any help would be appreciated immensely!
.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;
}
img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;
}
Here's the link to my dev pages.
http://www.lmcodebox.com/b-test/index5.html
http://www.lmcodebox.com/b-test/portfolio.html
have you thought about setting the image as the background of the div? This way you keep all the effects you already use and there are ways to manipulate the background position without affecting the outside div. Other possible solution to have perfect round divs, is to use the ::after pseudo-class, like in this gallery tutorial:
http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
Sorry if I misunderstood you, hope it helps.
PS.: Beautiful test page by the way.
Well first, you'd only need to set the border radius to 50% to make something a circle, and if each corner is the same value, then you can just enter it once like so:
border-radius:50%;
As far as these images being rectangles goes, you could set your images as the background of a span, give it a height and a width that forms as square and use display block. This would keep the photos proportional, but allow you to make them square.
This however, could create a bit of a markup mess if you have a lot of images to display. Another solution, which means more work, but I would personaly do it, is to just crop your images into squares for their thumbnail with photoshop or some other image editing tool.
Above all of that, I don't see a width or height actually declared on the pages you linked. Are you sure you've placed them on the correct class? I see the border radius declared, but I'm only seeing a max-width: 100%; not width: 200px or height:200px
I re-thought the problem with the suggestion of using the images as backgrounds of an element as madaaah did above.
What I ended up doing was wrapping a DIV around my A tag like this:
then, I set the background of the A like this: style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">
lastly, I made a square image (800 x 800) to go inside the A tag so it would keep the round shape and made it completely transparent so the background image is visible, while growing and shrinking in a "responsive" manner.
How can I do to have an image as the background for all links? I want to have a nice box representing buttons, but I cannot figure this out.
I have tried:
a {
font-size: 40px;
background: url('images/shooting-stars/shooting-star-link.png') no-repeat left top;
}
But this is not working, image is not displaying.
"I want to have a nice box representing buttons, but I cannot figure this out." - I don't understand this part.
Anyway, your css looks fine from here, are you sure the image exists? This is a working example with the exact same code, just an image that I'm sure exists:
http://jsfiddle.net/3k9nm/
If you want to always show the image, even if the text is shorter, you should set a minimum width for the links. This does mean they'll have to be inline-blocks, you can't set width on a regular link (which is an inline element).
a {
display: inline-block;
min-width: 25px;
}
(25px was randomly chosen, fill in the width of your background image..)
Two things to try, is there any text in the actual <a> links? And if you use Firebug, you can check you've definitely got the right file path to the image...
HTML
<div id="example-link">
Link to journal article
</div>
CSS
#example-link a {
background: url('images/shooting-stars/shooting-star-link.png');
}