CSS centering problems
I am studying CSS and Jquery. Here is my simple practice page.
[1] First I want to center all four DIVS on the page.
[2] Then I want to center the words, "box1", "box2", etc horizontally AND vertically within their parent DIV.
Can anyone show me how to do this? Below is the code I have so far. I made SOME progress, but not my desired results.
Thanks!!
[1] First I want to center all four DIVS on the page.
[2] Then I want to center the words, "box1", "box2", etc horizontally AND vertically within their parent DIV.
Can anyone show me how to do this? Below is the code I have so far. I made SOME progress, but not my desired results.
Thanks!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery playground</title>
<style type="text/css">
.center
{
margin:auto;
}
#box1 {
background-color: #FFC;
}
#box2 {
background-color: #6F3;
}
#box3 {
background-color: #F6F;
}
#box4 {
background-color: #CF3;
}
.main-box {
height: 300px;
width: 200px;
border: 1px solid #000;
float: left;
margin-left: 10px;
}
#discount-container {
clear:both;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="center" id="wrapper">
<div id="menu-box">
<div class="main-box" id="box1">Box 1</div>
<div class="main-box" id="box2">Box 2</div>
<div class="main-box" id="box3">Box 3</div>
<div class="main-box" id="box4">Box 4</div>
<div id="discount-container">Your Discount is:</div>
</div>
</div>
<script src="jquery.js"></script>
<script>
$(function() {
$(".main-box").click( function() {
// Do something here
});
});
</script>
</body>
</html>ASKER
Thanks. The tips provided on that link are not working.
The magin 0 auto rule appears to do nothing.
Why is so hard to simply center these four boxes? Hmmmm, I must be really missing something fundamental.
The magin 0 auto rule appears to do nothing.
Why is so hard to simply center these four boxes? Hmmmm, I must be really missing something fundamental.
I must be really missing something fundamental
You are not paying attention to what I said.
The result of margin:auto depends on the other attribute being applied.
If you want to apply things without giving them a context where they work then you are going to spend a lot of time wasted with no success.
When you are ready to deal with the structure instead of one line of code, let me know and I will be glad to help.
Cd&
You should listen to @COBOLdinosaur , he's trying to help you. I read your question and decided that I didn't want to have to rewrite all of it. Nothing in CSS and HTML stands alone, it always depends on the elements and attributes around it.
Cd&, your comments are even more interesting than Ray's.
Cd&, your comments are even more interesting than Ray's.
ASKER
When you are ready to deal with the structure instead of one line of code, let me know and I will be glad to help.
I think you are participating in the wrong forum with advice and comments like that, Cobol Dino.
For some reason you must think I am writing in this thread for some other reason than I do not understand how to accomplish a solution to my problem.
Putting all that aside, I am still stuck. When I gave my wrapper div its width and set margin to 0 top and bottom, and auto left and right, I am still not seeing the desired results.
I am wondering if , again, i may be missing something that is critical.
I'll keep trying. If anyone else has any advice I would sure appreciate it. I don't need links though, I have read them.
Regards,
I think you are participating in the wrong forum with advice and comments like that, Cobol Dino.
For some reason you must think I am writing in this thread for some other reason than I do not understand how to accomplish a solution to my problem.
Putting all that aside, I am still stuck. When I gave my wrapper div its width and set margin to 0 top and bottom, and auto left and right, I am still not seeing the desired results.
I am wondering if , again, i may be missing something that is critical.
I'll keep trying. If anyone else has any advice I would sure appreciate it. I don't need links though, I have read them.
Regards,
ASKER
whew. found it.
embarrassingly enough, a typo in my external class file.
embarrassingly enough, a typo in my external class file.
Centering the 'div's works fine for me when I do it...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery playground</title>
<style type="text/css">
#wrapper
{
width:850px;
margin-left:auto;
margin-right:auto;
}
#box1 {
background-color: #FFC;
}
#box2 {
background-color: #6F3;
}
#box3 {
background-color: #F6F;
}
#box4 {
background-color: #CF3;
}
.main-box {
height: 300px;
width: 200px;
border: 1px solid #000;
float: left;
margin-left: 10px;
}
#discount-container {
clear:both;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="menu-box">
<div class="main-box" id="box1">Box 1</div>
<div class="main-box" id="box2">Box 2</div>
<div class="main-box" id="box3">Box 3</div>
<div class="main-box" id="box4">Box 4</div>
<div id="discount-container">Your Discount is:</div>
</div>
</div>
</body>
</html>
Good, I was still typing when you posted.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Oh, it's good Cd&. A little direct for some peoples taste... but i don't have a problem with it.
oops, I guess I type too slow.
Cd&
Cd&
Oh, I thinking he wanted them one on top of the other.
Cd&
Cd&
ASKER
@Cd& - I think you could have worded your comments in a more professional manner earlier in this thread.
Putting my opinion aside, your solution was most helpful.
If we run across each other in the future here, maybe we can put aside the sarcasm - as I promise not to post questions that I am not "ready to deal with". I was stuck, and that's why I became a member here, to obtain helpful advice. And for that, ultimately, I thank you.
Regards,
Putting my opinion aside, your solution was most helpful.
If we run across each other in the future here, maybe we can put aside the sarcasm - as I promise not to post questions that I am not "ready to deal with". I was stuck, and that's why I became a member here, to obtain helpful advice. And for that, ultimately, I thank you.
Regards,
@edvinson,
I am sorry if you were offended by my approach. I am what I am... an aggressive attacker of problems. It is not the first time someone has not liked what I posted and it is pretty much a guarantee it won't be the last. There are some on this site who don't like me, but they still want me to work on their problem. I've answered almost 5000 questions on EE and at least an equal number on other sites. In probably 20-25% someone didn't like something I said. It's not personal, I simply expect the person asking the question to be helping me solve their problem. It's just the way I am.
I'll be happy to help on any future problems you have, but don't get upset if I'm aggressive, that is how I solve problems.
Cd&
I am sorry if you were offended by my approach. I am what I am... an aggressive attacker of problems. It is not the first time someone has not liked what I posted and it is pretty much a guarantee it won't be the last. There are some on this site who don't like me, but they still want me to work on their problem. I've answered almost 5000 questions on EE and at least an equal number on other sites. In probably 20-25% someone didn't like something I said. It's not personal, I simply expect the person asking the question to be helping me solve their problem. It's just the way I am.
I'll be happy to help on any future problems you have, but don't get upset if I'm aggressive, that is how I solve problems.
Cd&
.center
{
margin:auto;
}
does absolutely nothing
To center the boxes they must have a width and margin
#box1 {
background-color: #FFC;
width:100px;
margin:auto;
}
That will only center them inside their container.
If you want them to center in the page then all of their containers must be centered the same way.
I suggest you spend a little time with this: http://www.w3schools.com/c
Cd&