Serious problem with my CSS code

HTML-CSS
1

Hi there,

I am new to this forum and I am grateful to have been accepted as a new member.

I have a serious problem.

I have recently purchased a css/html/javascript menu creator which I intend to use to create a nice looking horizontal dropdown style menu for my blogger blog.

I have the menu created within the software and it gave me the html code which I then proceeded to paste into my blogs html file

Then this is what happened:

menu1
menu11366Ă—768 139 KB

WHAT WENT WRONG!?

I would be eternally grateful if somebody here could help me out as I am at my wits end.

Thanks,

Ryan

2

SOrry forgoyt to add the preview of what the menu should have looked like

Here it is:

menu
menu1366Ă—768 87.4 KB

Also, I can provide the html code if necessary

3

Go head and post your html and css codes

1 Like
4

Sorry shimphillip but this website won’t allow me to paste code that contains links nor can I attach the code as a text document. Could I perhaps send you an email with an attachment?

5

You can copy and paste your code inside the editor. Make sure it’s preformatted.

1 Like
6

We can only help if we can see the code!

1 Like
8 
<link rel="stylesheet" href="mbcsmbrdjz.css" type="text/css" />


<div id="mbrdjzebul_wrapper">
  <ul id="mbrdjzebul_table" class="mbrdjzebul_menulist css_menu">
  <li><div class="buttonbg"><a class="button_1">Home</a></div></li>
  <li class="with_submenu"><div class="arrow buttonbg" style="width: 99px;"><a>Tutorials</a></div>
    <ul class="gradient_menu gradient70">
    <li><a class="with_arrow" title="">How to Convert</a>
      <ul class="gradient_menu gradient215">
      <li><a href="https://www.digitalvideotools.org/2014/01/how-to-convert-avi-to-dvd-step-by-step.html" title="">AVI to DVD</a></li>
      <li><a href="https://www.digitalvideotools.org/2014/01/how-to-convert-avi-to-mp4-step-by-step.html" title="">AVI to MP4</a></li>
      <li><a href="https://www.digitalvideotools.org/2014/01/how-to-convert-mkv-to-avi-step-by-step.html" title="">MKV to AVI</a></li>
      <li><a href="https://www.digitalvideotools.org/2017/12/how-to-convert-mp4-to-amv-step-by-step.html" title="">MP4 to AMV</a></li>
      <li><a href="https://www.digitalvideotools.org/2018/03/how-to-convert-mp4-to-blu-ray-and-burn.html" title="">MP4 to Blu Ray</a></li>
      <li><a href="https://www.digitalvideotools.org/2018/03/how-to-convert-mp4-to-dvd-step-by-step.html" title="">MP4 to DVD</a></li>
      <li><a href="https://www.digitalvideotools.org/2019/03/how-to-convert-video-to-mp3-or-any.html" title="">Video to MP3</a></li>
      </ul></li>
    <li><a class="with_arrow" title="">How to Download</a>
      <ul class="gradient_menu gradient99">
      <li><a href="https://www.digitalvideotools.org/2019/03/how-to-download-any-dailymotion-video.html" title="">Dailymotion Videos</a></li>
      <li><a href="https://www.digitalvideotools.org/2019/03/how-to-download-any-deezer-song-and.html" title="">Songs from Deezer</a></li>
      <li><a href="https://www.digitalvideotools.org/2019/03/how-to-download-any-spotify-song-as-mp3.html" title="">Songs from Spotify</a></li>
      </ul></li>
    </ul></li>
  <li class="with_submenu"><div class="arrow buttonbg" style="width: 143px;"><a class="button_3">Recommended<br />Software</a></div>
    <ul class="gradient_menu gradient70">
    <li><a class="with_arrow" title="">Windows</a>
      <ul class="gradient_menu gradient244">
      <li><a href="https://store.avs4you.com/affiliate.php?ACCOUNT=ONLMETEC&AFFILIATE=37327&PATH=https%3A%2F%2Fwww.avs4you.com%2Favs-audio-converter.aspx%3FAFFILIATE%3D37327&AFFSRC=dropdownmenuac" title="">Audio Converter</a></li>
      <li><a href="https://store.avs4you.com/affiliate.php?ACCOUNT=ONLMETEC&AFFILIATE=37327&PATH=https%3A%2F%2Fwww.avs4you.com%2Favs-audio-editor.aspx%3FAFFILIATE%3D37327&AFFSRC=dropdownmenuae" title="">Audio Editor</a></li>
      <li><a href="https://store.movavi.com/affiliate.php?ACCOUNT=MOVAVI&AFFILIATE=37327&PATH=https%3A%2F%2Fwww.movavi.com%2Fgame-capture%2F%3FAFFILIATE%3D37327&AFFSRC=dropdownmenugamerec" title="">Gameplay Recorder</a></li>
      <li><a href="https://store.movavi.com/affiliate.php?ACCOUNT=MOVAVI&AFFILIATE=37327&PATH=https%3A%2F%2Fwww.movavi.com%2Fpowerpoint-to-video-converter%2F%3FAFFILIATE%3D37327&AFFSRC=dropmenuppttovid" title="">PowerPoint to Video</a></li>
      <li><a href="https://store.movavi.com/affiliate.php?ACCOUNT=MOVAVI&AFFILIATE=37327&PATH=https%3A%2F%2Fwww.movavi.com%2Fphoto-to-dvd-slideshow%2F%3FAFFILIATE%3D37327&AFFSRC=dropmenuslidewin" title="">Slideshow Maker</a></li>
      <li><a href="https://store.avs4you.com/affiliate.php?ACCOUNT=ONLMETEC&AFFILIATE=37327&PATH=https%3A%2F%2Fwww.avs4you.com%2Favs-video-converter.aspx%3FAFFILIATE%3D37327&AFFSRC=dropdownmenuvc" title="">Video Converter</a></li>
      <li><a href="https://store.avs4you.com/affiliate.php?ACCOUNT=ONLMETEC&AFFILIATE=37327&PATH=https%3A%2F%2Fwww.avs4you.com%2Favs-video-editor.aspx%3FAFFILIATE%3D37327&AFFSRC=dropdownmenuve" title="">Video Editor</a></li>
      <li><a href="https://store.avs4you.com/affiliate.php?ACCOUNT=ONLMETEC&AFFILIATE=37327&PATH=https%3A%2F%2Fwww.avs4you.com%2Favs-video-remaker.aspx%3FAFFILIATE%3D37327&AFFSRC=dropdownmenuvrm" title="">Video Remaker</a></li>
      </ul></li>
    <li><a class="with_arrow" title="">Mac</a>
      <ul class="gradient_menu gradient157">
      <li><a href="https://store.movavi.com/affiliate.php?ACCOUNT=MOVAVI&AFFILIATE=37327&PATH=https%3A%2F%2Fwww.movavi.com%2Faudioconvertermac%2F%3FAFFILIATE%3D37327&AFFSRC=dropac" title="">Audio Converter</a></li>
      <li><a href="https://store.movavi.com/affiliate.php?ACCOUNT=MOVAVI&AFFILIATE=37327&PATH=https%3A%2F%2Fwww.movavi.com%2Fvideoconvertermac%2F%3FAFFILIATE%3D37327&AFFSRC=dropvc" title="">Video Converter</a></li>
      <li><a href="https://store.movavi.com/affiliate.php?ACCOUNT=MOVAVI&AFFILIATE=37327&PATH=https%3A%2F%2Fwww.movavi.com%2Fmac-video-editor%2F%3FAFFILIATE%3D37327&AFFSRC=dropvemac" title="">Video Editor</a></li>
      <li><a href="https://store.movavi.com/affiliate.php?ACCOUNT=MOVAVI&AFFILIATE=37327&PATH=https%3A%2F%2Fwww.movavi.com%2Fmovavi-screen-capture-pro-mac%2F%3FAFFILIATE%3D37327&AFFSRC=dropscreencapmac" title="">Screen Recorder</a></li>
      <li><a href="https://store.movavi.com/affiliate.php?ACCOUNT=MOVAVI&AFFILIATE=37327&PATH=https%3A%2F%2Fwww.movavi.com%2Fslideshow-maker-for-mac%2F%3FAFFILIATE%3D37327&AFFSRC=dropslideshowmac" title="">Slideshow Maker</a></li>
      </ul></li>
    </ul></li>
  </ul>
