I'm trying to center a button in an ASP.NET container. I've looked at quite a few answers here and on other sites. I found one post that says to use
<center></center>
Tags and that's the only suggestion that works somewhat so far. It does center the button mostly, but it is still just a little bit off to one side. What I would like to do is instead of using a suggestion that kind of works like the center tag above I would like to be able to set the margins for the button. Will someone please help me with this? I know it's probably a simple answer but I'm very new to ASP.NET.Thanks in advance.
Here is my code I am using:
<asp:Button id="uxUploadExcel" runat="server" Text="Pull Student Data"/>
A simple solution would be to use CSS here and apply it on the parent container. You can also set margins on the button via CSS.
.parentContainer {
text-align: center;
}
#uxUploadExcel {
margin: 10px;
}
<div class="parentContainer">
<button id="uxUploadExcel" runat="server">Pull Student Data</button>
</div>
Note: I wrote out a plain html button here but an ASP.NET button can be used in place of it.
Related
I read this thread: Element not moving from top but I'm not sure it relates to what I'm doing. I have a test page that echoes out report data using PHP from a MYSQL database and the table's tag line of code is:
<table border='1'>
what I'd like to have is the table to position itself 27 pixels down from the top of the page so it is not in the background underneath the button I've got at the top. the button's code is:
<input type="button" onclick="emptyReport();" id="Button1" name="button" value="Clear Report"
style="position:absolute;left:1px;top:1px;width:96px;height:25px;font-family:Arial;font-size:13px;z-index:5">
what css property do I need to use to do this? I'm surprised I couldn't find anything on google considering this issue is overly simple. thanks.
It is hard to answer this question since you haven't provided the full HTML.
What I would suggest is to add the following Css to table:
table {
position: absolute;
top: 27px;
}
But this will be a shot in the dark without some more context.
Why would you position the table absolute anyway?
Making it relative with a padding-top: 27px would be more logic in my opinion.
I am trying to embed this iTunes button that I am putting on a site, but it seems to automatically alight left. Where and how in this code would I make the button center itself? Please see the example code below. Thanks!
Here's a quick fix if you have access to the css you could easily do this with flex box.
Wrap your anchor tag:
<div class="itunes">
</div>
add this css:
.itunes {
display:flex;
justify-content:center;
}
jsFiddle
Although adding inline-styles is frowned upon..., if your in a pinch this will work as well. Please don't do this unless you must:
<div style="display:flex;justify-content:center;">
</div>
note: flex box works on most browsers.
I have a SharePoint 2010 site and would like to use CSS only in the wikipage.
On my page I have a paragraph of information and at the end of it, has a question. After the viewers read the information and the question I would like them to be able to click on an image that says 'answer'. When clicking on the 'answer' image a text box comes up under the question with the answer. I would like the answer to stay on the page, not just hovering over the image.
My preference is to do this solely in css. I don't think I have the capabilities to do it in javascript.
I'm open to both options, I guess. If it is javascript can it be done inline?
Like mentioned by #JofryHS, css doesn't really respond to clicks.
Using inline js click handlers isn't great as it'll leave you having to repeat yourself a lot, but from the sounds of things you're fighting against not having enough access to Sharepoint (sigh, corporate networks).
This uses an inline click handler to show the answer:
<div class="question" id="q1">
What colour is the sky?
<button class="answerButton" onClick="document.getElementById('q1Answer').style.display='block'">Answer</button>
<div class="answer" id="q1Answer">
Overcast and grey, because I live in the UK.
</div>
</div>
<div class="question" id="q2">
Why does it always rain on me?
<button class="answerButton" onClick="document.getElementById('q2Answer').style.display='block'">Answer</button>
<div class="answer" id="q2Answer">
I'd have thought you figured this out already... It's Britain, of course it always rains on you!
</div>
</div>
the answers are hidden using css (note the display:none inside the .answer block):
.answer {
display:none;
background-color:#e5e5ff;
padding:15px;
}
.question {
background-color:#f5f5f5;
padding:15px;
border-radius:5px;
margin:7px;
}
Essentially, all the onClick does is change the css of the answer from display:none to display:block, rendering the answer visible.
There's also a tad of css to make it look shinier, and here's a demo jsfiddle
I'm working with Bootstrap's Typeahead and adding the input like so:
<div class="row">
<div class="span12">
<form class="centered">
<input id="main_search" type="text" class="search-query my-search" data-provide="typeahead">
</form>
</div>
</div>
I have the following CSS code which essentially just expands my search box to be "long" and in the middle of the span:
.centered {
text-align:center;
}
/* Make the main search box wider */
.my-search {
width: 80%;
}
My question is, when I use the Typeahead, the auto-completed results are only as long as they "have to be" to display the entire word/phrase whereas I want them to be as long as the actually input box. Basically like what you see on Google.com with their Instant Search functionality.
This closed issue suggests I should be able to manipulate the CSS to achieve what I want to do, but I'm not great at complex CSS and I'm struggling to get the inheritance just right to get any CSS to actually apply to the correct element. On top of that, I'm unsure how to make sure the dropdown-menu inherits the input's length (so that it'll work despite browser resizing).
Thanks for any help that you can provide!
Current code:
JSFiddle
Without you posting your code or a link to the working example, this is just a guess, but try this CSS
.my-search, .typeahead.dropdown-menu > li {
width: 80% !important;
}
This is the code:
<form id="the_form" action="">ev
</div>
<!-- final pay_block -->
<div class="linea"/>
<div class="spacer"/>
the linea is overlapping the buy button, now is in the middle because there is margin-bottom: 15px aplied.
Edit:
This is the site: http://tinyurl.com/cboyymm
also what I want is to display the pay button in the same position. I left space enough to product description, and I fixed a height to the diferents divs before. Is this the right thing? I want to make it in the most minimalism way. Tips are very welcome, as Im using this project to learn.
Thanks in advance. At first I was afraid of posting things here because I didn´t want to mess, and Im quite ashame Im so nob. But I found a very warm welcome. Dont want to abuse, just know why this little things happen.
Now define min-height
#pay_block {
min-height: 78px; // add this line
height:78px; // remove this line
}
Line No :- 612 in this css file tienda1.css
Result is this