make menu not mess up my page lay-out - html

So i've got a drop-down menu on some elements in the middle of my page. This menu works with purely html and css. Now without any hover the menu items look like this: http://prntscr.com/3es3n8.
With hover however it looks like this: http://prntscr.com/3es3y2.
Now the hover itself works fine and i can style the child elements just fine. My question would be if it was possible for the child element to actually hover over the other items. I know z-index is supposed to do something like this but im not sure how to implement that. I'll try to post as much code as possible but the site is already in ModX.
I'm sorry about all the extra code but the general idea of the situation should be there. http://jsfiddle.net/C8sBp/1/
<div class="row">
<div class="small-12 large-12 columns">
<ul class="small-block-grid-1 large-block-grid-4">
<li>
<div class="icon">
<a href="producten/producten/" title="Kunsmest">
<img src="/i/overview/Fotolia_45201390_XS.jpg" alt="Kunstmest">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/producten/" title="Kunsmest">
Kunsmest
</a>
<ul>
<li>
<a href="#" title="lorem">
</a><ul><li class="first">test</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Kunsmest
</div>
</li>
<li>
<div class="icon">
<a href="producten/zaden" title="Zaden">
<img src="/i/overview/zadenwb.png" alt="Zaden">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/zaden" title="Zaden">
Zaden
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Zaden
</div>
</li>
<li>
<div class="icon">
<a href="producten/handelsartikelen" title="Handelsartikelen">
<img src="/i/overview/artikelenwb.png" alt="Handelsart">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/handelsartikelen" title="Handelsartikelen">
Handelsartikelen
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Handelsartikelen
</div>
</li>
<li>
<div class="icon">
<a href="producten/veevoer/" title="Veevoer">
<img src="/i/overview/veevoerwb.png" alt="Veevoer">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/veevoer/" title="Veevoer">
Veevoer
</a>
<ul>
<li>
<a href="#" title="lorem">
</a><ul><li class="first">pietjes eten</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Veevoer
</div>
</li>
<li>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="diensten" title="Diensten">
Diensten
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Diensten
</div>
</li>
</ul>
</div>
</div>

There are a variety of solutions, I've paired back your code a little to make the solution a little clearer, but have a look at this
http://codepen.io/dave_agilepixel/pen/cDtLk
I wouldn't repeat the item, or have the wrapper around the if you can avoid it, if you need the h2 for styling then use css or change the code to something like
<nav>
<ul>
<li><h2>Object</h2></li>
</ul>
</nav>
Also with the icons it might be easier to have those as CSS background images and use padding/background-position to set them in the design.
I hope that helps, in my example I've used position absolute and left to get the sub menu to work, but you could use display:none; or some other methods, if you use a combination of opacity and top then you can also add in css3 transitions to make it look jazzy.

Related

display list that in each row 1 li

How can I display the list that in each line I will have one li and not 2 li in one row?
<div class="recent_questions promoted_questions pblock">
<ul class="vertical_menu main_questions">
<li>
<span class="header">
corona<img src="photos/Covid.gif"></span>
<span class="questions"><span class="big_image">
<img class="photo_sub" src="photos/covid.jpg"/></span></span>
</li>
<li></li>
<li></li>
</ul>
</div>
You can simply wrap your images into individual <li> elements, and they will appear below each other:
<div class="recent_questions promoted_questions pblock">
<ul class="vertical_menu main_questions">
<li>
<span class="header">
<a href="covid.php">
corona
<img src="photos/Covid.gif">
</a>
</span>
</li>
<li>
<span class="questions">
<span class="big_image">
<img class="photo_sub" src="photos/covid.jpg" />
</span>
</span>
</li>
</ul>
</div>

Nav on top of background img

