February 19, 200917 yr What's up Internet, I'm new to the forums and am looking to give and receive helpful advice on a new little venture. I started working for a friend of mine's web design firm working with databases and SQL, really just data entry. I never knew much about coding and graphics, but I always had a interest in web design. I picked up SQL quickly and had began learning HTML, CSS, and PHP on my own. Now I do full web development with them, although I still have a lot to learn, I'll call myself an advanced beginner. I am starting my own site for two reasons, I think it's a potentially great idea, and it's the best way for me to learn and put my experience to use. Plus the free hosting is nice Anyway, I'm here hoping to get the questions answered that make you not want to put up your hand in class. I am having trouble aligning a div. <div style="background-color:#FFFFFF;height:150px;width:750px;"></div>. It's still lining up on the left side. How do I link the css in the index? I want the index to pull the css file in so the whole page won't be filled with styles and floats and all that. Thanks a lot everybody. I look forward to becoming a contributor and student on these forums. Cheers, Mike
February 19, 200917 yr Welcome, Do you mean you want to center the Div? if so try this: <div style="background-color:#FFFFFF;height:150px;width:750px; margin-left:auto; margin-right:auto;"></div> To link the stylesheet in the index use this: <link href="#" rel="stylesheet" type="text/css" /> within the head of your document
February 19, 200917 yr Scaz, you can minimize the CSS you've used like this: #center { background:#fff; height:150px; width:750px; margin:0 auto; } <div id="center"> </div>
February 19, 200917 yr Welcome to the forum, if you want to align your div id=center to the middle also dont forget to add this to your css body { text-align:center; } body p { text-align: left; } I believe IE will not center your div if you do not add this.
February 19, 200917 yr Welcome to the forum, if you want to align your div id=center to the middlealso dont forget to add this to your css body { text-align:center; } body p { text-align: left; } I believe IE will not center your div if you do not add this. Yes it will, that's not a great way to do it, it's giving yourself too much to do for the rest, especially with h1, h2, h3 etc. It should work, if it doesn't use the following code instead: #center { background:#fff; height:150px; width:750px; position:absolute; left:50%; margin-left:-375px; }
February 19, 200917 yr Scaz, you can minimize the CSS you've used like this: #center { background:#fff; height:150px; width:750px; margin:0 auto; } <div id="center"> </div> Yeah, I was just modifying goldfingerler code
February 19, 200917 yr Author voila, margin right and left-auto worked like a charm. i added <link href="#" rel="stylesheet" type="text/css" /> after the heading tag, and have .banner {background-color:#FFFFFF;height:150px;width:750px;margin-left:auto;margin-right:auto;} in the style sheet, but its not working, thoughts? thanks for all the replies it helped me out a lot.
February 19, 200917 yr voila, margin right and left-auto worked like a charm. i added <link href="#" rel="stylesheet" type="text/css" /> after the heading tag, and have .banner {background-color:#FFFFFF;height:150px;width:750px;margin-left:auto;margin-right:auto;} in the style sheet, but its not working, thoughts? thanks for all the replies it helped me out a lot. Hi there, welcome to the forum In the above example, you have href="#" It needs to point to your stylesheet.
February 19, 200917 yr Author thanks. <div class="button123" style="background-color:#0033FF;height:50px;width:800px;"> <div class="button1" style="background-color:#FFFFFF;height:30px;width:200px;padding:5px;margin-left:5px;margin-top:10px;"></div></div> i am trying to get the white button in the middle of the blue to move down 5px so its even on top bottom and left. i thought margin-top:5px would do it, but adding margin to the top doesn't move it down. any thought? thanks all. Cheers, Mike EDIT: nvm the top margin did work, guess it was my cache or something.
February 20, 200917 yr Goldfingerler, I know you were given the margin-left:auto; and margin-right:auto; but it's bulky code and unecessary. Just replace it with "margin:0 auto;" and it will be central anyway. You want to try and have minimal code and meaningful market. Always use Ctrl+F5 after updating a site to make sure the cache is cleared and the website is reloaded correctly.
February 21, 200917 yr Goldfingerler, I know you were given the margin-left:auto; and margin-right:auto; but it's bulky code and unecessary. Just replace it with "margin:0 auto;" and it will be central anyway. You want to try and have minimal code and meaningful market. Always use Ctrl+F5 after updating a site to make sure the cache is cleared and the website is reloaded correctly. Mate, I don't think a couple of bytes is going to make the blindest bit of difference to response time, especially with current internet speeds, it is possible to be too anal. You might want to weigh it up against readability, especially for a beginner
Create an account or sign in to comment