I want to integrate a nivo slider on this page Link The slides should go into the screen I have on top on the page. At the moment I struggle to get the slider images into the screen image.
HTML:
<div class="top" >
<img src="screen.png" style="margin-top: 0px; margin-bottom: 10px; " />
<div class="slider">
<img src="slide-1.png" alt="" />
<img src="slide-2.png" alt="" />
<img src="slide-3.png" alt="" />
</div>
</div>
CSS:
#content { height: 800px; width: 1000px; float: left; display: block; margin-top: 20px; }
#content .top { width: 1000px; height: 300px; display: block; float: left; position: relative; margin-left: 20px; margin-top: 20px; }
#content .text3 { width: 200px; display: inline-block; margin-left: 20px; }
#content .text4 { width: 300px; height: 90px;margin-bottom: 10px; }
#content .face { width: 300px; height: 300px; display: block; float: left; position: relative; margin-top: 20px; }
#content .bottom { width: 1000px; height: 400px; display: block; float: left; position: relative; margin-left: 0px; margin-top: 45px; }
#content .box1 { width: 236px; height: 350px; background:url(box1.png) no-repeat; display: block; float: left; position: relative; margin-left: 0px; margin-top: 20px; }
#content .box2 { width: 236px; height: 350px; background:url(box2.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; }
#content .box3 { width: 236px; height: 350px; background:url(box3.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; }
#content .box4 { width: 236px; height: 350px; background:url(box4.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; }
#content .slider { width: 360px; height: 235px; margin-left: 60px; margin-top: 40px; overflow: hidden; }
Here is my whole code:
HTML: Link
CSS: Link
What should be done to get the nivo slider running properly?
I used the Javascript and CSS from this site Link
You are initializing #slider in the header but the div is a class="slider" change it to the ID or switch the id to the proper class
/** EDITED **/
Change your CSS to this:
#content .slider {
width: 350px;
height: 235px;
margin-left: 60px;
margin-top: 40px;
overflow: hidden;
position: absolute;
top: 12px;
right: 133px;
}
you are calling nivo slider by id in js and while you are only using css class there in html
use this
$(window).load(function() {
$('.slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 500, // Slide transition speed
pauseTime: 6000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
controlNav: true, // 1,2,3... navigation
directionNav: false, // Next & Prev navigation
pauseOnHover: true // Stop animation while hovering
});
});
or wrapp a div named slider around slider class
Related
So as the title say I put a color on top of an image and I then tried to put some text on top of it, but then all the div got moved to the bottom and the text got moved to the top of the div and when I inspect the heading, it shows a space colored in yellow. I'm trying to understand CSS position and I'm starting to understand it, but right now I don't understand haha. I think it's something with a margin, but I reinitialized it at the beginning of the CSS.
(Also sorry! If you feel the need to tell me that my CSS is bad don't hesitate to tell me off i want to learn from my mistake!)
The HTML
<div id="section3">
<div id="layer">
<h1>Parmi les premiers de classe !</h1>
</div>
</div>
And CSS
#section3 img {
width: 1903px;
margin-left: 0px;
margin-top: -645px;
z-index: 100;
}
#section3 h1 {
margin-top: 260px;
margin-left: 420px;
font-size: 80px;
}
#section3 p {
margin-top: 10px;
margin-left: 590px;
font-size: 30px;
}
.img4{
position: relative;
top: 641px;
}
#section3{
background: url('../Images/CF3.jpg');
position: relative;
bottom:4px;
width: 1903px;
height: 930px;
}
#layer{
background-color: #4c96eb75;
width: 100%;
height: 100%;
}
#layer h1{
display: block;
}
The reset at the start of CSS
* {
margin: 0;
padding: 0;
font-family: Segoe UI;
}
You used up higher values of height and width that's why it happened. I changed that:
#section3 h1 {
/* margin-top: 260px;
margin-left: 420px; */
font-size: 80px;
}
#section3 p {
margin-top: 10px;
margin-left: 590px;
font-size: 30px;
}
.img4{
position: relative;
top: 641px;
}
#section3{
background: url('../Images/CF3.jpg');
position: relative;
bottom:4px;
width: 390px;
height: 300px;
}
#layer{
background-color: #4c96eb75;
width: 100%;
height: 100%;
}
#layer h1{
display: block;
margin: 0;
}
<div id="section3">
<div id="layer">
<h1>Parmi les premiers de classe !</h1>
</div>
</div>
Change the css to this:
#section3 img {
width: 1903px;
margin-left: 0px;
margin-top: -645px;
z-index: 100;
}
#section3 h1 {
/* margin-top: 260px;
margin-left: 420px; */
font-size: 80px;
}
#section3 p {
margin-top: 10px;
margin-left: 590px;
font-size: 30px;
}
.img4{
position: relative;
top: 641px;
}
#section3{
background: url('../Images/CF3.jpg');
position: relative;
bottom:4px;
width: 1903px;
height: 930px;
}
#layer{
background-color: #4c96eb75;
width: 100%;
height: 100%;
}
#layer h1{
display: block;
margin: 0;
}
I have added a margin:0, to the header and removed other styles margin for #section3 h1, that was the reason div was placed at the bottom and
The yellow dot "gif1" has to go inside the black box "gif" but as you can see I somehow managed to did the opposite.
How many things did I do wrong?
Livewave Preview
I already tried overflow:auto or hidden and changing the position attributes from relative to absolute and vice versa.
<html>
<head>
<body>
<center>
<div class="container">
<div class="img_sx"></div>
<div class="img_dx"></div>
<div class="quote"></div>
<div class="gif"><img class="gif1" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Scandal_-_Yellow_album_cover.jpg"></div>
<div class="burp"></div>
<div class="prot"></div>
</div>
</center>
<style>
.container {
width: 550px;
height: 430px;
background-color: burlywood;
display: table;
}
.img_sx {
width: 250px;
height: 430px;
background-color: cadetblue;
position: absolute;
overflow: hidden;
}
.img_dx {
width: 210px;
height: 390px;
background-color: cornflowerblue;
margin-left: 250px;
margin-top: 20px;
position: relative;
float: left;
}
.quote {
width: 230px;
height: 100px;
background-color: coral;
margin-left: 250px;
margin-top: 30px;
position: relative;
}
.gif {
width: 230px;
height: 100px;
background-color: black;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.gif1 {
width: 90px;
border-radius: 90px;
}
.gif2 {}
.burp {
width: 230px;
height: 90px;
background-color: white;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.prot {}
</style>
</head>
</body>
</html>
You are facing a complex situation where the float property is creating the issue. Basically the yellow "image" is wrapping around the floated element and that's why it goes out of the black box and under the blue one (the float element). To avoid this you can use absolute instead of float.
.container {
width: 550px;
height: 430px;
background-color: burlywood;
display: table;
margin: auto;
}
.img_sx {
width: 250px;
height: 430px;
background-color: cadetblue;
position: absolute;
overflow: hidden;
}
.img_dx {
width: 210px;
height: 390px;
background-color: cornflowerblue;
margin-left: 250px;
margin-top: 20px;
position: absolute;
}
.quote {
width: 230px;
height: 100px;
background-color: coral;
margin-left: 250px;
margin-top: 30px;
position: relative;
}
.gif {
width: 230px;
height: 100px;
background-color: black;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.gif1 {
width: 90px;
border-radius: 90px;
}
.gif2 {}
.burp {
width: 230px;
height: 90px;
background-color: white;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.prot {}
<div class="container">
<div class="img_sx"></div>
<div class="img_dx"></div>
<div class="quote"></div>
<div class="gif"><img class="gif1" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Scandal_-_Yellow_album_cover.jpg"></div>
<div class="burp"></div>
<div class="prot"></div>
</div>
This is the way to go:
.gif{
position: relative;
}
.gif1{
position:absolute;
}
Hope it helps.
I would like put the red box(Block E) below Block C and next to Block D, and at the same time move BLOCK C up with 1% margin between the block A and itself. I've tried with different strategies but never been able to solve the problem.
Here's my code:
.newsblockContainer {
background-color: #000000;
width: 89.2%;
margin-left: 4vw;
margin-top: 3vw;
height: 73.3vw;
overflow: hidden;
}
.blockA {
width: 59%;
height: 27vw;
background-color: #FFAE00;
margin-left: 1%;
margin-top: 1%;
float: left;
position: relative;
}
.blockB {
width: 38%;
height: 34vw;
background-color: #FFAE00;
margin-left: 1%;
margin-top: 1%;
float: left;
position: relative;
}
.blockC {
width: 59%;
height: 23vw;
margin-left: 1%;
float: left;
background-color: #FFAE00;
margin-top: -9.45%;
position: relative;
}
.blockD {
height: 36.7vw;
width: 38%;
margin-left: 1%;
background-color: #FFAE00;
float: left;
margin-top: 1%;
position: relative;
}
.blockE {
height: 15vw;
background-color: red;
position: relative;
margin-top: 1%;
width: 59%;
margin-left: 1%;
}
<div class="newsblockContainer">
<div class="blockA">
block A
</div>
<div class="blockB">
block B
</div>
<div class="blockC">
block C
</div>
<div class="blockD">
block D
</div>
<div class="blockE">
block E
</div>
</div>
Any suggestions?
Fiddle: https://jsfiddle.net/j8hg3hf1/1/
Use absolute positioning instead of relative positioning for the ones you need to move. You 'll need include attributes for the location in px, %, etc.
Edit:
You can keep the relative positioning and utilize the top attribute. The 1% margin thing may be slightly tricky this way but it can surely approximate it.
.blockE{
height: 15vw;
background-color: red;
position: relative;
top: 308px;
margin-top: 1%;
width: 59%;
margin-left: 1%;
}
This along with changing the .blockC to top: -10px changes the image to this.
Here's a link to how the image appears
https://i.imgur.com/zLhoPgb.png
Check this out. It worked. If you need modification, please comment.
.newsblockContainer {
background-color: #000000;
width: 89.2%;
margin-left: 4vw;
margin-top: 3vw;
height: 73.3vw;
overflow: hidden;
}
.blockA {
width: 59%;
height: 27vw;
background-color: green;
margin-left: 1%;
margin-top: 1%;
float: left;
}
.blockB {
width: 38%;
height: 34vw;
background-color: blue;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%;
float: right;
}
.blockC {
width: 59%;
height: 23vw;
margin-left: 1%;
margin-top: 1%;
float: left;
background-color: pink;
}
.blockD {
height: 36.7vw;
width: 38%;
margin-left: 1%;
background-color: #FFAE00;
float: right;
margin-top: 1%;
margin-right: 1%;
position: relative;
}
.blockE {
height: 15vw;
background-color: red;
margin-top: 1%;
width: 59%;
float: left;
margin-left: 1%;
}
<div class="newsblockContainer">
<div class="blockA">A</div>
<div class="blockB">B</div>
<div class="blockC">C</div>
<div class="blockD">D</div>
<div class="blockE">E</div>
</div>
I have a round div which wraps an image and two other divs. The problem is that it is shown a grey border around this div. The problem is on all browsers chrome and firefox. I have tried putting browser css-vendor-prefixes, masks but no result.
I can not use :
img {
width: 100%;
height: 100%;
border-radius: 120px;
}
because the image is not in the correct aspect-ratio. It is in 1:1. It should be on 16:9 because it is a YouTube video frame.
<div class="video_wrap">
<div class="views">1651</div>
<img src="http://img.youtube.com/vi/-NschES-8e0/hqdefault.jpg">
<div class="title">o'najr</div>
</div>
.video_wrap {
width: 240px;
height: 240px;
border-radius: 120px;
overflow: hidden;
}
.views, .title {
position: relative;
background: #fff;
height: 50px;
color: #f8008c;
text-align: center;
line-height: 50px;
}
.views {
top: 0px;
z-index: 2;
}
.title {
top: -100px;
}
.video_wrap img {
height: 100%;
position: relative;
top: -50px;
}
fiddle http://jsfiddle.net/h3198LfL/
You could remove the border-radius:120px from .video_wrap and add following to your img
img{
width:100%;
border-radius: 120px;
}
SNIPPET
.video_wrap {
width: 240px;
height: 240px;
overflow: hidden;
}
img {
width: 100%;
border-radius: 120px;
}
.views,
.title {
position: relative;
background: #fff;
height: 50px;
color: #f8008c;
text-align: center;
line-height: 50px;
}
.views {
top: 0px;
z-index: 2;
}
.title {
top: -100px;
}
.video_wrap img {
height: 100%;
position: relative;
top: -50px;
}
<div class="video_wrap">
<div class="views">1651</div>
<img src="http://img.youtube.com/vi/-NschES-8e0/hqdefault.jpg">
<div class="title">o'najr</div>
</div>
add the webkit code and others in video-wrap, as in:
.video_wrap {
width: 240px;
height: 240px;
-webkit-border-radius:120px;
-moz-border-radius:120px;
-ms-border-radius:120px;
-o-border-radius:120px;
border-radius: 120px;
overflow: hidden;
}
to avoid the border, you can set new line of it, as in:
.video_wrap img {
border:0px;
border:none;
}
DEMo
See image attached - I want to bring the 'left' and 'right' 's closer together so they remain as close as both are to the header, in blue above.
this is my CSS for both left and right 's ... thank's a lot!
.left {
float: left;
position: relative;
background-color: #DDFF00;
margin-top: 40px;
margin-bottom: 10px;
height: 500px;
width: 10%;
}
.right {
float: right;
position: relative;
background-color: #FFE6E6;
margin-top: 40px;
margin-bottom: 10px;
margin-left: 10px;
height: 500px;
width: 88%;
}
.left {
float: left;
position: relative;
background-color: #DDFF00;
margin-top: 40px;
margin-bottom: 10px;
height: 500px;
width: 10%;
}
.right {
float: right; /*<-change to left */
position: relative;
background-color: #FFE6E6;
margin-top: 40px;
margin-bottom: 10px;
margin-left: 10px; /*<-and play with that too*/
height: 500px;
width: 88%; /*<-or increase that, without any changes above */
}