I looked at all the other similar questions and couldn't find an answer.
So first of all I'm noob at programming and I just started learning CSS.
I made a page with these codes:
<html>
<style>
body {
p.Welcome {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 23px;
font-weight: bold;
color: white;
text-align: center;
}
section {
border-radius: 1em;
padding: 1em;
position: absolute;
top: 49%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
<section>
<p class="Welcome">hi</p>
<img src="blablabla whatever image" />
</section>
<html/>
And I want to force desktop version even on mobile, like even when I open that page with mobile, the same page must show up with no change in resolution and other stuff.
I've added some comments below, just to help you correct some errors in your HTML. You have to understand that errors like this leave a lot up to interpretation of the browser, to which each may use a different engine or different method which can't guarantee uniform results.
Comments Added:
You should not use empty rule declarations (located under body rule in CSS).
Always look for closing tags. Try to use maybe Sublime, VS Code, or Atom as they have "problem" notifiers that may help you catch these mistakes when learning. (located under body rule in CSS).
If your goal is responsiveness, try and stay away from absolute positioning, or you'll have to media query your way to the same results. (located under section rull in CSS).
Every tag opened must be closed. Especially for compatibility. Every browser will handle these errors differently, so leaving it up to the browser to decide the result, you won't see the same results in every browser (located above body closing tag in HTML).
When you close HTML tags, the format is </html>. Slashes after are for self-closing tags. (located at the end of the document).
To answer your question more directly, it's difficult. You should understand all screens have varying sizes and dimensions and you must design around this, no exceptions. There is no way to force otherwise. If you set an element to have a width of 800px but the screen is 324px wide, you will not fit that element on the screen.
So my answer is that you're looking for a way to get out of designing for responsiveness, and you can't. Yes, it can be a lot of work, but you'll develop habits as you go. Might I recommend freeCodeCamp as well, since they've added some excellent challenges to help teach newer practices to make your projects more responsive, as well as fundamentals like box model.
<!-- Always specify your DOCTYPE, note that DOCTYPE is case sensitive. -->
<!DOCTYPE html>
<html>
<!-- You should have a head tag -->
<head></head>
<style type="text/css">
/* You should not use empty rule declarations */ body {}
/* Always look for closing tags. Try to use maybe Sublime, VS Code, or Atom as they have "problem" notifiers that may help you catch these mistakes when learning. */
p.Welcome {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 23px;
font-weight: bold;
color: white;
text-align: center;
}
section {
border-radius: 1em;
padding: 1em;
position: absolute;
/* If your goal is responsiveness, try and stay away from absolute positioning, or you'll have to media query your way to the same results. */
top: 49%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
<!-- Sections are used for giving semantic clarity to your document, so summarize what the section is -->
<section id="welcome">
<p class="Welcome">hi</p>
<img src="http://whatever.com/image.jpg" />
</section>
<!-- Every tag opened must be closed. Especially for compatibility. Every browser will handle these errors differently, so leaving it up to the browser to decide the result, you won't see the same results in every browser -->
</body>
<!-- When you close HTML tags, the format is </html>. Slashes after are for self-closing tags. -->
</html>
Related
I try to turn a PDF book into a mobi book (html), and I also want to recreate the layout.
There, after every break the text is intended one line.
This should be doable with
<body style="text-indent:20px each-line;">
but I'm doing something wrong, as it doesn't work.
I don't want to do this with paragraphs as that also includes a blank line by default, but those breaks don't always mean a entire new paragraph...
each-line is not yet supported in browsers (see text-indent on MDN). However, this is what you will want to use when it becomes available.
Use the semantically correct paragraph tags <p> and use CSS to modify padding/margin as needed.
Paragraphs are the way to go on the markup level. The blank lines you describe, are margins that are added by Web browsers by default. Since you will already be editing the style sheet to add the text indenting, overriding these default margins should be no hassle at all. In fact, the following should be enough:
p {
margin: 0;
text-indent: 2em
}
Why 2em? That means twice the width of the letter m of the typeface the paragraph is set in. So whatever the reader does with his or her personal settings (font size, resolution, et al.), the indenting should be proportional to the text. It is also somewhat of a typographic convention. Of course, you could set this value to a lot of other things, like 20px or 1cm.
When you run the code snippet it will give you example HTML text you can copy and past and play around with.
Hope this helps. As this is a way to put text any way you see fit. Thanks!
<!DOCTYPE html>
<html>
<body>
<style>
h3 {
text-indent: 25px;
}
h3.small {
line-height: 0.2;
margin-top: 0em;
margin-bottom: 0em
}
h4.small {
line-height: 0.2;
margin-top: 1.5em;
margin-bottom: 1em;
}
</style>
<h1>Example</h1>
<h3 class="small">Put text where you want</h3>
<pre style="font-family:verdana">
This text will keep spacing.
This this line too.</pre>
<h4 class="small", style="text-indent: 50px">
This is how to make the above example, hope it helps:
</h4>
<pre>
<html>
<body>
<style>
h3 {
text-indent: 25px;
}
h3.small {
line-height: 0.2;
margin-top: 0em;
margin-bottom: 0em
}
h4.small {
line-height: 0.2;
margin-top: 1.5em;
margin-bottom: 1em;
}
</style>
<h1> Example </h1>
<h3> class="small">Put text where you want <h3>
<pre> style="font-family:verdana"
This text will keep spacing as formated in HTML file.
This line too.</pre>
</body>
</html></pre>
REFERENCE:
W3schools.com link to HTML <pre> Tag:
https://www.w3schools.com/tags/tag_pre.asp
W3schools.com link to HTML line height:
https://www.w3schools.com/css/tryit.asp?filename=trycss_line-height
W3schools.com link to HTML <p> tag default options:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_p_default_css</pre>
</body>
</html>
I am thinking of various ways to blackout my site for a blackout protest. Which technique would work best?
Method 1 (easiest): Replace existing style sheet with a new one that has this code in it:
* { display: none; }
The benefit here is that search engines can still crawl the site, and people that are familiar with the protest and likely to understand its ramifications can still view the content by viewing source. The downside is that people might think something is wrong as there is no content at all displayed (I am fine with that).
Method 2: Add a background-color: #000; to body and color: #000 to all text elements except for any text element that may be describing why the site looks different. The benefit to this is that more people will understand what is happening. The disadvantage is that it does not really portray the message of the protest. Also, I think it may be bad practice to give text the same color as the background as it is a proven spam technique.
Method 3: Display a test pattern.
Many sites just block out their logos or have a dismissible dialog. I think you can still support a blackout protest without a 503. The point is to make people aware of the problem. You can put up a full-page fixed black div with a message and a link to relevant information. Even a banner about it would be helpful in getting the word out.
Here's what I'm using at http://thinkingstiff.com (link potentially NSFW due to language):
<a id="sopa" href="http://sopablackout.org/learnmore/">**** SOPA</a>
<style>
#sopa {
background-color: black;
color: white;
cursor: pointer;
display: block;
font: normal 150px/500px Helvetica, Tahoma, Arial;
height: 100%;
letter-spacing: -11px;
position: fixed;
text-align: center;
text-decoration: none;
width: 100%;
word-spacing: 50px;
z-index: 9999;
}
</style>
Create a new page that returns an HTTP 503 response code and a response body with regular content. It won't hurt your SEO ratings and it won't affect the rest of your site.
So I have a regular CSS/HTML website for my upcoming book. It has a section called Bonus Features for extra articles that I’ve written. They pop up using jQuery UI that reads from external HTML pages.
Because I want the titles and dates… i.e.
Hello World
May 6, 2011
…to be very close together, instead of your usual gap, I’ve created a separate CSS stylesheet (dialog.css).
body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
}
h1 {
font-weight: bold;
margin: 0;
}
h1 + p {
margin: 0;
}
h2 {
margin: 0;
}
h2 + p {
margin: 0;
}
p {
font-size: 14px;
line-height: 18px;
margin-bottom: 10px;
margin-top: 0px;
}
Unfortunately, dialog.css seems to be overriding default.css (for the website) because whenever I open then close the pop-up, the text on the Bonus Features page clutters together, reading from dialog.css, until a browser refresh.
Is there a way to prevent this from happening, like a special HTML or CSS code?
Thanks.
It sounds like dialog.css is being loaded in the main page's scope.
if your dialog is built like this:
<div id="dialog">
<!-- content -->
</div>
then you can make your css like this:
#dialog h1 {
font-weight: bold;
margin: 0;
}
and those properties will only apply to elements within an element of id #dialog
Sometimes, it can be as simple as minding the order that the css loads. The last one in order defined will generally take precedence. Yes, there are exceptions, but as a rule of thumb, put your most customized CSS file at the end of a series of CSS declarations, while loading things like jQuery UI's css first.
use firebug (or something similar) to find out how this property is set. to override this rule you need to use the same exact selectors or more powerful. thats the way CSS works and thats where the name came from.
also you may try adding !important after each rule.
I'm 10 lines in to my second attempt at HTML and CSS and it is immediately doing completely barmy things.
I have the following code (this the entire page):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Some page title</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="47926.css" />
<link rel="stylesheet" type="text/css" href="960Clear.css" />
</head>
<body>
<div id="rootDiv">
<div class="container_16" id="topBarDiv">
<div id="topBarLogoDiv">
<a id="topBarLogoLink" href="~/Home/ComingSoon" title="Coming soon page"/>
</div>
</div>
</div>
</body>
</html>
And here's the CSS (960Clear.css, the others are 960 grids and YUI reset):
#rootDiv {
height: 70px;
background-color: #F7F7F7;
}
#topBarLogoDiv {
background-image: url('file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png');
background-color: #F7F7F7;
background-repeat: no-repeat;
margin-left: 20px;
height: 50px;
width: 172px;
display: block;
overflow: hidden;
}
#topBarLogoLink {
height: 50px;
width: 172px;
min-height: 50px;
min-width: 172px;
display: table-cell;
}
This simple, simple page doesn't work. Internet Explorer was my initial problem, rendering up to four logos in the top corner, but let's ignore Internet Explorer for now because even Firefox is doing the nuttiest thing.
I render another, whole anchor element outside of the wrapper div and this oddness is even visible as another line of code in the F12 diag tools window!
I took a screen shot to demonstrate:
http://0olmuq.bay.livefilestore.com/y1pxx75x_th_V0FX15uiLSOAK7MbKnHOQ17L9WMLg4K1TrIoZ0_xEaTgveh0_xF0S8o1Ae8WVvQLNWjQzyGl5AXsPpMV9MW0aDI/One%20Anchor%20Tag%20Renders%20Two%20Anchor%20Tags%20Crap.jpg?psid=1
For me, HTML+CSS work is a punishment served in Hell, but this takes the biscuit. What on Earth is going on here?
Note
My fault - I should've added this disclaimer before.
The code above seems to have tickled some people. Please remember that it's in an experimental state as I try to work out why I am getting multiple logos and general oddness.
I haven't got as far as correcting local links (which will be completely different in production and generated via ASP.NET MVC methods anyway).
Imagine that someone is having problems plumbing a house and you go to investigate. The house may not be finished yet; please ignore the missing carpet ;-)
You can't close an A tag with /> you need to close it with Link
The double rendering is Firefox/Firebug parsing invalid HTML.
First of all, if you're know you're going to write bad code at least let the browser know in advance. Use a more forgiving doctype than strict (technically this doesn't really do much, but every bit helps I think)
Next, unlike most other languages, grid frameworks and aids like that are actually better for intermediate and advanced users. Those new to CSS are more likely to be confused by them. (This is subjective, I know, but it is a sentiment expressed by many, and we are giving out advice here, aren't we?)
Now for the site logo. Its a matter of personal preference I suppose, but its usual to see logos being marked up as h1s. There are multiple ways of achieving what you want here, I'll just give the one I habitually use:
HTML:
<h1>
Site Name
</h1>
CSS:
h1 {
float: left;
overflow: hidden;
}
h1 a {
display: block;
background: url('path/to/logo.png') no-repeat;
width: 100px;
height: 100px;
text-indent: -9999px;
}
You're URLs are incorrect: ~/Home/ComingSoon and file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png might work locally, but you need to use relative paths if you are going to place this onto a server (assuming you are not going to use server-side scripts to generate those URLs)
#topBarLogoLink {
height: 50px;
width: 172px;
min-height: 50px;
min-width: 172px;
display: table-cell;
}
The min-height and min-width declarations are useless: They are only useful if you do not declare a fixed width and height. min-height and max-height properties, and their width counterparts, are used for fluid layouts, where the designer give the browser a certain degree of flexibility to accommodate for different screen sizes and other uncontrollable factors.
The display: table-cell declaration is also slightly suspicious: if you want the inline a element to expand out to the size of its parent div you can just use display: block
#topBarLogoDiv {
background-image: url('file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png');
background-color: #F7F7F7;
background-repeat: no-repeat;
margin-left: 20px;
height: 50px;
width: 172px;
display: block;
overflow: hidden;
}
Other than the url issue, the background color should also not be redeclared - HTML elements have transparent background color by default. Declaring display: block here is also unnecessary - divs are block level elements.
Oh, and I'm really really sorry if you feel offended by that comment. I really am. Consider this me making up for that, okay?
Try not making the <a> self-closing. It should be Text or .
I’m reading some Html code for a web page, where author essentially wanted to create a page with header, footer and content area. The content area would be divided into three columns with center column having the right and left margins set to 200px, and these two margins are to be filled by two other DIVs docked on the page border with absolute positioning.
Here is author’s code for content area ( for the sake of clarity I’ve omitted the header and footer code ):
<div id="container">
<div id="container2">
<div id="centercol">
</div>
<div id="rightcol">
</div>
</div>
<div id="leftcol">
</div>
</div>
CSS file:
body
{
margin: 0px;
font-family: Verdana, Arial, Serif;
font-size: 12px;
}
#container
{
background-color: #818689;
}
#container2
{
background-color: #bcbfc0;
margin-right: 200px;
}
#leftcol
{
position: absolute;
top: 184px;
left: 0px;
width: 200px;
background-color: #bcbfc0;
font-size: 10px;
}
#centercol
{
position: relative;
margin-left: 200px;
padding: 0px;
background-color: white;
}
#rightcol
{
position: absolute;
top: 184px;
right: 0px;
width: 198px;
color: White;
background-color: #818689;
font-size: 10px;
}
Any idea why author decided to put both the center column and the right column inside container2? I see no advantages in doing that and in fact it just complicates the logical structure of the page?!
thanx
It looks like this was so he could have position effectively determined by the width and position of the centercol while allowing for a particular source order for the content. There are a few different ways to do this. Id guess he did it this way to avoid using floats (and the various "fixes" for IE6 compat that entails).
Not the way i would have done it i dont think but i assume it worked well for this site in the grand scheme of things.
Overall though sometimes you have to do some interesting things to match a comp with markup/css. Depending on what the designer has thrown at you and the level of abstraction needed within the system (assuming its built on some sort of dynamic content) you can end up doing something that cant possibly be construed as straight-forward. Nature of the beast until CSS and the browser implementations of it catch up to graphic designers :-)
Usually people adjust their markup due to having their layout and design in mind. That's probably what the author in that article was doing when he put those two sections together. It's not what I would have done, but at the same time you don't want to get yourself worked up about semantic debates on the internet :)
I would rather see someone author web-pages for the content and then design them in CSS (How To: Pure CSS Design)
If the author wants for search-engine purposes the main content to come first then that would be a reason. I'm not sure why he'd use absolutes though as you can't clear them and that would cause problems for a footer.