I am trying to create a horizontal unordered list with an image in the center of it. I cannot place the image inside of the unordered list. How would I set the image to appear in the center with the links floating around it?
*The html for the image cannot be between the ul opening and closing tag.
*Cannot be done in HTML5 or CSS3.
<img>
<ul>
<li><a></li>
<li><a></li>
<li><a></li>
<li><a></li>
<li><a></li>
<li><a></li>
</ul>
End result
|-link-| |-link-| |-link-| |-img-| |-link-| |-link-| |-link-|
You probably need to use a different approach:
1 does it have to be a list Item?
<div class="container">
<span>Link</span>
<span>Link</span>
<span>Link</span>
<img src="" />
<span>Link</span>
<span>Link</span>
<span>Link</span>
</div>
now the css, you can turn the span into block and float it
.container span {
display: block;
float: left;
margin-right: 15px;
}
and the image too can be floated:
.container img {
float: left;
....
}
2 it will be better to use 2 list item and float the image in the middle.
You could put a background image on the ul.
Class the third link with a padding-right wide enough to cover the width of the image.
CSS:
ul {width:700px; background:url('/path/to/image.jpg') no-repeat 50% 0}
li {float:left; width:100px;}
.padded {padding:0 100px 0 0}
HTML
<ul>
<li><a></li>
<li><a></li>
<li class="padded"><a></li>
<li><a></li>
<li><a></li>
<li><a></li>
</ul>
Related
How do I float a navigation list in the header to the left without creating a gap to the left of the list? Please tell me what I have to change or add in order to effect no gap? On my screen, the gap is noticeable, about 1cm wide, and on the right navigation menu/list, there is no gap. Please tell me how to make my left menu float like my right menu.
<!DOCTYPE html>
<html>
<head>
<style>
header {text-align:center;}
nav#right_menu > ul > li{display: block;float:right;position:relative; width:25px;}
nav#left_menu > ul > li{display: block;float:left;position:relative; width:25px;padding: 0px;margin:0px; border:0px; text-align:left;}
</style>
</head>
<body>
<header>
<nav id="left_menu">
<ul id="left_menu">
<li>Hi1</li>
<li>Hi</li>
</ul>
</nav>
<nav id="right_menu">
<ul>
<li>Hi1</li>
<li>Hi</li>
</ul>
</nav>
<img id="logo" src="logo.png" alt="logo" />
</header>
</body>
</html>
markt answered this question, with ul {padding:0;}, and the code I added to fix this problem is: nav#left_menu > ul {padding:0;}
edit: If I had this gap problem on both sides when floating, I would have used markt's exact code; however, I only had the issue with the left menu, hence I used my code, even though markt's code works too.
It is padding on the ul
try adding:
ul { padding: 0; }
to your css
I have a problem and I can't seem to find the solution.
I'm making a drupal site, and I want to make these list-items come next to eachother. Their width is 45% so it should be possible to have 2 next to eachother, but I can't figure out how.
I've tried putting display inline and inline-block on mutiple of the UL's and LI's but nothing changes.
What should I do?
Just use float :
ul {
width: 940px;
}
li {
margin: 6px;
float: left;
list-style: none;
}
.clearfix::after {
content: '';
display: table;
clear: both;
}
<ul>
<li>
<img src="//lorempicsum.com/futurama/450/200/2" alt="" />
</li>
<li>
<img src="//lorempicsum.com/futurama/450/200/2" alt="" />
</li>
<li>
<img src="//lorempicsum.com/futurama/450/200/2" alt="" />
</li>
<li class="clearfix">
<img src="//lorempicsum.com/futurama/450/200/2" alt="" />
</li>
</ul>
It's hard to find out what you are doing wrong when you don't provide any code.
My guess is that you have not changed the display type and thus the elements are still blocks. If so then it does not matter how the width is set, each element will stay on it's own row.
either use float or display:inline; if you want to show the list items next to each other
See this fiddle for an example of different methods and why some don't work.
I'm trying to develop a menu where dynamically some text must have the property vertical-align:super.
It's happening that this item containing "super" text is not vertical aligned with other item.
Here the CSS code:
<style>
#menu{width:300px;height:100px;background:#ABD4E6;}
#menu ul{list-style:none;}
#menu li{float:left;background:#054664;padding:20px;}
</style>
<div id="menu">
<ul>
<li>Home</li>
<li>App<span style="vertical-align: super;">*</span></li>
<li>Contacts</li>
</ul>
</div>
How can I solved the issue?
Many thanks in advance
Elements with float: left behave in such way that they won't position themselves verticaly, no matter what vertical-align would you set to them. All li elements should not have float: left so they would preserve some specific line-height. Then you can position them together with the span, relatively to the line-height. One of the possibilities is to change the #menu li styles to this:
#menu li {
display: inline-block;
vertical-align: top;
background:#054664;
padding:20px;
}
You will also have to remember to change the HTML markup a bit. There must be no white-spaces between each opening and enclosing li tags, like this:
<ul>
<li>
Home
</li><li><!-- HERE: no space -->
App<span style="vertical-align: super;">*</span>
</li><li><!-- HERE: no space also -->
Contacts
</li>
</ul>
Here's an example: http://jsfiddle.net/eLft6/
I've another issues. The text in now vertically aligned but the position changed if I use span with super property or not.
Vertical alignment of this code:
<div id="menu">
<ul>
<li>Home</li>
<li>App<span style="vertical-align: super;">*</span></li>
<li>Test</li>
</ul>
is different from that one:
<div id="menu">
<ul>
<li>Home</li>
<li>App</li>
<li>Test</li>
</ul>
I've tried to modify the line-height using span for all li item, also setting it with different value in case of super usage or not but it doesn't work!
I would like the navigation links on this page to each appear on their own line:
A. Without using "display:block" - as that makes the hover animation take up the full width of the container, not just the <a> element.
B. Without using <br> tags, as I am eventually looking to create a responsive site with a horizontal navigation on smaller screens.
Thanks for your help.
Have you tried float:left; clear:left ?
wrap you navigation in ul, li:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
css:
ul {list-style: none} li {display: block}
This lets you style your anchors accordingly while forcing them to break lines.
You can wrap the <a>'s in <div>'s and apply CSS to the div's to float:left, clear:left;
div.anchorContainer
{
float:left;
clear:left;
}
<div class="anchorContainer">
text
</div>
<div class="anchorContainer">
text
</div>
<div class="anchorContainer">
text
</div>
You can just apply word-break: break-all;
.parent-block {
max-width: 250px;
width: 100%;
border: solid 1px black;
}
.long-link {
word-break: break-all;
}
<div class="parent-block">
<a class="long-link">https://stackoverflow.com/questions/10000674/make-an-a-tag-move-onto-a-new-line-without-using-displayblock</a>
</div>
I'm creating a content slider with ul and li like:
<div id="tabs">
<ul>
<li id="left">content</li>
<li id="left">content</li>
<li id="left">content</li>
<li id="right">content</li>
<li id="right">content</li>
<li id="right">content</li>
</ul>
<ul id="content_show">
<li>content show</li>
....ect
</ul>
</div>
Now I want to show 3 contents on the left and 3 on the right and slider between of both.
I make to show all li id=(left and right) on the left and slider on the right but I cannot set li id="right" on the right listed.
How can display id="right" on the right of slider?
Like:
text text
text CONTENTSLIDER text
text text
you have to use style's or css file, and give the div tabs width, abd each li use float style
try to use class="left" and class="right"
#tabs { width:600px;} //example
.left { float:left;}
.right { float:right;}
I'm not sure I get what you really want but maybe you can use the float:right attribute for all the li you want to go to the right!