Stupid html coding question

[Ksandra]

I am trying to switch over to a digital newspaper website as per request by my boss, but I have no training in code. So I have been slowly trying to get it ready through google sites and I am stuck on a line of code for the footer. The hyperlink is causing the whole area to be white meaning you can't read the letters.

Here's what's happening:



Here's the code:

<table border="0" width="100%">
<colgroup style="background-color:#39476d"></colgroup>
<tbody>
<tr>
<td style="text-align:center;width:609px;height:40px"><span style="border-collapse:separate;font-size:13px;font-weight:bold"><font color="#444444"> &nbsp;&nbsp;</font><a href="https:link removed for BG><font color="#FFFFFF">Home</font></a><font color="#FFFFFF">&nbsp;&nbsp;| &nbsp;&nbsp;School Homepage&nbsp;&nbsp;| &nbsp; Archives&nbsp;&nbsp;| &nbsp; About Us&nbsp;&nbsp;</font></span><font color="#FFFFFF">&nbsp;</font></td>
</tr>
</tbody>
</table>


WAT DO?

[orinthia]

Looks like your href fake-link isn't closed right (needs an ending quotation mark). Can use a site like https://jsfiddle.net/ to quickly test stuff as well, adding the quote mark made it appear normally. There could also be some CSS earlier in your html/css files that puts in the odd color choice.

Can also use something like notepad++, set to html, to help give you some colored keyword and quote mark guides. Quote marks are a bane in html as it's really easy to get them mixed up in more complicated javascripting (can use/overlap ' and " and it'll still hold meaning if lined up right, but ugly).

[BerenTebogo]

Codepad.org is the best answer imo. Set language syntax, test run, and generate url to send to people so you arent posting raw code all over the place.

[Ksandra]

Looks like your href fake-link isn't closed right (needs an ending quotation mark). Can use a site like https://jsfiddle.net/ to quickly test stuff as well, adding the quote mark made it appear normally. There could also be some CSS earlier in your html/css files that puts in the odd color choice.

Sorry, the end quotation mark is there in the actual code, I accidentally deleted it when deleting the real link for this bg post. Google sites allows you to preview a code before adding it. In the preview it looks normal, but once you go to the real page it shows what I listed.

There also is no early CSS code. Google sites lays out the website for you, you can just add code to it for links/widgets/ etc. So like, you select to add a footer in Sites, and then you hit an html button. It opens a box to put the code in. This is the only code in the footer.

So I actually don't need to do a whole lot to it. Just a few things I'm adding, like that footer.

The newer version of Sites is a million times easier to use for noncoders, but it doesn't allow for adding widgets outside of google-owned products, and you can't add html codes. So I couldn't add widgets for our facebook page, weather, date/time, etc. to the site on the new version.

Old version is definitely clunky.


But it's free, and I'd rather suffer with free then trying and convince the school to pay a bunch of money for a site I may or may not know how to use correctly.

Codepad.org is the best answer imo. Set language syntax, test run, and generate url to send to people so you arent posting raw code all over the place.

Sorry, honestly curious, what's wrong with showing the code?

[orinthia]

Sorry, honestly curious, what's wrong with showing the code?

It loses spacing and some formatting, can use the code, html, php tags on this forum to preserve some of it (make an advanced post, for advanced shitposting).

Spoiler: show

[HTML ][ /HTML] (remove the extra spaces) can produce this with your code (i put in the missing quote mark):

<table border="0" width="100%">
<colgroup style="background-color:#39476d"></colgroup>
<tbody>
<tr>
<td style="text-align:center;width:609px;height:40px"><span style="border-collapse:separate;font-size:13px;font-weight:bold"><font color="#444444"> &nbsp;&nbsp;</font><a href="https:link removed for BG"><font color="#FFFFFF">Home</font></a><font color="#FFFFFF">&nbsp;&nbsp;| &nbsp;&nbsp;School Homepage&nbsp;&nbsp;| &nbsp; Archives&nbsp;&nbsp;| &nbsp; About Us&nbsp;&nbsp;</font></span><font color="#FFFFFF">&nbsp;</font></td>
</tr>
</tbody>
</table>

I'm guessing it's going back to a previously changed background color, usually somewhere else it can be defined and then redefined whenever, but it gets ugly (CSS can get super messy with hierarchy). IOW, the code snippet isn't enough to know much else about the problem.

See if you can just define that little part's colors, or otherwise surround that part with a <div> tag and define its style that way, like <div style="background-color: blue">drop in everything here</div> . Or add a style tag to <tbody>, <table>, etc, until something changes. It's messy but it can sometimes work.

[Ksandra]

Ty for your help orinthia. I am still bashing my head against the wall trying to get this shit to work. It amazes me because that's something pretty standard on the bottom of websites, and I can't seem to find any pregenerated codes that I could just copy and paste and just tweak the links/words/colors. I don't get it.

This is currently where I am at:

<table border="0" width="100%">
<colgroup style="background-color:#39476d"></colgroup>
<tbody>
<tr>
<td style="text-align:center;width:609px;height:40px"><span style="border-collapse:separate;font-size:13px;font-weight:bold"><font color="#444444"> &nbsp;&nbsp;</font><a color="#FFFFFF" href="link removed for bg" style="text-decoration:none"><font color=#FFFFFF><style="background-color:#39476d">Home</style></font></a><font color="#FFFFFF">&nbsp;&nbsp;| &nbsp;&nbsp;School Homepage&nbsp;&nbsp;| &nbsp; Archives&nbsp;&nbsp;| &nbsp; About Us&nbsp;&nbsp;</font></span><font color="#FFFFFF">&nbsp;</font></td>
</tr>
</tbody>
</table>

And it still is doing that white block. EVERY single preview program has it look correctly. Even the google sites preview thinks it's correct, but it's still doing that same damn white color block. Idk why. ;_;

[Jefe]

Does the white bar happen when you hover the other links? If yes, then it's an on hover css styling. If not, then it's an active css styling.

To figure this out:

1. In FF hit F12 to open 'developer tools.'
2. Select 'Inspector,' it will show you the html code (left side). Find the problem area: footer. Expand the code by clicking on the html tag "footer."
3. Look at the right side and it will show you the 'css styles' panel. You can tinker w/ it whilst it shows you the changes live. Fuck around w/ it until you fix it.

If you had posted the link wuda solved it right away instead of typing all this shit. Good luck.

[Ksandra]

white bar is there 100% of the time, even when hovered or clicked.

I'm not linking my job stuff on bg, sorry.

[Ksandra]

Friend and I finally figured it out FUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU UUUUUUUUUUUUUUUUUCK coding.


When you make a page on google sites it lets you set a theme template. I guess the theme I picked (which was only one blue line at the top of the page btw), was causing that to glitch out. Once I changed to a new theme it was fine.



FUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUCK coding.

[orinthia]

heh, welcome to web shit

[Obsidian]

The real fun starts when you start having to deal with browser compatibility.