i want to make a slideshow and it should look like this.
but what i have is this . preview
as you can see the problem is left side arrow [rig_arrow] is invisible and i know it's underneath of main div.i want to know how can i modify codes to visible both divs.
this is the code
html
<div class="arrow" id="rig_arrow">></div>
<div class="arrow" id="main"></div>
<div class="arrow" id="lef_arrow"><</div>
css
.arrow{
float:left;
}
#main{
width:200px;
height:50px;
background-color:rgb(153,153,153);
}
#rig_arrow{
background-color:rgb(204,204,204);
width:20px;
margin-right:-20px;
}
#lef_arrow{
background-color:rgb(204,204,204);
width:20px;
margin-left:-20px;
}
The problem is that the divs stack on top of each other in the order they appear in the DOM. You could change the order by putting #main first, but then you'd need something different than just float: left.
Another trick to change the layer order is to use position: relative on the right arrow:
#rig_arrow{
background-color:rgb(204,204,204);
width:20px;
margin-right:-20px;
position: relative;
}
Example: https://jsfiddle.net/ykLjy4L2/1/
See the fiddle
No need to change your markup..Just add the below css..
Add
position: relative;
to your CSS for #rig_arrow and #lef_arrow or add these two styles to .arrow.
Related
I'm trying to make an image under a title on the top left but the image doesn't want to cover the left side.
I changed the position to position: absolute, made the margin and padding 0, inspected the HTML page and can't see anything that can influence this image.
The HTML:
<div class="header">
<div class="container">
<div class="row">
<div class="col">
<h1>Dillan Robbertze<h1>
<img src="mountain-og.jpeg">
</div>
</div>
</div>
</div>
The CSS:
.header img{
height:Auto;
left:0;
margin:0;
padding:0;
position:absolute;
width:100vw;
z-index:1;
}
Expected Results: Image is under the title top left.
Actual Results: There is a white space left and top of the image.
EDIT: I added top:0; thanks to #Somesh Mukherjee. The image moved up, but there is still a left space that shouldn't be there.
add a class to the parent div element. and add position relative to it.
.myNewClass {
position: relative;
}
also, make sure your parent elements don't have margin and padding. for that, you can use a CSS reset like this:
* {
margin: 0;
padding: 0;
}
though this will make sure all of your elements don't have any margin or padding so you need to specify all you need by yourself. you should put this at the top of your CSS file if you want to use it.
You have not specified the top attribute
.header img{
height:auto;
left:0;
top:0;
margin:0:
padding:0;
position:absolute;
width:100vw;
}
why don't you try:
top: -28px;
position:relative;
Helped me once, or twice in similar situations.
I don't really know how to approach this, but this is what I'm trying to do, placing the white arrowbox:
I know how to do an arrowbox, but placing it like that is a mystery to me. At the moment I have two sections, upper and lower, and then tried giving the box an absolute position, but didn't work.
How should I approach this problem? I'm sure there is an easy solution, but I'm not that experienced with CSS.
didn't understand your question very well myself. IF you are trying to position your box in the middle of the lower blue container with: position:absolute I would try this myself
.box {
height:100px;
width:300px;
background-color:red;
position:absolute;
top:-50px;
left:50%;
margin-left:-150px; /*this has to be half your box width negative margin*/
}
Don't forget to add position relative to your blue div (or fixed, or absolute... just not default static). A fiddle as an example ( I add css box arrow just in case you need it): http://jsfiddle.net/j5a0227s/1/
Clearly misunderstood your question. Please see the updated JSFiddle.
This places a green block below the middle circle, but by giving it the position: absolute, you can change the location with margin-top. I don't know how this reacts in responsive websites, you might want to tweak it a bit.
Edit2: Even better is to place the white block in the div you have above the circles. See this updated JSfiddle.
HTML
<div class="main">
<div class="container0">
<div class="hover2"></div>
</div>
</div>
CSS
.main {
margin-top:100px;
}
.hover2 {
height: 50px;
width: 100px;
background: green;
margin-left:180px;
position: absolute;
margin-top:60px;
}
.container0 {
background: purple;
width: 100%;
height:100px
}
Wrap your two sections with a div and take a close look at this interesting article: Centering in CSS: A Complete Guide.
I have div inside a div (.konteineris2 and .feedback). When I use left:-200px in .feedback class, fixed div suddenly appears in the very left side of screen, outside .konteineris2. All I wanted it to move for 200px to the left outside .konteineris2, but not appear to the left screen border and then move 200px from that point.
HTML:
<div class="konteineris2">
<div class="feedback">
</div>
</div>
CSS:
.feedback{
position:fixed;
top:220px;
width:100px;
height:200px;
background:white;
}
.konteineris2{
width: 960px;
height:700px;
position:absolute;
top:460px;
padding-top:30px;
pointer-events:none;
overflow:hidden;
}
Any ideas how to manage it?
change position:absolute; to position:relative; in .konteineris2
Add margin-left: -200px; in .feedback
Check it on CodePen . I think you're looking for the same thing.
Without seeing more of the context in which this occurs I'd guess the following might achieve your goal: Try adding margin-left:-200px instead.
I'm developing a website using drupal's (7.14) Marinelli theme as a template. I'm currently fighting with getting the main menu onto the same line as the logo. The url of my page is http://quaaoutlodge.com/drupal-7.14/ - can anybody help me on how I have to set the css properties or put the html together to get this aligned properly? The icon should be on the left side of the main menu and the yallow background is just for debugging reason.
Any help would be appreciated!
Thank you!
The code in page.tpl.php currently looks like this:
<div style="background:#000; height:85px; position:fixed; top:0px; width:100%; text-align: right;padding-right:-20px; filter:alpha(opacity=60);border-bottom:1px solid #999;">
<div style="text-align: left;
top:0px;
width:70%;
padding-left:100px;
padding-right:auto;
margin-left:auto;
margin-right:auto;
background-color:#FFFF00;"><?php if($logo):print $imagelogo;endif ?>
<div id="navigation-primary" class="sitemenu">
<?php print $mainmenu; ?>
</div></div>
The easiest solution would be to set position:absolute on both divs together with a top: and margin-left: property to always fix them relatively. You could also float them both left for instance, set a width property and a margin-left on the right div.
Here, this is what you'd need to do : http://jsfiddle.net/Z4EAb/
The main problem is that the second div (the one that wraps the logo & navigation) is too small to fit the logo and navigation comfortably.
First, please give that second div an id ("header-wrapper", for instance) and take out the style attribute. Then here's the relevant CSS:
#header-wrapper { width: 1038px; margin: 0 auto; }
#logo { top: 15px; position: relative; }
#navigation-primary { float: left; margin-left: 50px; padding-top: 34px; }
Don't be afraid of using negative margins to position things around each other.
See also:
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
i'm stuck in a bit of a rut at the moment.
if you head over to my website...
http://dekkro.no-ip.org/
You will see an image, and a div underneath it. I have spent the past few hours trying to position these both in the middle of the page, with the bottom div over lapping the image.
I have failed and failed, what am I doing wrong here? I have used z-index, and positioning but its never centered.
Thanks!
All you need is this:
CSS:
#my_img {
margin:auto;
display:block;
}
#my_div {
margin:auto;
position:relative;
top:-100px;
z-index:2;
}
HTML:
<img id="my_img" src="http://dekkro.no-ip.org/images/testimage.png" />
<div id="my_div">whatever</div>
Here's a demo: http://jsfiddle.net/tX2JY/embedded/result/
Wow, that's alot of code going on for that page.
Without reviewing everything yet (will in a bit) - have you tried setting the main image to be a background image of a div, and then simply putting the log in form inside it?
CSS
#image-div { background-image:url('yourimage.jpg'); }
HTML:
<div id="image-div">
<div id="form-div">
form...
</div>
</div>
Lets say one div has width w1 and height h1 ; other w2 , h2
#div1 {
position:absolute; top:50%; left:50%; margin-left: - w1/2px; margin-top:-h1/2px;
}
#div2 {
position:absolute; top:50%; left:50%; margin-left: - w2/2px;
margin-top:-h2/2px; z-index:9999;
}