6 Replies - 817 Views - Last Post: 11 November 2012 - 06:45 PM

#1 frost-tien  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 07-June 12

How to center webpage in the browser

Posted 10 November 2012 - 04:30 PM

I was just wondering how would center the content of your webpage in any browser so when you maximize it sits center, not on the left side of the browser.
i'm using divs as containers
if you have any questions just ask and thank you for your time and help
Is This A Good Question/Topic? 0
  • +

Replies To: How to center webpage in the browser

#2 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: How to center webpage in the browser

Posted 10 November 2012 - 04:53 PM

Apply the following CSS to the div you need centered.

margin: 0px auto; 


Example:

CSS

#center {margin: 0px auto;} 


HTML

<div id="center"> </div> 


@Atli Yes, you have a point. I'm not sure setting "marting: 0 auto" will do much good either. lol. Marting :)

This post has been edited by IJET: 10 November 2012 - 05:05 PM

Was This Post Helpful? 1
  • +
  • -

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,964
  • Joined: 08-June 10

Re: How to center webpage in the browser

Posted 10 November 2012 - 05:00 PM

You would give the container element a "width" value, and then set marting: 0 auto;. That makes the browser calculate the "margin-left" and "margin-right" values automatically, so that the element will be positioned in the center of the parent element (the main body, presumably.)

By the way, the "0" in the margin style can be any value. It defines the top and bottom margin.

@IJET - When using zero lengths, the unit is optional. There is really no point specifying a unit when there is no length to calculate :)
Was This Post Helpful? 1
  • +
  • -

#4 frost-tien  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 07-June 12

Re: How to center webpage in the browser

Posted 11 November 2012 - 03:34 PM

ok sorry it took some time to get back so ok i tried the margin:0px auto; and all it did was move one div over and screwed the rest of the page up im gonna post the html and the css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="week7.css"/>

<title>Page 1</title>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

</head>



<body>


<div id="Diva"><div id="DivHT">HOW TO</div>
		<h1 id="rtfip">Recover Tunes From Your iPod</h1>
<p id="lht">Someday the hard drive on your computer will crash, stranding thousands of songs on your iPod. Here's how to get them back onto your PC or Mac.</p>

<p id="lht1"><span id="hts1">1) Reinstall iTunes.</span> Launch the app and sign in to your itunes music Store account. Don't plug in your iPod yet.</p>

<p id="lht2"><span id="hts2">2) Install and launch</span> a free trial of PodUtil from KennettNet software (www.kennettnet.co.uk). The app will sit there idling, displaying a Waiting-for-iPods message.</p>

<p id="lht3"><span id="hts3">3) Plug in your iPod.</span> PodUtil will detect it and display a window that shows the files and playlists on your ipod. Click the "Choose" button at the bottom of Pod-Util and select your iTunes music folder. Next, click the "Copy Settings" button. In the dialog box that appears, select both "Add Tracks to iTunes" and "Rebuild Playlists." Click "OK."</p>

<p id="lht4"><span id="hts4">4) Read the Don't-Steal-Music warning</span> in the lower right corner of PodUtil. Think carefully. Click the "Copy" button below it.</p>

<p id="lht5"><span id="hts5">5) Watch as PodUtil copies</span> your songs, videos, playlists, and podcasts back to your computer and then loads them into iTunes. Reauthorize your iTunes music store tracks. Done!</p>

<p id="lht6"><span id="hts6">6) Happy?</span>Hit the "Register now" button and send the site 10 (about 18 bucks).</p>

<div id="DivMB">Match Beats//When mixing two songs, you need to match their speeds. Do this by concentrating on the snare drum: its crisp, distinctive rhythm will help you recognize which song needs to speed up and which needs to slow down. Adjust the tempo of one of the songs until the two are in sync.</div>
</div>

<div id="Divb"><img id="mbip" alt="" src="man-biting-ipod.jpg" />
	<h1 id="MP">Make a Playlist</h1>
	<p id="Rmp">The iTunes playlist function makes everyone a DJ. But crafting the perfect soundtrack takes more finesse than just piling a bunch of songs together.<span id="DjQ"> DJ Qbert</span>(Shown), two-time winner of the DMC world DJ championships, drops some science on the art of the mix.</p>
	<div id="mp1"><span id="ddnum1">1</span> Even Paris Hilton needs a few drinks before she's ready for a dance-off, so your playlist should start off mellow and slowly board the soul train. Figure two hours before you raise the roof.</div>
	<div id="mp2"><span id="ddnum2">2</span> Soundtracks, like conversations, can be jarring without transitions. Don't attempt to pair Air with Quiet Riot unless you're a professional DJ. Look for songs that complement each other.</div>
	<div id="mp3"><span id="ddnum3">3</span> Dead space between tracks is for amateurs. Since the iPod can't crossfade, use ProTools to merge tunes into a single song file. If you can match beats, even better.</div>
	<div id="mp4"><span id="ddnum4">4</span> Be sure to include a few hits. Everyone loves listening to hip new music, but every now and then you gotta get the party moving with an old classic - even if the party's just you.</div>
 </div>
<div id="Divc"><h1 id="stbs">Score Tickets to the Big Show</h1>
		<p><span id="jtfc">1) Join the fan club.</span> Club memberships often unlock online presale deals.</p>
		<p><span id="cya">2) Coordinate your attack.</span> Team up with friends so one person hops on Ticketmaster's Web site, one works the phones, and one stands outside an old-fashioned ticket window.</p>
