So, I am doing my mothers small business website to save her money and learning quite a bit of CSS in the process. I'm having a small problem though, I am making a Gallery page that link to 2 different pages, I want the text at http://area25dallas.com/s/gallery.htm that is sitting next to each image (showroom and staging) (also I know the images are the same, waiting on more from the momma). I want these to be on top but when I add an a{} to the following CSS controlling the image rollover effect it screws up all my other links on the website.
.imagedropshadow {
margin:30px;
padding: 10px;
border: solid 1px #EFEFEF;
}
a:hover img.imagedropshadow {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 10px #999;
-webkit-box-shadow: 1px 1px 10px #999;
box-shadow: 1px 1px 10px #999;
}
Is there a way I can make an a{} and a:hover{} specific to these links and images without messing the whole CSS of the site up? Thanks
To create CSS for a specific element there are several approaches you can take:
Create a specific class for the element. <a class="image-link"></a>
a.image-link{
//styles go here
}
You can refer to the unique context of the link. For example if it is located inside a div with ID content. <div id="content"><a></a></div>
#content a{
//styles go here
}
or if it is the only a that can be directly inside a p element <p><a></a></p>
p > a{
//styles go here
}
When adding styles to your html it is often good to consider the scope of the CSS. Note that you can declare styles multiple times for a element. So you can could make CSS for every a element inside your HTML and CSS for a elements within a specific scope.
More on CSS Selectors:
Sitepoint
Quirksmode
Net Tuts
Smashing Magazine
Have you tried this code?
img.imagedropshadow:hover {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 10px #999;
-webkit-box-shadow: 1px 1px 10px #999;
box-shadow: 1px 1px 10px #999;
}
#content .imagedropshadow {
margin:30px;
padding: 10px;
border: solid 1px #EFEFEF;
}
#content a{
}
#content a:hover img.imagedropshadow {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 10px #999;
-webkit-box-shadow: 1px 1px 10px #999;
box-shadow: 1px 1px 10px #999;
}
Ideally you should put a div around your images with a class or ID and use that ID/class value to select the anchor (a{}) tags you need. I just picked the ID of the container DIV
Remember, When you are making your selectors really specific, such as #Content .myDiv a.link instead of #Content a.link, the more specific overrules the less-specific.
Just a tip
Related
Greetings I have problem. How get rid of border-bottom on calendar view(see image 1)?
This appears if using this css.
.fc-scrollgrid-section-body > td {
border-bottom: 1px solid gray;
}
What happens if you change border-bottom to border and sets to 0px then? Well calendar loses completely its bottom row(see image 2) It also did not showing in dayView and monthView.
I tried add another custom styles to css(before that setting .fc-scrollgrid-section-body > td its border to 0px )
1)I know what (investigated in inspector) what days have fc-day style(see image 3)
I added this styles to CSS but it also not working it completely not showing red border
.fc .fc-timegrid-col{
.fc-day{
border-bottom: 1px solid red;
}
}
//and
.fc-day{
border-bottom: 1px solid red;
}
another try
.fc .fc-timegrid-cols{
.fc-day,
.fc-timegrid-col{
border-bottom: 1px solid red;
}
}
using role tag to achieve same result
[role=gridcell] {
.fc-timegrid-col
.fc-day {
border-bottom: 1px solid red;
}
}
What I want is to have day columns bottom line and grid axe do not have one.
I found solution for dayGrid and WeekGrid not for month yet.
.fc-day .fc-timegrid-col-frame {
border-bottom: 1px solid $pitch-black-100;
}
UPDATE after 3+ hours of investigating
to add line for gridView month need to add this thing to styles
.fc-daygrid-body {
border-bottom: 1px solid $pitch-black-100;
}
Hello guys I'm doing a CSS/HTML course at the moment and I have to assign a border to images on my website.
1. I gave the images a class:
<a href="https://de.wikipedia.org/wiki/Elefanten"
target="_blank"
class="images>
<img src="elefant.jpg" alt="Elefant">
In my CSS file I used following code to assign the border:
.images
{
border-left: 10px solid red;
border-top: 10px solid red;
border-bottom: 10px solid red;
border-right: 10px solid red;
}
Should be very easy code but the in Chrome it doesnt really seem to work correctly. Here a screenshot :
https://snipboard.io/VAipY8.jpg
This is probably a very beginner thing but I hope someone can help me :)
If you are trying to make the image a clickable link you should wrap it in between the <a> tag
<img src = " ">
And to add border to the image you should give class to the <img> tag not to the <a> tag.
Currently you are applying border to the link inside the <a> tag.
You're missing the closing / tag in the img tag. and the closing " in the class attribute. and the closing tag for the anchor tag. Write your code like this:
<a href="https://de.wikipedia.org/wiki/Elefanten"
target="_blank"
class="images" >
<img src="elefant.jpg" alt="Elefant" class="elephantImg" />
</a>
Change the css as follows:
img {
border-left: 10px solid red;
border-top: 10px solid red;
border-bottom: 10px solid red;
border-right: 10px solid red;
}
You can use this if you decide not to use the class attribute on the elephant image otherwise, if you decide to use the elephantImg class attribute use this css:
.elephantImg{
border-left: 10px solid red;
border-top: 10px solid red;
border-bottom: 10px solid red;
border-right: 10px solid red;
}
I have a problem with the chrome browser. When I make custom "hr" tag with a "div" and top and bottom border, there is a white 1px line between the borders ...
IE and Firefox do well.
.nav_links_container_line {
border-top: 1px solid #096ebd;
border-bottom: 1px solid lightgrey;
}
<br><br><br><br>
<div class="nav_links_container_line"></div>
I try different thing (overflow, height 0px) but with no success.
My Chrome Browser is up to date (Version 62.0.3202.94)
Thank you
Simon
Actually that is not a white space, you used light-grey color to bottom and both border top and bottom attached and it's illusion like there is white space. If you want shadow for bottom of your custom hr then you can use following css for it -
.nav_links_container_line {
border-top: 1px solid #096ebd;
box-shadow: 0px 2px 10px #000;
}
What about using a real <hr/>? With that, I don't have the rendering issue you encountered, and it actually makes more sense to use hr in its own role.
.nav_links_container_line {
border-top: 1px solid #096ebd;
border-bottom: 1px solid lightgrey;
border-left: none;
border-right: none;
}
<br><br><br><br>
<div class="nav_links_container_line"></div>
<hr class="nav_links_container_line"/>
I want to add a <div> container in place of a check box. But the <div> container takes up the entire line. I tried all sorts of "floats" but none worked.
here is my css code:
.checkbox{
border-bottom: 3px solid black;
border-top: 3px solid black;
border-right: 3px solid black;
border-left: 3px solid black;
width:15px;
height:15px;
}
With The inline div will not occupy the line
use this
.checkbox{
border-bottom: 3px solid black;
border-top: 3px solid black;
border-right: 3px solid black;
border-left: 3px solid black;
width:15px;
height:15px;
display:inline;
}
Style it with this: .inline {display: inline}
Use inline tag i.e.
inline { display : inline}
Inline is doing the trick, but you are really just avoiding the problem. You could have just set a width on the div and the label or whatever and floated them. By default block-level elements are 100% width. At some point, you are going to want to have some of the options that being display block allows - and inline doesn't. And you will probably also want to have some of the options that inline elements have, like vertical alignment. I suggest trying inline-block - I've been getting tons of use out of it. Give hit a spin: fiddle
HTML
<input type="checkbox" name="check-box-01" />
<div class="check-box-replacement"></div>
<label class="check-box-label" for="check-box-01">
Label for this checkbox
</label>
CSS
input[type="checkbox"] {
display: none;
}
.check-box-replacement {
width: 2em;
height: 10em; /* just to prove a point */
background-color: red;
}
.check-box-replacement, .check-box-label {
display: inline-block;
vertical-align: middle;
}
I think an image best describes this: JS FIDDLE HERE: http://jsfiddle.net/fp2Ak/
What I want to do, is for those lines to actually touch. Each one is a span with a number in. within a td. Note: some Tds contain multiple spans, for example, 218 and 222. (you can see tr with faint blue lines.)
As you can see it does touch at one point, as this is the biggest element in the column (including header). But this is rarely the case. How would I stretch it to touch in ALL Cases.
You can suggest using someting other than span, but please note that I do need more than one thing in a td, and hence cant be applied to the td.
The CSS that governs most of this so far:
table.Timetable td , table.Timetable th
{
border-spacing: 0px;
padding: 0px;
}
.bookingStart, .bookingMiddle, .bookingEnd
{
background-color: white;
color: Black;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.bookingStart
{
border-left: 2px solid black;
}
.bookingEnd
{
border-right: 2px solid black;
}
Oh and preferabblly Id like to be able to pad the cells again, as the th clearly have been merged together.
JSfiddle of it here: http://jsfiddle.net/fp2Ak/
spans have to be floated in order to be affected by width, so you could do something like:
td span{float:left; width:100%; min-width:100%;}
or more accurately if I am understanding your css properly:
.bookingStart, .bookingMiddle, .bookingEnd
{
background-color: white;
color: Black;
border-top: 2px solid black;
border-bottom: 2px solid black;
float:left;
width:100%;
min-width:100%; /*some browsers like this better*/
}
Your should put your borders on the td's not the spans. This will allow you to also put some padding on the td's to make even the long numbers look good.