Forum Moderators: not2easy
Test.html code
<body class="body"><div class="a">
<div id="a1">Area 1. Sample table type<div id="a1">Area 1</div>
<div id="a1">Area 1</div>
<div id="a1">Area 1</div>
<div id="a1">Area 1</div>
<br>
</div><form method="POST" action="http://www.testname.com/search.cgi">
<div id="a2" style="width: 200px; height: 50px">Area 2<br> Search Box is suppose to be here.<br><input type="text" name="T1" size="14" class="i1">
<input type="submit" value="Submit" name="B1" class="i1">
</div>
</form><div id="a3">Area 3</div>
<div id='a1'>test</div>
<p><div id='a1'>test</div></p></div>
</body>
CSS for the page.
body {
margin: 0px;
padding: 0px;
color: #A52A2A;
background: #ffffff;
font: normal 11px tahoma, geneva, verdana, sans-serif;
background-color : #F2F2F2;
width : 770px;
text-align : center;
}.a {
width : 750px;
border-width : 1px;
border-style: solid;
border-color : Black;
padding : 0px;
}#a1 {
width : 400px;
float : left;
}
#a2 {
width : 200px;
float : left;
}
#a3 {
width : 145px;
float : left;
}#a4 {
width : 100px;
float : left;
}
Now I am wanting to remove repetation of float : left; from all id's. Also, I am wanting the page to be center aligned in the browser. So how can this be done.
Thank you for the help.
First off I use (id) for each section that I am working with. I will name the i.e. sidebar - content - header and so on. From there I use the margin feature to line everything up the way I want it.
If I have a side bar that is 200px wide, I will give the content a margin of 205px. and it will drop it right next to sidebar.
now the same can be done with a div inside another div.
If you want to float everything but do not want to retype the code for each style
like
#a1 {
width : 400px;
float : left;
}
#a2 {
width : 200px;
float : left;
}
#a3 {
width : 145px;
float : left;
}
#a4 {
width : 100px;
float : left;
}
Then Combine them
#a1,#a2,#a3,#a4{float : left;}.
I do not like to use the float feature because it does cause problems with certain web browsers.
If this is not what you had in mind repost and I will try to give you more detail.
Hope this helps
You're right - you can only use "ID" once per page - you've got it backwards. HTML should look like so:
<body>
No need to call a "class" for your body tag - especially when you don't have a class for it set in your CSS :)
<div id="a">
<div class="a1">Area 1. Sample table type
<div class="a1">Area 1</div>
<div class="a1">Area 1</div>
<div class="a1">Area 1</div>
<div class="a1">Area 1</div>
<hr />
</div>
If you'll note, I made a couple of slight changes up there - I changed your <br> tag to <hr />. The CSS to go with it should look like so:
#a {
width : 750px;
border-width : 1px;
border-style: solid;
border-color : Black;
padding : 0px;
}
.a1 {
width : 400px;
float : left;
}
.a2 {
width : 200px;
float : left;
}
.a3 {
width : 145px;
float : left;
}
.a4 {
width : 100px;
float : left;
}
hr {
display:block;
visibility:hidden;
clear:both;
}
the <hr /> tag should clear your floats for you.
Hope that helps!
body {
margin: 0px;
padding: 0px;
color: #A52A2A;
background: #ffffff;
font: normal 11px tahoma, geneva, verdana, sans-serif;
background-color : #F2F2F2;
width : 770px;
text-align : center;
} [b]#container {
width : 770px;
padding : 0px;
margin: 0 auto;
}[/b]
.a {
width : 750px;
border-width : 1px;
border-style: solid;
border-color : Black;
padding : 0px;
}
#a1 {
width : 400px;
float : left;
}
#a2 {
width : 200px;
float : left;
}
#a3 {
width : 145px;
float : left;
}
#a4 {
width : 100px;
float : left;
}
<body class="body">
[b]<div id="container">[/b]
<div class="a"> <div id="a1">Area 1. Sample table type<div id="a1">Area 1</div>
<div id="a1">Area 1</div>
<div id="a1">Area 1</div>
<div id="a1">Area 1</div>
<br>
</div>
<form method="POST" action="http://www.testname.com/search.cgi">
<div id="a2" style="width: 200px; height: 50px">Area 2<br> Search Box is suppose to be here.<br>
<input type="text" name="T1" size="14" class="i1">
<input type="submit" value="Submit" name="B1" class="i1">
</div>
</form>
<div id="a3">Area 3</div>
<div id='a1'>test</div>
<p><div id='a1'>test</div></p>
</div>
[b]</div>[/b]
</body>
because you have given the div class a fixed width, it takes up equal margin on either side when assigned an auto margin for left and right.
Here is the header where I plan to use float function (along with main body)
[softwaredevil.com...]
Is there a way to get the page center aligned on both Opera & Firefox too?
Thanks for the help.
Did you try navjotpawera's suggestion - encompassing the whole thing in a containment wrapper? There is absolutely no reason why what he suggested would not work in all browsers. All you have to do is stick it all in an outer cointainting wrapper and set it to "margin:0 auto" and it will center everything on the page.
You're right - you can only use "ID" once per page - you've got it backwards. HTML should look like so:[snip]
<div id="a">
<div class="a1">Area 1. Sample table type
<div class="a1">Area 1</div>
<div class="a1">Area 1</div>
<div class="a1">Area 1</div>
<div class="a1">Area 1</div>
<hr />
</div>
This--sorry!--is poor advice. Everybody repeat after me:
Do not use classes to define the default state of an element.
Any time you look at a piece of markup and find that the same class is applied to the same type of element repeatedly, it's a good sign that the author hasn't fully grasped the power of specificity in CSS.
Also, the markup is wrong, but I expect that part is a copy and paste error. In any case, given the sample markup, this would be a better way:
HTML
<div id="a">
<div>Area 1</div>
<div>Area 1</div>
<div>Area 1</div>
<div>Area 1</div>
<div>Area 1</div>
<hr />
</div>
CSS
#a div { /* Styles for 'Area 1' divs */ }
This works perfectly well in all situations except where there were other divs inside #a, but in that case, I'd simply decide which set of divs is the default set and attach classes or ids to the others
Do not use classes to define the default state of an element!
-b
Thank you for the reply, however I am little lost.
What if the areas in below field are suppose to have differnt width and bg colors,
<div id="a">
<div>Area 1</div>
<div>Area 2</div>
<div>Area 3</div>
<div>Area 4</div>
<div>Area 5</div>
<hr />
</div>
?
Can you please help me understand how do you expect that work?
Thank you for the help and input.
encompassing the whole thing in a containment wrapper? There is absolutely no reason why what he suggested would not work in all browsers. All you have to do is stick it all in an outer cointainting wrapper and set it to "margin:0 auto" and it will center everything on the page.
In the existing test page, I didn't got the required result with that code, however I will try it on a new page to see if it works.
Also, on the test page I was able to get make it appear center aligned on IE + Opera + Firefox, by removing width property from body tag.
Thank you for the reply, however I am little lost.What if the areas in below field are suppose to have differnt width and bg colors,
Good question. That is a case where you might have different classes or ids on a bunch of similar elements--but you'll notice the post I was responding to suggested identical classes on multiple similar elements.
Incidentally, in a situation like this one, you could combine both approaches. Assuming that the several areas have some similar properties--maybe they're all the same width, or they all have the same font treatments--you could define all the properties that are the same in one place and only define the different stuff in the class declarations. For example:
HTML
<div id="a">
<div class="lorem">Lorem</div>
<div class="ipsum">Ipsum</div>
<div class="dolor">Dolor</div>
<div class="sit">Sit</div>
<div class="amet">Amet</div>
</div>
CSS
#a div { /* Properties common to all divs inside #a */ }
.lorem { /* Properties unique to items with this class */ }
.ipsum { /* Properties unique to items with this class */ }
.dolor { /* Properties unique to items with this class */ }
.sit { /* Properties unique to items with this class */ }
.amet { /* Properties unique to items with this class */ }
-b
#a div { /* Properties common to all divs inside #a */ }
Thank you for the help, I very much appreciate it.
For me, the elusive key was to put a width on the #buttons div. Without it, the #buttons element stretches full width and all my icons line up neatly against the left. With a width, they center and wrap to the next line naturally.
(btw: I used "icon" as a default style for all elements within #buttons b/c if I were to change my element type from div's to li's to spans to whatever, my css won't need to be updated.)
<style>
body {
text-align: center;
}
#head, #content {
width: 768px;
}
#head {
height: 168px;
background-image:url(kioskheader.jpg);
}
#content {
background-image:url(kioskbg.jpg);
text-align: center;
}
#statusbar {
height: 70px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
text-align: center;
padding-top: 16pt;
}
#buttons {
text-align: center;
width: 300px;
}
#buttons .icon {
border: 1px solid black;
width: 70px;
float: left;
text-align: center;
}
</style>
<body>
<div id="head"></div>
<div id="content">
<div id="statusbar"></div>
<div id="buttons">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
<br style="clear: both;"/>
</div></body>
(btw: I used "icon" as a class name b/c if I were to change my element type from div's to li's to spans to whatever, my css won't need to be updated)
You haven't been paying attention ;-)
Do not use classes to define the default state of an element!
Your markup:
<div id="buttons">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
...simply has no need for 'class="icon"'--it's just code bloat. You could do this:
HTML
<div id="buttons"><div>...</div>
<div>...</div>
<div>...</div></div>
CSS
#buttons div { ... }
Then, if your markup did change to a list, your css would only need the following change:
CSS
#buttons li { ... }
Remember that one of the key advantages to css is the ability to make global changes to a site by making small changes in the css file...
-b
body {
text-align:center;
}
Firefox and IE6 don't need this to center, but some other browsers (especially IE5) do, or it won't center your page.
