What is the best way to add line with information (like stackoverflow) to any site?
Question
I'm developing Chrome plugin. I would like to implement its interface as line with content that will be displayed before site content starts (similar to stackoverflow information bar). I'm not good at HTML and CSS.
1. How can I implement it to work correclty at any site?
2. What HTML code is best to use to make rectangle that will be correctly displayed at top of any site?
2 answers
solution1
1 2011-11-30 16:45:40
1- Make sure the HTML you inject is right after the Body Tag.
2- With CSS, put it Width 100%; position: fixed (it is always on the top of the browser) or position: absolute (always on the top of page); top:0; z-index: 999 (its always on top) (Some minor adjustments might be to do, Its off the top of my head)
3- Aim for the first element after your bar (should be a container) and apply it a margin-top of the height of your added element.
Should create a bar on top where you can put any thing you want.
solution2
0 2011-11-30 16:48:30
The simplest way to do it is to just add a <div> to the beginning of the body:
<!-- old -->
<body>
<div id="header">
<h1>Hello, world!</h1>
<!-- ... -->
<!-- new -->
<body>
<div>Your content goes here.</div>
<div id="header">
<h1>Hello, world!</h1>
<!-- ... -->
Because the <div> is a block-level element, it should stretch across the screen by default, and then you can style it however you like.
However, there are two basic problems:
- The site's CSS interferes with your bar. This could show up in the form of styles that you make sure you declare, so that your bar doesn't look funny. Or it could mean that some elements on the page were positioned absolutely, and you adding the bar breaks the layout.
- The site's JS interferes with your bar. If the site itself dynamically adds elements to the beginning of the
<body>, then your bar will be pushed down the page. What if the JS selects all the<div>s on the page, and fades them out?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.