I've got the following css file :
.h_bg{
padding:22.4% 0;
background-size:100% auto;
background-position:center top;
background-repeat:no-repeat;
position:relative;
height: 2em;
}
.h_bg h1{
width: 100%;
position:absolute;
line-height:1;
top: 23%;
color:#fff;
font-size:500%;
text-align: center;
padding-bottom: 15%;
background-size:89px 183px;
}
#media screen and (min-width:1001px)
{
.h_bg{
background-image:url(/images/bg1-desktop.png);
}
}
#media screen and (min-width:1001px) and (max-width:1300px)
{
.h_bg h1{
background-size:7% auto;
padding-bottom: 16%;
}
}
And the following html page :
<!doctype html>
<html>
<head>
<title>Beauty app</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="h_bg">
<h1>text</h1>
</div>
</body>
</html>
css link extactly to the place, where css file is. Unfortunately, text string is invisible and this code shows blank page. What can be a problem? Any help would be appreciated.
the problem is here:
color:#fff;
The #fff is forcing your H1 text in h_bg class to be white color, therefore it is invisible
Just incase you hit similar issues in future. This is how you can debug it.
Open your browser (i was using chrome) then right click on the element, for your instance its kind of difficult because you can't see it then click on inspect element.
On the bottom right corner you should see your CSS properties, try play around with it till you found your problem.
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;
}
I created some social media icons on my website. My links are working fine on the desktop but nothing happens on tapping them in a mobile browser. Here is the website https://theopenbay.weebly.com and here is the code —
<!DOCTYPE html>
<html>
<head>
<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">
<style>
.fa {
padding: 10px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none!important;
margin: 5px 2px;
border-radius:50%;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-telegram {
background: #30a2e7;
color: white;
}
.fa:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<!-- Add font awesome icons -->
</body>
</html>
and welcome to SO. I found the issue. The icons were blocked by the "navmobile" element. It covered the icons, so it wasn't possible to "press" the icons.
This was caused by the display block styling of that element. So by removing that you'll be able to make those icons clickable again.
your problem is, that div#navmobile is overlaping your footer, #navmobile has z-index:8, what you can do, is that you can change div#my-footer's position to relative and z-index higher than 8, here is the code (you should add to css):
#my-footer{position:relative; z-index:99}
I solved it by changing display: block to display: table which reduced the navmobile height.
Context: the images posted by Iliass Nassibane above.
Look at the image below, and you'll see that part of one image is cut off.
Details
If you take a look at my HTML/CSS, you'll notice something strange upon resizing the page. It cuts off one image at a time, always the same distance from the top of the window. I've narrowed one part of the problem, which seems to lie in the last piece of the CSS (margin-bottom:-35.35%). Changing that value will change how the "set1" images get cut off in relation to the "mag1" images. I'm using Safari, and everything works how it should in Dreamweaver Live View. It only gives this error in the browser.
I have no clue what is causing this problem. Please help!
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="tester.css" rel="stylesheet" type="text/css">
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="pic1"><img id="set1" src="http://i61.tinypic.com/nv64aq.png"><img id="mag1" src="http://i61.tinypic.com/1tndhc.png"></div>
<div id="pic2"><img id="set2" src="http://i60.tinypic.com/2n87k3t.png"><img id="mag2" src="http://i57.tinypic.com/zixi8j.png"></div>
<div id="pic3"><img id="set3" src="http://i59.tinypic.com/30204fb.png"><img id="mag3" src="http://i61.tinypic.com/25f0lyv.png"></div>
</body>
</html>
CSS
#pic1 {
margin-top: 8%;
}
#pic1, #pic2, #pic3 {
float: right;
width: 68%;
margin-left: 6%;
margin-right: 6%;
margin-bottom:-50px;
position:relative;
}
#pic1 {
z-index:2;
}
#pic2 {
z-index:1;
}
#pic3 {
margin-bottom:0;
}
#mag1, #set1, #mag2, #set2, #mag3, #set3 {
width: 100%;
}
#set1,#set2,#set3 {
margin-bottom:-35.35%;
}
Good morning everyone,
I have a quick question about some background images in MapBox. For those who don't know MapBox, it is a online provider of custom maps that quickly create beautiful interactive maps and data visualizations. I created a map project, and wanted to put that map as a background image. I am given an embed option and here is my code so far:
<!DOCTYPE html>
<html>
<head></head>
<body>
<iframe width='100%' height='800px' frameBorder='0' src='https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA'></iframe>
</body>
</html>
However, I want the Mapbox html to take the entire background.I have tried placing the url provided into a background-image: url() in css, but it does not function.
body {
background-image: url("https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA");
}
Does anyone know how I might do this?
Thanks,
Eric
Jon here from Stack - I actually do most of the geo stuff here.
If you want to do this the proper way, you're going to have to embed it in a div and put the content that you want over it in its own container div. You can see a pretty straightforward implementation of what you want in the API docs on Mapbox. You can adjust the settings of the map using the JavaScript API (hiding the controls, setting the center, etc.).
L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA';
var map = L.mapbox.map('map-container', 'ericpark.k8ehofdl');
html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-background,
#map-container,
#map-overlay,
#content {
width: 100%;
min-height: 100%;
position: absolute;
}
#map-background {
z-index: -1;
}
#map-container {
z-index: 0;
}
#map-overlay {
z-index: 1;
background: none;
}
#content {
z-index: 0;
}
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map-background">
<div id="map-container">
</div>
<div id="map-overlay">
</div>
</div>
<div id="content">
<!-- This is where your regular content should be -->
<p style="color: #fff; text-align: center; font-family: Helvetica; font-size: 2.0em;">This is where your foreground code should be.</p>
</div>
</body>
</html>
Good luck Eric :)
EDIT: Restoring interactivity
I've changed the code to get rid of the overlay and some of the blocking styles. Try that.
L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA';
var map = L.mapbox.map('map-container', 'ericpark.k8ehofdl');
html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-container {
width: 100%;
min-height: 100%;
position: absolute;
}
#content {
position: absolute;
}
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map-container">
</div>
<div id="content">
<!-- This is where your regular content should be -->
<p style="color: #fff; text-align: center; font-family: Helvetica; font-size: 2.0em;">This is where your foreground code should be.</p>
</div>
</body>
</html>
To mimic a "background-image" effect with mapbox you could do something like the following:
<!DOCTYPE html>
<html>
<head>
#map_bg {
position:relative;
width:100%;
height:800px;
}
#map_bg iframe {
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
}
.content {
z-index:1;
position:relative;
}
</head>
<body>
<div id="map_bg">
<iframe class="mapbox" frameBorder='0' src='https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA'></iframe>
<div class="content">
This is other content on the page.
</div>
</div>
</body>
</html>
You position the map absolutely relative to it's parent which allows content to overlap it (much like a background image). By adding a z-index:1 to the other content you can ensure it appears on top of the map;
I dont think just putting link as background image will work. Mapbox might be rendering map in canvas.
I just found this. Try this. I am not much familiar with mapbox
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