Its not just divs. Lists also wont stay inline. I've already tried many things and cant get it to work. (display: inline on everything and making the wrapper width 100%) Is this something normal for chrome extensions? Here's my html, i hope you can help. Thanks!
<!--
<!doctype html>
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html>
<head>
<title>Minds radio</title>
<style>
html, body {
margin:0;
padding:0;
overflow-y: hidden;
width: 900;
height: 1100;
display: inline;
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
background-color: white;
width: 900;
}
#status {
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
}
p{
visibility:visible;
}
a {
color: #5882C4;
}
.footer {
display: inline !important;
width: 100%;
}
.bloc {
padding: 20;
display: inline;
background-color: black;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
-->
</head>
<body>
<div id="status">
<center>
<img width="260" height="170" src="http://themindspanel.com/wp-content/uploads/2016/06/mindsradio3-1200x500.jpg" alt="mindsradio3" /></a>
<center><iframe src="https://mindsradio.airtime.pro/embed/player?stream=auto&title=Minds Radio" width="280" height="216" frameborder="0"></iframe></center>
</center>
<div class="footer" style="display: inline !important; width: 100%;">
<div>Radio</div>
<div>Schedule</div>
<div>Donate</div>
<div>M-P</div>
</div>
</body>
</html>
Add min-width:
<!--
<!doctype html>
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html>
<head>
<title>Minds radio</title>
<style>
html, body {
margin:0;
padding:0;
overflow-y: hidden;
width: 900px;
height: 1100;
display: inline-block;
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
background-color: white;
}
#status {
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
}
p{
visibility:visible;
}
a {
color: #5882C4;
}
.footer {
display: inline-block !important;
width: 100%;
}
.bloc {
padding: 20;
display: inline-block;
background-color: black;
min-width:200px
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
-->
</head>
<body>
<div id="status">
<img width="260" height="170" src="http://themindspanel.com/wp-content/uploads/2016/06/mindsradio3-1200x500.jpg" alt="mindsradio3" /></a>
<center><iframe src="https://mindsradio.airtime.pro/embed/player?stream=auto&title=Minds Radio" width="280" height="216" frameborder="0"></iframe></center>
</center>
<div class="footer" width: 100%;">
<span>Radio</span>
<span>Schedule</span>
<span>Donate</span>
<span>M-P</span>
</div>
</body>
</html>
Related
Here are 2 images of my HTML work and CSS as well. I don't know what I'm doing wrong but the google fonts will not load. I've tried using a different browser but that didn't help either. The browser that I've been mainly using is Google Chrome and I've also tried out Safari. I've also tried using different fonts but that hasn't made any difference either. I've added the code down below.
:HTML Work
:CSS Work
Html Code:
<!DOCTYPE html>
<head>
<title>Ray's site</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link href="//fonts.googleapis.com/css?family=Merriweather+Sans|Montserrat|Sacramento&display=swap" rel="stylesheet" type="text/css">
<link rel="icon" href="favicon.ico" />
</head>
<body>
<div class="topContainer">
<img class="top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>I'm Ray.</h1>
<p>a <span class="pro">pro</span>grammer.</p>
<img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middleContainer">
</div>
<div class="bottomContainer">
</div>
</body>
</html>
CSS:
body {
margin: 0;
text-align: center;
font-family: 'Merriweather Sans', ;
}
h1 {
margin-top: 0;
font-family: 'Sacramento', ;
}
h2 {
font-family: 'Montserrat', ;
}
h3 {
font-family: 'Montserrat', ;
}
.topContainer {
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.middleContainer {
width: 200px;
height: 200px;
background-color: red;
}
.bottomContainer {
width: 200px;
height: 200px;
background-color: blue;
}
.pro {
text-decoration: underline;
}
.top-cloud {
position: absolute;
right: 300px;
top: 50px;
}
.bottom-cloud {
position: absolute;
left: 300px;
bottom: 300px;
}
Remove the trailing commas after your font names and it'll work (not sure why it doesn't work anyway, but I tried your code with and without the trailing commas and the latter works):
body {
margin: 0;
text-align: center;
font-family: 'Merriweather Sans'; /* <- removed comma */
}
h1 {
margin-top: 0;
font-family: 'Sacramento'; /* <- removed comma */
}
h2 {
font-family: 'Montserrat'; /* <- removed comma */
}
h3 {
font-family: 'Montserrat'; /* <- removed comma */
}
Btw, I went to Google Fonts and they're giving you that code (with the trailing comma), which is likely a bug on their end - normally what's after that comma in the code Google Fonts give you to paste is a fallback generic font (like "sans-serif" or whatever) - you should use one of those too. But the code above will work for you.
I want to align these two images on the right but I want them to be on separate lines. Right now the only method I can think to do that is a very large margin for one of the images but i'm wondering if there's a better way.
I want the paragraphs to appear beside the first image, on the right.
Also the background of the paragraphs changes when scrolled over, but I would like to restrict the colour change to being just around the text.
Use any images you want in this code
This is my code:
<!DOCTYPE HTML>
<html>
<head>
<title> Stack Overflow Question </title>
<link rel="stylesheet" type="text/css" href="./css/q7.css"></link>
</head>
<body>
<h1> Holla lolla lolla la </h1>
<figure id=real>
<img src="images/RealDog.jpg" </img>
<figcaption>Figure 1. Real Dog</figcaption>
</figure>
<p id="Gar"> Gar Gar Gar </p>
<p id="lol"> lol lol lol </p>
<figure id=fake>
<img src="images/FakeDog.jpg"></img>
<figcaption>Figure 2. Fake Dog</figcaption>
</figure>
</body>
</html>
Css file:
body {
font-family: sans-serif;
font-weight: normal;
background-color: #EDEDED;
}
h1 {
color: blue;
font-weight: normal;
}
img {
height: 100px;
/*display: block;*/
}
p:hover {
background-color:white;
}
#Gar {
float: right;
color: blue;
margin-right: 100px;
}
#lol {
float: right;
color: blue;
margin-right: 100px;
}
figure {
float: right;
margin-left: 1000px;
}
First of all it's very important to understand the way that html and css works.You should be more specific with your classes and improve your structure in html code.For css it's wrong to use margin:1000px.It's wrong!I set max-width but you can change it.I tried to correct your code as much as I can...but there are a lot better ways to fix your problem
html code:
<div class = "container">
<h1> Holla lolla lolla la </h1>
<div class="right-part">
<figure id=real>
<img src="images/RealDog.jpg" </img>
<figcaption>Figure 1. Real Dog</figcaption>
</figure>
<div class="two-p">
<p id="Gar"> Gar Gar Gar </p>
<p id="lol"> lol lol lol </p>
</div>
<figure id=fake>
<img src="images/FakeDog.jpg"></img>
<figcaption>Figure 2. Fake Dog</figcaption>
</figure>
</div>
css code
body {
font-family: sans-serif;
font-weight: normal;
background-color: #EDEDED;
}
.container{
position:relative;
max-width:900px;
margin:0 auto;
}
h1 {
color: blue;
font-weight: normal;
display: inline-block;
vertical-align: top;
}
.right-part {
display: inline-block;
}
p:hover {
background-color:white;
}
#Gar {
color: blue;
}
#lol {
color: blue;
}
.two-p {
display: inline-block;
vertical-align: top;
}
figure#real {
display: inline-block;
}
I want to add a Leaflet map to my Website. Unfortunately my own CSS file seems to override Leaflet's CSS-file on some elements.
The map's zoom buttons should look like this:
But they now look like this on my homepage:
I wonder if it is my own CSS file overriding the CSS from Leaflet. But how can I prevent this? Have a look at my #content a. Seems like the zoom buttons are interpreted as a link and so take the CSS properties from my file.
body {
background-color: #EFEFEF;
margin: 0;
padding: 0;
}
#wrapper {
width: 1000px;
padding: 0;
margin: 0 auto;
}
#content {
background-color: #FFFFFF;
width: 700px;
float: left;
padding: 0 2.5em 0 2.5em;
margin: 0;
}
#content p, ol, ul {
font-family: "Open Sans Condensed", sans-serif;
color: #444444;
}
#content a:link, #content a:visited {
color: #C09100;
text-decoration: none;
}
#content a:hover, #content a:active {
color: #C09100;
text-decoration: underline;
}
#map {
height: 400px;
width: 100%;
margin: 0 auto;
}
strong {
color: #444444;
font-size: 100%;
font-weight: bold;
}
h1 {
color: #444444;
font: 3em "Amatic SC";
text-align: center;
}
h2 {
color: #444444;
font: 2em "Amatic SC";
text-align: center;
}
<html>
<head>
<!-- Link to Leaflet's CSS file: -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<!-- My own CSS file: -->
<link rel="stylesheet" type="text/css" href="rumkommenstyle.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="JS/Leaflet.MakiMarkers.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="map">
<script type="text/javascript">
var layer = new L.StamenTileLayer("watercolor");
var map = new L.Map("map", {
center: new L.LatLng(56.074207, -3.376634),
zoom: 6
});
var icon = L.MakiMarkers.icon({
icon: "marker",
color: "#900",
size: "m",
});
map.addLayer(layer);
L.marker([56.074207, -3.376634], {
icon: icon,
title: 'Crossgates, Fife, Scotland',
alt: 'Crossgates, Fife, Scotland',
}).addTo(map);
</script>
</div>
</div>
</div>
</body>
</html>
(answer edited)
Short answer:
To get the black color on your zoom in/out buttons, you can add this to your css:
.leaflet-bar > a:link { color: black; }
Long answer:
You notice that your div with id="map" contains a script. When this script is run, it creates a div with class leaflet-bar in which the zoom buttons are actually links.
So, if you look at the tree of elements, you'll find that #content contains div.leaflet-bar which contains the zoom links.
So, which color should apply to the links ( #content a:link or .leaflet-bar a:link) ?
Colors of leaflet links are set in http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css
Sorry to ask the same question many before me have asked... I have read lots of these and they all say change
margin: 0;
There is a gap between the two divs (div class ="heady" and div class="menus") I just can't seem to get rid of the white space, hopefully it is clear enough, let me know if its not.
Thanks James.
html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>website</title>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<link rel="stylesheet" type="text/css" href="CSS/style1.css" />
<body>
<div class="heady">
<br></br>
<h1><a class="header" href="index.html">website</a></h1>
</div>
<div class="menus">
<ul>
<il><a class="list" href="x.html">About</a></il>
<t> | </>
<il><a class="list" href="y.html">Beginners</a></il>
<t> | </>
<il><a class="list" href="z.html">Advanced</a></il>
<t> | </>
<il><a class="list" href="contact.html">Contact</a></il>
</ul>
</div>
</body>
</html>
CSS
/*general rules*/
html,body {
font-size:11pt;
font-family: 'Lucida Grande', 'Lucida Sans', Geneva, Arial, Helvetica, sans-serif;
color: black;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
background-color: white;
padding-top: 0px;
margin-top: 0px;
}
h1 {
font-size: 25pt;
margin-left:10px;
margin-bottom:0;
padding-bottom: 0;
}
a:link, a:visited {
color: white;
}
a:hover, a:active {
color: grey;
}
/*header section rules*/
div.heady {
height: 200px;
width: 760px;
padding: 0;
background-color: grey;
background-repeat:no-repeat;
margin: 0;
}
a.header {
text-decoration: none;
}
a.header:link, a.header:visited, a.header:active,a.header:hover {
color: red;
margin:0;
}
div.menus {
padding: 0;
margin:0;
background-color:black;
width: 760px;
text-align: center;
font-size:12pt;
}
a.list {
margin:0;
}
Here is a link to a jsFiddle.
Browsers apply default styles to ceratin elements. In this case it's ul that gets some margin. Note that this margin separates the divs even though the divs themselves have no margins.
Use
ul { margin: 0; }
or include a reset stylesheet
Are you using the Firebug plugin for Firefox? Even if you don't already use firefox, you should download it along with the firebug plugin. With Firebug you can look at an element in your source code and see the styles that are being applied, the layout (width/height, padding, margin), and even manipulate the styles to view what a change in your CSS would do.
I HIGHLY recommend it!
Download Firefox
Download Firebug
.heady { display:block; }
.heady { margin:0; padding:0; }
.heady { line-height:100%; /* or even 0 (if no text present) */ }
the content can fool here, but 1 or all 3 of those should tame the beast across browsers.
google for a "css reset" too
I'm very new to html and css so feel free to critique any bad practices you see in the code below...
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>History</li>
<li>Houses</li>
<li>Local Business</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. Non-exhaustive list:
1) You need a doctype. Otherwise, browsers will render items in a non-standard way.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div> ending after the </body> tag. This is invalid.
Fix:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br> in <div id="banner">.
Fix:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.
Centering code that goes in your css (replaces existing):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.
Font size with em:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following:
in body selector:
text-align: center;
in banner:
margin-right: auto;
margin-left: auto;
In regard to font size try using em or % sizing.
Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.