Hello,
I am trying to do something that is probably incredibly easy, but I am new to using divs, so forgive me!
I am using the top nav skin and trying to make my home page have an image on the left and a table of buttons (used to list the document types that will be accessible) on the right. I created/applied a div.right-text style to make the buttons appear on the right side of the page. However, I would also like to make the table automatically center vertically and horizontally within the remaining space. Right now it is on the edge of the right page and it looks awkward. I can see that I can add padding to manually push the table over to the left and lower down the page, but I assume there is a better way to do this, so that the spacing works well on different sized monitors.
Can someone advise?
Many thanks,
Keri
Using Divs in the Home Page
Using Divs in the Home Page
You do not have the required permissions to view the files attached to this post.
Re: Using Divs in the Home Page
Hi Kerimucci,
First you need to carve up the 'row' or page into sections with 'container' divs, and then have one or more nested divs inside the containing div. To centre a single internal div, set the margin to 0 auto (the div will centre to the width of the containing div). For multiple 'tile' type divs, float left and set display to 'inline-block' so the tiles collapse downwards neatly on small viewports.
The easiest way (for me anyway) is to lean on the Foundation model and use the 'column row', 'large-x column', and 'small-x column' classes to carve up the rows into fractions of 12 for the container divs, and then tile or center divs inside those.
Do a google for an intro into the Zurb Foundation grid model to get you started.
First you need to carve up the 'row' or page into sections with 'container' divs, and then have one or more nested divs inside the containing div. To centre a single internal div, set the margin to 0 auto (the div will centre to the width of the containing div). For multiple 'tile' type divs, float left and set display to 'inline-block' so the tiles collapse downwards neatly on small viewports.
The easiest way (for me anyway) is to lean on the Foundation model and use the 'column row', 'large-x column', and 'small-x column' classes to carve up the rows into fractions of 12 for the container divs, and then tile or center divs inside those.
Do a google for an intro into the Zurb Foundation grid model to get you started.
Re: Using Divs in the Home Page
Thank you, JRtechw. This seems to be more complicated than I thought it would be! Will do some research.