Image Produces top border line - html

I have a li tag that when it's hovered over with the mouse the background image url is set to a dark brown arrow as seen in this image below.
As you can see, a black line is produced on the top right of the image. I have no idea how this is produced and I want the dark line removed. How do I fix it?
The CSS:
#topcol1navtall ul.contactsleftnav li.dash.selected {
background:#7c6a54 image-url('contact-arrow-nav.png') right no-repeat;
border-bottom: 2px dotted #f17ca6;
margin-top: 5px; padding-top: 8px;
}
The HTML:
<li class="contact">
<div class="text">
<span class="name">
<!-- / Dynamically loads edit form into right column -->
asdf, Billy 3
</span>
</div>
</li>

That line isn't black. It's the same color as your background, #7c6a54. Your image is either transparent in the first row of pixels, or it's one pixel too short and somehow anchored to the bottom of the containing li.
I would guess it's probably the latter. Your li is one pixel taller than the background image you're using. I would recommend making your background image taller than you need it be and then explicitly anchoring it either to the top or bottom of the containing element like so:
background: #7c6a54 image-url(your-url) right top no-repeat;. Then make the background image taller by a few pixels. Make sure the bottom angle doesn't suddenly turn into a vertical line or else you'll have a weird one-pixel bump there. Actually continue the angle so that you retain a smooth line on that end.
The other option is to explicitly declare the height of the li (making adjustments for your padding), but then you run into trouble if someone's browser renders text larger than you expect it to. If you're going to explicitly declare the height of the li, you should also explicitly declare the font-size and line-height of the text in the li (or they should inherit that from a parent element, but don't leave it to chance).

Related

Why is the background of my box not shown?

I am at a loss at the current problem. I wanted to position three boxes with HTML/CSS, two at the left, one at the right. To mark the area of the boxes, I have chosen three different backgrounds: red, green, and blue. Everything works, but the blue background is not shown. I think I must have made a really stupid mistake, but I can't find it.
Here is the HTML:
.boxupperleft {
float: left;
width: 50%;
height: 100px;
background: red;
}
.boxright {
float: right;
width: 50%;
height: 200px;
background: green;
}
.boxlowerleft {
width: 50%;
height: 100px;
background: blue;
}
<div class='boxupperleft'>
<p>Text1</p>
</div>
<div class='boxright'>
<p>Text3</p>
</div>
<div class='boxlowerleft'>
<p>Text2</p>
</div>
Bonus points for explaining why Text1 and Text3 are not at the top of the box, but Text2 is.
Edit: I just found out that the background is there when I add "float: left" to the definition of "boxlowerleft", but this still doesn't make sense to me. Why does the background need a float?
#Temani Afif made a comment with very useful links to explain float behavior (this and this). There are examples in those post to demonstrate how float works. You should check them out.
As for your specific problem:
Why doesn't the blue background appear?
To cite the docs again:
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.
What happens here is that because the red and green boxes are floated, the blue div (which is a display: block element) will be rendered as if those 2 boxes are not there (it ignore them). Coincidentally you have set it to have the exact same size as the red box, so the blue box is rendered behind and is hidden by the red box.
The text inside it, though, is an inline text, so it is wrapped around the red and green boxes, and thus get pushed down (out of) the blue box, to below the red box.
When you add float: left to the blue box, it now recognize the red box (they're both floated) and get pushed down by it, making it visible.
Why do Text1 and Text3 not at the top, but Text2 is?
That's because all of your texts are also inside a <p> element. <p> has a default top and bottom margin so they have some spacing from the top of the boxes.
But <p> itself is also a display: block; element, so it is also rendered as if the red box is not there. The result is that its top margin is at the top, above the red box, creating an empty white space. The text inside it (Text2), is wrapped by the red box to the next line, and since there's no margin there, it touches the red box.

Text flows around polygon edges in html

In my html content, I want to place an image at the bottom right corner of some container. While the image, like all images, is square in that it has a height and width, the actual visual image that the eye sees is not square. It could be a ball for example or a triangle. I also want text in this container but when the text is a lot, I would like it to flow around the edge of the visual image and not along the actual rectangle edges. Is this possible? Does html or css have some construct where you can setup the border (or edges) where text should stay away from?
If you want to solve the problem only with css and html you need to programming the page with many paragraphs (<p> tag) with various dimensions and set the image like a background image of the div wrapper.
#wrapper {
width:500px;
height:500px;
background-color: #fff; /*Default bg, similar to the background's base color*/
background-image: url("image.png");
background-position: right bottom; /*Positioning*/
background-repeat: no-repeat; /*Prevent showing multiple background images*/
}
After that set any paragraphs with custom width to set the text around the image.
Unfortunately i don't know any other "automatic" solutions.
Maybe, you can find a valid plugin here:
check this another stackoverflow question

Creating a dynamic image in HTML with a transparent background

Let's say I'm making a Valentine's Day app. I want a heart to fill up with pink from 0 to 100 to show one's love for another.
The height of the image will be 102 pixels, and for every % someone is "in love", we will creep up a single-pixel height line.
My approach is as follows: go into Photoshop and remove the 'background' of the inside of the heart, so that the inside is now transparent. The area of the surrounding heart will be painted white. Put on a site with a white background. Put the image on a 102 x (whatever) div, then put another div inside, whose background color is pink. It's then a simple matter of increasing the child div's height.
This is nice, but I can only use it on sites which have a white background, because it's the white that's preventing the area from turning pink. In short, I need a way to fill up this heart while being able to change the background color of the web page.
Create the heart as you normally would making the background transparent and fill in the center. Use that as the background image of a div and position it at the bottom.
The example below shows a heart at 40%.
HTML
<div class="heart-wrap">
<div class="heart" style="height: 40px; margin-top: 60px;">
</div>
</div>
CSS
.heart,
.heart-wrap {
width: 100px;
height: 100px;
}
.heart {
background: transparent left bottom url('/heart.png');
}
Demo: http://jsfiddle.net/UFBjh/
Demo2: http://jsfiddle.net/L5uDp/
Check out this demo. This is probably what you want - http://jsfiddle.net/Rhpyp/
The solution involves drawing out the heart using CSS3 using the technique mentioned in http://www.webfroze.com/css/heart-shape/
And then having an outer div handle the partial hiding of the heart as needed.
The color of the heart as well as the DIV that is used for partially hiding it is editable via CSS.

Get Background Image to Stop Tiling at Certain Point

I am trying to translate my PSD file to code and I am having problems with these headers. The header would contain the name of the header, and a horizontal purple bar that stretches from the right side of the end of the name to the end of the div. I am using Foundation (responsive framework) and so I have given my header a width of three columns. I have written some code, but I am unsure how to get the purple line to not appear under the title name.
Currently, I have saved the purple line as a tileable image and set it as the background of the h3 tag. I have tried to play with the background position, but I cannot get the line from not appearing under the title name.
Here is a screenshot of part of the PSD file. To clarify, the purple bar next to Hours, Phone, and Location is not for the user to type any information onto; it is a decorative piece used to separate the different regions of information.
My code:
<div class="row">
<div class="three columns offset-by-one contact">
<h3>Hours</h3>
</div>
</div>
.contact h3 {
color: #444;
background: url(../img/purpleLine.jpg) bottom right repeat-x;
}
This would be a perfect time to use the HTML element <span> as this is pretty much exactly what it is meant to do. After the element, add <span></span>, give it the desired width you want, and set the background image for the span element. Not sure how your framework classes would be used to define the width, so I just put 'whatever' in that part. You might even be able to assign a class to the span element to define its width.
HTML:
<div class="row">
<div class="three columns offset-by-one contact">
<h3>Hours</h3><span></span>
</div>
</div>
CSS:
.contact h3 {
color: #444;
}
.contact span {
width:whatever;
background: url(../img/purpleLine.jpg) bottom right repeat-x;
}
Just make a div that has a bottom border of the purple colour and thickness you want. Then float it left and that would give you your desired affect. You can then also place a text box inside that div if need be.

Paper BG Image: Make It Appear To Fill Window

I want to use a background image like the one below as the background of a site. The problem is, I don't want it to tile. I want the top edge to be the top edge of the window, side edges to be the side edges of the window, and bottom edge to be the bottom edge of the window. The middle portions, both horizontally and vertically, should repeat in a natural looking way to fill up all the space, making it appear that the paper is the size of the browser window. Is there a good way to do this?
I would use something like this: http://srobbin.com/blog/jquery-plugins/jquery-backstretch/ ( Note that this is not the only background stretching script ) Upside with these is that it keeps the aspect ratio of the image.
Dunno if keeping the aspect ratio is necessary or even desirable in your case..?
IF i wanted to go all extreme on this background i would:
Take the basic grid and its surface structure and repeat that throughout the
site bg.
Take the "shadows" on the sides and place them fixed on each side
repeating them to whatever direction is needed
If i had all these elements in their own layers. Though that wouldnt be hard to fabricate.
Easy solution: make four <div>s:
#top with the top shadow
#left with the left shadow
#right with the right shadow
#bottom with the bottom shadow
<div id="top"></div>
<div id="left"></div>
<div> <!--Main content of site--> </div>
<div id="right"></div>
<div id="left"></div>
Style them with your preferred widths and position:absolute, and use clips of the original background image to fill them in, here's an example:
#top{
height:50px;background:transparent url("top-background.png") 0px 0px no-repeat;
}
Then, you can just repeat a small grid clip of the original background image set as the background-image of <body>, like so:
body{
background: transparent url("page-background.png") 0px 0xp repeat;
}