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
Related
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
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;
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)
So this is our website http://www.greeceinsiders.com
if you resize the window you will see that the menu at the top-right gets out of the top-bar and it is ugly. How can I fix that? Can I play with the position of the list?
Bonus: If anyone visits Greece he gets a free experience for helping us! :)
An easy fix is making the following changes in your CSS:
#top-bar > .menu {
color: #FFFFFF;
/* float: right; */ /*float: right removed */
height: 48px;
margin-right: 40px;
width: 490px;
position: absolute; /* these are new additions */
right: 0;
top: 0;
}
It's the pageTitle element that's causing it to get out of shape.
It seems like an empty element - can you just remove it?
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* everything goes to opposite direction why?? It doesnt make sense */
width: 100%;
}
It's a simple dropDown in CSS (I'm learning CSS)... Have a look at the code where I'm hiding the blocks here in JS Bin.
your code:
left: 100%; /* everything goes to opposite direction why?? :( */
change to:
left: -100%;
Also, this works in Chrome. I noticed your menu code does not work in IE9.