I’m messing around with HTML and I wanted to ask if it was possible to make a gallery within a gallery like so...
<ul class=‘gallery’>
<li class=‘image’><img></li>
<li class=‘image-collection’>
<ul class=‘sub-gallery’>
<li class=‘image’><img></li>
<li class=‘image’><img></li>
</ul>
</ul>
Better Use divs intead of UL LI.
Use sub-gallery div within the gallery div
Related
I'm using Bootstrap 4 inside Wordpress. For some reason, I cannot get lists items to display inline (horizontally) using only the class .list-inline on the list, like this:
<ul id="dances" class="list-unstyled list-inline">
<li>Plena</li>
<li>Danza</li>
<li>Bomba</li>
</ul>
It only works if I put the class .list-inline-item on the actual list items individually, like this below, which seems superfluous:
<ul id="animals" class="list-unstyled">
<li class="list-inline-item">Giraffes</li>
<li class="list-inline-item">Elephants</li>
<li class="list-inline-item">Donkeys</li>
</ul>
I'm new to Bootstrap, and I can't recall where I found the class .list-inline-item, because I can't find it in the Bootstrap 4 class list anywhere. For example on this cheatsheet.
Here is my fiddle so you can better see it in action.
(Please view the fiddle in a wide browser.)
Notice how the "Animals" list in the yellow displays horizontally, but the "Dances" in the pink do not. Why is this?
Besides of how Bootstrap works, if you don't want to put list-inline-item individually on each item, you can define the parent style to act as you want:
.list-inline{text-align:center}
.list-inline li{display:inline-block;margin:5px;}
<ul class="list-inline">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
Bootstrap 4
To display inline list : http://v4-alpha.getbootstrap.com/content/typography/#inline
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
As mentioned here : https://getbootstrap.com/docs/3.3/css/#inline, you'll have to use display: inline-block; to make the list inline. (Bootstrap example for list-inline is using type.less which provides each li element display: inline-block;).
I am trying to do this:
and mine looks like this:
Not the most beautiful thing.
My questions are:
We have a header with logo, search bar, menus and a button. How can i stack them all inline?
On the div with the background image - how can I position the headline like the one in the original site?
1) Have a look at the Navbar component documentation. Items should already be inline if implemented correctly. You can use the navbar-left and navbar-right classes to position items in the navbar.
2) You'll notice the large centre text starts at the same position as the navbar logo. This is because of the container class. I suggest you analyse some examples to see how to correctly implement the container.
After that, if you're still struggling add your styles.css to your pastebin post or better still create a Codepen - this would allow someone to be more helpful.
1- you can write float:left; or float:right; ? look for this float
2-for position an element you must create a relative div later inside create absolute div.. and you can specify settlement coordinates with top right bottom left.. look here position
I would say float is not good practice to use . Unless you really have no choice to use.
But based on how I look at it.
It's achievable using flex.
Put a display:flex on your main div
Then as for your other elements . Use display:flex-grow
It's advantageous using flex. , not only it wil solve your problem. It makes your site responsive.
Cheers
[![if you need all navigation item in one line. you have to make display:inline-block,for navigation.
change your code to:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 nav-wrap">
<ul class="pull-left"><li></li>
</ul>
<ul class="pull-left">
<li class="formSearch">
<input type="text" placeholder="Find Freelancers" id="searchButton">
</li>
<li>Browse</li>
<li>How it works</li>
</ul>
<ul class="pull-right">
<li>
<a href="#" class="signupHover">
<span class="icon signup"></span>
<a href="#">Sign Up
</a>
</a>
</li>
<li>
<a href="#" class="loginHover">
<span class="icon login"></span>
Login
</a>
</li>
</ul>
<button type="button" id="buttonHeader">Become a freelancer</button>
</div>
/*add below css*/
.nav-wrap ul li{display:inline-block;}][1]][1]
I have a horizontal navigation, and I want the last two item to be pushed to the right side of the container.
With only one item, I could simply float the last item of the navigation. But I want to apply this to two elements - and I have the constraint that their order has to be the same in HTML and for the viewer.
I tried the following, but this broke my javascript code which relies on
$('... a').parent().next().doSomething(...)
The code
<ul class="main main-nav">
<li class="first">Projekte</li>
<li>Aktuell</li>
<div class="push-right">
<li>Über uns</li>
<li>Kurse</li>
</div>
</ul>
Is there some obvious solution I don't see?
Any other shortcut?
You shouldn't place a div inside of a ul:
<ul class="main main-nav">
<li class="first">Projekte</li>
<li>Aktuell</li>
<li class="push-right">Über uns</li>
<li class="push-right">Kurse</li>
<!-- Or Flip them to maintain order -->
<li class="push-right">Kurse</li>
<li class="push-right">Über uns</li>
</ul>
CSS:
.push-right{
float:right;
}
I'm new to programming and I'm trying to build a website with various links in the same line. I'm using div so I got them all on the same block. The problem is that when I put all the links on float:left, the background color dissappears, but when I put the last link with float:center it shows the background as I want it.
Can anyone help me? Thanks in advance
This is what I'm using:
<div id="links" style="width:1250;height:450;background-color:#000000;text-align:center">
<ul type="none">
<li style="float:left;margin-right:100px;text-align:center">
Nosotros
</li>
<li style="float:left;margin-right:100px">
Desafío UNIMET
</li>
<li style="float:left;margin-right:100px">
Patrocinantes
</li>
<li style="float:left;margin-right:100px">
Contacto
</li>
</ul></div>
There is no such thing as float: center only left, right, none, and inherit. But the reason the parent container bg color is not showing is because when you float an element it no longer takes up space in its parent.
Either give your parent container a height (and specify pixels or some other unit of measure which you aren't doing now), or as a hack you can give the parent: "overflow: hidden;" css property.
Good luck in your learnings! Time and passion will get you everwhere!
EDIT: I highly recommend you get the book CSS Mastery by Andy Budd. It will teach you this and a lot more.
You had not given the unit to width, and height. Make it to px or em or as per what you need and it will work.
<div id="links" style="width:1250px;height:450px;background-color:#000000;text-align:center">
<ul type="none">
<li style="float:left;margin-right:100px;text-align:center">
Nosotros
</li>
<li style="float:left;margin-right:100px">
Desafío UNIMET
</li>
<li style="float:left;margin-right:100px">
Patrocinantes
</li>
<li style="float:left;margin-right:100px">
Contacto
</li>
</ul></div>
Try this http://jsfiddle.net/sLEYs/
Secondly, there is no such value center for float. http://www.w3schools.com/css/css_float.asp
I have a group of images which each have their own links. I want the images to be in a list (<ul><li> .. etc) and have each item have a different background-image.
Would I run into any issues with something like this?
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
<li class="4"></li>
<li class="5"></li>
<li class="6"></li>
</ul>
You would do better to write it like this
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
</ul>
Then you could add the background-image to either the a or the li.
However, you would style the as as display:block and give them the same height and width of the li. That way the background-image would show and the entire li would be clickable.
It is not valid HTML because the only thing allowed in an <ul> element is <li>s.
It's not valid HTML.
<!ELEMENT UL - - (LI)+ -- unordered list -->