I am trying to add social media buttons to my WordPress page via HTML code:
However, they styling does not work, they take up the entire page and are much too big. Why does this happen, and can I fix it?
Here is the code:
<style type="text/css">
#share-buttons img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
</style>
<div id="share-buttons">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/facebook.png" width="35" height="35" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/twitter.png" alt="Twitter" />
</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/google.png" alt="Google" />
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/linkedin.png" alt="LinkedIn" />
</a>
<!-- Pinterest -->
<a>
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/pinterest.png" alt="Pinterest" />
</a>
<!-- Email -->
<a href="mailto:?Subject=Simple Share Buttons&Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://simplesharebuttons.com">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/email.png" alt="Email" />
</a>
</div>
When a style is being overwritten by another style, the best fix is to use a stronger selector:
#share-buttons a img { /* added 'a' */
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
For a more in-depth explanation of CSS specificity, read this CSS Tricks article.
instead, define a specific size for the 'a' tags and set the images to be 100% width.
#share-buttons a { width:35px, display:inline-block}
#share-buttons a img {width: 100%}
also, remove the width parameter in the 'a' tags
Add this,
#share-buttons {
width: 100%;
height:auto;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
#share-buttons > a{
text-decoration:none;
}
#share-buttons > a > img{
width:35px;
height:35px;
}
#share-buttons img {
max-width: 100%;
height: auto;
}
#share-buttons a {
width: 35px !important;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline-block;
}
Related
enter image description here
html:
<div id="header" class="head">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
<map name="image">
<area shape="circle" coords="50,50,50" href="opendiary.html" />
</map>
<button class="menubar btn a1">Profile</button><button class="menubar btn a2">Open Diary</button><button class="menubar btn a3">Message</button><button class="menubar btn a4">Options</button>
</div>
css:
#header {
min-width:230px;
max-width:1366px;
min-height: 100px;
position:relative;
border: 2px dashed #dddddd;
background-color: #555f00
}
#header button {
display: inline-block;
position: relative;
float: left;
}
I want all 4buttons to be aligning at bottom. But I cant understand how? I have seen other question but as I am using 4 buttons because of position:absolute and float:right all overlap on each other. How can I solve this?
The following should give you the result you're looking for. (you'll still need to add any responsive behavior the banner might need (as it will break at smaller screen sizes)
/* for IE9- render these elements correctly */
header,
nav {
display: block;
}
/* header container */
.head {
background-color: #555f00;
border: 2px dashed #ddd;
max-width: 1366px;
min-height: 100px;
min-width: 230px;
position: relative;
overflow: hidden;
}
.head__img-area {
float: right;
}
.propic {
width: 100px;
height: 100px;
}
.head__nav-area {
position: absolute;
bottom: 0;
left: 0;
padding: 8px;
}
.head__nav-area .btn {
display: inline-block;
/* dummy styling */
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, .5);
background: rgba(255, 255, 255, .3);
padding: 8px;
color: #fff;
text-decoration: none;
}
.head__nav-area .btn:hover,
.head__nav-area .btn:focus {
background: rgba(160, 160, 160, .5);
border-color: rgba(40, 40, 40, .9);
}
<header id="header" class="head">
<div class="head__img-area">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" class="propic" />
<map name="image">
<area shape="circle"
coords="50,50,50"
href="opendiary.html"
alt="insert descriptive text here" />
</map>
</div>
<nav class="head__nav-area">
<a href="profile.html" class="menubar btn a1">
Profile
</a>
<a href="opendiary.html" class="menubar btn a2">
Open Diary
</a>
<a href="message.html" class="menubar btn a3">
Message
</a>
<a href="#" class="menubar btn a4">
Options
</a>
</nav>
</header>
So what the above is doing is floating the new img-area wrapper to the right, as per your screen shot. The entire nav container is then position absoluted and set to the bottom / left of the header.
I cleaned up the link/button combos you had there... it's invalid to have buttons inside of anchor elements, so I put the classes of the buttons on to the <a>s and made up some dummy styling to display them.
While I used position absolute and floating to achieve this layout, I primarily used them because they were utilized in the code you provided. Since you're using an image map, I'm guessing this may be an older project? And based on that assumption, I figured flex box wouldn't be a solution for you due needing at least IE10 for browser support.
However, if you can use flexbox, I'd highly recommend you check out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
As it could have been used to achieve this layout (and would be easier to work with for responsive websites)
good luck!
Wrap the buttons and their containers in a div a position that div absolute and align it bottom.
#header {
min-width:230px;
max-width:1366px;
min-height: 100px;
position:relative;
border: 2px dashed #dddddd;
background-color: #555f00
}
#header button {
display: inline-block;
position: relative;
float: left;
}
/**Added this**/
.btn-cont {
position: absolute;
bottom: 0;
/** right: 0; this is to align buttons right**/
}
/**Uncomment this to float image right
img {
float: right;
}
<div id="header" class="head">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
<map name="image">
<area shape="circle" coords="50,50,50" href="opendiary.html" />
</map>
<div class="btn-cont"><!--Added this div-->
<button class="menubar btn a1">Profile</button><button class="menubar btn a2">Open Diary</button><button class="menubar btn a3">Message</button><button class="menubar btn a4">Options</button>
</div>
</div>
Surround all your buttons with a div container and give this div container some CSS. This could look at the end like this:
#header {
min-width: 230px;
max-width: 1366px;
min-height: 100px;
position: relative;
border: 2px dashed #dddddd;
background-color: #555f00
}
#header .buttons {
position: absolute;
left: 0;
bottom: 0;
}
/* To replace the <a> link */
#header .buttons form {
display: inline;
}
/* To style the <a> link more like a <button> */
#header .buttons a {
font: bold 13px sans-serif;
text-decoration: none;
background-color: #E0E0E0;
color: black;
padding: 2px 6px 2px 6px;
border: 1px solid #CCC;
border-right-color: #333;
border-bottom-color: #333;
font-weight: normal;
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
}
<div id="header" class="head">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
<map name="image">
<area shape="circle" coords="50,50,50" href="opendiary.html"/>
</map>
<div class="buttons">
<a href="profile.html" class="menubar-link">
Profile
</a>
<form action="opendiary.html" method="get">
<button type="submit" class="menubar btn a2">Open Diary</button>
</form>
<form action="message.html" method="get">
<button type="submit" class="menubar btn a3">Message</button>
</form>
<button class="menubar btn a4">Options</button>
</div>
</div>
Float is often considered as bad practise. So try whenever to avoid this option.
Also you should not use <button> tags inside <a> tags. I added two possible ways to avoid this.
This answer helped me: Answer to: How to align content of a div to the bottom?
I have an image and I'm looking at basic customisation for a small website I'm creating in HTML.
I understand you can chamfer an image, as seen on this question here, that gives a 45Degree cut.
I'm hoping for a more rounded Chamfer on each corner? (I believe it's called a Fillet but I'm not 100% sure of the correct terminology.
As seen in the second picture:
Using border-radius: 16px 16px 16px 16px; works by putting it in the img class, but I don't want all images affected.
What do I need to do to allow only select images to be chamfered?
I tried this, but it didn't work:
.img-chamfer {
border-radius: 16px 16px 16px 16px;
}
<div class="img-chamfer">
<img src="Test.png" >
</div>
My exact code can be found here: https://jsfiddle.net/netazv40/
.main {
color:#29abe2;
text-align: center
}
.img-wrapper {
display: inline-block;
}
.img-wrapperPadding {
display: block;
margin: 0 auto 32px;
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
<div class="main">
<div class="img-wrapper">
<div class="img-wrapperPadding">
<img src="http://placehold.it/350x208" width="350" height="208"><br/>
<img src="http://placehold.it/100x50" width="100" height="50">
</div>
</div>
<div class="img-wrapper">
<div class="img-wrapperPadding">
<img src="http://placehold.it/350x208" width="350" height="208"><br/>
<img src="http://placehold.it/100x50" width="100" height="50">
</div>
</div>
</div>
I only need the larger image to be affected/chamfered.
solution after providing your fiddle
You can use the following CSS rule:
.img-wrapperPadding img[width="350"] {
border-radius:16px;
}
Demo: https://jsfiddle.net/netazv40/3/
... or add a class to your image and solve it like the following:
.rborder {
border-radius:16px;
}
<img class="rborder" src="http://placehold.it/100x100"/>
Demo: https://jsfiddle.net/netazv40/1/
solution #1 (using flexbox):
.img-chamfer {
border-radius:16px;
display:inline-flex;
overflow:hidden;
}
<div class="img-chamfer">
<img src="http://placehold.it/100x100">
</div>
solution #2 (using inline-block):
.img-chamfer {
border-radius:16px;
display :inline-block;
overflow:hidden;
font-size:0;
}
<div class="img-chamfer">
<img src="http://placehold.it/100x100">
</div>
You can use border-radius like,
div {
border: 3px solid;
border-radius: 30px;
}
i'm trying to make a bit of a copy of this website but i'm having issues with the gallery part, my images simply won't behave the same as the website im attempt to copy. Obviously change around once complete.
Here is a JSFiddle of my code if that helps.
Here is my CSS for the section:
/* Gallery Start */
.box.style2 header {
display:inline-block;
background:#FFF;
padding:2em 3em;
margin:0px;
}
.box.style2 .inner {
position:relative;
padding:40px 0 0px 0;
}
.box.style2 {
text-align:center;
}
.box.style2 .inner:after {
content: '';
display:block;
position:absolute;
top:0;
left:50%;
height:100%;
border-left:solid 1px #FFF;
}
.box.style2 .inner .row {
position:relative;
}
.row {
border-bottom:solid 1px transparent;
box-sizing:border-box;
}
.row:after, .row:before {
content: '';
display:block;
clear:both;
height:0;
}
.row > * {
float:left;
}
.box.style2 .inner .image {
position:relative;
z-index:1;
padding:20px;
}
.image.fit {
display:block;
width:100%;
}
.gallery-image {
width:25%;
margin-left:0px;
}
/* Gallery END */
And here is my HTML:
<!-- Start of gallery -->
<article class="container box style2">
<header>
<h2>Recent Work</h2>
<p>Below are images of our recent completed work</p>
</header>
<div class="inner gallery">
<!-- Gallery Images -->
<div class="row">
<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="images/01.jpg" />
</a>
</div>
<!-- Image END -->
<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="images/01.jpg" />
</a>
</div>
<!-- Image END -->
<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="images/01.jpg" />
</a>
</div>
<!-- Image END -->
<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="images/01.jpg" />
</a>
</div>
<!-- Image END -->
</div>
</div>
<!-- Gallery Images END -->
</article>
<!-- End of gallery -->
Here is a screenshot of what my images look like, as you can see, they are not behaving at all.
I think this is because I don't have these styles, but I can't for the life of me figure out what they mean, all that I can understand from Google is that they are classes made from numbers:
.row.\30 \25 > * {
padding: 0px 0 0 0px;
}
/* Inherited from: #media screen and (max-width: 1680px}*/
.row > * {
padding: 40px 0 0 40px;
}
.\33 u, .\33 u\24 {
width: 25%;
clear: none;
margin-left: 0;
}
edit: so after readying wero's answer, am I understanding this properly?
.row.\30 \25 > * would basically target a class with the name 0 within the row class, and then the element within 30 with class 25 and then style the next element within that?
The \nn<space> syntax is a character escape sequence for the Unicode character U+00nn.
This article describes the topic very nicely.
Using the escape sequences they build valid CSS class identifiers.
Why do they do this? Can only speculate: For brevity, to generate unique names?
EDIT to answer the extended question:
.row.\30 \25 > * is a selector for all elements (*) whose parent element (>) has the CSS class row and the CSS class consisting of the two characters U+0030 and U+0025.
I want to click only on left side where is letter "F" and other section to make not clickable. I am trying with css class diver but not work.
Html
<a href="https://www.google.com" class="diver" target="_blank">
<div style="margin-top:0px;">
<img src="http://www.upslike.net/imgdb/facebook-4846a5.png" width="30%" height="60px">
</div>
</a>
CSS
<style>
.diver a{
display:block;
width:100px;
height:60px;
}
</style>
CodePen
If the image must be in the HTML.
Note: The "universal reset" (the * section) have an effect on elements outside the scope of the current question. Headers, paragraphs and lists spring to mind.
* {
margin: 0;
padding: 0;
}
.diver-wrap {
display: inline-block;
position: relative;
margin: 1em;
}
a.diver {
position: absolute;
top:0;
left: 0;
width:100px;
height:60px;
background: rgba(0,0,0,.25); /* for visual reference */
}
<div class="diver-wrap">
<img src="http://www.upslike.net/imgdb/facebook-4846a5.png" alt=""/>
</div>
I have the following code
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body,td,th {
color: #FFFFFF;
}
body {
background-color: #000000;
}
#Pictures {
position:absolute;
width:591px;
height:214px;
z-index:1;
left: 17%;
top: 30%;
text-align:center;
}
#Links {
width:600px;
height:30px;
z-index:2;
top: 184px;
font-family: "Broadway", Broadway, monospace;
font-size: 14px;
color: #FFFFFF;
text-align: center;
}
.links2 {
font-family: Broadway;
color: #FFFFFF;
text-decoration: none;
}
a:links2, a:visited {
color: #ffffff;
}
a:hover, a:active {
color: #333333;
}
#Main {
position:absolute;
width:800px;
height:600px;
z-index:2;
left: 15%;
top: 10%;
right: 15%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#Logo {
position:absolute;
float: left;
width:104px;
height:100px;
z-index:2;
}
</style>
</head>
<body>
<div id="Main">
<div id="Pictures">
<div>
<a href="1.html" ><img src="1.gif" alt="x" width="181" height="173" border="0" /></a>
1
</div>
<div>
<img src="2.gif" alt="x" width="181" height="173" border="0" align="top" />
2
</div>
<div>
<img src="3.gif" alt="3" width="181" height="173" border="0" />
3
</div>
</div>
</div>
<div id="Logo"><img src="logo.gif" alt="x" width="104" height="100" border="0"/></div>
</div>
</body>
</html>
Which is displaying the picture layers vertically.
I am trying to make it o the 3 images are aligned horizontally with the text centered underneath them. Why are they defaulting to vertical, and can I change this behavior?
You don't actually need that much code to achieve what your're after. For example:
<style>
body {
background-color: #000;
color: #FFF;
}
a {
font-family: "Broadway", Broadway, monospace;
font-size: 14px;
color: #FFF;
}
#images a {
width: 24.99%;
display: block;
float: left;
text-align: center;
}
</style>
<div id="images">
<a href="1.html" >
<img src="1.gif" alt="x" width="181" height="173" border="0" /><br />
One
</a>
<a href="2.html" >
<img src="2.gif" alt="x" width="181" height="173" border="0" /><br />
Two
</a>
<a href="3.html" >
<img src="3.gif" alt="x" width="181" height="173" border="0" /><br />
Three
</a>
<a href="4.html" >
<img src="4.gif" alt="x" width="181" height="173" border="0" /><br />
Four
</a>
</div>
The trick to get the items to align horizontally rather than vertically is to "float" the containers (left or right). By setting the links to display: block; you can use them as the containers instead of wrapping everything in extra <div>s. I have set the width to 25% (or 24.99% to avoid a rounding error in some browsers) so that they're spread out evenly across the page but you might want a different alignment which is easily done using margins/padding and/or a different width on the containers. Note also that when you set a text colour on the body {} you do not need to specify it again elsewhere apart from for links. Same thing goes for font-family, allthough this is also inherited by links. Good luck with the project!
Look at this code and test it: you can do the same thing in a more efficient, semantic and clean way:
Css:
div.imageBox {
float: left;
margin-right: 10px;
}
div.imageBox p {
text-align: center;
}
Html:
<div class="imageBox">
<a href="#">
<img src="image1.gif" width="100" height="100"
alt="image 1" /></a>
<p>1</p>
</div>
<div class="imageBox">
<a href="#">
<img src="image2.gif" width="100" height="100"
alt="image 1" /></a>
<p>2</p>
</div>
<div class="imageBox">
<a href="#">
<img src="image3.gif" width="100" height="100"
alt="image 1" /></a>
<p>3</p>
</div>
That's all you need!
If you want to keep your code, there are no reasons to use the attribute align inside the img tag. You can use span instead of div, but in this case is better to keep using div and give them a width:
div#Pictures div
{
float: left;
margin-right: 5px;
}
This code:
a:links2
has no sense. links2 is a class made by you, not a pseudo-class or a pseudo-element.
I think a display: block; on your links2 class should put the links under the images correctly.
Also, to get the images to line up horizontally, use <span>s instead of <div>s inside the 'Pictures' div, and float them left.
#Pictures span
{
float: left;
margin-right: 5px;
}