I am new to CSS and I am having a problem with a border. I have a header with a border below it. I also have some text that is later added in with javascript.
The problem is, when the javascript text appears, it extends past the end of the header. This causes the border to extend as well.
Is there anything I can do to prevent this?
inside the CSS of your header, add these CSS definition:
overflow: hidden;
line-height: 32px;
height: 32px;
The height is only here to ensure the header height won't move, and the overflow will clip all content to the dimension of the header box. The line-height will cause the content to be centered vertically
[...] "This causes the border to extend as well.
Is there anything I can do to prevent this?"
Well, if the problem (as you explain it above) strictly only has to do with the border being to long, you should make a border with another element. Fx by placing a <hr> in the bottom of the header with this CSS:
hr.border
{
position: absolute;
bottom: 0;
left: 0;
}
And then of course removing the bottom border from the header.
Related
Here is my emoji one fiddle.
https://jsfiddle.net/L8a9zazh/
How do i resize the emojis and make it align in center with text and make it look neat.
Css:
img.emojione {
// Override any img styles to ensure Emojis are displayed inline
margin: 0px !important;
display: inline !important;
}
Your content should always be placed within HTML tags that give context to what structural component you're trying to build. In the fiddle example below, we encapsulate the emoji inside a span tag which in turn is wrapped in a p tag for the wording content. By doing this, we can target specific CSS on the emoji content to vertical align within the p tag without having to deal with line-height. The font-size CSS property can control unicode characters and font-face content.
Update 1
I see now that you're trying to convert the chars to an image; your jsfiddle was broken because it wasn't using the jquery framework and you don't have to declare onLoad; instead this should all be set in the js settings window pane.
Update 2: updated jsfiddle
Example
https://jsfiddle.net/L8a9zazh/15/
HTML
<br><br>
<p>Hello world I'm buzz 😠</p>
<br><br>
<p id="wrong-test">Hello world I'm buzz <span class="emoji">😠</span></p>
CSS
img.emojione {
// Override any img styles to ensure Emojis are displayed inline
margin: 0px !important;
display: inline !important;
height: auto;
width: 50px;
}
p#wrong-test {
border-top: 1px solid black;
border-bottom: 1px solid black;
display: inline-block;
}
span.emoji {
font-size: 30px;
vertical-align: middle;
line-height: 2;
}
What it sounds like you want would be expressed by the following: vertically centered at a point half the x height of the font above the baseline. For that you need to address line-height.
Your text and inline images will never align vertically if the image size exceeds the line-height of the font. You need to make the line-height of the font to be at least equal to the image height.
Experiment with different line-heights and see where the images line up. If you get a good fit, you're done. If you still can't find get there, get yourself close and then give the image a pixel or two of margin or padding top or bottom where appropriate.
You can wrap your emoji in a container element (such as a <div> or a <span> and style that element, such as:
<div style="font-size:5rem;width:100%;text-align:center;">😠</div>
I did this for your jsFiddle, here:
jsFiddle Demo
I have the following:
<div id="container">
<img src="pic.png">
</div>
This is styled as follows:
#container {
height: 50px;
width: 50px;
}
In addition to this, I have some javascript hackery to cause the image to appear dead center in the containing div by setting margin-top and margin-left.
When I look at this in the Chrome web inspector, it's clear that the containing div does not start at the top of its parent. I suspect the image is being positioned relative to the container div's parent.
The trouble with this is that I want the container div to be a target for click events, such as dragging. The div only starts at the top of the image, when I want it to start above the image, and include the margin space as a part of the container. Any advice?
#plalx is right your using the wrong selector you should just do this:
#container{
width: 50px;
height: 50px;
padding: 5px;
}
padding is what your looking for with making the div bigger then the image for click. margin determines place on the page, padding determines space on the page beyond your height and width attributes.
See http://jsfiddle.net/VRJUc/. If you open the element inspector (chrome) and look at the actual size of the div you will see that it is actually 60x60 because I have added 5px of padding to each side.
When I use overflow:hidden on a container div with an image slider inside, it hides the overflowing content perfectly, but creates a white border of about 50px wide on the right side.
I want the images to extend all the way to the edge of the page, or as close as possible.
Is it possible to make the 'border' that overflow:hidden creates transparent, or make it narrower?
Hmm.. Animuson is right. Overflow: hidden; doesn't add any border. If the images is a link, then it might have borders (but the default color isn't white).
But yeah, please add some source code for it. Without knowing the complete scenario, then something like this could possibly help you out:
HTML:
<div id="section1">
<img alt="foobar" src="the_URL" />
</div>
CSS:
#section1 {overflow: hidden; width: 100px; display: block; }
#section1 img {width: 100px; border: none; outline: none; display: block;}
not tested...
Let me know if it helps or not. If it doens't, then please elaborate.
It turns out that the way to fix this problem was to:
Set the outer container to width:100%,
Set the inner container to 60px more than total page width, and overflow:hidden
This reduced the 'border' (right margin whitespace) to any px width I set, as per the width of the inner container.
Code: http://www.benphilippi.com
In my intro page I have a really big image in height and width to fit all the resolutions (more than 4000px in width) and I set it as below:
#source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Then, I added some text over that image with these style properties:
.description {
position:absolute;
top:510px;
left:23px;
width:340px
}
And it looks properly (and as I want it to be shown) on my 15.6 inch laptop with 1366x768 resolution.
However when my roommate saw it on his high resolution monitor the description was not on the “right” position. Of course, I understand why this is happening.
My question is how can I keep dynamically the proper position of the description text in all resolutions?
Thank you very much.
Set the distance from the bottom, not from the top. Or set it in %.
EDIT: I've adapted one of my experiments into an example: http://dabblet.com/gist/2787061
The position of the description is set relative to the bottom and the left of the image container (the image is filling its entire container).
In the first case, the distances to the left and the bottom of the image container are fixed, in px.
In the second case, they are in % and change on resizing the browser window.
Basically, the rules that do the trick are
figcaption {
bottom: 5px;
left: 23px;
/* more rules here */
}
in the fist case (fixed distances, in px) and
figcaption.perc {
left: 10%;
bottom: 17%;
}
in the second case (percentage).
Also, please note that you don't need position: absolute or to set the top and the left properties for the image.
However, you do need to set position:relative on the parent of the description box.
For the image to fill the screen horizontally, you need to have margin:0; and padding:0; on the body element and width: 100%; and margin: 0; on the figure element. I've edited my example to reflect these changes http://dabblet.com/gist/2787061
For the image to fill the screen both horizontally and vertically, the easiest way is to not even use an img tag, but simply set the image as a background image for the body and set the height for both the html and the body elements to 100% - example http://dabblet.com/gist/2792929
Be careful for two reasons: one, this will really distort the image and can make it look ugly when resizing the browser window and two, if you need some content below the image you will need to give the the outer element position: absolute and set its top: 100%. Both these two aspects can be seen in the example I've linked to. You can simply remove the content below the image if you don't need it.
use position:relative; for the div that wraps the image, and position:absolute; for the text div
please set percentage
check the example- description box set in horizontal center,
first set position relative into wraper div
.description {
position:absolute;
top:510px;
left:50%;
width:340px;
margin:0 0 0 -170px
}
I am wondering if it is possible to have a scrollbar inside and on top of the DIV as oppose to next to it? I am developing a chrome extension where I have a DIV that contains information on the far right side of the page. When the DIV exceeds the height of the page, a scrollbar appears next to this DIV as oppose to inside and on top of the DIV. In addition, I am wondering if it is possible to get the scrollbar to fade when the user does not hover over it?
I have modified the appearance of the scrollbar by using -webkit in the css. Here is a snippet of what I have done:
#sidebar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
#sidebar::-webkit-scrollbar-track-piece {
background-color: #f3f3f3;
-webkit-border-radius: 0px;
}
#sidebar::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #ccc;
-webkit-border-radius: 0px;
}
As far as having the "inner" scrollbar, you can make the illusion of this by wrapping the DIV with another DIV of equal height and with the desired permanent width. Then set the inner DIV to 100% width, and it will adjust as the scrollbar appears. As far as the fade, I don't believe the scrollbar is part of the DOM, so Javascript is out, but you may be able to use the animate property in CSS http://fvsch.com/code/transition-fade/test1.html