Here is my fiddle:
https://jsfiddle.net/2msz53n9/
And here is the problem:
* {
margin:0;
padding:0;
overflow:hidden
}
I need to use this for the rest of my site. So I cannot remove it. However, on my fiddle, I want the border to show also on the right, but now because of the above, it doesn't. I would like to have a solution where I can keep the above code, however, if not, I will have to review my whole site and re-do the CSS, I guess. I haven't been able to get the border on the right without removing that wildcard code though. Anyone?
You can add box-sizing:border-box; to your list of wildcard rules:
* {
margin:0;
padding:0;
overflow:hidden;
box-sizing:border-box;
}
jsFiddle example
Bootstrap actually does this and you can read more here.
The actual width of .rightcont is 328px including 1px border on left and right.
So either increase width of .right to 328
Or add box-sizing: border-box; to .rightcont
Related
Everything I've tried on my own so far has ended in complete failure.
EXAMPLE: http://broadleafdesign.ca/index-broken-on-purpose-.html
This looks perfectly fine, centered perfectly on my monitor at fullscreen in Chrome. Any other monitor, or size of the browser window, off centers the paragraphs.
How do I go about making these paragraphs resemble this picture, the arrows representing whitespace?
Note: I'd like the containers/divs to be centered, though the picture I made doesn't represent that very well:
Here is some basic CSS from an example that I put up for you on jsfiddle http://jsfiddle.net/Pm56t/
A basic way to achieve this layout would be to declare the widths of the 3 elements as 33.333%, then add float:left. Pad to taste..
* {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.container {
width:100%;
}
.box {
float:left;
width:33.333%;
padding:20px;
}
Defining the margins and div elements as percentages might also work.
This has probably been asked a million and one times, but I would appreciate it if someone could explain the behavior of the divs to me..
I have a container div which I am aligning in the center of the page, which has a gap between the top and the top of the page. I want it to be flush against the top of the page. I am assuming that there is some sort of margin or padding that I need to remove but I can't think what it could be. Even with nothing in the div there is still a gap.
<body>
<div id='mainContent'>
</div>
</body>
body
{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
}
#mainContent
{
width:1200px;
height:500px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
Here is a JSFiddle to give you an idea of what I mean.
Can someone please explain why the div is pushed down as it is? Is there a robust solution that doesn't affect any content that is put in the div??
NOTE: If the screen width is smaller than the div width, there will be a gap on the left hand side aswell.
You need to reset the default margin of the body that is 8px aprox.
body,html {
margin:0;
padding:0;
}
The Demo http://jsfiddle.net/H76bq/3/
For default all elements has some properties:
http://www.w3.org/TR/CSS21/sample.html
You can reset this in your own css.
You could use a star selector and reset everything so that you can set everything yourself:
* { margin: 0; padding: 0; border: none; }
Or if you wanted to use a master reset stylesheet you could use Jonathan Neal's Normalize CSS via Google CDN.
Normalize.css is a customisable CSS file that makes browsers render all
elements more consistently and in line with modern standards. We researched
the differences between default browser styles in order to precisely target
only the styles that need normalizing.
Just put this in your head:
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
Add margin: 0px; to body like below. The reason is because body by default introduces a margin.
body{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
margin: 0;
}
Demo Fiddle
It can also been caused by line-height property.
So set the line-height to as you wish!
I had similar problem and I solved it by setting negative margin. You could test the below setting.
#mainContent {... margin-top:-25px;}
I often look at code and see stuff like "-moz such and such CSS rules, -webkit such and such CSS rules" and think I need to do something like that in my case.
My page http://scope-stage.scholastic.com/ needs to appear as it does in firefox, but when I look at it in Chrome and Safari, it's completely backwards. In Firefox I could not get the margins how I wanted them to be with regular margins, that is - I had to use negative integers for the margins. What can I do to have the margins be the same in all browsers?
Here's my CSS on just one of the divs (I think I can apply any answer to the rest)
.colorScheme {background-color:#B9E9DA; width:500px; height: 340px; margin-top:-45px; padding:0;}
but you will clearly see the brokenness of it when you look at it in any browser other than FF.
Thanks for looking and helping.
I'm not 100% sure on this you will have to test but I believe you can solve your problem as follows.
* {
margin:0;
padding:0;
}
.colorScheme {
background-color:#B9E9DA;
width:500px;
height: 340px;
margin-top:-45px;
padding:0;
}
This will set all elements to have no padding or margin. Giving you control using CSS for all paddings and margins.
Alternatively you can just assign hardcoded to the single class but you will need to assign a value to EACH margin/Padding as follows
.colorScheme {
background-color:#B9E9DA;
width:500px;
height: 340px;
margin:-45px 0 0 0;
padding:0;
}
Try those and see if they work out for you.
Im trying to align multiple Images or DIVs.
i get the content from wordpress.
#wrapper{
width:800px;
}
.image{
width:125px;
height:100px;
float:left;
margin-left:10px;
}
This causes the last image to go to the next line.
i found
#wrapper div:first-child{
margin-left:0px;
}
helps me with the first line but the next lines are "broken" again.
how can i align 6 images in a row with ^n Pictures?
That's indeed a common design problem. I used to fix it by adding 10px to the container, but nowadays I always use a jQuery fix:
$("#wrapper .image:nth-child(6n+1)").find('img').css('margin-left','0');
See jsfiddle here
Or you could do it CSS only, but this will only work in real browsers (not in <=IE8)
.image:nth-child(6n+1) {
margin-left:0px;
}
See jsfiddle here
Sounds like the total width of the images, padding and margin are too wide for your container width. Try increasing the container width to confirm this.
I'm using VS2010,C# to develop my ASP.NET web app, I'm using a .js file to display some small tool tips in my program, there is a CSS file also that should be used in my ASPX files so that this tooltip is displayed correctly, but when I use this CSS all my page (including tables) are displayed at left side of page while I've aligned them to be at the center of page, I'm not an expert in CSS files, how can I fix this problem, here is my CSS file:
* {margin:0; padding:0}
body {font:12px/1.5 Tahoma, Arial, Helvetica, sans-serif; background:#FFF}
#text {margin:50px auto; width:500px}
.hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer}
#tt {position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; background:url(images/tt_top.gif) top right no-repeat; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF}
#ttbot {display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat; overflow:hidden}
#tt is set to position: absolute. This is probably the cause of your problems since you are not telling it what position you want so I suspect it is defaulting to top left.
What CSS are you using to align things to the center? And what is your HTML structure? I am assuming that #tt is ta main container on your page...
To actually find out which part of your CSS is wrong though then the easiest way of doing it is to just remove each line/property from your CSS file and retest until the positioning stops dying.
Also if that CSS is there purely for your tooltip then you probably shouldn't be using a * selector. Something more specific like .Tooltip * would minimise any interference from anyting outside.
And in general if styles are meant to only apply to one given piece of content I would use a class (or id) on that content as a prefix to every selector to guarantee that you cannot possibly change anything outside of that.
Going on your code and comments, all I can see that would be effecting the layout of your page is that you are resetting all the margins and padding on your elements using the style
* { margin: 0; padding: 0 }
Also since you are not properly centring your elements (using a wrapping <div> with a fixed width and margin: 0 auto;, then it seems as though it is just your margins and padding that are now off.