I am working on my first ever media query for a class and to me my code looks like the example we were given, but when I test it on Chrome using the developer tools, it is not responsive. I am just trying to make it so that the list will be vertical (block) when viewed on a phone and horizontal (inline block) when viewed on a bigger screen. Can anyone help me see what I did wrong?
body {
font-family: 'Ruslan Display';
}
ul {
background: #3399ff;
padding: 20px;
}
#favorites li {
background: #cce5ff;
margin: 5px;
list-style: none;
display: block;
}
#media(min-width:375px;
) {
#favorites li {
display: inline;
}
}
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Hanalei+Fill|Ruslan+Display" rel="stylesheet">
<meta charset="utf-8">
<meta name="description" content="My First Site for Web Fundamentals">
<title>My First Webpage</title>
</head>
<body>
<p>This is my very first attempt at putting info up on a Webpage using a a media query for responsive design. <br></p>
<p>Below is a list of my favorite people. It should change format based on whether or not you view it on an iPhone or a desktop.</p>
<ul id="favorites">
<li>My husband, Brian</li>
<li>My kids, Louis and Brady</li>
<li>My parents, Terry and Steve</li>
<li>My brother, Steven</li>
<li>My best friend, Missy</li>
</ul>
</body>
Remove the semi-colon from your media query param; this is invalidating your query.
#media(min-width:375px;)
should be
#media(min-width:375px)
When I tried to put your html into the snippet, there were html errors highlighted in red. You had break tags (<br>with forward slashes (</br>) that were being picked up as incorrect (the forward slashes are unnecessary). Also, the closing paragraph tag wasn't being recognised as being matched (that may be a shortcoming of stacksnippets, but still, it's good to close a paragraph after a block of text instead of using multiple br tags). The HTML errors probably contributed more to your issue than your css. The online w3c validator is a very useful tool for checking for html errors.. just a tip! .
Hope this helps
Related
I have index.html which looks like follows:-
html {
background-color: #0000FF;
}
body{
background-color: #FF0000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Mozilla is cool</h1>
<img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">
<div style="height: 100px; width: 100px;"></div>
<p>At Mozilla, we’re a global community of</p>
<ul> <!-- changed to list in the tutorial -->
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Read the <!--a href="https://www.mozilla.org/en-US/about/manifesto/"--><span>Mozilla Manifesto</span><!--/a--> to learn even more about the values and principles that guide the pursuit of our mission.</p>
</body>
</html>
Initially the margin of h1 is with the window and there is some extra space above body element. But if i add border: 1px solid black to my body element the margin of h1 is with body element.
Why is this so? The border of body element was present even before but we were not just displaying it right?
You can use box-sizing: border-box;
Many browsers have a default user agent stylesheet which automatically adds some styles - even if you haven't specified any.
For example, in chrome, i can see that the h1 will be given a slight margin-before and margin-end which would give you the gap between the body and H1.
You can override this default style-sheet by using one of many reset style-sheets example here
User agent stylesheets will be overridden by any other styles in the following order:
Browser/user default
External
Internal (inside the tag)
Inline (inside an HTML
element)
It may also be worth reading up on css specificity as it explains a lot of simple problems you may come across
I use includetext-function to include html* into a ms word 2010 document:
{ INCLUDETEXT "test.html" }
That's the html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
line-height: 100%;
}
p {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<p>Line 1<br/>Line 2</p>
</body>
</html>
I didn't manage to fomat paragraph spacing in word within the html/css. Neither the margin nor the padding property works. All other css properties I checked (font*, white-space, color) are working fine.
Without <p>-tag word sets paragraph spacing to 10 pt, within <p>-tag, I get "auto", which also makes trouble in my complete document.
Which css property is word-compatible to define paragraph spacing?
Thanks a lot.
(* xml with xslt stylesheet - but for demontration simplified)
Use id or class in every p tag(I know it's boring but try it) . I think that'll might work. And also try article or blockquote tag
The margin-property gets only accepted, if I add the property within the style-attribute. Inside the css-class, word ignores it.
This line works fine:
<p style="margin:0">Line 1<br/>Line 2</p>
strange behavior :-(
I'm a WordPress newbie.
I am running my website on Customizr-Child theme (using Child Themify plugin http://wordpress.org/plugins/child-themify/).
When, I try to write html code in a webpage, there seem to be unnecessary margin at the top of the page, ex. http://www.resourcematics.com/ag-tool/
I would like to get rid of this top margin.
My Child theme Appearance > editor tab has only style.css file.
Can somebody guide me please how to resolve this issue!
Thanks in advance,
Ankit
First of all make sure you reset your css code by adding this in the top of it
* {
margin : 0;
padding: 0;
}
If you did that, and the margin is still there, make sure there isn't any <h1> or <h2> in the top of your code , because they have default margin that appear like it's body margin-top
If there is any try to make a class for them called for example title
then add this to your css file
.title {
margin : 0;
padding: 0;
}
Its actually not a margin but a border.
.tc-header {
border-bottom: 10px solid #e9eaee;
border-top: 5px solid #27cda5;
}
[EDIT]
So, in light of the clarification regarding the issue, here's what I found out by opening up the browser developer inspector tool. Look at the HTML which is generated in your content container:
<div class="entry-content">
<p>
<br><br><br>
<meta charset="utf-8">
<!-- P tag with line break BR tags and meta tag -->
</p>
<p>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><br>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js"></script>
<!-- P tag with meta tag and script tag -->
</p>
<link href="https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css" rel="stylesheet">
<style>
body { margin:0; padding:0; }
.map-info { font-size: 20px; }
#map { position: relative; width: 100%; height: 500px; }
</style>
<p>
<br>
<!-- P tag with line break BR tag -->
</p>
<div>
Our GIS based agriculture water demand model is of 5 X 5 arc minutes (approximately 9 X 9 kilometres at the equator) resolution.
</div>
<p>
Following maps show <b>area irrigated by country in hectares around year 2010</b>. The map was developed based on Siebert <i>et. al.</i>, 2005 and Resourcematics’ Agriculture Water Model
</p>
</div>
What conclusions can we draw about this? Simple.
P tags: Browsers automatically add some space (margin) before and after each P tag element. Source
BR tags (inside P tags): Pretty much self-explanatory. Adds a line-break.
The Plugin that generates the map: It seems that the plugin adds all it's scripts, css and responsive meta (just like you would in the HEAD section of a html page) directly in your content container. He does so by enclosing it's content in our aforementioned P tags (it's a big guess, but plausible).
Solution(s):
If I were you, I would check first if, by accident, you added
unnecessary line breaks in the WYSIWYG editor before the main text.
I would consider maybe using and testing out other Map plugins and
see if it solves the problem.
Thank you so much everyone. As previously stated the problem was where I had the CSS code. I didn't have the dot/period prefixing ul and li originally, that was a desperate last-minute act. :-)
I do read W3S, StackO/f, HTMLDog, Tizag and all of the other great sites b4 asking questions. But you're stuck w/me now.
Another question. Should I open a New question? This question refers to the original block of code.
My line color doesn't change. But if I code each individual line, the color changes. I would like to know how to change the color in the li CSS block.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Why I love learning HTML - Part 2</TITLE>
</HEAD>
Colors
<BR>
My favorite colors are:
<BR>
<UL>
<LI><FONT SIZE=2 COLOR="red" >Navy</FONT>
<LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Olive</FONT>
<LI><FONT SIZE=2 COLOR="red" >Purple</FONT>
<LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Teal</FONT>
</UL
</BODY>
</HTML>
This is my 5th week of HTML&CSS class. The stack overflow website always pops up when I Google a question. So I joined and I have a question. My CSS code shows up on my web page as code. The UL and LI part of the code does not read the classes .ul and .li. I have looked at the code for a long time and cannot figure out what is wrong. Thanks for your help
<head>
<meta charset="utf-8" />
<title>Homepage</title>
<style type="text/css">
</style>
</head>
<body>
.ul {
margin:0;
padding:0;
color:#ff0000;
}
.li {
display:inline;
padding:0;
margin:0;
color:#000099;
}
<!-- Site navigation menu -->
<ul>
<li>Home page</li>
<li>Education and Experience</li>
<li>Publications and Committees</li>
<li>Links</li>
</ul>
<h1>can't find the errors</h1>
</body>
</html>
First of all, welcome to the world of HTML and CSS. I'll jump straight into things by saying that there are a couple of issues with the code you've posted up:
1. Putting your CSS in the right place
Your CSS code currently isn't placed within your <style type="text/css"> declaration at the top, it's placed within the document's body. This will output as text to the screen.
To fix this, simply move it all into that style element in your head:
<head>
<style type="text/css">
/* Styling goes here. */
</style>
</head>
(For rendering purposes, styling should never be declared outside of the document's head either.)
2. Fixing your selectors
Once you've fixed that, however, your selectors will still not target your elements. This is because you're prefixing your CSS selectors with a . (.ul and .li). A . prefixes the class selector.
To target your ul and li elements, you'd simply remove the .:
ul { ... }
li { ... }
3. Validating your HTML
On a side note, you need to pay attention to your closing HTML tags. Your closing </a> tags must be within your <li> tags. Change:
<li>...</li>
To:
<li>...</li>
you need to contain your CSS in
<style> </style>
Also, make sure you put it in the head where possible
Because CSS selector start with '.' is for class.
Use ul, li instead, and include ur css style in <style></style>.
That's because you put the CSS "code" as text in the HTLM instead of inside your empty <style> tag.
The correct way to do inline styling is to use the style attribute in your markup:
<ul style="margin:0; padding:0; color:#ff0000;">
The above is not however recommended because as the number of pages grow in your site, with lots of inline styling, maintenance becomes a nightmare.
What you are trying to do is embedded styling and it is not working because you need to have the styling directives inside the tags.
BTW it's always better idea to use ids. As things stand, this styling will be applied to every unordered list in your application which is often not what you want. If you gave the list an id, then you could reference it like this #myId {} and then the styling would be confined to that list.
Finally, the recommended practice is to use external style-sheets, using the HTML link tag:
<link rel="stylesheet" type="text/css" href="styles.css" />
Here is your original code with the embedded styling in the correct place:
<head>
<meta charset="utf-8" />
<title>Homepage</title>
<style type="text/css">
ul {
margin:0;
padding:0;
color:#ff0000;
}
ul li {
display:inline;
padding:10;
margin:0;
color:#000099;
}
</style>
</head>
<body>
<!-- Site navigation menu -->
<ul>
<li>Home page</li>
<li>Education and Experience</li>
<li>Publications and Committees</li>
<li>Links</li>
</ul>
</body>
When I run my (very basic) page in Chrome, it shows the title and list in the correct size, colour and position. Also the background image fits to the screen. But when I run my page in FF or IE, there is no background image and the title and list haven't got my CSS position, colour or size.
I have copied my code below. My question is: how can I make my title and list show up on my web page in all/most browsers in the correct size, colour and position to what I have set it to in my CSS? Also for the background image to be shown as well. I hope this isn't too general. Please help!
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="txt/css" href="C:///****/*****/Desktop/FifaStream1.0/indexstyle.css"/>
<title> Fifa Stream </title>
</head>
<body>
<h1 id="Title1"> <font color="grey"> Fifa </font color> <font color="red">Stream </font color></h1>
<nav class="IndexList">
<li> Home <br> <br> </li>
<li> Youtube <br> <br> </li>
<li> About Us <br> <br> </li>
<nav>
</body>
</html>
And this is my CSS:
body {
font-family: "proxima-nova",sans-serif;
background:url(fifa13messi.png);
-moz-background:url(fifa13messi.png);
background-size:100%;
-moz-background-size:100%; /* Old Firefox */
background-repeat:no-repeat;
}
#Title1 {
position:relative;
left:5%;
top:5%;
font-size: 3em;
}
.IndexList {
list-style: none;
position:relative;
left:5%;
top:40%;
font-size:2em;
font-weight: 600;
letter-spacing: -1px;
}
a {
color:white;
text-decoration: none;
}
It would a great help if anyone could explain where or why I'm going wrong.
Because <li> elements can't be children of the <nav> element - they can only be children of the <ul> or <ol> elements...
The type attribute should be text/css, not txt/css. IE and Firefox are (correctly) rejecting it for the mismatch.
First thing I want to say is try to do smart work, use some html eiditor, like dreamweaver or some other that provide hints forcodig.
Now point by point here are list of problems in you coding
Type attribute for link css should be text/css. Not. Txt/css
Try to close tags just after creating it. This will always make shure all tags are closed. Bcz your nav tagi not closed,but created two nav tags without closing them.
Li tag should be wrapped with 'o' or 'ul'
Thanks.
Your <nav> tag needs a </nav> closing tag, not a second <nav>.