Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Div And Center

This is a discussion on Div And Center, within the CSS section. This forum and the thread "Div And Center" are both part of the Designing Your Website category.

 
Reply to this topicStart new topic
> Div And Center, Help
Simon
post Mar 28 2008, 05:20 AM
Post #1


Rapid Squeezer
****

Group: Members
Posts: 341
Joined: 14-February 08
From: Dreamweaver
Member No.: 68



So i am trying to code a vb theme, and i am stuck

http://www.wearebattlefieldheroes.com/?styleid=3

I want that div tag #nav2 in the center of the page, not the writing but the div box its self.

here is my css

CODE
#nav2 {
text-align:center;
    height: 300px;
    width: 970px;
    background-image:url(images/misc/header.gif);
    
}


Thanks Simon


--------------------
Go to the top of the page
 
+Quote Post
Jason
post Mar 28 2008, 05:27 AM
Post #2


Master of the Universe
******

Group: Advisors
Posts: 1,157
Joined: 15-February 08
From: London, England
Member No.: 141



To center a div you must specify its width.

i.e.

CODE
div {
width:200px;
margin:0 auto;
}


margin:0 means that there should be no margin on the top and bottom of the website.
auto means that the left and right sides will be automatically distributed. Thus centering your page.


--------------------
Go to the top of the page
 
+Quote Post
Simon
post Mar 28 2008, 06:10 AM
Post #3


Rapid Squeezer
****

Group: Members
Posts: 341
Joined: 14-February 08
From: Dreamweaver
Member No.: 68



Thanks it works now


--------------------
Go to the top of the page
 
+Quote Post
Simon
post Mar 28 2008, 06:15 AM
Post #4


Rapid Squeezer
****

Group: Members
Posts: 341
Joined: 14-February 08
From: Dreamweaver
Member No.: 68



More questions

How do i get the text to be 10px from the bottum?


--------------------
Go to the top of the page
 
+Quote Post
karinne
post Mar 28 2008, 06:39 AM
Post #5


Co-Founder
*******

Group: Co-Founders
Posts: 2,793
Joined: 13-February 08
From: Squeezin'
Member No.: 2



padding-bottom: 10px

or

margin-bottom: 10px


--------------------
The Squeeze Store is now OPEN! Come on in and grab something!

a web design portfolio | web non-sense - REDESIGNED!
I'm also on: del.icio.us | flickr | virb | facebook | twitter
The Web Squeeze is also on: virb | facebook | stumbleupon - JOIN IN!
Go to the top of the page
 
+Quote Post
Simon
post Mar 28 2008, 06:47 AM
Post #6


Rapid Squeezer
****

Group: Members
Posts: 341
Joined: 14-February 08
From: Dreamweaver
Member No.: 68



Thanks K


--------------------
Go to the top of the page
 
+Quote Post
Simon
post Mar 28 2008, 06:57 AM
Post #7


Rapid Squeezer
****

Group: Members
Posts: 341
Joined: 14-February 08
From: Dreamweaver
Member No.: 68



K that is not making the text move to the bottum?? mellow.gif


--------------------
Go to the top of the page
 
+Quote Post
Jason
post Mar 28 2008, 08:54 AM
Post #8


Master of the Universe
******

Group: Advisors
Posts: 1,157
Joined: 15-February 08
From: London, England
Member No.: 141



QUOTE (Simon @ Mar 28 2008, 11:57 AM) *
K that is not making the text move to the bottum?? mellow.gif


I do not understand what you want to do. Do you want to move the navigation above or below the header image?


--------------------
Go to the top of the page
 
+Quote Post
Simon
post Mar 28 2008, 08:58 AM
Post #9


Rapid Squeezer
****

Group: Members
Posts: 341
Joined: 14-February 08
From: Dreamweaver
Member No.: 68



I want it to move the links red box


--------------------
Go to the top of the page
 
+Quote Post
Daniel
post Mar 28 2008, 09:05 AM
Post #10


The Rabbit King
****

Group: Team Leaders
Posts: 291
Joined: 13-February 08
From: Chasing carrots in Farmer Jack's farm!
Member No.: 9



put the div at the bottom
Go to the top of the page
 
+Quote Post
Justify
post Mar 28 2008, 09:22 AM
Post #11


Squeezing
***

Group: Members
Posts: 96
Joined: 14-February 08
Member No.: 76



create a padding class.

.nav-padding{
padding-bottom:10px;
}


Then just put that div inside the other.
Go to the top of the page
 
+Quote Post
Jason
post Mar 28 2008, 09:29 AM
Post #12


Master of the Universe
******

Group: Advisors
Posts: 1,157
Joined: 15-February 08
From: London, England
Member No.: 141



I would suggest that you make the links white.

color:#FFF;

Currently they are very hard to read.

You could also add a little padding between them.

div a {padding:0 10px;}


--------------------
Go to the top of the page
 
+Quote Post
Simon
post Mar 28 2008, 10:12 AM
Post #13


Rapid Squeezer
****

Group: Members
Posts: 341
Joined: 14-February 08
From: Dreamweaver
Member No.: 68



I fixed it by creating a new div in the nav, I am going to work on the images


--------------------
Go to the top of the page
 
+Quote Post
Justify
post Mar 28 2008, 10:13 AM
Post #14


Squeezing
***

Group: Members
Posts: 96
Joined: 14-February 08
Member No.: 76



also on mac firefox, the header doesn't centre above the main navigation.
Go to the top of the page
 
+Quote Post
Simon
post Mar 29 2008, 03:24 AM
Post #15


Rapid Squeezer
****

Group: Members
Posts: 341
Joined: 14-February 08
From: Dreamweaver
Member No.: 68



i know i messed the body tag up lol.

It will be fixed


--------------------
Go to the top of the page
 
+Quote Post
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   1 Itsumishi 136 15th April 2008 - 10:29 PM
Last post by: Itsumishi
No New Posts   1 Jason 112 20th June 2008 - 05:47 AM
Last post by: Rakuli
No New Posts   7 Bruno 255 29th July 2008 - 02:51 PM
Last post by: ejg