I have a div which belongs to the class .stickyNote and within that div I have a <h1> tag as the title of the stickyNote and a <p> tag as the contents of the stickynote. Just like so: <div class="stickyNote">
<h1>Drag Me</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum..</p>
</div>-->
The stickyNote class is styled so that when one hovers over it, it will come a little more to the foreground, with this CSS:
.stickyNote :hover,.stickyNote :focus{
-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
box-shadow:10px 10px 7px rgba(0,0,0,.7);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
position:relative;
z-index:5;
}
However, when I hover over the stickyNote div the <h1> and the <p> section always come to the foreground seperately, i.e. when I hover over the <h1> it will come to the foreground and when I hover over the <p> it will come to the foreground, but never the whole stickyNote.
What am I missing?
div as a whole.
.stickyNote :hover, .stickyNote :focus{
not comma first
.stickyNote :hover .stickyNote :focus{
Related
I’m trying to create a black background section that goes full-screen width. Initially, the black block was getting cutoff based on the parent div so I added the below css. Now the text is no longer adhering to the width of the prior div. Is there an easier way to make the background black and full width for “black-block" without compromising the width of the text within the section? Any help would be great!
.black-block {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
<div class="black-block" style="margin-top:10%;background:#1f1f1f;padding-top:10%;padding-bottom:10%">
<p style="text-transform:uppercase;margin-bottom:-2%;font-weight:800;color:#3186d2">Design Direction</p>
<h2 style="color:#ffffff">Focus on developing a lighting solution that is both functional by providing tailored lighting while providing a decorative element.</h2>
</div>
Looks like you need to put another div inside the black-block
html
<div class="black-block" style="margin-top:10%;background:#1f1f1f;padding-top:10%;padding-bottom:10%">
<div class="container">
<p style="text-transform:uppercase;margin-bottom:-2%;font-weight:800;color:#3186d2">Design Direction</p>
<h2 style="color:#fff">Focus on developing a lighting solution that is both functional by providing tailored lighting while providing a decorative element.</h2>
</div>
</div>
css
.black-block{
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.container{
width: 80vw; // or whatever width you're using
margin: 0 auto;
}
I'm not sure if I get it but I think you're trying to do this? Just add body and html padding and margin to 0 in your CSS.
https://jsfiddle.net/4eg1dv7k/
body, html {
padding: 0;
margin: 0;
}
I'm not sure if I got your questiong right but if I did, I think that position relative doesn't work with the left & right. Plus those margings might be causing the problem? Again, I didn't quite understood your question.
But does the parent has the screen width? If yes I would recomment using width: 100%
box-sizing: border-box; will make the element width/height + padding + border to fit the given width/height. (Doesn't work with margin)
Like this?:
body
{
margin: 0px;
}
.black
{
box-sizing: border-box;
color: white;
background-color: black;
width: 100vw;
padding: 20px 80px;
}
<div class="black">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
You can wrap the <p> and <h2> elements in another <div> that has a different width set to it. Something like this:
<div class="black-block">
<div style="width: 60%; margin-right: auto; margin-left: auto;">
<p></p>
<h2></h2>
</div>
</div>
I made small reposnsive website. Everything looks good but not a background. Problem is that this background is an image and shows 2 womans on sides (left and right). Part of them bodies must be always visible on sides. But when I change resolutions Background is resizing to:/ How to made a background static?
background-attachment:fixes; not helps me
here is my code:
body{
background:url(/images/bg.jpg) top;
background-repeat:no-repeat;
width:100%;
margin:0 auto;
}
thanks!
There are a few problems with your CSS:
You're not specifying how big the background should be
You're not specifying how the background should display
You're not specifying how the background should be positioned;
You're incorrectly specifying the background.
Here's what you should be using:
body {
background-image: url(http://travi-design.pl/klienci/rea_strefamarek/szablon/images/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
width: 100%;
margin: 0 auto;
}
I'd split that image in two seperate images and use them as I described once in an earlier post for a similar situation (that time with a video in the middle): https://stackoverflow.com/a/34192574/5641669 and Fiddle at http://jsfiddle.net/fusuhga6/2/
The #Container element has a percentage width (100%), plus a max-width in px that equals the overall sum of the center element's width plus the width of the two images. It's margin: 0 auto make it center horizontally inside the browser window or surrounding container. The two images are included as two background-images of that container, one aligned left, the other aligned right (top). All elements have the same height.
The size of the video element is fixed (250px x 200px in the fiddle example). It also has margin: 0 auto to center it horizontally within #Container.
*, html{ margin: 0;
padding: 0;}
body{
background: #c4c4c4;
margin: 0;
padding: 0;
}
.content{
position: relative;
}
.backgroundBox{
height: 100%;
width: 100px;
position: absolute;
}
.leftSide{
background: #a9a9a9;
left: 0px;
}
.rightSide{
background: #bbbbbb;
right: 0px;
}
<div class="leftSide backgroundBox"></div>
<div class="rightSide backgroundBox"></div>
<div class="content">
<h1>Page Content</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
Following HTML:
<body>
<img src="http://placehold.it/400x300" alt="">
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
</body>
The text block should be right next to the image and should float below the image only when min-width is underrun.
I tried the following CSS:
img {
float: left;
}
div {
float: left;
min-width: 400px;
}
... don't work because long text always floats below the image (inherent property of a <div>, it wants to be as wide as possible). I don't want to specify a fixed width for the text block!
Layout example in different size (how I imagine):
(a), (b), (c)
(c) text block underrun it's min-width -> place below the image
You could maybe use the calc() property to set a max-width for the text div, depending on the width of the image.
(Run the snippet and choose Full Page to see the effect while resizing your browser window.)
img {
float: left;
max-width: 400px;
}
div {
float: left;
min-width: 400px;
max-width: calc(100% - 400px);
max-width: -moz-calc(100% - 400px);
max-width: -webkit-calc(100% - 400px);
}
<body>
<img src="http://placehold.it/400x300" alt="">
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
</body>
As pointed out by #C-Link_Nepal, this is a CSS3 feature not yet natively supported by all browsers. Use http://caniuse.com/#search=calc to check your target browsers.
You need to apply overflow property of css to the div:
img {
float: left;
}
div {
float: left;
min-width: 400px;
overflow: hidden; /* this makes sure the text not go below the image */
}
I want to use inline-block to have an image and on the right of it a text. But it does not work, what is wrong?
js fiddle
HTML
<img src="http://i0.gmx.net/images/684/19209684,pd=2,h=250,mxh=600,mxw=800,w=480.jpg" width="120" />
<article>
<h4> Title</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
</article>
CSS
img, article{
display: inline-block;
}
Unless you give article a specific width it wont work because the content of the article flows the entire page
article{
width:300px;
}
Check This DEMO
When you float an element, it's display property gets treated and set as block anyway. You would need to set the container to display: inline-block to create a new block formatting context that doesn't need a clearing element. (There are also other methods for this.) See here:
To the left are the styles I have set, to the right are the computed styles for that same element. Notice the display properties.
You must create a new block formatting context for the container by setting, overflow: hidden; or display:inline-block; or by floating the container (not the best solution).
This is happening because the width of both elements when added together exceeds 100%, thus the article element is forced onto a new line. A simple fix to this is to wrap the elements in a new element set to display as "table", setting the img and article elements to display as "table-cell":
<section>
<img ... />
<article>...</article>
</section>
section {
display: table;
}
img, article{
display: table-cell;
vertical-align: middle;
}
JSFiddle demo.
You can float the image and set the article to overflow: hidden if you don't want it to wrap under the image: http://codepen.io/pageaffairs/pen/HAjfE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
img {float: left; margin-right: 10px;}
article {overflow: hidden;}
h4 {margin-top: 0;}
</style>
</head>
<body>
<img src="http://i0.gmx.net/images/684/19209684,pd=2,h=250,mxh=600,mxw=800,w=480.jpg" width="120" />
<article>
<h4> Title</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
</article>
</body>
</html>
Can be your image inside Article?
You can put your image inside P tag in article and use float css.
<article>
<h4> Title</h4>
<p>
<img src="http://i0.gmx.net/images/684/19209684,pd=2,h=250,mxh=600,mxw=800,w=480.jpg" width="120" />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
</p>
</article>
img, article{
display: inline-block;
}
img { float: right; }
I am having some trouble with aligning two div boxes next to each other;. Or more correctly, I have aligned my two “head” boxes next to each other but my problem is that I am using them as a expand-collapse container and those boxes will not align correctly.
I am posting the entire code beneath and would be grateful if someone had a solution to this problem, which probably is not that difficult. And another problem is, that when I expand the hidden area the two boxes "resets" and again stand under each other.
<html>
<head>
<!-- Panel Slider for Contact -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<!-- Expand Collapse -->
<script type="text/javascript">$(function(){
$("#mostrar1").click(function(event) {event.preventDefault();
$("#caja1").slideToggle();
});
$("#caja1 a").click(function(event) {event.preventDefault();
$("#caja1").slideUp();
});
$("#mostrar2").click(function(event) {event.preventDefault();
$("#caja2").slideToggle();
});
$("#caja2 a").click(function(event) {event.preventDefault();
$("#caja2").slideUp();
});
}); </script>
<style type="text/css">
.slide-out-div {
padding: 20px;
width: 250px;
background: #031F2F;
margin: 0px;
}
#caja1 {
width:30%;
display: none;
padding:5px;
border:2px solid #FFFFFF;
background-color:#99a8ff;
}
#mostrar1{
display:block;
width:30%;
padding:5px;
border:2px solid #FFFFFF;
background-color:#0C415F;
float: left;
color: #FFFFFF;
}
#caja2 {
width:30%;
display: none;
padding:5px;
border:2px solid #FFFFFF;
background-color:#99a8ff;
}
#mostrar2{
display:block;
width:30%;
padding:5px;
border:2px solid #FFFFFF;
background-color:#0C415F;
float: left;
color: #FFFFFF;
}
}
</style>
</head>
<body>
Private<div style="display: none;" id="caja1">[x]<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div>Erhverv<div style="display: none;" id="caja2">[x]<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div>
</body>
</html>
Thanks
Mestika
This worked for me on Firefox 3.7a. Two things changed: added a doctype and wrapped each column in a wrapper. Wrapper class could probably be named something more semantic, that's up to you.
<!DOCTYPE html>
<html>
<head>
<!-- Panel Slider for Contact -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<!-- Expand Collapse -->
<script type="text/javascript">$(function(){
$("#mostrar1").click(function(event) {event.preventDefault();
$("#caja1").slideToggle();
});
$("#caja1 a").click(function(event) {event.preventDefault();
$("#caja1").slideUp();
});
$("#mostrar2").click(function(event) {event.preventDefault();
$("#caja2").slideToggle();
});
$("#caja2 a").click(function(event) {event.preventDefault();
$("#caja2").slideUp();
});
}); </script>
<style type="text/css">
.wrapper {
width: 30%;
float: left;
}
.slide-out-div {
padding: 20px;
width: 250px;
background: #031F2F;
margin: 0px;
}
#caja1 {
display: none;
padding:5px;
border:2px solid #FFFFFF;
background-color:#99a8ff;
}
#mostrar1{
display:block;
padding:5px;
border:2px solid #FFFFFF;
background-color:#0C415F;
color: #FFFFFF;
}
#caja2 {
display: none;
padding:5px;
border:2px solid #FFFFFF;
background-color:#99a8ff;
}
#mostrar2{
display:block;
padding:5px;
border:2px solid #FFFFFF;
background-color:#0C415F;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="wrapper">
Private<div style="display: none;" id="caja1">[x]<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div>
</div>
<div class="wrapper">
Erhverv<div style="display: none;" id="caja2">[x]<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div>
</div>
</body>
</html>