I've looked different options for aligning the FB share button with the other social media buttons, but none have worked for me yet. I'm only a few pixels off. Any ideas?
<div style="float:left; vertical-align:top">
<a class="twitter-share-button" href="https://twitter.com/share" data-url="{my url}" data-text="{text}" data-count="none" data-hashtags="{hashtag}" data-dnt="true">Tweet</a>
</div>
<div style="float:left; padding: 0 0 0 5px; vertical-align:top">
<div class="fb-share-button" data-href="{my url}" data-layout="button"></div>
</div>
<div style="float:left; padding: 0 5px; vertical-align:top">
<script type="IN/Share" data-url="{my url}"></script>
</div>
!Social Media alignment1
Change your .fb_iframe_widget class to this
.fb_iframe_widget {
display: inline-flex; /* changed line */
position: relative;
}
The facebook button has still a misalignment of one pixel.
Just add this to the css class above:
top: -1px;
P.S.: wanted to add this as a comment but I couldn't because not enough "reputation" points.
Related
So I only want to change a small part of my website. I thought it would be easy, but somehow it doesn't change and I don't know why. I'm using bootstrap so that might make it a little bit difficult. I want to change my sidebar from just one solid color to an image. And it just doesn't show, when I delete the color it just shows nothing. I'm trying to use the 'background-image' property.
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/flat2.css" rel="stylesheet">
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="border-right" id="sidebar-wrapper" >
<div class="sidebar-heading"> <img src="text\flat.png" class="title" alt="FLAT"> </div>
<div class="list-group list-group-flush zijkantje">
<img src="text/home.png" onMouseOver="this.src='text/home2.png'" onMouseOut="this.src='text/home.png'" alt="Home" class="glassescase" id="thuis">
<img src="text/risoprints.png" onMouseOver="this.src='text/risoprints2.png'" onMouseOut="this.src='text/risoprints.png'" alt="Risoprints" class="glassescase" id="glassescase">
<img src="text/paintings.png" onMouseOver="this.src='text/paintings2.png'" onMouseOut="this.src='text/paintings.png'" alt="Paintings" class="glassescase" id="littlehouse">
<img src="text/tiles2.png" onMouseOver="this.src='text/tiles.png'" onMouseOut="this.src='text/tiles2.png'" alt="Tiles" class="glassescase" id="ceramic">
<img src="text/alphabet.png" onMouseOver="this.src='text/alphabet2.png'" onMouseOut="this.src='text/alphabet.png'" alt="Alphabet patterns" class="glassescase" id="green">
<img src="text/collage.png" onMouseOver="this.src='text/collage2.png'" onMouseOut="this.src='text/collage.png'" alt="Collage" class="glassescase" id="collage">
<img src="text/Tarotdeck.png" onMouseOver="this.src='text/tarotdeck2.png'" onMouseOut="this.src='text/Tarotdeck.png'" alt="Tarot deck" class="glassescase" id="tarot">
<img src="text/digital.png" onMouseOver="this.src='text/digital2.png'" onMouseOut="this.src='text/digital.png'" alt="Digital" class="glassescase" id="digital">
</div>
</div>
This is for a larger screen, this is the css:
Navbar2 is for the smaller screen.
#sidebar-wrapper {
margin-left: 0;
width:150px;
background-image: url("sidebar.png") !important;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
.navbar2 {
display: none;
}
.zijkantje {
position: relative;
display: flex;
align-items:flex-start;
margin-top:10px;
justify-content:space-around;
margin-left: 27px;
}
Hopefully this is enough code to figure out what goes wrong. I always find it more difficult to change a small detail from an already finished site hah. I'm new to coding btw, be kind :)
U can use the Inspector integrated on your browser to review the code, anyway:
Are u sure is the correct image route which you want to use ?.
Set the background-repeat and background-position properties to be sure the image shows correctly, and also background-size if necessary.
Check if sidenav have the background-blend-mode property, and removeit.
Essentially, I'm making a tier-based pricing grid and it needs to look like this:
However, when my code is placed onto the web page (through Wordpress)
a random set of tags are above the '10+ Sessions" pricing box, which messes up the spacing. The tag has a 20px top padding.
It looks like this:
So, I inspected the element and found that there's a set of tags above the box with a top padding of 20px.
<div class="rpt_plan rpt_plan_ori rpt_plan_3 " style="
margin-left: 0px;
width: 565px;
margin-top: 0px;
"><p></p>
<div class="rpt_title rpt_title_3">10+ Sessions</div>
<div class="rpt_head rpt_head_3" style="
height: 152px;
"><p></p>
<div class="rpt_recurrence rpt_recurrence_3">Per Hour</div>
<div class="rpt_price rpt_price_3"><span
class="rpt_currency">£</span>20</div>
</div>
<p><a target="_self" href="#" style="background: rgb(243, 167,
6);cursor: pointer;height: 45px;" class="rpt_foot rpt_foot_3 pum-
trigger">Sign Up</a></p>
</div>
The tags after the opening of the div is the problem.
However, the tags aren't there in the original source code, which is this:
<div class="rpt_plan rpt_plan_ori rpt_plan_3 " style="
margin-left: 0px;
width: 565px;
margin-top: 0px;
">
<div class="rpt_title rpt_title_3">10+ Sessions</div>
<div class="rpt_head rpt_head_3" style="
height: 152px;
">
<div class="rpt_recurrence rpt_recurrence_3">Per Hour</div>
<div class="rpt_price rpt_price_3"><span
class="rpt_currency">£</span>20</div>
</div>
<p><a target="_self" href="#" style="background: rgb(243, 167,
6);cursor: pointer;height: 45px;" class="rpt_foot rpt_foot_3 pum-
trigger">Sign Up</a></p></div>
I just can't figure out why the tags are there.
Could anyone help with this?
Thanks
For anyone with a similar problem, install a plugin called Raw HTML for Wordpress. This prevents Wordpress from attempting to format your Raw HTML and adding random paragraph tags.
Good day.
I need help in options Google maps.
My site has block with Google maps. The map has options to display avatar user if he registered in Google+ (gmail). The avatar has circle form with diametr about 32px (how in the example: https://developers.google.com/maps/documentation/javascript/examples/map-coordinates?hl=ru).
I want that avatar has square form with size 60x60px and margin-right 70px.
How do it?
Thank you advance!
The code avatar on Google maps:
<iframe src="https://www.google.com/maps/api/js/widget?pb=!1m2!1u22!2s12a!2sru#WzEsMTUxXQ.."
frameborder="0" allowtransparency="true" scrolling="no"
style="border: 0px; overflow: hidden; position: absolute; right: 0px; visibility: visible; width: 37px; height: 37px;">
<html jstcache="0">
<head>
<link id="__2__" type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<style>div.login-control{color:white;font-family:Roboto,Arial;font-size:11px;font-weight:500}div.login{border-radius:2px;background-color:#5f84f2;padding:4px 8px 4px 8px;cursor:pointer}.login-control .tooltip-anchor{color:#5B5B5B;display:inline;font-family:Roboto,Arial;font-size:13px;font-weight:normal;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;width:50%}.login-control .tooltip-content{background-color:white;font-weight:normal;right:0px}div.login a:link{text-decoration:none;color:inherit}div.login a:visited{color:inherit}div.login a:hover{text-decoration:underline}div.profile-photo{border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,0.2);width:32px;height:32px;overflow:hidden}div.profile-photo-light{background-color:white}div.profile-photo-light div{color:black}div.profile-photo-dark{background-color:black}div.profile-photo-dark:hover{background-color:white;color:black}div.profile-photo img{float:right;width:32px;height:32px}.tooltip-anchor{width:100%;position:relative;float:right;z-index:1}.tooltip-anchor>.tooltip-tip-inner{background-color:transparent;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid white;height:0;left:-8px;position:absolute;top:5px;width:0;z-index:1}.tooltip-content{border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.2);display:inline-block;line-height:100%;padding:10px 11px 9px 11px;position:absolute;margin:0;top:10px;white-space:nowrap}.tooltip-content a{color:#3a84df;text-decoration:none}.tooltip-content a:hover{text-decoration:underline}.tooltip-content .user-email,.tooltip-content .user-name{padding-right:12px}.sign-in-explanatory-text{margin-bottom:6px}.tooltip-content a{overflow:hidden}.g-logo{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/white_google_icon.png);background-size:14px 12px;display:inline-block;height:12px;padding-right:6px;vertical-align:middle;width:8px}.gm-china .g-logo{background-image:url(http://maps.gstatic.cn/mapfiles/api-3/images/white_google_icon.png)}#media (-webkit-min-device-pixel-ratio:1.2),(min-resolution:1.2dppx),(min-resolution:116dpi){.g-logo{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/white_google_icon_hdpi.png)}.gm-china .g-logo{background-image:url(http://maps.gstatic.cn/mapfiles/api-3/images/white_google_icon_hdpi.png)}}.sprite-sheet{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/signed_in_api_icons2.png);background-size:100px 50px}.gm-china .sprite-sheet{background-image:url(http://maps.gstatic.cn/mapfiles/embed/images/signed_in_api_icons2.png)}#media (-webkit-min-device-pixel-ratio:1.2),(min-resolution:1.2dppx),(min-resolution:116dpi){.sprite-sheet{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/signed_in_api_icons2_hdpi.png);background-size:100px 50px}.gm-china .sprite-sheet{background-image:url(http://maps.gstatic.cn/mapfiles/embed/images/signed_in_api_icons2_hdpi.png)}}</style>
</head>
<body jstcache="0" style="overflow: hidden;">
<script>
window.parent.frames['gm-master'].initWidget(window);
</script>
<div jstcache="0" style="position: absolute; top: 0px; right: 0px; width: 500px; height: 500px;">
<div jstcache="0" style="position: absolute; top: 0px; right: 4px;">
<div jstcache="69" class="login-control" jsaction="mouseenter:loginControl.resize;mouseleave:loginControl.resize;loginControl.resize">
<div jstcache="2" jsaction="loginControl.login" class="login" style="display: none">
<a jstcache="3"> <span class="g-logo"> </span><span>Войти</span></a>
</div>
<div jstcache="4" class="profile-photo-light profile-photo" jsan="7.profile-photo-light,7.profile-photo">
<img jstcache="5" src="https://lh5.googleusercontent.com/-R_xY89bx5Ss/AAAAAAAAAAI/AAAAAAAAABg/xx_czODJ35o/s32-c/photo.jpg">
</div>
<div class="tooltip-anchor">
<div class="tooltip-tip-inner"></div>
<div class="tooltip-content">
<div jstcache="6" class="sign-in-explanatory-text" style="display: none">Войдите в свой аккаунт, и Google Карты станут ещё удобнее</div>
<div>
<a jstcache="7" class="" style="display: none"></a>
<a target="_blank" jstcache="8" href="https://plus.google.com/113092786366482147078?socpid=238&socfid=maps_api_v3:logincontrol" class="user-name" jsan="7.user-name,8.href,0.target">+aleksandr</a>
<a target="blank_" jstcache="9" href="https://support.google.com/maps/?p=thirdpartymaps&hl=ru" jsaction="mouseup:loginControl.learnMore">Подробнее...</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
tag:
<img jstcache="5" src="https://lh5.googleusercontent.com/-R_xY89bx5Ss/AAAAAAAAAAI/AAAAAAAAABg/xx_czODJ35o/s32-c/photo.jpg">
It's currently not possible to customize the UI for the Signed In experience. I'd recommend opening a feature request on the Google Maps API Issue Tracker describing your use case so the team can start tracking interest in it.
I know this is 2 months old question and already chosen an answer, but if anyone else if looking for this. you can achieve the margin thing applying css directly to the iframe element.
This is the code i'm using
iframe[src^="https://www.google.com/maps/api/js/widget?"] {
margin-top: 50px;
margin-right: 52px;
}
How it looks
A few days ago I was working on a classic menu. It has a logo on the left and some menu buttons on the right. This was my first try – fiddle1. But someone from this community told me that menus normally aren't coded like that but with <ul>and <li>.
So I tried to rebuild that menu – fiddle2. Unfortunately nothing works.
My first issue is that I have the feeling that the <div id="menubuttons"> is not located IN the <div id="header">. The second problem is that <div id="menubuttons" align="right"> isn't aligned right as it should be.
Can you help me to get the visual result of fiddle1 with <ul>and <li> tags?
ul element by default will take margin
So please add css like this, it will remove the default margin and padding
ul{margin:0; padding:0}
#menubuttons { float:right}
Check this Demo
I changed some code, try this:
http://jsfiddle.net/WnneG/
<ul style="float:left;paddin:0px;margin:0px;">
<li class="menubutton"> Home
</li >
<li class="menubutton"> Info
</li>
<li class="menubutton"> Spenden
</li >
<li class="menubutton" align="right" style="margin-right: 20px;"> Kontakt & Impressum
</li >
</ul>
replace this line of code:
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" align="right">
with:
<div id="header_logo" style="float:left;">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" style="float:right;">
hopefully you will get your desired result if this help You please mark it as green
See the code in the fiddles you posted. Yours tries to create a menu from divs, while the one you are trying to get to, has <li> items with float: left;
Put to <li> tag style display:block;float:right; like this: <li style="display:block;float:right">
Use float = right instead of align for the div menubuttons.
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: block;
float:right;
}
I have created a version of your menu. I think this helps: http://jsfiddle.net/yBTJF/4/
.menu
{
height: 30px;
background: #FFFFFF;
line-height: 30px;
list-style: none;
padding: 0 5px;
margin: 0px;
}
If you want :hover, all you have to do is create a selector in your CSS:
.menu a:hover
{
// ...
}
I am relatively new to HTML/CSS and am having an impossible time making two pics line up with an ASP MVC website. The bookend pic we are using for the menu bar cannot line up with the rest of the background pics. Below is a screenshot of the problem, the HTML and the CSS. The bookend pic that is not adjusted correctly is NAV-Left-Corner, and it's id in the CSS is "#menuLeft." The rest of the nav bar uses a small blue pic repeated horizontally. That portion of the CSS can be found in the "ul#Menu" section. (I'm having the same problem with the right bookend, just wanted to simplify things for the sake of this post)
HTML
<body>
#using Monet.Common
<div class="page">
<header>
<div style="margin: 20px;">
#* Monet *#
<span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
<span style="color: white; font-size: 18px; "> </span>
</div>
#* </a>*#
#* <div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>*#
<nav>
<ul id="menu">
<img src="../../Content/images/NAV-Left-Corner.gif" id="menuLeft" alt="mLeft"/>
<li id="mTop">#Html.MenuLink("Agents", "Index", "Agent")</li>
<li class="mProducts">#Html.MenuLink("Products", "Index", "Product")</li>
<li class="mPt">#Html.MenuLink("Product Training", "Index", "Course")</li>
<li class="mCe">#Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
<li id="mBottom">#Html.MenuLink("Help", "About", "Home")</li>
<img src="../../Content/images/NAV-Right-Corner.gif" id="menuRight" alt="mRight"/>
</ul>
</nav>
</header>
<img src="../../Content/images/TEST2body_top.png" id="topPic" alt="tag"/>
<section id="main">
#RenderBody()
</section>
<footer>
<span style="color: Gray;"> Copyright © 2012 For Internal Use Only. </span>
</footer>
</div>
</body>
CSS
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
#menuLeft
{
vertical-align:middle;
}
#menuRight
{
vertical-align:middle;
}
I agree with Nile in comment ("dont do it this way").
Anyway - you can just move anything up or down by adding some padding or margin. You can also use negative padding-top, to move image up, even outside its container.
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
/* HERE */
padding: -5 0 2px;
position: relative;
margin: 0;
text-align: right;
}
Im not sure that is recipe for you, but it may be good tip about positioning items.
Edit/added later:
Maybe you should not experiment with CSS in serious app like this. App "for internal use only" dont need fancy effects.
Read good tutorial about CSS and make some exercises (positioning, gradients, browser support) before you use it in work :)
The New Boston is very good website with most professional free courses and tutorials i ever saw.