I am trying to inserting an image which is the & symbol but it wont seem to be appearing within my html.
My HTML code is :
<section style= "background: #FEFEFE;" id="intro">
<b>" We are a digital marketing shop that creates marketing solutions" <br>
<br>
As designers, programmers <span> & </span> problem solvers, we love all things
</b>
</section>
CSS:
#intro {
height: auto;
padding: 50px 0;
background: #fff;
text-align: center;
color: #52626e;
font-size: 30px;
font-weight: normal;
}
#intro span {
background: url(../images/icons.png) no-repeat -0px -13px;
padding: 0 12px;
text-indent: -9999em;
display: inline-block;
*display:inline;
}
#intro {
height: auto;
padding: 50px 0;
background: #fff;
text-align: center;
color: #52626e;
font-size: 30px;
line-height: 36px;
font-weight: normal;
}
#intro span {
background: url(http://www.makeyourowngarments.com/sites/default/files/our_images/&%20sign.png) no-repeat;
background-size: 36px;
width: 36px;
text-indent: -9999em;
display: inline-block;
}
take a look at the quick and dirty example on jsfiddle
Related
I am trying to make a full width hero image with an h1 header, boxed text with 2 sizes of text inside plus a button. I have been wrestling with this all day and it just doesnt seem to work the way i'd like it to. Any help would be really appreciated.
thanks
Images:
How it looks at the moment with code
If you notice it is not going full width (gap on the left).
This is how i would like it to look or close enough
//css//
.hero-image {
background-image: url("image.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 50px;
}
.hero-text {
position: relative;
color: #154774;
}
.hero-text button {
border-radius: 5px;
padding: 10px 20px;
color: white;
background-color: #00adee;
text-align: center;
cursor: pointer;
font-size: 20px;
font-weight: bold;
bottom: 50px;
}
.hero-text button:hover {
background-color: #0597c4;
color: white;
}
.herotext2 {
border-radius: 5px;
padding: 10px 10px 10px 10px;
color: white;
background-color: red;
font-size: 20px;
width: 200px;
line-height: 1.4;
}
</style>
//html//
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:40px">IT support for<br>your business<br>as easy as<br>child’s play</h1>
<p class="herotext2">All inclusive IT GDPR service packages from £33 p/m</p>
<button>Try it for free today</button>
</div>
</div>
Updated image:
Updated image
.hero-image {
background-image: url("https://beerdeluxe.com.au/hawthorn/wp-content/uploads/sites/4/2017/05/hero-placeholder.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
}
.hero-text {
position: relative;
color: #154774;
text-align:right;
}
.hero-text h1 {
font-size:40px;
margin-right:15%;
}
.hero-text h1 .italic {
font-style: italic;
}
.hero-text button {
border-radius: 5px;
padding: 10px 20px;
color: white;
background-color: #00adee;
text-align: center;
cursor: pointer;
font-size: 20px;
font-weight: bold;
bottom: 50px;
max-width: 150px;
margin-top: 25px;
}
.hero-text button:hover {
background-color: #0597c4;
color: white;
}
.herotext2 {
position:relative;
border-radius: 5px;
padding: 10px 10px 10px 10px;
color: white;
background-color: red;
font-size: 20px;
width: 200px;
line-height: 1.4;
margin: 0 0 0 auto;
text-align:left;
}
.herotext2 .no {
font-size: 135px;
line-height: 130px;
font-weight: 600;
}
.herotext2 .tag {
position: absolute;
bottom: 26px;
right: 30px;
font-size: 12px;
color: red;
}
<div class="hero-image">
<div class="hero-text">
<h1>IT support for your<br> business - <span class="italic">as easy as<br>child’s play</span></h1>
<p class="herotext2">All inclusive IT GDPR service packages from <span class="no">£33</span><span class="tag">p/m</span></p>
<button>Try it for free today</button>
</div>
</div>
https://jsfiddle.net/Sampath_Madhuranga/pwxf73z8/16/
I have updated your html format and added new styles..Now it appears as your design but you need to apply relevant font family.
It works nice. Let me know if there is any issue.
Thanks.
You are missing absolute positioning the elements inside the hero image. This way, you can force them to stay at certain point inside it, by setting top, right, bottom and left of each one.
Don't forget to set parent hero div to position: relative.
I'm playing around with html and css and have a question about the text-align functions.
I'm trying to build my own website and want the text-align set to start, but centred in the middle of the page. I've got it so that the content is centred, but when only text-align is set to centre. Is there a way to obtain centred text content but with text-align set to start? I don't particularly want to use padding (if it can be helped), as i've used it within this context and have had some responsive problems (which have had to be rectified with many media screen commands).
Sorry for the pretty noobie question.
HTML
.Container1 {
height: 100%;
width: 100%;
background: #e8eaed;
background-size: cover;
display: table;
margin: auto;
display: table;
top: 0;
}
.About {
font-family: 'Lato';
font-weight: 300;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
max-width: none;
}
.Content2 {
margin: 0 auto;
text-align: center;
}
.About h2 {
font-size: 40px;
letter-spacing: 4px;
line-height: 10px;
font-style: italic;
color: #70a1af;
text-shadow: 2px 2px white;
text-align: center;
}
.About p {
font-size: 18px;
letter-spacing: 4px;
line-height: 20px;
color: #70a1af;
}
<section class="Container1">
<div class="About">
<div class="Content2">
<h2> ABOUT ME.</h2>
<p> Computer Science // British Born // Wannabe Australian </p>
</div>
</div>
</section>
This is how i want the text to be aligned, but to be centred in the middle of the page...
Try to use Flexbox. Use align-item:center to center flex item vertically.
Stack Snippet
.Container1 {
height: 400px;
background: #e8eaed;
display: flex;
align-items: center;
}
.About {
font-family: 'Lato';
font-weight: 300;
}
.About h2 {
font-size: 40px;
letter-spacing: 4px;
line-height: 10px;
font-style: italic;
color: #70a1af;
text-shadow: 2px 2px white;
}
.About p {
font-size: 18px;
letter-spacing: 4px;
line-height: 20px;
color: #70a1af;
}
<section class="Container1">
<div class="About">
<div class="Content2">
<h2> ABOUT ME.</h2>
<p> Computer Science // British Born // Wannabe Australian </p>
</div>
</div>
</section>
fixed the width and then set margin: 0 auto
That's the code: https://codepen.io/vendettashakur/pen/rmLYBN
I want to know how can I move the image with the case upper.
body {
background: #333;
}
.wrapper {
padding: -10px;
margin: 10px;
margin-right: 900px;
text-align: center;
}
.treasure {
color: #fff;
display: inline-block;
max-width: 400px;
text-align: center;
padding: 70px;
margin: 20px;
font-size: 25px;
font-weight: bold;
}
.block {
padding: 4px;
background: #7c4dff;;
border-radius: 2px;
margin-left: 4px;
}
.subcase {
color: white;
display: inline-block;
max-width: 2000px;
text-align: center;
font-size: 15px;
font-weight: bold;
padding: -20px;
margin: -76px;
vertical-align: text-top;
}
.treasureimage {
display: inline-block;
max-width: 2000px;
padding: 10px;
vertical-align: text-top;
}
<div class="wrapper">
<p class="treasure">
Treasure Chest
<span class="block">
$1
</span></p>
<br>
<p class="subcase">
10% chance of getting a top-grade game</p>
<br>
<img class="treasureimage">
<img src="https://gamedrop.win/img/cases/case_blue.png" alt="case" style="width:200px;height:128px"> </img>
The image has to be perfectly arranged to look nice. That's all. I tried with padding, margin etc and nothing works for me.
If you are expecting the image to be moved after the text "Treasure Chest" then in your html move the <img> tag after first <p> tag
I have a button on my website, and I used resolution independent alignment. I checked two different computer screens with different resolutions and it looks alright, however, once opened on a larger aspect ratio screen or a mobile/tablet device it re-positions. On a larger aspect ratio screen the buttons moves to the left, on the smaller devices, it floats towards the right. I'm not 100% certain what could of gone wrong. Below is my CSS and HTML code.
HTML:
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<button>Book Appointment</button>
</div>
CSS:
body {
background: url('http://i.imgur.com/4mKmYMb.jpg') no-repeat fixed center center;
background-size: cover;
font-family: Montserrat;
margin: 0;
padding: 0;
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
margin-left: 33%;
margin-top: 3%;
border-radius: 5px;
}
Any idea how to fix this?
You center a html element, which has the standard position and is a block element with margin-left: auto and margin-right: auto.
It is a convention to write the first letter of classes and ids in lowercase.
Example
Just another way to do it:
I wrap your button in div and center the button using text-align:center
Don't forget to take out margin-left: 33%; in your css
HTML
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<div class="center">
<button>Book Appointment</button>
</div>
</div>
CSS
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.center {
text-align: center;
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
margin-top: 3%;
border-radius: 5px;
}
Example: http://codepen.io/anon/pen/EPyjXm
create a new CSS property for a tag and set display to flex(takes up 100% of width; and justify content to center.
EDIT
After checking out your site,
there is a margin-left of 15px coming from somewhere. Get rid of it if that is a possibility or else just add margin-left: 0 to the .Welcome a {...}
.Welcome a {
display: flex;
/*set display mode of anchor to flex*/
justify-content: center; /* Justify content center*/
margin-left: 0; /* Add !important in case it is overwritten*/
}
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.Welcome a {
display: flex;
/*set display mode of anchor to flex*/
justify-content: center; /* Justify content center*/
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
border-radius: 5px;
}
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<a href="website_link">
<button>Book Appointment</button>
</a>
</div>
I want the text "See All used-miscellaneous-lasers" in the div width, but the text emerges out of the div only in Firefox. What is the cause of this issue and how can it be resolved?
Here is my code:
CSS
div.banner a {
color: #FFFFFF;
display: inline-block;
margin-left: -13px;
text-decoration: none;
width: 100%;
}
div.banner {
background: url("banner.jpg") no-repeat scroll center top transparent;
font-size: 15px;
font-weight: normal;
height: 38px;
margin-top: 20px;
padding: 18px 24px 50px 69px;
text-align: left;
text-transform: uppercase;
width: 106px;
}
HTML
<div class="banner">
<a target="_blank" href="http://10.0.0.145/used/b">See All used-miscellaneous-lasers</a>
</div>
The cause is that Firefox thinks that used-miscellaneous-lasers is one word so it does not want to wrap it onto another line. You can easily fix this by adding a space or nbsp; after the -'s.
<div class="banner">
<a target="_blank" href="http://10.0.0.145/used/b">See All used- miscellaneous- lasers</a>
</div>
Otherwise to the div css, you can add word-wrap: break-word;; however, the word will not always be broken in a form that is readable.
div.banner {
background: url("banner.jpg") no-repeat scroll center top transparent;
font-size: 15px;
font-weight: normal;
height: 38px;
margin-top: 20px;
padding: 18px 24px 50px 69px;
text-align: left;
text-transform: uppercase;
width: 106px;
word-wrap: break-word;
}
Live DEMO
Try this, I've added overflow:visible;
div.banner {
background: url("banner.jpg") no-repeat scroll center top transparent;
font-size: 15px;
font-weight: normal;
height: 38px;
margin-top: 20px;
padding: 18px 24px 50px 69px;
text-align: left;
text-transform: uppercase;
overflow:visible;
width: 106px; }