</div>
<!-- Menus will work without this javascript file. It is used only for extra
     effects, improved usability, compatibility with very old web browsers
     and support for touch screen devices. -->
<script type="text/javascript" src="mbjsmbrdjz.js"></script>
9

To add to this, there maybe isn’t anything wrong with the code as there is a “Preview” option button within the software which when clicked opens up a browser tab which includes a fully interactive menu, just to show you that it works. Which it does.

10

Do you have the CSS code? Is the file linked correctly to the HTML?

11

All the software gives me is the html code. The template I used when designing the menu said that it was a CSS template. I have been to websites where you can convert the html to css but it didnt work out.

Also, I did not manually paste the code into the blogs html file. In the blogger . com control panel they allow you to “Add a gadget” whereby you can just give them the code and they put it into the appropriate place in your blogs html automatically.

Shown in the image below is what I mean. I clicked the “Add a gadget” in the Cross-Column box and pasted the code in.

crosscolumn
crosscolumn974Ă—469 59.2 KB

12

I don’t have experience using that tool but what I can tell is that it seems as if your html file is not linking to your css correctly. On top of the code you pasted you have your css link; is that the correct route mbcsmbrdjz.css? Try inspecting the html in your brower to see if the right classes are there.

13

I just noticed in your mbcsmbrdjz.css file that that is not css at all; that’s pure html! Again I don’t really know how the tool you are using works but if you were creating that from scratch you wouldn’t have a css file like that. You are missing the clases that give style to your menu.

<link rel="stylesheet" href="mbcsmbrdjz.css" type="text/css" />

This link should be bringing the css file. According to what you have the file is mbcsmbrdjz.css. Can you check that file and see what’s in it? href="mbcsmbrdjz.css" Is this the right route for that file?

14

Make sure to give a relative path as well when you are targeting your css file with href.