I cant for the life of me figure out how to edit the style.css file to edit the width of the top navigation bar. our website as you can see, the top nav bar is too large, all the items should fit on one line. Here is the code:
.top-nav {
background: #151515 none repeat scroll 0 0;
}
.nav-top li {
display: inline-block;
}
.top-nav a,.nav-video a {
color: #fff;
display: block;
font-family: josefin_sansbold,sans-serif;
font-weight: 200;
padding: 25px 15px;
text-transform: uppercase;
position:relative;
font-size:30px;
}
.top-nav{
text-align: center;
}
div#Video_Categories {
padding: 10px 5px;
background: #fafafa;
}
#nav a {
color:#004282 !important;
font-size:18px !important;
}
There is also a chance that I may be looking at the relavent code for the top menu bar. I could attach the full css file here if possible. Bare with me this is my first post!
If you have the ability to override your current styles or edit them, then you can change the width of the class .container_24.
.container_24 {
max-width: 1200px;
}
Changing that gives me this:
Related
I personalize a part of my Prestashop site and i don't know what I can use for center this element :
Image
Css :
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
margin: 25px 25px 25px 25px;
display: none;
background-color: white;
overflow: hidden;
}
If you wanna center the words inside the container exist the property css text-align
You must have include the html too if you want a better answer and what have you tried.
As an example, these elements were centered using css, text-align:center;
I've created a responsive fixed Top Navigation Bar for a site I'm working on. I'm teaching myself CSS and as of this moment, I only have 2 weeks experience with the language.
Fiddle Link can be found here.
/* BASIC STYLE START */
body {
margin: 0;
background-color: #FFFFFF;
font-family: 'Titillium Web', Arial, sans-serif;
}
/* BASIC STYLE END */
/* NAVIGATION BAR START */
ul.topnav {
margin: 0;
padding: 0;
background-color: #2F2E2E;
overflow: hidden;
list-style-type: none;
width: 100%;
position: fixed;
top: 0;
}
ul.topnav li {
margin: 0;
padding: 0;
float: left;
}
ul.topnav li a {
margin: 20px;
padding: 0;
color: #FFFFFF;
overflow: hidden;
display: block;
text-align: center;
text-decoration: none;
font-size: 10px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
}
ul.topnav li a:hover {
color: #B0AAA9;
transition: 0.3s;
}
ul.topnav li a.active {
color: #B0AAA9;
}
#media screen and (max-width: 800px){
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* NAVIGATION BAR END */
My issue is with aligning the links within the Nav Bar. I want to align the below accordingly.
Allegiance Title - Left side of Nav Bar
Home-FAQ Links - Center Column of Nav Bar
Register & Login Links - Right of Nav Bar
The problem I face is that I can't seem to actually manage to align them properly. I figured out how to change the class in HTML and move the Register & Login links to the right, but I can't move the Home-FAQ links to the centre. Also, when I do change values in padding / margin in the Nav Bar, the responsive Mobile menu changes with the links all over the place (non-centered).
I would appreciate any help as I'm very new to this. Also, please let me know if I have redundant code in the stylesheet.
Ultimately, I want to create one of those 3 column parallax scrolling sites with this Nav Bar sitting on top. I was going to use a downloaded template, but there is no point as I won't learn anything.
The issues are:
You cannot have a <div> directly inside <ul>. It's totally invalid.
The rule ul.topnav li.right, ul.topnav li is contradicting with float: none;
What you need to do is, create this rule:
ul.topnav li {float: left;}
You should be all set. If you need parallax scrolling, it definitely requires JavaScript.
Preview
Fiddle: https://jsfiddle.net/9go9x2ug/
I have a header with logo on the left and links on the right.
On smaller screens (such as a tablet) links doesn't fit in one line.
When using float:left for the logo, and float:right for the links, all the links fall to a new line, which is not the desired behaviour.
When using display: table-cell for both divs, the link area background-color spreads beyond the link area, which is not the desired behaviour too.
I'm stucked on what css formula is the better solution.
I need to keep all the links on the right of the logo, but the background-color should not spread beyond the link area.
Here is a fiddle with 2 examples, one with a lot of links (2 lines) and one with less links (1 line):
http://jsfiddle.net/ARauS/
#header {
display: table;
height: 25px;
background-color: #e7e7e7;
width: 100%;
}
#header #logo {
#float:left;
display: table-cell;
}
#header #links {
#float:right;
background-color: silver;
text-align: right;
display: table-cell;
font-size: 0; /* remove whitespace between menu itens*/
}
#header #links a {
font-family: Arial, sans-serif;
font-size: 8pt;
line-height: 18pt;
text-decoration: none;
color: #6a6a6a;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
margin-left: 1px;
white-space: nowrap;
}
#header #links a:hover {
text-decoration: underline;
}
#header #links a.personal {
background-image: linear-gradient(to bottom, #fcfcfc, #e7e7e7);
}
Our application has a master .css common for all our pages and we are not allowed to change anything in this file.
We have an entry there as follows:
ul li{display:block;padding:0 0 0.5em 15px;margin:0 0 0 0;background:url(../images/bullet.gif) top left no-repeat;}
I am implementing predictive search on one of the jsp-s and I have a specific css file for this purpose which is as follows
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: none;
list-style: none;
padding: 0;
margin: 0;
list-style: disc inside;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0A246A;
color: white;
}
My problem is that I am unable to remove this bullet.gif from my current predictive search list . If I add background: none I am loosing all the existing background colours.
How can I stop this bullet.gif to appear in my list.
PLEASE NOTE : I tried with background-image:none; also and it did not work, the bullet.gif is still coming up in my search list :(
Regards, M
Instead of background: none try:
background-image: none
You should write
background-image:none;
I'm trying to get all the text in this list to be flush against the bullet. However, the text is wrapping under the bullet image. Tried changing the padding/margin on the a and li and also nowrap, but that just make it stick out over the right border. The bullets are the WBI logos under News: http://circore.com/womensbasketball/ Any ideas? thanks!
You could try
ul {
list-style-position: outside;
}
but I would personally use a background image and some padding, something like:
li {
list-style: none;
background: transparent url(your/icon.png) no-repeat left center;
padding-left: 20px; /* or whatever the width of your image is, plus a gap */
}
See this page for more details:
http://www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html
I did this on your site with firefox and it works
#menu-news li:first-of-type {
border-top: medium none;
height: 55px;
list-style-position: inside;
margin-left: 8px;
margin-right: 15px;
padding: 10px 10px 10px 66px;
vertical-align: top;
}
#menu-news li {
background: url("images/wbismall.png") no-repeat scroll 0 0 transparent;
border-top: 1px solid #666666;
height: 55px;
list-style-position: inside;
margin-left: 10px;
margin-right: 15px;
padding: 10px 10px 10px 66px;
}
This works for unordered lists:
#menu-news ul {
list-style:outside circle;
margin-left:60px;
}
#menu-news ul li {
padding-left:20px;
}
The margin-left moves the whole list in by 60px.
The padding-left is only needed if you want extra space between the bullet point and the list item text. The list item text wraps under itself and not under the bullet.
You need to add display: inline-block; to the link inside the td element.
Your class looked like this:
#menu-news li a {
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;´
}
But need to look like this:
#menu-news li a {
display: inline-block;
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;
width: 200px;
}
I had the same problem and here is how I fixed it. The important line is background-repeat: no-repeat;. Bullet points will be added to every new line/list item of your list but it will not put a bullet point when text is wrapped to the next line. Look at my code below to see where I placed it.
ul {
margin: 0;
list-style-type: none;
list-style-position: inside;
}
ul li {
background-image: url(https://someimage.png);
background-size: 25px;
background-repeat: no-repeat;
background-position: 0px 5px 100px;
padding-left: 39px;
padding-bottom: 3px;
}
A few notes on my code: I used an image for the bullet points. I also used background-image: instead of list-style-image: because I wanted to control the size of the image bullet. You can simply use list-style: property if you want simple bullet and this should work well even with wrapped text. See https://www.w3schools.com/cssref/pr_list-style.asp for more information on this.
Try simple set the position attribute:
list-style-position: inside; nothing more need to work.
Here is the working example:
https://codepen.io/sarkiroka/pen/OBqbxv
I ran into a similar issue while I testing accessibility of pdfs generated with pdfreactor, my problem was that list-style-type: disc broke the 'logical reading order' in Adobe acrobat's Reading Order Pane. Having a jumbled reading order won't break the NVDA screen reader experience for visually-impaired users, but it does prevent the user from bookmarking a pdf document correctly.
My solution to fix the text from wrapping directly underneath the bullet character AND fix the reading order:
ul {
list-style-type: none;
}
li {
margin-left: 10px;
}
li::before {
content: '•\00A0';
margin-left: -10px; // a negative margin will remove the bullet from interrupting the flow of the text
}