HMTL Help

[Kazehana]

So basically, I'm trying to use html without knowing what I'm doing.  What I did figure out is that in editor, my formatting is perfectly fine, but when it is posted, the <style> portion disappears completely ad leaves the entire thing to lose its formatting.


Using the coding from www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float , the coding is fine, but pasting the exact coding here seems to make it lose its formatting completely.  Is there any way to fix this?


Example of what happens posting the exact code from the site


<style type="text/css">
div.container {
width: 100%;
border: 1px solid gray;
}

header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}

nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul a {
text-decoration: none;
}

article {
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}</style>
<div class="container">
<header>
<h1>
City Gallery
</h1>
</header>

<nav>
<ul>
<li>
<a href="#" rel="">London</a>
</li>
<li>
<a href="#" rel="">Paris</a>
</li>
<li>
<a href="#" rel="">Tokyo</a>
</li>
</ul>
</nav>

<article>
<h1>
London
</h1>

<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>

<p>
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
</p>
</article>

<footer>
Copyright &copy; W3Schools.com
</footer>
</div>




Okay so it worked here, but it didn't in the private workshop.  Is it just random that it didn't work or is it a thing with private workshop?

 

[cadence]

Do you use just <style>content </content>? Maybe try <style type="text/css">content<style>? 

 

[Kazehana]

Do you use just <style>content </content>? Maybe try <style type="text/css">content<style>? 

So I'm not really familiar with how html coding works, so I don't really understand what that means.  All I know is that the <style> portion of the code disappears.  Would replacing the <style> with <style tipe="text/css"> help?

<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
			
nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>

 

[cadence]

I think that should work, yes. But you also need to include your HTML, not just CSS. 

 

[eclipsa]

You need to give all of your css unique names so that it doesn't effect the html of the site, like it's doing now.

 

[Kazehana]

I think that should work, yes. But you also need to include your HTML, not just CSS. 

The html of that sample is from the website I put

You need to give all of your css unique names so that it doesn't effect the html of the site, like it's doing now.

That makes sense but what names would I make unique?

 

[Nano]

You should put <style="text/css"> instead of just <style>, and since you're using CSS, you need to put an empty <p></p> or <div></div> in order for it to work properly (on rpn). Also, when using CSS, only use classes and ids so that you don't mess with the formatting of the site page. @x@


Edit: When giving your divs names, you can pretty much use anything. Most people here use their username.

 

[eclipsa]

the part where you have like article, you'd need to change it to something different. i often just use "blahblah"

 

[Kazehana]

You should put <style="text/css"> instead of just <style>, and since you're using CSS, you need to put an empty <p></p> or <div></div> in order for it to work properly. Also, when using CSS, only use classes and ids so that you don't mess with the formatting of the site page. @x@

the part where you have like article, you'd need to change it to something different. i often just use "blahblah"

I'm really glad y'all know what's happening because I certainly don't.  I'll try those and see if it works.  Looking forward to CS even less now >_>

 

[eclipsa]

if you need any more help, you can send me a pm and i might be able to work with it. css is really messy sometimes, i avoid it most of the time and stick with html, but that's just me personally.

 

[Dusky]

You need an empty paragraph above the style elements, otherwise RPN eats it.


Also, it is absolutely not okay to target page elements like you are doing. please make sure that your code ONLY affects your post and doesn't break out of the bounds of your post. I've edited your margins because it was breaking out of the bounds of your post on mobile.

 

[Cold Ramen Noodles]

I got so freaked out when I came here. xD  The top of the page is like at the bottom for me.

 

[Kazehana]

You need an empty paragraph above the style elements, otherwise RPN eats it.


Also, it is absolutely not okay to target page elements like you are doing. please make sure that your code ONLY affects your post and doesn't break out of the bounds of your post. I've edited your margins because it was breaking out of the bounds of your post on mobile.

I got so freaked out when I came here. xD  The top of the page is like at the bottom for me.

I'm so sorry I have no idea how this works so anything wrong (or right for that matter) is a complete mystery for me.  I'm trying to make my Cs look like they did back in the BBcode era and it's far more of a struggle.  I'm still in the process of guess and check.  I thought the coding I used here was fine because it was from like an educational website and stuff

 

[Cold Ramen Noodles]

I'm so sorry I have no idea how this works so anything wrong (or right for that matter) is a complete mystery for me.  I'm trying to make my Cs look like they did back in the BBcode era and it's far more of a struggle.  I'm still in the process of guess and check.  I thought the coding I used here was fine because it was from like an educational website and stuff

Don't worry about it! I just freaked out there for a moment. I just don't want you to end up getting a warning from staff.

 

[Kazehana]

Don't worry about it! I just freaked out there for a moment. I just don't want you to end up getting a warning from staff.

Wait you can get a warning for coding?  Should I even be doing this?  I really don't want to screw up all the things

 

[Cold Ramen Noodles]

Wait you can get a warning for coding?  Should I even be doing this?  I really don't want to screw up all the things

You might get a warning if you know that the code is messing with the entire format of the page. But you seem to have fixed it.

 

[Kazehana]

You might get a warning if you know that the code is messing with the entire format of the page. But you seem to have fixed it.

You'd probably have to thank @Anomaly for that because I didn't do anything in fear of ruining the entire thing

 

[Cold Ramen Noodles]

You'd probably have to thank @Anomaly for that because I didn't do anything in fear of ruining the entire thing

That fear keeps from from trying HTML at all on this site. 

 

[Dusky]

So basically, everything on a webpage is made of CSS and HTML. That includes the site elements outside of the post! if you use CSS to alter "p" (paragraph) elements, that will alter ALL text on the entire page! This is against the site rules. Here are two easy ways to avoid that!


1) Use only inline CSS. So, when you type <div> to make a text box, you can type <div style="background-color: black;">, for example. that will only affect that one div!


2) Use regular CSS, but always keep it within a div with a special class! so around your whole post you might have <div class="your_username">, and if you wanted to change the way a div in your post looks, you would write .your_username div instead of just div.

 

[Dusky]

I recommend using codecademy to learn the basics, by the way. You really shouldn't be messing with code on a public platform without knowing what you're doing! xD We do, however, have the private workshop for you to dabble in.

 

[Kazehana]

I recommend using codecademy to learn the basics, by the way. You really shouldn't be messing with code on a public platform without knowing what you're doing! xD We do, however, have the private workshop for you to dabble in.

Thank you for your help!


I was using private workshop, but my multiple failures caused me to ask which is where this came into play.  I promise I haven't tried coding anywhere else