Display <div> inline with list item - html

Given a following structure:
<div class="index">a</div>
<div class="li">
<div class="index">b</div>
<div class="li">
some text
</div>
</div>
Is there a way to display it as this:
a b some text
and not:
a
b
some text
The problem is that I am not allowed to change HTML markup, so it's a pure CSS question.
EDIT:
"li" must have display set to list-item or follow the list hierarchy in terms of margins on the left side

You can float .index and .li
.li { display: list-item; }
.index, .li {
float: left;
}
<div class="index">a</div>
<div class="li">
<div class="index">b</div>
<div class="li">
some text
</div>
</div>

Have you tried editing the css for the li class?
.li { display: table-cell; }
This is where I found that answer: Remove padding from unordered list
If that doesn't work, could you post the relevant sections of the CSS you are working with as well?

Related

How do you make a div wrap around floating elements?

What I want
I am trying to create a navigation bar for a mobile site. I want a dark blue navigation div to house a menu button and a search form.
What I get
My wrapper div just appears as a thin dark blue line and the navigation divs within just exist outside of the wrapper.
The code
<div id="mobileNavBar">
<div style="float:left;width:20%">
<span class="menu-trigger"><i class="fas fa-bars menuFA fa-2x"></i>
</span>
</div>
<div style="float:right;width:80%">
<?php get_search_form(); ?>
</div>
<div style="clear:both"></div>
</div>
Here is CSS for the navigation div
#mobileNavBar{
background-color: #4d94ff;
border:1px solid #4d94ff;
height:auto;
}
The image
Below is an image of my mobile site, ignore the large black boxes, that's just me hiding content. There's actually a logo there and written content.
As you can see, my navigation div is a thin darker blue line and the navigation contents are underneath.
What I tried
Well after looking at similar questions on this website, I was led to believe that the issue is that my elements are floating and therefore I need to add:
<div style="clear:both"></div>
However this doesn't seem to have an impact.
How, could I get the navigation div to wrap itself around the image for the menu and the search bar? Or rather, how do I get a div to wrap around floating divs?
There is a CSS hack for clearing all your internal floats.
Add class "clearfix" to your div:
<div id="mobileNavBar" class="clearfix">
<div style="float:left;width:20%">
<span class="menu-trigger"><i class="fas fa-bars menuFA fa-2x"></i>
</span>
</div>
<div style="float:right;width:80%">
<?php get_search_form(); ?>
</div>
<div style="clear:both"></div>
</div>
CSS code:
.clearfix {
overflow: auto;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
So, this will clear all the floats inside an existing div.
You could have created style with your div id 'mobileNavBar' as well but it is better to create a reusable class.
Please check https://www.w3schools.com/howto/howto_css_clearfix.asp for more clarity.
Floats can be tricky. Can you use flexbox?
display:flex will make this simpler :)
css:
#mobileNavBar {
background-color: #4d94ff;
border: 1px solid #4d94ff;
display: flex;
}
html:
<div id="mobileNavBar">
<div style="width:20%;">
<span class="menu-trigger"><i class="fas fa-bars menuFA fa-2x">first div</i></span>
</div>
<div style="width:80%">
second div
</div>
</div>
* markup for outline and padding not shown
Apply following class to floated elements parent.
.clear:after{
content: ' ';
display: table;
clear: both
}
Or you can add extra element in HTML
<div>
<div style="float: left;">Sidebar</div>
<div style="float: right;">Content</div>
<div style="clear: both;"></div><!-- Clear the float -->
</div>
above solution solve your problem but my opinion is you can use flex to grid for this kind of layout.

How to put Nav, Title and Image in one line?

My end result is to have my nav on both the right and left, with the the title between them with an image between the title. I use a-hrefs in a div as the links with uls and lis as my subnavs.
What are the options to keep it all on one line and the image centered vertically with the text.
Example:
<div>
<a>LINK</a>
<a>LINK</a>
<h1>TITLE</h1>
<img>
<h1>TITLE</h1>
<a>LINK</a>
<a>LINK</a></div>
I have tried to slip the div up ending the first part of the div where the < h1> goes, then picking it back up after the second title < /h1>.
Example:
<div>
<a>LINK</a>
<a>LINK</a>
</div>
<h1>TITLE</h1>
<img>
<h1>TITLE</h1>
<div>
<a>LINK</a>
<a>LINK</a>
</div>
try this way
<div >
<a style="float:left">LINK</a>
<a style="float:left">LINK</a>
<h1 style="float:left">TITLE</h1>
<img style="float:left">
<h1 style="float:left">TITLE</h1>
<a style="float:left">LINK</a>
<a style="float:left">LINK</a>
</div>
Although that is not the best practice as you have done it in your example, but for the sake of simple answer you can just add CSS vertical-align: middle to title/logo wrapper. Like this:
HTML part:
<div class="menu">
Link
Link
Link
<div><h1>Your title <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Internet_Explorer_7_Logo.png/64px-Internet_Explorer_7_Logo.png" style="width:64px; height:64px; vertical-align:middle"> Your title</h1></div>
Link
Link
Link
</div>
And CSS:
.menu { text-align: center; }
.menu a, .menu div { display: inline-block; }
.menu a { margin: 0px 5px; }
.menu div { font-size: 20px; font-weight: bold; margin: 0px 20px; vertical-align:middle}
Here is sample demo in codepen - http://codepen.io/anon/pen/JdzvgK
And, btw - YES, this is valid code - you can safely put IMG inside H1. Even w3 themselfs is using this practice in their header - http://www.w3.org/ :)
A pretty common practice is to use a ul structure. It give you some nice structure.
I gave an outline here:
How to style more than one ul (it is for a nav)
And also provided this link (there are lot of nav oriented example on the internet):
http://www.noupe.com/essentials/freebies-tools-templates/100-great-css-menu-tutorials.html

