Jump to content

bad CSS and HTML


chattyfish

Recommended Posts

Hello, 

My home page has Sticky Notes and they keep affecting my Top Menu, making the Top Menu look like Sticky Notes, but without content, just top menu’s name in it. I believe that there is something wrong with my CSS (I am not a pro at HTML, just copy & paste stuff, though some images and texts have been added).

 Second, on hover sticky notes are underlined and that is not supposed to happen.

 I love my sticky notes, they look pretty good, I spent a lot of effort on making them look good  but still cannot make them being friendly to my Top Menu, as well as to the Side Modules. Sticky notes turn all my menus into a real mess (see images attached).

 Images of my problem are in the attachment.

 Any help ideas are much appreciated

 

 forum1.jpg.a9876a4efed05efcd21b81d74d8dc837.jpg

 

forum2.thumb.jpg.03b76423e4691386848c0abf03407484.jpgThanks in advance

 

Edited by chattyfish
Link to comment
Share on other sites

IT is not UL, LI specific, it will target all UL and LI, so if a menu uses these elements, then it will be applied to that as well. by adding a class name

<ul class="sticky-notes">

then by adding this class name to css that makes up this sticky notes effect. For example:

ul.sticky-notes li a{
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}

ul.sticky-notes li a:hover,ul.sticky-notes li a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}

You now restrict this effect to ul that use class name of 'sticky-notes', and the child li element of this parent ul.

Link to comment
Share on other sites

The reason it does not show is because there is no content TEXT to show, the menu link are there, but are empty


