I want to make my menu and image appear on the same line but sadly that doesn't seem to be happening. Could anyone tell me why and how I would solve my problem? I've got the following image and menu...
HTML
<div id="header">
<img alt="" height="67" src="Aidanlogo.png" width="400" />
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
<br style="clear: left" />
</div>
</div>
Menu CSS: http://pastebin.com/drMD7gwg
Header CSS
#header {
width: 700px;
margin-left: auto ;
margin-right: auto ;
}
try this
#menu ul li { display: inline; }
Divs are block elements, so by default it will always appear on a separate line.
You could make the image a block and float it left (display:block; float:left;)
You could make your div display:inline-block, or float:right; it, assuming there's room in the parent (700px).
DIV is a block element, so it won't display on the same line as anything else unless you change it's inline property:
#myslidemenu { display:inline; }
Also note that you'll have to modify the <ul> styles to display the <li> tags on a single line. See this link for more on that part.
edit I'm not sure what the jQuery slide menu does to the <div> or <ul> styles - you might have a look in Firebug after it's rendered.
Related
Trying to create a navigation menu at the top of the page, but the images are spaced too far away from each other and then they wrap. How do I bring them closer together?
CSS:
.weddingMenuIcon{
width:30%;
}
HTML:
<ul class="list-inline">
<li>
<img src="~/images/home.svg" class="img-responsive weddingMenuIcon" />
</li>
<li>
<img src="~/images/home.svg" class="img-responsive weddingMenuIcon" />
</li>
<li>
<img src="~/images/home.svg" class="img-responsive weddingMenuIcon" />
</li>
</ul>
If I were building this as a centered navigation I would apply inline: block to the list items and then use a margin to define the spacing between them.
See this jsFiddle
.list-inline li {
display: inline-block;
margin: 0 40px; /* Items have 40px spacing between */
}
The fix was simply changing the width from using percentage to using fixed pixel width.
I'm working on a project(using bootstrap) and I can't seem to figure out why my nav is still stacked up instead of being laid out horizontally. I've tried just about everything I can think of and even sought help online where I'm learning to code but they couldn't figure it out either. They told me it should be working and in fact it does work in their code editor, it just doesn't work on my computer which is where the files are located since I don't have web hosting and I'm just learning. I also noticed that in my browser the nav pull-right works and the links are on the right hand side(although they're still not horizontal) but when I ran it through here where it says "run code snippet" the nav appears right underneath the img placeholder, don't know if that means anything but I thought I'd include that bit of information.
header nav ul{
display: inline-block;
}
<header>
<div class="container">
<div class="row">
<img id="logo" src="http://placehold.it/150x150">
<nav>
<ul class="nav pull-right">
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
enter image description here
Do you mean you want to make the navigation to align horizontally?
Then you can try using this
header nav ul li {
display: inline-block;
}
working example here.
The reason your method doesn't work is because you apply to ul instead of the li element.
I have a <ul> with a couple of <li>. In my css with li { display: inline; } I put the li elements in a horizontal order. The li elements contain a picutre and text. But now the picture and the text are also in horizontal order, but I want them to be under neeth each other. How can I do that?
<ul>
<li>
<img src="img/a.png" />
A
</li>
<li>
<img src="img/b.png" />
B
</li>
<li>
<img src="img/c.png"/>
C
</li>
</ul>
You will need to change your CSS as follows:
li {
display: inline-block;
}
li img {
display: block;
}
Here is a quick demo: http://codepen.io/anon/pen/VLLoEZ
This is not a bug but a normal behaviour. <img> tag is by default inline. You could solve this non-issue by either wrapping either your image or, better, your text into a block element. For example, a <p>tag for your text :
<ul>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
</ul>
jsFiddle
Note I use display:inline-block on li elements, taking advantage of both inline (putting things side-by-side, alignment,...) and block (fixed size, top/bottom margins) properties. Although it has a strange but easilly fixed "feature/issue", this is most of the time the best way to put elements side-by-side. display: inline or floating elements are also used but come with some other issues sometimes a bit trickier to be fixed.
I have a simple horizontal menu. On some of the menu headings, i would like to split them so the text starts on a new line.
HTML:
<ul class="tabs">
<li>
<div class="home">
Home
</div>
</li>
<li>
<div class="contact">
How to
Contact Us
</div>
</li>
<li>
<div class="products">
About Our
Products
</div>
</li>
</ul>
CSS:
.tabs ul {
list-style: none;
}
.tabs li {
display: inline-block;
}
So, what i am trying to do is, rather than appear as About Our Products.. Instead:
About Our
Products
Here's my fiddle: http://jsfiddle.net/oampz/dWbx5/
Ideally without using br
So like I said in the comment, you can maybe use max-width
HERE is a fiddle using it.
EDIT: I added it to the inline CSS, but you can move it into your CSS page.
Simply use a break <br />?
<div class="products">
About Our<br />Products
</div>
I also prefer to use a float: left; on the li instead of inline-block, it's easier (and more logic) to work with:
http://jsfiddle.net/2EDbr/
<div >
About Our
</div>
<div>
Products
</div>
similarly u can use for all
http://jsfiddle.net/dWbx5/4/
I have the following html as part of my layout page:-
<div class="top-nav nav-collapse">
<ul class="nav">
<li class="customTitle">custome Title </li>
<li>
</li></ul>
</div>
but the title was at the top of the page as follow:-
so I added a before the title text as follow:-
<div class="top-nav nav-collapse">
<ul class="nav">
<li class="customTitle"><br/>custome Title </li>
<li>
</li></ul>
</div>
and the title was shifted to the bottom as follow:-
but my question is wheatear adding the <br/>, is the right approach to follow to achieve my layout requirement ?
thnaks
Try adjusting the line-height of the .customTitle class. In particular, if you set line-height to be equal to the height, then your text will appear in the middle of the title bar.
try this one,
.customTitle
{
line-height:(somevalue)px;
}
You can Use padding-top: which sets the top padding (space) of an element
.nav .customTitle { padding:YYYpx; }
or
line-height: specifies the line height
.nav .customTitle { line-height:XXXpx; }
Never use<br/>'you can use padding or line height.
.customTitle
{
line-height:___px;
}
or
.customTitle
{
padding-top:___px;
}
Never use <br/> for styling!
You can use
li.customTitle { line-height:...; }
or
li.customTitle { padding:...px; }
you can youse style tag. And give padding....
<li class="customTitle"><span style="padding-top:10px">custome Title</span> </li>
you can adjust height according to your need....