I am trying align it so that it will be tests as heading, then gibberish 1, 2, 3 on same row under it. i don't know what I'm doing wrong. right now it only shows as gibberish 1 under it on the left. can someone please help me out?
<div class="container">
<div class="row" id="tests">
<div class="test col-md-12">
<h2>tests</h2><br>
<ul class="col-md-4">
<li>
gibberish 1
</li>
<li>
gibberish 1
</li>
<li>
gibberish 1
</li>
<li>
gibberish 1
</li>
</ul>
<ul class="col-md-4">
<li>
gibberish 2
</li>
</ul>
<ul class="col-md-4">
<li>
gibberish 3
</li>
</ul>
</div>
</div>
</div>
Wrap your ul on one div with class name row like
<div class="row">
<ul class="col-md-4">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
I am trying align it so that it will be tests as heading, then gibberish 1, 2, 3 on same row under it. i don't know what I'm doing wrong. right now it only shows as gibberish 1 under it on the left. can someone please help me out?
<div class="container">
<div class="row" id="tests">
<div class="test col-md-12">
<h2>tests</h2><br>
<div class="row"><!-- Add This -->
<ul class="col-md-4">
<li>
gibberish 1
</li>
<li>
gibberish 1
</li>
<li>
gibberish 1
</li>
<li>
gibberish 1
</li>
</ul>
<ul class="col-md-4">
<li>
gibberish 2
</li>
</ul>
<ul class="col-md-4">
<li>
gibberish 3
</li>
</ul>
</div> <!-- Add This -->
</div>
</div>
</div>
Related
So guys my questions says I am trying to make 4 DIV's being in the same line/row however.
Product Company (middle) Languages DIV4
text... text... text... text...
text... text... text... text...
it should look something like that... .I hope you do understand what i mean!
so this is my code: `
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Product</h2>
<li> Templates</li>
<li> Pricing</li>
</div>
<div class="col-md-4">
<h2>Company</h2>
<li>About Us</li>
<li>Contact us</li>
<li>Terms of Servise</li>
<li>Privacy policy</li>
</div>
<div class="col-md-4">
<h2>Language</h2>
<li>Englisch</li>
<li>German</li>
<li>Srpski</li>
</div>
<div class="col-md-4">
<li>facebook</li>
<li>kaaa</li>
<li>kaaa</li>
</div>
</div>
</div>
First make sure that your markup is valid. E.g. for your li tags the ul tag was missing.
If you want to display 4 divs, you need the class col-md-3 instead of col-md-4. Bootstrap is using a grid system with a default column count of 12. If you need 4 columns you have to use 12/4 = 3 meaning col-md-3.
The md stands for medium. So for small devices, the columns break and are displayed on top of each other. Watch the following example in fullscreen, to see the columns standing next to each other.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3">
<h2>Product</h2>
<ul>
<li> Templates</li>
<li> Pricing</li>
</ul>
</div>
<div class="col-md-3">
<h2>Company</h2>
<ul>
<li>About Us</li>
<li>Contact us</li>
<li>Terms of Servise</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="col-md-3">
<h2>Language</h2>
<ul>
<li>Englisch</li>
<li>German</li>
<li>Srpski</li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li>facebook</li>
<li>kaaa</li>
<li>kaaa</li>
</ul>
</div>
</div>
</div>
Could be a screen size issue and also sytax issue
Bootstrap only allows 12 columns per row, so each column needs "width" of 3, col-md-3
Then since the size is set to md the columns widths are set up for a medium size screen
With col-xs-3 it will make the columns as small as they can go without overflowing to the next row
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-3">
<h2>Product</h2>
<ul>
<li> Templates
</li>
<li> Pricing
</li>
</ul>
</div>
<div class="col-md-3 col-xs-3">
<h2>Company</h2>
<ul>
<li>About Us
</li>
<li>Contact us
</li>
<li>Terms of Servise
</li>
<li>Privacy policy
</li>
</ul>
</div>
<div class="col-md-3 col-xs-3">
<h2>Language</h2>
<ul>
<li>Englisch
</li>
<li>German
</li>
<li>Srpski
</li>
</ul>
</div>
<div class="col-md-3 col-xs-3">
<h2>Share</h2>
<ul>
<li>facebook
</li>
<li>kaaa
</li>
<li>kaaa
</li>
</ul>
</div>
</div>
</div>
check this snippet
.row {
display: flex;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Product</h2>
<ul>
<li> Templates
</li>
<li> Pricing
</li>
</ul>
</div>
<div class="col-md-4">
<h2>Company</h2>
<ul>
<li>About Us
</li>
<li>Contact us
</li>
<li>Terms of Servise
</li>
<li>Privacy policy
</li>
</ul>
</div>
<div class="col-md-4">
<h2>Language</h2>
<ul>
<li>Englisch
</li>
<li>German
</li>
<li>Srpski
</li>
</ul>
</div>
<div class="col-md-4">
<h2>div4</h2>
<ul>
<li>facebook
</li>
<li>kaaa
</li>
<li>kaaa
</li>
</ul>
</div>
</div>
</div>
Hope this helps
I use foundation 6 to build my website. Only a problem occurs when I shrink the size of my window.
Picture of my website
Does somebody know how to fix this?
An answer is appreciated.
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#"><b>Pimg</b>
</a>
</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li> <div class="entypo-home entipo"></div></li>
<li> <div class="entypo-picture entipo"></div></li>
<li> <div class="entypo-upload entipo"></div></li>
<li> <div class="entypo-user entipo"></div></li>
</ul>
<ul class="left">
<li>Log out</li>
<li class="has-form">
<div class="row collapse">
<div class="medium-8 columns">
<input type="text" placeholder="Search...">
</div>
<div class="medium-4 columns">
Search
</div>
</div>
</li>
</ul>
</section>
</nav>
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>
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.
I was reading the tutorial described here http://foundation.zurb.com/docs/components/topbar.html for creating a horizontal form in the top nav bar.
I downloaded the foundation zip and added in the index.html the following:
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>Top Bar Title </h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-form">
<div class="row collapse">
<div class="small-8 columns">
<input type="text">
</div>
<div class="small-4 columns">
Search
</div>
</div>
</li>
</ul>
</section></nav>
What I am getting is this:
while I am expection this:
Any idea why the input text and the search button are not aligned?