Thu, 2021-03-11 04:20
Hello, and good morning (it's 04:45 here in Norway). Thank you for the membership.
Here is my first question.
I have a litle problem with a DIV box controlled with CSS. I want the DIV box and the text within it be centered.
The text wirhin it is OK and centered, but the DIV box wont center no matter what i do. Can any of you guys see what's wrong?
This is the CSS for it:
background-color: #ffcc99;
margin: auto;
height: 50px;
width: 50%;
position: fixed;
bottom: 5px;
font-weight: normal;
font-size: 8;
text-align: center;
I would also like to add that I want this DIV box to remain centered at the bottom and remain there, centered.
I can also add to the case that I have two other DIV boxes centered over this one. There is a DIV box for logo, and a
DIV box for news updates. These two behave exemplary exactly as I wish. It only applies to the DIV box I have at the bottom.
I have seen me blind on this problem. Can you help me?
--
Leon
Thu, 2021-03-11 11:57
#1
Hi Leon, thanks for
Hi Leon, thanks for posting.
Can you please post your entire HTML and CSS code please? A snippet of CSS with no context makes it impossible to help diagnose your issue.
Cheers!
Fri, 2021-03-12 03:47
#2
Cheers mate. Of course I can
Cheers mate. Of course I can send you the whole coding and scripting files.
After checking this out a little further i found ot some more.
After studying this a bit more, it seems that there is a fixed and non-movable margin that blocks further placement to the left of the screen. This applies not only to the one box that I mentioned first, but to all three boxes. If the boxes become too wide, they will only move / extend beyond the right margin while they have the same position on the left side a little over a third towards the center of the screen where they lie against a fixed left margin. I want all the boxes equally centered no matter the width they have, and not meet on any margin on either the right or left side. Do you understand, "thepineapplehead"? Study the files I send you and you will understand. I'm completely stuck.
| Attachment | Size |
|---|---|
| HTML_CSS.txt | 1.65 KB |
Wed, 2021-03-17 00:21
#3
body.base { display:
body.base { display: flex; justify-content: center; background-color: #cc9966; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }
Is that what you were asking?
Also, may I caution you against divitis? Make your markup semantic instead.
Wed, 2021-03-17 13:41
#4
Hi, apologies for not
Hi, apologies for not replying sooner. The code you've posted seems to do what you're expecting, what issues are you having? What is it doing, or rather not doing, for you?
Wed, 2021-03-17 13:45
#5
Verschwindende wrote: Also,
Also, may I caution you against divitis? Make your markup semantic instead.
That is certainly a blast from the past! 15 years on and now we have even more semantic elements to mark up our HTML with. Shame I don't have rights to update that topic.
Fri, 2021-03-19 11:09
#6
You could always make a Part
You could always make a Part 2. DIVitis still exists. The vaccine is semantic markup.