I’m working on my footer and I have some contact info floating to the right and the text is aligned right.
Below that I wanted to put social media links. I wanted “Follow me at:” then icons for Facebook and Instagram. I gave these icons as well as others in my footer the class “icon”. In my css I targeted them and gave them color, pseudo classes, size, etc. For some unknown reason, the first icon isn’t being targeted. I even copied and pasted the code for the second over the first one and it’s still no targeted. Is there a rule I’m missing? I haven’t messed with spans much, so I may be screwing that up. I wanted it inline, unlike the other contact where the small icons sit in their own block above the text. That was a happy mistake. I like it.
Anyway, here's the code:
HTML:
<div class="soc-media">
<span>Follow EmJ Pilates on:</span>
<span class='icon'></i></span>
<span class='icon'></i></span>
</div>
CSS:
.icon{
color: goldenrod;
font-size: 200%;
}
.icon a:link{
color: goldenrod;
}
.icon a:hover{
color: #bbbbbb;
}
And here’s a link to the screen shot:
https://www.dropbox.com/s/2d2r0uzyh6yyjtd/Screenshot%202015-07-24%2011.39.20.png?dl=0
Related
I’m a beginner web developer, currently practicing by putting together a simple website. In my header I want to have my main title sandwiched between two identical images, all on one line. For some reason setting their shared div's display property to inline-block isn't achieving this like usual, while providing a more specific selector to just the h2 does. I've commented out the style that is working.
#siteName {
display: inline-block;
}
/* #siteName h2 {
display: inline-block;
} */
<div id="siteName">
<img src="./images/PurplePalace.png" alt="A Purple Floating Castle">
<h2 class="heading">The Purple Pizza Palace</h2>
<img src="./images/PurplePalace.png" alt="A Purple Floating Castle">
</div>
Any insight into what the difference is here and why it is happening would be greatly appreciated. Apologies if I'm just missing something simple, I want to understand the situation, but have been unable to find an explanation.
I am trying to make a start page of sorts, and I want it to look somewhat like this: https://imgur.com/zjzKyRD (poorly made, but the program I used was really bad(I miss mspaint))
I originally used buttons, which made it really easy to link and customise, but I had some issues with size, so I tried with a div, but I can't seem to make the whole div box a clickable link. If I am able to figure that out, I still need to place the boxes in specific places and I have no idea how.
The question: How can I make these boxes, place them in a grid like formation and have them link to different sites? Would it also be possible to make a function where I can hover over one of the "sites" and it would show me some information about it? (manually entered)
Please keep in mind I'm really new to this, so an explanation would be nice :P Thanks.
Edit: Didn't include any code, here it is:
CSS ("borrowed" from w3)
.button {
margin-left: 150px;
margin-top: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;}
.button1 {
background-color: #ffbf80;
color: black;
border: 2px solid #ffbf80;
min-width: 350px;
width: 350px;}
.button1:hover {
background-color: white;
color: #ffbf80;}
HTML:
Google
Thats just one of the buttons, but the others are basically the same, but with different links, margins and colours(colors?).
When using multiple boxes they appear below each other, not besides each other. I have messed around with a bunch of different margin settings, a few things I found online when browsing around but nothing seems to align them properly.
First of all I'd suggest that you use some grid framework, such as Bootstrap or Foundation. Nobody writes websites in plain HTML anymore.
Secondly, I think you can use the a-tag and change the css so that it's an inline-box. Especially if you're only going to use them as links and not do anything fancy (such as some dynamic animations). You should probably have a container class around those to represent a row. As follows:
<div class="container">
<a class="linkbox" href="link1"> Link 1 </a>
<a class="linkbox" href="link2"> Link 2 </a>
<a class="linkbox" href="link3"> Link 3 </a>
</div>
<div class="container">
<a class="linkbox" href="link4"> Link 4 </a>
<a class="linkbox" href="link5"> Link 5 </a>
<a class="linkbox" href="link6"> Link 6 </a>
</div>
Check out this fiddle with accompanied css https://jsfiddle.net/wwk4tyzw/2/
Just because it's probably going to be more relevant in the future i want to throw this in here: https://drafts.csswg.org/css-grid/
I need to do school work. I need to link the button and put it to the right side of my page but every time i put the link or button to the right it does not work.
What html code should I put and in what order to have button on the right and link to it. On the photo is what I have right now.
This is a simple thing - as noted above - you need to float it to the right.... BUT if you are floating something - this will have consequences on the next elements - so you will also need to clear the float.
Another thing to think of - is that a p element is a block level element - so will take up the entire row - whereas an a element is an inline level element - meaning it won't. This is why doing it this way causes the button to be on the previous line up from the p - which is on the next row. You can alter that - but it needs to be planned out a bit.
Just so you understand the structure of the HTML - this may also allow you to have a different structure to the code. Also - I only put in the text that showed up in the image so it is not a full row.
Also note that I have applied the CSS to the element in the CSS portion as opposed to inline styling - this is better code structure as it keeps the HTML and CSS separate. I also whacked in some styling (from https://www.thoughtco.com/styling-links-with-css-3466838) to give link a button like look.
.button{
float:right;
border-style: solid;
border-width : 1px 4px 4px 1px;
text-decoration : none;
padding : 4px;
color:black;
border-color : #69f #00f #00f #69f;
}
.button:hover {
border-color: black;
color: #00f ;
}
p{
clear:both
}
<a class="button" href="2.html">Next</a>
<p>The most important reason of why you should remain heal</p>
If you put this html code element in:
<button>this page
You will get this:
<button>this page
</button>
And this to your CSS:
button {
float: right;
}
You will get at end this:
<style>button {
float: right;
}
</style>
<button>this page
</button>
You have to add a little bit of CSS.
<button style="float:right;">
i need help. 1) Products images, png, are not transparent on a products page but they are on a single product page. And they are ok on a stacked products layout but not on a grid. And we need grid layout. You can choose grid or stacked layout in the theme settings. (Nova theme)
2) Also on flexslider. This is also important to us because we want to play with various frames and we need that transparency..
I spent days researching this and found no solution, my head is full and confused. Can you help?
The best way to do this with Big Cartel's system is to head to Customize Design > Advanced > CSS, and paste this in at the very bottom:
#products_page .canvas.grid #products .product a .product_images {
background:none;
}
That way you don't need to go digging for the line of code in your editor to modify, and if you change your mind down the road you can just delete these 3 lines quickly and easily.
Here is your HTML:
<section class="product_images">
<img src="http://images.cdn.bigcartel.com/bigcartel/product_images/141424843/max_h-300+max_w-300/traka2.png" class="fade_in" alt="Image of yellow melon. mellow">
</section>
The <section> tag has a background color applied to it via the class product_image. Here is the CSS for that class:
#products_page .canvas.grid #products .product a .product_images {
width: 100%;
min-height: 100%;
margin: 0;
background: transparent;
background: #efefef;
}
This CSS selector appears on line 1471 of theme.css. Remove the second background declaration, background: #efefef; and the color that you see will go away. In CSS if a rule is repeated later with the same specificity it will be overridden. Here is a link to learn more about CSS, the cascade, specificity etc.
Think of your <img> element as sitting on top of your <section> element. Part of your image has transparency, like a window, so anything sitting "below" it will show through. Your <section> element had a light gray background color which was showing through the transparency of your PNG.
I have a page which has some data in form of tables
Currently, for one of the columns(which is a link) I need to display a text on hover and was able to do it successfully by giving the title in the tag. Now , I tried applying css to the text on hover and following is the snippet
CSS
a.changes:hover {text-decoration: none; }
a.changes p {position: absolute; left: -9999px;border-style:solid; border-color:black; border-width:1px;}
a.changes:hover p {left: 5%; background: #ffffff; size:1px;}
and in the html, I removed the title from the a tag and gave it in inside tag
<a href='#' class='changes' onclick='AAA'><font color=blue>XYZ</font><p style='width:100px;'>TextToBeDisplayedOnHover</p></a>";
The above snippet works fine on the current display. But when I scroll down the page and then try to display to text on hover by selecting the last element, then the title is not getting displayed at well. My guess the text on hover has gone beyond the display page vertically.
Someone please help me in this. I need this hover to work for all the rows in the table in the current page as well as the next pages and not just the current display alone as happens in my case
Thanks in advance.
I don't quite understand your problem but you have 100 pixels wide container so the "TextToBeDisplayedOnHover" doesn't fit into the container. You could try this (or widen the container):
a.changes:hover p {left: 5%; background: #ffffff; size:1px;width:100px;overflow:scroll;}
Lose the inline styles in the hovering ´p´. (You're using CSS already.)
<a href='#' class='changes' onclick='AAA'>XYZ<p>TextToBeDisplayedOnHover</p></a>
If you use spaces in the hovering text ("Text To Be Displayed On Hover") you'll be less likely to run out of space.
If blue isn't the the default font color, add this to your styles:
a {color:blue;}