I'm currently trying to create a centered fixed element. I have some css that I found, but it doesn't work as I'd like to. I have a picture attached to show what I mean.
I'm trying to add some images beside the textbox that I created, but they push the textbox aside so it's no longer centered. Without the pictures there, it's centered. With the css, the textbox moves ontop of the pictures, which isn't what I need. Picture: https://i.sstatic.net/glaGT.png
HTML:
<div id="divfix">
<center>page
<input size="3" id="uid" value="1"> of 3
</div>  
<img class="imiddle" title="next" alt="next" src="img/next.png" hspace="0" height="13" border="0" width="26">  
<img class="imiddle" title="last" alt="last" src="img/last.png" hspace="0" height="13" border="0" width="26">
</center>
CSS:
#divfix {
/* fixed position a zero-height full width container */`
position: fixed;
top: 390;
left: 0;
right: 0;
height: 0;
/* center all inline content */
text-align: center;
}
#divfix {
/* make the block inline */
display: inline-block;
/* reset container's center alignment */
text-align: left;
}
What can I do to make this work? Thanks! Any help is appreciated. =)
~Update To Question~!
Hi! I'm re-writing this just incase it helps someone else. I found out the reason why my code didn't work for you guys. In my original post, I used backtick escapes ( or grave accents ) to highlight my code.
I used backtick escapes on every single line, since using two backtick escapes, one before my code, and one after my code didn't highlight everything at once.
Unfortunately, when my post got edited by someone else, they left one of the backticks in place in my css, and I didn't notice.
Since I got an answer for my question that basically did what I wanted, I accepted it, and forgot about my question.
I've tried to re-create my problem now, with success. This is in hopes of re-opening my question, as I don't think it should have been closed. Especially if it was just an error of the editor.
~1. What was the error then specifically?~
The error was one backtick left in place in my css after editing.
Here is the offending code:
#divfix { /* fixed position a zero-height full width container */'
I'm using an apostrophe in place of a backtick, because a backtick wouldn't display for some reason.
This is what it should have been:
#divfix { /* fixed position a zero-height full width container */
Without any backtick following after container */.
~2. What effect does this have on your code?~
The backtick essentially ignores the next line in your css.
This would be the same as deleting the next line.
The line affected was position: fixed; which made my code unable to be reproduced by others.
Another problem was that I didn't provide my entire document ( I thought it would be too big to display in my question anyways. ) so I just provided the specific code that I wanted to change.
~3. How did you find the error?~
First, I had to replace the code that I was given here as an answer with the original code that I posted here.
Next, I had to find the original css code that I found on another website just to compare it to the code I posted on stack exchange.
At first, I couldn't find any difference between the original code from the website I found, and my code that I posted. The only difference was top: 390; when the original was top: 0;
I played around with spaces , thinking that might fix it, as the code from the website was made with tabbed spaces, and the code that I posted here was only spaces, around 3 or 4 of them.
No dice, nothing worked playing around with spaces.
Next, I found a website called 'diffnow' to compare the two css codes since I couldn't find anything wrong with it myself.
I then found of course top: 390; vs top: 0; but then I found a backtick after container */.
~4. How did you fix the error?~
I deleted the offending backtick character, and my code changed to how it should of been displayed. I lost my original work before adding the new code that was suggested by Paulie_D. So, when implementing my old code that was posted on stack exchange, I also had to change left: 0; to left: 3; to be positioned in the exact same place as before. Not sure why though.
~5. What was the result of the error?~
The result in the error was that position: fixed; was ignored.
What affect did this have?
In my original code, the controls containing 'next.png' and 'last.png'
were centered, and hidden behind the textbox <input> that said page 1 of 3.
I wanted to fix this, which is why I asked the question.
However, unfortunately an editor left in a backtick.
The affect of the backtick was that it seemed to have 'fixed' my code, no longer being able to reproduce the original code or what I was asking about.
Since the backtick ignored my position: fixed;...I read somewhere else that if no position such as 'absolute' or 'fixed' is given, then the default is 'static'. Which isn't what I wanted to show.
This messed up my question, and made it so that I didn't have anything that could be reproduced by anyone.
-- Note that as I was still relatively new to html & css, I didn't know the difference between the different css positions or what they did.
'Position: Fixed' isn't actually what I wanted, as when I resize my window to make it smaller, the html textbox <input> is moved downward, which isn't what I wanted. Also, if I make the html document alot longer, the fixed element will follow the page as you scroll, something I didn't want either.
What I wanted was 'static' or 'relative' but not 'fixed' or 'absolute.'
As well, although it was unrelated to my actual question because it was a previous experience, and didn't apply to my current code or question, I said before that 'the images push the textbox aside so it's no longer centered.'
I don't have the the very early original code anymore that I made before I included any css into it, so I'm not sure what I meant by this, as I'm unable to reproduce this effect. If anyone can make sense of this, and get back to me with what they think I did with the html that does this, that'd be much appreciated. Thanks. ^-^~
~6. Any examples of before and after the backtick?~
Yes, I made a few examples of before and after the backtick that was in the css.
Examples:
Since I need 10 or more reputation to post more than 2 links, I've included the links in a pastebin file link.
This link includes examples of my html & css before the backtick, as well as after. It also includes a preview image.
The link is: http://pastebin.com/ne7B1q6P
~7. Compatibility?~
Please note that to display properly, I use the browser k-meleon. Any other browser you'll simply have to edit just one css/html value yourself.
For example, change top: 390; to top: 414; to display correctly in firefox. At least that's the number for my firefox, it might be different for yours.
For different resolutions, you may add/remove breaks <br> to my code.
That's all I had to do for my code to be displayed properly on a different resolutions anyways.
I've included 'width x 720 resolution' as a test resolution in my link, as well as 'width x 768 resolution' which is currently my default resolution on my system.
Thanks for reading! I hope that you understand my question more clearly now. ^_^
You have some structural errors in that you were closing the div too soon.
Also, the <center> tag has been deprecated and should no longer be used.
#divfix {
/* fixed position a zero-height full width container */
position: fixed;
top: 390;
left: 0;
right: 0;
background: lightblue;
/* center all inline content */
text-align: center;
}
.input {
display: inline-block;
position: relative;
}
.controls {
position: absolute;
top: 0;
left: 100%;
width: auto;
white-space: nowrap;
}<div id="divfix">
<div class="input">page
<input size="3" id="uid" value="1">of 3  
<div class="controls">
<img class="imiddle" title="next" alt="next" src="http://lorempixel.com/output/abstract-h-c-13-26-7.jpg" hspace="0" height="13" border="0" width="26">  
<img class="imiddle" title="last" alt="last" src="http://lorempixel.com/output/abstract-h-c-13-26-7.jpg" hspace="0" height="13" border="0" width="26">
</div>
</div>
</div>