CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
nameless
nameless

Reputation: 1521

Arrows besides bootstrap container

I have a bootstrap container. As this is common for it, it doesn't take the hole page width, but is centered with a lot of margin on the left and right side.

What I'm trying to achieve is, that on the left and the right side (so besides the div with the container class, there are 2 centered arrows, left side pointing to left and right side pointing to the right.

You wonder, why I want to do that? I try to make something like a Carousel, but with pages, so when I click on the right arrow, there comes the content of the next page, clicking on the left arrow then, I get back to the other page.. I hope you know what I mean...

What I have is this:

<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop Upload</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <link rel="stylesheet" href="css/dropzone.css" type="text/css"/>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/dropzone.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container fill">
    <form action="upload.php" class="dropzone needsclick dz-clickable full-height">
        <div class="dz-message"><b> </b></div>
    </form>
</div>
</body>
</html>

Upvotes: 0

Views: 1027

Answers (3)

Jonathan Argentiero
Jonathan Argentiero

Reputation: 5727

The simplest way without taking your elements position in consideration would be using negative margins. (fiddle here)

html: 

<div id="arrow">&larr;</div>

css: 

#arrow {
 margin-left: -100px;  
}

Another viable way is to use position: absolute like this:

#container {
  position: relative;
}

#left-arrow {
 position: absolute;
 top: 40%;
 bottom: 40%;
 height: 10%;
 line-height: 100%;
 left: -5%;
}

Upvotes: 1

Paul Leclerc
Paul Leclerc

Reputation: 1137

You could do it globally as Bootstrap does with the arrow in the carousel : Having parents containers in each side of the page, fixed to the top AND with the screen's height as fixed height (easy to do with JQuery).

<body>
   <div class="parentofarrow left"><div class="parrentofarrow__arrow left"></div></div>
   <div class="parentofarrow right"><div class="parrentofarrow__arrow right"></div></div>
   <div class="container"></div>
</body>

You could have a another parent for all of them to have a different structure or anything. (in this case change position fixed to position absolute)

And in css : 

.parentofarrow { 
   position: fixed; // or absolute to a specific parent (relative)
   top: 0px;
   // height fixed with screensheight using Jquery
   width: // as you wish;
   text-align: center; // or margin auto on arrows
}
.parentofarrow.left { left: 0px; }
.parentofarrow.right { right: 0px; }
.parentofarrow__arrow { //customize and positionning as you wish }

And in these parents, having a vertical and horizontal align arrow with a specific action linked to change page content as you wish.

Should be enough!

Note that this solution is not the easiest but it offers a certain modularity (change height, parent, position...).

Upvotes: 1

Lee
Lee

Reputation: 10603

The easiest solution is too use the grid system. 

<div class="container fill">
    <div class="row">
        <div class="col-xs-1">Left</div>
        <div class="col-xs-10 main-stage">
            <form action="upload.php" class="dropzone needsclick dz-clickable full-height">
                <div class="dz-message"><b> </b></div>
            </form>
        </div>
        <div class="col-xs-1">Right</div>
     </div>
</div>
</body>

Upvotes: 0

Related Questions