Following is the link of a web page.
https://pbx.wave-tel.com/register
It has a navigation bar containing verification, your details and hosting contrex.
I want to set this bar in the center of the page without using margin or padding as it disturbs the responsive display. I can only change the CSS as i do not have access to HTML, Please help me in this problem.
YOu can do this changes
CSS
.swMain ul.anchor li a {
text-align: center;
margin-top: -15px;
padding-top: 0;
}
.swMain ul.anchor li {
float: none;
display: inline-block;
}
.swMain #navSummary {
text-align: center
}
.swMain ul.anchor li {
display:inline-block;
float:none;
}
.swMain #navSummary {
text-align:center;
}
Try this then, I have edited for your requirement!!
update your css
.widget-menu-widget{
padding-left : 50%;
margin-left : -323px;
}
Add this to your css
.swMain #navSummary {
text-align-center;
}
.swMain ul.anchor li {
/*float: left;*/ remove float left
display: inline-block;
}
.swMain ul.anchor li a {
display: inline-block;
}
.nav-tabs>li {
/*float: left;*/ remove float left
}
Note: you need to add these to your existing styles
Related
I am applying dynamic classes "float-left", "float-right" and "float-center" to the Lists to position them properly where I want, but for centering as there is no float:center; I tried with margins, inline-block; text-align:center.. but nothing works.. please check this fiddle
ul.tabs .center {
margin:0 auto;
text-align:center;
overflow:hidden;
}
.float-center li{
display:inline-block;
}
http://jsfiddle.net/443E2/
Use the following code:
.float-center {
text-align: center;
}
.tabs.float-center li {
display: inline-block;
float; none;
margin-left: -4px; /* Fix for white spaces between li while using inline-block */
}
.tabs.float-center li:last-child {
border-right: 1px solid #999;
}
See the update jsfiddler
Check this fork - http://jsfiddle.net/GzS7X/
I changed this to centre the content of the <li>:
.tab_content {
padding: 20px;
font-size: 1.2em;
text-align:center;
}
As I need to display menu list items as horizontal in IE7 but it is displayed vertically.
Menu list items:
This is the image where menu list items are displayed vertically.
If I use the float:left property then also it will not be displayed horizonatlly. What to do for this problem?
CSS is as follows:
.swMain ul.anchor {
display: inline-block;
list-style: none;
padding-left: 0px;
margin-top: 3px;
float:left;
}
.swMain ul.anchor li{
position:relative;
margin: 0;
padding: -10px;
padding-top:0px;
padding-bottom: 0px;
clear:both;
display:inline;
float:left;
}
.swMain ul.anchor li a {
display:inline;
margin:0;
padding:0px;
text-decoration: none;
outline-style:none;
}
The problem is, that IE7 does not support inline-block. Luckily there is an easy fix for that:
.swMain ul.anchor {
*display: inline;
zoom: 1;
}
The * infront of the display propertie makes sure, that it's understood only by IE7 and ignored by every other browser.
I'm in the process of making my own blog, I haven't got a domain yet so it's not live(I've been building the site from a folder with different directories as the pages). I've been working on the blog and I was looking for a simple navigation menu. I found one on the internet. I'm trying to center the navigation bar and I've tried many solutions that worked for other peoples websites but it isn't working for mine. This is the code (I've tweaked it to my own colors and nav titles)
<ul id="list-nav">
<li>Home</li>
<li>Books</li>
<li>About</li>
<li>Contact</li>
</ul>
And this is the CSS:
ul.list-nav {
list-style:none;
width:525px;
margin-right: auto;
margin-left: auto;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
"Help me Obi Wan Kenobi your my only hope!"
Your first CSS selector is looking for a ul with a class of list-nav, not an id of list-nav. Change your first CSS rule to:
ul#list-nav {
padding: 0;
margin: 0;
list-style: none;
width: 525px;
margin: 0 auto;
}
And your navigation bar is magically centered. Please see this jsFiddle for a working demonstration > http://jsfiddle.net/TLaN5/. Obviously you'll need to amend the width of the parent ul in order to accomodate the correct width of the elements within, but you should get the idea.
I would wrap the entire page inside <div class="wrap">. You have declared margin twice in the code, so I would remove the first occurrence and leave it like:
ul#list-nav {
padding: 0;
list-style: none;
width: 725px; //NOTE I have increased the width value.
margin: 0 auto;
}
Also, find
ul {
display: inline;
text-decoration: none;
color: black;}
[around line 20] and remove display: inline; rule. This should fix your issues. Check the live example here.
You can give a define size to the ul and center its content (remove the display-inline, indeed)
ul {
width: 960px;
margin: 0 auto;
text-align: center;
}
Then display the child li elements as inline blocks :
ul li {
display: inline-block;
}
The inline-block property won't work in ie7, so check your browser targets first...
Another way is to just use the good ol'
ul li {
float: left;
}
ul:after {
display: block;
content: "";
clear: both;
}
But the li won't be centered within the ul and you'll have to use javascript if you absolutely want to do this dynamically (without assigning a fixed with to each li).
I need to make a custom list-style markers. Now it's done by adding element before li, but exist one problem. The remaining lines should be aligned with the text for the marker, such as normal marked list, but they don't.
li p::before {
content: "* ";
}
How I make padding for second, third and etc lines, and make it cross-browser? (IE8+, FF3+, Opera 11+ and Crome)
li p:before { /* thanks Michael */
content: "* ";
float:left;
}
li p {
overflow:auto;
}
Maybe this will work. May I know why can't you use images (simple curiosity)?
EDIT: I was wrong, :before insert pseudo-element before content, so
<div id="wrap">
<ul>
<li><p>Get order of list items in a jQuery Sortable list after resort ... The trick is I would like to capture the order of the items immediately ... And I'm aware that it's also possible to assign a call-back function that fires when sorting st</p></li>
</ul>
</div>
#wrap
{
position: absolute;
top: 100px;
left: 100px;
}
li
{
list-style-type: none;
}
li p
{
overflow:auto;
}
li:before {
content: "* ";
float:left;
}
will work.
You can either set the p and li to float: left; (example 1)
li
{
list-style-type: none;
display: inline-block;
}
li p
{
display: inline-block;
}
or set the display to inline-block (example 2)
li
{
list-style-type: none;
display: inline-block;
}
li p
{
display: inline-block;
}
I have made a page in which i m using a list to display the items horizontally
Now i can see the result in the page here
But when i drag and make the browser window short i get a garbled list
as in the scrren-shot here
http://pradyut.dyndns.org/WebApplicationSecurity/people_ss.JPG
http://pradyut.dyndns.org/WebApplicationSecurity/people_ss.JPG
I m using a css in the list as : -
#navlist li
{
padding: 1em;
float: left;
list-style-type: none;
}
at the end of the list i m using a clearing div
#clear-both
{
clear: both;
}
Any help
Thanks
Pradyut
[2]: [2]: http://pradyut.dyndns.org/WebApplicationSecurity/people_ss.JPG
I can't seem to access your site.
Try using display:inline instead of float:left
#navlist li
{
padding-right: 1em;
display: inline;
list-style-type: none;
}
The problem is the varying heights of each LI element. If you give them all a common height, the layout flows properly when the window is resized:
#navlist li
{
height: 100px;
padding: 1em;
float: left;
list-style-type: none;
}
well could solve the problem using a min-height in the another div css
#another
{
padding: 5px;
background-color: green;
min-height: 75px;
}
thanks...