I have created a webpage with three images with a css property which gives it a border when hovered but when i hover all the image move a little from their origional position also how to align all the images in center
JSFIDDLE DEMO HERE!
<head>
<title>Play Stone Paper scissors
</title>
<style>
img {
margin:40px;
margin-left:10px
}
img:hover{
border:dashed;
border-color:#4DFFFF;
}
div{width: 90%; margin: 0px auto;
margin-top:40px;}
</style>
</head>
<body>
<div>
<img src="rock.jpg">
<img src="paper.jpg">
<img src="scissors.jpg">
</div>
The answer is the border itself. It changes your dom's element width. Border itself doesn't have an off state of the same width, which is what you are expecting.
Rather you need to create the off state width to remove this shake.
Either an off state with the border width or some other margin/padding to compensate.
http://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Similar to : How can we avoid the shake when we hover over an element and set its border?
From the linked SO question above, fixed fiddle: http://jsfiddle.net/smitkhakhkhar/tn9Kj/
Added
border:dashed;
border-color:transparent;
I made a very small change in KnowHowSolutions original idea - thanks! - and wonder what people would think about a different approach - FIDDLE.
Put the full border in, but make it tansparent, and when hovered, change the color.
Is there any downside to this?
CSS
img {
margin: 40px;
margin-left: 10px;
border: dashed;
border-color: transparent;
}
img:hover{
border-color: #4DFFFF;
}
Related
Before flagging this as already asked, pls read the whole scenario. Thanks
SHORT VERSION :
Just to clearly state what i am trying to achieve, here's the page https://www.facebook.com/MercedesBenzPolska/ and I want to add border to the target element (on which i am hovering), whether it be <div> or <img> or <p>, without the shaking
DETAILED VERSION
Webpage in question: Any of Facebook's page.
Requirement: Moving a cursor over an element should add border to the target element [only on hover therefore temporary border not permanent]. Permanent border will be added ONLY if I click on that element. [Simply, if I hover over an element it will be highlighted with, say, pink border and only when i click on it, a green border would be added]
Initial problem: adding border on elements on hover would make the whole page's structure shaky, since I am constantly adding and removing the border. For that what I did was add a transparent 1 px border to all the elements of the page, and on hover just change the color of the border from transparent to pink; thus no shaky.
Present problem: The above solution was working for all the pages till I encountered Facebook's page. It turns out adding the initial 1 px border totally disrupts the structure i.e. the look and feel of the page. DIVs move from somewhere to somewhere else.
How do I now solve my original problem? Is there a way of, maybe like, applying a negative margin or border, so that adding the extra 1 px border does not dirupt the page's structure? I don't know I am just suggesting. Pls help
[SCREENSHOTS]
1. this is when the page loads [without applying the border]
2. Now when I hover over the div containing image ie adding 1 px border on hover, the divs move here and there
css I am using
* { border: 1px solid transparent !important;} //when page loads
.hover-selected{ border: 1px solid #e42a78 !important;} //on hover border
.option-selected:hover { border: 3px solid #529c56 !important;cursor: default;} //when option is selected
The images and the css both reflect towards the same problem, the default 1px transparent border disrupts the page's css and If I don't do that, the on hover border application becomes shaky and the page's css anyway gets disrupt
box-shadow: 0px 0px 0px 1px #000;
Use box shadow instead border. Box-shadow don't take up space.
div {
width:300px;
height:300px;
background: red;
}
div:hover {
box-shadow: 0px 0px 0px 1px #000 inset;
}
<div> Test </div>
outline is perfect for this. It works in a very similar way to border but does not effect layout at all.
div:hover {
outline: 1px solid orange;
}
<div>
Lorem ipsum sit amet.
</div>
<div>
<img src="https://placehold.it/200x100">
</div>
<div>
Lorem ipsum sit amet.
</div>
you can use box-sizing property in css. Try below code with and without box-sizing property
<div class="item">
</div>
.item {
box-sizing: border-box;
height: 50px;
width:50px;
background:red;
}
.item:hover{
border:1px solid black;
}
I would start from something like this and move from there:
*:hover:last-child:before {
display:block;
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
border:2px solid red !important;
}
Using a pseudo-element instead of putting a border on the actual object might not create as many issues with the initial layout. Still not exactly what you asked for, but I believe it's at least a bit closer. :-)
EDIT
I believe that the only way to achieve this as good as possible would be to be less greedy when selecting elements in the CSS, and specify a list like so:
a:hover:before,
img:hover:before{
display:block !important;
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:0 !important;
right:0 !important;
border:2px solid red !important;
}
In IE11 and Edge (on Windows 10), the following HTML/CSS displays a strange, transparent border where there shouldn't be.
<!DOCTYPE html><html>
<head>
<style>
body {
background-color:red;
font-size: 10pt;
}
.menu {
background-color: #5f6062;
overflow:hidden; /* To contain floats */
box-sizing: content-box;
}
.right-menu {
float:right;
margin:auto;
padding:0 0 0 20px;
list-style: none;
}
.spacer {
background-color: #ffffff;
height: 20px;
}
.content {
background-color: #ffffff;
border-radius:0 0 10px 10px;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="menu">
<ul class="right-menu">
<li>Link</li>
</ul>
</div>
<div class="spacer"></div>
<div class="content">
<div class="content-title">There shouldn't be a 'border' above this...</div>
</div>
</body>
</html>
JSFiddle (You may need to resize the window vertically to see the 'border' fade in and out in JSFiddle — which is even stranger.)
The most interesting part is that the issue seems to be caused by border-radius. If I remove it, the 'border' is gone. It will also go away if I remove some other element (the .menu div for example), but that is less of an option since I would prefer not having to mess with the structure of the site having this problem.
I've found mentions of background-clip: content-box or padding-box as a solution, but it doesn't seem to work here.
Also of note, while trying to reduce the size of my demonstration, I ended up with a code that showed the border in JSFiddle, but not in a plain HTML file. This is the smallest I could get to display the 'border' both inside JSFiddle and a plain HTML file.
Found the bug in EDGE's Platform Issues but still would like to find a workaround...
It looks like IE is rendering a transparent border to display the border-radius but picks the 'background' color further down the layers than it should (in my sample, using red instead of white).
So I went with workarounds...
On my actual page, two elements are having this bug. For one my workaround was to set the background-color of another element further behind the one with border-radius and for the other to set an actual border the same color as the element's background.
body {
background-color: white;
color: #000000;
font-family:"arial",arial;
margin:auto;
}
(header logo EWITA) #header {
position:relative;
left:-150px;
background-color:transparent;
text-align:center;
margin-top:50px;
padding:0;}
(HR LINE) hr.main {
position:relative;
top:-5px;
background-color:#353535;
height:10px;
width:100%;
margin:0;
padding:0;
z-index: -1;
}
#menubar {
position:relative;
background-image: URL('./pictures/menu.png');
background-repeat:no-repeat;
left:730px;
top:-40px;
height:25px;
width:300px;
background-color:transparent;
color:#ffffff;
padding:5 0 0 20;
}
(menu bar) table,tr,td {
border-spacing:0;
border-collapse:collapse;
padding:0 10 0 10;
}
(page after head) #wrapper {
margin:auto;
min-height:500px;
background-image: URL('./pictures/background.png');
background-repeat: repeat-xy;
z-index:-2;
}
#content {
margin:auto;
width:700px;
background-color:#ffffff;
margin-top: 40px;
border:1px solid;
padding: 50 30 50 30;
this is my css i am writing a page for a client and due to some relative positioning it makes me a problem with a background as u see here the white line after the HR line.
Thanks everyone who responds.
Edit:
Wondered how to update this answer, as there is a lot to talk about found it best to take it from bottom up. This will bring you to a layout like this:
Stage one demo.
The menu and logo should stay in place when you re-size the window etc.
Had a look at your code now. It is better, but you still have some trouble:
border is still set on image. Invalid markup.
repeat-xy is still used on background. Invalid property value.
#content still has padding without units. Invalid property value.
<br> tags are still used to make paragraphs in text.
There is an extra } after #content. Invalidates CSS file.
Number 4. should be fixed, but not that important right now.
As we already have discussed 1-3 it is hard to understand why you keep them. Invalid markup and styling makes for unreliable result.
It can look OK in one browser, in one version of one browser, look whack in another, and totally break in a third. You get misinformation between code and result. When or if you fix it to be valid other unexpected things may change and you have to do a lot more work to clean it up. As a whole and rule number one. No matter how wrong markup and styling might be seen from a how to do it perspective one have to keep invalid markup and style out of it.
To validate your work, and as you are where you are in regards to experience, do it all the time. Do small changes: validate. Do small changes: validate. And so on. Use:
For HTML
For CSS
Markup
The markup as it is now is not the easiest to style or get to behave good in a dynamic way. hr's is not the easiest to work with and vary between browsers. Do not use tables for menu's or styling. They are best left for what they are intended to: show tabular data. For your menu you can ask yourself: what is the menu; well, it is a list. A list of options for end-user to navigate trough the site. There is a lot of examples on the web using lists as menus. Search the web for CSS list menu etc. You can create nice looking, cross-browser reliable CSS only, (no JavaScript dependency), menus.
But let us start with the basic markup: You will usually find it good to wrap the whole page inside a wrapper. Then add sub-items into that. To position elements like your main menu, logo etc. it could be good to use a wrapper for each and position them by float, margins etc.
In general use margins and padding.
Page layout
Head Div
Divider Div
Content Div
Footer Div
Head
Div float left Div float left
LOGOmenu
Styling + markup
To make it easy for yourself use temporary borders and background colors to view how the various elements float around. Also use the browsers built-in tools to show various things like margins etc. This is invaluable.
Only remember that if you use borders, and you intend to remove them on finished product, they can take up space.
As an example you could have something like this:
Strong colored first attempt.
HTML:
<div id="wrap">
<div id="head">
<div id="logo">
<a href="index.php">
<img id="logo_img" src="http://cupido.g6.cz/pictures/header.png" alt="EWITA" />
</a>
</div>
<div id="menubar">MENU</div>
</div>
</div>
CSS:
* {
margin : 0;
padding : 0;
}
body {
font-family: Arial;
height : 100%;
background : orange;
}
#wrap {
position : relative;
background : pink;
width : 100%;
height : 100%;
}
#head {
position : relative;
width : 800px;
height : 131px;
margin : 100px auto 0 auto;
background : blue;
}
#logo {
position : relative;
width : 431px;
float : left;
background : red ;
}
#logo_img {
width : 439px;
height : 131px;
float : left;
}
#menubar {
position : relative;
background : #fff;
width : 300px;
float : left;
margin-top : 107px;
padding : 3px 0 3px 10px;
}
Note: I use a hard reset of margin and padding on all elements by:
* {
margin : 0;
padding; 0;
}
And then set margins and padding on tags and elements as I use them. Often find this to be a much easier way then the other way around. Remember that things like body also has padding etc. and often can result in undesired spacing.
This way you also get rid of the horizontal scroll-bar at bottom.
By using float on thing like logo and menubar the elements align nicely.
Next we can add the divider. Here we could use a div and set border for top and bottom. On content we use padding to make space between header, text and footer. We also add white border to top of content that aligns nicely with the divider.
Added divider, content and footer.
HTML:
<div id="divider"></div>
<div id="main_content">
MAIN CONTENT
</div>
<div id="footer">
FOOTER
</div>
CSS:
#divider {
border-top : 5px solid #353535;
border-bottom: 3px solid #888;
}
#main_content {
position : relative;
background : url('http://cupido.g6.cz/pictures/background.png');
border-top : 2px solid #fff;
padding : 120px 0 130px 0;
}
Next we can add the content text and style it. Also added style to footer.
With content and styled footer.
HTML
<div class="content_text">
<p>
text text text ...
</p>
</div>
CSS:
.content_text {
margin : 0 auto;
width : 700px;
background : #fff;
border : 1px solid;
padding : 50px 30px;
}
.content_text p {
font-size : 16px;
}
Resize window etc. and see it floats nicely around.
Now it is time to add the menu. As mentioned earlier we can use list for the menu. It is much more suited for the task then a table. In that regard also note that a menu might have sub items, as such a list becomes the only sane option.
Also note on the menu: You likely do not want to style visited links with other color. But that is up to you of course.
With added menu and some re-styling on background colors etc.
HTML:
<ul>
<li><a class="menu" href="smaler.php">úvodní stránka</a></li>
<li><a class="menu" href="sluzby.php">služby</a></li>
<li><a class="menu" href="kontakt.php">kontakt</a> </li>
</ul>
CSS:
As we already have set margins and padding to 0 on all elements this is trivial:
#menubar ul {
list-style : none;
}
#menubar li {
padding : 0 10px;
float : left;
}
a.menu {
text-decoration : none;
color : #fff;
}
a.menu:hover,
a.menu:active {
color : #3cc8a8;
}
Remove helping colors etc. and we have a version 0.1 ready for further testing and expansion.
Result.
Result as one page.
Validated markup on result at W3C
Validated CSS on result at W3C
Original answer:
There is more then one problem. Firstly the markup:
XHTML
<link rel="icon" type="image/png" href="./pictures/favicon.png">
Should be:
<link rel="icon" type="image/png" href="./pictures/favicon.png" />
<link rel="stylesheet" type="text/css" href="style.css">
Should be:
<link rel="stylesheet" type="text/css" href="style.css" />
<img src="./pictures/header.png" width="439" height="131" border="0" alt="">
Should be XHTML 1.0 Strict img tag does not have a border attribute, and need
to be closed:
<img src="./pictures/header.png" width="439" height="131" alt="" />
<hr class="main" /></hr>
Should be:
<hr class="main" />
Use paragraphs to group text, not:
Text<br/><br/>Text<br/><br/>Text ...
but:
<p>Text</p><p>Text</p><p>Text... </p>
CSS
Inline comments are not valid, use:
/* some comment */
Not:
// some comment
You are missing unit on most of your padding values. If a value is non-zero it needs a unit such as pt, px etc. Use:
padding: 5px 0 0 20px;
/* Not: */
padding: 5 0 0 20;
If you do not, it has no/(should not have any) effect.
background-repeat does not have repeat-xy. Use:
background-repeat: repeat;
/* not */
background-repeat: repeat-xy;
or nothing at all, as that is the default.
Fix those first. Then set some color to your things so that it is easier to understand what you want. You can change them back later. Use red, blue etc.
Example.
Regarding zero width no break space bug, as displayed in Vim:
Try adding this CSS:
CSS:
#wrapper {
margin: auto;
min-height: 500px;
background-image: URL('../images/squared_metal.png');
background-repeat: repeat-xy;
z-index: 10;
padding-top:10px;
margin-top:-30px;
}
#content {
margin:auto;
width:700px;
background-color:#ffffff;
margin-top: 10px;
border:1px solid;
padding: 50 30 50 30;
}
I totally overlooked the 'padding-top' css property originally. Thank you all for providing that information!
Please update your site with this CSS and let me know if it works! Since I tested this on my own machine, you should change back the background-url to your custom .png file.
Maybe I'm stupid atm, but I can't figure out how to do this:
http://s24.postimg.org/k9fl1y2s5/arrow.png
As you can see, the pointer/arrow inside the nav-element is transparent, but shows the content instead of it's parent, the nav-element.
This is my HTML:
<nav>
...
<div id="pointer></div> <!-- this is the arrow -->
</nav>
<div id="content">...</div>
How can I achieve that? Ugh, hope you understand what I mean... :)
Ok it took some doing but I think I have a start for you:
http://jsfiddle.net/uLDzA/2/
The main problem here is that you can't just set the ARROW to transparent as the menu div will have some sort of solid color that won't let the transparent bleed through to the main background.
I solved this by busting up the menu item into a top and bottom section. The top has text and the bottom is constructed so that we "emulate" a triangle in the middle section and give it a transparent background.
Basically build the arrow into the menu item itself by piecing it together like a CSS puzzle.
<div class="con">
<div class="item">
<div class="item_top">
top
</div>
<div class="item_btm">
<div class="item_btm_lft"> </div>
<div class="item_btm_ptr"> </div>
<div class="item_btm_rgt"> </div>
</div>
</div>
</div>
.con {
width:100px;
height:40px;
padding:20px;
background:url('http://placekitten.com/g/100/100');
}
.item {
width:100px;
background:transparent;
}
.item_top {
background:orange;
text-align:center;
color:#fff
}
.item_btm {
width:100%;
overflow:hidden;
}
.item_btm_lft {
width:40px;
float:left;
background:orange;
border-bottom:2px solid orange;
}
.item_btm_ptr {
width: 0px;
height: 0px;
float:left;
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent orange transparent orange;
}
.item_btm_rgt {
width:40px;
float:left;
background:orange;
border-bottom:2px solid orange;
}
Well, not sure if i got you right but:
I am pretty sure that the pointer/arrow is a seperate img file that is loaded and shown in cases like: mouse-over, active (e.g).
That means, that you creat a new .png File make the background transparent and draw it as you want. All areas where you didn t draw on are transparent.
Let's make it a little easier to understand:
Your navigation is not active nor is your mouse hovering over it. Then you should see the standard loaded img (without the pointer/arrow).
--> we hover our mouse over it or click it:
Your navigation is active now and the new image (e.g. .png file) is shown instead of the old one. This image is drawn with some areas untouched so they are transparent.
You are looking at a modern application of CSS3 techniques as demonstrated by:
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
In your example, the border colors have been made semi-transparent using rgba to specify the color.
However, the reference will not tell you how to build exactly what your screen shot is showing. It will only explain how to create the triangle motif.
Right now we have a web page with a bunch of link sections on one page. Each section has a header like so:
This header background is actually two images. The first is just a rectangle and the second has the slanted side on it. As I was looking at this solution, I was wondering if I could solve this with CSS instead of images. While I am not a CSS guru, I did look at a number of examples and was able to get something similar working. However, when I attempt to put text on top of the background, it ends up above the color instead of inside it. The CSS I have also has a fixed size, which is less than idea. I would rather specify a percentage of the available area and have it fill in the color.
Here is the code I've been working with:
<STYLE type="text/css">
.mini_banner
{
display:inline;
border-bottom:30px solid blue;
border-left:0px solid transparent;
border-right:30px solid transparent;
}
</STYLE>
I wanted to apply this to a cell in a table. I also don't want to break compatibility with modern browsers. My "customers" (mostly internal people) are going to be primarily on IE8 or later but I don't want to limit myself if I can help it.
So first, is this possible? Second, how would I accomplish this? And third, is there a way to make it relative in scale instead of fixed?
I would say that you'll have less headaches all the way around if you revert to using a single background image - in this case, a white image with the notch cut out (a PNG-24 with alpha transparency). Make it bigger than you think you need by about 200%, then do something like this:
.minibanner {
background: blue url(..images/notch.png) no-repeat middle right;
font-size: 1.5em;
}
The reason is that relying on border sizes may result in some whackiness across browsers, and it will definitely look weird if any element runs to two lines.
If you make the notch image 200-300% larger, but vertically align it in the middle of the background, and you do increase the font-size, the box will grow, but your white notch will grow right along with it.
UPDATE:
The only other way I can see pulling this off is to add a non-semantic element, such as a or something similar, after your text:
<div>
<p>Hello text</p>
<span></span>
</div>
Then in your CSS:
p {
background: blue;
color: white;
float: left;
padding: 0 20px;
height: 50px;
margin:0;
line-height: 50px;
}
span {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 0px solid transparent;
display: inline-block;
border-left: 50px solid blue;
}
See this JSFiddle.
The shape is based on this tutorial on CSS triangles. Now, I've only tried this on a webkit based browser, and it works. You will have to adjust the heights every time you want to change font size, so that is a drawback.
I made it work without an extra span: jsFiddle
.mini_banner
{
width:18em; height:1.5em;
color:white; font-weight:bold; padding-left:0.5em;
margin-bottom:.5em;
}
.mini_banner:before {
display:inline-block; content:''; overflow:hidden;
width:17em; height:0;
margin-bottom:-1.5em; margin-left:-.5em;
border-bottom:1.5em solid blue;
border-right:1.5em solid transparent;
}
Tested in FF, Safari, Opera and IE. (Works in IE8, but not in IE7)