I just thought about upgrading my existing website with a gallery in the header. The header contains a logo that has been positioned with a table-tablecell container to make sure that it aligns perfectly.
But I don’t want the logo to go with the slider so I thought that setting display: absolute will fix the position of the logo to the page. So that the slides move behind the logo. But somehow the logo still positions itself under the slider as a separate unit.
Existing website: www.phermann.tk
Existing website with logo that displays beneath the slider not on top of it: www.phermann.bplaced.net/new
For remaining questions don’t hesitate to ask.
Thanks!
As nice as it would be, CSS doesn’t allow us to invent our own values like that. There is no such thing as display: absolute; (It’s always good to check these things to be sure.)
You may be looking for position: absolute, which fixes the position of an element in relation to others, or position: fixed, which positions an element in relation to the viewport.
Thanks for the quick help!
Epic Fail anyway . I replaced the display: absolute with the position: absolute. But now the circle shows up beneath the slider without aligning.
Updated the website.
EDIT: I know took away some unnecessary wrapper divs. The circle now displays in the slider, but the outerContainer is not doing the margin: 0 auto;
That’s because the margin:0 auto doesn’t work on position:absolute elements. If you really want to still go the route of position:absolute, then you can add the following to .outerContainer
.outerContainer
{
left:50%;/*place at the 50% mark*/
margin-left:-25%;/*half hte width of the element*/
}
The declaration things have always been bugging to me.
I should put the Doctype in the first line, right?
I put the code into the outerContainer css but now the slider shrinks to a few pixels of height and the white circle has the white background of the head div.
Although the text editor I am using does not recognize the doctype thing as code. Anyway its a web 3.0 editor, we still have to be versatile to older browsers. I changed the head code on the /new site. The problem with the slider still exists though
Well that doctype you used is HTML5 so I doubt your editor was made when the doctype came into existence.
On #head you set min-height:100% but taht’s not the same as actually giving the element a height. Give it height:100%; Now the slider position is messed up still - that’s because you haven’t set an x and y axis coordinate. So the browser guesses. It guesses you want it under since it’s later in the source. Give the .outerContainer top:0;
Thanks again. I thought that the min-height is necessary for the #head to adjust to the height of the browser window. But so does the min-height in the .outerContainer.
Now the last thing I have to find out is how to change the transition effect of the slider to a simple fade instead of the visible switching.
You’d have to now delve into Javascript. Here seems to be a nice demo. I’d replace your JS with this and adapt accordingly. If you have questions, please head on over to the Javascript section. They are knowledgeable and helpful
(It’s always good to check these things to be sure.)
. I replaced the display: absolute with the position: absolute. But now the circle shows up beneath the slider without aligning.
