I want to set solid border width like as picture. What can I do? Thanks for answers
|
|
----- -------
|
|
You can visually achieve this result if you apply border-radius to the parent container.
The child container needs to have a solid background (that matches the background of the wrapper element). Like so: http://jsfiddle.net/skip405/JgsKM/
It's not easy to do borders like that just by using CSS border properties. You'd have to resort to some kind of trickery to cover over the borders at each corner.
You are better off using a background image for this task. Prepare an image with the right and bottom lines and place it on the background of those rectangles, positioned bottom right on each one. (Obviously you'd prepare the background image so that those gray lines don't meet at the bottom right corner—just as in the image you posted.)
This is assuming that you have a fair idea of the width and height of the elements, so it's not a perfect solution, but will get you pretty close.
img {
border:solid rgb(165, 162, 162)
border-top:none;
}
I think you should add 4 child divs for mask borders parent div.
Html
<ul class="list">
<li>
<div id="holder"> <!--parent div-->
<div id="maskTopLeft"></div> <!-- child 1 for mask border on top-left -->
<div id="maskTopRight"></div> <!-- child 2 for mask border on top-right -->
<div id="maskBottomLeft"></div> <!-- child 3 for mask border on bottom-left -->
<div id="maskBottomRight"></div> <!-- child 4 for mask border on bottom-right -->
</div>
</li>
</ul>
css
#main { width:100%; margin:10px; }
.list {
margin: 0px;
padding: 0px;
list-style-type: none;
position: relative;
}
.list li {
float:left;
margin-right: -0.5px;
margin-top: -0.5px;
}
.list li:first-child #holder {
border-right: 0.5px solid #000;
}
.list li:last-child #holder {
border-left: 0.5px solid #000;
}
#holder {
border: 1px solid #000;
height: 250px;
width: 200px;
position:relative;
}
#maskTopLeft {
position: absolute;
top:-1px;
left:-1px;
width:21px;
height:20px;
background-color:#fff;
}
#maskTopRight {
position: absolute;
top:-1px;
left:180px;
width:21px;
height:20px;
background-color:#fff;
}
#maskBottomRight {
position: absolute;
top:230px;
left:180px;
width:21px;
height:21px;
background-color:#fff;
}
#maskBottomLeft {
position: absolute;
top:230px;
left:-1px;
width:21px;
height:21px;
background-color:#fff;
}
demo on cssdeck
You can use background-image properties in css the best and easy way
http://www.w3schools.com/cssref/pr_background-image.asp
set a backgroud image to the div-container where the images is in it. this background image is white and has the to borders (right side, bottom side) as you want. i think that's the solution for your problem, because otherwise the borders will look different
Related
I'm having an issue with hovering and a div with a border radius.
When a div has images inside it and a border radius, the "hitbox" for it is incorrect. Hovering over any of the corners of the div (where the corners would be if it didn't have a border radius) causes the hover style to show. I would expect the style to only show when the mouse is actually within the circle.
If there is nothing in the div, the div's "hitbox" is correct, however it surpasses the border when there are elements within it.
I could a background image in the div, however I'd prefer not to for accessibility reasons.
#test-wrapper {
background-color: #EEE;
border: 4px dashed #999;
display: inline-block;
}
#switcher {
border-radius: 50%;
overflow: hidden;
position: relative;
}
#switcher,
#switcher .first,
#switcher .second {
width: 100px;
height: 100px;
}
#switcher .first,
#switcher .second {
position: absolute;
top: 0;
left: 0;
}
#switcher:hover .first {
display: none;
}
<!-- This is used to show the "hitbox" for the switcher and has no effect on the switcher itself -->
<div id="test-wrapper">
<div id="switcher">
<!-- Shown on hover -->
<img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=Second&w=100&h=100&txttrack=0" class="second">
<!-- Always shown -->
<img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=First&w=100&h=100&txttrack=0" class="first">
</div>
</div>
The problem here is that child elements do not inherit the border-radius of their parents. There are 2 ways to achieve what you want: you can either set the border-radius of the child element(s) to match or be greater than the parent element's radius or set the overflow property of the parent element to hidden.
Here's a quick Snippet illustrating the problem and both solutions:
*{box-sizing:border-box;color:#fff;font-family:arial;margin:0;padding:0;}
div{
background:#000;
border-radius:50%;
display:inline-block;
line-height:150px;
margin:10px;
text-align:center;
vertical-align:top;
width:150px;
}
p{
background:rgba(255,0,0,.25);
}
div:nth-of-type(2)>p{
border-radius:50%;
}
div:nth-of-type(3){
overflow:hidden;
}
<div><p>Square hit area</p></div><div><p>Round hit area 1</p></div><div><p>Round hit area 2</p></div>
If the child elements are images then you'll need the added trick of using an image map to crop their hit areas (Credit: Border-radius and :hover state area issue), like so:
*{box-sizing:border-box;color:#fff;font-family:arial;margin:0;padding:0;}
div{
background:#000;
border-radius:50%;
display:inline-block;
margin:10px;
text-align:center;
vertical-align:top;
width:calc(33% - 20px);
max-width:600px;
}
img{
display:block;
cursor:pointer;
height:auto;
width:100%;
}
div:nth-of-type(2)>img{
border-radius:50%;
}
div:nth-of-type(3){
overflow:hidden;
}
<div><img alt="" height="600" src="http://lorempixel.com/600/600/nature/3/" width="600"></div><div><img alt="" height="600" src="http://lorempixel.com/600/600/nature/3/" width="600" usemap="circle"></div><div><img alt="" height="600" src="http://lorempixel.com/600/600/nature/3/" width="600" usemap="circle"></div>
<map name="circle"><area shape="circle" coords="0,100%,100%,100%"></map>
I've seemed to find a way around it, if the parent element has overflow hidden and you just the image z-index to -1 or something lower than the parent it also works.
Don't know why though
I'm trying to get this effect with CSS (that little grey side stripe thingy):
However, nothing of what I'm doing is working. My code looks like this:
<header class="entry-header">
<div class="entry-title">
<h1>Contact</h1>
</div>
<div class="entry-float"></div>
</header><!-- .entry-header -->
I've tried floating div.entry-title left and padding div.entry-float, changed div.entry-float to <span>, tried using backgrounds on one div only, all of it unsuccessfully.
This must be 100% flexible, as not all headings are the same width. I'd prefer avoiding Javascript/jQuery entirely.
Can anybody assist?
I would do this with a trick where you place the "line" as a CSS3 pseudo element aligned to the center of the container. Then give the title element a background color with padding and place it over the top of the line. This will allow for variable length titles.
body{
background:#FAFAFA;
}
.entry-title{
position:relative;
margin:0 110px;
}
.entry-title:before{
position:absolute;
content:"";
top:50%;
background:#f7f7f7; /* line color */
left:0;
right:0;
height:10px;
margin:-5px 0 0; /* = half the height value */
}
h1{
position: relative;
color: #d9d9d9;
padding:0 20px 0 0; /* increase this number to add more spacing to the right of your title before the line */
background:#fafafa; /* same as background color of container element */
display:inline-block;
}
JSFIDDLE DEMO
There are various ways to achieve this, one of them is to add pseudo element to header, absolutely position it as desired and hide extra with overflow: hidden:
<h1>Content</h1>
h1 {
text-transform: uppercase;
font-size: 1em;
color: grey;
position: relative;
overflow: hidden;
}
h1:after {
content: "";
display: inline-block;
height: 4px;
width: 100%;
background: grey;
position: absolute;
top: 8px;
margin-left: 10px;
}
JSBin.
I am puzzled by nested DIV's with Position set to absolute, perhaps someone could guide me :)
My goal is: 1 navbar with 2 div's for points and life, both containing text and 1 icon, i want to absolute position the div's so i can later manipulate them via jQuery.
my problem is, when i nest elements within my points and life div, they go all bananas for me, the overlap and top/right does not seem to have any effect, also the elements within the div's does not comply to my position:absolute, i've tried all sort of combinations with relative, absolute, display:block etc. but without any result.
i compiled a Fiddler to help visualize my problem:
Fiddler link
if i change the div's within points/life the icon seems to behave, but the h2 text is still giving me problems ?...
any idea/solution to my nested div chaos :D. .
<div class="gameWrapper">
<div class="navBar">
<div class="points">
<h2>points</h2>
<div class="imageClass"><div>
</div>
<div class="life">
<h2>life</h2>
<div class="imageClass"><div>
</div>
</div>
</div>
.gameWrapper{
position: absolute;
overflow:hidden;
width:100%;
height:100%;
background-color: #eee;
}
.gameWrapper .navBar{
position:relative;
overflow: hidden;
height:69px;
width:100%;
top:0;
left:0;
border: 1px solid #00f;
}
.gameWrapper .navBar .points,
.gameWrapper .navBar .life{
position: absolute;
overflow:hidden;
top:15px;
}
.gameWrapper .navBar .points .imageClass,
.gameWrapper .navBar .life .imageClass{
position: absolute;
top:0;
right:0;
width: 30px;
height:30px;
background: #fff url(http://drytech.dk/wp-content/uploads/2013/03/pdf-icon.png) no-repeat 0;
}
.gameWrapper .navBar h2{
position: absolute;
top:0px;
}
.gameWrapper .navBar .points{
right:140px;
width:150px;
height:30px;
border: 1px solid #0f0;
}
.gameWrapper .navBar .life{
right:50px;
width:80px;
height:30px;
border: 1px solid #f00;
}
I would start by closing your div tags for your imageClass elements.
Making the h2 tags inline would also help. You can either do this with display: inline; or changing them into a default inline element, like a span.
Here is the fiddle
Changing the h2 tags into span tags, like I did for the fiddle, removes some of the default styling. Something to consider if you choose that route.
Let's say I have the following rectangle box (this is a div) and I would like to represent an arrow on the left side. I was searching for a really simple way of doing but every solution I found is a little tricky for my purpose.
<div class="redbox">
<b>Hello world</b>
</div>
.redbox {
display: inline-block;
padding: 5px;
background-color: red;
}
http://jsfiddle.net/3N6yP/
How to transform this simple div to show an arrow on the left side?
Something like it:
Here am using a CSS triangle which is positioned absolute to the element, and than and using :before pseudo, so that, it creates virtual element for you. This will just save you few characters in the DOM. Just make sure you use position: relative; for the element having class .redbox, so that the absolute positioned virtual element doesn't fly away in the wild.
Demo
.redbox:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right:15px solid #f00;
top: 0;
left: -15px;
}
You can use this cross-browser generator: http://cssarrowplease.com/
I've found that the "border trick" sometimes has unpredictable margin offsets across different browsers (and of course depending on your markup) and prefer other methods.
I'd personally use a proven method and use an image. Depending on your situation you can just have one sprite image or you can wrap your arrow and content.
http://jsfiddle.net/3N6yP/5/
HTML:
<div class="redbox">
<span></span><div>Hello World</div>
</div>
CSS:
.redbox {
display: inline-block;
padding: 5px;
background-color: red;
}
.redbox div{
height:30px;
background:#ff0000;
display:inline-block;
line-height:30px;
}
.redbox span{
float:left;
display:block;
height:30px;
width:20px;
background:#333333 url(http://i.stack.imgur.com/cUsjz.png) center left no-repeat;
}
Somehow I can't figure out what I'm missing...
I try to position a number of absolute divs between two fixed bars (header and footer). Header contains some tabs and footer contains an copyright. I want to use the window's scrollbar and not an overflowed div and I know it should be possible!
Every absolute positioned div should carry an extra margin, so that the bottom of that div does not disappear behind the footer.
It should become something like this:
A snippet of my problem is available here on jsfiddle.
My HTML:
<ul class="cf tabs">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div style="margin-top: 40px; padding-bottom: 30px; position:relative">
<div style="position:absolute;top:300px; height:100px; width: 250px; left:200px; border: 1px solid purple;">aaa</div>
<div style="position:absolute;top:0px; height:100px; width: 100px; left:100px; border: 1px solid purple;">bbb</div>
<div style="position:absolute;top:450px; height:100px; width: 250px; left:400px; border: 1px solid purple;">ccc</div>
</div>
<div class="cf footer">Copyright ©</div>
The stylesheet I'm using:
ul.tabs {
list-style-type: none;
list-style-position: outside;
padding:5px;
margin: 0;
position:fixed;
top:0;
z-index: 999;
background-color: white;
left:0;
right:0;
border-bottom: 1px solid green;
opacity: 0.7;
}
ul.tabs li {
float: left;
margin:1px;
padding: 4px 10px 2px 10px;
border: 1px solid black;
}
div.footer {
position: fixed;
bottom: 0;
left: 0;
right:0;
background-color:#DEDEE9;
border-top: 3px outset #BBBBBB;
padding: 5px;
opacity: 0.6;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
Do you guys have any hints?
Extra info
As you can see in the attached image the purple border of squared div at bottom right is overlapping the fixed footer. I do not want this. There should be given a bottom margin somewhere, so that every div carries an extra margin so it should match the top of the footer
Here's the solution I've come up with. Wrap the bottommost absolutely positioned div inside with another div, on which put bottom margin equal to footer height and the border. I gave it class .inner.
See my fiddle.
Add bottom padding to the document body equivalent to the height of the footer:
body {
padding-bottom: 31px;
}
(JSFiddle doesn't seem to let you modify styling of the body element, so I can't post a fiddle. It should work, though.)
Instead of using absolute positioning, do something like:
margin - left : 800px
Margin - top: 500px