I'm working with this free theme : http://demo2.woothemes.com/mystile/
And I would like to change the position (put it on the center) of the main navigation menu. (the one with home, shop ...).
I have traveled through the style.css and layout.css (also tried with firebug) but I can't find where it's indicated that it should be on the right. I guess it's a "float:" ?
The only way I have found to change its position is to put this in the custom.css :
body #navigation {
position:absolute;
top:165px;
left: -50%;
right: 0;
margin: auto auto;
}
But that's not exactly centered ...
Can someone help me?
Try adding this css properties in your stylesheet:
#navigation {
position: absolute;
width: 100% !important;
text-align: center;
}
#navigation ul {
float: none !important;
display: inline-block;
}
Just copy and paste the above css code in your css stylesheet.
Try to add this properties to the following classes:
nav#navigation{
width: 100%;
}
ul#main-nav{
position: relative;
right: 50%;
transform: translateX(50%);
}
This code will center that menu.
well it depends how you have it set up with your entire code.. try this and see how it helps
#navigation {
width:100%;
left:50%;
position:absolute;
text-align:left;
margin-left:-601px;
Related
I need to align the lifestyle furniture ad image in the header for http://test.wizs.com/. I need it to be flush against the right side. See how it is vertically aligned to the top? I want it to be in line with the logo.
Everything that I have tried is not working. Some of the css that I have tried makes the image go halfway off the page... :/
Currently, the CSS is:
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
z-index: 999;
}
Any advice on this would be greatly appreciated! :)
Not sure I fully understand what you mean.
I added:
.proadszone-4788 img {
padding-top: 27px;
}
This should work fine
.wppas_custom_widgets-36 {
position: absolute;
right: 0px;
}
and remove this css
#header .widget {
}
Try this it may help
i have some problems with the CSS code below. The problem is that only one of the icons are visible (#maps), guess it is some problem with the positioning? (70%?) i cant find the problem, hope that someone here can help.
Thanks in advance.
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 10px;
left: 70%;
}
#navlist li, #navlist a {
height: 64px;
display: block;
}
#face{
left: 0px;
width: 64px;
height: 64px;
background: url('.../imageurl') 0 0;
}
#maps{
width: 64px;
height: 64px;
background: url('.../imageurl') 0 0;
}
Html code:
<ul id="navlist">
<li id="face"></li>
<li id="maps"></li>
</ul>
there is definetly an issue with #face! Although I´m not sure if that will make it visible again because I would also need your HTML code. You gave it the attribute left:0px; (btw. you dont need to write "px" if it is 0 anyways). But the browser cant do anything with that because it doesnt know with which kind of positioning you are working! The attribute left:0; makes only sense if you have already given it either position:absolute; or position:relative;. All over all I would advise you to read more about the basic position techniques and upload you HTML for a closer look.
EDIT: Found the problem.You think #face has the attribute left:0;? You are wrong! Because #navlist li { left:70%} beats #face{left:0;} So just remove that attribute at #navlist li and add it at #maps! It will fix it! It was a cascading issue if you are want to read more about it google: CSS cascading system.
I have been trying to edit my header in Joomla. I have added following class to my template to round the corners and add the background:
.holola {
background: #FFF!important;
border-top-left-radius: 15px;
border-top-right-radius: 15px; }
How I can bring the logo up and make it look offside the header, like in attached image. I know how to make this happen using image in header, but I want to make it pure CSS to make the page look better in mobile version.
I have tried to add padding but I think it should be more complicated code to use?
Remove the padding you've added.
Then add some top margin to the .wrapper to push the main content down a bit.
body.boxed .wrapper {
margin: 60px auto 0 auto
}
And now add margin-top to the logo to move it up.
#header_logo {
margin-top: -60px
}
Try adding these also
#zo2-header{
margin-top: 50px;
}
#header_logo .logo_normal{
position: absolute;
top: -103px;
}
Remove your padding: 60px 0; from #zo2-header and replace with margin-top: 60px;.
Add
#header_logo {
position: relative;
top: -60px;
}
You would want to use position relative. See this jsfiddle for a simple example that should work for you situation.
#img {
background-color:red;
height: 80px;
width: 80px;
position:relative;
top: -40px;
}
Basically the important parts here is the combination of position: relative and top: -40px. This says position the element relative to the parent element and "anchor" its top -40 pixels from where it would normally be (top aligned with the header's top)
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).
I want my footer to always be on the bottom and move to adjust to the size of the content inside the page. Right now I have dynamic content that covers the footer because it's to much content.
How can I fix my CSS:
div#Footer {
width: 100%;
height: 80px;
padding: 1px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: Black;
color: #ffffff;
position: fixed;
bottom: 0;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Its a little unclear what you want but this code has worked well for me.
Credit - http://css-tricks.com/snippets/css/fixed-footer/
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
This is a simpler solution.
#footer {
bottom: 0%;
position: fixed;
}
You need to post more html/css to be positive of what is going on here, but it sounds like your footer is being covered by your content page. If this is the case then setting a z-index on the footer will probably sort the issue.
z-index: 1000;
This can also typically be sorted by making sure your footer appears at the end of your html, as elements declared later appear on top of previous ones.
Had a similar issue.
Set "position" to "relative". The position of the element can't change based on the page length if it's set to "fixed".
i think you actually need the align:joe; inside of a candice div to accurately place the element on the deez axis.