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?
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
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 am trying to make a tooltip for an anchor tag using only CSS. I have come this far. I am trying to achieve the functionality of having the box and the tip arrow positioned exactly at the center no matter what the length of the text is.
The above image is what I am trying to get at.
I've tried keeping the width:auto but it's not working either.
body
{overflow-x:hidden;}
div
{position:relative;width:700px;border:1px red solid;padding:20px;margin:0 auto;text-align:justify;}
a
{position:relative;white-space:nowrap;}
a > span.tooltip
{
position: absolute;
white-space: normal;
width: 100%;
top: 130%;
left: 0;
}
a > span.tooltip > span
{
position: absolute;
top: 0;
right: 0;
text-align: center;
bottom: 0;
left: -500%;
width: 1100%;
}
a > span.tooltip > span > span
{
display: inline-block;
background: black;
border-radius: 4px;
padding: 10px;
color: white;
max-width: 300px;
}
DEMO:
http://jsfiddle.net/b2Yqf/
works on msie 7 8 9 10, firefox, chrome
not what you might want... since markup is made with three nested <span>s... but YES. it could be done!
The main problem you're facing is that you need a white-space: nowrap this gets you about as far as hint.css by #robooneus. I can't figure out the centering either though. Any widths or margins are relative to the "Tooltip" link's width. A link to where you found the images might be helpful too so we can study the source.
EDIT1:
Additionally, a margin-left: -6px on the arrow (the :before) centers that on the word tooltip, it counteracts the move to the right by the border.
I don't think what you are trying to do (center the tooltip) is possible while having width:auto;.
If you declare a width, you can simple position the tooltip with:
.tooltip:hover:after {
width:100px; /* whatever you want */
left:50%;
margin-left:-50px; /* half the width */
}
EDIT
As #Alexander says in his answer, also repositioning your tooltip arrow using margin-left is a good idea, as it is slightly off center with just left:50%.
OK I have a fixed position header on my page. It is working correctly and everything... But I have a big problem with it -> When I try to make the browser window smaller, the content (in this case, the menu) gets out of the header's div.
How could I fix this? Is there any way to do it?
EDIT:
I want the header to stay in fixed position.
[if you want to check the problem out in action, go to: http://www.chilledlime.com and then make your browser window smaller]
Thanks in advance.
try this,
#logobox ul {
display: inline;
list-style: none;
padding-top: 15px;
width: 65%;
}
and you can add or not an "overflow:hidden" to "#logobox", it depends of what you are looking for
Remove position:fixed from #logobox:
#logobox {
background: none repeat scroll 0 0 black;
border: 0 none;
height: 60px;
margin-bottom: 20px;
margin-top: 10px;
position: fixed; <----- this -----
width: 100%;
z-index: 100;
}
After searching just about everywhere and validating my code a few times (and fixing the mistakes) I am at a loss as to what to do. I started programming this layout in firefox and everything looked perfect then went to check out Chrome and make sure it was ok and low and behold, Chrome screwed it up.
The site is here: http://semperfiwebdesign.com/slipstick/ The problem is with the margins on the footer and footer_top classes.
And I wrote down the code differences for the footer margins and they are stupidly big. Below is the CSS of the original:
.footer_top {
float: right;
margin-right: -26px;
margin-top: 69px;}
.footerlinks {
float: right;
margin-right: 120px; }
#text-14 {
float: right;
margin-right: -25px;
text-align: center;
margin-top: -69px;
}
They run in the order they appear with the footer. So footer_top is the box with the top and bottom border, footer links is the paragraph of non working links and finally #text-14 is the "ad" image below the links. I apologize for the weird class names but wordpress gave me a lot of them.
Now seeing that above here is what I figured out using firebug in Chrome to what Chrome wants the fix to be:
#text-14 {
margin-top: -190px; }
.footerlinks {
margin-top: -279px; }
.footer_top {
margin-top: -422px;}
Obviously this is a little absurd and I can't place these numbers into the real style sheet without truly messing up the entire layout.
I have literally searched just about everywhere and I'm at my wits end. I have no idea where to go with this. I would post the entire CSS but since it's wordpress site it's a little long. So if you need to see anything else please ask and I will post it.
Thank You
Megan
set #container -> position: relative;
#primary {
background-color: #002E5B;
color: white;
/*float: left;*/
height: 100%;
left: 0;
/*margin-left: -685px;
margin-top: -30px;
min-height: 2500px;*/
position: absolute;
top: 0px;
width: 168px;
}
and remove all references to #primary in 3c-c-fixed.css
Hope this helps