if we visit this page , at the time of loading , "ADD TO CART" button will display bit above as below image.
once the page loaded completely, than it will display in proper place.
but at the time of page loading also i want to display in proper place.
.label {
color: #000;
display: inline-block;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
font-weight: normal;
}
.product-view .add-to-cart .qty-wrapper label {
line-height: 40px;
}
.qty-wrapper, .product-view .add-to-cart .qty-wrapper label {
margin-right: 7px;
float: left;
}
.product-view .add-to-cart-buttons {
float: left;
margin-right: 10px;
max-width: 100%;
}
The source code of your page hurts my eyes!!
You're loading the styles <link rel="stylesheet" type="text/css" href="http://sbdev2.kidsdial.com/skin/frontend/rwd/Style/css/styles.css" media="all" /> after all the js files, move the CSS below the <meta property="og:image" ... meta tag in your page, above all the js files.
Related
I want to add a background image on my webpage but when I add in my code it doesn't show the image. The page is linked to the home page but how would I get my background image to appear when the user selects the help guide tab, which it then takes them to another page.
<html>
<head>
<meta charset="utf-8" />
<style>
h1 { text-align: center; font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: 50; }
p.p-stage { text-align: center; font-family: Arial; font-size: 150%; }
p.p-help { text-align: center; font-family: Arial; font-size: 100%; }
body {
background-image: url("assets/images/Festival.jpg");
background-height: 100%;
backgroud-width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
#rcorners2 {
margin: auto;
text-align:left;
border-radius: 25px;
border: 2px solid #000000;
padding: 20px;
width: 1000px;
height: 750px;
overflow: auto;
}
</style>
</head>
<body>
<h1>Help Guide</h1>
<p class ="p-stage" id="rcorners2">Stages:<br><br>1. How to add a stage?<br><br>
To create a stage please do this.................<br><br>
2. How to delete a stage?<br><br>
To delet a stage please do this.................<br><br>
3. Add a help guide with a questions users may come up with and then com up with answers.
</p>
</body>
</html>
Here is my webpage
I fixed the problem. it is due to path of the root directory. To go back in the root directory where the image file might be in use:
background: url("../../assets/images/Wallpaper4.jpg");
the 2 dots go back one folder so two .. means you have gone back 2 folders
I'm trying to replicate a webpage template solely for the purpose of becoming more familiar with the works of HTML/CSS. I want to use an image in my documents as a background for a DIV, but for some odd reason, it will not import. Keep in mind, I'm still pretty new to coding.
I pulled a random stock photo address off of Google as a test, and that would work. So, I'm thinking either I have the photo located in the wrong folder (It's in the same exact folder as the document I'm calling it from), or there's something else in my code that is conflicting with the called image/file. I'm still not sure, though.
HTML file:
<html>
<head>
<title>conquer</title>
<link rel="stylesheet" type="text/css" href="conquer.css" />
</head>
<body>
<div class="navbar">
Homepage
About Us
Services
Contact
External
</div>
<div class="topbanner"></div>
</body>
</html>
CSS file:
body {
background-color: #fff;
margin: 0;
}
/** Navigation Bar **/
.navbar {
background-color: #383E4C;
height: 100px;
width: 100%;
position: fixed;
text-align: center;
margin-top: 0px;
}
.navbar a {
color: #F6F6F7;
text-decoration: none;
font-size: 22px;
font-family: "Helvetica", sans-serif;
border: 1px solid #646D7C;
padding: 15px;
margin-top: 20px;
margin-right: 20px;
display:inline-block;
}
.navbar a:hover {
background-color: #49505F;
}
/** Top Banner **/
.topbanner {
height: 500px;
width: 300px;
background-image: url('/city.jpg');
background-repeat: no-repeat;
}
I want the image to display in the DIV, but when I open the console elements, it's just a huge invisible block.
In paths, the leading slash /, tells the browser to goto the ROOT folder.
So you will want to change this:
background-image: url('/city.jpg');
to
background-image: url('city.jpg');
I'm new to HTML and CSS. The following lines I wrote in the Atom text editor are not properly shown in the preview. The font is not changing from the default Times New Roman. Even after adding extra font-packages. However, I did not use any fancy kind of fonts. Is their something wrong with my code instead?
body {
font-family: Tahoma;
font-size: 16px;
}
#point1 {
font-family: Verdana;
color: orange;
margin-top: 10px;
margin-bottom: 10px;
}
#point2 {
font-family: Impact;
color: red;
margin-top: 10px;
margin-bottom: 10px;
}
#point3 {
font-family: Georgia;
color: pink;
margin-top: 10px;
margin-bottom: 10px;
}
#point4 {
font-family: Tahoma;
margin-top: 10px;
margin-bottom: 10px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Text</title>
</head>
<body>
<p> This is a paragraph. All of the text on this page has a font size of 16 pixels.
This paragraph, like most of the text on this page is black and uses Tahoma font.</p>
<ul>
<li id="point1">This list item uses the Verdana font and color orange.</li>
<li id="point2">This list item uses the Impact font and the color red.</li>
<li id="point3">This list item uses the Georgia font and the color pink.</li>
<li id="point4">This list item is black and uses the Tahoma font. It also contains a link to
<link href="http://www.spiced-academy.com"></link>
</ul>
<p>This is another paragraph. Each item in the list above has a top and bottom
margin of 10 pixels.</p>
</body>
</html>
I'm not sure that is the problem but try to add the attribute type on the link css stylesheet:
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Well, in the code preview window I see it works (Chrome, Mac). Try to clear your browser cache or write font-family: Tahoma !Important;
Make sure that your CSS page is saved as stylesheet.css because this is what is referenced in your code.
Check that your HTML file and CSS file are saved in the same directory.
For testing, you could have the CSS in a <style> tag, before even trying to link to a stylesheet. You can place this in the <head> tag. Then tackle the external stylesheet once you can successfully see the styles here.
<head>
<style>
body {
font-family: Tahoma;
font-size: 16px;
}
#point1 {
font-family: Verdana;
color: orange;
margin-top: 10px;
margin-bottom: 10px;
}
#point2 {
font-family: Impact;
color: red;
margin-top: 10px;
margin-bottom: 10px;
}
#point3 {
font-family: Georgia;
color: pink;
margin-top: 10px;
margin-bottom: 10px;
}
#point4 {
font-family: Tahoma;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
To explain what I wish to achieve, lets say I have a long css document with many classes. I have several different "h1" tags and "h2" tags, "iframe", "ul", and many have different classes. Is it possible for all "h1" or other tags, regardless of class, to be grouped together and all "iframe" are grouped together in one group in Notepad++.
h1.left {
font-family: Papyrus;
font-size: 45px;
color: white;
margin-left: 15px;
}
h1.center {
font-family: Papyrus;
font-size: 30px;
color: white;
text-align: center;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pre>PS: All code in this document is just
so it would be seen as I meant it to be,
and I hope you can read it right.<pre>
<!--For example:-->
+ h1
<!--And if i roll the h1 down, i can get all h1 in the document:-->
<ul>
<li> h1.left</li>
<li>h1.center <li>
<li>h1.right<li>
<!--And if i open those again, I will get all the code that is inside them-->
</body>
</html>
Not sure whether Notepad++ can run SASS but it sounds like what you are after.
h1 {
color: white;
font-family: Papyrus;
text-align: center;
&.left {
font-size: 45px;
}
&.center {
font-size: 30px;
}
}
I'm new to SVG and have been putting numbers in text tags for a week or two with no issues. It seemed straightforward. Now, strangely, I'm having an issue in which, no matter what numbers I put in, there is a dip in the second number.
Here is a pic to show you what is happening. The number "63" is supposed to be all on the same plane with itself, though a bit below the "This Week" designation. Instead, the '3' is dipping down lower. Pic of my problem.
My code:
<div class = "chartbox">
<div class = "svgcontainer" >
<svg class = "chart" width="590" height="440" role="img">
<g class = "bigbox">
<text x="346" y = "35" class = "blurbhed">This Week </text>
<text x ="491" y ="44" class = "blurbdeck"><?php echo round($kms_for_table[0]);?></text><text x ="540" y ="48" class = "blurbkm"><?php echo "km";?></text>
</g>
</svg>
</div>
</div>
The CSS:
body { background-color: #1C1816;
font-family: Raleway, Gotham-Rounded, Arial , sans-serif;}
.blurbhed {
font-size: 1.5em;
font-weight: 600;
fill: #650a5d;
letter-spacing: .3px;
}
.blurbdeck {
font-size: 2.7em;
font-weight: 600;
fill: #08292e;
letter-spacing: .4px;
}
.blurbkm {
font-size: 1.3em;
font-weight: 600;
fill: #08292e;
letter-spacing: .4px;
}
.svgcontainer {
display: block;
position: relative;
border: 10px solid purple;
background-color: lightyellow;
margin-left: 10px;
height: 453px;
width: 630px;
margin-top: 0px;
margin-bottom: 20px;
text-align: center;
margin-right: 50px;
}
.chartbox {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
width: 800px;
margin-bottom: 10px;
padding-top: 20px;
}
The same problem happens wherever I move the text around the svg element. It occurs with a variety of fonts, and with different numbers. It happens whether I just have it echo the number or have it generated by the code from my model. I also tried making a completely new text element in a different spot, and the same weird dip in the second number occurs.
I'm sure this is really simple, but I've been fiddling with it far too long and am hoping someone can help me out. Thank you!
This is definitely down to the design of the font being used.."Raleway".
h1 {
font-family: 'Raleway', sans-serif;
font-size: 72px;
text-align: center;
}
h2 {
font-family: 'Open Sans', sans-serif;
font-size: 72px;
text-align: center;
}
* {
margin:0;
}
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<h1>0123456789</h1>
<h2>0123456789</h2>
I can only suggest using a different font..but you'd have to test each for the right look.
There's a proper solution for this that allows you to continue using Raleway:
You need to do two things:
Add CSS instructing the browser to use the lining-figures
Avoid pre-optimised font files (as served by Google Fonts.)
The CSS:
body {
font-variant-numeric: lining-nums;
font-feature-settings: "lnum";
}
Alternative CDN (Brick):
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Raleway:400">
The problem with Google Fonts is that it minimises font download size by removing 'unnecessary' glyphs and meta-data. In particular in this case, it removes the lining-nums variation of figures from Raleway. (You can try adding &subset=all to a Google Font URL to circumvent this, but this doesn't appear to be reliable.)