align text center not working as expected

I'm using the Bootstrap framework and I've created a column in which I've used text-align:center; css property on two elements and there are not aligned the same and I don't understand why.
Here's the markup:
<div class="row text-center">
<div class="col-lg-4">
<div class="thumbnail-header">
<h1>Brand</h1>
</div>
<div class="thumbnail-content">
<ul>
<li>Identity</li>
<li>Strategy Brand</li>
<li>Identity Manual</li>
<li>Guide Brand</li>
</ul>
</div>
</div>
'text-center' class has text-align:center; css property.
And here is a working fiddle: fiddle
Can someone explain me why those elements are not aligned properly ?
It's the default left padding on the <ul>
ul {
padding-left: 0;
}
Updated fiddle
I suggest instead of using .text-center Helper class use the .center-block for centering an element in bootstrap because this helper class use margin and display css properties for cenetering the element

linking 2 divs instead of only text

i have several images, with the image i have a link(text).
However i want both the text and image to click-able rather than just the text.
This is my code: html:
<div id="testimage">
<div id="a1">Awards</div>
</div>
(another image) :
<div id="testimage1">
<div id="a2">Events</div>
</div>
css:
#testimage {
background-image: url(images/mja1.jpg);height: 205px;width: 322px;
}
#a1 a
{position: absolute;font-size: 25px;color: #085da2;top: 503px;}
#a1 a:hover
{color:#085da2;opacity:0.5;}
as you can see the a1 has a link, however i need a link to testimage too.
i have tried :
HTML
<div id="testimage"></div>
CSS
a{ display:block; }
with this; when I added the 2nd image, the whole page started to look different.
So am looking to have a link for both div.
I think this is what you need.
<a href="http://mja.co.uk/Events">
<img src="images/mja1.jpg"/>
<span id="a2">Events</span>
</a>
a { display: inline-block } will "expand" the clickable area of the link to the full size of it's containing element, in this case, the <div>, yet holds the layout.
Just wrap the div in an a tag... <div id="whatever">The text</div>

Split <li> into two column

<ul>
<li>
<div class="ext-left">
<img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
</div>
<div class="ext-right">
<a class="ext-name" href="#">Extension Name</a>
<p class="ext-intro">Introduction here</p>
</div>
</li>
...
</ul>
I'd like to split the each list element into two part(in the same line), in the left is an image, in the right is a link and a text(they should be in two lines).
I tried to use float left on ext-left but it doen't work.
Play with jsfiddle: http://jsfiddle.net/UeThn/1/
This is the correct version: http://jsfiddle.net/UeThn/10/
Add this CSS:
.ext-left{
float:left;
}
li{
clear:both;
}
New fiddle here
Here is what you do
<ul>
<li style="width:150px">
<div style="width:100px;float:left">
<img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
</div>
<div style="width:50px;float:right">
<a class="ext-name" href="#">Extension Name</a>
<p class="ext-intro">Introduction here</p>
</div>
<br clear="both"/>
</li>
The idea is as follows:
1. give the 'li' a width
2. give both div's a width
3. float left and right respectively
4. Add a beak with clear="both" at the end
How about this:
li > div{
display: inline-block;
}
[JSFiddle]
(But evil browsers won't support that, see info here)
Floating left seemd to work. Think you've done something wrong.
http://jsfiddle.net/UXnVJ/
You just need to give each div a set width - otherwise, they think they should be 100% wide, which doesn't allow the next to float next to it. See fiddle-fix here.
Try this:
li {
clear: left;
}
.ext-left {
float: left;
}
Float both divs to the left
.ext-left, .ext-right{
float: left;
}
li {
clear: both;
}