03-11-2020, 09:51 AM | #1 |
Zealot
Posts: 117
Karma: 10
Join Date: Feb 2016
Device: iPad mini 4
|
add box top page
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? |
03-11-2020, 12:41 PM | #2 |
Well trained by Cats
Posts: 29,804
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
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 ) |
Advert | |
|
03-11-2020, 01:21 PM | #3 |
Zealot
Posts: 117
Karma: 10
Join Date: Feb 2016
Device: iPad mini 4
|
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.... |
03-11-2020, 01:49 PM | #4 | |
Well trained by Cats
Posts: 29,804
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
XHTML Code:
<div class="blubox"> <p class= "boxtext"> text here</p> <p class= "boxtext"> more text here</p> </div> Code:
.blubox { margin: 1em 2em; padding: 20px; background-color:"C1C3C3"} .boxtext { margin: .5em 0; color: white; } I put some side margin on the box so it does not touch the page edges |
|
03-11-2020, 03:21 PM | #5 |
Zealot
Posts: 117
Karma: 10
Join Date: Feb 2016
Device: iPad mini 4
|
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? |
Advert | |
|
03-12-2020, 12:19 AM | #6 |
Bibliophagist
Posts: 35,428
Karma: 145525534
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Forma, Clara HD, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
|
03-12-2020, 03:27 AM | #7 |
Zealot
Posts: 117
Karma: 10
Join Date: Feb 2016
Device: iPad mini 4
|
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).
|
03-12-2020, 03:57 AM | #8 |
Zealot
Posts: 117
Karma: 10
Join Date: Feb 2016
Device: iPad mini 4
|
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... |
03-12-2020, 09:10 AM | #9 | |
Well trained by Cats
Posts: 29,804
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
You want a fat (20px), c1c3c3m HR Last edited by theducks; 03-12-2020 at 09:12 AM. |
|
03-12-2020, 09:17 AM | #10 |
Zealot
Posts: 117
Karma: 10
Join Date: Feb 2016
Device: iPad mini 4
|
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 |
03-12-2020, 12:41 PM | #11 |
Zealot
Posts: 117
Karma: 10
Join Date: Feb 2016
Device: iPad mini 4
|
ok, solve. i have used this:
<div style="position:absolute; top: 0; left: 0; right: 0; height: 50px; background-color: #C1C3C3"></div> Last edited by larysa; 03-12-2020 at 03:11 PM. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Hacks Is it possible to add top/bottom margin in Kindle Paperwhite 4th gen? | Godkiller | Amazon Kindle | 2 | 07-11-2019 09:31 AM |
Visual Cue in Add Semantics dialogue box? | BKh | Sigil | 53 | 07-06-2019 12:20 AM |
control div box, page breaks and margins? | Lancelot | ePub | 4 | 09-21-2013 04:38 PM |
The 'Add' Dialog box spanning the whole screen? | ne0b0rn | Calibre | 10 | 01-16-2012 09:43 PM |