css image sprite hover background conflicts with my text hover - css-sprites

My image sprite works fine as long as I delete my hover text links on the same css page. The hover in the image sprite and the hover in the text link style seem to be conflicting. How do I get the text link styles back? Do I use a separate css for the text link, will it still conflict?
HTML
><div id="page-bg"><img src="x" width="100%" height="100%" /></div>
<div id="container">
<div id="header1">
<ul id="navlist1">
<li id="login"></li>
<li id="getmail"></li>
<li id="quotebtn"></li>
</ul>
</div>
</div>
CSS
>body { color:#333; font-size: 9px; }
#page-bg {
position:fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#container {
position: relative;
background: #C35A26;
width: 900px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
#header1 {
width: 900px;
height: 232px;
position: relative;
background-image:url(x)
}
#navlist1 {position:relative;}
#navlist1 li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist1 li, #navlist1 a{height:44px;display:block;}
#login{left:0px;width:94px;}
#login{background:url('x') 0 0;}
#login a:hover{background: url('x') 0 -363px;}
#getmail{left:94px;width:93px;}
#getmail{background:url('x') -94px 0;}
#getmail a:hover{background: url('x') -94px -363px;}
#quotebtn{left:775px;width:125px;}
#quotebtn{background:url('x') -775px 0;}
#quotebtn a:hover{background: url('x') -775px -363px;}
a {
font-family: Arial, Helvetica, sans-serif;
font-size:0.75em;
color: #900;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #900;
}
**a:hover {
text-decoration: underline;
color: #F00;**
}
a:active {
text-decoration: none;
color: #F60;

I got it to work now. All I did was open a blank page and added css to the page properties for links and headers, etc., to see how they layed out the css and re-arranged my css to be like the one that dreamweaver makes as far as where the tags are in order. Anyway, it fixed the problem.

Related

How to create a Matrix display from a list in a model

I have a model that called LinksListWidgetModel that contains an IEnumerable property named Links that contains a list of my website links.
In my Razor view, I have two columns (i.e. one for the grid "col-md-8" and one for another tool "col-md-4". I have a foreach loop that adds each link to the grid tool. I am trying to achieve the following look: Matrix View, however the buttons don't wrap after three, it just continues throughout the width of the page. I am using Bootstrap4.x and flexbox.
I tried following the example in this question: How I can make nice looking matrix of buttons with bootstrap 3?, but that didn't fix the issue either.
Here is my code:
LinksListGrid.cshtml:
#if (Model == null)
{
#Html.Partial("_WidgetNotConfigured") }
else
{
<div class="btn-group btn-matrix" role="group">
#foreach (var link in Model.Links)
{
<div class="linkContainer-gridItem">
<button>
<a class="linkContainer-gridItem-link btn btn-default" href="#link.Url">
#if (!string.IsNullOrEmpty(link.Icon))
{
<div>
<i class="icon #link.Icon"></i>
</div>
}
#link.Label
</a>
</button>
</div>
}
</div>
}
LinkContainer.scss:
.linkContainer {
padding: 1rem;
margin-bottom: 2rem;
position: relative;
background: #fff;
border-radius: 8px;
border: 1px solid #dddfe2;
.linkContainer-title {
color: #fff;
background: $colorBrandDarkBlue;
padding: 1rem;
border-radius: 5px;
margin: -.5rem -.5rem 1rem -.5rem;
font-weight: 400;
}
.linkContainer-list {
list-style: none;
padding: 0;
margin-bottom: 0;
font-family: "Montserrat",sans-serif;
.linkContainer-item {
position: relative;
.linkContainer-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: .75rem .5rem;
color: $colorBrandBlue;
font-weight: 400;
font-size: 18px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
background-color: transparent;
font-family: "Montserrat",sans-serif;
}
.icon:before {
font-size: 30px;
margin-right: 1rem;
}
}
.linkContainer-item:after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
border-top: 1px dotted;
opacity: .25;
}
}
.linkContainer-grid {
width: 290px;
display: block;
margin: 0 auto;
padding: 0;
padding-bottom: 19px;
font-family: "Montserrat",sans-serif;
text-align: center;
.linkContainer-gridItem {
background-color: $colorBrandBlue;
border-radius: 25px;
width: 120px;
height: 120px;
margin: 10px;
display: inline-block;
vertical-align: top;
.linkContainer-gridItem-link {
color: white;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 20px 10px;
}
.icon {
font-size: 30px;
margin-bottom: 0.25rem;
}
}
}
#media screen and (max-width: 767px) {
&.linkContainer-gridLayout {
padding: 0;
}
}
}
.btn-matrix {
> .btn {
&:nth-child(3n+4) {
clear: left;
margin-left: 0;
}
&:nth-child(n+4) {
margin-top: -1px;
}
&:first-child {
border-bottom-left-radius: 0;
}
&:nth-child(3) {
border-top-right-radius: 4px !important;
}
&:nth-last-child(3) {
border-bottom-left-radius: 4px !important;
}
&:last-child {
border-top-right-radius: 0;
}
}
}
It ends up looking like this: Grid View
How can I change this to make it look like the first screenshot's matrix/grid display? After every 3 buttons it goes on the second line.
I don't think clear:left; will work on flexbox. But there are other ways to do it.
HTML & SCSS way
I think you would be better off just styling .btn-matrix yourself, without mixing .btn-group styles, because Bootstrap .btn-group brings in lots of noice on its .btn children, such as border-radius, border, etc. You would need to style them using your own styles anyway so why bother.
I think the following structure should be generic enough you can use to construct a matrix:
<div class="btn-matrix btn-matrix-white" role="group">
<a class="btn" href="#">
<div class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" />
<i class="fas fa-chart-bar fa-stack-1x" />
</div>
Reports
</a>
...
</div>
First of all, in your original HTML structure, you had a button that wraps an anchor link. That's not necessary because Bootstrap has classes to style an anchor link to just look like a button.
Secondly, I am using icon stacking method to construct icons with circle backgrounds. You can read about it here: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
Finally, here is the styles:
$numOfMatrixItemPerRow: 3;
$matrixItemBorderWidth: 1px;
.btn-matrix {
display: flex;
flex-flow: row wrap;
box-shadow: 0 0 1rem #ccc;
border: 1px solid transparent;
border-radius: .25rem;
> .btn {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 0;
padding: 5%;
width: calc(100% / #{$numOfMatrixItemPerRow});
border-radius: 0;
}
&.btn-matrix-white {
> .btn {
background-color: #fff;
border-right: $matrixItemBorderWidth solid #ddd;
border-bottom: $matrixItemBorderWidth solid #ddd;
.fa-stack-2x {
color: var(--primary);
}
.fa-stack-1x {
color: #fff;
}
&:nth-child(#{$numOfMatrixItemPerRow}n) {
border-right: none !important;
}
&:last-child {
border-bottom: none !important;
}
}
}
}
Really nothing tricky there except you would need to use SASS Interpolation to involve $numOfMatrixItemPerRow variable into calculations:
Display .btn-matrix as a wrappable flex row
Set the width of each button to be 100% / $numOfMatrixItemPerRow so that each row will contain the exact number of items before breaking into new rows
Display .btn as flexbox column so that you can easily align the icons and text there
Set the right and bottom border of each button, with exceptions of the last one on each row and last one
demo: https://jsfiddle.net/davidliang2008/1wqost69/201/
ASP.NET MVC way
Now since you're using ASP.NET MVC, I think there is another approach you can consider. That is, in the loop where you loop though each link from the model, you can define a variable there and do something like:
<div class="btn-matrix">
#for (int i = 0; i < Model.Links.Count(); i++)
{
var link = Model.Links[i];
if (i % numOfItemsPerRow == 0)
{
<div class="row">
}
<div class="col-md-4">
<a class="btn" href="#link.Url">
#if (!string.IsNullOrEmpty(link.Icon))
{
<div>
<i class="icon #link.Icon"></i>
</div>
}
#link.Label
</a>
</div>
if ((i+1) % numOfItemsPerRow == 0 || i + 1 == Model.Links.Count())
{
</div>
}
}
</div>
I'm just making things up but hopefully you see where I am going.

CSS Issue Causing White Space at Top of Page on Safari Mobile (iOS)

There is a horizontal white bar, approximately 15px in height, across the top of every one of my pages when viewing my website's mobile version. Here is the relevant CSS code and HTML markup:
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
</body>
</html>
I have tried many combinations of CSS properties (primarily "margin" and "padding") and have spent a lot of time searching the Web. Nothing seems to work.
Please let me know if you need anything. I will be checking this thread regularly tonight.
Just assign h2 margin:0. and in body margin:0 and padding:0.
Because by default h2 tag have margin inspect h2 tag.
.navigationtext h2 {
margin: 0px;
}
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
padding: 0; /*Added*/
margin: 0; /*Added*/
}
.navigationtext h2 {
margin: 0px; /*Added css for h2 tag*/
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
It's caused by default margins on the body and h2 elements.
All you need is margin-top: 0; on these two elements.
body {
margin-top: 0; /* Remove top margin from body */
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
}
.navigationtext h2 {
margin: 0px;
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
h2 {
margin-top: 0; /* Remove top margin from h2 */
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>

iOS a:visited link showing default purple color

On my site, I have a few footer links that are showing the wrong border color for iOS devices when the link is visited. This is happening on Chrome and Safari for iOS.
Desktop
iOS
I searched through my code and I am not setting this style anywhere.
I have tried reproducing this in a fiddle/codepen, but since they don't let you redirect, I can't see what the a:visited looks like for mobile.
Code
.productsalessection {
width: 34%;
padding-top: 10px;
padding-right: 1%;
padding-bottom: 10px;
float: left;
font-family: Lato, sans-serif;
}
.productsalesbox {
width: 100%;
padding: 14px 12px;
float: left;
border-right: 1px solid #e2e2e2;
}
.productsalesbadge {
width: 80px;
height: 100%;
margin-right: 6px;
float: left;
border: 1px solid #ddd;
border-radius: 4px;
background-color: white;
}
img {
max-width: 100%;
vertical-align: middle;
display: inline-block;
}
.productsalesheading {
margin-top: 3px;
color: #444;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
}
.productsalestext {
font-size: 12px;
line-height: 14px;
color: #777;
}
<a class="w-clearfix productsalessection" target="_blank" href="http://www.google.com">
<div class="w-clearfix productsalesbox">
<div class="productsalesbadge"><img src="http://www.chicmarket.com/images/SJ.svg">
</div>
<div class="productsalesheading">Trusted</div>
<div class="productsalestext">We proudly maintain a strong relationship with our customers.</div>
</div>
</a>
Changing the color of the a:visited works.
a:visited {
color: #C8C8C8;
}
But this solution is not ideal because this will mess with other a tags on my site.
I have also tried.
a:visited {
color: rgba(0, 0, 0, 0.0);
}
But instead of making the color transparent, it just makes the border black.
I don't normally post links to external sites, but if you would like to take a look and see the problem for yourself, you can check it out here.
Is there a simple fix for this that doesn't require me to set the a:visited color for each a tag that I have?
Looks like this was only happening to borders of divs inside of <a> tags on mobile. In order to fix this I had to not only set color: rgba(0, 0, 0, 0.0); for a:visited, but I had to select the specific div that had the border.
a:visited .productsalesbadge {
color: rgba(0, 0, 0, 0.0);
}
This completely removed the purple visited border I was seeing on mobile.

I see a gap between my img and my right box

I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox), however, on the iPhone/iPad there is a tiny gap/space between the IMG and right box.
It works fine in Firefox. What is the problem?
Here's an inline link to JsFiddle.
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/>
<div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
#wrapper {
border-top: 8px solid #457b91;
max-width: 488px;
margin: 0 auto;
overflow: hidden;
}
#wrapper img {
width: 32%;
float: left;
}
#subject {
background-color: green;
float: right;
width: 68%;
padding-bottom: 32%;
position: relative;
}
#subject_wrapper {
padding-top: 12%;
position: absolute;
height: 100%;
width: 100%;
}
#subject span {
font-family: Thonburi;
font-size: 34px;
color: #ffffff;
display: block;
padding: 0 20%;
}
#subject span:nth-child(2) {
font-size: 18px;
line-height: 8px;
}
I don't have an iPd or iPhone to hand to check this, but try commenting out the space between your elements, thus:
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/><!--
--><div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
It's a pretty ridiculous fix, but it work for inline block elements, like menus made up of LIs.