* {
    margin: 0;
    padding: 0;
}
body {
    background: #666 none repeat scroll 0 0;
    color: #fff;
    font-family: arial,sans-serif;
    font-size: 100%;
}
h2, p {
    font-size: 100%;
    font-weight: normal;
}
ul, li {
    list-style: outside none none;
}
ul.stick-notes {
    overflow: hidden;
    padding: 3em;
}
ul.sticky-notes li a {
    background: #ffc none repeat scroll 0 0;
    box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
    color: #000;
    display: block;
    height: 380px;
    padding: 1em;
    text-decoration: none;
    transition: -moz-transform 0.15s linear 0s;
    width: 200px;
}
ul.sticky-notes li {
    float: left;
    margin: 1em;
}
ul.sticky-notes li h2 {
    font-size: 140%;
    font-weight: bold;
    padding-bottom: 10px;
}
ul.sticky-notes li p {
    font-family: "Reenie Beanie",arial,sans-serif;
    font-size: 180%;
}
ul.sticky-notes li a {
    transform: rotate(-6deg);
}
ul.sticky-notes li:nth-child(2n) a {
    background: #cfc none repeat scroll 0 0;
    position: relative;
    top: 5px;
    transform: rotate(4deg);
}
ul.sticky-notes li:nth-child(3n) a {
    background: #ccf none repeat scroll 0 0;
    position: relative;
    top: -5px;
    transform: rotate(-3deg);
}
ul.sticky-notes li:nth-child(5n) a {
    position: relative;
    top: -10px;
    transform: rotate(5deg);
}
ul.sticky-notes li a:hover, ul li a:focus {
    box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.7);
    position: relative;
    transform: scale(1.25);
    z-index: 5;
}
ol {
    text-align: center;
}
ol li {
    display: inline;
    padding-right: 1em;
}
ol li a {
    color: #fff;
}
 <ol>
    <li><a href="step1.html">Step1</a></li>
    <li><a href="step2.html">Step2</a></li>
    <li><a href="step3.html">Step3</a></li>
    <li><a href="step4.html">Step4</a></li>
    <li><strong>????</strong></li>
    <li><a href="#">#</a></li>
  </ol>
  <ul class="sticky-notes">
    <li>
      <a href="#">
        <h2>Massive Graylings from Secret Rivers and Lakes of Northern Europe</h2>
        <p>Are you ready for the fishing trip of a lifetime?</p>
        <img alt="lavvu tents" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(18, 3, 239, 0.68)" src="images/front/huge_grayling.png">
        <p>&nbsp;</p>
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/icons/arrow22.png">
        </a>
    </li>
    <li>
      <a href="#">
        <h2 style="font-family: arial; font-size: 19px; color:#000000; text-shadow: 1px 1px 30px #ffffff">Summer. VIP Fly Fishing Adventure. Finland</h2>
        <p style="font-family: arial; font-size: 12px; text-color: #000000">Getting you here, accommodation, best fishing, foot adventure, rafting</p>
        <p></p>
        <img alt="lavvu tents" style="box-shadow: 5px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgb(239, 7, 71)" src="images/front/vip_tours2.png">
        <p>&nbsp;</p>
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/icons/arrow22.png">
      </a>
    </li>
    <li>
      <a href="#">
        <h2 style="font-family: arial black; font-size: 18px; color:#0026ff; text-shadow: 1px 1px 1px #000000">FINLAND. Enjoy the comfort fishing at Kilpisjärvi's Fishing Lodge! All Seasons!</h2>
        <p style="font-family: verdana; font-size: 10px; text-color: #000000">Using the lodge as the base, different fly fishing spots everyday, river lunch, lodge café, sauna</p>
        <p style="font-family: verdana; font-size: 8px; text-color: #000000">7-15 days. 2 pers: €2,700/pers, 3 pers: €1,850/pers, 4 pers: €1,450/pers</p>
        <img alt="lavvu tents" style="box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2), 0 5px 10px 0 rgba(236, 4, 14, 0.68)" src="images/front/lodge2.png">
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/icons/arrow22.png">
      </a>
    </li>
    <li>
      <a href="#">
        <h2 style="font-family: arial black; font-size: 18px; color:#ffd800; text-shadow: 1px 1px 20px green, 0 0 15px green, 0 0 10px darkgreen">SUMMER. NORWAY, Kautokeino. Arctic Char Extreme</h2>
        <p>UP NORWEGIAN MOUNTAINS LAKES. REAL WILDERNESS WATERS.</p>
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/front/arctic_char3.png">
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/icons/arrow22.png">
      </a>
    </li>
    <li>
      <a href="#">
        <h2 style="font-family: oswald; font-size: 22px; color:#ffffff; text-shadow: 1px 1px 20px green, 0 0 25px green, 0 0 20px darkgreen">FINLAND, Enontekiö. River Rafting</h2>
        <p style="font-family: verdana; font-size: 12px; text-color: #000000">Variety of activities and challenge. A peaceful trip while watching the beautiful nature, or go on a more adventurous ride!</p>
        <img alt="lavvu tents" style="box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2), 0 5px 10px 0 rgba(236, 4, 14, 0.68)" src="images/front/rafting2.png">
        <p>&nbsp;</p>
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/icons/arrow22.png">
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Arctic Ocean Trout. NORWAY. Lyngen, Skibotn. Starting from Finland</h2>
        <p style="font-family: verdana; font-size: 11px; text-color: #000000">an hour ride from/to Kilpisjärvi, Finland, fishing gear, snacks and coffee, tea</p>
        <img alt="lavvu tents" style="box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2), 0 5px 10px 0 rgba(25, 4, 236, 0.68)" src="images/front/arctic_trout3.png">
      <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/icons/arrow22.png">
      </a>
    </li>
    <li>
      <a href="#">
        <h2 style="font-family: oswald; font-size: 28px; color:#ffd800; text-shadow: 1px 1px 20px #c50909, 0 0 15px #cc0710, 0 0 10px #ca07a9">Summer Tours</h2>
        <p>Please, check our SUMMER activities and prices</p>
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/front/summer_rates.png">
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/icons/arrow22.png">
        <p>&nbsp;</p>
        <p style="font-family: verdana; font-size: 10px; text-color: #0026ff">operating in Finland, Sweden and Norway since 2006</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2 style="font-family: oswald; font-size: 28px; color:#ffffff; text-shadow: 2px 3px 8px #000000">Winter Tours</h2>
        <p>Please, check our WINTER activities and prices</p>
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/front/grayling_land_gif.gif">
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/icons/arrow22.png">
        <p>&nbsp;</p>
        <p style="font-family: verdana; font-size: 10px; text-color: #0026ff">operating in Finland, Sweden and Norway since 2006</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2 style="font-family: arial; font-size: 19px; color:#000000; text-shadow: 1px 1px 30px #ffffff">FINLAND. Mountain Lake Fishing</h2>
        <p style="font-family: arial; font-size: 12px; text-color: #000000">Enjoy peaceful arctic and wild nature views with a cup of coffee. Meals are served by an open fire outdoors or in the ice fishing hut</p>
        <p></p>
        <img alt="lavvu tents" style="box-shadow: 5px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgb(239, 7, 71)" src="images/front/winter_fishing3.png">
        <p>&nbsp;</p>
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/icons/arrow22.png">
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Ice Fishing Trip To Raittijärvi Sami Village</h2>
        <p>Situated about 40 kilometres from Kilpisjärvi, Finland in the middle of real wilderness</p>
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/front/winter_fishing4.png">
        <p>&nbsp;</p>
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/icons/arrow22.png">
      </a>
    </li>
    <li>
      <a href="#">
        <h2>VIP Ice Fishing Tour. Finland, Kilpisjärvi!</h2>
        <p style="font-family: arial; font-size: 12px; text-color: #000000">Fine dining, and comfortable accommodations. Lodge, Sauna. Wild Grayling, Trout, Arctic Char</p>
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/front/winter_vip_fishing.png">
        <p>&nbsp;</p>
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/icons/arrow22.png">
      </a>
    </li>
    <li>
      <a href="#">
        <h2>5 DAYS do-it-yourself Ice Fishing Adventure</h2>
        <p style="font-family: arial narrow; font-size: 13px; text-color: #000000">Located far away from any settlement. Distance to the nearest road is about 45 km! This lake inhabits only Arctic Char!</p>
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/front/winter_fishing6.png">
        <img style="display: block; margin-left: auto; margin-right: auto;" alt="lavvu tents" src="images/icons/arrow22.png">
        <p style="font-family: arial narrow; font-size: 11px; text-color: #000000">Accommodation in the ice fishing hut on the lake, sauna, cabin heater, cooking equipment, guide for the best fishing spots</p>
      </a>
    </li>
  </ul>

 