I am trying to put my navigation bar on top of my background image, and I would like to know what is the best and cleanest way to do so using the code below, here is my code:
<body>
<header>
<div class="home_page">
<div class="header">
<h1 class="title">The Best Coffee Shop in Chicago</h1>
<h2 class="sub_title">Life Is Too Short For Bad Coffee</h2>
<h1 class="home_nav_line"></h1>
</div>
<figure>
<img src="home_coffee_img.jpg" height="100%" width="100%" alt="Coffee Beans" style="height:100%;">
</figure>
</div>
</header>
<!--Menu-->
<element class="zoom">
<ul class="col-sm-8"><!--Screen size of menu-->
<li> <a class="active" href="index.html">HOME</a></li><!--The active class means it will tell the user what page they are on-->
<li> ABOUT</li>
<li> NEWS</li>
<li> CONTACT</li>
</ul>
</element>
</body>
You can add your the image as a background image using css. Apply it to the element that is wrapping the header and the navigation elements, in this case that would be body.
body {
background-image: url(YOUR_IMAGE_PATH)
}
See the example in the code snippet.
body {
background-image: url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2018/04/15/16/china-coffee-cup.jpg?w968h681);
}
<body>
<header>
<div class="home_page">
<div class="header">
<h1 class="title">The Best Coffee Shop in Chicago</h1>
<h2 class="sub_title">Life Is Too Short For Bad Coffee</h2>
<h1 class="home_nav_line"></h1>
</div>
</div>
</header>
<!--Menu-->
<element class="zoom">
<ul class="col-sm-8">
<!--Screen size of menu-->
<li> <a class="active" href="index.html">HOME</a></li>
<!--The active class means it will tell the user what page they are on-->
<li> ABOUT</li>
<li> NEWS</li>
<li> CONTACT</li>
</ul>
</element>
</body>

thymeleaf HTML error

I'm trying to create a webpage using Thymeleaf.Everything is set up right I manage to get into the homepage and then trying to use a link to another page but I get the following error:
"Exception parsing document: template="lor1", line 70 - column 68"
and "lineNumber: 70; columnNumber: 68; Element type "a" must be followed by either attribute specifications, ">" or "/>".
However the homepage is using and is working perfectly.
Here's the code:
<title>League Of Ronnie</title>
<link href="../../../resources/css/style.css"
th:href="#{/resources/css/style.css}" rel="stylesheet" />
</head>
<body>
<div id="background">
<div id="header">
<div>
<div>
<a th:href="#{/}" class="logo"><img th:src="#{/resources/images/logo.png}" alt="" /></a>
<ul>
<li>
home
</li>
<li>
the world
</li>
<li>
the game
</li>
<li>
about
</li>
<li class="selected">
the ronnie
</li>
</ul>
</div>
</div>
</div>
<div id="body">
<div>
<div>
<div class="blog">
<div class="content">
<ul>
<li>
<div class="header">
<b id="a1">Warrior</b><span>STRENGTHSWORDPLATE</span>
</div>
<div class="article">
<img id="im1" src="images/img1.jpg" alt=""/>
<p>
You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.<br/>
read more
</p>
</div>
</li>
</ul>
</div>
<div class="sidebar">
<div>
<span>Classes</span> <span>Servants</span>
</div>
<ul>
<li>
Warrior
<span><a href="2.html
" id="b2">STRENGTH</a>SWORDPLATE</span>
</li>
<li>
Paladin
<span>JUSTICEHAMMERPLATE</span>
</li>
<li>
Assassin
<span>AGILITYDAGGERLEATHER</span>
</li>
<li>
Ranger
<span>FOCUSBOWLEATHER</span>
</li>
<li>
Mage
<span>SPELLPOWERSTAFFCLOTH</span>
</li>
<li>
Priest
<span>SPIRITRELICCLOTH</span>
</li>
<li>
Warlock
<span>CURSESCEPTERCLOTH</span>
</li>
<li>
Warlord
<span>FURYAXEPLATE</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div>
<ul>
<li id="facebook">
facebook
</li>
<li id="twitter">
twitter
</li>
<li id="googleplus">
googleplus
</li>
</ul>
<p>
# copyright 2012. all rights reserved.
</p>
</div>
</div>
</div>
<script type="text/javascript" th:src="#{/resources/lor.js}"></script>
</body>
</html>
Thanks in advance!
Your error comes from a missing space between the href attribute (2.html) and the id attribute (b7).
It should be :
<span>JUSTICEHAMMERPLATE</span>

How to style 3 unorderd lists horizontally in 1 div

