I'm trying to display an image centered on a page with a border that should have different paddings and margins on it's side. The images will be of different widhts and heights. So I need it to stretch accordingly.
I put this in the body to remove all margins:
body {
margin:0px 0px;
padding: 0px;
}
Then I used this to put the border around the image.
#imgcontainer {
position:relative;
text-align: center;
border-color: red;
border-width: 1px;
border-style: solid;
padding: 5px;
}
But then the border stretches all across the with of the page. Is there any way to prevent his? If I put:
position:relative;
The border snaps into place but then the image is not centered anymore.
If I put a container box around #imgcontainer it also snaps to the edge of the page.
I think it can be solved simply with some combo of position:relative/absolute?
This is what I'm talking about: http://kareldc.com/dislexicon/1-motion.html
Thx!
Hi now define according to #Fabrizo Calderan
css as like this
#imgcontainer {
display:inline-block;
vertical-align:top;
}
than your result is
If I well understood the problem you could assign display: inline-block to #imgcontainer, otherwise post a fiddle showing the issue
you can just apply the border effect to the img tag alone.
for example, just put
#imgcontainer img {
border-color: red;
border-width: 1px;
border-style: solid;
}
Here is an answer for you: fiddle example
Related
I have a custom webkit scrollbar like this:
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: #999 !important;
}
So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...
So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.
Or, if possible that I can make the scrollbar offset in a div.
Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.
Thanks in advance!
If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:
.superDiv{
height:100%;
width:90%;
position:fixed;
}
body{ overflow: hidden }
The second question - you're looking for
::-webkit-scrollbar-track-piece {
background:transparent;
}
But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.
Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:
<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;
To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/
If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 5px;
right: 20px;
overflow: scroll;
}
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }
Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/
I have a question about the scrollbar that appears when it does not fit.
For example here I have one news item. Below a screenshot of the layout:
And when you add more items the scrollbar will appear over the date.
It's default behauviour for a scrollbar to appear inside a div, but is it possible to
apply css when the scrollbar appears inside. For example I could use a padding-right: 16px;
to the container. The only problem then, is another container is floated to it and these are inside a big container then the layout would collapse because of the extra padding.
Is there another way to keep the layout without breaking apart?
Here is the link: http://jsfiddle.net/EANbh/
and the css to the container:
.container {
width: 200px;
height:200px;
border: 1px solid grey;
overflow-y:auto;
overflow-x: hidden;
/*padding-right:16px;*/
}
Regards, Chris.
Another option without using the padding is:
.item {
display:inline-block;
width:184px;
height: auto;
border-bottom: 1px solid grey;
}
I've been staging up a site and building the basic layout when I ran into a little problem. I want to create a "notched" navigation, but I don't know the first thing about doing this.
I've tried to create a to be positioned below my (with the idea that I could either create [with CSS or using an image] a white triangle) that could be aligned with the bottom of my creating the "notched" effect. I've yet to be successful with this and was hoping someone with css // html wizard status skills could be of assistance.
ps. If you need more info just let me know - I'm a bit new to stackoverflow
Make your NAV LI tags & the A tags within them stretch all the way down to the top of your content block.
When an LI is the 'current' tag then place a triangle graphic as the background of the A tag within it.
li.current a {
background:url(triangle.png) no-repeat center bottom;
}
You'll probably want the triangle to be blue the same as the blue bar at the top of the content block.
Cappuccino is using the following css to mark the link tag.
<style>
#navmarker {
width: 1px;
height: 0;
position: relative;
margin-top: -0.7em;
margin-left: auto;
margin-right: auto;
border-bottom: #FFD48E solid 0.8em;
border-top: none;
border-left: transparent solid 0.8em;
border-right: transparent solid 0.8em;
}
div {
display: block;
}
</style>
Try to create a div and use the above css it worked for me.
<div id="navmarker"></div>
I have looked around for this and it seems simple but i cant seem to work it out.
I have a div with a background.
I want the background to start 20px down and then repeat-y, as in repeat the rest of the way down.
<div class="main_col"></div>
.main_col {
width: 680px;
float: left;
background:#fff;
background-position:50% 50%;
}
This is what im trying but it is filling the whole div?
this is what i have tried....http://jsfiddle.net/uzi002/gqqTM/4/
You cannot do this with one class definition in current CSS2 standards.
Use a separate div for the background.
If you want to fiddle with some CSS3, you can check out
background-origin
at
http://www.css3.info/preview/background-origin-and-background-clip/
Be aware of browser support.
You might try to add padding-top: 20px to .main_col and inside it create additional div with this background.
.main_col {
width: 680px;
float: left;
background: url("your image") 0px 20px;
}
Update
this is using giker s example
try something like this
There are 3 CSS properties relevant to achieving this:
background-image { url(/myBackground.png) } // To select the image
background-repeat { no-repeat } // To choose how or if it repeats
background-position { 1px 1px } // To choose the X, Y coordinates of the top left corner of the background image in relation to the top left corner of the element.
Now, that's all quite verbose but it can be condensed into a single rule, as follows:
background { url(myBackground.png) no-repeat 1px 1px }
It is possible to use relative values (such as the % which your code shows) for the background-position, but you will need to use px.
Try using a margin padding.
i.e.
.main_col {
width: 680px;
float: left;
background:#fff;
background-position:50% 50%;
padding-top:20px;
}
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.