add box top page

[larysa]

hi, i want add one color box to top of my page (only one page)
like this site: https://www.neowin.net/news/cat/software
(the blue box at the top). how to?

[theducks]

That is not a box, but some sort of script (I am not a WEB dev)

This is really a EPUB coding question.
(PM me and I can move this thread to EPUB)
You need to use HTML/CSS box model

If it is a 1 liner
Simply
Set some padding for the P tag
This leaves some blank space around the text; Set the background-color: blue; Set the (text) color: white (black on blue has terrible contrast )

[larysa]

move to epub? this it is not editor section? and therefore it seems to me the correct one!
anyway i've find this solution:
<div style="height: 40px; background-color: #C1C3C3"></div>

but please, write one example with your explicit code....

[theducks]

Originally Posted by larysa

move to epub? this it is not editor section? and therefore it seems to me the correct one!
anyway i've find this solution:
<div style="height: 40px; background-color: #C1C3C3"></div>

but please, write one example with your explicit code....

This IS the Calibre editor section. It is about using the Editor functionally, not Coding in general.

XHTML

<div class="blubox">
<p class= "boxtext"> text here</p>
<p class= "boxtext"> more text here</p>
</div>

CSS

.blubox { margin: 1em 2em; padding: 20px; background-color:"C1C3C3"}
.boxtext { margin: .5em 0; color: white; }

The box height sizes to contain the contents + the padding.
I put some side margin on the box so it does not touch the page edges

[larysa]

oh sorry! i've understand.
and for your example (tanxs!) but if don't want use css but only code into my html page how to?

[DNSB]

Originally Posted by larysa

oh sorry! i've understand.
and for your example (tanxs!) but if don't want use css but only code into my html page how to?

You could add that code as inline styles but why for the love of whatever deities you might happen to believe in, would you want to?

[larysa]

because it's only on one page. and for reasons that I am not here to explain maybe I need to extract that page that must be formatted in a certain way, without having a separate css (in case I only needed that single page).

[larysa]

i have convert theducks suggestion into my simple html:
<div style="margin: 1em 2em; padding: 20px; background-color:C1C3C3">
<p style= "margin: 0.5em 0; color: red">text here</p>
</div>

but.... 1) i don't want any text, only simple color box only only for an aesthetic factor, then <p>text</p> it is not necessary.
2) no box appears! it's better my solution at post#3...

[theducks]

Originally Posted by larysa

i have convert theducks suggestion into my simple html:
<div style="margin: 1em 2em; padding: 20px; background-color:C1C3C3">
<p style= "margin: 0.5em 0; color: red">text here</p>
</div>

but.... 1) i don't want any text, only simple color box only only for an aesthetic factor, then <p>text</p> it is not necessary.
2) no box appears! it's better my solution at post#3...

make a NBSP your text or simply make the text color: c1c3c3

You want a fat (20px), c1c3c3m HR

[larysa]

i want box at top like https://www.neowin.net/news/cat/software
adhering to the edges of the page, and under my normal text (title).
just a box at the top of the page, only for an aesthetic factor

[larysa]

ok, solve. i have used this:

<div style="position:absolute; top: 0; left: 0; right: 0; height: 50px; background-color: #C1C3C3"></div>