Hi.
PLEASE HELP!
See this: http://www.jadspecialty.com/css_test.html
Please scroll to bottom.
This is a mess.
I am trying to recreate my table as CSS.
What I had was easy:
address 1adress 2
I have 2 street addresses. Each in a div. both centered via the wrapper div.
Each div should be 200px in width as my td tags were.
The multple lines of text sit in the div.
The two divs sit side by side.
What I get is not two divs aligned in the center of my page within the wrap div,
What I get are two divs side by side at the left of my page outside of the wrap div box.
WTF???
Here's my code:
#wrap1{
text-align: center;
vertical-align: middle;
margin: 20px auto 20px;
border: 5px solid red;
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
}
.contact_info{
border: 1px solid green;
/*display: inline;*/
float: left;
width: 200px;
margin: 0 auto;
}
PLEASE HELP!
Probably an easy fix
I noticed your floating them to the left this means they wont be centered unless you add a margin or padding.
If this doesn't work just add:
align="center"
To your div tag this should center it but only if they're not floated to the left.
If this works then you will have to remove your align center and change the margin-left and margin-right to auto.
Also yo have...
Also you have 2 html errors to do with your doctype you might want to sort those out.
What Doctype? it's worth
What Doctype? it's worth checking these things!
Kurson you need to place a dtd on your pages other wise you will have significant problems, for the low down on doctypes have a hunt around the forum for posts on the subject.
RE: Doctype
RE:
I know this is off the original topic. But This is what you're referring to, correct?
Note: This is added by Dreamweaver when I first develop a page.
I have no idea what it is. What should I be doing?
Could you please cut and paste a correct example with an explanation for why I should be writing it that way.
Most appreciated.
Original issue
Hi Josh.
I thought all I need to do is add:
margin: 0 auto;
Auto taking care of the sides and supposedly centering the divs within the wrap div. Nadda.
I tried align="center" in the wrap div...didn't work.
Original issue
Hi Josh...
A follow-up
http://www.jadspecialty.com/css_test2.html
This is my new attempt.
This is the CSS:
#wrap1{
/*text-align: center; */
vertical-align: middle;
margin: 20px auto 20px;
border: 5px solid red;
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
}
.contact_info{
border: 1px solid green;
display: inline;
/*float: left;*/
width: 200px;
margin: 0 auto;
}
And the front end:
998 C Old Country Road, Suite 329
Plainview, NY 11803
998 C Old Country Road, Suite 329
Plainview, NY 11803
NOTE: it looks right in IE6.
HOWEVER: In Firefox my width for the address boxes divs are ignored.
In Firefox instead of being width: 200px, the div expands out. Awful
Why?
Thank you in advance everyone for helping me address this issue.
I'm on my laptop but.....
I will have a play in a second on my computer. Theres a few things I can see going wrong.
And this is just a thought try changing your margins as so:
margin-left: auto; margin-right: auto;
You could also try the min-width and the min-height comands to see if this forces it to the right height.
As I say I will have a play with it in a second.
kurson wrote:RE: I know
RE:
I know this is off the original topic. But This is what you're referring to, correct?
Note: This is added by Dreamweaver when I first develop a page.
I have no idea what it is. What should I be doing?
Could you please cut and paste a correct example with an explanation for why I should be writing it that way.
Most appreciated.
Actually I'm afraid this is very much on topic; a DTD is fundamental to how your page is displayed, without one you render in quirks mode allowing browsers to place their own interpretation on your properties, this is especially significant in the IE family of browsers. Without this element defined for a page the asking of questions pertaining to correcting issues is to a large extent pointless, browsers must all render in Standards mode providing a level playing field that we know handles certain aspects the same across browsers.
The element you have mentioned is not a DTD that is a character set declaration a whole different thing (please be cautious about letting apps automatically place elements on the page unless you know what they are and the reason for them, google meta character sets.)
I had hoped that you might have noticed the link in my sig line which links to an article on Doctypes or that you had perhaps had a hunt around the forum in areas such as 'How To' section where we keep a few more detailed posts on various subjects to help people.
I would rather not cut and paste an example at this stage as this is the easy way out please do some investigation yourself first, then when and if you have further questions I or any of the other older hands will be glad to explain further.
Ok I solved the problem on FF
Ok I solved the problem on FF I haven't checked any other browsers YET
CSS:
.text_white { font-family: Arial; font-size: 12px; font-style: normal; font-weight: normal; color: #FFFFFF; } .text_white_bold { font-family: Arial; font-size: 12px; font-style: normal; font-weight: bold; color: #FFFFFF; } .text_white_14 { font-family: Arial; font-size: 14px; font-style: normal; font-weight: bold; color: #FFFFFF; } .text_white_18 { font-family: Arial; font-size: 14px; font-style: normal; font-weight: bold; color: #FFFFFF; } .text_header { font-family: Arial; font-size: 28px; font-style: normal; font-weight: bold; color: #FFFFFF; } .text_table_header { font-family: Arial; font-size: 16px; font-style: normal; font-weight: bold; color: #000099; } .text_table_cell1 { font-family: Arial; font-size: 12px; font-style: normal; font-weight: bold; color: #000000; background-color: #CCFFFF; } .text_table_cell2 { font-family: Arial; font-size: 12px; font-style: normal; font-weight: bold; color: #000000; background-color: #FFFFFF; } .table_cell_FFFFCC { font-family: Arial; font-size: 12px; font-style: normal; font-weight: bold; color: #000000; background-color: #FFFFCC; } .table_cell_E8F1F7 { font-family: Arial; font-size: 12px; font-style: normal; font-weight: bold; color: #000000; background-color: #E8F1F7; } .table_cell_BDE3F2 { font-family: Arial; font-size: 12px; font-style: normal; font-weight: bold; color: #000000; background-color: #BDE3F2; } .text_phone_navy { font-family: Arial; font-size: 14px; font-style: normal; font-weight: bold; color: #000099; } .text_title_navy { font-family: Arial; font-size: 12px; font-style: normal; font-weight: bold; color: #000099; } .text_title_blue { font-family: Arial; font-size: 12px; font-style: normal; font-weight: bold; color: #0000FF; } .wrap { margin:0px auto; padding:0; width:100%; font-family: Arial; font-size: 14px; font-style: normal; font-weight: bold; color: #FFFFFF; } #wrap1{ /*text-align: center; */ vertical-align: middle; margin-left: auto; margin-right: auto; border: 5px solid red; font-family: Arial; font-size: 14px; font-style: normal; font-weight: bold; color: #FFFFFF; float: none; margin: 0 auto; padding-left: 28%; } .contact_info{ border: 1px solid green; width: 200px; margin: 0 auto; display: horizontal; float: left; } .table_structure1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: bold; color: #000000; background-color: #FFFFFF; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-top-color: #33CCFF; border-right-color: #000066; border-bottom-color: #000066; border-left-color: #33CCFF; } .table_structure_E8F1F7 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: bold; color: #000000; background-color: #E8F1F7; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-top-color: #33CCFF; border-right-color: #000066; border-bottom-color: #000066; border-left-color: #33CCFF; } a.main:link {color: #00FFFF; text-decoration: underline; } a.main:visited {color: #00FFFF; text-decoration: underline; } a.main:hover {color: #FFFFCC; text-decoration: underline; } a.main:active {color: #FFFFCC; text-decoration: underline;} a.tablelink1:link {color: #0000ff; text-decoration: underline;} a.tablelink1:visited {color: #0000ff; text-decoration: underline;} a.tablelink1:hover {color: #FF0000; text-decoration: underline;} a.tablelink1:active {color: #FF0000; text-decoration: underline;} a:link { color: #00FFFF; } a:visited { color: #00FFFF; } a:hover { color: #FFFFCC; } a:active { color: #FFFFCC; }
Well then I would check in
Well then I would check in those other browsers Josh.
We need to halt proceedings here and both parties must address the issue of doc type switching.
@Kurson the reason that your width:200px wouldn't work was that you had told that element to behave as an 'inline' one inline elements do not honour widths.
Centering elements with auto margins is an issue if you have no DTD due to IE rendering in quirks mode where it doesn't understand margin:auto; value.
Attributes such as align are generally frowned upon and deprecated in strict DTD's please don't get in the habit of using them.
Those style rules shown have a few issues to deal with but please sort the DTD out first and then they can be addressed.
Patience is a vertue as they say :D
No I'm stuck at my Dads house at the moment so I will do it when I get home.
DOCTYPE
Hu Hugo.
kay, so I weent to the link. I cut and paste in every single doctype.
All of them made my layout worse in IE6.
Without a DOCTYPE.. width: 200px; works in IE6 and is ignored in Firefox.
When I include any of the reccomended DOCTYPES on that page you referred to me, it width: 200px; is ignored in all browsers.
I appreciate your continued replies, but really, please, if you know the anwser to this mystery I'd appreciate it if would not be coy and jut cut and paste in the answer for me to test.
Thank you.
DOCTYPE
Hu Hugo.
kay, so I weent to the link. I cut and paste in every single doctype.
All of them made my layout worse in IE6.
Without a DOCTYPE.. width: 200px; works in IE6 and is ignored in Firefox.
When I include any of the reccomended DOCTYPES on that page you referred to me, it width: 200px; is ignored in all browsers.
I appreciate your continued replies, but really, please, if you know the anwser to this mystery I'd appreciate it if would not be coy and jut cut and paste in the answer for me to test.
Thank you.
Nadda
Hi:
margin-left: auto;
margin-right: auto;
This doesn't work when added to #wrap1 for css_test1.html. neither did adding min-height: 150px; for .contact_info.
Follow-up Problems.
Hi.
Thank you for the continued support.
So I cut and paste you code in for:
#wrap1{
/*text-align: center; */
vertical-align: middle;
margin-left: auto;
margin-right: auto;
border: 5px solid red;
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
float: none;
margin: 0 auto;
padding-left: 28%;
}
.contact_info{
border: 1px solid green;
width: 200px;
margin: 0 auto;
display: horizontal;
float: left;
}
Two issues.
1. RE: padding-left: 28%;
This seems like a patch more than a resolution.Yes, it's more centered BUT it is off center.
I'm looking to evenly balance out the left and right sides and literally center the object.
The results of padding-left: 28%; is less than desireable at:
http://www.jadspecialty.com/css_test3.html\
2. The Contact Divs are wrapped with the wrap gifs yet are not constrained within the Wrap div, they instead float beyond the bottom margin.
Very frustrating.
All I want to do is forgo using a table with two cells centered.
Isn't there a simple, industry standard way of doing this?
Kurson I keep seeing table
Kurson I keep seeing table layouts, if you wish this resolved please produce a basic tableless layout with a overall wrapper to hold all elements and everything else nested within; all text correctly described within paragraph tags, all tags removed, document complete with all proscribed elements i.e DTD then we can help you with what is a very simple problem and to which the centering aspect has been addressed earlier i believe, but regardless produce a basic semantic layout and we'll then help you with requirements.
Hi Kurson, First off you
Hi Kurson,
First off you need to give your file a document type. For beginners I always recommend the below, copy and insert this at the very top of your file, directly before the opening tag.
Why do I recommend this document type, because its is more forgiving than a strict one. Once you have the hang of html then moving to a strict doctype is a less frustrating experience. The loose document type will allow you more flexibility if you are still learning html.
Next amend your 'wrap1' and 'contact_info' css to as below:
#wrap1{
width: 400px;
margin: 0 auto;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
}
.contact_info{
float: left;
width: 200px;
color: #fff;
text-align: center;
}
Thats should get you to where you want to go, or at least nearer. YOU MUST include the document type as mentioned above for this to work