I have two elements as close as I possibly can get them. If you're curious, the first is an scroll-to-top script that the user can click, and below it is a flat background. That hairline is really annoying me.
Any help is appreciated!
/*SCROLL TO TOP*/
.scroll-top-wrapper img{
width: 134px;
display: block;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.border_background{
background: #162a53;
height: 416px;
}
...
<!-- SCROLL TO TOP -->
<div class="scroll-top-wrapper">
<span class="scroll-top-inner">
<img src="../images/misc/scroll_to_top.svg" onmouseover="this.src='../images/misc/scroll_to_top_hover.svg';" onmouseout="this.src='../images/misc/scroll_to_top.svg';" />
</span>
</div>
<!-- LIGHT-COLORED BORDER -->
<div class="border_background">
....
Try adding a reset file. or margin: 0; Remember html tags have default style rules so you have to get rid of them.
I think the problem is in your image. There's a slight hairline, left in the original image, when you edited this image. So try to re-edit the image and remove that hairline.
Related
This is my CSS.
<style type="text/css"> .chart-legend {
text-align: center;
}
.chart-legend li {
list-style-type: none;
padding-top: 15px;
}
.chart-legend li span {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
}
</style>
HTML
<div class="col-xs-7 col-md-6" class="thumbnail">
<div class="thumbnail" style="width:100%">
<h4> <span class="label label-primary">{{ a.title }}</span></h4>
<div>
<canvas id="canvas{{loopIndex}}" height="450" width="600"></canvas>
</div>
<div id="js-legend" class="chart-legend">
</div>
</div>
</div>
Here, the first legend entry gets aligned to the center, whereas the second entry does not go right below the aligned first one, but leaving some space towards the right. Below, is the image. Any help would be much appreciated. Thanks in advance :)
They both look centred to me. They are individually centred, and as they are different lengths, they will not have their left edges aligned with each other.
I suspect you want to let them left align inside a div, and then centre the div.
Also, unless I'm missing something, you haven't included all the HTML necessary to generate your attached image.
They are centered,Because of different length its look like this..
If you want something like this.You should set a padding:somthing according to your need and if its and for html element you can set left property as well.
Hope this will help you..
Thanks all :) But this kinda worked well for me! :)
.chart-legend {
width: 50%;
margin: 0 auto;
}
I have a problem with hover. I have a normal pic with opacity and another one with white background. I did this:
html:
<div id="glob" style="margin-right:5px;margin-top:2px;float:right;height:45px;width:40px;">
<img src="images/icon_globus.png" width="32" height="33" alt="" style="margin-right:5px;margin-top:7px;"/>
</div>
css:
#glob:hover{
background:url('../images/icon_globushover.png') no-repeat;
}
As you can see from the pic, the white one (upper globus) is behind the other one. It should not be behind.
What is not good?
EDIT: Thanks all, it's working. I did like the first answer. Don't know why I used img tag. I always use divs as image, but here I was stupid. Thanks a lot all for your help!
Because background always has the lowest z-index of all elements and content will be on top of it. I would suggest you to put "images/icon_globus.png" this as a background for div glob and remove that image tag. Then it should work the way you want it.
try without the image part.
glob {
background: url('icon_globus.png');
}
glob:hover {
background: url('icon_globus_hover.png');
}
Depending on the browsers you want to support, you could do something like this in CSS:
#glob { position: relative; }
#glob:hover:after {
content: '';
display: block;
position: absolute;
z-index: 1000;
left: 0;
top: 0;
right: 0;
bottom: 0;
background:url('../images/icon_globushover.png') no-repeat;
}
Because your image icon_globus.png is above your div background so when you hover, you actually apply a background to the container containing your image, you globushover appears behind your ..
try this instead:
html:
<div id="glob></div>
css:
#glob {margin-right:5px;margin-top:2px;float:right;height:45px;width:40px;background:url('../images/icon_globus.png') no-repeat;}
#glob:hover{
background:url('../images/icon_globushover.png') no-repeat;
}
this way you change/overwrite the default background-image. css means cascade style, cascade is wat permits you to overwrite styles depending on a certain condition, thats theory applied here. just overwrite a background-image with another one on hover.
remove all style and change as below
// CSS
glob:hover{background: url("/images/icon_globushover.png") no-repeat;}
.glob{
background: url("/images/icon_globus.png") no-repeat;
float: right;
margin: 0px 0px 15px 20px;
overflow: hidden;
padding: 0px;
width: 32px;
height: 33px;
}
<div class="glob"></div>
if your path source is like this
myhardrive/MysiteFolder/Images/ and your index.html is in MysiteFolder so in css must be (/images/)
if your path source is like this
myhardrive/MysiteFolder/files/mystyle.css here you do ("..\images\")
I am trying to make a gallery of images, one page to the next like on this site:
francescoclemente.net/now/1.html
I downloaded some arrow.png images to make the arrow, and implemented them into my HTML like so:
<div class="paintings">
<img src="stanpics/paintings/nyc/bathesda fountain'.jpg" alt="bathesda fountain" title="bathesda fountain">
<p class="pdescribe">bathesda fountain</p>
</div>
<div class="rightarrow">
<img src="rightarrow.png" class="rightarrow" title="next" alt="next">
</div>
<div class="leftarrow">
<img src="leftarrow.png" class="rightarrow" title="back" alt="back">
</div>
The div "paintings" is the art image. The 'leftarrow' and 'right arrow' are the two arrows I want to put on the side. For some reason, the pointer icon (indicating an anchor tag or link) for the mouse will not show up unless you mouse over below the right arrow image. What am I doing wrong? Thanks for any help.
Here is the CSS for the arrow classes.
.leftarrow {
margin: 0 auto;
padding: 0;
position: relative;
bottom: 82px;
left: 120px;
}
.rightarrow {
margin: 0 auto;
padding: 0;
position: relative;
top: 50px;
left: 190px;
}
I've tried everything I could think of, I know it's probably something very simple messing me up here. Your corrections are appreciated.
It's hard to reproduce your issue without the images, but here are a few ideas you could try:
add a height and width to the css for your buttons
add a display:block to the css for your buttons
The w3c.org validator gives a few errors regarding arrows. Maybe fixing them will fix your problem.
http://validator.w3.org/check?uri=francescoclemente.net%2Fnow%2F1.html&charset=%28detect+automatically%29&doctype=Inline&group=0
http://jigsaw.w3.org/css-validator/validator?uri=francescoclemente.net%2Fnow%2F1.html&profile=css21&usermedium=all&warning=1&vextwarning=&lang=nl
I'd like to have a line that starts right after my text on the same line, I've tried with the following simple code
<html><body>My Text<hr/></body></html>
It seems that <hr> is not an option because it is always on a new line and I'd like the line to start at the right of my text.
Any help ?
The <hr> has default styling that puts it on a new line. However that default styling can be over-ridden, in the same way as it can for any other element. <hr> is in essence nothing more than an empty <div> with a default border setting.
To demonstrate this, try the following:
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
There are a number of ways to override the styling of <hr> to acheive your aim.
You could try using display:inline-block; along with a width setting, as I have above. The down-side of this approach is that it requires you to know the width you want, though there are ways around this - width:100%;, and the whole line in a container <div> that has overflow:hidden; might do the trick, for example:
<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>
Another option would be to use float:left;. You'd need to apply this to all the elements in the line, and I dislike this option as I find that float tends to cause more problems than it solves. But try it and see if it works for you.
There are various other combinations of styles you can try - give it a go and see what works.
Using FlexBox Property this can be achieved easily.
.mytextdiv{
display:flex;
flex-direction:row;
align-items: center;
}
.mytexttitle{
flex-grow:0;
}
.divider{
flex-grow:1;
height: 1px;
background-color: #9f9f9f;
}
<div class="mytextdiv">
<div class="mytexttitle">
My Text
</div>
<div class="divider"></div>
</div>
Try this:
<html><body>My Text<hr style="float: right; width: 80%"/></body></html>
The inline CSS float: right will keep it on the same line as the text.
You'll need to adjust the width if you want it to fill the rest of the line.
Using inline or float, as far as I tested it doesn't work properly even if this was my first thought. Looking further I used the following css
hr {
bottom: 17px;
position: relative;
z-index: 1;
}
div {
background:white;
position: relative;
width: 100px;
z-index: 10;
}
html
<div>My Text</div><hr/>
Demo http://jsfiddle.net/mFEWk/
What I did, is to add position relative in both elements (to give me the advantage of z-index use). Also from the moment I had position:relative for hr I moved it from the bottom:17px. This move it above the div that contains the text. Applying z-index values and adding background:white for the div puts the text above the the line. Of course don't forget to use a width for the text, otherwise will take the whole width of the parent element.
<div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">
Exactly what you want.
Try this. It works
<p style="float:left;">
Hello Text
<hr style="float:left; width: 80%"/>
</p>
You can also use this to draw a line between texts like
Hello -------------------------- Hello
The OP never specified the purpose of the line, but I wanted to share what I ended up doing when I was making an html template where the user needed a line to write on after the document was printed.
Because the hr tag defaults to its own line and defaults to being centered in the line, I decided to use a div and style it instead.
HTML
This is my text.<div class='fillLine'></div>
CSS
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
JSFiddle Demo
Style Div for Line After Text
Hope that helps anyone who had the same goal as me.
hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}
That sort of make sense?
<p>My text</p>
<hr />
Here's one potential approach, but it has some assumptions/requirements. Your question should be edited to give more specific information about what you're building.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Blah</title>
<style type="text/css">
body {
background-color : white;
font-family : Arial;
font-size : 16px;
}
.wrap {
background: transparent url(px.png) repeat-x 0px 85%;
/* Different fonts or text sizes may require tweaking of that offset.
px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
}
.inner {
background-color : white;
/* Should match the background of whatever it's sitting over.
Obviously this requires a solid background. */
}
</style>
</head>
<body>
<div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>
I used the following technique:
Give the container div a background-image with a horizontal line.
Put an element (like <h3>) in the container div (I have it on the right so float: right; )
Use the following css:
.line-container {
width: 550px;
height: 40px;
margin-top: 10px;
background-image: url("/images/horizontal_line.png");
}
.line-container h3 {
padding-left: 10px;
float: right;
background-color: white;
}
Below code did the job for me
HTML File:
----------
<p class="section-header">Details</p><hr>
CSS File:
----------
.section-header{
float: left;
font-weight: bold
}
hr{
float: left;
width: 80%;
}
INLINE:
-------
<p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">
I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!
Edit: Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-
#header
{
width: 1000px;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.
You control design and styles with CSS, not the behavior of your content.
You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:
a#header {
background-image: url(...);
display: block;
width: ..;
height: ...;
}
You cannot nest a div inside <a> and still have 'valid' code. <a> is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a> element.
You can nest your <a> tag inside <div> and then put your image inside :)
If you don't want that, you're going to have to use JavaScript to make your <div> clickable:
Document.getElementById("header").onclick = function() {
window.location='...';
}
To link a css-sourced background-image:
#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
<a id="header" href="blah.html" class="linkedImage">
The key thing here is to turn the anchor tag into a block element, so height and width work. Otherwise it's an inline element and will ignore height.
That's really not a CSS thing. You still need your A tag to make that work. (But use CSS to make sure the image border is either removed, or designed to your required spec.)
<img src="foo" class="whatever" alt="foo alt" />
EDIT: Taking original intent (updated question) into account, a new code sample is below:
<img id="header" alt="foo alt" />
You're still in an HTML world for links, as described by other answers on this question.
sorry to spoil your fun ladies and gentlemen, it is possible.
Write in your header: [link](http://"link here")
then in your css:
#header a[href="https://link here"] {
display: inline-block;
width: 75px;
height: 75px;
font-size: 0;
}
.side .md a[href="link here"] {
background: url(%%picture here%%) no-repeat;
}
then in your css
.titleLink {
background-image: url(imageUrl);
}
You still create links in HTML with 'a' (anchor) tags just like normal. CSS does not have anything that can specify if something is a link to somewhere or not.
Edit
The comments of mine and others still apply. To clarify, you can use JavaScript to make a div act as a link:
<div id="header" onclick="window.location='http://google.com';">My Header</div>
That isn't really great for usability however as people without JavaScript enabled will be unable to click that and have it act as a link.
Also, you may want to add a cursor: pointer; line to your CSS to give the header div the correct mouse cursor for a link.
CSS is for presentation only, not content. A link is content and should be put into the HTML of the site using a standard <a href=""> tag. You can then style this link (or add an image to the link) using CSS.
You have to use an anchor element, wrapped in a container. On your homepage, your title would normally be an h1, but then on content pages it would probably change to a div. You should also always have text in the anchor element for people without CSS support and/or screen readers. The easiest way to hide that is through CSS. Here are both examples:
<h1 id="title"><a title="Home" href="index.html>My Title</a></h1>
<div id="title"><a title="Home" href="index.html>My Title</a></div>
and the CSS:
#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}
Depending on the rest of your stylesheet you may need to adjus it for the h1 to make it look the same as the div, check out CSS Resets for possible solutions to this.
Try this - use an H1 as the seat of your graphic instead. Saved my butt time and time again:
<h1 class="technique-six">
CSS-Tricks
</h1>
h1.technique-six {
width: 350px;
padding: 75px 0 0 0;
height: 0;
background: url("images/header-image.jpg") no-repeat;
overflow: hidden;
}
Accessible, and also solid across browsers IE6 and > . You could also link the H1.
HTML is the only way to create links - it defines the structure and content of a web site.
CSS stands for Cascading Style Sheets - it only affects how things look.
Although normally an <a/>; tag is the only way to create a link, you can make a <div/> clickable with JavaScript. I'd use jQuery:
$("div#header").click(function() {window.location=XXXXXX;});