i have a ribbon on bottom of every report page with an image for call window.print().
i figure out it like this:
<div id="dgdPrint" class="hop">
<div id="dgdPrnImg" title="Print Report..." onclick="window.print();">
</div>
</div>
and i style it with:
#dgdPrint
{ position:fixed;
border-top:1px solid #000;
width:100%;
bottom:0;
right:0;
text-align:center;
height:55px;
margin-top:50px;
background-color:#88A7DB; }
#dgdPrnImg
{ margin-top:10px;
background-image:url('PrinterText.png');
background-position:center center;
background-repeat:no-repeat;
height:35px; }
#dgdPrnImg:hover
{ background-image:url('PrinterText-hover.png'); }
but whole of first div (ribbon) take this effect and on hover of any part of that the image is changed. what's wrong in my code?
It changes because you have background-image:url('PrinterText-hover.png'); } set under #dgdPrnImg:hover
Related
I am working on some side buttons for a project and would like the link the hover styles for both elements, but am not sure how to go about this. In the example below if I highlight the link name (search) it rolls over and changes to a red text and if I highlight the image, it changes to the rollover image as expected. However what I would like to achieve is to link both so when I hover over the icon the link changes to red as well and vice versa.
#linkchoice{
width:100px;
height:100px;
}
#image{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:center;
}
#linkname{
font-size:15px;
text-align:center;
}
#image:hover{
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkname:hover{
color:#EB0307;
}
<div id='linkchoice'>
<div id='image'></div>
<div id='linkname'>Search</div>
</div>
I have made a JSFiddle as well here
https://jsfiddle.net/bzsvgwp8/
Thanks
Just update your css from
#image:hover {
background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkname:hover {
color: #EB0307;
}
to
#linkchoice:hover #image {
background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkchoice:hover #linkname {
color: #EB0307;
}
You will see the combined hover effect !
The first solution could be to use the hover on the parent div:
#linkchoice {
width:100px;
height:100px;
}
#image{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:center;
}
#linkname{
font-size:15px;
text-align:center;
}
#linkchoice:hover #image {
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkchoice:hover #linkname {
color:#EB0307;
}
<div id='linkchoice'>
<div id='image'></div>
<div id='linkname'>Search</div>
</div>
in the second solution you can simplify the html using a single div, in this way:
#linkchoice{
width:100px;
height:100px;
}
#linkname{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:top;
padding-top:75px;
font-size:15px;
text-align:center;
}
#linkname:hover{
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
color:#EB0307;
}
<div id='linkchoice'>
<div id='linkname'>Search</div>
</div>
I have this problem, I can't seem to figure out how do I make this red DIV not past through the div on the right side, I want to make it stay between the right and the left div menu.
Website Screenshot
HTML Code:
<body>
<div class="navigationBar_default">
<div class="facetubeLogo_default"></div>
<div class="facetubeText_container_default"><center><strong class="facetubeText_default"></strong></center></div>
</div>
<div class="content_default">
<div class="leftMenu_onProfile">
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/myProfileButton_onLeftMenu_onProfile.png" /><br>MY PROFILE</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/optionsButton_onLeftMenu_onProfile.png" /><br>GENERAL</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/generalButton_onLeftMenu_onProfile.png" /><br>OPTIONS</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/supportUsButton_onLeftMenu_onProfile.png" /><br>SUPPORT US</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/logOutButton_onLeftMenu_onProfile.png" /><br>LOG OUT</button>
</div>
<!-- there must be some stuff here, otherwise leftMenu_onProfile will glitch out. -->
<div class="contentCenter_onProfile">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaAAAAAAAAAAAAAAAAAA
</div>
<!-- there must be some stuff here, otherwise leftMenu_onProfile will glitch out. -->
<div class="rightMenu_onProfile">user1<br>user2<br>user3<br>user4<br>user5</div>
</div>
CSS Code:
.navigationBar_default {
background-color:#202020;
width:100%;
height:32px;
margin-left:-8px;
margin-right:-8px;
border:0;
top:0;
position:fixed;
}
.facetubeLogo_default {
background-image:url("../images/facetube_icon_30x30_png.png");
width:30px;
height:30px;
margin-top:1px;
margin-left:1px;
float:left;
}
.facetubeText_container_default {
margin-top:6px;
}
.content_default {
width:100%;
height:100%;
margin-top:32px;
margin-left:-8px;
margin-right:-8px;
margin-bottom:-8px;
}
.leftMenu_onProfile {
background-color:#0d0d0d;
margin-top:0px;
margin-left:-8px;
width:240px;
float:left;
}
.leftMenu_buttonOnProfile {
background-color:#0d0d0d;
border:0;
border-bottom:1px solid #ffffff;
width:240px;
height:48px;
color:#ffffff;
}
.leftMenu_buttonImage {
float:left;
margin-top:-2px;
margin-right:-6px;
}
.contentCenter_onProfile {
background-color:red;
padding:2px; /* padding is originally removed */
margin:0px;
top:0px;
}
.rightMenu_onProfile {
background-color:#0d0d0d;
margin-top:-20px;
margin-right:-16px;
width:300px;
color:#ffffff;
float:right;
}
I have feeling it has to do something with content_default and the width:100% but I don't know. I tried everything and I couldn't figure it out.
:/
Try this:
.contentCenter_onProfile {
background-color:red;
padding:2px; /* padding is originally removed */
margin:0 300px;
top:0px;
width: 50%; /* SET THIS */
white-space: pre-wrap;
word-break: break-all;
}
By setting the width, you can ensure the div does not overlap the right hand side div.
Setting float: left or float: right causes the elements to overlap.
This has been bothering me for a while. I have currently vertically align a border contain the word "Facebook" to an image but, vertical align isn't completely centering the word with the image.
Update 1: I am using Width 100% and Line-Height 100%. This is close to how I want it but not quite. https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 I want the border and the image to align. Here is my old code:
HTML
<div id="div06">
<img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
<span id="span01">Facebook</span>
</div>
CSS
#div06
{
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01
{
border:3px solid blue;
padding: 35px;
margin: 25;
}
Here is my current edit:
#div06{
margin-top:3%;
width:100%;
line-height:100%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01{
border:3px solid #3b5998;
color:#000000;
font-family:arial, bold;
font-size: 30px;
padding: 35px;
margin: 25;
}
It is vertically aligned in the full version but visually it's not (https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 In this screenshot, the text does center align but the order doesn't. How do I make the border align?). I want them to align. If it is visually vertical for you then this problem only exists with the full version. I think it might be the image but, I don't know. How Do I fix this?
Also if you need the full code I will provide it below.
Full Code
HTML
<head>
<!--
Assignment: Personal Website
Date: 10/4/16
Name: Bradley Elko
-->
<link rel="stylesheet" href="personalWeb1.css">
</head>
<body>
<div id="div01">
<h1 id="h101">Bradley's Website</h1>
</div>
<div id="div02">
<h3 id="h301">My Band</h3>
<h3 id="h302">My Handlers</h3>
<h3 id="h303">My Ideas</h3>
</div>
<div id="div03">
<div id="div04">
<h2 id="h201">Formal Unknown Cereal Killer</h2>
</div>
<div id="div05">
<p id="p01">Date: 10/05/2016 (Latest Update)
<blockquote>
Summary:
<br/>
<br/>
Formal Unknown Cereal Killer is a band I made on September 30th, 2016. I don't have anyone else in it, but I will keep trying to get more members. The band will be a metalcore band(a rock genre). I may implement other instruments into the band (such as a violin, flute, clarenet, or another unique instrument). If you want to keep up to date check us out. The links are down below.
</blockquote>
<div id="div06">
<img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
<span id="span01">Facebook</span>
</div>
<div id="div07">
<img id="img02" src="https://pbs.twimg.com/profile_images/767879603977191425/29zfZY6I.jpg"/>
</div>
</div>
</div>
</body>
CSS
a:link{
color:#1a0000;
border-right:2px solid;
border-left:2px solid;
padding:5;
}
a:visited{
color:#950f0f;
}
a:hover{
color:red;
}
a:focus{
color:#eeeedd;
}
#div01 {
position:fixed;
top:0px;
left:0px;
right:0px;
height:80px;
bottom:90%;
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
background-color:#73778c;
color:#950f0f;
text-align:center;
border-top:3px solid #950f0f;
border-bottom:2px solid #950f0f;
padding-top:0;
display:inline-block;
}
#h101{
margin-top:10;
margin-bottom:10;
}
#div02{
position:fixed;
top:85px;
left:0px;
right:0px;
display:inline-block;
background-color:#73778c;
color:#950f0f;
border-bottom:2px solid #950f0f;
text-align:center;
padding-top:5;
padding-bottom:5;
font-family:verdana;
font-size:12px;
}
#h301{
display:inline;
}
#h302{
margin-left :20%;
margin-right:20%;
display:inline;
}
#h303{
display:inline;
}
#div03{
position:fixed;
padding-top:0;
top:114px;
left:0%;
right:0%;
bottom:0%;
background-color:#73778c;
color:#950f0f;
border-bottom:3px solid #950f0f;
}
#div04{
font-size:30;
text-align:center;
margin-top:-30;
}
#h201{
font-family:Times New Roman;
}
#div05{
margin-left:100;
margin-right:100;
margin-bottom:100;
margin-top:-30;
padding-top:10;
padding-bottom:10;
padding-left:30;
padding-right:20;
border:3px solid #950f0f;
background-color:#e0e0d1;
}
#div06{
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
}
#div07{
margin-top:3%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01{
border:3px solid blue;
padding: 35px;
margin: 25;
}
#img02{
width:10%;
}
Also (If you get this far you don't have to answer this. I'm just curious), how do you get Fullscreen inspect elements? Whenever I use it, it takes up a portion of the page that displays the portion of the website, but I want it to display the Fullscreen results [(This has been answered)].
Trying using text-align:
#div06 {
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
text-align: center;
}
And to make the chrome dev-tools full screen, press the 3 small dots close to the side (menu button), and beside 'Dock side' there is a button to 'pop out'. This will make a new window with which you can resize as much as you need.
My friend told me I should use a table and it worked! Here is the snippet of code:
HTML
<table>
<tr>
<div id="div06">
<th><img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/></th>
<th><span class="span01"><a class="a02" style="text-decoration:none" target="_blank" href="https://www.facebook.com/groups/247367778991930/">Our Facebook Band Group</a></span></th>
</div>
</tr>
</table>
CSS
#img01
{
width:100px;
height:100px;
vertical-align:middle;
}
span.span01
{
border:3px solid #ffffff;
color:#000000;
font-family:arial;
font-size: 16px;
padding:38.5px;
margin: 25;
}
I have been working with several solutions on the web and have not found anything that works.
I am trying to do something that should be simple. I am trying to have an image of a "button" underneath an actual button. When I do this, the image always overlaps the button itself.
HTML:
<div id="button"> <!-- Container for my image and button -->
<img src="C:\Users\Hansen\Desktop\Websigte\Images\buttonUnclicked.png" />
<input type="button" value="Roofing" onclick="createImageRoof();" style="position: absolute"/>
</div>
CSS:
#button {
height:30px;
padding:3px;
position:relative;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}
Instead of using an actual image (which you won't be able to put behind anything), just make it a background image.
CSS:
#button {
height:30px;
padding:3px;
position:relative;
background: url('file:///C:/Users/Hansen/Desktop/Websigte/Images/buttonUnclicked.png');
background-repeat: no-repeat;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}
jsBin demo
Use a background image for #button if you want
<div id="button">
<input type="button" value="Roofing"/>
</div>
CSS:
#button {
width:90px;
height:30px;
padding:3px;
position:relative;
background: url(Images\buttonUnclicked.png);
}
#button > input {
position:absolute;
left:5px;
top:6px;
width: 86px;
}
If you adjust the number for the left and the top in the CSS, you can move your picture around. I called the picture #myImage in the HTML. Hope that helps.
CSS
#myImage{
position:absolute;
left:10px;
top:50px;
}
#button {
height:30px;
padding:3px;
position:relative;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}
html
<div id="button"> <!-- Container for my image and button -->
<img id="myImage" src="C:\Users\Hansen\Desktop\Websigte\Images\buttonUnclicked.png" />
<input type="button" value="Roofing" onclick="createImageRoof();" style="position: absolute"/>
</div>
I am working for this company that has hired me to turn a new home page design of theirs into html and css. In the design they gave me there is a search box in the header that they would like to be same as the one on their current webpage (http://shop.manorfinewares.com/intro.html). I am unsure how to navigate their current page's source code in order to successfully transfer the search box to the new page I am designing for them. Here is the header code that I have so far...
CSS:
#header{
position:absolute;
width:100%;
top:0;
height:107px;
min-width:600px;
border-bottom: 1px dotted #86beca;
}
#headerContainer{
position:relative;
width:100%;
margin:0 auto;
top:0;
height:107px;
max-width:1280px;
min-width:600px;
border-bottom: 1px dotted #86beca;
}
.headerUtilityContainer{
float:left;
padding-top:4px;
margin-left:8%;
width:22%;
height:103px;
}
.headerUtilityContainer img{
float:left;
margin-top:2px;
width:40%;
height:9px;
}
.headerLogoContainer{
float:left;
margin:0px;
width:40%;
height:107px;
}
.headerLogoContainer img {
display:block;
margin-top:30px;
margin-left:auto;
margin-right:auto;
width: 55%;
max-width:250px;
height: 57%;
}
.searchContainer{
float:left;
text-align:right;
font-size:70%;
padding-top:4px;
margin-right:8%;
width:22%;
height:103px;
}
.headerBorderDiv{
float:left;
width:100%;
margin:0 auto;
padding:0px;
height:2px;
border-bottom: 1px dotted #86beca;
HTML:
<div id="header">
<div id="headerContainer">
<div class="headerUtilityContainer">
<img src="images/manorSocialButtons.png" />
</div>
<div class="headerLogoContainer">
<img src="images/homePageLogo.png"/>
</div>
<div class="searchContainer">
LOGIN / REGISTER CART (0)
</div>
</div>
</div>
ANY advice will be very helpful as I am not sure where to start. I have never worked with XLS search bars in the past
It's still unclear as to what exactly you want, a right floated search bar with clear icon on input? I have created this fiddle for you, it replicates the behaviour of site you mentioned.
http://jsfiddle.net/DP22Y/
HTML
<div id="container">
<div id="utility">Utility</div><!--
--><div id="logo">Logo</div><!--
--><div id="search">LOGIN / REGISTER | CART (0)
<span class="clearable">
<input class="data_field" type="text" name="search" placeholder="Search..."/>
<span class="icon_clear">x</span>
</span>
</div>
</div>
CSS
#container{
margin:0 auto;
height:100px;
width:80%;
}
#utility, #logo, #search{
box-sizing: border-box;
color:#000;
height:100%;
float:left;
}
#utility{
background:#f1f1f1;
width:33.3%;
padding:10px;
}
#logo{
background:#e0e0e0;
width:33.3%;
padding:10px;
}
#search{
background:#e9e9e9;
width:33.3%;
padding:10px;
text-align:right
}
#search > #data_field{
margin:10px 0 10px;
padding:5px;
width:100px;
float:right;
}
span.icon_clear{
position:absolute;
right:10px;
top:0px;
display:none;
cursor:pointer;
font: bold 1em sans-serif;
color:#38468F;
}
span.icon_clear:hover{
color:#f52;
}
.clearable{
position:relative;
}
.data_field{
padding-right:17px; /* add space for the 'x' icon*/
width:100px;
}
jQuery
$(document).on('propertychange keyup input paste', 'input.data_field', function(){
var io = $(this).val().length ? 1 : 0 ;
$(this).next('.icon_clear').stop().fadeTo(300,io);
}).on('click', '.icon_clear', function() {
$(this).delay(300).fadeTo(300,0).prev('input').val('');
});
As far as the functionality is concerned, that is a different question altogether. That depends on what language you are using, do you want to make the results appear on page reload or without that using ajax, whats the db scheme etc. But the basic search would be something like this
Wrap search field with a form
Set an action and method for the form
Action will be the page the search results will be shown on