How Can I display 3 unordered lists horizontally next to each other?
The 3 ul are wrapped in 1 div called 'tax'.
I've tried the following, but it's not showing correctly.
I know I can solve this by wrapping each ul with a div, but I don't want to use extra markup when it's not necessarily.
Example:
http://jsfiddle.net/Eric87/LKp69/13/
HTML
<div id="tax">
<hr>
<h2>
Recent News </h2>
<ul id="recent-news">
<li>
<a href='#'>
new release </a>
› </li>
<li>
<a href='#'>
testing titel </a>
› </li>
</ul>
<h2>
Categories </h2>
<ul id="categories">
<li>
<a href="#">
Audio </a>
› </li>
<li>
<a href="#">
Uncategorized </a>
› </li>
</ul>
<h2>
Archives </h2>
<ul id="archives">
<li>
<a href=''>
August 2013 </a>
</li>
<li>
<a href='#'>
July 2013 </a>
</li>
<li>
<a href='#'>
May 2013 </a>
</li>
<li>
<a href='#'>
December 2012 </a>
</li>
</ul>
CSS
#tax {
margin-top:100px;
}
#tax ul {
width:33%;
list-style:outside;
}
#categories,#archives,#recent-news {
display:inline-block;
float:left;
}
Create a wrapper for each item and assign each item a class called "pull-left". And then, add style below:
<div class="pull-left">
<h2>Title</h2>
<ul>
<li>...</li>
</ul>
</div>
<div class="pull-left">
<h2>Title</h2>
<ul>
<li>...</li>
</ul>
</div>
<div class="pull-left">
<h2>Title</h2>
<ul>
<li>...</li>
</ul>
</div>
Here is your css code for pull-left class:
.pull-left { float: left; }
You're trying to align two elements horizontally, both the h2 and the ul that goes with it, that's why it's not working 'as expected'. The only way to solve this, to make both those elements act as one, is to add an extra markup element around both of them, and apply regular horizontal layout rules to that element. I'd recommend a section for this, like:
<section id="archives">
<h2>Section title</h2>
<ul><!-- bunch of list items --></ul>
</section>
This isn't "unnecessary extra markup", this is required markup if you want 2 elements to layout as 1.
HERE IS A WORKING LIVE DEMO: CLick HERE
i have a add a extra <div> for all <ul> and put it to float:left:
basically its all
here create one wrapper div for including with header tag and ul. For example here I create wrapper div with name of "test".
<div id="tax">
<div class="test">
<h2>
Recent News </h2>
<ul id="recent-news">
<li>
<a href='#'>
new release </a>
› </li>
<li>
<a href='#'>
testing titel </a>
› </li>
</ul>
</div>
<div class="test">
<h2>
Categories </h2>
<ul id="categories">
<li>
<a href="#">
Audio </a>
› </li>
<li>
<a href="#">
Uncategorized </a>
› </li>
</ul>
</div>
<div class="test">
<h2>
Archives </h2>
<ul id="archives">
<li>
<a href=''>
August 2013 </a>
</li>
<li>
<a href='#'>
July 2013 </a>
</li>
<li>
<a href='#'>
May 2013 </a>
</li>
<li>
<a href='#'>
December 2012 </a>
</li>
</ul>
</div>
</div>
Css :
<style type="text/css">
#tax {
margin-top:100px;
}
#categories,#archives,#recent-news {
display:inline-block;
float:left;
}
.test{width:33%;
float:left;}
</style>
see demo
For horizontal you basically have to use div to wrap ul.
http://jsfiddle.net/5d5eM/
div {
width: 50px;
border: 1px solid #000;
float: left;
}
br { clear: left; }

HTML simple anchor link doesn't work in Chrome/Firefox

I'm making a portfolio page here (http://198.96.94.51/v2/) and while clicking on the navigationMenu links on the side really fast, they don't seem to redirect to the proper anchor (some of them don't move the page at all). I've initialized my anchor tags like this
<ol class="curtains">
<li id="home" class="cover">
<a id="home"></a>
<header data-fade="550" data-slow-scroll="3">
<h1>John Smith</h1>
<h2>HOBBY/JOB TITLE</h2>
</header>
</li>
</ol>
My navbar code -
<ul id="navigationMenu">
<li>
<a class="home" href="#home">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="#about">
<span>About</span>
</a>
</li>
<li>
<a class="projects" href="#projects">
<span>Projects</span>
</a>
</li>
<li>
<a class="resume" href="#resume">
<span>Resume</span>
</a>
</li>
<li>
<a class="contact" href="#contact">
<span>Contact us</span>
</a>
</li>
</ul>
But just clicking on the navbar, or even typing #home into the address bar won't bring the browser back to the top sometimes. Is there anything I'm doing wrong?
Ids identify anchor points so they must be unique.
But if you just want to go to the top of the page you should try a simple # as value for your href attribute.
A link to the id of e.g. a <div> tag would lead you to this <div> tag.
<div id="anchor"></div>
this fiddle shows you: http://jsfiddle.net/aYGFR/1/
You can give like this: <a id="home" href="home.php">Home</a>