I'm making this website for school with html5 and css.
I used a table to put some photo's as a galery on my website but there's this margin on the right and i can't get rid of it.
Could anyone help me out?
As the question does not contain much info, best advice is to use Chrome DevTools and inspect the item in question. This way you can find the part of css that creates that extra margin. This does not fix the problem, but you will know the cause.
Click 'inspect' on top of your image to open the tool and then change the css (https://developer.chrome.com/docs/devtools/css/)
You can learn more about Chrome devTools from chrome developer pages at https://developer.chrome.com/docs/devtools/
Related
I've seen this effect on different websites. It is really subtle. How is it making this effect? It is not just the border but the empty space.
https://wordpress.com/
You will need to provide a link for an exact answer.
The easiest way to find out is to load the page in Chrome, press F12 to bring up the dev-tools, and use the elements inspector.
You can then select the html elements and it will tell you exactly what styles are used.
For more details, see Chrome's page on Inspecting the DOM and styles.
I'm a newbie and I have tried hard to get out a page.
After many trail and error this page finally looks "ok" though some of the part I don't know how I get it "right"
But when my page is opened in Firefox its bloody twisted! the table jumped out of boundary.
here is the format in chrome and IE(which is right)
and this is the format in firefox
the table shift out of the container and shift up.
I've search about use css reset but I dun't know how to do it,(what should I add to where)
or I should edit my html or css?which part of css I need to edit?
thanks in advanceļ¼
I have solved this by put all shifted table into a container to fix them.
and it works! thanks guys for helping me.
I have a site with a header div and an iframe used to display a map in the rest of the page, resizing to the maximum space it can under the header div.
I can get the method working on Firefox and Chome, but the iframe won't fill the div on IE9. Anyone know what the issue is? Rather than post html, here's a few links to the problem page and the old page I'm re-designing that does work in the same way in IE9.
New problem page (doesn't resize div in IE9):
http://permitmap.paydirt.co.nz/devtest/permitmap.html
Old page using the same technique that does work in IE9:
http://permitmap.paydirt.co.nz/
It might be my abuse of Twitter's Bootstrap? I use bootstrap it as it's meant to be used on normal content pages, but this page is a one-off that needs to display a map in as much of the page as possible while still following the styling for the header as the rest of the site.
And my use of tables for layout is also bad practice I know, but it's the only method I've found to achieve the desired effect with the iframe (believe me, I've tried a lot of ideas out that don't use tables!).
Thanks in advance any CSS / HTML gurus out there that can help!
How much time is lost making IE behave like other browsers!? Microsoft must cost the planet an incredible amount in lost man hours and extra expense supporting IE.
Ah, just noticed I had to solve this issue with the original page.
Removing the DOCTYPE element from the top of the page resolves the issue in IE9!
I'm creating a Wordpress theme from scratch, and so far everything's going well (it's my first time). However, underneath the admin bar I have 18 pixels of whitespace that wasn't in my static HTML page before Wordpress-ing it up. See below for a screenshot:
The blue part is the header, which should be flush with the admin bar. Is there any obvious reason for this happening?
I've had a similar thing happen, and I believe your issue is white space in your html. Go through and remove any extra spaces which may be rendering, especially before (or after) your <?php ?> tags.
maybe you could give us some more css. That could have thousands of reasons. If you dont work with firebug or other developer tools you should defenitley check that out. With this tools you can click at the place with the css element you want to see and see the attributes...
https://addons.mozilla.org/de/firefox/addon/firebug/
or click at chrome on the preferences of the browser...than "tools" and then "developer tools"
If you don't find the answer with this tools, post us some css from your stylesheet
We're short on information here. We need to see your CSS for an accurate answer.
Either way, if you log out, is the margin still there? I'm pretty sure it is. I actually think you're having a margin-top or padding-top on your container/header/whatever element is on top.
If there is no margin, then your CSS is probably interfering with the admin bar. You probably set a margin-bottom on an element that matches either your class, tag or structure of the admin bar.
If you still don't see anything, there is a very slim chance that it could be browser-related. If the other solutions didn't work, try adding a CSS reset.
I really like what this website has done with their CSS layout. Is there any tutorials anyone can point me to/an explanation of the layout - particularly how to get those smaller linked images to line up over the larger image. I'm a bit new to design. Let me know.
Site: http://www.fssjax.org
Thanks
Download Firefox's Web Developer Add-on and Firebug. (Chrome has something similar - likely other browsers do too).
After you install them, visit the page in question, and click Outline -> Outline Current Element. This will make it so anything you rollover will show you a red border around it - which will help you understand all the parts that make up their page.
Then, right-click on an element and click Inspect Element (at bottom of pop-up options). This will show you the HTML on the left and the CSS on the right - the perfect way to learn how they're laying out their page.
Download Firebug for Firefox, it allows you to easily inspect elements on a web page and see their css etc. Chrome also has a bult-in inspector.
Inspect an element, look at the css then Google to find out what the css does if you aren't sure.
Well ok, it's kind of a crap navigation though...
Anyway, the nav is built using the float (http://www.w3schools.com/css/css_float.asp) attribute. Two elements (the containers) are placed sequentially, then the first (the nav) is floated to the left of the second. There's also usage of the position (http://www.w3schools.com/cssref/pr_class_position.asp) attribute to move it over the picture.
And like the others said, use Firebug to figure out what everything is doing.