I have this CSS:
#dotted_line {
width:80px;
height:5px;
margin:10px auto 0 auto;
background:#666666;
background-repeat: repeat-y;
}
i want to be able to repeat it horizontally so i get a dash line but with long dashes
This is an alternate solution to your problem:
css:
.dashed {
margin:auto;
width:50%;
border-style:dashed none none none;
transform: scaleX(2);
}
html:
<div class="dashed"></div>
http://jsfiddle.net/LkVxp/ or http://jsfiddle.net/LkVxp/1/
So what we do is take a border of a div and scale it up so that you can make the dashes longer. just be sure to match the percent to the scale or the width becomes something other than 100% (or you can tweak it to however long you want). Thickness can be controlled normally with border-width.
If you wish to make the space between the dashes shorter it will take a bit more work, You'd want to position a second dashed border relatively and offset it however much you want to reduce the space by. So that the offset one would overlap the open space. At that point you're probably just better off using an image though >.>
heres an example: http://jsfiddle.net/LkVxp/3/
More on topic, it isn't a hard task using javascript(jquery or other) to duplicate a dom element.
You can use a background-image with the same color as your body background and give the impression of a dashed line. See this example.
Image used:
If you want to experiment, there's a CSS property that gives you the ability to use an element (your div in this case) as a background-image. This property is the background:element().
You can see a demo here in Firefox.
However, this property works only in Mozilla with the -moz- prefix but there have been attempts to implement in webkit browsers as well. So, hopefully this can be implemented in the future with wider browser support.
Try the hr tag which can take various attributes, although be warned these are deprecated. For example:
<hr>
<hr width="50%">
<hr align="left" width="50%">
Related
In this question - If the staff and community won't mind - I would like to address two different bugs of different browsers, though ocuring on same conditions.
The bugs happen when an element with display:inline (and a box-shadow, but this is set here more for a demonstration purpose) gets opacity less than 1. Then
IE 10 (at least) chops the box-shadow as if "overflow:hidden" was set.
Opera 12.15 leaves the box shadow only on the first line of the text.
The HTML to demonstrate the issue:
<span class="inline opaque">
<span>Some text.</span>
</span>
CSS:
.inline{
display:inline;
background:red;
box-shadow:0 0 0 10px red;
}
.inline.opaque{
opacity:.5;
}
A live example. I am really frustrated with this happening. Seems very strange and unnatural for me. Would be very grateful for any help.
Thanks!
UPDATE. Seems I have found some workaround for IE. It turns out, that we can shift the box-shadow to the left and top (the directions it doesn't crop in this bug). And to make the element visually occupy the same space, a transform can be applied. It's better visible here
#media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){
.block{
-ms-transform:translate(5px, 5px);
transform:translate(5px, 5px);
}
.inline{
box-shadow:-5px -5px 0 5px #c0c;
}
}
Note, that we need to shift (possibly with translate) the contents of .inline as well.
Each line of a display:inline element is implicitly a container. You can see evidence of this if you were to apply border:1px solid black to your text.
Therefore, it's not unreasonable for the browser to render each shadow separately, and that (unfortunately) means placing them on top of elements (read: lines) before it.
As for why the "cropping" manifests only in certain browsers, and only when opacity is less than 1... that's not really something I can answer because it is down to browser implementation. That said... from my understanding, the cropping is technically correct.
Anyway, the "easy" fix is to just apply the opacity to a parent element, like so.
Now these days I want to believe everything is possible, when I saw the power of CSS - making irregular shapes with block elements, i.e. triangles, chamfered CSS Border Corners — how easy but how enthusiastic! So I tried to dream about something, something that I believe can be possible with some great knowledge of CSS.
div.image{
width: 18px;
height: 18px;
background: url(images/image-sprite.png) -70px 0;
display: inline-block;
}
Suppose I put an "Image Sprite" () with a width and height of 18px. But the image I called is NOT an 18px x 18px box-shaped image, suppose the image is Round or some Irregular shapes. When I put box-shadow to the div, it highlighted like a box, when I put text-shadow, it doesn't work, as the div/anchor element doesn't contain any texts in it.
If I want to put shadow onto the element, not onto the container (like a box-shaped HTML element), as the image shown, shadow to the outline of the background-less image only — then:
How can it be done with CSS? or,
Is that really possible?
NOTE: I know, when I have a background-less image and Photoshop, I can put necessary shadows into almost any element. But I asked the question, if something like this can be possible with raw CSS then it'd be a great achievement for us.
The new CSS filters will allow you to do this but browser support is not super deep.
Codepen Example
<div class="image">
<img src="http://www.equissage.co.uk/wp/wp-content/uploads/2010/08/equissage-red-horse.png" alt="" />
</div>
.image img {
width:400px;
-webkit-filter: drop-shadow(4px 4px grey);
}
The only way to do what you're asking is by recreating the shape with css or using a icon font.
As the element you want to border-shadow is an image these always become square or rectangular.
I have been researching and working so hard to fix such a strange problem. I have a div that is supposed to hold some text. This div should be able to resize with that text, so that if there are two lines of text the div gets taller, etc. All that seems to work fine, but for some reason there's some sort of padding added to the top of the text and to the bottom of the text. I can't find what is causing that padding, and I really want to make the div fit the text more compactly. Here is an image of what i'm talking about:
http://i.imgur.com/ZblaLJX.png
The light blue box should be shorter in height so it fits the text more closely. Here is my CSS code for this div:
.captionCSS {
max-width:70%;
margin-top:10px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:0;
background-color:#aef7f8;
overflow:hidden;
color:black;
}
I have messed around with all of the margins and paddings, setting them to zero and then setting them back again and nothing seems to work. The line height is inherited from another div and is 18px, while the font size is 12px, and i tried decreasing the line height but it didn't have any effect on the top and bottom padding/gap.
Also, when the text takes up two lines, it get a bit worse in that there is an extra bit of padding on the side, which i want to get rid of:
http://i.imgur.com/Ecdxdtq.png
So yeah, that's my issue. Ideally I would like a 5px gap from the edge of the div to the top of the text, so if there is anyway to do that please let me know! Thanks so much for your help!
You might try the following.
If your code looks similar to this:
<p>Some text with <span class="captionCSS">highlighted text</span>.</p>
apply the following CSS rules:
p {
background-color: gray;
padding: 5px;
}
.captionCSS {
max-width:70%;
padding: 0 5px;
background-color:#aef7f8;
display: inline-block;
line-height: 1.00;
}
If you set display: inline-block to the caption wrapper, then the line height value will have some effect.
line-height: 1.00 forces the line height to be the same size as the font-size for the element. If you set the value to be less than 1, you will get a tighter fit but you may also clip ascenders and descenders of certain characters depending on the font.
See demo at: http://jsfiddle.net/audetwebdesign/2cyaF/
Without the HTML I can't be sure, but my first guess is that the text has a parent block level element that already has styling rules. (ex: <hX> or <p>)
You can clear those styles through css by doing something like this:
h1,h2,h3,p{
padding:0;
margin:0;
}
Here are some example cases using your style: http://jsfiddle.net/JTrWL/
I have an HTML page that for the sake of this question looks like this:
<html>
<head>
<style>
div { width: 100%; }
.success { background-color: #ccffcc; }
</style>
</head>
<body>
<div class="success">
<nobr>This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line.</nobr>
</div>
</body>
</html>
Note the "very long line", and the background color of that div.
My problem (and I bet it is a basic one) is that the background-color stops at the edge of the screen. When I scroll out to the right to see the rest of the text, the rest of the text background is white.
Basically I want my div to behave like this:
To have the specified background color
To minimum have the same width as the screen, even if the text within is just a few words
To follow the width of the text, if it is more than the width of the screen
Optionally (and I know this is really a different, follow-up, question), if I have more than one such div, following the first, is there a way to have the two follow the width of the widest div automatically?
Did that make any sense?
Is there any way to do this?
I have set up a test page here, which, if you view this on iPhone, although a small font, shows the problem: http://www.vkarlsen.no/test/test.html
I saw the following questions listed as potential duplicates/suggestions by SO, here's what I noticed when I tried the information within:
iPad background for div blocks not spanning entire width of screen
Tried the suggested <meta ... viewport .../> tag, did not make a difference (it is present in the test page right now.)
Background color stretches accross entire width of ul
<div>s are already block elements
WebKit doesn't paint background-color for entire width of final inline list item
Tried setting the div to display: inline-block; but this did not appear to change anything
black magic:
<style>
body { float:left;}
.success { background-color: #ccffcc;}
</style>
If anyone has a clear explanation of why this works, please comment. I think it has something to do with a side effect of the float that removes the constraint that the body must fit into the page width.
The problem seems to be that block elements only scale up to 100% of their containing element, no matter how big their content is—it just overflows. However, making them inline-block elements apparently resizes their width to their actual content.
HTML:
<div id="container">
<div class="wide">
foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="wide">
bar
</div>
</div>
CSS:
.wide { min-width: 100%; display: inline-block; background-color: yellow; }
#container { display: inline-block; }
(The containerelement addresses your follow-up question to make the second div as big as the previous one, and not just the screen width.)
I also set up a JS fiddle showing my demo code.
If you run into any troubles (esp. cross-browser issues) with inline-block, looking at Block-level elements within display: inline-block might help.
.success { background-color: #cffccc; overflow: scroll; min-width: 100%; }
You can try scroll or auto.
The inline-block display style seems to do what you want. Note that the <nobr> tag is deprecated, and should not be used. Non-breaking white space is doable in CSS. Here's how I would alter your example style rules:
div { display: inline-block; white-space: nowrap; }
.success { background-color: #ccffcc; }
Alter your stylesheet, remove the <nobr> tags from your source, and give it a try. Note that display: inline-block does not work in every browser, though it tends to only be problematic in older browsers (newer versions should support it to some degree). My personal opinion is to ignore coding for broken browsers. If your code is standards compliant, it should work in all of the major, modern browsers. Anyone still using IE6 (or earlier) deserves the pain. :-)
It is because you set the width:100% which by definition only spans the width of the screen. You want to set the min-width:100% which sets it to the width of the screen... with the ability to grow beyond that.
Also make sure you set min-width:100% for body and html.
The width is being restricted by the size of the body. If you make the width of the body larger you will see it stays on one line with the background color.
To maintain the minimum width: min-width:100%
Try this,
.success { background-color: #ccffcc; float:left;}
or try this,
.success { background-color: #ccffcc; overflow:auto;}
The following example is identical in almost all browsers including IE6:
http://jsbin.com/adica3
#one {border : 1px solid red;padding:20px}
#two {border : 1px solid yellow}
p {border: 1px solid blue;}
.marg {margin: 0;padding: 0}
.padd {margin: 20px}
</style>
</head>
<body>
<div id="one">
<p class="marg">Padding to div</p>
</div>
<div id="two">
<p class="padd">margin tp P</p>
</div>
But when I give width to div then second div becomes shorter then first div.
How we should decide which is appropriate?
What browser compatibility issues should I know about?
Margins are on the exterior, paddings on the interior relative to the border. So obviously if you have something like a background image and text, and you want the text to have space between the edge of the bg image you'd use padding. Same thing with borders.
If you wanted space on the outside in addition to space between the border/bg images then you'd use margins.
If you're not doing anything remotely design-complex then it shouldn't really matter, but one thing you should look out for is margin collapsing, if you have elements coming before/after with vertical margins and you specify margins the values will collapse, sometimes you'd use padding to navigate around that.
If you give #one and #two a width of 200px, #one will take up 240 pixels without counting the horizontal borders, since it has 20px of padding horizontally.
IE5's rendering engine and quirks mode IE6/IE7 incorrectly draw the correct amount of space if you specify horizontal padding and a width, width:100px; padding:20px; would force the box to actually take up 100 pixels of width, instead of actually being 140 pixels as it should correctly be.
Another bug to note is the double margin bug; if you have a floated element and a margin that's in the same exact direction as the float, eg float:left;margin-left:100px; it accidentally doubles up. This is fixed by adding display:inline; which forces it to just have 100px instead of 200px to the left.
I notice that you ask a lot of questions which would be answered by simply reading a decent front end book - have you considered reading:
http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1430223979/ref=sr_1_3?ie=UTF8&s=books&qid=1263529151&sr=8-3
http://www.amazon.com/Build-Your-Website-Right-Using/dp/0980455278/ref=sr_1_13?ie=UTF8&s=books&qid=1263529151&sr=8-13
http://www.amazon.com/Beginning-CSS-Web-Development-Professional/dp/1590596897/ref=sr_1_12?ie=UTF8&s=books&qid=1263529151&sr=8-12
Those would probably answer a lot of your questions...
I'd make the decision based on what's going to be inside your tags.
For example, is the <p> the only thing that's going to appear inside your div? If so, then it probably doesn't matter.
If there are other elements that will be inside the div, do you want padding around them or not?
As for the modified width, that will probably be due to the different boxing models between browsers.
i think the easy way is thinking the border of the element.
margin spaces outside border, while padding inside.
Of course, there are some browser related issue made them difference in some way, but i suggest stay with my suggestion and find work around on those special browsers.