I don't find a way to make a proper crop of my svg image.
First, i am a newbie.
I tried fiddling in css with position absolute/relative, but the fact that this svg is animated with gsap makes me unable to load the svg as a background image in css.
I also tried modifying the viewbox parameters, but it seem a bit complex as a solution. I wonder if that can be responsive.
<div class="wrapper">
<div class="nav-bar>
"a nav bar here"
</div>
<div class="animatedSvg">
<svg>
the long svg code here of my fancy animated gsap.
</svg>
</div>
</div>
Css: elements are using flexbox for placement and sizing.
html, body{
margin: 0;
height: 100%;
}
.wrapper{
display: flex;
flex-direction: column;
height: 100
}
.nav-bar{
display: flex;
flex-direction: column;
}
.animatedSvg{
{
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
background-color: black;
}
I am starting to wonder if this can only be fixed by controlling the viewBox with some javascript?
So it turns out that the answer was in fiddling with height, width, and the inline svg option preserveAspectRatio!
With these in the inline svg's code, things are now working as they should :)
`height="100%"
width="auto"
preserveAspectRatio="xMidYMin slice"`
Related
I finished my website but I didn't realize that safari doesn't support the flexbox gap. Is there a way around this without having the mess anything up? This is mostly for my media queries.
<div class="social-media">
<a href="https://github.com/">
<img class="social-media__icon" src="img/github.png" alt="Github">
</a>
<a href="https://www.linkedin.com/">
<img class="social-media__icon" src="img/linkedin.png" alt="LinkedIn">
</a>
</div>
.social-media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 8rem;
margin-top: 10rem;
padding-bottom: 2rem;
}
.social-media img {
width: 90px;
height: 90px;
}
#media only screen and (max-width: 400px) {
.social-media {
gap: 3rem;
margin-top: 5rem;
}
.social-media img {
width: 62px;
height: 62px;
}
}
Use the Lobotomized owl selector: .parent > * + * {} to add a margin-left that gives you space between the elements that come after another element, this way you eliminate the undesired margin it creates when you put the margin directly to the child's first element (.social-media img{})
.social-media > * + * { margin-left: 8rem;}
Here you can read more about the Lobotomized Owl Selector
Edit: Gap is now supported in safari so you should be able to use it no problem.
Property gap with display: flex is not supported by Safar version < 14 https://caniuse.com/flexbox-gap .
You might want to replace display flex with grid:
display: grid;
grid-gap: 8rem; /* Safari 10-11 */
gap: 8rem; /* Safari 12+ */
because grid's gap is supported in older Safari versions: https://caniuse.com/mdn-css_properties_gap_grid_context
The accepted answer has the problem, that you will have a wrong margin on the first element if when there is only one row. Also centered elements will always be 8rem too far the right.
Better solution that will always work with correct spacings:
.container {
display: flex;
// the trick is to set margins around boxes, but correct the margins around elements that are situated at the border of the container with negative margins
margin: 0 -10px -20px -10px;
}
.box {
min-width: 100px;
height: 100px;
background-color: deeppink;
margin: 0 10px 20px 10px;
}
<div class='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
</div>
You can remove the gap class and add another one to child elements
<div class="d-flex"> // it was "d-flex gap" previously
<div class="mx-2">
//content
</div>
<div class="mx-2">
//content
</div>
</div>
I think you could make a div container and put justify-content: space-between; then i think it should work
Usually I vertically center a button, inside an absolute positioned div with top:50%, and margin-left:-(height/2), but today I realised it's not perfect, or I don't know how to use it correctly.
For example I did 2 examples. In the first example the <a> tag is an inline element, in the second example it's a block element. The positioning with block element is perfect, but unfortunately the width is 100%.
Please explain that why is the second example works well, with display:block;?
I'm really interested in your cross browser solution. How do you do this simple stuff?
Here is my css:
.container {
height:240px;
position:relative;
}
.box {
width:200px;
height:100%;
position:absolute;
left:0;
top:0;
background:yellow;
text-align:center;
padding:20px;
}
#example2 { left: 250px; }
.btn {
display:inline-block;
padding:5px 12px;
line-height:34px;
color:#fff;
background:red;
position:relative;
top:50%;
margin-top:-17px;
}
#example2 .btn { display:block; }
..and html
<div class="container">
<div id="example1" class="box">
button
</div>
<div id="example2" class="box">
button
</div>
</div>
The online version is available at http://jsfiddle.net/79hqgabq/2/
The alignment issue you see is being caused by the margin-top: -17px line as seen by this updated fiddle with that line removed on the .btn class: Updated Demo
On another note, vertical alignment is notoriously problematic with old CSS selectors, and it would be a good idea to transition over to Flexbox unless you needed to support older browsers.
Here's your problem with the new display: flex selector and corresponding sub-selectors: Demo w/ Flexbox. This removes the emphasis on having to pixel fudge to get proper vertical alignment.
New .box class
.box {
width:200px;
height:100%;
position:absolute;
left:0;
top:0;
background:yellow;
text-align:center;
padding:20px;
/* New lines for alignment */
display: flex;
align-items: center;
justify-content: center;
}
New .btn class (just removed the old tags)
.btn {
display:inline-block;
padding:5px 12px;
line-height:34px;
color:#fff;
background:red;
}
EDIT: After researching block elements have the property to expand to 100% of the parent container. This can be explained in more detail here. This is why display:block div expands until it reaches the padding on the .box class.
To answer why the display: inline-block element is slightly misaligned is because by default it is aligned on the baseline. See here for reference. Changing the vertical alignment of the div to be vertical-align: top will fix this.
Here is the new fiddle that uses all your previous syntax just with the added vertical-align: middle property.
Okay. I have an issue with an image within a div. Fixed image within a div to make parallax scroll.
Here is what I want to do.
I have a div. Here is code.
#container{
height: 500px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
overflow: hidden;
}
Now I want to add an image in there that is fixed.
#container-img{
position: absolute;
background-position:top center;
margin-right:0px;
bottom:0;
height: 500px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
display-inline: block;
}
My problem is I want image fixed within the div and it goes all over the place. I do not want to add image via css as I have it in Wordpress for someone to change image when they want via dashboard. Here is HTML
<div id="container" >
<img id="container-img" src="<?php echo get_template_directory_uri(); ?>/images/home.jpg"/>
</div>
I want the css to make image fixed and not go outside the div? Any solutions? Thanks.
display-inline: block; is not a valid CSS. Try using display: block. Also background-position:top center; is not needed as you don't have any background image specified.
I would suggest you still use a background image with a background-size: cover; or you will have a hard time distorting the image proportions.
You will need to put the image in a inline style on your container:
<div id="container" style="background-image: url('<?php echo get_template_directory_uri(); ?>/images/home.jpg')">
Hope that helps.
As you can see in the following Fiddle: http://jsfiddle.net/EvWc4/3/, I'm currently searching a way to align the second link (link-alt) to the right side of its parent (p).
Why not using float or position:absolute you'll say, well the main reason is that I like the fact that the links' display (inline-block) property allow them to be verticaly aligned in a naturally kind of way.
By using float or position:absolute; I'll be forced to calculate and put some extra margin-top or top value to vertically aligned the links.
Here is the code but better see the Fiddle http://jsfiddle.net/EvWc4/3/ :
<p>
link
link alt
</p>
p {
padding: 20px;
background: #eee;
}
.link {
display: inline-block;
padding: 10px;
background: #ddd;
}
.link-alt { padding: 20px; }
To do this with CSS3 you can use the flex box model
HTML:
<div class="content">
<div class="box box1"><a>Link 1</a></div>
<div class="box box2"></div>
<div class="box box3"><a>Link 2</a></div>
</div>
CSS:
.content {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
.box2 {
box-flex: 1;
}
(needs vendor prefixes)
http://jsfiddle.net/EvWc4/18/
CSS3 flex and grid items are supposed to address these issues, but standard support remains spotty as of 2013.
Back to the real world. I don't think it is possible to do this purely in CSS2.1 (IE8+) without pixel hacks. The thing is, text alignment is controlled by the parent element, and since the two anchors share their parent, they either both align to the left or to the right. And justify doesn't work on the last line.
If you can suffer a little additional HTML, there are two approaches:
1) Add another inline that is guaranteed to wrap the line, and then try to hide the empty line. This allows you to use text-align justify on the parent.
<p>
link
link alt
<span class="boom"></span>
</p>
<style type="text/css">
p {
padding: 20px;
background: #eee;
text-align: justify
}
.link {
display: inline-block;
padding: 10px;
background: #ddd;
}
.link-alt {
padding: 20px;
}
span {
display: inline-block;
height: 0;
width: 100%
}
</style>
Pros: works on any number of inline blocks, not just two. Only a little extra HTML required.
Cons: takes extra effort to hide the last (empty) line of text (setting the inline block inside of it to 0 height won't help you), and you're going to have to fiddle with margins or something else to make it really work. Further discussion: How do I *really* justify a horizontal menu in HTML+CSS?
2) Add another layer of inline blocks on top of your anchor tags and size them to 50%. Then you can apply separate text-align to get the final layout you requested. It is important that no whitespace is allowed between two inline blocks sized to 50%, or you'll wrap the line.
<p>
<span class="left">
link
</span><span class="right">
link alt
</span>
</p>
<style type="text/css">
p {
padding: 20px;
background: #eee;
}
.link {
display: inline-block;
padding: 10px;
background: #ddd;
}
.link-alt {
padding: 20px;
}
span {
display: inline-block;
width: 50%
}
.left {
text-align: left
}
.right {
text-align: right
}
</style>
Pros: produces the exact layout you requested without polluting the outer box model.
Cons: only works for two inline blocks (you can try to extend it, but it quickly gets really complicated). Relies on having no extra whitespace, which could jeopardize your nicely formatted markup.
You could set the position to absolute and use right: 0
.wrapper {
position: relative;
}
.right {
position: absolute;
right: 0;
}
http://jsfiddle.net/EvWc4/13/
I believe this accomplishes what you're looking for:
.link-alt {
position: absolute;
right: 0; top: 0; bottom: 0;
margin: auto;
max-height: 1em;
}
You can use position: absolute and right: 0 to obtain the right alignment. To keep the vertical centering, you can use top: 0; bottom: 0; margin: auto;. Of course, you'll also need to set a height on the element, or it will stretch to the full height of its parent.
Here's a jfiddle: http://jsfiddle.net/pHppA/
I've updated Pethas example, so it can be done in pure CSS2. It doesn't work in IE7, as it doesn't support display: table-cell; which I use.
http://jsfiddle.net/EvWc4/133/
The attribute float has no bearing on the element's vertical positioning.
p{padding:20px;background:#eee;overflow:auto;}
.link-alt{padding:20px; float:right}
should accomplish what you're looking for. Setting the overflow of the parent to something besides it's default (visible) will force it to treat floating children like normal elements.
Reference article
I haven't tested this at all outside of Chrome, so it might suck for IE.
This simple (and limited) solution leverages text-align: right and width: 50% on the aligned children, and white-space: nowrap on the parent to achieve the desired result.
Example: http://jsfiddle.net/erikjung/ejcJZ/
.vertically-centered-module {
white-space: nowrap;
}
.vertically-centered-module > * {
display: inline-block;
vertical-align: middle;
width: 50%;
}
.vertically-centered-module > :last-child {
text-align: right;
}
I'm doing some tests on a website using Wordpress as a CMS. In the example below the top left of the page has an "S" graphic outside of the main content area, clipped accordingly depending on the browser width. I would like to do something similar with an "L" graphic to the right in the footer.
The page width is set to 960px, and I've made the footer container DIV 1088px so that the "L" appears outside the content area. The trouble is this makes a scrollbar appear when it exceeds the current width of the browser.
I've tried overflow:hidden on the footer container DIV but this doesn't seem to work. I've also tried overflow:hidden on the BODY element and this works ok in IE, but not in other browsers.
Example: http://unclemort.com/wp/
I really hope there is away to do this, any help gratefully received.
I was trying to figure this out myself today and stumbled upon the answer.
What you need is a surrounding element around everything that has this:
#wrapper {
min-width: 600px; //whatever width you want
overflow-x: hidden;
}
Your main content should have that same width, and the things that need to jut out should have a negative margin.
Here's a complete example:
HTML:
<div id="outer">
<div id="container">
<div class="row">
<div class="inner">Hello World</div>
</div>
</div>
</div>
CSS:
#outer {
min-width: 300px;
overflow-x: hidden;
}
#container {
width: 300px;
margin: 0px auto;
background: gray;
height: 500px;
}
.row {
width: 350px;
background: blue;
margin-left: -25px;
}
.inner {
background: yellow;
margin-left: 25px;
width: 300px;
height: 100px;
}
#media screen and (min-width: 301px) {
body {
//overflow-x: hidden;
}
}
jsfiddle:
http://jsfiddle.net/aaronjensen/9szhN/
Try in style.css, line 65, adding:
#footer-container {
border: none;
overflow: hidden;
}
Explanation:
#footer-container #footer {
background: #f5e8f7 url('images/slobraico-footer-pink-full.gif') no-repeat top left;
width: 1088px;
height: 217px;
overflow: hidden;
}
The scrollbar you're hiding is effectively not there.
The scrollbar you're seing is another one.
The problem is that the footer is 1088px wide, and that's causing a scrollbar to appear.
As long as the footer has fixed width and it's parent doesn't have overflow: hidden, you'll get a scroll if there's not enough width for the footer to fit.
Same goes for any other container.