</div>
<div id="Divd"><img id="tckts" alt="" src="tickets.png"/></div>
		
		
<div id="Dive"> <span id="ftro">3) Find the right outlet.</span> If you're the one schlepping to an actual ticket counter, pick an obscure location. That music store in the exurban mall is often overlooked. But visit ahead of time to make sure someone there knows how to work the machine.

				<p><span id="datr">4) Do a trial run.</span> Preload your user info on Ticketmaster.com to speed through your purchase on the big day.</p></div>






</body>
</html>

The CSS
body{background-color:white;}

#lht{font-size:14pt;
color:grey;
margin-left:75px;
}
#lht1{font-size:10pt;
color:grey;
margin-left:75px;
}
#lht2{font-size:10pt;
color:grey;
margin-left:75px;
}

#lht3{font-size:10pt;
color:grey;
margin-left:75px;
}
#lht4{font-size:10pt;
color:grey;
margin-left:75px;
}
#lht5{font-size:10pt;
color:grey;
margin-left:75px;
}
#lht6{font-size:10pt;
color:grey;
margin-left:75px;
}


#Diva{
width:450px;
height:1010px;
left:10px;
top:8px;
position:absolute;
}

#Divb{
width:450px;
height:1000px;
left:450px;
top:0px;
position:relative;
border-left-style:solid;
border-bottom-style:solid;
border-left-width:20px;
border-bottom-width:10px;

}

#Divc{
width:350px;
height:300px;
left:2px;
position:relative;
margin-left:75px;
}

#Divd{
width:250px;
height:300px;
left:425px;
top:-300px;
position:relative
}

#Dive{
width:250px;
height:275px;
left:675px;
top:-575px;
position:relative
}

#DivHT{
width:70px;
height:70px;
border-style:solid;
border-width:2px;
position:absolute;
text-align:center;
font-size: 22pt;
color:black;
}
#rtfip{
margin-left:75px;
margin-top:100px;
font-size:22pt;
color:black;
}

#hts1{font-size:10pt;
font-weight:bold;
color:black;
}
#hts2{font-size:10pt;
font-weight:bold;
color:black;
}
#hts3{font-size:10pt;
font-weight:bold;
color:black;
}
#hts4{font-size:10pt;
font-weight:bold;
color:black;
}
#hts5{font-size:10pt;
font-weight:bold;
color:black;
}
#hts6{font-size:10pt;
font-weight:bold;
color:black;
}
#DivMB{
width:350px;
background:black;
color:grey;
font-size:20pt;
top:25px;
position:relative;
border-left:solid;
border-left-width:75px;
border-color:black;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
}

#Rmp{
font-size:12pt;
color:grey;
margin-left:25px;
margin-top:-30px;
}
#DjQ{color:black;}


#mbip{
margin-left:25px;

}

#MP{
margin-left:25px;
margin-top:-5px;
font-size:35pt;
width:400px;

}

#mp1{
width:215px;
height:100px;
position:absolute;
margin-left:15px;
font-size:10pt}

#mp2{
width:215px;
height:100px;
top:105px;
left:15px;
position:relative;
font-size:10pt}

#mp3{
width:215px;
height:100px;
left:215px;
top:-100px;
position:relative;
margin-left:25px;
font-size:10pt}

#mp4{
width:215px;
height:100px;
left:240px;
top:-100px;
position:relative;
font-size:10pt}

#ddnum1{ 
float:left; 
color: grey; 
font-size: 50pt; 
line-height: 100px;
margin-top:0px;}
#ddnum2{ 
float:left; 
color: grey; 
font-size: 50pt; 
line-height: 100px;
margin-top:0px;}
#ddnum3{ 
float:left; 
color: grey; 
font-size: 50pt; 
line-height: 100px;
margin-top:0px;}
#ddnum4{ 
float:left; 
color: grey; 
font-size: 50pt; 
line-height: 100px;
margin-top:0px;}
 
 
#stbs{font-size:32pt;}

#jtfc{font-weight:bold;font-size:14pt;}

#cya{font-weight:bold;font-size:14pt;}


#ftro{font-weight:bold; font-size:14pt;}
#datr{font-weight:bold;font-size:14pt;}

ok this is what it starts at and i need to align it all in the center or the web browser and when i add the margin: 0px auto; it just blows it apart, some insign as to why would be nice and thank you for your time
Was This Post Helpful? 0
  • +
  • -

#5 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: How to center webpage in the browser

Posted 11 November 2012 - 04:35 PM

Hello again, frost-tien. If you want to center everything on your page, you're going to need to make a container div for all of this.

Example CSS:

#container {width: 960px; margin: 0 auto}


Example HTML:

<body>
<div id="container">
entire page content goes inside of here including all divs etc.
</div>
</body>



See what I mean by wrapping all of the content inside of a container? When it's inside of it, it will be positioned however the container is unless you specify absolute positioning on divs within the container(which you do and will need changed). You'll also notice I used 960px on the width of the container. You don't have to use that value, but that is seen as the "safe" web width.
Was This Post Helpful? 2
  • +
  • -

#6 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,964
  • Joined: 08-June 10

Re: How to center webpage in the browser

Posted 11 November 2012 - 04:50 PM

View PostIJET, on 11 November 2012 - 11:35 PM, said:

When it's inside of it, it will be positioned however the container is unless you specify absolute positioning on divs within the container(which you do and will need changed).

You can work around that though. If you specify position: relative; on the wrapper div, any absolutely positioned child elements within the wrapper will be positioned relative to the wrapper rather than the page.
Was This Post Helpful? 1
  • +
  • -

#7 frost-tien  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 07-June 12

Re: How to center webpage in the browser

Posted 11 November 2012 - 06:45 PM

Thank you guys for your time this worked i just had to move the divs around which was no big deal i never though of making one giant div.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1