[Answered] My site, how does it look - Page 3

kwright510 · March 10th, 2008, 8:17 PM

Quote:

Originally Posted by William

Thanks, does look nice and interesting, but I plan to do everything myself.

Then this may be of interest: Create a Lightbox effect only with CSS - no javascript needed : Emanuele Feronato - italian geek and PROgrammer

wgm · March 10th, 2008, 8:32 PM

Quote:

Originally Posted by kwright510

Then this may be of interest: Create a Lightbox effect only with CSS - no javascript needed : Emanuele Feronato - italian geek and PROgrammer

That certainly would be something I'd try, saved link, thank you.

**caseylee** · March 11th, 2008, 2:54 AM

I like it, it's very clean.

Could do with some pink, though... :]

cass_is_awesome · March 11th, 2008, 3:03 PM

Very nice job.

Clean, professional, works well in a wide range of resolutions.

Did you

Code:

{
position : absolute;
left : 50%;
margin-left : -375px;
}

To keep it centered regardless of the browser position?

wgm · March 11th, 2008, 10:21 PM

Thanks caseylee, pink, haha, I don't think so.

cass_is_awesome, thanks also, nope just did it, well, see below.

Code:

<div align="center">
  <div id="container">
    <div id="header">
      
    </div>
    <div id="nav">
      
    </div>
    <div id="content">
      
    </div>
    <div id="footer">
      
    </div>
  </div>
</div>
</body>
</html>

Who put answered in the title, just curious.

H · March 11th, 2008, 11:10 PM

Quote:

Originally Posted by William

Thanks caseylee, pink, haha, I don't think so.

cass_is_awesome, thanks also, nope just did it, well, see below.

Code:

<div align="center">
  <div id="container">
    <div id="header">
      
    </div>
    <div id="nav">
      
    </div>
    <div id="content">
      
    </div>
    <div id="footer">
      
    </div>
  </div>
</div>
</body>
</html>

Who put answered in the title, just curious.

This:

Code:

<div align="center">

Should be deleted and never again be used. The code by cass_is_awesome or even a simple "margin: auto;" would be a much better way to go. It removes an unnecessary element and uses more standard ways of centering.

wgm · March 11th, 2008, 11:36 PM

Quote:

Originally Posted by H

The code by cass_is_awesome or even a simple "margin: auto;" would be a much better way to go. It removes an unnecessary element and uses more standard ways of centering.

Thanks, something new to me and easy, like I say on my about page, its a learning experience, and I am still learning.

cass_is_awesome and H, I appreciate the hints.

cass_is_awesome · March 12th, 2008, 6:11 AM

Quote:

Originally Posted by William

Thanks, something new to me and easy, like I say on my about page, its a learning experience, and I am still learning.

cass_is_awesome and H, I appreciate the hints.

No problem.

Just to kind of break down what it does, in case you or anyone else didn't know:

Let's say, for the sake of argument, that we're working with an 800 pixel box named "box"

Code:

.box{
width : 800px;
height : 400px;
position : absolute;
left : 50%;

Obviously, this positions the left edge of "box" 50% of your screen resolution away from the left edge of the screen.

Code:

margin-left : -400px;
}

or

Code:

margin : 0 0 -400px 0;
}

Takes the left edge of "box" and shifts is to the left by exactly one half of it's width, thus centering "box" perfectly in the horizontal center of the screen, regardless of whether the browser is in full screen, windowed mode, or screen resolution.

Also, if you're going to be using a background image in the body{} section of your CSS, make sure to position it to top center, that way, it will react the same way as your container that's centered in the screen.

Fun stuff.

cass_is_awesome · March 12th, 2008, 7:37 AM

Oops.

Caught an error.

Quote:

Originally Posted by cass_is_awesome

No problem.

Code:

margin : 0 0 -400px 0;
}

Should be.

Code:

margin: 0 0 0 -400px;

March 11th, 2008, 2:54 AM	#21 (permalink)
caseylee 4-8-15-16-23-42 Excelling Contributor Joined in Jul 2007 Lives in Australia, turn left at America Hosted on Luna & Nexus (dedicated) 774 posts Gave thanks: 36 Thanked 29 times	I like it, it's very clean. Could do with some pink, though... :] __________________ www.casey-lee.com

March 11th, 2008, 3:03 PM	#22 (permalink)
cass_is_awesome Cass Doesn't Sleep Seasoned Poster Joined in Mar 2008 Lives in Michigan Hosted on SH138 78 posts Gave thanks: 5 Thanked 6 times	Very nice job. Clean, professional, works well in a wide range of resolutions. Did you Code: { position : absolute; left : 50%; margin-left : -375px; } To keep it centered regardless of the browser position?

March 11th, 2008, 10:21 PM	#23 (permalink)
wgm Registered User Super #1 Joined in Mar 2005 Lives in Washougal, WA 1,282 posts Gave thanks: 23 Thanked 39 times	Thanks caseylee, pink, haha, I don't think so. cass_is_awesome, thanks also, nope just did it, well, see below. Code: <div align="center"> <div id="container"> <div id="header"> </div> <div id="nav"> </div> <div id="content"> </div> <div id="footer"> </div> </div> </div> </body> </html> Who put answered in the title, just curious.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)