i'm completely a newby and clueless about coding, i tried building this landing page similar to that one that is demonstrated on this YouTube video(https://www.youtube.com/watch?v=JYWitDwHhxE) with VSC.
For some reason i've got it wrong and there are a few problems:
The headline, first paragraph(a sentence) and the menu are all at the top of the page instead of one above the other.
The main paragraph is going downwards instead of going from left to right as shown in the video.
3.The background picture is missing and the profile picture should be underneath the main paragraph.
I can't get the logic of how making the pag responsive with the different CSS functions.
Here is the code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
section{
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
background: url(bg.jpg)no-repeat;
background-size: cover;
background-position: center;
}
header{
position: relative;
top: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
header .navigation{
color: #000;
background: #fff;
text-decoration: none;
font-weight: 500;
letter-spacing: 1px;
padding: 2px 15px;
border-radius: 20px;
transition: 0.3a;
transition-property: background;
}
header .navigation a:not(:last-child){
margin-right: 30px;
}
header .navigation a:hover{
background: #fff;
}
.content{
max-width: 65px;
margin: 60px 100px;
}
.content .info h2{
color: #fff;
font-size: 55px;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 2px;
line-height: 60px;
margin-bottom: 30px;
}
.content .info p{
font-size: 16px;
font-weight: 500;
margin-bottom: 40px;
}
.media-icons{
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}
.media-icons a{
position: relative;
color: #fff;
font-size: 25px;
transition: 0.3s;
transition-property: transform;
}
.media-icons a:not(:last-child){
margin-right: 60px;
}
.media-icons a:hover{
transform: scale(1.5);
}
<!DOCTYPE html>
<html land="en" dir="ltr">
<head>
<script src="https://kit.fontawesome.com/35552f1379.js" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body dir="ltr">
<section>
<input type="checkbox" id="check">
<header>
<h2 style="color: white;"><span>Welcome, I'm Boaz Kaplan</span></h2><br>
<p style="color: white;"><span>Thanks for visiting my website!</span></p><br>
<div class="navigation">
Contact
My Linkedin Page
</div>
<label for="check">
<i class="fas fa-bars menu-btn"></i>
<i class="fas fa-times close-btn"></i>
</label>
</header>
<div class="content">
<div class="info">
<p style="color: white;">A student for QA studies at INT college, experienced in the fields of customer service and sound engineering. I have good interpersonal relations, always tends to look at the "big picture", and sustains high work ethics. Looking for a first chance to prove myself in the field of quality assurance, highly motivated to learn and evolve as much as I can.</p>
<img src="תמונת פרופיל.jpg" width="106" height="69">
</div>
</div>
<div class="media-icons">
<i class="fab fa-linkedin"></i>
</div>
</section>
</body>
</html>
Appreciate your help!
As in comments, breaking it down and only addressing the simpler points. A general point is that you're trying to do an awful lot in one jump here. If you're starting out, don't do an entire complex page first. Do a simple page, so you understand what's going on, then add a little more, then a little more. If you do this, you'll allow your understanding to grow rather than giving yourself a very large amount to understand from the start.
Your first question was why the h1, para and menu are all at the top of the page. This is because you've wrapped them in a header element that has display: flex defined. The default direction for flex is row, so each block within the header is treated as equal and laid out in a row.
If you want these laid out in "normal" fashion, remove the display: flex on header, or move these blocks outside the header.
Your second question is really several different questions. As noted in the comments, the problem with your content block is simply that you've specified a max-width of 65px. The browser's done exactly what you asked for - it's just that you didn't know what you were asking! The solution here is just to remove the max-width restriction. If you don't need it, don't set it.
We can't do much about the background picture - it's not shown in your snippet because the image file isn't present within StackOverflow. However, the usual cause of the image not being shown in this sort of situation is that the path you've specified is wrong. The url needs to be the exact path to the image, relative to the css file's location. If the page is on the web then the easiest solution is often to provide the fully qualified URL (i.e. https://aaa.bbb.ccc/images/bg.jpg or whatever). If you're working on your own computer, this won't work because the image doesn't have a full URL, and you'll need to work out the path yourself. Look at your directory structure and see whether you need to go "up" before you go "across" into a new directory.
The problem with the profile pic is again probably that the path is wrong.
I hope that gives you enough to get started.
Related
I am a new user working on a website. I have taken several udemy classes and made one website that went well. I am now looking to make a second and I am running into an odd problem: some changes to the CSS header tag have an effect on the header in my index page while other changes do not. For example changing the background color does have an effect, while anything to do with flexbox or padding simply does not cause any change. I am writing this after several sittings and going back to my previous website, hoping someone can help me out. Here is the snippet of my header and the snippet from the css. The code works in the snippet here, but not when I preview! I am using dreamweaver.
header {
display: flex;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
justify-content: space-between;
}
.navButton {
border-style: solid;
border-width: 3px;
border-color: white;
color: white;
font-family: 'Source Sans Pro', sans-serif;
padding: 11px 25px;
display: inline-block;
margin-top: 10px;
border-radius: 2px;
box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
position: relative;
}
<header>
<div class="logo">
<img src="Images/smaller GGR Logo.png" width="203" height="114" alt="Gas Guzzler Reviews Logo"/>
</div>
<nav>
<div class="navButton">About Us</div>
<div class="navButton">Contact Us</div>
</nav>
</header>
My main goal is to have the logo on the left and nav buttons on the right, any help is appreciated!
Temani Afif helpfully pointed out the code was working in the snippet. I realised I made an edit from when it did not work in the snippet when I first tested it. I had a CSS Reset after my regular CSS sheet screwing everything up. Thank you!
Mmm, you should check the CSS specificity in your code because your code snippet is working just fine to me.
Here is the changes I made to test it.
CSS changes:
.logo {
margin-left: 30px;
}
.contact__button {
margin-right: 30px;
}
HTML changes:
<div class="navButton contact__button">Contact Us</div>
My problem is as follows: I replaced some items (navigation, footer) in my HTML-code by adding objects instead and loading them externally. Since I did that, I can't load background pictures into my 'collage' part of the website.
HTML: Stripped it off of everything not part of the problem (except for the content).
The container is just a wrapper for the whole thing. My website will contain a bunch of images in the middle that link to the appropriate websites and, on hover over, display a short description and a title.
.collage is used to style the overall frame of the element
id will be used to add the background images (worked before!)
HTML-Part:
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<title>Startseite</title>
</head>
<html>
<body>
<div id="container">
<article>
<div class="collage" id="cg">
<a href="#">
<div class="text">
<h2>CG-Projekte</h2>
<p>
Computergerenderte Projekte, basierend auf der Open-Source-Software 'Blender', sowie Tutorials für einige der Projekte.
</p>
</div>
</a>
</div>
</article>
</div>
</body>
</html>
Use the first part for general purposes.
body: font-size so I can scale all em elements with one value (mobile)
#container: Placed in the middle, positioned accordingly, slightly darker than the overall background. Pretty basic
article .collage: Display as table to make the image hover-over work properly (which it does even now)
#cg: The part that isn't working. I can change the background-color with this tag, but not the image
.text parts: Those are the designs for the hover-over part, they work as far as I can see. I am using opacity to make it invisible, until it is hovered over.
CSS-Styling:
*{
margin: 0;
padding: 0;
}
body{
font-size: 100%;
background-color:#2B2B2B;
}
#container{
margin: 0 auto;
margin-top: 100px;
min-height: 50em;
min-width: 70em;
max-width: 80em;
background-color: #2A2A2A;
border: 2px solid white;
}
article .collage {
display: table;
height: 500px;
width: 700px;
margin: 100px 0 0 5px;
border: 1px white solid;
}
#cg{
background: url("cg_collage.jpg");
}
article div .text{
height: 400px;
width: 800px;
background: rgba(0,0,0,0.55);
position: relative;
top: 0;
left: 0;
vertical-align: middle;
display: table-cell;
opacity: 0;
transition: all ease-in 0.1s;
}
article .collage a{
text-decoration: none;
}
article .collage .text{
padding: 0 10px 0 10px;
}
article .collage .text h2{
text-align: right;
text-decoration: none;
color: #ADFF5C;
line-height: 70px;
font-size: 40px;
font-family: monospace;
border-bottom: 3px ridge #FFFFFF;
line-height: 50px;
}
article .collage .text p{
text-align: right;
font-family: Arial, Helvetica, sans-serif;
margin-top: 5px;
color: #ADFF5C;
}
article div:hover .text{
opacity: 1;
}
Folders
As I said: I can change the background color fine, hover-over works perfectly. The only thing that won't work is the background-images. Images work fine if I embed them in the html-file.
I can't figure it out and a different viewpoint might find the 'Error 30' ;)
All of the other answers are correct, in the sense that your paths are not correct. The reason why this is happening is b/c your CSS file is in, I'm assuming, the "styles" folder, and when you reference your image, the path is assuming that the image is in the same folder as your CSS file.
Instead of using ".." to "back out" of a folder, it's always a best practice to use relative paths. Reason being, if you move files, folders, etc, then the path will always be correct.
Hence, instead of using background: url('../cg_collage.jpg'), you should use background: url('/cg_collage.jpg'). The "/" at the beginning tells the file(s) to look at the root and start from there. So rather than always counting how many folder structures you need to "drop back", use relative paths.
Also, a good practice is to always have your images in a folder, and name that folder appropriately (eg - "img" or "images" or w/e).
Helpful article on absolute and relative paths.
You have to change your CSS:
#cg{
background: url("cg_collage.jpg");
}
To:
#cg{
background: url("../cg_collage.jpg");
}
This is because your image is outside styles folder (where your stylesheet is).
I am not sure but CSS is looking for image file in its direcotry (styles). Try this one:
#cg{
background: url("../cg_collage.jpg");
}
You code works perfectly, when the file cg_collage.jpg is in folder /styles. Is it there in your project?
I'm just learning/practicing, so any help would be SUPER appreciated. Also, if you find other errors or inefficiencies while looking, I'd love to hear about it.
I have four layers.
.body
.main
.main-side
.sidebar
This is essentially what I'm trying to recreate , and everything is working fine other than the third layer, or in the case of the example, the navy blue bar extending vertical on the right side. I can get it to go to the second layer (right above the main background) or cover up everything (including the sidebar), but I can't get it between layer two and four (in the example, the light blue inner box and the smaller, yellow side box.) Thanks in advance!
Here is the HTML and the CSS.
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="./style.css"/>
<title>CSS Zen Garden</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="main-side"></div>
<div class="main">
<h1 class="redbox">CSS Zen Garden</h1>
<h2>The Beauty of CSS Design</h2>
<div class="sub-heading">
<p class="top>">A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page.</p>
<hr>
<p class="bottom">Download the example HTML file and CSS file
</div>
<div class="enlightenment">
<h3>The Road to Enlightenment</h3>
<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers</p>
<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators.</p>
<p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>
<div class="about">
<h3>So What is This About?</h3>
<p>There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.</p>
<p>CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can always push it further.</p>
</div>
<div class="participation">
<h3>Participation</h3>
<p>Strong visual design has always been our focus. You are modifying this page, so strong CSS skills are necessary too, but the example files are commented well enough that even CSS novices can use them as starting points. Please see the CSS Resource Guide for advanced tutorials and tips on working with CSS.</p>
<p>You may modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
<p>Download the sample HTML and CSS to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your CSS file to a web server under your control. Send us a link to an archive of that file and all associated assets, and if we choose to use it we will download it and place it on our server.</p>
</div>
<div class="benefits">
<h3>Benefits</h3>
<p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing CSS really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow, and gallery of future techniques we can all look forward to.</p>
</div>
<div class="sidebar">
<h3>Select a Design:</h3>
<ul>
<li>
Mid Century Modern by Andrew Lohman
</li>
<li>
Garments by Dan Mall
</li>
<li>
Steel by Steffen Knoeller
</li>
<li>
Apothecary by Trent Walton
</li>
<li>
Screen Filler by Elliot Jay Stocks
</li>
<li>
Fountain Kiss by Jeremy Carlson
</li>
<li>
A Robot Named Jimmy by meltmedia
</li>
<li>
Verde Moderna by Dave Shea
</li>
</ul>
<h3>Archives:</h3>
<ul>
<li>
Next Designs <span class="indicator">›</span>
</li>
<li>
View All Designs
</li>
</ul>
<h3>Resources:</h3>
<ul>
<li>
View This Design’s CSS
</li>
<li>
CSS Resources
</li>
<li>
FAQ
</li>
<li>
<a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file.">
Submit a Design</a>
</li>
<li>
Translations
</li>
</ul>
</div>
<div class="requirements">
<h3>Requirements</h3>
<p>Where possible, we would like to see mostly CSS 1 & 2 usage. CSS 3 & 4 should be limited to widely-supported elements only, or strong fallbacks should be provided. The CSS Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSS validates.</p>
<p>Luckily, designing this way shows how well various browsers have implemented CSS by now. When sticking to the guidelines you should see fairly consistent results across most modern browsers. Due to the sheer number of user agents on the web these days — especially when you factor in mobile — pixel-perfect layouts may not be possible across every platform. That’s okay, but do test in as many as you can. Your design should work in at least IE9+ and the latest Chrome, Firefox, iOS and Android browsers (run by over 90% of the population).</p>
<p>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum, and try to incorporate unique and interesting visual themes to your work. We’re well past the point of needing another garden-related design.</p>
<p>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see submission guidelines), but we ask you release your CSS under a Creative Commons license identical to the one on this site so that others may learn from your work.</p>
<hr>
<div class="author">
<p>By Dave Shea. Bandwidth graciously donated by mediatemple. Now available: Zen Garden, the book.</p>
</author>
</div>
<footer>
HTML
CSS
CC
A11y
GH
</footer>
</div>
</body>
</html>
body {
font-family: 'Source Sans Pro';
line-height: 120%;
font-size: 16px;
font-weight: 400;
color: #333;
background: #daede2;
z-index: 1;
width: 90%;
vertical-align: center;
}
p {
font-size: 20px;
line-height: 140%;
padding-left: 50px;
}
h1 {
font-weight: 300;
text-transform: uppercase;
font-size: 30px;
color: white;
margin-bottom: -25px;
}
h2 {
font-weight: 900;
font-size: 130px;
line-height: 100%;
color: white;
letter-spacing: -.025em;
line-height: 1em;
width: 65%;
margin-left: 50px;
position: relative;
}
.sub-heading {
text-transform: uppercase;
width: 60%;
margin: 0 0 50px 14px;
position: relative;
color: white;
letter-spacing: .07em;
font-size: 18px;
}
h3 {
font-size: 30px;
font-weight: 400;
padding-left: 50px;
}
.main {
background: #77c4d3;
position: relative;
top: 50px;
left: 50px;
z-index: 2;
height: 5000px;
}
.main-side {
background: #3a4453;
position: absolute;
left: 1020px;
height: 2000px;
top: -200px;
width: 30%;
z-index: 1;
}
.redbox {
background: #df3c56;
position: relative;
top: 50px;
left: 50px;
padding: 25px;
width: 224px;
text-align: center;
}
.enlightenment {
background: #f2f9fb;
padding: 50px 50px 50px 0;
width: 58%;
position: relative;
top: 40px;
margin-bottom: 150px;
}
.about {
color: white;
width: 45%;
margin-bottom: 100px;
margin-top: 250px;
}
.about h3 {
color: white;
}
.benefits {
background: #f2f9fb;
position: relative;
top: 225px;
float: left;
padding: 50px;
width: 25%;
left: 50px;
}
.sidebar {
background: #e9f198;
position: absolute;
top: 70px;
right: 0px;
width: 25%;
font-size: 18px;
line-height: 200%;
letter-spacing: -.01em;
padding-right: 40px;
z-index: 4;
}
.sidebar a, h3 {
color: #333;
}
.sidebar h3 {
font-weight: 400;
padding-left: 40px;
margin-bottom: -20px;
}
.sidebar ul {
list-style-type: none;
}
.participation {
background: #df3c56;
float: right;
width: 45%;
color: white;
position: relative;
top: -618px;
right: 80px;
padding-top: 50px;
}
.participation p {
padding: 0 50px 0 50px;
}
.participation h3 {
color: white;
}
.requirements {
background: #f2f9fb;
position: relative;
float: right;
top: -625px;
width: 57%;
padding: 50px;
}
.requirements a {
color: #333;
text-transform: uppercase;
}
.author {
text-transform: uppercase;
}
footer {
background: #e9f198;
position: relative;
top: 119px;
padding: 25px;
font-size: 22px;
word-spacing: 10px;
color: #333;
left: -440px;
width: 80%;
}
a {
text-decoration: none;
color: white;
border-bottom: solid 1px #999;
padding-bottom: 2px;
}
hr {
border: 0;
height: 0;
border-top: 1px solid #df3c56;
width: 93%;
margin: 50px 0 50px 50px;
}
All you need to do is move .main-side into .main so you can add the right z-index to it to make it overlap like the example you posted and adjust the values:
.main-side {
background: rgba(58,68,83, .8); //convert to rgba so you can fade the background like the example
position: absolute;
right: -150px; //update - change to right instead
height: 2400px; //update
top: -200px;
width: 30%;
z-index: 1;
}
I also converted some of your colors to rgba to give it that transparent look.
FIDDLE
I'm not quite sure what you're asking, but here's a few things that might help. First, to achieve what they are with the yellow menu, you should use something like this:
.sidebar {
background: #e9f198;
position: absolute;
top: 70px;
right: -100px;
width: 25%;
font-size: 18px;
line-height: 200%;
letter-spacing: -.01em;
padding-right: 40px;
z-index: 4;
}
You'll see that the sidebar is now placed more like theirs.
And with these two changes, does it get closer to what you're looking for?
.main {
background: #77c4d3;
position: relative;
top: 50px;
left: 50px;
z-index: 2;
height: 5000px;
}
.main-side {
background: #3a4453;
position: absolute;
left: 900px;
height: 2000px;
top: 70px;
width: 30%;
z-index: 1;
}
I've also made a JSFIDDLE, which you should always do in the future for questions like this!
I have the task of using CSS to create a stylized text box that looks like this:
I've been the server developer for many sites and occasionally do jump in to CSS, and usually figure things out in a reasonably clean way. However, I'm really stuck with this one - it's been an hours-long drag slowly working my way through things, to begin to get this going.
I have not yet begun the colorizing or borders. For now, I'm stuck trying to position the first line of text vertically. I would rather not force the height or width of any of the lines of text, as this seems to me to risk breaking if text/size is slightly changed.
Instead, I'd rather use semantics such as centering and vertical-align: top; (etc) (at least partially).
The green colorization is optional for this question. I'm much more concerned about the positioning of the text. Also, please don't be concerned about the choice of font (I'll hopefully be able to figure that out myself) - but font SIZE (and bolding) is important.
The current state of my attempted CSS is shown below - which doesn't work. My current CSS (below) leaves the image on the page looking like this:
(The blue colorization is just Chrome Web Developer highlighting, which I've provided to indicate the size of the div that includes the text of the first line. The actual background color is white.)
In the above image, I have not begun worrying about the colorization or borders. The current status of the above image is that I'm just trying to get the text "CLICK HERE for a" to appear at the TOP of its div - as noted, WITHOUT setting the height or width of the div to "collapse" onto the text, if possible.
My current trouble positioning the "CLICK HERE for a" text vertically is just one issue I've been dealing with. I would like to have a complete, working sample of the text and text positioning for this image, done "the right way" (or at least done in not a bad way). Perhaps the right way really is to set the width and height of the click-here-for-a div (see CSS below) to be nearly equal to the text dimensions, in order to force its absolute positioning (but as noted, I'd rather not unless answers here correct me, by telling me that this is a good way to do it).
Here is the HTML / CSS for the above (incorrect) image:
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.intro-offer-smooth-click-region {
position: relative;
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
}
.click-here-for-a {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
}
.intro-offer {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.discount-description {
position: absolute;
font-size: 9pt;
height: 12px;
}
What is the right way to use CSS to create the image above - at least in terms of text formatting and positioning?
Posting as an answer at your request. It helps to add span tags around single lines of text that you want to style independently.
JSFiddle Example
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
<span>CLICK HERE</span> for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.smooth-click-region {
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
background: #cebd44;
border: inset 1px dotted;
border-style: double;
}
.click-here-for-a span {
font-weight: bold;
}
.click-here-for-a {
display: block;
text-align: center;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
font-weight: bold;
}
.intro-offer {
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
margin-left: auto;
margin-right: auto;
}
.discount-description {
font-size: 9pt;
height: 12px;
text-align: center;
}
Here you are, as simple as it gets http://jsfiddle.net/1dmhLm9c/
.smooth-click-region{
text-align: center;
width: 300px;
background: green;
padding: 10px;
}
p, h2{
margin: 0px;
}
You can style it as you want :)
You can find some site with a similar boxes that works well and inspect it with firebug. That will show you the html layout.. You can get some good ideas for how you want to create your own.
Very simple.
Demo http://jsfiddle.net/7xtf1f8m/
CSS:
.smooth-click-region {
display: inline-block;
border: 2px solid #aa6;
padding: 2px;
background-color: #cc0;
box-sizing: border-box;
text-align: center;
font-family: Arial;
}
.smooth-click-region span {
font-weight: 700;
}
.inner {
padding: 0.3em 3em;
background-color: #aa6;
}
.click-here-for-a {
font-size: 0.8em;
}
.intro-offer-on-home-delivery {
font-weight: 700;
}
.discount-description {
font-size: 0.7em;
}
HTML:
<div class="smooth-click-region">
<div class="inner">
<div class="click-here-for-a"><span>CLICK HERE</span> for a</div>
<div class="intro-offer-on-home-delivery">
Special Introductory Offer<br/>
on Home Delivery
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
</div>
You can create the multiple borders by using the CSS3 box-shadow property. HTML tags have by default some CSS attributes so you do not have to define them in your CSS. For example the tag <div> is a block level element and by default has display: block; (you defined it for div.click-here-for-a).
You do not have to write too much unnecessary css.
This is my example for you:
.smooth-click-region {
background:#acb014;
width:260px;
padding:5px;
position:relative;
box-shadow: 0 0 0 5px #FFF,0 0 0 10px #acb014;
text-align:center;
}
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer"><strong>Special Introductory Offer</strong></div>
<div class="on-home-delivery"><strong>on Home Delivery</strong></div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
I did not changed your html code but I advise you to use other HTML tags that have their default css. Use h1, h2, h3 for headlines and p for paragraphs, etc.
I'm trying to create a question-mark-inside-a-circle glyph using CSS. It should look like © basically.
Here's what I have so far.
a::before
{
content: '?';
font-size: 60%;
font-family: sans-serif;
vertical-align: middle;
font-weight: bold;
text-align: center;
display: inline-block;
width: 1.8ex;
height: 1.8ex;
border-radius: 1ex;
color: blue;
background: white;
border: thin solid blue;
}
It's not bad on firefox but the positioning of the question mark inside the circle is off-centre on Chrome (and I don't have IE to test but I'm assuming the worst).
I don't understand much about the nuances of fonts. Can this approach be made to work cross-platform or should I give up and use an image? I'm doing it this way to keep it scaled with the font.
UPDATE: Tweaking the settings as suggested so far is providing improvements only in select circumstances. There always seems to be some font sizes for which there is more than a rounding error (more than 1 pixel that is) of off-centreness either horizontally or vertically. The goal is to fit the border to the question mark, not fit the border to the square box which contains the question mark, as I suspect is happening.
See this fiddle: http://jsfiddle.net/hg7nP/7/
Highlighting only the things I changed:
.infolink:before {
font-size: 1.4ex;
line-height: 1.8ex;
border-radius: 1.2ex;
margin-right: 4px;
padding: 1px;
text-decoration: none;
}
Regarding cross browser, it is working in all browsers except IE < 9 where border-radius won't work.
Based on the Abhitalk's answer and playing with it a bit, I've came up with a responsive approach, where the question mark and the circle are both scale in proportion to the base font size so you can easily set the size of the whole thing:
.infolink:after {
content: '?';
display: inline-block;
font-family: sans-serif;
font-weight: bold;
text-align: center;
font-size: 0.8em;
line-height: 0.8em;
border-radius: 50%;
margin-left: 6px;
padding: 0.13em 0.2em 0.09em 0.2em;
color: inherit;
border: 1px solid;
text-decoration: none;
}
Use it like this:
<div class="infolink" style="font-size: 20px"></div>
If you see how this can be improved further, your comment is very welcome!
Looks like you're missing line-height:1; Add that and it gets significantly better.
Personally I think it looks best with font-size:50%, but that's my opinion.
Updated Fiddle
W3C schools has a useful guide for creating circular question marks using Awesome Fonts and unicode, tested in Chrome, Firefox, Edge and IE and appears consistent in all, please see demo:
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>fa fa-question-circle</h1>
<i class="fa fa-question-circle"></i>
<i class="fa fa-question-circle" style="font-size:24px"></i>
<i class="fa fa-question-circle" style="font-size:36px"></i>
<i class="fa fa-question-circle" style="font-size:48px;color:red"></i>
<br>
<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-question-circle"></i></button>
<p>Unicode:</p>
<i style="font-size:24px" class="fa"></i>
</body>
</html>
Sourced from W3C Schools: https://www.w3schools.com/icons/tryit.asp?filename=tryicons_fa-question-circle
Just make the line-height the same as the height of the element/pseudo-element.
line-height:1.8ex;
You can use Unicode characters to get a more concise solution. I used a question mark with Combining Enclosing Circle (U+20DD)
.infolink::before {
content: '?⃝';
display: inline-block;
margin-right: 0.25rem;
}