Stuck with html and css

Joined
Jun 14, 2018
Messages
101
Reaction score
1
basically my site is responsive,
what i have done is i have managed to center a image
but that's all well and good on desktop.

"BUT" when i resize the browser the image goes to another side?

here is what i have done in html.

NOTE: when i take away the code for /images it also removes the couples of the month tab as well
and just leaves white writing?

HTML:
<br>
    <br>
    <section>
      <br />
      <div align="center">
        <div style="height: 40px;width: 300px;  background-image: linear-gradient(+130deg, DarkTurquoise, DarkBlue);color:white;">
          <i class="fa-fw fas fa-snowflake"></i>Dolphin Of The Month!
        </div>
      </div>
      </head>
      <div class="responsive">
        <div class="gallery">
          <img src="images/cute.jpg" width="140" height="123">
          </a>
        </div>
      </div>





      </div>
      </div>
    </section>
    <!-- end section -->
    </head>

    <body>
      <!-- End text area -->

      <p class="round3">
        <div align="right"><img src="images/" height="100px" width="100px"></div>
      </p>



here's what i have done to the gallery css to position it

CSS:
div.gallery img {
  display: block;
  margin-left: 180%;
  margin-right: auto;
  width: 50%;
}

i have removed the original coding to its new one
i've had a little help from my friend w3schools lol

i only need help with positioning the dolphin for both desktop and responsive!

many thanks
 
Joined
Mar 11, 2022
Messages
226
Reaction score
32
To center a image (or any other element)

X Axxis
Code:
left:50%; transition:translateX(-50%);
Y Axxis
Code:
top:50%; transition:translateY(-50%);

X and Y Axxis
Code:
top:50%; left:50%; transition:translate(-50% -50%);
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
To center a image (or any other element)

X Axxis
Code:
left:50%; transition:translateX(-50%);
Y Axxis
Code:
top:50%; transition:translateY(-50%);

X and Y Axxis
Code:
top:50%; left:50%; transition:translate(-50% -50%);
and that's in css? in div.gallery img
 
Joined
Mar 11, 2022
Messages
226
Reaction score
32
Well i would go with explicit class definiton
HTML
Code:
<div class="gallery">
          <img src="images/cute.jpg" class="igal">
          </a>
CSS
Code:
.igal{position:relative; width:140px; left:50%; transition:translateX(-50%);}
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
ok thank you next question



basically were dolphin of the month is on our home page
there is a dolphin image.
now i don't want that to move, resize or anything

but my schedule images have moved they were
on top of the text? now i want them moved back above the text
and not the dolphin image to move or resize on the home page?

coolvibes

this is what i need fixed i have tried everything!

i have this css


CSS:
img-fluid {
    width: 100%;
    height: auto;
    object-fit: fill;
    display: block;
    margin-left: auto;
    margin-right: auto;
    
}

with this html
HTML:
<div class="responsive">
          <img class="img-fluid" src="images/cute.jpg" alt="dolphin">
          </div>
          
          <div class="content">
          <center><h2>winter</h2></center>

anyway you could help?
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
So your problem is solved now???? Because i don't see any "Dolphin of the month" on "https://coolvibes-reloaded.com/Schedule"
noooo! dolphin of the month is on the home page?
but every time i change scripting the dolphin image
gets bigger and the presenters images on the schedule get bigger
and disappear off the top of the text that's underneath the image
and the presenters get bigger when the move right if this makes sense?
 
Joined
Mar 11, 2022
Messages
226
Reaction score
32
I don't get it. Related to a "dolphin" is https://coolvibes-reloaded.com/images/logo.png only. And that image is not linked to any css but to a style "position:relative; top:-0px; right:-200px; width:200px; height:120px; border:none;".

I mean, my english is bad. But yours is gibberish to me. I have no idea what you are talking about. Nothing make sense to me.

What about an image with arrows, lines and so on. Maybe you can describe your problem that way.

There is a few rules should be respected with images.

One is, never use width and height at the same time. Use width "or" height. Otherwise your image may be distorded and scaled in a weird way. A given "width" automatically leads to the correct "height" and vice versa.

If the image gets bigger by changing your script "whatever that means", than you need to show me that in any way. Use jsfiddle or similar. Narrow it down to the relevant stuff or tell me exactly how to reproduce it on your site https://coolvibes-reloaded.com/Schedule.

Otherwise it's impossible to help you. Unfortunately i gave my crystal ball away to my neigbour. And i really don't know when she's back with it.
 
