Deviation Actions

kuschelirmel-stock's avatar

CSS: Absolute Positioning

I know I've been promising a follow up on
Journal CSS Part 1 and
Journal CSS Part 2
for like ever ^^;

I'm sorry you had to wait, but here it is... at least a first step ;)

For more CSS resources, check the artist's comments under the two first tutorials.

If you need some CSS code to play with, feel free to raid my gallery :aww:
Image details
Image size
830x2263px 533.63 KB
© 2007 - 2021 kuschelirmel-stock
Join the community to add your comment. Already a deviant? Log In
Layton224's avatar
thank you... this should help out greatly
kuschelirmel-stock's avatar
it may just be a little out of date by now ^^;
Layton224's avatar
Trying teach myself... Just started trying to rework my portfolio and it seem this is a very usefull skill, could you point me in the right direction...
myah5000's avatar
Thanks! This is going to help a lot with the journal I'm designing now!
deadlyMETAL's avatar
Thank you!! Taught me a good lot of CSS good! :D
flutist's avatar
thanks for the explanation
Helen-Baq's avatar
Hurry up with part 3!!! :shakefist:

I find these very helpful. :hug:
kuschelirmel-stock's avatar
this kinda is part 3 ;P

is there anything else I should mayhaps do a css tut about?
Helen-Baq's avatar
I could use a tutorial on how to make a journal with a scrollbar, rather than one that gets longer and longer, while keeping everything else how it should be, like replaced journal icon and such... :paranoid:

I find your tutorials very useful and easy to understand. :hug:
kuschelirmel-stock's avatar
:nod: I'll try to remember this for the next tut!
Elitha's avatar
I have the exact same problem as :iconrib-bit: I'm trying to use position absolute, and it's turning out very weird. The side menu covers up a part of the header, footer, and the journal and I really don't know how to fix it:cries:
Any tips?
kuschelirmel-stock's avatar
you have to push it downwards with the top:??px attribute - then you need to give the journaltext a padding on the left (or right - wherever you positioned your div) that will push the text from the journal out from under the div.
as for the length: if the stuff inside the absolute div gets too long it will always flow over the footer - you need to either make whatever is inside shorter or the journal itself longer so it will stretch more. A trick to get "at least a ??px long journal" so the navi will fit can be achieved in firefox only: give the .journaltext the attribute min-height:??px;
I hope this helps
Elitha's avatar
Thanks so much! I actually figured it out already -- I just gave the text a bigger padding on the right and it worked like a charm!
Many thanks for your beyond awesome tutorials (I'd still have no idea what a div is if it wasn't for you!:glomp:)
kuschelirmel-stock's avatar
:hug: you're most welcome - glad it does help :aww:
Elitha's avatar
Never mind:) I figured it out!:dance: Thanks so much for your beyond awesome tutorials!:glomp:
riB-Bit's avatar
how can i make that the text doesnt go behind the ".navi" ?
so that it can be read?
randthuntley's avatar
Thank you so much:hug:
kuschelirmel-stock's avatar
Whosthatrandom's avatar
Why not make a tut explaining how to center something using absolute positioning?


left: 50%;
margin-left: -[half of width of object]px;
kuschelirmel-stock's avatar
why don't you make one ;)
GreyMoccasin's avatar
Bless you... Appreciate this immensely.
kuschelirmel-stock's avatar
Join the community to add your comment. Already a deviant? Log In