twitter feed on website that is in a repeating box confusion

I have a twitter feed on my website and i'm trying to put it in a box that has a top, a middle section that repeats as needed to accommodate text and a bottom image as well as an image below the bottom. the problem is that originally the feed was in a box that didn't repeat or anything the feed was just on top of the box, but now i can't get the box set up right or the feed to do it's thing. here is my code:
#twitter_update_list {
overflow: hidden;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
line-height: 20px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#twitter_update_list li {
font-family:Arial, Helvetica, sans-serif;
color:#000000;
list-style: none;
}
#twitter_update_list li a {
color:#f7f6e7;
text-decoration: none;
}
#twitter_update_list li a:hover {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #f7f6e7;
}
.twitter_top {
position:absolute;
left:632px;
top: 39px;
width: 333px;
height: 27px;
background:url(twittertop.png);
}
.twitter_mid {
width: 333px;
background:url(twittermiddle.png);
background-repeat:repeat-y;
padding: 0 15px;
}
.twitter_bot {
width: 333px;
height: 27px;
background:url(twitterbottom.png);
background-repeat:no-repeat;
margin-bottom: 0px;
}
.twitter_whale {
width: 140px;
height: 67px;
left: 900px;
background-image: url(Layer-6.png) no-repeat;
position: absolute;
left: 9px;
top: 9px;
line-height: 13px;
}
<div class="twitter_top"></div>
<div class="twitter_mid">
<ul id="twitter_update_list"></ul>
</div>
<div class="twitter_bot"></div>
<div class="twitter_whale">
<div id="twitter_div"><ul id="twitter_update_list"><li></li></ul></div>
(update list i'm not putting in here because it's just the js)
</div>
<div id="twitter_box">
<div id="twitter_top">
</div>
<div id="twitter_middle">
</div>
<div id="twitter_bottom">
</div>
</div>
I would think it would make more sense to contain them all in one div, from here you can set your styles, since you want the middle part to expand leave the height dynamic.

Resources