I am testing some css and have found that the browsers (Chrome, firefox) will not show the ::after content I am specifying. Fiddler show is correctly, but the browser will not.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/test.css">
</head>
<body>
<div id="testdiv">
<main>
<section>
<p>
I want to put number '123' here:
</p>
<p>
And I want it here too:
</p>
</section>
</main>
</div>
</body>
</html>
CSS:
#testdiv main p { margin: 0; font-size: 1.5em; font-weight: 700;}
#testdiv main p + p { font-size: 1.0em; font-weight: 300;}
#testdiv main p::after { content:'123'; }
Fiddle: (shows correct)
https://jsfiddle.net/bg1tg8nc/
Any help appreciated.
HA I figured out how to fix the issue!
If you take the above CSS code and reorder it like this:
#testdiv main p::after { content:'123'; }
#testdiv main p { margin: 0; font-size: 1.5em; font-weight: 700;}
#testdiv main p + p { font-size: 1.0em; font-weight: 300;}
it works fine.
Can anyone explain why?
Related
I need to recreate this:
My Attempt:
I'm trying to recreate the first picture above and the result I got was the 2nd picture I need
this is a university homework, specifically how do you add a "Use the menu to select different stylesheets" in that way below the Header, at first i tried adding another but the result is as you can see
my code:
<!DOCTYPE html>
<html>
<body>
<head>
<style>
h1 {
text-align: center;
background-color: lightgreen;
font-family: Arial;
font-size: 200%;
}
h2 {
text-align: center;
background-color: lightgreen;
font-family: Arial;
font-size: 100%;
}
</style>
</head>
</body>
<h1>Welcome to my Homepage</h1>
<h2>Overview of Homepage</h2>
</html>
I think you want something like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content{background-color: #2ed274; text-align: left; padding: 20px;}
body{color: white; font-family: Arial;}
h1 {font-size: 30px; margin-bottom: 0;}
h2 {font-size: 15px; margin-top: 0;}
</style>
</head>
<body>
<div class = 'content'>
<h1>Welcome to my Homepage</h1>
<h2>Overview of Homepage</h2>
</div>
</body>
</html>
I am making a website, which contains a game. The instructions area is supposed to be on the right side of the screen, and the upgrades area is supposed to be on the left. Right now, this is what I have.
(please don't comment on anything besides the div tags, I know I'm messing up the sizes)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>
CRayen's answer didn't look like it actually accomplished what you wanted, so take a look here.
I did a few things:
Moved the upgrades div out of the text1 div so they are both
direct children of the game div
Set game to have a display value of flexbox, which is a new-ish CSS layout technique that really helps with this style of design.
Gave both upgrade and instruction boxes a flex-basis of 20%, which is similar to your width: 20%;
Removed the margin-right on upgrades
I highly recommend looking into Flexbox for more info on how to create and edit layouts like this!
I have made few changes to the CSS:
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
p {
font-family: 'Roboto', sans-serif;
padding: 15px
}
.text1 {
background-color: lightgrey;
text-align: left;
border: 1.4px solid grey;
border-radius: 10px;
height: 20em;
width: 20%;
float: right;
}
.mono {
font-family: 'Roboto Mono', monospace;
}
h2 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
.upgrades {
background-color: lightgrey;
text-align: left;
border: 1.4px solid grey;
border-radius: 10px;
height: 20em;
width: 20%;
float: left;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>
I have been banging my head on the table trying to figure out why this happens. I have set up an anchor that has padding on the top, bottom, and left sides. Inside that anchor is two text elements and as the background of the anchor is an image.
Now when I zoom out (not shrinking the viewport) in chrome, everything seems to shrink as expected until I hit 80%. At this point the content continues to shrink but not the padding on the left side! In FireFox it seems to work as expected.
Attached is my code, please any ideas on how to explain this will be appreciated.
html {font-family: 'tex gyre heros', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; font-size: 10px}
a,a:link,a:visited,a:hover {text-decoration: none; color: inherit;}
.logo {
padding: 10em 10em 0 0;
background: url(../images/some-image.svg) left center no-repeat;
display: inline-block;
vertical-align: bottom;
}
.logo.main {
padding: 1.2em 0 2.1em 12em;
}
.logo.main .logotype, .logotype.block {
display: block;
}
.logotype {
font-weight: bold;
white-space: nowrap;
}
.logotype.title {
font-size: 4em;
line-height: 1.1;
color: #646469;
}
.logotype.subtitle {
padding: 0 0 0 0.078em;
font-size: 2.1em;
line-height: 1.1;
color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Company">
<base href="">
<title>Company</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" charset="utf-8"/>
</head>
<body>
<header>
<a class="logo main" href="">
<span class="logotype title">Line 1</span>
<span class="logotype subtitle">Line 2</span>
</a>
</header>
<section>
</section>
<footer></footer>
</body>
</html>
The issue here comes from the difference in pixel representation between browsers. Meaning - Chrome and Firefox might handle some fixed pixel values differently (don't ask me why, its just how the world functions with everything).
Possible solution 1: Try and set the padding values in % so that they can be relative to each other.
Possible solution 2: This thread on CSS Tricks about not breaking the layout when zooming:
Possible solution 3: Check your viewport tags. Use this thread.
Like #DarkxPunk said, the link goes to the far left side on Firefox and somehow does not go to the far left in Chrome.
Issue visualization for further investigation:
Chrome:
Firefox:
In my head I want to use the "Your Image is More Important Than Ours" with an emphasis on More Important.
I also want that to be underlined and shadowed to match a red background (white shadow). That emphasis also I'm debating if it should blink or fade in.
For some reason, my css isn't working on it.
HTML CODE:
<!-- This is a HTML Document-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dld.css">
<title>Dave's Logo Designs</title>
</head>
<header>
<div id="header">
<h1>Your Image is <em>More Important</em> Than Ours</h1>
</div>
</header>
<body>
<h1>Welcome to the official site of Dave's Logo Designs<h1>
</body>
</html>
CSS So Far:
header {
width: 100%;
height: 200px;
}
header:h1 {
color: red;
text-shadow: 0px 2px 2px white;
font-size: 25px;
font-family: impact;
}
header:em {
color: white;
font-weight: bold;
text-decoration: underline;
font-size: 30px;
font-family: impact;
}
Nothing's working. Probably something stupid on my end. Thanks for the help in advance.
You should put header tag inside yout body tag.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dld.css">
<title>Dave's Logo Designs</title>
</head>
<body>
<header>
<div id="header">
<h1>Your Image is <em>More Important</em> Than Ours</h1>
</div>
</header>
<h1>Welcome to the official site of Dave's Logo Designs<h1>
</body>
</html>
and also change your css selector
header {
width: 100%;
height: 200px;
}
header h1 {
color: red;
text-shadow: 0px 2px 2px white;
font-size: 25px;
font-family: impact;
}
header em {
color: white;
font-weight: bold;
text-decoration: underline;
font-size: 30px;
font-family: impact;
}
note the space between header and h1.
It will result like this (darkgreen background added to show italicized text which is white).
So I'm trying to add my CSS code to my HTML code on notepad++ but every time I run it, the only thing I see is my code and not all the content I want about website. How do I fix this?
Here is a snip of my html code:
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
</head>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br></br>
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
Please find your updated code here, This is how you should add/write CSS to HTML :
I would suggest you to move your <style> tag to <head> area.
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
<style type="text/css" >
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br>
</body>
</html>
To apply css you have to put css under tag or you can use external stylesheet..Read more here
Please check this example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
nav div
{
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<div>This is Div.</div>
<p>This is paragraph.</p>
<div style="color:red; font-family:Verdana, Geneva, sans-serif;"> This is Inline CSS Style</div> <!--Inline CSS Style-->
</body>
</html>
You have used css for div and p tag and i have showed you how to use them according to your css. You can also give css in inline way but it just depends on need(mostly avoid it.)
Hope this will help or let me know if there is any confusion or issue..ty