I'm having trouble getting the image and text to be horizontally and vertically align in the center of this div.
Currently, it seems to be off center (but close enough that it looks almost center?)
.Rectangle {
height: 57px;
border-radius: 8px;
background-color: #0e74af;
margin: 50px auto;
margin-left: 14px;
margin-right: 14px;
}
.call {
height: 24px;
object-fit: contain;
margin-left: 72px;
margin-top: 16px;
}
.Call-Support {
height: 23px;
font-family: BentonSans-Regular;
font-size: 20px;
font-style: normal;
font-stretch: normal;
color: #ffffff;
margin-left: 8px;
text-decoration: none;
margin-top: 17px;
}
<div class="Rectangle show-mobile hide-desktop">
<a href="tel:555-555-5555>
<img class=" call icon-image " src="images/call#2x.png ">
</a>
<a class="Call-Support " href="tel:555-555-5555 ">Call Support</a>
</div>
Here's the code. Current code shows a responsive button that has 25% padding on each side. You can change width:50% to width:250px if you want a button with a fixed width.
/* Styles go here */
.Rectangle{
height: 57px;
border-radius: 8px;
background-color: #0e74af;
margin: 0 auto;
width:200px;
text-align:center;
}
.call {
display:inline-block;
margin: 0 auto;
margin-top:15px;
}
.Call-Support {
height: 23px;
font-family: BentonSans-Regular;
font-size: 20px;
font-style: normal;
font-stretch: normal;
color: #ffffff;
text-decoration: none;
display:inline-block;
}
<div class="Rectangle show-mobile hide-desktop">
<img class="call icon-image" src="images/call#2x.png" />
<a class="Call-Support" href="tel:555-555-5555">Call Support</a>
</div>
Related
I am trying to change the font-family of my tab and align the text to the center using "font-family" and "text-align" but it isn't working. Here is my code and the image. As you can see the font is not Roboto and the text "Chat" is not aligned properly.
<style>
div#olark_tab{
position: fixed;
right: 0;
bottom:50%;
z-index:5000;
}
#olark_tab div{
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
}
#olark_tab a{
/*Edit these to change the look of your tab*/
background-color: #DCDCDC;
color: #1EAFE6;
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 20px;
height: 20px;
padding: 6px;
display: block;
text-decoration: none;
text-align: center;
width: auto;
border-top-right-radius:9px;
border-top-left-radius:9px;
border-top-style: none;
border-top-width: 0;
}
#olark_tab a:hover{
background-color: white;
}
</style>
<div id="olark_tab">
<div>
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
<img src="icon-chat.svg">
Chat
</a>
</div>
</div>
For the font, the font-family declaration works if you try an already-included font, like Arial or Times New Roman. I don't believe Roboto is a default font that you can just include. Have you imported it from somewhere like Google Fonts?
For the text centering: I'm not entirely sure what you mean by "not aligned properly," but it is centered in your example. Both the "Chat" text and the SVG icon are part of the centered element (the <a> tag), so it's those two elements together being centered within the box. (The same distance extends from the "t" to the top and from the edge of the speech bubble to the bottom.) Depending on how you actually want it to be aligned, you may need to target the text or image and align them individually.
The Roboto font is not supported by css and is only available through google. I have added the code to get the font from google and display it in on the tab.
HTML
<style>
div#olark_tab{
position: fixed;
right: 0;
bottom:50%;
z-index:5000;
}
#olark_tab div{
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
}
#olark_tab a{
/*Edit these to change the look of your tab*/
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
background-color: #DCDCDC;
color: #1EAFE6;
font-family: 'Roboto', sans-serif;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 20px;
height: 20px;
padding: 6px;
display: block;
text-decoration: none;
text-align: center;
width: auto;
border-top-right-radius:9px;
border-top-left-radius:9px;
border-top-style: none;
border-top-width: 0;
}
#olark_tab a:hover{
background-color: white;
}
</style>
<div id="olark_tab">
<div>
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
<img src="icon-chat.svg">
Chat
</a>
</div>
</div>
make your image smaller
div#olark_tab {
position: fixed;
right: 0;
bottom: 50%;
z-index: 5000;
}
#olark_tab div {
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
}
/* changes */
#olark_tab img{
width: 50%;/* or :75%; make it the much you want */
}
/* changes */
#olark_tab a {
/*Edit these to change the look of your tab*/
background-color: #DCDCDC;
color: #1EAFE6;
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 20px;
height: 20px;
padding: 6px;
display: block;
text-decoration: none;
text-align: center;
width: auto;
border-top-right-radius: 9px;
border-top-left-radius: 9px;
border-top-style: none;
border-top-width: 0;
}
#olark_tab a:hover {
background-color: white;
}
<div id="olark_tab">
<div>
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
<img src="icon-chat.svg"> Chat
</a>
</div>
</div>
#bannercontainer{
height: 200;
width: 960;
}
#banner1{
height: 100px;
width: 960px;
background-color: white;
}
#banner2 {background-color: #4D4C4C;
color: white;
height: 100px;
width: 960px;
position: static;
}
.logo {
width: 433px;
height: 199px;
float: left;
}
.linkcontainer{
height: auto;
width: auto;
vertical-align: bottom;
position: absolute;
bottom: 0px;
}
a:active{ color: grey;
font-weight: bold;
background-color: white;
}
a, a:visited { color: white;
text-decoration: none;
}
#link {
padding-top: 10px;
margin-right: 30px;
margin-bottom:20px;
font-size:15pt;
font-weight: bold;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
display:inline-block;
position:relative;
float:right;
}
.selector {
background-color: white;
color: #4D4C4C;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
font-weight: bold;
}
<div id="bannercontainer">
<div id="banner1">
<div id="logo"><img src="img/Dulwich Design Banner.png" width="434" height="200" alt=""></div>
</div>
<div id="banner2">
<div id="link"><div id="selector">Home</div></div>
<div id="link">About</div>
<div id="link">Blog</div>
<div id="link">Contact</div><div id="link"> Projects</div>
</div>
</div>
So, while a user is on a given page, I would like the link to be white and the "selector" class to have a white background and grey text, essentially for the colours to be reversed while the page is active. Any help would be greatly appreciated.
Reason why it's not working it's because your element is using id instead of class for selector
So from this:
<div id="link">
<div id="selector">
Home
</div>
</div>
Change it to this:
<div id="link">
<div class="selector">
Home
</div>
</div>
And your css, update your .selector and add .selector a for the text color:
.selector {
background-color: white;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
font-weight: bold;
}
.selector a {
color: #4D4C4C;
}
Fiddle
Also note that it's not good to have the same id on multiple elements, you should use class instead. I'm referring to multiple elements with links id.
Somehow one of the group of the same block elements on the picture gets inexplicably big height. Styles shown on the pic don't suggest that kind of behavior for this element. In fact, height isn't even set for those h3's.
Browser screenshot
The html is
<section class="about-us">
<div class="wrapper clearfix">
<h2 class="about-us-heading section-heading red-black-stressing-line-at-left">About Us</h2>
<p class="about-us-statement section-saying about-us-saying">This is who we are - or at least who we strive to be...</p>
<div class="about-more">
<p class="about-saying">If you can't explain it simply, you don't understand it enough.</p>
The more you know
</div>
<div class="about-work-details">
<h3 class="about-details-heading typography-icon">Typography</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading curve-with-dots-icon">Full icon set</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading triangular-ruler-icon">Accurate</h3>
<p class="about-details-text">...</p>
</div>
</div>
</section>
Three same div.about-work-details elements.
The default css is
.about-us{
background-color: #fff;
position: relative;
}
.about-us-heading{
color: #272d32;
}
.about-us-statement{
color: #4e5860;
margin-bottom: 3.9em;
}
.about-more{
width: 16.875em;
float:left;
margin-right: 1.875em;
}
.about-saying{
font-family: "Open Sans", sans-serif;
font-size: 1.75em;
line-height: 1.4285;
color: #4e5860;
}
.about-more-link{
display: inline-block;
font-family: "Raleway", sans-serif;
line-height: .77;
padding: 1em 2.625em 1em 1.25em;
text-decoration: none;
font-weight: 600;
color: #fff;
text-transform: uppercase;
background: #ff3c1f url(../images/left-arrow.gif) 12.7em .95em no-repeat;
margin-top: 4.25em;
transition: background-color 0.5s;
}
.about-work-details{
width: 16.875em;
float:left;
margin-right: 1.685em;
margin-bottom: 8.1875em;
position: relative;
min-height: 16.875em;
border: 1px solid #edeff2;
}
.about-work-details:last-of-type{
margin-right: 0;
}
.about-details-heading{
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 1.25em;
color: #303030;
text-transform: uppercase;
padding: 0.85em 0 1em 3em;
margin: 1.70em 0 0 1em;
}
Media query modifications
#media screen and (max-width: 860px){
.about-work-details{
width: 70%;
margin: 3em auto;
min-height: 0;
float: none;
}
.about-us{
padding-bottom: 1px;
}
.about-work-details:last-of-type {
margin-right: auto;
}
}
Seems like a floating item behavior issue.
Try removing/commenting float:left; from .about-more.
HTML
<body>
<div class="header">
<div class="header-logo"><u>MMH</u></div>
<div class="header-inner">Miami Max Hydro</div>
<nav class="header-nav">
About
Contact
</nav>
</div>
<div class="homepage">
<div class="content">
<div class="images">
<div class="column">
<div class="profile-large">
<div class="column1">
<div class="profile-overlay">
<div class="column1">
<img src=data:image/jpeg;base64,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 />
<div class="column2">
<p>Cell2</p>
</div>
<div class="column3">
<p>Cell3</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
body {
background-image: url(http://weknowyourdreamz.com/images/sea/sea-08.jpg);
background-size: cover;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
back
}
.header {
text-align: center;
padding: 10px;
background: #D2F0C6;
overflow: auto;
position: fixed;
top: 1px;
right: 1px;
left: 1px;
border: 6px solid #80bc80;
}
.header-inner {
Margin-top: 10px;
}
.images {
padding: 20px;
}
.header-inner a {
text-decoration: none;
color: #000000;
font-size: 24px;
font-weight: bold;
line-height: 20px;
}
.header-logo {
font-size: 32px;
Font-weight: bold;
line-height: 28px;
}
.header-logo a {
text-decoration: none;
color: #000000;
}
.header-nav a {
text-decoration: none;
color: #295f6f;
margin-right: 5px;
margin-left: 5px;
line-height: 25px;
font-weight: bold;
}
.header-nav {
margin-right: 5px;
margin-left: 5px;
}
..images {
padding: 20px 0;
}
.column {
width: 33%;
height: 33%;
font-weight: bold;
line-height: 30;
float: left;
text-align: center;
}
.profile-overlay {
float: left;
border: 6px solid #80bc80;
width: 255px;
height: 245px;
}
My Issue:
Basically, No matter what I do to get a border around my image, I get
Basically the top border extends behind the header.
I've tried margin-top with no success, it just keeps the picture in the same spot relative to the border while pushing the top of the border down.
line-height won't work either. Even line-height 1 will instantly make the picture match the top border but go away from the bottom and hide under the header.
I do have an idea in mind, doing line-height 1 then doing some command to move the whole border/picture down relative to the body, but I don't know any code that does that.
JSFiddle.
Remove border: 6px solid #80bc80; for .profile-overlay and add it to .column1 img.
.column1 img {
border: 6px solid #80bc80;
}
I'm having a box element with an icon (using font awesome icon "fa-video-icon") and text heading "Video Tutorial", here it is:
<a class="box" href="http://mylinkhere"><div class="heading-icon"><i class="fa fa-video-camera"></i></div>Video Tutorials</a>
What I want to achieve is when people hover the box to display a background-image instead of the box. The box should not appear, only the background-image.
.box {
border: 1px solid #ddd;
display: inline-block;
height: 170px;
line-height: 1.1;
margin-bottom: 20px;
margin-bottom: 2rem;
margin-right: 15px;
margin-right: 1.5rem;
padding: 10px;
padding: 1rem;
position: relative;
text-align: center;
vertical-align: top;
width: 155px;
font-size: 18px;
font-size: 1.2857143rem;
font-weight: 700;
color:#222;
}
.heading-icon {
font-size: 55px;
font-size: 4rem;
color:#8C0921;
margin-bottom: 1rem;
}
Appreciate your help!
The HTML:
<a class="box" href="http://mylinkhere">
<span class="heading-icon">
<i class="fa fa-video-camera"></i>
</span>Video Tutorials
</a>
The CSS:
.box {
display: inline-block;
height: 170px;
width: 155px;
border: 1px solid #ddd;
text-align: center;
padding:10px;
font-size: 18px;
font-weight:bold;
color:#222;
}
.box:hover {
background-image: url(http://lorempixel.com/output/food-h-g-175-190-3.jpg);
text-indent:-9999em;
}
.box:hover span {
position:absolute;
left:-9999em;
}
.heading-icon {
font-size: 55px;
font-size: 4rem;
color:#8C0921;
margin-bottom: 1rem;
}
The fiddle.
When the box is hovered over, it sets the background image, and removes the text by indenting it off of the screen. It also moves the span, which I'm assuming shows the icon, off of the screen as well.