I'm trying to get my navigation bar on my html page inline with my logo however it wont budge. I assume its because its following the flow of the html page, I dont really want to use absolute positioning, i did try and use the 'left' and 'top' properties in css however it didnt like it. Please could you advise where I'm going wrong?
Please see example here:demo of problem
P.s. The red was just to help me see what was going on.
There are quite a few errors with your HTML structure, some unclosed tags, and odd placement of elements. I have reworked the code for you to see an example that works for modern browsers. It's not the cleanest code but it should get you on the right path. http://jsfiddle.net/Lj9yn/18/
Related
Hoping someone who is familiar with YUI's CSS templates can help me debug a CSS problem. I'm using a free html resume template I found on the net, and I want to print it on paper via the browser's print function. I am not publishing this on the web. My problem is that there's about a 75-pixel gap between the top of the first div and the browser's display area that I can't figure out how to get rid of. Looking at the image below, there is a red arrow that points it out.
YUI CSS gap between top of screen and div
The template can be found hosted at this location.
What I've done:
Open the element inspector in the browser. Looks like the gap is between the <body> and first <div>.
Downloaded the YUI CSS file to look at. Checked out all the div selectors, nothing interesting.
Looked at the .yui-t7 class, nothing interesting there either.
My suspicion is that some of the float and clear are adding up and causing the space, but this is outside my expertise.
I was looking for height values or padding that would clue me in on how to change it, but honestly I don't see heights anywhere in either css file. I admit that I am not strong in CSS at all. I'm open to other solutions too, just enough to get the thing printed so I can send it out!
This BR Adds a little space
The margin on this div adds the rest of the space
How do I set a specific section of a page (div section?) to be on top of another section? I tried adding a z-index on the CSS file but it's not working. Or maybe I'm adjusting the wrong CSS file. In the end, I am confronted with:
--- which CSS file do I adjust? (I'm using Firebug but now I'm not sure if I'm using it correctly
--- what exact code adjustments do I need to do?
This is a sample page: http://www.criminal-lawyers.com.au/offences/aggravated-assault. The testimonial box to the lower right part of the page gets covered by the brown area when you scroll down. The goal is to put it on top so it's not covered whenever you scroll down (I know I should better position it "absolute" instead, but that's not the goal).
Any feedback would be appreciated. Thanks!
Finally had it solved! Many thanks to all your comments below. Although some answers did not exactly solve the problem, there were concepts behind them that really helped.
You need to set z-index:21 on the div with id it_widget_content-11-background-wrapper which is the main container of the sidebar widget. That should solve the issue.
it's pretty simple, to this widget-background-wrapper sidebar-widget-2 add z-index:9999. sorry i would rather comment this, but reputation < 50.
Remove position:fixed on the classes
CSS file - wp-content/themes/Criminal-Lawyers-it/style.css
sidebar-widget-1
and
sidebar-widget-2
They will remain in place.
Just realised it may not be exactly how you want it to look :) However, even with correct z-index, it may look weird having them overlap the footer...
So, CSS is not my strength. I need some help. I'm developing a Wordpress Plugin, and while I have the PHP down, I need help with getting the CSS to work with me. The page can be seen at http://www.airupt.com/?page_id=386. The issue is that I have called a shortcode for the search box below the call for the search results. This is for demo purposes only and the link will die soon after this is fixed.
Please type something in and search, you will see what I mean. The Search box background will appear at the top of the results, over the first one. The search box itself will appear after the results, as expected.
Can anyone tell me where the code went wrong and how it can be fixed? :D
Are you testing this in more than one browser? It doesn't seem like it. To answer your question:
give it a float:left;, like the rest of the elements in the <div class="entry">
.search-custom {
float:left;
/* all the other styles for search-custom that it normally has*/
}
I'd say rather set clear:both on .search-custom.
overflow:hidden will get you into more/different trouble because your sizes are a bit out
Set overflow:hidden; on your .search-custom div, then go get yourself a copy of Firebug. It'll get you out of 80% of these jams.
I have a site based on Solar Sentinel Joomla template: www.sism.org
I'm having some visualization problem with chrome.
The right side-bar is shifted down after all the content, while it should be floating on the right!
Could someone explain me why?
PS: the template css is pretty messy, and there is some custom css and js made by me inline at the beginning of the page.
The HTML is throwing a lot of validation errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sism.org%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
My guess is that Safari and Firefox are rendering around these errors in a way that is according to what you would expect. Try fixing the errors and seeing what happens. If nothing else, you'll have ruled out invalid HTML as the issue.
It looks like your div class="col3" is inside your div class="colright".
Try placing div class="col3" outside the other one.
Hi
I have this really strange error....
I have two elements: paragraph and a link with an image inside of it.
Paragraph overlaps the link this results in that the link becomes ineffective...
How fix this?
Thanks in advance ;)
EDIT: Instead I will give you a link to mi site : http://e-skaitykla.lt/ . Try the posts images are the links and I can press them only in Opera.
FIX: There was misunderstanding in positioning types. P was set to have relative positioning. When I added the same thing to A tag all fixed
Thanks everybody who tried to help ;)
Absent actual code, I'd guess that you're either positioning the paragraph and the link absolutely or you're floating stuff inside the paragraph and the browser isn't correctly calculating the dimensions of the elements. Strip off any CSS and add declarations back one at a time to debug.