This is question not more specific. I want to so common, because most of the web developers have this problem.
We all know the camera view which has border in 4 corners but not in the right/left/bottom/top.
How can we make this effect using css?
html
<div id="div1" />
<div id="div2" />
css
#div1 {
position:absolute;
top:9px;
left:9px;
height:100px;
width:100px;
background-color:white;
border:1px solid black;
}
#div2 {
position:relative;
top:-1px;
left:-1px;
height:102px;
width:102px;
background-color:white;
border-radius: 15px;
}
I achieved it like this.Now I want to know how can achieve this using only one div
You should use parent->child logic
For example :
<div class="parent"><div class="child"></div></div>
EXAMPLE :
Codepen
Related
I want to insert a little green square between words on my WordPress homepage. I wrote the html:
<div class="x"><center><p
style="border:10px; border.
style:solid;
border-color:#00ff00; padding:
0.0em; width: 2px; height:
2px;">
</p></center></div>
Pen: https://codepen.io/adsler/pen/KOXzPw
Site: http://4309.co.uk
Every other page I can access and edit but not the same for homepage.
Here you go.
go to your appearance, customise, add'text widget' then add the html code. If you were to add the css, you would need to go to --> appearance --> additional css
Have a great day!
Austin
It will be work
<div class="x"><center><p >Write Something<span style="border:10px; border-style:solid; border-color:#00ff00; padding: 0.0em; width: 2px; height: 2px;"></span> New</p></center></div>
Pen: https://codepen.io/shakil-shaikh/pen/xvXdEX
3 divs. Div one for top, div two for the square, and div three for bottom. If you need more explanation, I can elaborate.
Check below.
Box ‘one’ would be where text one goes, ‘center’ is where you would style the geometric shape, and ‘box2’ is where the second string of text will go.
When I get to my computer I’ll see if I can write out the full code for you to use.
<div id=box1></>
<div id=center></>
<div id=box2></>
Is this what you want to accomplish?
<!doctype html>
<head>
<meta char="utf-8">
<title>box test</title>
<style>
#content {
margin:25px auto;
}
#text-1 {
border:#000000 2px solid;
width:20%;
height:20%;
margin-bottom:10px;
}
#shape {
border:#000000 2px solid;
width:20%;
height:20%;
}
#text-3 {
border:#000000 2px solid;
width:20%;
height:20%;
margin-top:10px;
}
</style>
</head>
<body>
<div id=content>
<div id=text-1>text one</div>
<div id=shape>shape</div>
<div id=text-3>text two</div>
</div>
</body>
<html>
Does this work? the position property allows you to put your div's anywhere on the website. Just remember that the attribute allows for stacking. Just use the left/right/top/bottom attribute.
#container {
width:1000px;
}
#x {
position:absolute;
top:0px;
left:0px;
background-color:blue;
}
#center {
position:absolute;
top:0px;
left:150px;
}
#y {
position:absolute;
top:0px;
left:300px;
background-color:#ffff00;
}
<div id="container">
<div id="x">Write something</div>
<div id="center">middle</div>
<div id="y">New</div>
</div>
I am looking to fill the browser window with a single character across the browser window.
The closest answer to a similar question is contained in this jsfiddle:
CSS:
.line{
border-bottom:1px dotted black;
position:relative;
height:16px;
}
.line span{
display:inline-block;
position:relative;
background:white;
bottom:-2px;
height:100%;
padding:0 5px;
}
.line .price{
position:absolute;
right:0;
}
HTML:
<div class="line">
<span class="title">name</span>
<span class="price">123.23$</span>
</div>
<div class="line">
<span class="title">name</span>
<span class="price">123.23$</span>
</div>
How would I swap the dotted line for a character (m)?
To remove the dotted line you would just have to remove the code in the CSS
line{
border-bottom:1px dotted black; <--remove this part of the code
position:relative;
height:16px;
}
If you want to have a single char as background of the whole page just create an image with the char on it the size depends how big/small do you want it to look like.
Then with the image m.jpg
Do
Css
html{
background-image: url("path/to/m.jpg");
background-repeat: repeat;
}
I am trying to create a css hovering effect that the divs with text and a down arrow above the circle should be hidden and when I will hover the circle they should appear.
But I couldn't do this. Below the codes I used.
When I hover on this circle, the above two divs should appear like that
<head>
<title>CSS Hovering Effect Practical Class</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#wrap {
background:#4485F5;
margin:10px 0;
padding:30px;
text-align:center;
}
h1 {
color:#fff;
letter-spacing:2px;
font-size:50px;
margin-bottom:15px;
}
p {
color:#fff;
background:#944E90;
width:600px;
font-size:25px;
padding:3px;
margin:auto;
}
span {
font-style:italic;
}
#features {
margin: 25px 0;
}
#baloon {
color:#ddd;
margin:auto;
padding:15px;
font-size:16px;
letter-spacing:1px;
background:url('bg.png') repeat;
width:200px;
position:relative;
border-radius:5px;
}
#blackarrow {
background:url('blackarrow.png') no-repeat top center;
margin:auto;
height:15px;
width:15px;
margin-top:-7px;
}
#circle {
}
#circle img{
height:50px;
width:50px;
background:#fff;
padding:50px;
border:5px solid #00AEF0;
border-radius:500px;
transition:0.5s ease;
}
#circle img:hover {
height:60px;
width:60px;
background:#ddd;
padding:60px;
border:8px solid #00AEF0;
border-radius:500px;
}
#circle:hover > #baloon {
display: inline;
}
#inner {
}
#img {}
</style>
</head>
<body>
<div id="wrap">
<h1>Welcome to <span> CodeforBusiness</span> Site</h1>
<p>Your trusted web designing service provider for a decade</p>
<div id="features">
<div id="baloon">Best web designing services with our team</div>
<div id="blackarrow"></div>
<div id="circle"><img src="avatar.gif" /></div>
</div>
</div>
</body>
With your markup it's not possible to achieve because the current css selectors cannot target elements which are parents and siblings only in a very limited way via the general sibling combinator~ or the more useful adjacent sibling combinator + (See docs).
You better choose a differently nested structure, to make the hover effect work.
<div id="features">
<div id="circle"></div>
<div id="description">
<div id="baloon">Best web designing services with our team</div>
<div id="blackarrow"></div>
</div>
</div>
Now with the #description div being an adjacent sibling after your circle, you can target it via +. (If you have multiple elements, you need this container, if it's only the one #baloon element inside, you could as well target this directly).
#circle:hover + #description {
display:none;
}
Take a look at my minimal example. You only need some fixing to the positioning and you're done.
As Chad's comment says, ">" is the child selector. Baloon would need to be inside the circle element. What you want is the sibling selector. "+" signifies an adjacent sibling (immediately following), and "~" is the general sibling selector, which is probably what you want:
#circle:hover ~ #baloon
Note that "baloon" has to come AFTER "circle in the markup, so you will need to reprder your elements for this to work. (i.e. put circle first).
As #Chad said, you have structured your CSS in a way that you are not actually selecting the #balloon div on hover. The > selector is the immediate child selector, so in order for the CSS to work the way you wrote it, your HTML will have to look like this:
<div id="wrap">
<h1>Welcome to <span> CodeforBusiness</span> Site</h1>
<p>Your trusted web designing service provider for a decade</p>
<div id="features">
<div id="blackarrow"></div>
<div id="circle">
<div id="baloon">Best web designing services with our team</div>
<img src="avatar.gif" />
</div>
</div>
</div>
This is a doable solution, if you are comfortable changine the structure.
You would change the #balloon styles to something like this:
#baloon {
display:none;
position:absolute;
width:200px;
top:-100px;
left:50%;
margin-left:-115px;
padding:15px;
font-size:16px;
letter-spacing:1px;
background:rgba(0, 0, 0, .5);
border-radius:5px;
color:#ddd;
}
And the #circle & :hover style to this:
#circle {
display:block;
position:relative;
}
#circle:hover > #baloon {
display: block;
}
Let me know if you need any help positioning the balloon.
Here is a working jsfiddle
I have a simple textbox inside a div, and I want a hover rule to apply when hovering over the div but not the textbox.
Code:
<div id="div1" style="display:inline-block; border:1px solid #777777; padding:16px; background-color:#eeeeee;">
<input type="text" name="txt1" id="txt1" />
</div>
#div1:hover {
background-color:#ffffff !important;
cursor:pointer;
}
JSFiddle
When hovering over the textbox, the div's hover rule must not apply. Is there a way to do this without JavaScript?
Is this what you are looking for..? Please see the fiddle.
HTML
<div id="container" >
<div id="div1" style="">
</div>
<input type="text" name="txt1" id="txt1" />
</div>
CSS
#div1:hover{
background-color:red !important;
cursor:pointer;
}
#container{
position:absolute;
}
#div1{
position:absolute;
display:block;
border:1px solid #777777;
padding:16px;
width: 180px;
background-color:#eeeeee;
}
#txt1{
top:5px;
left:5px;
background-color:white !important;
position:absolute;
}
http://jsfiddle.net/8NRNQ/4/
Is this what you are looking for?
#div1 { display:inline-block;
border:1px solid #777777;
padding:16px;
background-color:#eeeeee;
}
#div1:hover {
background-color:red;
cursor:pointer;
}
Testing Fiddle: http://jsfiddle.net/8NRNQ/3/
I think you need one simple line of JS for that. The problem is, that you can't change the background of the containing div with hover over the input just by CSS. But in jQuery for example, this is pretty easy
$('#div1 input').hover(function(){$(this).parent.css(SET BACKGROUND AND CURSOR BACK TO THE NO-HOVER-STYLE)});
For anyone wondering, I ended up using JavaScript:
$('#div1').mouseover(function () {
var el = $(this).find('input');
if (!(el.hasClass('inputishover'))) {
$(this).addClass('divhover');
}
}).mouseout(function () {
$(this).removeClass('divhover');
});
$('#div1 input').mouseover(function () {
$(this).addClass('inputishover');
}).mouseout(function () {
$(this).removeClass('inputishover');
});
JSFiddle
The goal is to achieve this effect without adding any html tag (div, hr, ...) each three divs.
That mean through css only.
What I thought would be an idea was to set the line-height to 150px and underlining it.
But it doesn't seem to produce the result.
The css I use for now produces the result without the underline:
.projectContainer{
/*line-height:150px;
text-decoration:underline;*/
}
.projectBlock{
position:relative;
display:block;
float:left;
width:200px;
height:150px;
}
.projectImage{
position:absolute;
top:0px;
left:0px;
width:200px;
height:112px;
background-size:contain;
background-position:0% 50%;
background-repeat:no-repeat;
}
.projectCaptcha{
position:absolute;
top:113px;
left:0px;
width:200px;
height:88px;
font-size:12px;
}
And the html is a list of:
<div class="projectBlock">
<div class="projectImage" style='background-image:url(...)'></div>
<div class="projectCaptcha">MUSÉE RATH, GENEVE MAURICE BRAILLARD</div>
</div>
in a:
<div class="projectContainer">
...
</div>
If the comment is removed the result is not what was planed:
Thank you and sorry for my english!
Sounds like you could just add a border-bottom to .projectBlock.
.projectBlock {
border-bottom: 1px solid black;
...
}
You might need to add some margin and padding above and below to get the spacing correct.
You can just use the border property, and if you only want to select certain divs use nth-child(an+b) pseudo-class.
Fiddle
I think you need to clear the floats for each container.
.projectContainer{
height:150px;
border-bottom:1px solid #777;
clear:both;
}