Welcome to Dream.In.Code
Become an Expert!

Join 150,411 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 969 people online right now. Registration is fast and FREE... Join Now!




adding a new div to my site layout

 
Reply to this topicStart new topic

adding a new div to my site layout

jeffmc21
17 Mar, 2008 - 06:35 PM
Post #1

New D.I.C Head
*

Joined: 27 Nov, 2007
Posts: 48


My Contributions
I have a site template/layout that I am using to build a new site and I'm wanting to add a new "section" or area to the template. This is my first time using a completely external CSS, so I'm a little unsure how to add the section correctly and have it positioned where I need it. Any help is appreciated.

I've attached the template I'm using. In the template, the CSS is in the head section. I'm taking it out and putting it in an external CSS file when I use the template.

I'd like to add a "section" below the navigation section that is already on the template. I'd like it to be below the navigation and to the left of the content section, as if it were part of the left-hand column. It would be the same width as the navigation section that it would be below. If it matters, the height would be 150px to 160px.

Thanks in advance to all who help.

Attached File  LayoutGala31.html ( 3.02k ) Number of downloads: 22

User is offlineProfile CardPM
+Quote Post

BenignDesign
RE: Adding A New Div To My Site Layout
17 Mar, 2008 - 07:15 PM
Post #2

You say "People are Dumb" like it's a bad thing.
Group Icon

Joined: 28 Sep, 2007
Posts: 1,038



Thanked: 3 times
Dream Kudos: 150
My Contributions
Add this (or a modified version there of) to your CSS:

CODE

div#smurfs{float:left;width:200px;height:150px;margin-top:-40px;background-color:pink;}


Then add the div somewhere in your html...

CODE

<div id="navigation">stuff here</div>
<div id="smurfs">more stuff here</div>


Should work.
User is online!Profile CardPM
+Quote Post

jeffmc21
RE: Adding A New Div To My Site Layout
18 Mar, 2008 - 07:09 AM
Post #3

New D.I.C Head
*

Joined: 27 Nov, 2007
Posts: 48


My Contributions
QUOTE(BenignDesign @ 17 Mar, 2008 - 08:15 PM) *

Add this (or a modified version there of) to your CSS:

CODE

div#smurfs{float:left;width:200px;height:150px;margin-top:-40px;background-color:pink;}


Then add the div somewhere in your html...

CODE

<div id="navigation">stuff here</div>
<div id="smurfs">more stuff here</div>


Should work.


Thanks so much for your help. If the "navigation" div ends up being about 240px in height, should I change the "margin-top" setting in the new div?
User is offlineProfile CardPM
+Quote Post

BenignDesign
RE: Adding A New Div To My Site Layout
18 Mar, 2008 - 07:27 AM
Post #4

You say "People are Dumb" like it's a bad thing.
Group Icon

Joined: 28 Sep, 2007
Posts: 1,038



Thanked: 3 times
Dream Kudos: 150
My Contributions
QUOTE(jeffmc21 @ 18 Mar, 2008 - 11:09 AM) *

Thanks so much for your help. If the "navigation" div ends up being about 240px in height, should I change the "margin-top" setting in the new div?


Yup... if the navigation division end up larger than you thought, you can change the margin on the new division to move it down.
User is online!Profile CardPM
+Quote Post

jxftw
RE: Adding A New Div To My Site Layout
22 Mar, 2008 - 11:42 AM
Post #5

New D.I.C Head
*

Joined: 22 Mar, 2008
Posts: 10


My Contributions
Looking at your source, how come you put the whole CSS style sheet into your body?
It's not a big issue, i'm just wondering.
User is offlineProfile CardPM
+Quote Post

BenignDesign
RE: Adding A New Div To My Site Layout
22 Mar, 2008 - 11:44 AM
Post #6

You say "People are Dumb" like it's a bad thing.
Group Icon

Joined: 28 Sep, 2007
Posts: 1,038



Thanked: 3 times
Dream Kudos: 150
My Contributions
It can be done either way. Using an external sheet makes the HTML look cleaner, but for someone just learning CSS, it can be easier to have the stylesheet in the HTML.
User is online!Profile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/9/09 07:41PM

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month