I have this page: http://www.problemio.com which has a black bar on top which has search and a dropdown menu. That looks reasonably ok.
But then I have another page like this: http://www.problemio.com/category.php?category_id=1 which has those two elements, but for some reason, the search appears on the top left of the bar.
How can I make these elements appear as they do on the home page of problemio.com ?
Thanks!
You have it absolutely positioned over your search box. Fix the absolute positioning and you should be fine.
you don't have you main_styles.css on the interior page, which has this style in it:
#search {
float: right;
margin-top: 7px;
width: 14em;
}
In your page which displays the search box as you desire [problemio.com] the div has the css value 'float: right'. This is the value you need on the other page.
div#search {
float: right
}
I just answered this in the comments of your other question, posted 5 min ago.
Your problem is that the home page div with class nav takes values from main_index.css and the other page takes values from main.css.
There are some inconsistencies between the two which might lead to the problem. Firebug or devtools will help you debug these kind of problems.
Related
I am started to use the wordpress theme "Pinnacle Theme" and optimized it for my needs. But now i got a problem i cant solve and hoped someone can help here.
I am trying to center the Large Menu (more Columns, then normal dropdown) to the parent item.
On my Website "Wilde-NaTouren" the Menu Item "Wandern + Trekking" is the Problem.
The normal ".kt-lgmenu" is normally full-width, but i try to give it a fixed width with following code
.kad-primary-nav .sf-menu>.kt-lgmenu>ul {
width: 520px!important;
}
now i have to center the .kt-lgmenu>ul to .sf-menu>.kt-lgmenu but i dont know how.
Here 2 Images to view how it looks right now, and what i want to have (sorry cant post Images).
Actual Situation ->
Result
Thanks for your Help
You have a relative li container already, which is the first step. The next step is to horizontally center the hidden dropdown using transformX:
.sf-dropdown-menu {
…
left: 50%;
transform: translateX(-50%);
}
I edited the site in the inspector and recorded it to show you how each rule is applied.
First, the left: 50% is applied. Then, we perform the negative translation. left refers to the parent element while transform refers to the target element (the actual hidden ul).
HTML fragments using links to pages using /#page-section to link to a specific section of a page is loading too low down the element for me.
For example I set up a <div id="engagment"> and then link to site.com/#engagement but instead of it linking to the top of the section like this:
what I want to happen
I get this: What actually happens
Is there anything I can do to fix this?
Thanks in advance. I'm new to html/web development.
That's because you have a fixed header which overlaps that section (which is actually positioned at the top of the window). So you need to create an offset.
A common way is to add an invisible pseudo element to the original target element of the link via CSS, like this:
#page-section::before {
display: block;
content: " ";
margin-top: -150px;
height: 150px;
visibility: hidden;
}
This will "extend" the element with that ID in a way that causes the anchor to be 150px above the main element, without any other visible changes. Adjust that value as you need it (i.e. to the height of your fixed header)
(A padding-top or margin-top would do something similar, but it would create an empty space in there, which you might not necessarily want)
I'm sitting here scratching my head. There's a problem which in itself is stupid, but I'm unable to fix it! (Yeah you can say I'm stupider than the problem).
Anyway, I have website in which the header menu works on all the pages except on shows pages (there is a group of (Approx 10 pages) which lists different show details).
I have gone through each and every line to detect the problem, but no luck! Even the error console doesn't help me in any way.
Guidance would be appreciated.
Link where the header works :- www.amiteshgrover.com/shows.php
Link where the header doesn't work :- Just go to the shows page (the link mentioned above) and click on any show. Then try to hover on the menu bar, nothing happens? Exactly!
Your #maincanvas is covering the entire header menu.
Change the CSS to:
#mainCanvas {
margin-top:60px;
padding-top:20px;
clear:both;
position:static;
min-width:940px;
z-index:100;
margin-left:125px;
}
The problem is that #main-canvas is in front of your menu, so when you try to click the menu, you're actually clicking #main-canvas.
#main-canvas has z-index: 100 and .nav has no z-index.
To fix it, add position: relative; z-index: 101; to .nav or change your padding-top from #main-canvas to margin-top, this way the #main-canvas won't be at the same position as your menu are.
It seems like sub_styles.css is loaded on all other pages but this one, this style file is what gives the menu it's looks and since it's not loaded on those pages, you see the problematic menu.
In the showcase example for http://fractalsoft.net/primeext-showcase-mojarra/sections/layout/tabbedLayout.jsf
tabs are centered right, I can't figure out how to do it.
I've tried searching and applying ui-tabs styling and I can change size easily but not the tab alignment.
For example this did not work: jQuery UI tabs aligned and sharing bar with a title
This seems to be the relevant css http://code.google.com/p/primefaces-extensions/source/browse/primefaces-extensions/trunk/src/main/resources/META-INF/resources/primefaces-extensions/layout/layout.css?r=1201
and pe-layout-tabbuttons is indeed present when I firebug the code but I can't figure out what to change.
I basically want this:
_________________|tab1|tab2|tab3|
instead of:
|tab1|tab2|tab3|_________________
cheers
It seems that this CSS does the magic:
.pe-layout-tabbuttons {
left: auto !important;
}
To see how to use CSS in JSF see here.
We are having a problem with our facebook like/send button, if you open: http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce: - click facebook send, the box is behind the facebook sidebar. Is there any way to: change the z-index - or to make the window pop up on the left?
I FINALLY FOUND THE ANSWER!! 1 1/2 Hours searching later.. just enter this code into your CSS file:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}
Hope this is what you were looking for, because it was exactly what I was looking for!
Make sure the parent/container element has css value "overflow:visible". It happens when "overflow:hidden". Hope this helps.
The way for it to popup up and over all of it is to make the like button work in XFBML. The iframe implementation is limited and if you change the height and width of it to just fit the button, the window will appear hidden.
I found this to work:
/* the below allows the fb:like iframe to show entirely instead of getting cropped off */
.fb-like iframe {
max-width: inherit;
}
/* the same issue with the "send" button */
.fb-send iframe {
max-width: inherit;
}
As you can see, it's asking those elements to "inherit" the width attributes of its parent elements.
Hope that helps.
I modified Shane's excellent solution to focus specifically on z-index:
css:
.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
z-index:8 !important;
}
The above css code shows the Facebook widget above everything else, without having to relocate or "overflow" anything.
This is a common problem all developers are facing. The popup has no way to detect its relative position on a page or in an iframe.
To get the desired results i always install my like, send buttons on the left side of my page.