Website Questions

[IndigoClaudia]

will do.

Umm... it kind of works. I think i can fix it.
Scratch that it's not really working?
Like... it defaults to Jirachi style kind of and i can't switch it back...

 

[Butterfree]

Usually, if something’s not working, you’re going to have to show us the code you’re using in order for us to be able to figure it out! Try copying and pasting all the relevant code - the link tags, the Javascript - so we can try to see what’s wrong.

 

[IndigoClaudia]

Alright here goes.

JAVA SCRIPT - note i downloaded this from the tutorial so it's likely the source of our problem.

Spoiler: Javascript

/**
* StyleSwitcher: A JavaScript library for creating alternate stylesheets
* dynamically, and switching between them and their originals.
*/

var styleSwitcher = styleSwitcher || {
// The styles that are available for switching.
styleSheets: window.document.styleSheets,

// Hash table of style replacement patterns. Each pattern is defined as a
// search key and a replacement string, like this:
// {
// "http://www.example.com/styles/": "http://localhost/project/styles/",
// ...
// }
replacePatterns: {},

// Arrays of original and alternate style link objects.
originalStyles: [],
alternateStyles: [],

// The switcher state: original or alternate.
state: "original",

// Go through the available stylesheets and create alternate styles if
// appropriate. A hash table of replacement patterns can be passed.
processStyleSheets: function(patterns) {
patterns = patterns ? patterns : this.replacePatterns;

for (var s in this.styleSheets) {
var styleSheet = this.styleSheets;
// Check if this is a linked stylesheet.
if (styleSheet.href) {
var altURL = this.replaceURL(styleSheet.href, patterns);
if (altURL && altURL != styleSheet.href) {
// Tag this style as the original.
styleSheet.title = "original";
this.originalStyles.push(styleSheet);

// Create the alternate style.
var lStyle = this.createLink(true, altURL);
this.alternateStyles.push(lStyle);

}
}

// Look for @import rules.
// Avoid Security errors from cross-domain violations.
try {
rules = styleSheet != null ? styleSheet.cssRules : void 0;
}
catch (e) {
// Ignore the exception.
}

for (var r in rules) {
var rule = rules[r];

// Check if this is an import rule.
if (rule && rule.type == CSSRule.IMPORT_RULE && rule.href) {
var url = rule.href;
var altURL = this.replaceURL(url, patterns);

if (altURL && altURL != url) {
// Remove the import rule and create a new stylesheet link element.
styleSheet.deleteRule(r);
var oStyle = this.createLink(false, url);
this.originalStyles.push(oStyle);

// Create the alternate style.
var lStyle = this.createLink(true, altURL);
this.alternateStyles.push(lStyle);
}

}
}
}

},

// Create a new stylesheet link element.
createLink: function(alternate, url) {
var link = document.createElement("link");
link.setAttribute("rel", alternate ? "alternate stylesheet" : "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("title", alternate ? "alternate" : "original");
link.setAttribute("href", url);

document.getElementsByTagName("head")[0].appendChild(link);

return link;
},

// Replace the URL based on the passed patterns.
replaceURL: function(url, patterns) {
patterns = patterns ? patterns : this.replacePatterns;
var altURL = url;
for (var search in patterns) {
altURL = url.replace(search, patterns[search]);
if (altURL != url) {
break;
}
}
return altURL;
},

// Switch between original and alternate stylesheets.
switchStyle: function() {
// Switch the state.
this.state = this.state == "original" ? "alternate" : "original";

var disableOriginal = this.state == "alternate";
for (var o in this.originalStyles) {
var oStyle = this.originalStyles[o];
oStyle.disabled = disableOriginal;
}
for (var a in this.alternateStyles) {
var aStyle = this.alternateStyles[a];
aStyle.disabled = !disableOriginal;
}

}
}

Spoiler: My HTML code

<title>Indigo's Corner</title>

<link href="JirachiStyle.css" rel="stylesheet" type="text/css"
<link href="stylesheet.css" rel="stylesheet" type="text/css">>
<script type="text/javascript" src="styleSwitcher.js"></script>

</head>
<body>
<div style="position: relative; left: 0; top: 0;">
<img src="IndigosCorner.png" alt="Indigo Corner!">
<div id= "mascot">
<Marquee style="color:deeppink"> News: The Website is up! Yaaay! </Marquee>

<select id="Style">
<option value="Mew"> <a href=”#” onclick=”setActiveStyleSheet(‘default’); return false;”>Mew Style</a></option>
<option value="Jirachi"> <a href=”#” onclick=”setActiveStyleSheet(‘alternate’); return false;”>Jirachi Style</a></option>
</select>
<!-- I figured a selector thingy was more intuitive then a link -->

And then when i try to select mew or Jirachi style it just doesn't work.

 

[Butterfree]

It looks like you’ve got two little mistakes in there. First, you seem to have pasted one of the link tags in slightly the wrong place - there’s no > after the first one, but two after the other.

Secondly, you can’t put an a tag into a select option - it just doesn’t work that way! In order to use a select menu you’d need the code to be a little different. I suggest just sticking with regular links for now.

 

[IndigoClaudia]

Alright, makes sense, let's see if it works now.

Update - it defaults to mew style which is correct, but then this happens

(It's even worse when my witty Error 404 thing is witty to me)

Right, the links seem to be working but the style doesn't change. the code is about the same as last time, but i just changed that link up there too a new page.

 

[Butterfree]

It looks like you’ve got curly quotes around the attributes on your a tags. That doesn’t work right; it needs to be straight quotes, like in the other attributes in your HTML.

 

[IndigoClaudia]

oh huh. Good eye.
That fixed some things, I think...
but it didn't really work, because the style isn't switching.

Ahh well. maybe i can sleep on it and figure it out tomorrow. or maybe i could just think about it. That might work too. lol

 

[IndigoClaudia]

My website is coming along (and in addition, i decided not to use a style picker until sometime after i release the website. I'm thinking of some sort of dark mode).

EDIT: this doesn't look super different from the first one... but i've added a lot more pages. :D

 

[IndigoClaudia]

Aaaand... i have a link button now.

The text is a bit on the small side, but i still love the whole thing.
EDIT: i will make a dark mode link button, for darker websites.
EDIT: Waaay later when i feel like it.

EDIT: hey look i made it.

This one looks a bit better in my opinion. lemme check it out on roar of time style here.

EDIT: I also wrote a comprehensive guide on how to catch/hatch shiny pokémon.

 

[IndigoClaudia]

Uhh... so i want to align an image like... well let me show you.
For example

This is an image of Shiny Frillish Because i feel like writing text about shiny frillish

(This was just an example)
Also that wasn't super close, i want the text to be RIGHT next to the image and if i were to write a paragraph the paragraph would be right next to the image, instead of the image taking up lines.

Spoiler: Actually more like this.

Please ask if i'm not being clear. Instead of that... i get THIS

This is an image of Shiny Frillish Because i feel like writing text about shiny frillish

this is not what i want at all... So something is off here.

Here's my code.

<div>
    <IMG src= "AnImage.Png" Align=”right” />
    <p>This would be where i write the text that is to the right of the image. </p>

  
</div>

So... what am i doing wrong. I also tried using FLOAT, and a bunch of other stuff but i think there is probably an easier solution.

 

[mewtini]

have you tried using display: inline-block? maybe try popping it onto the image/paragraph css (i guess you'd have to assign ids or something to them to do this)

 

[IndigoClaudia]

i'm a bit confused. Would you mind explaining this as if i were 6 years old?

Oh... i get it i have to use CSS O.O;

 

[mewtini]

this link does a decent job of explaining it. basically <p> usually will default to line-breaking (like what you're seeing) instead of sharing space with other things, like your image; setting display: inline-block should (?) fix that. so in the stylesheet, you could have like

#frillishImage, #frillishParagraph {
    display: inline-block
}

and it should help, but it would mean that you'd have to also change the html to <img id="frillishImage" .../> and <p id="frillishParagraph>...</p> so that you can write css specially for those two elements instead of having to style EVERY image and paragraph at once. (generally it's not ideal to use inline style, like the align="right" you have - since it's more often the case that you want to keep your html clean!)

(if you plan on styling more images like that, though, you may want to consider making a class instead of using ids like i did, since ids only let you change the style of one thing at a time. sorry if this doesn't make sense, i'm kind of avoiding doing classwork right now)

 

[IndigoClaudia]

np i'm avoiding doing classwork too. This should have enough info. Thanks

 

[Butterfree]

Well... what you actually want here isn't inline-block (which will cause the image to be in line with the first line of the paragraph), but rather the float property, which does exactly what you want and causes the text to wrap around the image! All you have to do is set float:left; on the image and possibly add some margins/padding.

 

[mewtini]

oh rip, thanks for fact-checking me. i was avoiding mentioning float since i thought she'd tried it

 

[IndigoClaudia]

<div>
    <img float:left; src= "ShinyFrillish.png" height:111 width:98 margins:5px padding:3px><img>
   <p>Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish </p>
</div>

So would this work? (I just added the Padding and Margins at random so that it might work... that might be where i messed up). I did test it but it didn't work so is it not loading or did i do something off...
Ok might it be because my image (normally not a frillish) is too big to fit in between the little side menus.

(the white side with gray thingies are the menus)

 

[Butterfree]

float is a CSS property - it goes in the stylesheet, not on the element itself! Or, well, you could also put the whole thing into the style attribute, like so:

<div>
    <img src="ShinyFrillish.png" style="float:left; height:111; width:98; margins:5px; padding:3px">
   <p>Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish </p>
</div>

But putting it in the stylesheet is cleaner.

 

[IndigoClaudia]

That should work. I don't know why but i tend to avoid messing around with CSS if i can help it for now, so that should be great. I'll see if it works.

 

[IndigoClaudia]

THANKS BUTTERFREE YOU REALLY DID HELP ME OUT!!!!!!!!!!!!