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.
Related
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.
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;
}
I am building the following site:
http://www.verbum.xtrweb.com/soon.php
But as you can see, everything is zoomed. Not if you adjust it, but I dont want users to have to adjust their view for my site. I want my site to always appear with the same zoom, as in the picture I uploaded here:
ctrl + 0 is not a solution I am looking for. If not something in the code, probably a style property or something of the kind. See code in your browser to check. Thanks!!
Apart from all the small errors and mistakes found on your page by previous users, I would advise you to wrap your header content into a container with a percantege width. This way it will keep the same width according to the browser window width in all browsers. The font size of your paragraphs should be em also to adjust itself easily. Keeping all this in mind and cleaning up your code, you should be able to deliver the same experience to most of the users
Looks like you made a typing-error. Change the font-size of your paragraphs into px or em. So font-size: 37px (instead of 37pt).
Here, the file did not exist:
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
Maybe you should fix this first.
Also, I don't think it's a good idea to include multiple versions of jQuery on the same page.
Update:
<div id="facebook" style="display: inline; opacity: 1.0999999999999999;">
<input style=" " id="fb-button" type="submit" value=" " onclick="window.location.href='http://www.facebook.com/sharer.php?u=<http://verbum.xtrweb.com/>&t=<Verbum, the new dictionary>'" <="" input="">
</div>
The HTML above (copied from your page) is wrong; the input tag does not close properly.
In our project we used the following method to link users to some anchorred area on the page:
<span style="position: relative; top: -100px; z-index: -1; visibility: hidden;"
id="anchor"> </span>
This was used to leave a little space before the exact anchorred element like a form.
But since some late version of Safari this has broken and browser is positioning at the initial position of the element with no regard to the relative position.
Maby you have met this feature/bug too and have some work around to propose or can point out why my method is bad.
Yep! hanks to the incorrect but usable answer by Developer Art i got the solution!
If i apply id and relative position to the DIV anchoring to the #id starts working with telative scroll!
Why don’t you just add the ID attribute to the element in question, i.e. FORM? If you want to add vertical spacing before the form, you can use CSS:
<form id="anchor" style="margin-top: 100px;">
…
</form>
Issue eliminated, and much cleaner code :)
I want to strike off all the dates before today in a calendar control with an overlapping, red color x in ASP.NET. I can strikethru using the normal font strikethrough using the DayRender event. I can add an image but that sits adjacent to the date. I want the x (image) to overlap the date
Is this possible? If so, please help me how to go about it.
Thank you.
Use CSS,
Make the table cell position
relative
Make the image position
absolute, top & left: 0
Update:
The calendar control, like all ASP.NET control, outputs HTML. In this case it will output an HTML table, with a structure that looks something like this:
<table class="calendar_widget">
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
</tr>
....etc
The <td>, or table-cell as it's known, will contain the date and image you're inserting. You can use CSS to apply specific styles to the cell and image so that they are rendered differently.
My guess is your calendar's HTML with an image will look something like this:
<td><img src="x.gif" />01</td>
You can use a CSS stylesheet to apply the following styles:
table.calendar_widget td {
position: relative;
}
table.calendar_widget td img {
position: absolute;
left: 0;
top: 0;
}
That's the basics of HTML - if this doesn't help I'd recommend tracking someone down familiar with front end development and getting their help.