I am trying to put an image as the background and would like it to align to the right, but not closely align to. Something like margin-right:10px. Is it possible to do that in pure css, without explicitly adding a margin to the image?
I had several attempts, but all failed...
http://jsfiddle.net/cA7Un/1/
Thanks in advance!
You could use a percentage, but this is only good if you know the width of the container will stay the same:
background-position: 95% center;
Otherwise, you could add 10 pixels of whitespace to the right of your image in an image editor like Photoshop.
To use the example you put on jsfiddle:
I declared the following extra style:
.rss
{
background-image: url('http://tipabsorb.com/index/wp-content/plugins/category-specific-rss-feed-menu/rss_small_icon.png');
background-repeat: no-repeat;
float: right;
width: 16px;
min-width: 16px;
max-width: 16px;
height: 16px;
min-height: 16px;
max-height: 16px;
margin: 10px;
}
This uses the same image, but adds an extra div to your your markup. This method gives you the image as a background image, and then with the margin you can position it as far from which ever side you want (by also changing the float if you want it on left hand side).
<div class='test' style='width: 300px; height: 100%'>
<div class="rss">
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
The positioning of the "rss" div before you normal markup is important as this affects the flow. Could also do it by positioning the div absolutely with a relative parent.
Finally I deleted the background from the ".test" class, as it has now been moved to the "rss" class.
I hope this helps.
Related
I have a weird issue where, when I hover on the pseudo element (::before) here, the highlight seems to be off.
The CSS given is:
.testimonial__quote::before {
content: open-quote;
font-size: 11.25rem;
width: 4.0625rem;
height: 3.4375rem;
position: absolute;
color: #fbce07;
display: block;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
}
HTML:
<div class="testimonial__quote-container">
<blockquote class="testimonial__quote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus lorem eu aliquet fermentum. Vestibulum ante ipsum
primis in faucibus orci luctus.
</blockquote>
<p class="testimonial__author">- Scuderia Ferrari</p>
</div>
What am looking for is someone who has had an experience with this sort of issue. I can't post a JSFiddle as some people suggest, since it's not reproducible.
It's normal behavior. Jsfiddle.
You set width and height for block element (in your case it is presented by ::before pseudo element). But font-size of text is too big and symbol " "falls out" from sized container.
At the picture below I removed width and height properties. Now block sizes are calculated depending on block content (it is " symbol).
Add these styles to see that the character does not fit in the container:
overflow: hidden;
outline: 1px solid red;
So I think you should not set width and height to this element. Or you can use svg element or image with fixed sizes.
Please check this fiddle. Note: when you use position:absolute dont forgot to properties top, left, right, bottom,
https://jsfiddle.net/Lbctgyea/5/
What I want:
What I want (crop first one, too, but keep symmetry):
What I have:
div.row.separator div.col {
height: 40px;
width: 100%;
padding: 0px;
background-image: url("./images/rhomb.png");
background-repeat: repeat-x;
}
rhomb.png:
<div class="container-fluid" id="main-content">
<div class="row">
<div class="col">
<h1>Title here 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
luctus eros at maximus tincidunt. Donec fringilla mattis massa,
vitae blandit massa egestas sed. Maecenas ipsum ligula, pretium
nec pellentesque convallis, consequat at magna.</p>
</div>
</div>
<div class="row separator">
<div class="col">
</div>
</div>
.......
Body is gray, container is white. I want a line of rhombs after a section as separator.
So, having a small image used as background repeat-x in a div is it possible to prevent crop on last one or make the same crop on first one (align center the repetitive background...)?
UPDATE: Feel free to experiment: https://github.com/GhitaB/sample-design-bootstrap4-css (I'm just curious. Not a real problem for me.)
Even though space in background-repeat is still poorly supported, the twin property in border-image has a good support (starting in IE11)
.test {
height: 0px;
width: 182px;
margin: 5px;
border-style: solid;
border-width: 0px;
border-bottom-width: 38px;
border-image: url(https://i.stack.imgur.com/8aOpi.png) 0 0 38 0 space;
}
.test:nth-child(2) {
width: 210px;
}
.test:nth-child(3) {
width: 220px;
}
.test:nth-child(4) {
width: 250px;
}
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
Replacing:
background-repeat: repeat-x;
with
background-repeat: space;
seems to solve my problem. (Not 100%, but in almost all cases)
space: tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit, space them out evently images always touching the edges.
(https://css-tricks.com/almanac/properties/b/background-repeat/)
Also: https://www.impressivewebs.com/space-round-css3-background/
Basically, when it comes to the background, sadly, we aren't able to resize images expressly. We can fill the whole page or keep the pictures original image. My idea for this would be to create multiples of the image your self using a picture editing software and then add the repeated image in the full screen format.
Until recently I have been using Flexbox to vertically align elements like so:
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
However I have begun working on more and more projects that need to support older browsers which do not support Flexbox e.g. Internet Explorer 8. I would like to begin supporting a much wider range of browsers and devices.
My question is; what are some of the most heavily supported methods of vertical alignment using just HTML and CSS?
In most cases the elements I'm centring will not have fixed heights or widths, generally the width will be a percentage value and the height will be determined by dynamic content.
Thanks in advance.
If you don't have the luxury of knowing the exact size of the box you want to align to the middle, then I usually go with the display:table-* css setup.
Putting the content box into a div with display:table-cell wrapped in a display:table element does the trick.
This solution's browser compatibility is pretty good.
Html
<div class="popup">
<div class="popup-table">
<div class="popup-table-cell">
<div class="popup-body">Hello there!</div>
</div>
</div>
</div>
Css
.popup{position:fixed;top:0;left:0;bottom:0;right:0;}
.popup-table{display:table;width:100%;height:100%;}
.popup-table-cell{display:table-cell;vertical-align:middle;text-align:center;}
.popup-body{display:inline-block;border:1px solid black;padding:3em;}
Uploaded a code example here: http://codepen.io/anon/pen/NdGpje
** Please note, that the .popup class is a wrapper only, you don't have to use it - it's just to have a simple usecase for middle positioning, and a wrapper element for .popup-table.
Here is a very simple example from CSS Tricks. You can set the elements top margin to 50% and then raise it up by half its height. Here is the code:
body {
background: #f06d06;
font-size: 80%;
}
#div1 {
background: white;
height: 300px;
margin: 20px;
width: 300px;
position: relative;
resize: vertical;
overflow: auto;
}
#div1 div {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
background: black;
color: white;
padding: 20px;
transform: translateY(-50%);
resize: vertical;
overflow: auto;
}
<body>
<div id="div1">
<div>
I'm a block-level element with an unknown height, centered vertically within my parent.
</div>
</main>
</body>
The technique I personally use to vertically align content in a div is with display: table; display: table-cell; and vertical-align:middle; like so:
HTML:
<div class="block">
<div class="block__module">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo pellentesque est quis mollis. Nulla suscipit risus a ornare viverra. Suspendisse potenti. Phasellus tempor imperdiet ullamcorper. Nam accumsan volutpat tincidunt. Cras eu mauris posuere, imperdiet elit ac, rutrum ligula. Maecenas ullamcorper sit amet nisi vitae consectetur. Sed ultrices lorem a fermentum lacinia.
</p>
</div>
</div>
CSS:
.block {
display:table;
height: 500px;
width:100%;
}
.block__module {
display:table-cell;
vertical-align:middle;
}
Here is a fiddle link with my code.
I understand that your content may be dynamic, I am not sure if changing the height of the div to 100% will help and achieve the same result but this way of vertical alignment works in at least IE8 plus. I always declare a height but I understand that this is not something that we can always do.
I found a similar question to this one on SO that may be of help, please see here.
I also came across this handy code generator that may help, please see here. It gives you the choice of filling in some values and generates the best option for vertical alignment.
so i have my index.html and a canvas.css
body{
}
#canvasHIPPO{
display:block;
margin:0px auto 0px;
width:100%;height:100%
background-image:url('http://www.pcl.co.nz/site/pclimaging/images/Big%20Print%20Carry.jpg')
}
in my index.html:
<div id="container">
<canvas id="canvasHIPPO" width="800" height="600" display="block"></canvas>
</div>
I would like to know how to:
1) center the canvas ontop of the background city image, despite 2) different screen sizes and/or 3) maintain the same aspect ratio.
I was pretty sure the margin:0,auto should have fixed the (1) and centered the canvas ontop of the background image...what am i missing?
Thanks!
Are you trying to centre the image horizontally or vertically?
If you are centring it horizontally, in your css it should be:
#content {
background-image: url('http://www.pcl.co.nz/site/pclimaging/images/Big%20Print%20Carry.jpg');
}
#contentHIPPO {
margin: 0 auto;
display: block;
width: 800px;
height: 600px;
}
and in your html:
<div id="content">
<div id="contentHIPPO">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
This will cause the div to be centred horizontally, with the image repeating in the background. If you want the image to be re-sized to the browser window, you would need to use javascript to get the size of the window.
Why not you use
display: webkit-box;
The new css3 provide more properties follow the tutorial
http://www.w3schools.com/css3/default.asp
If it's a small project, you can always convert your hex colours (#FFFFFF) to RGB and Alpha (where the alpha channel is transparency), which looks something like this rgba(255,255,255,100). However, if you've got hundreds, or even thousands, of instances of colour references, you're probably better off Googling a tutorial.
I know there are a few questions about similar topics but they mostly amount to floating the div/image. I need to have the image (and div) positioned absolutely (off to the right) but I simply want the text flow around it. It works if I float the div but then I can't position it where I want. As it is the text just flows behind the picture.
<div class="post">
<div class="picture">
<a href="/user/1" title="View user profile.">
<img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp's picture" title="neatktp's picture" />
</a>
</div>
<span class='print-link'></span>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
</div>
Is an example of the HTML
With the CSS being:
.picture img {
background: #fff;
border: 1px #ddd solid;
padding: 2px;
float: right;
}
.post .picture {
display: block;
height: auto;
position: absolute;
right: -10px;
top: -10px;
width: auto;
}
.post {
border: 1px solid #FFF;
border-bottom: 1px solid #e8ebec;
padding: 37px 22px 11px;
position: relative;
z-index: 4;
}
It's a Drupal theme so none of this code is mine, it's just that it's not fully working when it comes to putting a picture there.
I know this is an older question but I came across it looking to do what I believe you were trying to. I've made a solution using the :before CSS selector, so it's not great with ie6-7 but everywhere else you should be good.
Basically, putting my image in a div I can then add a long thing float block before hand to bump it down and the text wraps merrily around it!
img {
float:right;
clear:both;
width: 50% ;
margin: 30px -50px 10px 10px ;
}
.rightimage:before {
content: '' ;
display:block;
float: right;
height: 200px;
}
You can check it out here:
http://codepen.io/atomworks/pen/algcz
Absolute positioning takes the element out of the normal document flow, and therefore it does not interact with the other elements. Perhaps you should revist how to position it using float instead, and ask about it here on Stack Overflow if you get stuck :)
As mentioned by #Kyle Sevenoaks, you are taking absolute positioned content out of the document flow.
As far as I can see, the only way to have the parent div wrap the absolute positioned contents, is to use javascript to set the width and height on each change.
When you position a div absolutely, you're effectively taking it out of the document flow, so the other elements will act as if it's not there.
To get around this, you can instead use margins:
.myDivparent
{
float: left;
background: #f00;
}
.myDivhascontent
{
margin-left: 10px; /*right, bottom, top, whichever you need*/
}
Hopefully that will do the trick :)
In my opinon, the "Absolute" trait is poorly named, because its position is actually relative to the first parent whos position is not static
<div class="floated">
<div style="position: relative;">
<div class="AbsoluteContent">
stuff
</div>
</div>
</div>
I think the best option is to add an additional div after the float content, but still inside the parent to clear previous styles.
<div class="clear"></div>
And CSS:
.clear
{clear:both;}
I needed a similar solution to float a pullout quote (not an image) which would have variable length text inside. The pullout quote needed to be inserted into the HTML at the top (outside the flow of the text) and float down into the content with text that wraps around it. Modifying Leonard's answer above, there is a really simple way to do this!
See Codepen for Working Example: https://codepen.io/chadwickmeyer/pen/gqqqNE
CSS
/* This creates a space to insert the pullout content into the flow of the text that follows */
.pulloutContainer:before {
content: '' ;
display:block;
float: right;
/* The height is essentially a "margin-top" to push the pullout Container down page */
height: 200px;
}
.pulloutContainer q {
float:left;
clear:both;
/* This can be a set width or percent, if you want a pullout that floats left or right or full full width */
width: 30%;
/* Add padding as you see fit */
padding: 50px 20px;
}
HTML
<div id="container">
<div class="pulloutContainer">
<!-- Pullout Container Automatically Adjusts Size -->
<q>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet.</q>
</div>
<div class="content">
<h1>Sed Aucteor Neque</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.</
...INSERT MORE TEXT HERE...
</div>
</div>
Absolute positioning does not let you wrap text. You have to use float and position using margin or padding.
Here's a trick that might work for some:
if you have a container packed with a lot of objects, and you want that positioned object to appear up high in certain cases, and down lower in other cases (various screen sizes for example), then just intersperse copies of the object multiple times in your html, either inline(-block), or with float, and then display:none the items you dont want to see according to the conditions you need.
Here is a JSFiddle to show exactly what I mean: JSFiddle of right positioning high and low
Note: I added color only for effect. Except for the class names, the subject-1 and subject-2 divs are otherwise exact copies of each other.
There is an easy fix to this problem. It's using white-space: nowrap;
<div style="position:relative">
<div style="position: absolute;top: 100%; left:0;">
<div style="white-space:nowrap; width: 100%;">
stuff
</div>
</div>
</div>
For example I was making a dropdown menu for a navigation so the setup I was using is
<ul class="submenu" style="position:absolute; z-index:99;">
<li style="width:100%; display:block;">
Dropdown link here
</li>
<ul>
Image Examples
Without Nowrap enabled
With Nowrap enabled
Also if you still can't figure it out check out the dropdowns on bootstrap templates which you can google. Then find out how they work because they are using position absolute and getting the text to take up 100% width without wrapping the text.