I use wordpress and want to add social media icons to my footer. What I did so far is to add the following code to the footer.php:
<div id="social-buttons">
<a href="http://twitter.com/veda_vit" rel="me"><img title="veda-vit.de bei Twitter" src="http://veda-vit.de/wp-content/uploads/2017/11/Twitter.svg" alt="Twitter Button" width="24" height="24" />
</a>
<a href="https://www.facebook.com/vedavit.de" rel="me"><img title="veda-vit.de bei Facebook" src="http://veda-vit.de/wp-content/uploads/2017/11/Facebook.svg" alt="Facebook Button" width="24" height="24" />
</a>
</div>
And additionally I added the following css code to place the icons on the right:
#social-buttons a img {
margin: 10px 12px 0 0;
float: right;
}
It works so far, but the icons are placed on a second line (see here: www.veda-vit.de).
What can I do to place the copyright and the icons on one line? I tried already everything, but couldn't solve the problem. Can anybody help me, please?
Thank you!
You can add this CSS code and it will work nicely
#social-buttons {
float: right;
position: relative;
top: -9px;
}
You can edit it more by changing top position.
Related
I'm trying to design an informational and instructional welcome modal box with 3 "pages" using custombox.js
The modal appears in the middle of the screen, I then need to display content in the middle of the modal, with a previous button to the left, next to the right and a footer showing progress.
I did this successfully using CSS grid layout, but many of the users do not have browsers that support this. I can't figure out how to make this using plain CSS...
Here's my html
<div id="modal">
<div id="leftNnav">
<i id="leftNnavImage" class="fa fa-chevron-left" aria-hidden="true"></i>
</div>
<div id="modalContent1" class="modalContent activeModalContent">
<img id="modalContentMedia" src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg"/>
content text goes here, lots and lots and lots and lots and lots and lots more
</div>
<div id="modalContent2" class="modalContent">
Content2 = YT Video
</div>
<div id="modalContent3" class="modalContent">
Content3 = text
</div>
<div id="rightNnav">
<i id="rightNnavImage" class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
<div id="modalFooter">
<svg height="40" width="40">
<circle id="circle1" class="circle activeCircle" cx="20" cy="20" r="10"></circle>
</svg>
<svg height="40" width="40">
<circle id="circle2" class="circle" cx="20" cy="20" r="10"></circle>
</svg>
<svg height="40" width="40">
<circle id="circle3" class="circle" cx="20" cy="20" r="10"></circle>
</svg>
</div>
</div>
https://jsfiddle.net/oppt6v9j/15/
But this way just ends up really messy, the text overflows and it just doesn't feel like the correct way to do things, I feel like I'm missing something really obvious. I know I can resize the image using media queries, so that's fine, but I'm not sure how to manage the text.
Any help with how I can design this modal in CSS is very much appreciated!
If your problem with aligning the components, I would suggest the following
.right { float: right; }
.left { float: left; }
.modal { display: flex; }
.modalContent { margin: auto; }
I believe using ID's as CSS selectors is bad practice.
Hope it helps.
Right, this is a tough one since I don't know the exact dimensions of the box (and you use alot of position: absolutes).
I'd imagine it varies with screen size but your image has a height/width set (300px by 150px) so I focused on that size instead.
Note This is not an "end all be all" answer, it won't solve every usecase under the sun, rather it answers the original question:
But this way just ends up really messy, the text overflows and it just
doesn't feel like the correct way to do things, I feel like I'm
missing something really obvious.
It does this by providing a way of thought rather than a clear answer.
The solution
You're using a lot of absolute positions, this means you have to work with alot of magic numbers. Try converting them to relative positions instead.
The text is really easy, you should wrap it in a <p> tag like so:
<p>
Content text goes here, lots and lots and lots and lots and lots and lots more
</p>
And style it appropriately (box padding / corners etc):
p {
color: #001818;
padding-right: 40px;
}
The same holds true for the image:
#modalContentMedia{
width: 300px;
height: 150px;
margin-left: 15px;
}
And I'm not sure where you'd want the arrows positioned (they are in the center of the box right now) but I can imagine you'd want them in the center of the image. To do so use:
#leftNnav{
position: absolute;
cursor: pointer;
z-index: 20;
padding-left: 10px;
left: 5px;
top: calc(50% - 40px);
}
#rightNnav{
position: absolute;
cursor: pointer;
z-index: 20;
padding-right: 10px;
right: 5px;
top: calc(50% - 40px);
}
This makes the entire thing look much neater:
By illustrating how I would start solving this issue I've demonstrated fixing the 3 major things (text, image position not centered, arrows) and trust you'll be able to learn and fix the rest of the issues yourself.
When we insert a image to blogger post it automatically inserts a separator with 'text-align:center;'. I want to remove it(and set it to left instead of center). But it's hard to remove it manually for every image in every post. Is there a easy way to do this automatically?
I tried .post-body img{float:left;} template CSS. This gets the image to left, but then texts flow to right side of the image instead of under the image. Please help me to do this.
Edit: Below is the normal div that an image would be automatically surrounded when a image is added to a blogger post. Below that is the texts of post.
<div class="separator" style="clear: both; text-align: center;">
<a href="-----.html"; imageanchor="1" style="margin-left: 0em; margin-right: 1em;">
<img alt="" border="0" src="1.bp.blogspot.com/1.JPG"; title="" />
</a></div>
<br/>
<span style="font-size: large;">text paragraph texts texts</span><br />
Within the <b:skin> or in a separate <style> within the <head> of your template include the following CSS code:
.post-body .separator {
text-align:left !important
}
I can't see the rest of your code, if you uploaded something like a js.fiddle that would help! The code below should fix the text alignment with your images, if it doesn't let me know!
.post-body img {
float: left;
text-align: left;
}
.post-body .separator a {
margin: 0!important;
}
The following image demonstrates what I'm trying to accomplish.
The A) it's on webbrowser of computer, which displays cool. The B) it's on mobile devices or small screens. I would like to make the images appear on mobile devices like the A).
I'm attempting this on Wordpress in the header.php. I've been searching and I've got this:
<a href="http://url">
<img src="http://urlIMAGE" width="100px" height="95px" style="max-width: 100%; height: auto;"/></a>
<a href="url" target="_blank">
<img src="http://urlIMAGE" width="100px" height="95px" style="max-width: auto; height: auto;"/></a>
But it's not working.
a img{width:100%; float:left;}
You could use some thing like:
float: left;
or
float: right;
inside your style attribute. See if that works.
First off - this is my first question ever (I'm still a beginner) and I can't say how much I appreciate this site and all the help I've found on here. Hopefully every question I ask can help someone else too :)
I realize not many people use imagemaps any more but I have one and twitter bootstrap (version 3.0.0) is screwing up my coordinates - putting the links in the wrong places. I can make it work with the following code but then it wont resize to fit the screen. Any tips?
<style>
<!Driving me nuts - without this the imagemap links are in the wrong places - with this it wont resize>
#img_ID {
max-width:none;
width:auto;
display: inline;
}
</style>
Here is a snippet of the actual imagemap code
<div style="width:100%">
<img id="img_ID" src="NewMatGuide.png" USEMAP="#map" border="0" class="" width:100% alt="">
</div>
<Map id="map_ID" name="map">
<AREA shape="RECT" COORDS="80,151,258,252" HREF="PlacementResults.php?ChosenArea=A">
<AREA shape="RECT" COORDS="80,328,258,432" HREF="PlacementResults.php?ChosenArea=B">
<AREA shape="RECT" COORDS="80,521,258,620" HREF="PlacementResults.php?ChosenArea=C">
I'd recommend, rather than an image map, make 3 divs that are links with the following HTML and accompanying CSS.
<div id="box_a">
<a class="box_link" href="PlacementResults.php?ChosenArea=A"></a>
</div>
<div id="box_b">
<a class="box_link" href="PlacementResults.php?ChosenArea=B"></a>
</div>
<div id="box_c">
<a class="box_link" href="PlacementResults.php?ChosenArea=C"></a>
</div>
Use percentages to define the coordinates. Given that your X1 and X2 coordinates are the same for the links in your image map, the following example (with different %s to actually cover your image correctly) should work.
#box_a, #box_b, #box_c {
margin-left: 10%;
margin-top: 5%;
height: 15%;
width: 25%;
}
.box_link {
display: block;
height: 100%;
width: 100%;
}
You should check out this page to learn more about making div links. I would also suggest using NewMatGuide.png as a background-image and define the size of #img_ID.
Something is definetly wrong with my ul and li. I know I made a huge mistake but I cannot find it. When you go here:
http://icpy.webs.com/text/Mass.htm
You will see both thumbnail images are different but both pop ups have the same bigger image as the first thumbnail.
Why are these before doctype? What are those custom elements?
<link rel="stylesheet"type="text/css"href="../text/aboutleft.css">
<img src="http://icpy.webs.com/content/masslayout.png"/><br>
____________________________________________________________________________<br><br>
<x><re>colors available</re></x><br>
<x><gre>available to unlimited users </gre></x><br>
<x>Changes available: box, link, username</x><br><br>
Why don't you use a relative link for the masslayout.png?
Have you ever heard of the <hr> element in HTML?
I don't see any thumbnails, neither popups and I don't know what you are talking about.
jQuery is stored on Google and it is in cache for most of the users. Why do you store and link another one?
Your CSS:
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
#cas ul {
list-style-type: none;
}
}
What is this?? What did you want?
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe>
Href attribute needs a close quote mark.
Look at your source code and after that into the inspector and please correct as many errors as you can.
I think the reason it's like that, because both boxes are within the same <a>-Tag, which of course links to only one of the big images:
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/BEA01.png"/>
<div id="inlineframe" style="width: 1040px; height: 785px; display: none;">
</div>
</a>
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/JAK01.png"/>
<div id="inlineframe" style="width:1040px;height:785px;display: none;">
</div>
</a>