Link to comment
Share on other sites

dsonesuk, thank you so much for your friendly expertise.

I am not big on coding, just copy and paste stuff. I copied sticking notes’ code from https://code.tutsplus.com/tutorials/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5--net-13934 … then checked the code on Notepad++ and just pasted it into my website’s front page. Then began editing sticky notes right in there, adding text and images. BUT, when top menu was activated it turned my front page sticky notes’ size. No menu works the way it should, both top menu and side menus. 

Now, I am about to discard sticky notes and just use still images instead of them, though they look really great and I was sort of proud about my 4-day work. 

My website is Joomla 3 version http://mygraylings.com/index.php/en/

 

Link to comment
Share on other sites

I know Joomla very well, and like most navigation created these days, not specific to Joomla I might add, it uses UL and LI because on how these are structured. It is perfect for menus, and menus with submenus, and  because sticky notes targets ALL UL and LI elements, and not to specific UL and LI elements using specific identifier like id or class name reference, all these menus will be affected too. even an ordinary unordered list on its own will be affected. It maybe a good effect, but it is ill thought out, that leads to the problems you are encountering.

Link to comment
Share on other sites

No! just use the code I supplied, it only targets those elements ul, li whose UL element has a class 'sticky-notes', If you wish to target any element within this element, for instance a h3 element, just make sure you begin with '.sticky-notes' where '.' refers to a class name  ('#' refers to id reference) like

.sticky-notes h3 {color: lime; }

This will only target child h3 elements whose parent (UL) has class of 'sticky-notes'

<ul class="sticky-notes">

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...