[web] My last website.

Started by
21 comments, last by The Ice Master 18 years, 8 months ago
That would be CSS: You can do almost anything with it design-wise, putting things further apart, pushing them closer together, deciding what color text will be based on what tag the text is in (i.e. everything in <p> tags is orange, everything else is white), whether something is visible or not (which can be changed dynamically w/ &#106avascript), etc. etc. etc.
Advertisement
Oh, ok. So I should get into CSS for a better site?
If you want something like that site you should learn tables (I recommend that before you do css), and then you'll need to get really good at creating graphics. Once you are comfortable with tables, I'd say you should do css then. :)
I know how to do tables, its just they are aggravating by hand. I use FrontPage to generate my table script. Is this a mistake? I mean, I do know how to write them...
Front Page is pretty ghastly but as long as you tidy up a little by hand it should be all right.
CSS is useful. For example, just adding:
<style>
p {
font-family: verdana;
font-size: 0.9em;
color: #FF00FF;
}
</style>
...would set all the text inside paragraph tags to that font.
I'd say PHP is much, much more useful than &#106avascript (which is not that useful, really).

[Website] [+++ Divide By Cucumber Error. Please Reinstall Universe And Reboot +++]

Especially all the new browsers disable it for Cookie blocking and stuff. I know about the handy dandy editing features of CSS, but not the rest.

I also know that the
{h1}, {h2}, ...
tags can be edited with CSS at once, and that is what I use it for. (Not on the MMoR site)

I don't understand how it may be used for making a site without those ugly HTML spaces.

I also guess they use CSS on the forums with the
{h1}
tags and such as displayed by them creating that new font.

All {}s should actually be the greater and less than signs. If I put them in those however, the forum actually reads it as HTML and won't display it.
I've never seen a (recent) browser blocking &#106avascript, nor cookies, by default.
What are these ugly HTML spaces? If you mean the spaces above and below items in tags (such as the p, h1/h2/h3/hn tags and so on) you can edit the spacing with the padding and margin styles.

[Website] [+++ Divide By Cucumber Error. Please Reinstall Universe And Reboot +++]

I will put those tags in code. Wow, it won't let me display HTML, even in code form.
You mean the <h1> tags? Use &lt; = < and &gt; = >

[Website] [+++ Divide By Cucumber Error. Please Reinstall Universe And Reboot +++]

Ah thanks, I'll keep that for future reference, but I found another way to do it. I am going to find their CSS page link in the source.

