Can someone tell me how to get the shapes for ul li to align next to a li.
I have an section that is floated to the left and the text is centered within the floated section.
I add a ul, but the square are off to the side of the page and not next to the li items.
Sounds simple enough.
styleSheet.css
#SectionOne {
float: left;
width: 40%;
}
#SectionOne ul {
list-style-type: square;
}
#subPage {
display: block;
margin-right: auto;
margin-left: auto;
}
subPage.php
<body id="subPage">
<section id="SectionOne">
<h4><b> January 1st 2015</b>
</h4>
<p>Related Title</p>
item1<br>
item2<br>
item3<br>
<p><h3>List Title</h3>
<ul>
<li>Bullet Item One</li>
<li>Bullet Item Two</li>
<li>Bullet Item Three</li>
</ul>
</p>
</section>
</section>
</body>
The section 'SectionOne' floats left and aligns centered was I wish, but when I add the style to the 'ul' the bullets are left justified. Is there a way to keep them close to the line items? Or should I create another section for the 'ul' alone?
Related
I have this in my html:
<div>
<ul id="tabs">
<li id="h1">
Home
<div>
text here
</div>
</li>
<li id="h2">
Services
<div>
text here
</div>
</li>
</ul>
</div>
What I want to do is make the list items inline, while hiding their contents. And the contents would only be visible when I press the list item link. This is what I've tried so far on the css:
li {
display: inline;
}
li div {
display: none;
}
li:target {
display: block;
}
However, this doest not work. The display: block; is not overriding the display: none;
Thanks in advance!
li:target only refers to the li element itself that is targeted. Setting that li’s display property to block will not affect the containing div which display property is set to none. In fact, it will only overwrite the display: inline that’s defined on li.
When you want to display the div that’s inside the targeted li element, then you need to adjust the selector to actually match that div. For example using li:target div to match the specificity of the original rule:
li {
display: inline;
}
li div {
display: none;
}
li:target div {
display: block;
}
<div>
<ul id="tabs">
<li id="h1">
Home
<div>
text here
</div>
</li>
<li id="h2">
Services
<div>
text here 2
</div>
</li>
</ul>
</div>
`<ul id="main-nav">
<li>
Menu item
<div class="sub-nav">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -80px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -160px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -240px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -320px;">
<p>Anything</p>
</div>
</li>
`
I want to be able to put content into the div (Links, Images, Text, etc). I am trying to make the div box the same size as the navigation bar its self specifically 1050px in width (I want the navigation bar and div box to be 1050px in width). When a user hovers over a link in the navigation bar I want the div box to appear with all its content inside.
this is something like it: http://jsfiddle.net/ELyQW/2/ ~ (But if you look closely you can see the box moves on every new link which I do not want to happen.)
Look at the navigation bar on this website for similar reference. pacsun.
Thank You SO much for your help!
And if you do help me create a new bar I strongly recommend you do not use the jsfiddle I posted, but if you have to go for it!
Thank you once again!
Yay success!
http://jsfiddle.net/hjZz9/1/
<div id="main-menu-container">
<ul id="main-menu">
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
</ul>
</div>
#main-menu-container {
position: relative;
}
#main-menu {
margin: 0; padding: 0;
list-style: none;
}
#main-menu li {
float: left;
margin-right: 15px;
}
#main-menu li:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
position: absolute;
left: 0; right: 0;
padding: 10px;
background-color: #eee;
}
Edit: I've added right: 0; to .sub-menu just so it stretches from end to end, you can change this to your own preference of course.
You could try position fixed instead of absolute. Then left position both the div and ul correctly and you will achieve it. Here is a sample
.sub-nav {display: none; position: fixed; left: 40px; width: 400px; z-index: 999; background: #f2f2f2;}
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>
<ul>
<li>
<div id='div1'><div>
<div id='div2'><div>
</li>
<li>
<div id='div3'><div>
<div id='div4'><div>
</li>
<li>
<div id='div5'><div>
<div id='div6'><div>
</li>
</ul>
Above html will design following design
li li li
|__|__|__| -> odd DIVs
|__|__|__| -> even DIVs
I want to merge all the odd DIVs and place some text on the top of it.
li li li
|__|__|__| -> odd DIVs
|__|__ __| -> even DIVs
Is there any way to do this?
Thanks
Try using this:
li {
display: inline-block;
}
li div:last-child {
display: inline;
}
Ive tested it in Firefox 5 only, and it seems to work.
See an example here http://jsfiddle.net/ffESR/
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!