Image not getting aligned and near image label should come but its not working correctly
<style>
label{
color:red;
font-family: "Times New Roman";
font-size: 25px;
}
label.desc{
color:blue;
font-family: "Times New Roman";
font-size: 12px;
position: relative;
left: -20px;
}
img{
float:left;
width:300;
height:300;
}
</style>
Put every image and corresponding labels in a div like this:
<div id="a">
<image src="http://upload.wikimedia.org/wikipedia/commons/3/38/Heart.gif"/>
<label>1<label>
<label>2<label>
<label>3<label>
</div>
and give that div width:
#a{
width: 260px;
}
make sure the file extension is .css and not .txt
You may be hiding your file extensions. Check http://windows.microsoft.com/en-us/windows/show-hide-file-name-extensions#show-hide-file-name-extensions=windows-7
Then put this:
<link href="style.css" rel="stylesheet" type="text/css" />
between the
<head></head>
tags in your HTML file to call your stylesheet.
Make sure to rename "style.css" with whatever you name your new stylesheet.
Related
I just switched from VSC to Adobe Dreamweaver and i don't know if I should keep it or not; but that's besides the point.
When I try to add a background to some text, it fills the whole screen with the background with the background, and if I try to change the width it only adds on to the background which is filling the whole screen.
I don't know if it's user error, something changed in HTML/CSS overnight or if it's because of the Dreamweaver display box thing on the top of my screen
#charset "utf-8";
* {
margin: 0;
padding: 0;
}
.Container {
padding: 25%;
padding-left: 50%;
padding-right: 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
margin: 0;
}
body {
background-image: url(http://www.incomeactivator.com/images/freebg5.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="file:///C|/Users/REDACTED/Documents/style.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/comfortaa:n3:default.js" type="text/javascript"></script>
</head>
<body>
<div class="Container">
<h1>Hello</h1>
</div>
</body>
</html>
p.s: let me know if you need a ss of the results I get.
Instead of using the class, you can change the texts background color by adding
background-color: rgb(255, 236, 139)
in the h1 tag
Demo:
YOURTEXT
It should work as expected if you apply the css to the H1 tag:
.Container h1{}
You have used padding property incorrectly. Reference
Correct syntax: padding: top right bottom left
padding:0 50% 0 50%;
So the css should be:
.Container{ margin: 0; }
.Container h1{
padding:0 50% 0 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
}
This is a really simple question that I can't figure out the answer to. I am a total beginner.
I can't change the font-family for some reason. I can physically type something different but it doesn't change the font at all. This is what my code looks like:
<!DOCUTYPE html>
<html>
<head>
<title>Fruit</title>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
<style>
.left {
width:800px;
margin:auto;
text-align:center;
box-sizing:border-box;
background-color:#FFEBCD;
border:2px solid black;
font-family: 'Alegreya SC';font-size: 22px;
}
</style>
</head>
<body>
<div class="left">
<h1><strong>Fruit</strong></h1>
</body>
</html>
You need to include the desired font ( google font in your case ) inside your project.
You can do that in multiple ways. One is adding a link to it in your HTML
You can also that a quick look at this documentation
Other ways:
import in your stylesheet (CSS) with #import url('https://fonts.googleapis.com/css2?family=Alegreya+SC'); or
download the font and include it in your project and then import it
with #import(pathToFont)
.left {
width:800px;
margin:auto;
text-align:center;
box-sizing:border-box;
background-color:#FFEBCD;
border:2px solid black;
font-family: 'Alegreya SC', serif;
font-size: 22px;
}
<link href="https://fonts.googleapis.com/css2?family=Alegreya+SC&display=swap" rel="stylesheet">
<div class="left">
<h1>
AAAA
</h1>
</div>
I have a div with a custom font and I'm trying to make it so the text has the same height as the div it's inside of.
I've been trying to find a way to override the vertical alignment of text without a div with no success.
I was hoping there was something like the text-indent method for this purpose.
Here's a simple JsFiddle with my example.
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
<style>
.texto {
background-color: #000;
height: 24px;
font-family: 'Lekton', sans-serif;
color:white;
font-size: 24px;
}
</style>
</head>
<body>
<div class="texto">Test</div>
</body>
</html>
Use a line-height CSS property :
line-height : 24px;
Add a line-height with a property value that measures the height of the containing DIV
<style>
.texto {
background-color: #000;
height: 24px;
font-family: 'Lekton', sans-serif;
color: white;
font-size: 24px;
line-height: 24px; /* This line solves your problem */
}
</style>
</head>
<body>
<div class="texto">Test</div>
</body>
I am trying to place a solid color banner that stretches across the top of the screen like on this website, facebook, and others. For some reason I am encountering difficulties doing this
I created a div tag in my HTML file for the banner and tried to apply CSS to the div tag but nothing is working.
<!DOCTYPE html>
<html>
<head>
<style>
#banner {
background-color: #333FF;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
padding:15px;
height:800px;
background-size:100%;
}
</style>
<title>Random Password Generator</title>
</head>
<body>
<div id="banner"><h1>fdsfdsfdsfds</h1></div>
</body>
</html>
I also tried linking to an external CSS file but that isn't working either.
How can I make a simple, solid color banner at the top of the page, on every page?
#333FF is an incorrect color. It should be like this: #333FFF. See the W3C Specification for more info on the length of hex codes (hint: they need to be six characters long).
Working example : http://jsfiddle.net/ntim/SKnxP/
position:absolute; also doesn't seem necessary in your case.
You don't actually need to use position absolute unless you want it to be over the top of anything. Instead, you can just use the following:
<style>
#banner {
background-color: #333FFF;
font-family: Arial;
padding:15px;
height:800px;
background-size:100% 100%;
}
</style>
here is something based on a template I use:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css">
<style type="text/css">
body
{
background-color: #E7E7E7;
text-align: center;
font-family: Arial, Helvetica;
font-size: 15px;
color: #000000;
border-spacing: 0;
border-collapse:collapse;
padding: 0;
margin: 0;
}
#Banner {
background-color: #333FFF;
top: 0; /* Probably not necessary... */
height: 40px;
width: 100%; /* Also probably not necessary */
}
#ContentMain
{
background-color: #FFFFFF;
height: 100%;
}
</style>
</head>
<body>
<div id="ContentMain">
<div id="Banner">Banner goes here</div>
Content goes here
</div>
</body>
</html>
should work.. the grey bit at the back is because the html and body tags dont fill the entire screen - something like this should fix it (I would use min-height), but I have not included it here as then if you want a page taller than the browser window and works in Internet Explorer things get annoying...
Jsfiddle here
I am working on a project that is rather time sensitive. The task is to make a micro site that users can access through their smartphones, where they will be able to access a number of movies. They will scan a QR code (I know they are dead, I didn't plan the campaign). and land on this site. I am not a fontender, but know my way around html + css and I have been able to find a few things around the internet, but now I've come to a dead end. I am optimizing the site for max-width 640px with a 100% scalable width down to min-width of 320px. I've gotten it all working quite well on my test site, implemented fonts etc. but I run into a problem when I am trying to place the div #textbox inside the #sunny div, on top of the #image div. I have managed to center the #textbox, but I can't get it to align vertically and "stay" vertically aligned no matter what size screen the user views the page at.
Here is my code and css:
HTML:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<img id="logo" src="images/logo.png">
</div>
<div id="sunny">
<div id="image">
<img src="images/1.jpg">
</div>
<div id="textbox">
<p>Jacket Name</p>
See Details
</div>
</div>
</div>
</body>
</html>
And here is the CSS:
#font-face { font-family: FuturaStdBook; src: url('../fonts/FuturaStd-Book.otf'); }
#font-face { font-family: FuturaStdBook; font-weight: bold; src: url('../fonts/FuturaStd-Bold.otf'); }
#container
{
background: #fff;
font-family: FuturaStdBook, Georgia, "Times New Roman", Times, serif;
max-width:640px;
min-width:320px;
margin:0 auto;
}
#header
{
padding: 20px;
}
#logo
{
width:33%;
display:block;
margin:auto;
}
#sunny
{
width: 100%;
max-width:640px;
min-width:320px;
float:left;
position:relative;
}
#textbox {
background-color:white;
width:33%;
left:33%;
top:30px;
min-width: 70px;
height:50px;
text-align: center;
z-index:1;
position: absolute;
text-transform:uppercase;
padding-top:10px;
padding-bottom:10px;
color:#a3a3a3;
}
#textbox p {
font-size:14px;
line-height:0;
}
#textbox a {
font-size:12px;
color:#666666;
}
#image {
width:100%
position: absolute;
}
#image img{
width:100%;
height: auto;
}
N.B: Please bare in mind that I need to repeat the code, and have like 7 or 8 "identical" areas under each other, so the CSS have to be applicable to this design.
Hope someone is able to help me out :)
Seems like its a case of using too many divs. What you need to do is to place your elements in a div with position:relative, and then position the elements themselves as position:absolute and go about positioning them as you'd like.