Here is the sneaky little stylesheet, displayed for everyone to see.
.dummy {font-size: 10px}    BODY {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #FFFFFF; background: #000000; margin: 0px;}P, TD, OL, UL, DL {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #FFFFFF}    A:link {text-decoration: none; color: #EEEE88}  A:visited {text-decoration: none; color: #EEEE88}  A:active {text-decoration: none; color: #9999FF}  A:hover {text-decoration: none; color: #9999FF}  .img { border: 0px solid #000; vertical-align: middle; }  .smallfont {font-size: 10px}  .mediumfont {font-size: 11px}  .largefont {font-size: 18px}  .regularfont {font-size: 10pt; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif}  .path {font-size: 10px; color: silver}  .head {color: silver; background: #333399}  .headsmall {font-family: verdana, sans-serif; font-size: 10px; color: silver; background: #333399; border-top: solid 1px #394CB8; border-left: solid 1px #394CB8;}  .category {color: silver; background: #333366; border-top: solid 1px #434376; border-left: solid 1px #434376; border-bottom: solid 1px #232356; border-right: solid 1px #232356;}  .postcell {font-size: 10px; color: silver; background: #333366}  .forumcell {background: #2C2C30; border-top: solid 1px #303040; border-left: solid 1px #303040; border-bottom: solid 1px #090920; border-right: solid 1px #090920;}  .altforumcell {background: #2A2C3D; border-top: solid 1px #3A3A4A; border-left: solid 1px #3A3A4A; border-bottom: solid 1px #090920; border-right: solid 1px #090920;}  .announcecell {background: #333366; overflow: auto; border-top: solid 1px #434376; border-left: solid 1px #434376; border-bottom: solid 1px #232356; border-right: solid 1px #232356;}  .threadhighlight {background: #003366}  .time {color: #FFFF88}  .staff { color: #43FF43}  .moderator { color: #FFA07A }  .premium { color: #FFEA00; font-weight: bold }  .premiumusernames { color: #F2D366; }    .suspended { color: #FF6C12 }  .banned { color: red }  .quote { font-size: 11px; background: #3B3D62; border-top: solid 1px #5B5D82; border-left: solid 1px #5B5D82; border-bottom: solid 1px #1B1D42; border-right: solid 1px #1B1D42;}  .quote .quote { font-size: 11px; background: #383560; border-top: solid 1px #484570; border-left: solid 1px #484570; border-bottom: solid 1px #1B1D42; border-right: solid 1px #1B1D42;}  .quote .quote .quote { font-size: 11px; background: #343156; border-top: solid 1px #444166; border-left: solid 1px #444166; border-bottom: solid 1px #242146; border-right: solid 1px #242146;}  .quote .quote .quote .quote { font-size: 11px; background: #302853; border-top: solid 1px #5B5D82; border-left: solid 1px #5B5D82; border-bottom: solid 1px #1B1D42; border-right: solid 1px #1B1D42;}  .forumrules {border: solid #555555 2px; font-family: verdana, sans-serif; color: white; font-size: 10px}  .source {background: #ffffff; border: solid 2px; font-family: Courier New; color: black; font-size: 9pt; width: 95%; height: 250px; overflow: auto; padding: 3px;}  .editedby {color: #DDDDDD; font-size: 10px;}  .register_required { color: red} .cpp-pre {background: #ffffff; border: solid #888888 2px; font-family: Courier New; color: black; font-size: 9pt; width: 630px; height: 250px; overflow: auto; padding: 3px;}  .cpp { font-family : Arial, sans-serif; background-color :#FFFFBB; font-size:12px; border-width : 1px; border-style : solid; border-color : #BBBBBB;}  .cpp-blockdoc { color: #00FF00; font-family: Arial, sans-serif;}  .cpp-linedoc {	color: #2eFF57;	font-family: Arial, sans-serif;}  .cpp-code {color:#000000; font-family:Arial, sans-serif;}  .cpp-literal {color: #8B0000; font-family: Courier;}  .cpp-keyword {color: blue; font-family: Courier;}  .cpp-comment {color: gray; font-family: Courier;}  .cpp-number {color: purple; font-family: Courier;}  .cpp-directive {color: green; font-family: Courier;}  .java-literal {color: #8B0000; font-family: Courier;}  .java-keyword {color: blue; font-family: Courier;}  .java-comment {color: gray; font-family: Courier;}  .java-number {color: purple; font-family: Courier;}  .java-primitives {color: #ff6699; font-family: Courier;}  .java-storageclasses {color: #ff6633; font-family: Courier;}  .java-visibilitymodifier {color: #00008B; font-family: Courier; font-weight: bold;}  .vb-literal {color: #8B0000; font-family: Courier;}  .vb-keyword {color: blue; font-family: Courier;}  .vb-comment {color: gray; font-family: Courier;}  .vb-function {color: #00008B; font-family: Courier; font-weight: bold;}  .vb-method{color: green; font-family: Courier;}  .asm-keyword {color: #ff6666; font-family: Courier;}  .asm-function {color: #00008B; font-family: Courier; font-weight: bold}  .asm-comment {color: gray; font-family: Courier;}  .asm-string {color: #8B0000; font-family: Courier;}  .asm-number {color: purple; font-family: Courier;}  .asm-register {color: #cc6666; font-family: Courier;}  .news-table {}  .news-headline { font-family: tahoma, verdana, sans-serif; font-weight: bold; font-size: 17pt;}  .news-byline { font-family: verdana, sans-serif; font-size: 8pt }  .news-author { font-family: verdana, sans-serif; font-size: 8pt }  .news-date { font-family: verdana, sans-serif; font-size: 8pt }  .news-story { font-family: verdana, sans-serif; font-size: 10pt }  .boxtext {font-size: 11px; background: #333366; border-top: solid 1px #434376; border-left: solid 1px #434376; border-bottom: solid 1px #232356; border-right: solid 1px #232356;}  .boxheadr {font-weight: bold; background: #333399; border-top: solid 1px #394CB8; border-left: solid 1px #394CB8;}  .featmenu {background: #333366; border-top: solid 1px #434376; border-left: solid 1px #434376; border-bottom: solid 1px #232356; border-right: solid 1px #232356;}  .feattitle {font-size: 10pt; font-weight: bold;}  .featbody {font-size: 11px; background: #1B1B3D; border-top: solid 1px #434376; border-left: solid 1px #434376; border-bottom: solid 1px #232356; border-right: solid 1px #232356;}  .spotlighthdr {font-weight: bold; background: #4D9933; border-top: solid 1px #437643; border-left: solid 1px #437643; border-bottom: solid 1px #235623; border-right: solid 1px #235623;}  .spotlightbody {font-size: 11px; background: #1B3D29; border-top: solid 1px #437643; border-left: solid 1px #437643; border-bottom: solid 1px #235623; border-right: solid 1px #235623;}  .tableheadr {font-size: 15px; font-weight: bold; background: #6666CC}  .menuheadr {font-size: 12px; font-weight: bold; background: #333399; border-top: solid 1px #394CB8; border-left: solid 1px #394CB8;}  .menubody {font-size: 11px; font-weight: bold; background: #333366; border-top: solid 1px #434376; border-left: solid 1px #434376; border-bottom: solid 1px #232356; border-right: solid 1px #232356;}   .threadmessage {font-size: 11px; font-weight: bold}  .threadtime {font-size: 11px; color: #AAAAAA}  .submitbutton {font-family: Verdana, sans-serif; font-size: 11px; font-weight: bold; background: #666666; color: white}  .textfield {background: #000000; color: #FFFFFF; font-family: Verdana, sans-serif; font-size: 11px}  .inlinebox {border: solid #FFFFFF 1px; background: #223344; padding: 10px}  .subtle {font-size: 11px; color: #666666; font-weight: normal}  .ZWNewsFmt01-Date {background-color: #333366; color: #FFFFFF; font-weight: bold; font-size: 10pt; border-top: solid 1px #3A3A4A; border-left: solid 1px #3A3A4A; border-bottom: solid 1px #090920; border-right: solid 1px #090920; }  .ZWNewsFmt01-Headline {font-weight: bold; font-size: 15px; color: #FFFFFF}  .ZWNewsFmt01-Byline {font-size: 11px; color: #DDD6D0}  .ZWNewsFmt01-Body {font-size: 10pt; color: #FFFFFF}  .purplehdrold {font-family: Verdana, sans-serif; font-size: 18px; color: #33CC66; font-weight: bold; font-style: italic}  .purplehdr {font-family: Verdana, sans-serif; font-size: 18px; color: #4DC482; font-weight: bold; font-style: italic}    .tblhdr {font-family: Verdana, sans-serif; font-size: 10pt; color: #FFFFFF; font-weight: bold; background: #666699; border-top: solid 1px #434376; border-left: solid 1px #434376; border-bottom: solid 1px #232356; border-right: solid 1px #232356;}  .maintext {font-size: 10pt}  .maintext1 {font-size: 15px}  .maintext2 {font-size: 16px}  .maintext3 {font-size: 18px}  .maintext4 {font-size: 20px}  .maintext5 {font-size: 19pt}  .maintext6 {font-size: 28px}  .maintext-1 {font-size: 12px}  .maintext-2 {font-size: 11px}  .caption {font-size: 11px; font-weight: bold}  .maintext-3 {font-size: 8px}  .maintext-4 {font-size: 10px}  .code {font-family: Courier New; font-size: 10pt; color: #ADD8E6}  .vbcode {font-family: Courier New; font-size: 11px; color: #ADD8E6}  .codecomment {font-family: Courier New; font-size: 10pt; color: #9999FF}
Here is my troublesome code that messed my post up.
  H1 {font-size: 18px; font-weight: bold; color: #FFFFFF}  H2 {font-size: 15px; font-weight: bold; color: #FFFFFF}  H3 {font-size: 10pt; font-weight: bold; color: #FFFFFF}

.calendarhead {
font-family:tahoma,verdana, arial, sans-serif;
color:white;
font-size:13px;
font-weight:bold;
padding:6px;
background: #333366;
}

.calendar {
font-family:verdana, arial, sans-serif;
color:#B0B0B0;
background:#333344;
font-size:10px;
font-weight:normal;
padding:4px;
}

.calendarsel {
font-family:verdana, arial, sans-serif;
background:#6699cc;
font-size:13px;
font-weight:bold;
padding:4px;
}

.calendarlink {
color:white;
}

ul#tabnav {
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #333399;
margin: 0;
}

ul#tabnav li {
float: left;
height: 21px;
background-color: #20205C;
margin: 2px 2px 0 2px;
border: 1px solid #3333AD;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 {
border-bottom: 1px solid #333399;
background-color: #333399;
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a {
color: white;
}

#tabnav a {
float: left;
display: block;
color: #a09dc3;
text-decoration: none;
padding: 4px;
}

#tabnav a:hover {
background: #5555DD;
color: white;
}

This topic is closed to new replies.

Advertisement