I'm writing a Javascript tool (not browser add-on) to highlight keywords in various colours automatically on page-load, and am having problems creating a "highlight bar" beside the page's scrollbar to show where each result is.
My resulting HTML code looks like this so far:
<div class="highlight-bar" style="position: fixed; top: 0px; bottom: 0px; right: 0px; width: 8px; border-left: 1px solid black; background-color: grey;">
<div class="highlight-tick" style="width: 100%; height: 2px; top: 40%; left: 0px;" />
<div class="highlight-tick" style="width: 100%; height: 2px; top: 55%; left: 0px;" />
</div>
Note that I'm generating the style data at run-time and don't have any CSS rules that affect these elements. And yes, I've checked three times.
Right now, the "ticks" aren't even showing up, and are instead hanging out at the top of their container.
And yes, I have tried to find an answer on here already, but none of them seem to cover this case in a way that allows the container to scale with the browser window.
Add a position: absolute; to .highlight-tick
I added a background-color and made the tick thicker for viewing purposes.
<div class="highlight-bar" style="position: fixed; top: 0px; bottom: 0px; right: 0px; width: 8px; border-left: 1px solid black; background-color: grey;">
<div class="highlight-tick" style="position: absolute; width: 100%; height: 10px; top: 40%; left: 0px;background: blue;" />
<div class="highlight-tick" style="position: absolute; width: 100%; height: 10px; top: 55%; left: 0px;background: red;" />
</div>
Related
I'm making a search bar for my website. I have an input tag and when you type inside it the results come up in small blocks. The results come up fine, but for some reason I can't work out why the styling for my input bar isn't working. I can't adjust the size or position of the bar. Or anything, basically. Here's the related code:
.searchbar{
border: 1px solid black;
width: 100%;
height: 24px;
display: block;
margin: 0px;
padding: 5px;
left: 50%;
}
#search_cont{
left: 37.5%;
position: absolute;
}
#whatIWant{
position: absolute;
top: 10%;
left: 37.5%;
height: 24px;
width: 15%;
border: 1px solid black;
}
<div id='search_cont'><input type='text' ng-model='searchbar' class='.searchbar' placeholder='Search'></div>
<div id='whatIWant'>What I want</div>
Here's the full thing in a fiddle: https://jsfiddle.net/Tobsta/ykmp7bed/
-Name of class should be without . (dot)
-Your search bar is inside this division. Apply width to this division like this. And then you can apply width on search bar and style it.
#search_cont{
position: absolute;
width:100%;
}
Hope you have this problem. You can style your search bar now by giving margin, height and width to .searchbar.
Class name is specified by without dot.
It not class='.searchbar' it be class='searchbar'.
See: https://jsfiddle.net/tamilcselvan/obz4tc65/
.searchbar {
border: 1px solid black;
width: 100%;
height: 24px;
display: block;
margin: 0px;
padding: 5px;
left: 50%;
}
#search_cont {
left: 37.5%;
position: absolute;
}
#whatIWant {
position: absolute;
top: 10%;
left: 37.5%;
height: 24px;
width: 15%;
border: 1px solid black;
}
<div id='search_cont'>
<input type='text' ng-model='searchbar' class='searchbar' placeholder='Search'>
</div>
<div id='whatIWant'>What I want</div>
You just entered a dot in your class field.
You should use class='searchbar'
<input type='text' ng-model='searchbar' class='searchbar' placeholder='Search'>
Take a look a this sample HTML (a dumbed-down version of my project):
<!DOCTYPE html>
<html>
<head>
<style>
.pagewrapper {
width: 960px;
height: 768px;
margin: auto;
border: 1px solid green;
border-radius: 3px 3px 3px 3px;
box-shadow: 2px 2px 2px 2px rgb(0, 153, 51);
}
.pagewrapperImg {
background: url("http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg");
background-size: 100% 100%;
}
</style>
</head>
<body style="overflow: scroll;">
<div style="right: 0px; bottom: 0px; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;">
<div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<div class="pagewrapper pagewrapperImg" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
</div>
</div>
</div>
</body>
</html>
This is suppose to produce a centered div with a background image. When the window is resized, it should overflow with scrollbars. This works fine on Firefox, but on IE and chrome, it clips the top of the div, as shown in the image.
Why is this happening, and how can I fix this?
EDIT: Let me point out that in the full project, there are UI elements in this div, and they get clipped too (it's not just the image)
in .pagewrapperImg add
background-position:center center;
and please please please....dont use inline styles!!
fiddle demo
I'm trying to test a simple little border style I made using <hr> html tags. It consists of vertical and horizontal lines. The vertical lines display perfectly but the horizontal lines have a tiny strange curve at the end, I'm not sure why it's happening. Does somebody know the problem?
here is my code:
<div style="width:680px; height:540px; position: relative;">
<hr style="height: 23%; width: 0.01em; position: absolute; left: 35.3%; top: 5.5%;">
<hr style="height: 18%; width: 0.01em; position: absolute; left: 35.3%; top: 40.5%;">
<hr style="height: 20%; width: 0.01em; position: absolute; left: 35.3%; top: 70.5%;">
<hr style="height: 23%; width: 0.01em; position: absolute; left: 65.9%; top: 5.5%;">
<hr style="height: 18%; width: 0.01em; position: absolute; left: 65.9%; top: 40.5%;">
<hr style="height: 20%; width: 0.01em; position: absolute; left: 65.9%; top: 70.5%;">
<hr style="width: 22%; height: 0.01em; position: absolute; left: 7.7%; top: 34.5%;">
<hr style="width: 19%; height: 0.01em; position: absolute; left: 41.2%; top: 34.5%;">
<hr style="width: 21%; height: 0.01em; position: absolute; left: 71.8%; top: 34.5%;">
<hr style="width: 22%; height: 0.01em; position: absolute; left: 7.7%; top: 64.5%;">
<hr style="width: 19%; height: 0.01em; position: absolute; left: 41.2%; top: 64.5%;">
<hr style="width: 21%; height: 0.01em; position: absolute; left: 71.8%; top: 64.5%;">
</div>
here is a jsfiddle link:
http://jsfiddle.net/Qc22p/
So they do. I suspect it may be a CSS "border style" or something which is intended to render as a 3D effect... grooved, ridged or somesuch.
See: http://www.w3schools.com/cssref/pr_border-style.asp
Yep, adding border-style:solid; fixed it.
You may be able to find a prettier border-style.
That's because you're seeing the border. Get rid of the 3D border and set a border-top for your horizontal lines and border-left for your vertical lines (e.g. 1px solid black).
Are you saying about the 3d style? It's the browser default styling for hr element, to apply yours, you can reset the default style using border: 0; or you can alter it by using border: 1px solid #000 and you can set color accordingly
Demo
I need to center some absolute positioned elements relative to a container. After reading numerous articles, it seems a structure like following will do the job. The only problem is with IE7. Somehow the width of item1 (div element) shrinks to 0 (even though width is explicitly specified on it) on IE7. item2 works fine in all browsers. My question is why the width style for block element is not honored by IE7 in this situation? Do you know any workaround or fix?
<div style="position: relative; width: 500px; height: 400px; border: thin dotted green;">
<div style="position: absolute; top: 0px; left: 50%; height: 0px;">
<div id="item1" style="position: relative; display: inline-block; left: -50%; border: thin dotted green; width: 300px; height: 30px;"></div>
</div>
<div style="position: absolute; top: 50px; left: 50%; height: 0px;">
<input id="item2" type="button" value="Button" style="position: relative; display: inline-block; left: -50%;">
</div>
</div>
I've made a jsfiddle with above code. Thanks for your input.
Add min-width=300px; so the line of code looks like
<div style="position: relative; display: inline-block; left: -50%; border: thin dotted green; width: 300px;min-width:300px; height: 30px;"></div>
I have next markup:
<div id="lefttop"></div>
<div id="leftbottom"></div>
<div id="central"></div>
I need markup as shown on the picture below:
alt text http://img36.imageshack.us/img36/9894/makeupi.png
#lefttop, #leftbottom {float:left;width:200px;}
#leftbottom {clear:left;}
#central {margin-left:200px;float:right;width: the-width-you-need px}
Come to think of it, width:auto might be the best choice for #central
*edit sorry for all the typos earlier
Can you put #lefttop and #leftbottom together in one div? Like
<div id="left-container">
<div id="lefttop"></div>
<div id="leftbottom"></div>
</div>
That way it's easier to get them both on the left.
This may actually work slightly better for you, as all three divs will scale/shift to match the browser window.
#lefttop {
position: absolute;
top: 10px;
left: 10px;
bottom: 50%;
width: 200px;
margin-bottom: 5px;
}
#leftbottom {
position: absolute;
top: 50%;
left: 10px;
bottom: 10px;
width: 200px;
margin-top: 5px;
}
#central {
position: absolute;
top: 10px;
left: 220px;
bottom: 10px;
right: 10px;
overflow: auto;
}