Last edited:
Joined
Mar 11, 2022
Messages
226
Reaction score
32
I guess i know why i am that confused. There is no images/cute.jpg image within your url. "Not in sourcecode neither". Please give me the right url to it. I won't click through the menu to find it.
 
Joined
Mar 11, 2022
Messages
226
Reaction score
32
Okay. Got it. To whom who are also confused. strawbs is talking about the start (home) site of it. So https://coolvibes-reloaded.com/ instead of https://coolvibes-reloaded.com/Schedule.

There is a lot of issues. Before we go to check css please go for unclosed tags.

First overview of sourcecode with STRG F on Firefox

<div = 87
</div = 95

Both numbers should be the same. So 8 unneeded close tags. Fix that first. Than we go for the rest.
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
Okay. Got it. To whom who are also confused. strawbs is talking about the start (home) site of it. So https://coolvibes-reloaded.com/ instead of https://coolvibes-reloaded.com/Schedule.

There is a lot of issues. Before we go to check css please go for unclosed tags.

First overview of sourcecode with STRG F on Firefox

<div = 87
</div = 95

Both numbers should be the same. So 8 unneeded close tags. Fix that first. Than we go for the rest.
87 and 95, which you talking about the schedule or index
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
div tags are closed as seen here

HTML:
<!DOCTYPE HTML>
<html lang="en">

  <head>

    <!-- partial:index.partial.html -->
    <html>

    </html>
    <title>Coolvibes|Reloaded</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://coolvibes-reloaded.com/w3.css">
    <link rel="stylesheet" href="https://coolvibes-reloaded.com/fonts.css">
    <link rel="stylesheet" href="https://coolvibes-reloaded.com/font-awesome.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
    <link rel="stylesheet" href="https://coolvibes-reloaded.com/style.css">

    <link href="//db.onlinewebfonts.com/c/ba5ccffcd04561bfd40f24f63fc62b3d?family=Volvo+Novum+Light" rel="stylesheet" type="text/css" />

  </head>


  <body></body>


  <div style="position:static; height:60px;">
    <img src="https://coolvibes-reloaded.com/images/logo.png" style="; top:-0px; right:-200px; width:200px; height:120px; border:none;" />
  </div>

  <div align="right">
    <div style="position:relative; height:60px;">
      <style type="text/css">
        .WimpyPlayerPopup453,
        .WimpyPlayerPopup453:hover,
        .WimpyPlayerPopup453:visited,
        .WimpyPlayerPopup453:link {
          font-size: 20px;
          background-color: #0029CF;
          position: relative;
          display: inline-block;
          overflow: hidden;
          padding-left: 1em;
          padding-right: 1em;
          margin: 0px;
          -webkit-text-size-adjust: 100%;
          -ms-text-size-adjust: 100%;
          cursor: pointer;
          height: 2em;
          border-radius: 1em;
          -webkit-border-radius: 1em;
          -moz-border-radius: 1em;
          -ms-border-radius: 1em;
          -o-border-radius: 1em;
          border-style: solid;
          border-width: 1px;
          border-color: rgba(123, 126, 128, 1);
          box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.85px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
          -webkit-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.852px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
          -moz-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.852px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
          -ms-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.852px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
          -o-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.852px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
          white-space: nowrap;
          line-height: 1.9em;
          color: #fdfdfd;
          font-family: Arial, Helvetica, sans-serif;
          text-align: center;
          font-weight: normal;
          font-style: normal;
          text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.25px 6.7px #2e4a63;
          -webkit-text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.2px 6.7px #2e4a63;
          -moz-text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.25px 6.7px #2e4a63;
          -ms-text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.25px 6.7px #2e4a63;
          -o-text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.25px 6.7px #2e4a63;
          font-smooth: always;
          -webkit-font-smoothing: antialiased;
          text-decoration: none;
        }

        .WimpyPlayerPopup453:active {
          color: #cecece;
          background-color: #767676;
          border-color: rgba(26, 26, 26, 0.38);
          box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
          -webkit-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
          -moz-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
          -ms-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
          -o-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
          text-shadow: none;
          -webkit-text-shadow: none;
          -moz-text-shadow: none;
          -ms-text-shadow: none;
          -o-text-shadow: none;
          text-decoration: none;
        }

      </style>
      <a class="WimpyPlayerPopup453" href="javascript:;" onClick="window.open('http://onlineradiobox.com/uk/urban8/player/?cs=uk.urban8&played=1&from_widget=1','wimpyPlayerPopupWindow','width=527,height=280')">ListenNow</a>

      <style="position:relative; top:-0px; right:-200px; width:200px; height:120px; border:none;" />

    </div>
  </div>
  <div align="right">
    <div id="cc_tunein">
      <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.pls"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-pls.png" border="0" alt="Winamp, iTunes" title="Winamp, iTunes" /></a>
      <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.asx"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-asx.png" border="0" alt="Windows Media Player" title="Windows Media Player" /></a>
      <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.ram"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-ram.png" border="0" alt="Real Player" title="Real Player" /></a>
      <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.qtl"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-qtl.png" border="0" alt="QuickTime" title="QuickTime" /></a>
    </div>
  </div>

  <div align="right"><a href="https://coolvibes-reloaded.com/register.html" target="_blank"><b>DJ Register</b></a></div>







  <center>
    <div id="snow"></div>
    <p>You're Tuned To</p>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <head>

      <title>Station Activity</title>

      <style type="text/css">
        td {
          font-size: 0.6em;
        }

        /* temporary for testing purposes */
        #NowOn {
          border: 0px solid black;
          font-size: 11.5px;
          font-family: future_now;
          color: #00bcd4;
          background: transparent;
          height: 65px;
          width: 350px;
          position: relative;
          top: -97px;


        }

      </style>

      <script type="text/javascript">
        /* NOT CURRENTLY USED
var thedate = new Date();
var dayofweek = thedate.getDay();
var hourofday = thedate.getHours();

var GMT = new Date().getTimezoneOffset();
var offsetGMT = +1 new Date().getTimezoneOffset()/01:00;
*/
        // Sun=0 1 2 3 4 5 Sat=6
        var DayOfWeek = new Array('Weekend', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Weekend');
        var NoShow = 'No Show Scheduled<br />for COOLVIBES';
        var DH = new Array(7);
        for (d = 0; d < 7; d++) {
          DH[d] = new Array(24);
          for (h = 0; h < 24; h++) {
            DH[d][h] = '';
          }
        }
        DH[1][10] = 'Monday at 10 AM<br>AUTOMIX<br>with auto';
        DH[1][08] = 'Monday at 8 AM<br>Kayleys Theme<br>with kayley';
        DH[1][12] = 'Monday at 12 PM<br>with Levis show<br>Monday at Noon<br>No Genre';
        DH[1][14] = 'auto<br>with auto parrott<br>Monday at 2 PM<br>No Genre';
        DH[1][16] = 'No Show Name<br>with Katy Cox<br>Monday at 4 PM<br>Rap';
        DH[1][17] = 'The Greatest<br>with DJ Fresh<br>Monday at 5 PM<br>No Genre';
        DH[1][18] = 'Revolution Corner<br>with Randy Underwood<br>Monday at 6 PM<br>No Genre';
        DH[1][20] = 'Daily Affirmation<br>with DJ Hightower<br>Monday at 8 PM<br>No Genre';
        DH[1][22] = 'No Show Name<br>with David Doggett<br>Monday 10 to Midnight<br>No Genre';
        DH[1][23] = 'No Show Name<br>with David Doggett<br>Monday at 11 PM<br>No Genre';
        DH[2][20] = 'Jonzeys Show<br><br>Tuesday  8 PM to 10pm<br>Rock';
        DH[2][08] = 'Kayleys Theme<br>with Kayley<br>Tuesday at 8 AM<br>Rock';
        DH[2][16] = 'No Show Name<br>with Sweet Action Jackson<br>Tuesday at 4 PM<br>Rock';
        DH[2][20] = 'The Rock Hour<br>with Dan the Man<br>Tuesday at 8 PM<br>No Genre';
        DH[3][19] = 'Levis Show! Braap!<br>with DJ Levi<br>Wednesday at 7 PM<br>No Genre';
        DH[3][10] = 'Wfam Wednesdays<br>with DJ Fam<br>Wednesday at 10 AM<br>No Genre';
        DH[3][15] = 'The Storm Hour<br>with the Weatherman and Reba<br>Wednesday 3 to 5 PM<br>Classic Rock';
        DH[3][16] = 'The Storm Hour<br>with the Weatherman and Reba<br>Wednesday at 4 PM<br>Classic Rock';
        DH[3][22] = 'EZ Does It<br>with DJ EZ<br>Wednesday at 10 PM<br>Rap';
        DH[4][23] = 'All Request<br>with Groovy G<br>Thursday Noon to 1 AM<br>mix';
        DH[4][22] = 'Request Show<br>with Strawbs<br>Thursday 8 PM to 10pm<br>Mix n Match';
        DH[4][13] = 'automix<br>with autodj<br>Thursday at 1 PM<br>mix';
        DH[4][14] = 'The Hour<br>with DJ V-Jeezy<br>Thursday at 2 PM<br>No Genre';
        DH[4][18] = 'Request Show<br>with DJ Strawbs<br>Thursday at 10 PM<br>No Genre';
        DH[5][10] = 'Friday at 10 AM<br>Christian Music<br>with Jammin J';
        DH[5][11] = 'Friday at 11 AM<br>Christian Music<br>with Jammin J';
        DH[5][19] = 'Friday at Eve<br>G-Force<br>with DJ Reuben';
        DH[5][10] = 'Friday at 10 AM<br>Wfams show<br>with Wfam';
        DH[5][09] = 'Friday at 9 AM<br>Mix n Match<br>AutoMix';
        DH[5][14] = 'Friday at 2 PM<br>automix<br>with autodj';
        DH[5][15] = 'Friday at 3 PM<br>automix<br>with autodj';
        DH[5][16] = 'Friday at 4 PM<br>automix<br>with autodj';
        DH[5][17] = 'Friday at 5 PM<br>automix<br>with autodj';
        DH[5][19] = 'Friday at 7 PM<br>Mix n Match<br>AUTOMIX';
        DH[5][22] = 'Friday at 10 PM<br>Dance/Trance<br>with Dean';
        DH[5][23] = 'Friday at 11 PM<br>automix<br>with autodj';
        DH[6][18] = 'Saturday at 6 PM<br>automix<br>with automix';
        DH[6][19] = 'Saturday at 7 PM<br>Dance/Trance<br>with Dean';
        DH[6][13] = 'Saturday at 1 PM<br>Old School/Reggae<br>with El Carlito';
        DH[6][10] = 'Saturday at 10 AM<br>mix<br>with Wfam';
        DH[6][23] = 'Saturday at 11 PM<br>mix<br>with autodj';
        DH[0][18] = 'Sunday   at 18 PM<br>Request Show<br>with Strawbs';
        DH[0][21] = 'Sunday   at 12 PM<br>Sunday Mix365<br>with Deano';
        DH[0][14] = 'Sunday   at 2 PM<br>G Force Reggae<br>with Reuben';
        DH[0][13] = 'Sunday   at 1 PM<br>80s Show<br>with Rob';
        // Add more when schedule is known. Note: there may be better ways to do this when information is known.
        function OnNow() {
          var thedate = new Date();
          var dayofweek = thedate.getDay();
          var hourofday = thedate.getHours();
          // alert(dayofweek+':'+hourofday+'<br />'+DH[dayofweek][hourofday]);
          var showOn = DH[dayofweek][hourofday];
        }

        function NowON() {
          var thedate = new Date();
          var dayofweek = thedate.getDay();
          var hourofday = thedate.getHours();
          var showOn = DH[dayofweek][hourofday];
          if (showOn == '') {
            showOn = thedate + '<p />No Show Scheduled';
          }
          document.getElementById('NowOn').innerHTML = showOn;
        }

      </script>
    </head>

    <BODY onLoad="NowON()"></BODY>
    <!-- Unhide this if table display desired
<script type="text/javascript">
document.write(TableStationSchedule())
</script>
-->
    <script type="text/javascript">
      document.write(NowON());

    </script>
    <div id='NowOn' onClick="NowON()">Click For Now On COOLVIBES</div>
  </center>
  <b>
    <p>
      <center>We Spin All Types Of Variety</center>
    </p>

  </b>

</html>






<body>
</body>

<div class="topnav" id="myTopnav">
  <a href="https://coolvibes-reloaded.com/index.html" class="active">Home</a>
  <a href="https://coolvibes-reloaded.com/Schedule.html">Schedule</a>
  <a href="https://coolvibes-reloaded.com/tunein.html">Tunein Again</a>
  <a href="https://coolvibes-reloaded.com/mobile.html">Mobile</a>
  <a href="https://coolvibes-reloaded.com/Birthday.html">Birthday</a>
  <a href="https://coolvibes-reloaded.com/featured.html">Featured</a>
  <a href="https://coolvibes-reloaded.com/subscribe.html">Subscribe</a>
  <a href="https://coolvibes-reloaded.com/news.html">News Bulletin</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<div style="padding-left:16px">

</div>

<script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }

