Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have several buttons which are displayed inline with <h3> tags. All <h3> tags are of equal length but still the edges of the buttons are not aligned.
I want to align the edges of buttons so that it looks plain.
suppose your code looks like this:
<h3>hello</h3><input type="button" value="hello"></br>
<h3>hello 2</h3><input type="button" value="wad adwadaw a"></br>
<h3>hello 4</h3><input type="button" value="1231245 5"></br>
<h3>hello 55</h3><input type="button" value="asdasdddd"></br>
then the css should be:
h3{
width:100px;
display:inline-block;
}
input[type="button"]{
width:300px;
display:inline-block;
}
is this what you wanted?
CSS
<style type="text/css">
h3{
background:orange;
padding:10px 20px;
display:inline-block;
margin:0px
}
</style>
HTML
<h3>Home</h3>
<h3>About Us</h3>
<h3>Contact</h3>
You Should be Provide Screenshot or Code Sample for Getting Proper Answer.
Note: Equal Edges with Same Length is not Possible if Button Content have not Same Width.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want to create a background with Google Maps' fucntionallity.
So here is the idea:
I haven't found any library but I guess it can be solved by css grid.
Can you help me with a piece of advice or just to say how theoretically it can be solved?
You could use jQuery draggable. What you can do is have a container div with the overflow set to hidden and have a draggable image (your background) inside:
$("#draggable img").draggable();
#div1 {
height: 400px;
width: 400px;
background-color: blue;
overflow: hidden;
}
.image {
margin-top: -400px;
margin-left: -400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
<span class="move" id="draggable">
<img src="https://placekitten.com/1600/1600" class="image"/>
</span>
</div>
If the snippet doesn't work here is the same code in jsfiddle.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a custom gantt chart which has a bar and a label on it. The bar of the chart is a a combination of small div and the label for the bar is placed in the first div.
I have created a rough version to simulate this here jsfiddle.I think the issue is due to pointer-event:none; not supported in IE. I have set the following property in CSS for label
<html>
<head>
<style>
.mylabel {
pointer-events: none;
left: 40px;
position: absolute;
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
z-index: 2;
}
.rowDiv {
float:left;
width:30px;
height:30px;
z-index: -1;
}
</style>
</head>
<script>
function div1Click(){alert("Div1 clicked");}
function div2Click(){alert("Div2 clicked");}
function div3Click(){alert("Div3 clicked");}
</script>
<body>
<div style="width:95px;height:35px;overflow-y:hidden;z-index: -1;">
<div id="Div1" class="rowDiv" style="background-color:#b0c4de;" onClick="div1Click()"><label class="mylabel" >DiV 123</label></div>
<div id="Div2" class="rowDiv" style="background-color:#FF0000" onClick="div2Click()"></div>
<div id="Div3" class="rowDiv" style="background-color:#00FF00" onClick="div3Click()"></div>
</div>
</body>
</html>
On the click of each div it should open a popup corresponding to that div. However the label from the first div spans across all the other div. When i click on the label anywhere in div 2 or div 3, the click event for the first div is triggered instead of div 2 or Div 3.
The issue exist only in IE 10 and it works fine in Chrome.
Is there any way to make this work in IE 10.
Thanks in advance
Pointer events were introduced in IE11, so will not work in 10 or below.
Check out click-through-a-div-to-underlying-elements for some alternative ideas
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I want to add a floating component in my site that highlights a bullet based on scroll. Like I scroll to second section then second bullet should be highlighted.How do I do that?
here you go, I made an example of how you can do it: DEMO
HTML:
<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>
<section>Section 4</section>
<div id="bulletContainer">
<div class="bullet highlighted"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
</div>
CSS:
*{
margin:0;
padding:0;
}
section{
position:relative;
width:100%;
height:400px;
background-color:#CCC;
border-bottom:1px solid #000;
}
#bulletContainer{
position:fixed;
width:25px;
height:140px;
left:100%;
top:50%;
margin-left:-50px;
margin-top:-70px;
}
.bullet{
background-color:#666;
border-radius:50%;
width:25px;
height:25px;
margin-bottom:10px;
cursor:pointer;
}
.highlighted{
background-color:#F90;
}
jQuery:
$(document).on('scroll',function(){
$('section').each(function(index){
if($(document).scrollTop()>=$(this).offset().top-50){
$('.bullet').not($('.bullet').eq(index)).removeClass('highlighted');
$('.bullet').eq(index).addClass('highlighted');
}
});
});
$('.bullet').click(function(){
$('.bullet').not(this).removeClass('highlighted');
$(this).addClass('highlighted');
var index=$(this).index();
$('body, html').animate({scrollTop:$('section').eq(index).offset().top},200);
});
if you scroll the page or click on any of the bullets, you can see the bullet getting highlighted, and the page scrolling to the section.
NOTE: this code has a tolerance of 50px it means when the scroll is 50px above the desired element, the bullet gets highlighted, you can change it at any time.
I think you have to add add to li when scroll to section and given background color to that class
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I am trying to create an HTML dashboard that will contain 4 boxes on the homepage. 3 on the top, 1 large one on the bottom. These boxes will be populated with data such as text, graphs (using highcharts), spark lines, etc... However, I cannot figure out for the life of me how to do this!
I am new to HTML/CSS/Bootstrap etc, so pardon my lack of understanding. Here's a diagram of what I am trying to do... I've given a link to my image since Stackoverflow will not let me post a photo.
Thank You!!!
http://i1158.photobucket.com/albums/p618/g12mcgov/ScreenShot2013-12-30at101503AM.jpg
Welcome to SO.
On this site you need to ask specific questions with (usually) some code examples of what you have tried.
Your question involves many parameters that we cannot guess (for example, do you need a responsive layout, what kind of elements do you want to place in those boxes, ...).
I made this quick layout that you can use to get started but you will have to learn about (at least) basics of HTML and CSS to use it and to go further.
See this FIDDLE
HTML:
<div id="navbar">
<p>NAVBAR</p>
</div>
<div id="wrap">
<div class="line_up"></div>
<div class="line_up"></div>
<div class="line_up"></div>
<div class="clr"></div>
</div>
<div id="bottom"></div>
CSS:
body{
width:1050px;
margin:0 auto;
}
#navbar{
width:100%;
height:80px;
line-height:80px;
background:grey;
text-align:center;
margin-bottom:100px;
}
#wrap{
width:100%;
}
.line_up{
width:330px;
height:200px;
margin:10px;
float:left;
background:red;
}
.clr{
clear:both;
}
#bottom{
height: 200px;
width:1030px;
margin:10px;
background:grey;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
How do i make the black box reach the full height?
trulyamped.com/dropit
When you click on dropdown I want the entire background to be black. I Tried to do height:100% with position:abosulute but it does not seem to work. Please let me know how to get around this. Also an added bonus if you would like to help with it too is creating a animation so that the items on the nav appear with a small delay and fade-in.
Thanks
I want it to look similar to the MENU/Navigation on www.domanistudios.com/mobile/
You can use jQuery to find the height of the browser window and then you can apply this height to the ul element. A simple example for this
fiddle: http://jsfiddle.net/8hKEd/
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('#clickme').click(function(){
$('#showme').css({'height' : $(window).height()});
$('#showme').slideToggle('slow');
});
});
</script>
</head>
<body>
<a id="clickme" href="#">Click Me</a>
<ul id="showme" style="display:none; background-color: #000; color: #fff;">
<li>
Some Text
</li>
<li>
Some Text
</li>
<li>
Some Text
</li>
<li>
Some Text
</li>
</ul>
</body>
</html>
You need to increase the height of the ul rather than the height of body. body has height based on the elements in it. Increase the height of ul menu class to 1000px. That should give you what you need.
.menu ul {
display: none;
height: 1000px;
}