In the code below I added input button to the leftPane div.
Here I have two div's/ Left 80% and right 20%.
Now I want to position this button to be vertically in the middle and on the right side in the leftPane.
But it when I set 'right:0;' it goes to the right side of the browser, and not of the right side of the leftPane.
Why?
<body style="overflow:hidden;">
<div style="background: #ff0000; position: fixed; top:0; left:0; width:100%; height:100%;">
<div id="leftPage" style="width:80%; height:100%;background:#00ff00; float:left;text-align:center;">
<img src="http://fc07.deviantart.net/fs45/f/2009/106/c/1/HD_Nature_Wallpapers_by_CurtiXs.jpg" alt="test" style="max-width:90%; max-height:90%;"/>
<input type="submit" value="Next" style="width:40px;height:70px;position:absolute;top:50%;right:0;"/>
</div>
<div id="rightPane" style="width:20%; height:100%;background:#0000ff; float:left;">
<div id="commentBox" style="background:#dddddd; width:90%; height: 50px;">
<input type="text" placeholder="Enter here..." />
</div>
</div>
</div>
</body>
You need to have the parent <div style="position: relative;"> otherwise your absolute positioning is defaulting to your <body>
To clarify, set #leftPage to relative positioning.
Related
I am going to make a website like this http://watcherboost.com/
SO i want to create middle menu for my website.so i need to create a div tag which is always top on following background:
This is the code i tried
<form id="form1" runat="server">
<div>
<div id="top" style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
</div>
</form>
<div style="height: 300px;background-color: #0E5D7B; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div style="height: 650px; background-color: #C2C2C2; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div style="height: 300px;background-color: #0E5D7B; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div id="middle" style="margin-left: 150px;margin-right:150px;margin-top:-250px;background-color:black"></div>
I want to get this last div (id =middle) to always top mode like upper website.
But unfortunately my div (id=middle) is not showed the page..
Please advice how to edit this code
Thanks
Your div is not showing up, because it doesn't contain any content. Add height property to its inline CSS.
If you want a div stay on top you should set:
position:fixed;
top:0px;
try this:
https://jsfiddle.net/TiG3R/ug4vvo48/
What I need to do is a bit complicated to explain, but I'll do my best. I need to fit 3 different divs in one page, but my left div needs to have more space than the others, so aligning side by side is impractical, as is one on top of each other. I need one bigger div on the left, and the other two stacked on top of each other on the right. But I can't merge these two divs into one and float it. Because I need the top one to be vertically aligned on top of the left one, and the bottom one vertically aligned on bottom of the left one, while these 2 (top and bottom) need to be aligned on their right. Not sure if I was able to explain, so here is an image illustrating what I want to accomplish:
So, you see, left one taking most of the space, smaller ones aligned on top and bottom, while also aligned on their right side, and a blank space between then. Here's the code I already have:
<div style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div style="display: inline-block; vertical-align: bottom; width: auto; padding-left: 20px;">
<h3>Bottom right div</h3>
<input type="text" name="name3">
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
I'd also like to say that in the middle of the way (when I only had 2 divs) it was working the way I wanted to, the problem arose when I added the third div, so I think that's where the problem is at. Please note that I'm new to html, I'm sorry if this is just a simple fix.
I think the key is the equal height part, which you can use CSS3 flexbox to solve it. For the right side top / bottom divs, you can wrap the two divs into another div. See the simple demo below.
jsFiddle
div {
border: 1px solid aqua;
}
.container {
display: flex;
}
.left, .right {
flex: 1;
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="container">
<div class="left">
<h3>Left Div</h3>
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="right">
<div>
<h3>Top right div</h3>
</div>
<div>
<h3>Bottom right div</h3>
</div>
</div>
</div>
this is just the way you want it to be.... as the images..
<html>
<head>
<style>
#i{
background-color:"red";
width:700px;
height:600px;
float:left;
}
#a{
background-color:"black";
width:600px;
height:300px;
float:right;
position:relative;
display:inline;
}
#b{
background-color:"blue";
width:600px;
height:250px;
float:right;
margin-top:50px;
position:relative;
display:inline;
}
</style>
</head>
<body>
<div id = "i">
<p>hello</p>
</div>
<div id = "a">
<p>hello</p>
</div>
<div id = "b">
<p>hello</p>
</div>
</body>
</html>
One way is to use negative margin. The inline-block element is what's making it difficult to have multiple divs on the same vertical axis, because both are lining up with the larger div. This works for what you're asking:
<div id = "left" style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div id = "top-right" style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div id = "bottom-right" style="display: inline-block; vertical-align: bottom; margin-left: -182px">
<h3>Bottom right div</h3>
<input type="text" name="name3" >
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
fiddle: https://jsfiddle.net/an9ra3mb/2/
I am trying to display the background image of the absolutely positioned div. but that div would never show off..
fiddle here
<div class=""> City:
<span class="displaycity" style="display: none;">xxxx
</span>
<span class="contentbox editcitytext" style="display: inline-block;">
<input type="text" value="xxxx" class="citynamebox">
<div style="position: absolute; color: brown; z-index: 3333; top: -101px; left: 90px;" class="validationmessagecomposed">
<div style=" border:1px solid brown; padding:10px;background-color:white;">Please check for invalid characters
</div>
<div style="height:7px; text-align:center;background- image:url(https://upload.wikimedia.org/wikipedia/commons/2/21/Ic_arrow_drop_ down_48px.svg); background-repeat:no-repeat;background-position:60px; position:absolute; top:93px;">
</div>
</div>
</span>
<span class="editcitybutton">Update
</span>
</div>
Difficult to say for sure - but you never set a width, which would be required for an absolutely positioned div. Try adding a border to the div to see if it has a width/height.
I created a simple floating pane declaratively(the below code) . everything is good. I have a button that click on it and the floating pane will open. the problem is that if i again click the button, the floating pane position is change from the previous position . How can i set position of the floating pane. another problem is the top,left and position:absolute is not working for my floating pane .
<body class="claro" role="main">
<div id="bc" style="width:100%; height:100%; padding: 5px;" dojoType="dijit.layout.BorderContainer">
<div id="header" dojoType="dijit.layout.ContentPane" region="top" splitter="true">
</div>
<div dojoType="dojox.layout.ExpandoPane"
splitter="true"
duration="125"
region="left"
previewOnDblClick="true"
id="leftPane"
maxWidth="275"
style="width: 275px;">
<div dojoType="dijit.layout.TabContainer" attachParent="true" tabPosition="bottom" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="Legend">
<div id="legendDiv"></div>
</div>
<div dojoType="dijit.layout.AccordionContainer" title="Search" style="width:275px;" attachParent="true">
<div dojoType="dijit.layout.ContentPane" title="Attribute search">
<div class="searchBar">
<p>
<label for="searchBox" style="float: left;">Search:</label>
<input id="searchBox" name="searchBox" style="float: left;">
<span id="runSearchIcon" style="border: none; floast: left; padding: 3px;">
</span>
</p>
</div>
<ul id="dojoList"></ul>
</div>
<div dojoType="dijit.layout.ContentPane" title="spatial search">
<ul id="dijitList"></ul>
</div>
</div>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" region="center" id="centerPane" tabStrip="true">
<div id="mymap" style="width:100%;height:100%"> </div>
<div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
title="A floating pane" data-dojo-props="resizable:false, dockable:true,closable:false, title:'Tools'"
style="position:absolute;top: 100px;;left:0;width:70px;height:150px;visibility:hidden;">
This is the content of the pane!
</div>
<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){dijit.byId('dFloatingPane').show();}" style="position:absolute;top: 150px;left: 20px;"></div>
</div>
</div>
</div>
</body>
Easiest way would be to set the position:absolut with every click on the Button to the first position by using domStyle.
domStyle.set("dFloatingPane",{
position:"absolute",
top:"100px",
left:"0px"
});
Simple solution just create a div and set position relative , position relative control absolute, here is the sample code eg. check and understand
<div style="position:relative">
<div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
title="A floating pane" data-dojo-props="resizable:false, dockable:true,closable:false, title:'Tools'"
style="position:absolute; top: 100px; left:0; width:70px;height:150px; visibility:hidden;">
This is the content of the pane!
</div>
<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){dijit.byId('dFloatingPane').show();}" style="position:absolute;top: 150px;left: 20px;"></div>
</div>
Position:relative Control position:absolute , so you can set your top or bottom position accordign to your dessign thanku, hope you understand my point.
I have a picture on a page, and I simply want to draw a link with a small graphic in the upper left corner of the picture. Is there any way to do this? to overlap it on the picture appropriately?
Something like this would work (recommend moving the inline CSS to a stylesheet of course):
<div style="position:relative">
<div>
<img src="backgroundimg.png">
</div>
<div style="position:absolute; left:0; top:0;">
<img src="smallgraphic.png">
</div>
</div>
The position:absolute will place that div relative to a container with position set, in this case at left 0 top 0. So that means it will end up in the top left of the same element that the 'backgroundimg' is placed in.
Does that make sense?
Don't use more divs than you need.
<div style="position: relative;">
<a style="position: absolute; top: 0; left: 0;">
<img src="..." />
</a>
<img src="..." />
</div>
simplify:
<div style="background:url(yourimage.jpg); position:relative;">
<div style="position:absolute; left:0; top:0;">
<img src="inner.jpg">
</div>
</div>
or:
<div style="background:url(yourimage.jpg); position:relative;">
<img src ="innerimage.jpg" style="position:absolute; left:0; top:0;"/>
</div>
or:
<div style="background:url(yourimage.jpg); position:relative;">
<a href="somewhere.html" style="position:absolute; left:0;
top:0;display:block;width:100px;height:100px;"></a>
</div>