</script>
<!-- Header -->

<!-- End Header -->
<!-- Start Presenters -->

<div align="right">
</div>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#6666ff" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,117.3C672,107,768,117,864,133.3C960,149,1056,171,1152,154.7C1248,139,1344,85,1392,58.7L1440,32L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
    </svg>

    <div align="center">
      <div style="
    height: 26px;
    width: 214px;
    background-image: linear-gradient(90deg, DarkTurquoise, #d1d1df);
    color: #fff;
    border-radius: 50%;
    border-radius: 50%;
    /* box-shadow:
    inset 0 0 50px #fff,      /* inner white */
    inset 20px 0 80px #f0f,   /* inner left magenta short */
    inset -20px 0 80px #0ff,  /* inner right cyan short */
    inset 20px 0 300px #f0f,  /* inner left magenta broad */
    inset -20px 0 300px #0ff, /* inner right cyan broad */
    0 0 50px #fff,            /* outer white */
    -10px 0 80px #f0f,        /* outer left magenta */
    10px 0 80px #0ff; */;         /* outer right cyan */         /* outer right cyan */
    ">
        <i class="fa-fw fas fa-snowflake"></i>Presenters!
      </div>

    </div>




    <center>
      <style type="text/css">
        .WimpyPlayerPopup406,
        .WimpyPlayerPopup406:hover,
        .WimpyPlayerPopup406:visited,
        .WimpyPlayerPopup406:link {
          font-size: 20px;
          background-color: #2D2D2D;
          position: relative;
          display: inline-block;
          overflow: hidden;
          padding-left: 1em;
          padding-right: 1em;
          margin: 0px;
          -webkit-text-size-adjust: 100%;
          -ms-text-size-adjust: 100%;
          cursor: pointer;
          height: 2em;
          border-radius: 1em;
          -webkit-border-radius: 1em;
          -moz-border-radius: 1em;
          -ms-border-radius: 1em;
          -o-border-radius: 1em;
          border-style: solid;
          border-width: 1px;
          border-color: rgba(123, 126, 128, 1);
          box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.85px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
          -webkit-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.852px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
          -moz-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.852px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
          -ms-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.852px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
          -o-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.852px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
          white-space: nowrap;
          line-height: 1.9em;
          color: #fdfdfd;
          font-family: Arial, Helvetica, sans-serif;
          text-align: center;
          font-weight: normal;
          font-style: normal;
          text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.25px 6.7px #2e4a63;
          -webkit-text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.2px 6.7px #2e4a63;
          -moz-text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.25px 6.7px #2e4a63;
          -ms-text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.25px 6.7px #2e4a63;
          -o-text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.25px 6.7px #2e4a63;
          font-smooth: always;
          -webkit-font-smoothing: antialiased;
          text-decoration: none;
        }

        .WimpyPlayerPopup406:active {
          color: #cecece;
          background-color: #767676;
          border-color: rgba(26, 26, 26, 0.38);
          box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
          -webkit-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
          -moz-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
          -ms-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
          -o-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
          text-shadow: none;
          -webkit-text-shadow: none;
          -moz-text-shadow: none;
          -ms-text-shadow: none;
          -o-text-shadow: none;
          text-decoration: none;
        }

      </style>
      <a class="WimpyPlayerPopup406" href="javascript:;" onClick="window.open('https://coolvibes-reloaded.com/DjRequests','wimpyPlayerPopupWindow','width=527,height=480')">Requests &AMP Shout-Outs</a>
    </center>


    <p>
      <center>
        <p>If You Would Like a Tune Played,
          <br />
          Our DJ's Will Hunt It Down And Wack It On!</p>
      </center>
    </p>

    <!-- Presenters Images -->
    <div align="center">
      <!-- MAIN (Center website) -->
      <div class="main">

        <!-- Portfolio Gallery Grid -->
        <div class="row">
          <div class="column">
            <div class="content">
              <img src="images/Laurs.jpg" height="123" width="240">
              <h3>Manageress</h3>

            </div>
          </div>
          <div class="row">
            <div class="column">
              <div class="content">
                <img src="images/kayley1.jpg" height="123" width="240">
                <h3>Manageress</h3>

              </div>
            </div>
            <div class="column">
              <div class="content">
                <img src="images/jason.jpg" height="123" width="240">
                <h3>DJ Reuben</h3>

              </div>
            </div>
            <div class="column">
              <div class="content">
                <img src="images/deano.png" height="123" width="240">
                <h3>Deano</h3>

              </div>
            </div>
            <br>
            <div class="column">
              <div class="content">

                <img src="images/graeme.jpg" height="123" width="240">
                <h3>Groove G</h3>

              </div>
            </div>
            <div class="column">
              <div class="content">
                <img src="images/strawb1.jpg" height="123" width="240">
                <div align="center"><a href="https://coolvibes-reloaded.com/Strawbs">DJ STRAWBS</a></div>


              </div>
            </div>
            <div class="column">
              <div class="content">
                <img src="images/jonezy.png" height="123" width="240">
                <h3>Jonzey Jones</h3>

              </div>
            </div>






            <!-- END GRID -->
          </div>

          <!-- END MAIN -->
        </div>
      </div>
    </div>

    <!-- End Presenters Images -->


    <!-- END MAIN -->

    <!-- Finish Presenters -->

    <!-- Start Programs -->
    <p style="page-break-before: always">
      <div align="center">
        <div style="
    height: 26px;
    width: 214px;
    background-image: linear-gradient(90deg, DarkTurquoise, #d1d1df);
    color: #fff;
    border-radius: 50%;
    border-radius: 50%;
    /* box-shadow:
    inset 0 0 50px #fff,      /* inner white */
    inset 20px 0 80px #f0f,   /* inner left magenta short */
    inset -20px 0 80px #0ff,  /* inner right cyan short */
    inset 20px 0 300px #f0f,  /* inner left magenta broad */
    inset -20px 0 300px #0ff, /* inner right cyan broad */
    0 0 50px #fff,            /* outer white */
    -10px 0 80px #f0f,        /* outer left magenta */
    10px 0 80px #0ff; */;         /* outer right cyan */         /* outer right cyan */
    ">
          <i class="fa-fw fas fa-snowflake"></i>Programs!
        </div>

      </div>

      <div class="sidebar s1">

        <a class="sidebar-toggle" title="Expand Sidebar"><i class="fa icon-sidebar-toggle"></i></a>

        <div class="sidebar-content">

          <div class="sidebar-top group">

            <br>

            <html>

              <head>
                <meta name="viewport" content="width=device-width, initial-scale=1.0">

              </head>

  <body>

    <table>
      <tr>
        <th>Kayley's Show</th>
        <th>Strawb's Show</th>
        <th>Levi's Show</th>
        <th>G-Force Reggae</th>
        <th>Michael Leary</th>
      </tr>
      <tr>
        <th>Jonezy Jones</th>
        <th>Deano</th>
        <th>Groove G's Request</th>
        <th>ROB</th>
        <td>New Presenter</td>
      </tr>
      <tr>
        <td>New Presenter</td>
        <td>New Presenter</td>
        <td>New Presenter</td>
        <td>New Presenter</td>
        <td>New Presenter</td>
      </tr>
    </table>

  </body>

</html>
<p style="page-break-before: always"></p>

<div align="right">
  <html>

  </html>

  <head>
    <br />
    <br />
    <!-- Presenters Images -->
    <div align="center">
      <!-- MAIN (Center website) -->
      <div class="main">
        <div style="
    height: 26px;
    width: 214px;
    background-image: linear-gradient(90deg, DarkTurquoise, #d1d1df);
    color: #fff;
    border-radius: 50%;
    border-radius: 50%;
    /* box-shadow:
    inset 0 0 50px #fff,      /* inner white */
    inset 20px 0 80px #f0f,   /* inner left magenta short */
    inset -20px 0 80px #0ff,  /* inner right cyan short */
    inset 20px 0 300px #f0f,  /* inner left magenta broad */
    inset -20px 0 300px #0ff, /* inner right cyan broad */
    0 0 50px #fff,            /* outer white */
    -10px 0 80px #f0f,        /* outer left magenta */
    10px 0 80px #0ff; */;         /* outer right cyan */         /* outer right cyan */
    ">
          <i class="fa-fw fas fa-snowflake"></i>Artists We Support!
        </div>


        <div class="column">
          <div class="content">
            <img src="artists/youngfaith.jpg" height="123" width="140">
            <h3>youngfaith</h3>


          </div>
        </div>
        <div class="column">
          <div class="content">
            <img src="artists/THE FOOLE.png" height="123" width="140">
            <h3>The Foole</h3>


          </div>
        </div>




        <div class="column">
          <div class="content">
            <img src="artists/Jaime Orr.jpg" height="123" width="140">
            <h3>Jaime Orr</h3>



          </div>
        </div>





      </div>
    </div>

    <!-- text area -->

    <!-- Start Currently Playing -->
    <div align="right">
      <div style="height: 40px;width: 300px;  background-image: linear-gradient(+130deg, DarkTurquoise, DarkBlue);color:white;">
        <i class="fa-fw fas fa-snowflake"></i>Currently Playing!
      </div>
    </div>
    <!-- end currently playing -->
    <br />

  </head>

  <body></body>
  <!-- End text area -->

  <p class="round3"><span class="cc_streaminfo" data-type="song" data-username="coolvibes">Loading ...</span>
    <script language="javascript" type="text/javascript" src="http://boogie.vside-radio.com:2199/system/streaminfo.js"></script>
    <br /><img class="cc_streaminfo" data-type="trackimageurl" data-username="coolvibes" /><br /><a href="#" class="cc_streaminfo" data-type="trackbuyurl" data-username="coolvibes"></a><br />
  </p>



  <hr />
  <br />
  <div align="right">
    <div style="height: 40px;width: 300px;  background-image: linear-gradient(+130deg, DarkTurquoise, DarkBlue);color:white;">
      <i class="fa-fw fas fa-snowflake"></i>We Support Autism&Aspergers!
    </div>
  </div>

  <!-- end currently playing -->




</div>
</div>

<body>


  <p class="round3">
    <div align="right"><img src="images/featured.png" height="100px" width="100px"></div>
  </p>
  <br />
  <div align="right">
    <div style="height: 40px;width: 300px;  background-image: linear-gradient(+130deg, DarkTurquoise, DarkBlue);color:white;">
      <i class="fa-fw fas fa-snowflake"></i>We Support Epilepsy!
    </div>
  </div>
  <br />
  <div align="right"><img src="images/epilepsy.png" height="100px" width="100px"></div>



  <!-- end currently playing -->
  <!-- section -->
  <br>
  <br>
  <section>
    <br />
    <div align="center">
      <div style="height: 40px;width: 300px;  background-image: linear-gradient(+130deg, DarkTurquoise, DarkBlue);color:white;">
        <i class="fa-fw fas fa-snowflake"></i>Dolphin Of The Month!
      </div>
    </div>
    </head>
    <div class="gallery">
      <img src="images/cute.jpg" class="igal">
      </a>

      <div class="content">
        <center>
          <h2>winter</h2>
        </center>





      </div>
    </div>

    <!-- end section -->


    <body>
      <!-- End text area -->


      <!-- Start Coolvibes Couples Of The Month! -->
      <div align="right">
        <div style="height: 40px;width: 300px; background-image: linear-gradient(+130deg, DarkTurquoise, DarkBlue);color:white;">
          <h3>Couples Of The Month!</h3>
        </div>
      </div>
      <p>
        <div align="right">Fancy Having Your image here? Contact us today</div>
      </p>

      <div align="right"><img src="images/couples.png" height="100px" width="100px">
        <div align="right"><a href="mailto:[email protected]">Email:Coolvibes-Reloaded</a></div>
      </div>

      <br />
      <br />
      <div align="right">
        <p class="round3"></p>
      </div>
      <div align="right">
        <div style="height: 40px;width: 300px; background-image: linear-gradient(+130deg, DarkTurquoise, DarkBlue);color:white;">
          <h3>Shop!</h3>
        </div>
        <div align="right"><a href="https://coolvibes-reloaded.myspreadshop.co.uk"><img src="https://coolvibes-reloaded.com/images/shop.png" alt="HTML tutorial" style="width:200px;height:200px;"></a></div>

      </div>

      <br />
      <!-- Finish Coolvibes Babe Of The Month! -->
    </body>

    </html>

    <!-- End Programs -->

    <!-- Social -->
    <div align="right">
      <div style="height: 40px;width: 300px; background-image: linear-gradient(+130deg, DarkTurquoise, DarkBlue);color:white;">
        <h3>
          <div class="tree" id="mkm">Social!</div>
        </h3>
      </div>
    </div>


    <div align="right"><a href="https://facebook.com/coolvibesuk"><img src="https://img.icons8.com/nolan/64/facebook-f.png" style="width:100px;height:100px;"></a>
      <a href="https://www.instagram.com/coolvibesradio/?hl=en-gb"><img src="https://img.icons8.com/nolan/64/instagram-new.png" style="width:100px;height:100px;"></a></center>
      <a href="https://twitter.com/coolvibesradio"><img src="https://img.icons8.com/nolan/64/twitter-squared.png" style="width:100px;height:100px;"></a></center>
    </div>
    </div>
    </div>
    </div>

    <div align="center">
      <div style="height: 40px;width: 300px; background-image: linear-gradient(+130deg, DarkTurquoise, DarkBlue);color:white;">
        <i class="fa-fw fas fa-snowflake"></i>Films Coming Soon!
      </div>
    </div>

    <html>

      <head>
      </head>

      <body>
        <div align="center"><img src="images/jurassic_punk.jpg" height="200px" width="400px">
          <p>Steve ‘Spaz’ Williams is a pioneer in computer animation. His digital dinosaurs of</p>
          <p>Jurassic Park transformed Hollywood in 1993,</p>

          <div align="center">
            <div style="height: 40px;width: 300px; background-image: linear-gradient(+130deg, DarkTurquoise, DarkBlue);color:white;">
              <i class="fa-fw fas fa-snowflake"></i>Special!
            </div>
          </div>
        </div>
        <div align="center"><img src="images/dolphin.jpg" height="200px" width="200px">
          <p>
            <center>"how spectacular is this, bottom of the pool made into dolphins"
          </p>
          </center>
        </div>
        <br />


        <!-- Footer -->
        <footer class="w3-container w3-padding-32 w3-dark-grey">
          <div class="w3-row-padding">
            <div class="w3-third">

              <div align="center">
                <h3>
                  <p>other ways of tuneing in</p>
                </h3>
                <div id="cc_tunein">
                  <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.pls"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-pls.png" border="0" alt="Winamp, iTunes" title="Winamp, iTunes" /></a>
                  <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.asx"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-asx.png" border="0" alt="Windows Media Player" title="Windows Media Player" /></a>
                  <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.ram"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-ram.png" border="0" alt="Real Player" title="Real Player" /></a>
                  <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.qtl"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-qtl.png" border="0" alt="QuickTime" title="QuickTime" /></a>
                  <center>
                    <p>ways of tunein in</p>
                  </center>
                  <center>
                    <p>Download the Get Me Radio! Roku TV App from <a href="https://channelstore.roku.com/en-gb/details/b97490a8fb5758527be0396e43422e42/get-me-radio">here</a> and then search for Coolvibes Radio.
                  </center>
                  </p>
                  <center>
                    <p>Download the Get Me Radio! Android App <a href="https://play.google.com/store/apps/details?id=com.getmeradio.gmr">from here</a> and search for Coolvibes Radio on our Mobile App.
                  </center>
                  </p>
                  <div align="center-right">
                    <div style="position:relative; height:60px;">
                      <img src="images/playit.png" width="200" height="70">
                      <style="position:relative; top:-0px; right:-200px; width:200px; height:120px; border:none;" />
                    </div>
                  </div>
                </div>
              </div>

            </div>

          </div>
        </footer>

        <div> <strong>
            <center>© Copyright 2021 | 2024 <strong>Coolvibes Reloaded</center>
          </strong> | All Rights Reserved | Site by <a href="https://www.coolvibes-reloaded.com/" target="_blank">coolvibes</a>
        </div>
        </center>

        <!-- End page content -->
        </div>

        <script>
          // Script to open and close sidebar
          function w3_open() {
            document.getElementById("mySidebar").style.display = "block";
            document.getElementById("myOverlay").style.display = "block";
          }

          function w3_close() {
            document.getElementById("mySidebar").style.display = "none";
            document.getElementById("myOverlay").style.display = "none";
          }

        </script>

      </body>

    </html>
    <!-- partial -->

</body>

</html>
 
Joined
Mar 11, 2022
Messages
226
Reaction score
32
I don't know how you've structured your site, but as seen in the source code of "view-source:https://coolvibes-reloaded.com/" the code is messed up. Check it.

Also check your other sites. Because there is also a mismatch on "view-source:https://coolvibes-reloaded.com/tunein.html". So i am pretty sure there is issues on each site.

My guess: It's a PHP construct. Maybe same header, same footer but different bodys. Header file could be messed up. Footerfile as well. Maybe it's just the body file. I don't know. So check everything first because this is essential.
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
I don't know how you've structured your site, but as seen in the source code of "view-source:https://coolvibes-reloaded.com/" the code is messed up. Check it.

Also check your other sites. Because there is also a mismatch on "view-source:https://coolvibes-reloaded.com/tunein.html". So i am pretty sure there is issues on each site.

My guess: It's a PHP construct. Maybe same header, same footer but different bodys. Header file could be messed up. Footerfile as well. Maybe it's just the body file. I don't know. So check everything first because this is essential.
ok i have a structure here
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=
 </head>
 <body>
 
  </body>
</html>

is there anyway you could possible help guide me tidy my index up with this structure
 
Joined
Mar 11, 2022
Messages
226
Reaction score
32
I don't know what system you're using. Selfmade, some Open Source Solution or whatever. So unfortunately no.

My advice.

Go step by step. First create a test page with your header, nav and footer only. No further content

Then go and check that site (source code)

If everything is okay, than go through the included (or required) files within the body. If not, check your site without the footer file, than without the menu, than without the header. Go through each.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,707
Messages
2,569,343
Members
44,635
Latest member
Matt231

Latest Threads

Top