Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Quick Introduction

Featured Replies

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

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

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>

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.

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.

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;
}

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

  • 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.

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 :D

 

In the above example, you have

href="#"

It needs to point to your stylesheet.

  • 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.

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.

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

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.