All i want to do is just Center my menu on my stie .
When i add :
.primary-menu {
float: none !important;
}
in my custom.css
just nothing happend.
when i add just :
.primary-menu {
float: right !important;
}
My menu is moving to right side of my page.
( I don't have access to files , i can use only custom.css in my wordpress )
my website: http://test.projekt-tenis.pl/wordpress/
and screen:
can someone just look in google chrome and tell me what i should add to my custom.css to center this menu?
It is not the <a> but the <li>:
.primary-menu {
text-align: center;
width: 100%;
}
.primary-menu .wbc_menu > li {
display: inline-block;
float: none;
}
Now in the website, it looks like:
Is this what you need?
Related
Navbar component-
body {
margin-top: 0;
padding: 0;
font-size: 18px;
}
.container {
width: 95%;
margin: 0 auto;
}
header {
margin-top: 0;
background: blue;
padding: 1em;
}
a {
color: white;
text-decoration: none;
}
a.logo {
font-weight: bold;
}
nav {
float: right;
}
ul {
list-style-type: none;
margin: 0;
display: flex;
}
li:hover {
filter: brightness(50%);
}
li a {
padding: 1em;
}
<header class="head">
<div class="container">
Home
<nav>
<ul>
<li> hello</li>
<li> whatsup</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<router-outlet></router-outlet>
</div>
I am using chrome I notice a thin white strip of space at the top and the left and the right of the header component containing the navbar. How can i remove this such that the white space is replaced by navbar color ie. blue.
I am new at css, and Would be good if an explanantion of the cause could be provided.
Thanks
body {
display: block;
margin: 8px;
margin-top: 8px;
margin-right: 8px;
margin-bottom: 8px;
margin-left: 8px;
}
Added the css that displays on the inspect element for further clarity
I changed the margin-top:0 with the margin:0 for the body.
I hope it would work.
body {
margin: 0;
padding:0;
font-size: 18px;
}
Styling inline for body was one workaround that worked incase the browser doesnt recognize body css(assuming there wasnt any errors in the css ofcourse) and applies default styling.
From the update in your question where you show us the CSS being applied, as seen in the element inspector, we can see that your CSS is not being picked up by the browser at all.
Its difficult to tell why, but here are a few things that can help you fix it:
If it is in an external CSS file, check that the file is being included
Check for typos in the CSS for the body
Check for typos or misplaced } in any CSS before the body CSS - an error in preceding CSS could prevent the rest of the CSS in that file from being applied
Try adding that CSS directly into the HTML in a style tag to see if it works there... if so:
Try deleting the CSS and retyping it manually - Very occasionally I've seen issues where code copied from the internet or elsewhere can have hidden characters that cause problems.
please go through below link :
http://2.kidsdial.com/customer/account/login
and login with this email id : kidsdial2#gmail.com & password : kidsdial2
than please check this : http://2.kidsdial.com/marketplace/marketplaceaccount/myproductslist/
on top , you can see : Listings, Orders, Returns . above there is a
logo image: totaltoys.
I want to display background color from top of the logo [totaltoys] to bottom of the menu as like this :
you can test these CSS rules
#horizontalmenu .mymenu > li {
height: 32px;
line-height: 32px;
width: 100px;
}
#main_header .header-container .header {
background-color: #ffff00;
}
#horizontalmenu{
margin-top: -5px;
}
I would remove .bkg_header_bottom from:
.adapt-0 .em-box-custom .bkg_header_bottom, .em-box-custom .container_header, .bkg_header_bottom{
background-color:#fff !important;
}
and possibly remove the color here as well so you aren't duplicating code:
.adapt-0 .em-box-custom .bkg_header_bottom, .em-box-custom .container_header, .bkg_header_bottom {
background-color: #3fbdf7;
background-image: url(../images/stripes/blank.gif);
background-position: 0 0;
background-repeat: repeat;
color: #FFFFFF;
clear: both;
}
Add the background color you want here, this class contain both elements you want colored:
.page.one-column{
background-color: #3fbdf7;
}
my slider cuts off and I noticed wwhat causing it is boostrap, the framework i use for the grid system.
http://jsfiddle.net/5q39A/1/
Why acutally does it cuts off? I included all css meaning with boostrap too.
this is the boostrap website: http://twitter.github.com/bootstrap/
You can see the slider cuts off there:
http:// justxp.plutohost.net /survive/index.html
any help would be appreciated! thanks!
This is what is causing the issue:
li {
line-height: 18px;
margin: 5px;
}
on line 545 of bootstrap.css
Use this example to override:
Change this:
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
on line 327 of style.css
To this:
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
margin:0 !important;
}
Fiddle: http://jsfiddle.net/5q39A/4/
I was reading an article and just wonder how the arrows as shown in the picture below are inserted. I viewed the html source and there was nothing there.
How to insert arrows just like that?
They are background-images.
#content .bodytext a.external { padding-right: 7px; background: transparent url(/img/extlink.gif) no-repeat top right; }
They are using this CSS
#content .bodytext a.external {
background: url("/img/extlink.gif") no-repeat scroll right top transparent;
padding-right: 7px;
}
And the link is this
http://www.informationweek.c<wbr></wbr>om/news/windows/operatingsys<wbr></wbr>tems/showArticle.jhtml?articleID=208800494
The CSS is to find an element with id="content". Then find it's children with class="bodytext". Now for each child find anchor tag with class="external" and apply the background image to it.
They are set using CSS background images and classes on the elements.
For example the grey arrow for external links is associated with the class external on anchors. You should be able to check the other arrows by inspecting the elements using the developer tools in your browser e.g. FireBug in FireFox.
In relation to above link from Duniyadnd - which I found very interesting, a quick solution for internal links could be:
a[href*="here"] {
padding-right: 7px; background: transparent url(/img/intlink.gif) no-repeat top right; }
What the above code does is look for any links with the word 'here' in them and then stick an arrow indicating 'internal'. That would of course mean you would have to refer to all internal links as 'here', or run up a couple more rules. You could then change the rule to suit external links as well:
a[href ^='http'] {
padding-right: 7px; background: transparent url(/img/extlink.gif) no-repeat top right; }
It's an image, styled that way with css. As you can see the hyperlink has a class='external' and class='internal'
http://forums.whirlpool.net.au//img/exteml.gif
http://forums.whirlpool.net.au//img/extlink.gif
#content .bodytext a.internal { padding-right: 7px; background: transparent url(/img/intlink.gif) no-repeat top right; }
#content .bodytext a.internal,
#content .bodytext a.internal:link,
#content .bodytext a.internal:active,
#content .bodytext a.internal:visited { color: #730; text-decoration: none; }
#content .bodytext a.internal:hover { color: #A50; text-decoration: underline; }
#content .bodytext a.internal img { display: none; }
/* inter-links */
#content .bodytext a.external { padding-right: 7px; background: transparent url(/img/extlink.gif) no-repeat top right; }
#content .bodytext a.external img { display: none; }
/* inter-links */
#content .bodytext a.email { padding-right: 7px; background: transparent url(/img/exteml.gif) no-repeat top right; }
#content .bodytext a.email img { display: none; }
Im using hyperlinks as a image, well a background image so that I can do a image swap eaisly with a:hover.
I have the following:
<a class="cross" href='#'></a>
And the following css
a.cross {
background:transparent url(/images/cross-grey.png) no-repeat scroll 0 0;
float: right;
border: none;
width: 19px;
height: 19px;
display: block;
}
a:hover.cross {
background-position: 0 20px;
}
This works fine in Firefox but not in IE6. Is this a issue with IE6 and a simple css fix or is there a better way of implementing what I am doing. Thanks.
Change:
a:hover.cross { }
To:
a.cross:hover { }
I think you should deal the a:hover.cross with javascript.
Regards.