I want to know how I can change the background size around a link.
here is my HTML
<!DOCTYPE html>
<head>
<title>Library for Macintosh games.</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Old Mac Games for Free</h1>
<p>Google</p>
<script src="javascript.js" type="text/javascript">
</script>
</canvas>
</body>
</html>
here is my CSS
html {background-color: #d0e0c9}
h1 {
font-family: Arial;
font-weight: bold;
text-align: center;
margin-bottom: 85px;
margin-top: 85px;
font-size: 45px;
}
#link {
background-color: fuchsia;
text-align: center;
margin:500;
height: 100px;
width: 200px;
}
I believe you're referring to the padding of the link element.
If you'd like to increase the appearance of the background of the link element, you can easily add in this css:
#link {
background-color: fuchsia;
text-align: center;
padding:2em;
}
You should be able to see the link's "background-size" easily.
You can see a working demonstration here: http://codepen.io/anon/pen/xOVYvL
I invite you to check out some further reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
If you want to change the size of the link's text, you can use
<span style="font-size: 10px;"> <a href"..."> Text Here </a></span>
If you want to change the font color, "color: blue;", if you want to change the background color "behind the text":
<div style="background-color: black;">
<span style="font-size: 10px;">
<a href"...">
Text Here
</a>
</span>
</div>
And you change the size of the div like this:
<div style="width: 100px; height: 5px">
<div style="width: 50%; height: 5px; margin: auto;">
Here is a link to common CSS styling: http://www.w3schools.com/css/default.asp
EDIT: Also, its pretty unclear what you mean by "background size" you might want to be a little more specific when you post a question!
Related
I'm working on a project in WebStorm, and it appears that the CSS I'm trying to apply to parts of the project works when it's connected to an ID, but not when it's a class. Here's my current HTML in basic format:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="firstJS.js"></script>
<link rel="stylesheet" href="styles.css"/>
<title>title</title>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="header" class="pageHeader">
<h1>at the top</h1>
</div>
<div role="main" class="ui-content">
</div>
<div id="welcomeBox" class="main">
<div id="welcome" class="headerOne">Welcome!</div>
<div id="here">
<div>here's some cool words <a class="boxLink" href="https://twitter.com">Contact</a> for help!</div>
</div>
<div id="firstLinks" class="main">
<div class="headerOne">LINKS</div>
</div>
</div>
</div>
</body>
</html>
And here's my CSS:
#mainPage{
background: lightgrey;
}
.pageHeader{
font-size: 30px;
background: goldenrod;
}
.main{
border: solid thick darkgoldenrod;
background: goldenrod;
border-radius: 15px;
}
#welcomeBox{
width: 1000px;
height: 125px;
position: relative;
left: 12%;
}
.headerOne{
font-size: 30px;
font-weight: bold;
}
#welcome{
position: relative;
left: 15%;
}
#here{
position: relative;
left: 1%;
font-weight: bold;
}
.boxLink{
color: saddlebrown;
}
If I change the pageHeader and boxLink classes to IDs, the CSS does what I want it to do on the page (the main and headerOne classes seem to work perfectly fine as classes for whatever reason). But at the moment, the font size in pageHeader is the only thing I can change while they're classes that I can actually see changed on the page.
At an earlier point I also had a <ul> inside the firstLinks div, where each <li> in that list would have an <a> link in it that take someone to another page of the site (I didn't include those pages in this code at the moment). Those <a> links were supposed to use the boxLink class, but the formatting didn't carry over for those either.
Is there a workaround for this? Is there a way for me to make it a general class and have it apply to whatever element I want instead of hyper-specifying it to a specific <div>?
You are using in Your project the jQuery Mobile Framework, which is a mixed CSS-JavaScript Framework. What does this means? In a mixed CSS/JS Framework You will have some CSS Classes declared in a CSS Stylesheet and over that layer, at run-time. some other HTML fragments will be created by the Frameworkand and injected into the existing DOM. At run-time, the CSS classes of the Framework, which have been defined into the CSS Stylesheet, are applied to these new parts of the HTML page.
Take for example the JQM Header:
<div data-role="header">
<h1>at the top</h1>
</div>
If the JQM Framework has been referenced in the head and instanced, after page load it will parse Your HTML and enhance Your existing Tags with the corresponding Framework Classes. Toolbar (header) is one of the simplest enhancement. For instance, JQM Lists or Checkboxes/RadioButtons are enhanced in a more sophisticated way.
Each Tag which has the custom data-role="header" attribute will be enhanced as follows:
<div data-role="header" class="ui-header ui-bar-inherit" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">Page Title</h1>
</div>
Now, what if You need to change the default Framework styles with some of Yours?
This is a very common requirement. For this task, the Chrome or Firefox Inspectors are Your best friends. Just look at the hierarchy of styles definition. You will find out that some styles which have more specificity or are declared by using !important overrides some of the previously defined styles.
Note how Your custom background-color style defined inside Your custom pageHeader class of Your custom style.css file has been override by the JQM property defined by the Framework inside the .ui-page-theme-a .ui-bar-inherit classes of the jquery-mobile-1.4.5.css file:
Sorry for this boring explanation, now to the point. Obviously You don't know exactly which styles have been applied at page load and moreover, which styles are also applied dynamically at run-time. You need to explore the elements. The hierarchy goes from bottom to the top. You will easily find out what's happen in Your page.
This is the reason because Your custom font-size is working well but Your custom background-colorisn't.
To get Your custom style applied, You can use either specificity over the JQM header classes, or !important for the background-color property:
.ui-header.pageHeader{
font-size: 30px;
background: goldenrod;
}
.pageHeader{
font-size: 30px;
background: goldenrod !important;
}
Both will lead to the same result, it is just a matter of preference depending from Your needs and what You are trying to achieve. Here are some references:
https://www.w3schools.com/css/css_specificity.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
...just forgotten to mention that You can also override the JQM style directly:
.ui-header{
font-size: 30px;
background: goldenrod !important;
}
Seems your code is fine, kindly try the below Code if it works, then it seems to problem with your external stylesheet.
Kindly let me know if you face the same problem,
Also i have changed the JS files to Bottom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="styles.css"/>
<title>title</title>
<style>
#mainPage{
background: lightgrey;
}
.pageHeader{
font-size: 30px;
background: goldenrod;
}
.main{
border: solid thick darkgoldenrod;
background: goldenrod;
border-radius: 15px;
}
#welcomeBox{
width: 1000px;
height: 125px;
position: relative;
left: 12%;
}
.headerOne{
font-size: 30px;
font-weight: bold;
}
#welcome{
position: relative;
left: 15%;
}
#here{
position: relative;
left: 1%;
font-weight: bold;
}
.boxLink{
color: saddlebrown;
}
</style>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="header" class="pageHeader">
<h1>at the top</h1>
</div>
<div role="main" class="ui-content">
</div>
<div id="welcomeBox" class="main">
<div id="welcome" class="headerOne">Welcome!</div>
<div id="here">
<div>here's some cool words <a class="boxLink" href="https://twitter.com">Contact</a> for help!</div>
</div>
<div id="firstLinks" class="main">
<div class="headerOne">LINKS</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="firstJS.js"></script>
</body>
</html>
I want to line it up clearly but I just can't. What should I do for it?
<html>
<head>
<style type="text/css">
.article-topic-list a {
color: black;
text-decoration: none;
margin-left: 15px;
margin-top: 20px;
}`enter code here`
</style>
</head>
<body>
<div class="article-topic-list"> Sale of Kodi TV boxes faces <br> legal test </div>
<div class="article-topic-list"> Piracy fighters battle Kodi 'epidemic'</div>
</body>
</html>
To get the results you're asking for, designwise, you'll have to move the margin-styles to the div, and keep the color and text-decoration on your a-tag. If you simply remove the 'a' from the style tag, you won't get any color or text-decoration changes, since the style from the browser (directly on a), would take precedence.
.article-topic-list {
margin-left: 15px;
margin-top: 20px;
}
.article-topic-list a {
color: black;
text-decoration: none;
}
<body>
<div class="article-topic-list">
Sale of Kodi TV boxes faces <br> legal test
</div>
<div class="article-topic-list">
Piracy fighters battle Kodi 'epidemic'
</div>
</body>
See this example.
Instead of applying the css rule to the tag, if you apply the rule to the entire div, i believe it should line up correctly. Your style script would be like this:
<style type="text/css">
.article-topic-list {
color: black;
text-decoration: none;
margin-left: 15px;
margin-top: 20px;
}
</style>
And the output would be something like this.
I want to display text and button on the same line, i have tried several ways, also i have searched through internet resources and also viewed many questions on the similar topic on stack overflow. Here is my code..
<!DOCTYPE html>
<html>
<body>
<div>Text Here<button id="button" style="float:right">Click Me!</button></div>
</body>
</html>
Here is the Output of above written code:
Referring to all the answers here is the final solution to this problem...
I'm answering this for those who will refer this question in future, Thanks to all :)
.Data
{
display: inline;
display: inline;
line-height: 30px;
height: 30px;
}
.DataButton
{
float:right;
font-family: 'Titillium Web', sans-serif;
text-transform: uppercase;
font-size: 20px;
border-radius: 4px;
cursor: pointer;
text-align: center;
text-decoration: none;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s; /* Safari */
background-color: white;
color: black;
border: 2px solid #00AABB;
height: 30px;
}
.DataButton:hover {
background-color: #00AABB;
color: white;
}
<!DOCTYPE html>
<html>
<body>
<div class="Data">
Text Here!
<button class="DataButton">Click Me!</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div>Text Here
<button id="button" style="float: 'right'">Click Me!</button>
</div>
</body>
</html>
The code above works. You've missed the ''.
Edited - added -
It does work when you apply other styles, for instance:
<html>
<body>
<div style="color:blue;text-align:center; background-color:red">Text Here
<h1 style="color:blue;text-align:center">This is a header</h1>
<button id="button" style="float: 'right'">Click Me!</button>
</div>
</body>
</html>
What would you like to do exactly? Try explaining or maybe drawing, sketching somehow for us to help you.
block elements in html are by default display:block.
The best way to show them in one line is this:
<!DOCTYPE html>
<html>
<body>
<div><p style="display: inline;">Text Here</p><button id="button">Click Me!</button></div>
</body>
</html>
Use display flex. Moreover you should add text in a tag and then add float:left; for label and float:right; for button.
Stop using floats.
Here is your code.
<div style="display:flex; justify-content: space-between; align-items: center;">Text Here<button id="button">Click Me!</button></div>
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am trying to create a resizable html page that mimics the java applet clock layout and am not sure if I am approaching this in the right way. This 3 clock picture below is what I am trying to create now. Currently I used div, margins, padding to lay out a 1 clock using css but since the font-size are all different per line I am used the vmin font to handle the auto-resizing; but with mixed results. I have being looking online for a tutorial or examples that would address how to do this problem without success since the examples are resizing text paragraphs that are the same font-size throughout or images.
Does anyone know of a tutorial site or example that addresses this type of problem? Maybe I should be doing this using canvas or something instead of div tags. Thanks.
This was my 1 clock page (minus all the css stuff):
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="AOS/LOS Clock" />
<title>AOS/LOS Clock</title>
<link rel="stylesheet" type="text/css" href="css/mc_style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type=\"text/javascript\" src=\"js/mc_clocks.js?color=00ff00&file=input/aos_times_json;\"></script>
<script type="text/javascript" src="js/mc_engine.js"></script>
</head>
<body id="body">
<div id="wrapper">
<div id="clockAOS" class="clock missionColor"></div>
<div class="title missionColor"><span>Acquisition of Signal</span></div>
<div id="relay" class="siteTdrs"></div>
<div id="clockLOS" class="clock missionColor"></div>
<div class="title missionColor"><span>Loss of Signal</span></div>
</div>
<p id="Msgs"></p>
</body>
</html>
I suggest checking out bootstrap for laying out elements on a page. You can create a simple layout easily and it will be responsive.
As far as font size goes, there is no way to show the page the same across all browsers and devices. Even using pixels which is a fairly common standard will have different results on retina displays. Read this to learn more about font sizing.
I re-read the vs font descriptions and redid my css sheet. This resizes the fonts but the negative margin-left doesn't look the same on the linux box vs. PC even though I am using the same terminal screen. Its better then before however.
<!DOCTYPE html>
<html>
<style>
body {
font-family: helvetica, arial, sans-serif;
font-weight: bold;
color: #fff;
background: #000;
margin: 2vw 10vw 2vw 10vw;
}
span {
white-space: nowrap; /* Specify that the text in element will never wrap */
}
.header {
font-size: 4vw;
font-weight: bold; /* bold font */
color: lightGray; // color for tdrs/site
}
.header-split {
display:block;
margin-left:15vw;
}
.header-split span {
display:block;
float:right;
width:30%;
}
#header-ul {
border-bottom: 3px solid lightgrey
}
#rm {
text-align: center;
margin-left:-10vw;
}
.siteTdrs {
font-size: 3vw;
font-weight: bold; /* bold font */
color: lightGray; // color for tdrs/site
}
.mission {
font-size: 4vw;
}
.clock {
font-size: 8vw;
text-align: center;
}
.terraColor {
color: #00ff00; // GREEN
}
.aquaColor {
color: #00ffff; // CYAN
}
.auraColor {
color: #ffc800; // ORANGE
}
</style>
<body>
<div id="wrapper">
<div id="header-ul"><div class="header header-split">AOS<span>LOS</span></div></div>
<div id="rm" ><span id="terraRelay" class="siteTdrs">TDE</span> <span class="mission terraColor">TERRA</span></div>
<div id="terraTime" class="clock terraColor"><span>00:00:00 00:00:00</span></div>
<div id="rm" ><span id="aquaaRelay" class="siteTdrs">SG1</span> <span class="mission aquaColor">AQUA</span></div>
<div id="aquaTime" class="clock aquaColor"><span>00:00:00 00:00:00</span></div>
<div id="rm" ><span id="auraRelay" class="siteTdrs">TDW</span> <span class="mission auraColor">AURA</span></div>
<div id="auraTime" class="clock auraColor"><span>00:00:00 00:00:00</span></div>
</div>
<p id="Msgs">this is a error</p>
</body>
</html>
I want to define the style of Div based on a CSS file. The CSS code I have written is:
.body
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
I want the background of each Div section to be light-grey. What's wrong with the above code?
Edited:
This is my HTML code. I changed the Div class as suggested below, but it is not working. Please also check whether the Link tag contains path correctly or not. The CSS file is located in a Lib folder, up-one-level.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Add/Update Political Party</title>
<link rel="stylesheet" href=".\Lib\entryformstyle.css" type="text/css"/>
</head>
<body>
<div id="sectionEntryForm" class="div">
<table id="tblEntryForm" cols="2">
<tr>
<td colspan="2" align="center">Add/Update Political Party</td>
</tr>
<tr>
<td>Party full name:</td>
<td><input id="inPartyFullName" name="inPartyFullName" accept="text/plain" maxlength="80" class="inputBoxStyle"></td>
</tr>
<tr>
<td>Party short name (initials):</td>
<td><input id="inPartyShortName" name="inPartyShortName" accept="text/plain" maxlength="80" class="inputBoxStyle"></td>
</tr>
</table>
</div>
</body>
</html>
Nothing, you just have to use <div class="body"> to make the DIV pick it up.
ALL DIVs:
div
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
DIVs with class "body":
div.body
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
If your CSS file is up one level, you have to include it like this:
<link rel="stylesheet" href="../lib/entryformstyle.css" type="text/css"/>
This only works on the class "body", that is
<div class="body">
If you want it to work on any divs, the selector (".body" in your sample code) should be div.
try deleting the period (.) before 'body'
edit: it is also probably worth having a quick read of this post
it explains the difference between "." and '#' when defining styles.
For this style to work, your div needs to be written like this:
<div class="body">Your text here</div>
In other words, the . in front of the body in your css tells the browser to apply the style in the braces to an element whose class is named body.
Try changing:
background-color:lightgrey;
to
background-color:silver;
or
background-color:#CCC;
This is assuming that your div has the body class applied:
<div class="body"></div>
Either use
div
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;/*#CCC*/
}
to set background color of all div
Or use
div.body
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
and set <div class="body"></div> for each div.
You can use inline stylesheet as :
<div style="background-color:lightgrey;"></div>