• Copyright Position issues
    2 replies, posted
Hello, I am having trouble make the copy right stay in the correct place upon browser resize. I have got a textbox with a border and background and then I want the copyright to go underneath the text box border and make it stay there u [CODE]<p style="border-style:solid; border-color:#a97b00;color:#a97b00; padding:5%;position:absolute; top:75%; left:15%; width:60%; background: rgba(0, 0, 0, .5);"> <font face="arial" size="4" color="#a97b00">TextBox with background. </font></p>. <div style="color:#a97b00;font-family:'Noto Sans',sans-serif;text-align:center;padding-bottom:1%;padding-top:100%;width:100%"> <p><b>© Copyright</b></p> </div>[/CODE] Can anyone tell me where im going wrong or how to make it stick the the bottom of that text box? thanks
First off, div and p are both block level elements so you only need one, I recommend div in this case. Please don't put any CSS inline, make a .css for your page. This may seem silly but it's standard practice and you'll thank yourself in the future for starting the practice now. Your font face element id change with a span, assign it a class to add your style. Again just good practice. On to your real question. Idk what the rest of your document looks like but I would remove the text-align and set margin:auto. This will essentially center your div in huge page instead of centering your text in the div.
You can have a look at this: [url]https://jthorne.co.uk/projects/nuance[/url] The sticky footer in this theme was inspired by Ryan Fait's implementation of the sticky footer. The footer is nothing more than a simple footer tag that is full width. Inside like other page elements, I have created a div with the width and wrapper classes. [code] <footer> <div class="page-width wrapper">© James Thorne</div> </footer> [/code] The magic happens in the CSS. To make a footer appear 80px high that sticks to the bottom of the page when there is no content and sits at the bottom of content that is any longer, I've had to edit the bottom margin of the content div. This way I can do without the pushdown div that Ryan uses. Ta da! [code] .content { margin: -80px auto -82px;} footer {height:80px; background-color:#dce1e4; position:relative; z-index:1; [/code] Full article: [url]https://jthorne.co.uk/blog/software-engineering/htmlcss/css-nuances-fluid-columns-and-sticky-footer[/url]
Sorry, you need to Log In to post a reply to this thread.