OutFront Forums
     Home    Register     Search      Help      Login    

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Follow Us
On Facebook
On Twitter
RSS
Via Email

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read
 

FrontPage Layer help

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Microsoft FrontPage Help >> FrontPage Layer help 		Page: [1]
 
 
lovefp

 

Posts: 4
Joined: 9/12/2005
Status: offline

  		FrontPage Layer help - 9/12/2005 17:04:50   
Hi,

I am trying to use layers as layout instead of using table,
but I am encountering a layer overlap problem.

here is the scenario:

I have 1 layer for content, then under this layer a layer
for footer, but what happen is when I add text in the content
layer, this layer expand and cover the footer layers so they
over lap, and ruin all the layout .

Any cure for this, so that when the content layer expand vertically
it should push the footer layer too,

thanks
chris.:)
Tailslide

 

Posts: 6758
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: FrontPage Layer help - 9/12/2005 17:15:30   
When you say layer do you mean <div>?

Can you post your code or better still a URL - it'll be easier to troubleshoot it.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to lovefp)
lovefp

 

Posts: 4
Joined: 9/12/2005
Status: offline

  		RE: FrontPage Layer help - 9/14/2005 0:32:03   


That's right <div> but isn't this the same thing as layer in FP?

Anyhow here is the code:

===============================================

<body>

<div style="position: absolute; width: 150px; height: 160px; z-index: 2; left: 99px; top: 126px"
id="layer2">
</div>
<div style="position: absolute; width: 750px; height: 100px; z-index: 3; left: 99px; top: 18px"
id="layer1">
</div>
<div style="position: absolute; width: 590px; height: 162px; z-index: 4; left: 256px; top: 127px"
id="layer3">
</div>

<div style="position: absolute; width: 748px; height: 28px; z-index: 5; left: 101px; top: 298px"
id="layer4">
</div>

</body>

=========================================

Layer 3 here is the container for my text,
but when I add too many lines it overlap with layer 4 which is my
footer and then the text from layer 3 are on top of the text from
layer 4(footer).
Am I missing something here?
What I was expecting is when layer3 expand than layer 4 also expand
so there will not be any overlap.

Thanks
Chris.:)

(in reply to Tailslide)
Tailslide

 

Posts: 6758
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: FrontPage Layer help - 9/14/2005 5:52:22   
Hi Chris

Don't use position:absolute for positioning big elements on the page. Just let them flow one after the other.

What are you trying to achieve - two columns with a footer after?

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to lovefp)
lovefp

 

Posts: 4
Joined: 9/12/2005
Status: offline

  		RE: FrontPage Layer help - 9/14/2005 16:43:26   
Hi tails,

First thank you for your help, as you are the only one who
replies to my questions, I appreciate it.

I did as you advised me and removed/changed the position: absolute
to none.

But now I don't have control on layers as before, I can't move them
or change there placement. even the blue guideline is not appearing
anymore in the fp "design view", just black points on the corners.

What i am trying to achieve is having a layout similar to yahoo or msn
that have 1 area ( layer) at the top for my logo or header then 2 large
column I can add smaller boxes to them and then a footer at the end.
like this:
-----------------------------
| =====Logo here ======= |
-----------------------------
|column here |column here|
-----------------------------
| =====footer Here ====== |
-----------------------------

the large column will have boxes or tables for different
categories or news.

I am not sure if using layers is good for this layout, but
what I am trying to do is having a layout without using
tables.

thanks again tails.
chris:)

(in reply to Tailslide)
Tailslide

 

Posts: 6758
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: FrontPage Layer help - 9/14/2005 17:04:41   
Ok - this is a straight forward two column layout.

What I'd do (and it's no doubt not the only way - just my way!) is stick the whole lot in a container div - that way you can position everything on the page where you want it plus it holds everything together.

Then inside this container div I'd have your header div.

Follow that with another div which I'll call wrapper for no obvious reason. This div will hold the two adjacent central sections and prevent them running off!

So inside the wrapper div you'll have your left-hand div and your right-hand div which we'll float so that they're next to each other instead of one after the other. Floats can sometimes behave badly which is why I tend to stick 'em in a containing div. There are other ways to do this but I like life simple.

Following on from the wrapper div with it's two sections will be your footer div which will sit below the other two neatly.

So here's the HTML: 

<div id="container">
      <div id="header"> 
       Your Header stuff goes in here
       </div> <!-- end header -->
       <div id="wrapper">
               <div id="leftcolumn">
               Your left hand stuff goes in here
               < /div> <!-- end of leftcolumn -->
               <div id="rightcolumn">
               Your right hand stuff goes in here
               </div> <!-- end rightcolumn -->
      </div> <!-- end wrapper -->
      <div id="footer">
      Your footer stuff goes here
      </div> <!-- end footer -->
</div> <!-- end container -->


And a very basic CSS: 

body {font-size:101%; text-align:center;}
#container {margin: 0 auto; text-align:left; width: 760px;}
#leftcolumn {float:left; width: 159px;}
#rightcolumn {float:right; width:600px;}
#footer {clear:both; height: 100px;}


I'd suggest initially, until you get it how you like - have the CSS in the head of the document between 
<style type="text/css">
<!--

and this: 
-->
</style>


Once you get it how you like then paste it all into a blank page called style.css or something similar and link to it in the <head> of your page - that way all pages on your site (provided you include the link) will have the same formatting.

This format should flow downwards properly when the content is expanded. You'll obviously need to add more stuff to the styles such as padding and margins for the content. Could I also suggest that you add these to the items within the div rather than the div itself so you'll avoid problems with the dreadful IE and it's box model.

eg: 

#rightbox p {margin: 10px 20px 0 20px;}


This will add a 10px top margin and a 20px right and left margin to all paragraphs within the div called rightbox.

Edit: you can then add further stuff within the #rightbox div in the same way (floating divs left and right etc) if you need to - floats within floats sometimes get a bit complicated but see what you can come up with and come back if you run into problems.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to lovefp)
lovefp

 

Posts: 4
Joined: 9/12/2005
Status: offline

  		RE: FrontPage Layer help - 9/15/2005 23:39:12   

wow,
Tailslide thank you very much for taking the time
to reply and help me, I appreciate it.


I will follow your advice and post my results here soon.


Thank you again Tailslide, you're the best.

Chris :)


(in reply to Tailslide)
Tailslide

 

Posts: 6758
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: FrontPage Layer help - 9/16/2005 3:00:48   
The layout I've posted is quite simplified so you may run into some problems - just do what you can and post back here and we'll figure it out.

Oh did I mention DOCTYPE? I seem to have overlooked it! If you're using CSS for layout then you definitely should have a DOCTYPE. Go here for a quick explanation of why: http://www.alistapart.com/articles/doctype/

Which one you choose depends on how strict you're going to be about your coding. I'd recommend either HTML 4.01 strict or any of the XHTML ones.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to lovefp)
mikiluv

 

Posts: 2
Joined: 5/20/2009
Status: offline

  		RE: FrontPage Layer help - 5/20/2009 17:37:07   
I seem to have a similar issue.. but different. I'm doing a web site for my cousin's new business and rather than using a table I've designed it in photoshop as a single element and wanted to lay text over it in frontpage. i've justified the object centrally so it works well with wide screen monitors but the text then gets left behind depending on browser resolutionn. How can i get the div layer to move relative to my key object?? Any advice would be greatly received.

the best way to illustrate this is probably for you to see it - http://www.inspirationtrainingsolutions.co.uk/test.htm
FYI - the text should be over the white panel ;)

Thanks!

(in reply to lovefp)
Tailslide

 

Posts: 6758
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: FrontPage Layer help - 5/21/2009 1:20:36   
The trouble with using that technique is that it's not at all flexible. For instance if your users make the text larger then it will break out of the background.

If you still want to do this (and it's not a good idea) then you want to:

1. Use a proper page structure - at the moment you have no <html>, <head>, <body>, DOCTYPE and no closing tags for all the previous.
2. Don't use a table at all - it's not necessary.
3. Use the image as a background image placed onto the body element via the css stylesheet
4. Place the text within a div within a containing div (make that about 770px that you center using margin: 0 auto; (increase the 0 to 1em, 2em etc to get the right vertical spacing).
5. Position the inner div with the content relative to the containing div (say margin-left: 80px for example).

But you've really only got a teeny amount of space for your content - it will break out of that very easily. This is not a good idea unfortunately.


_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to mikiluv)
mikiluv

 

Posts: 2
Joined: 5/20/2009
Status: offline

  		RE: FrontPage Layer help - 5/21/2009 8:45:24   
thanks for that tailslide - i'll try and be a bit more clever!

love the landrover by the way - i have an 88 2a!

(in reply to lovefp)
Tailslide

 

Posts: 6758
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: FrontPage Layer help - 5/21/2009 11:25:19   

quote:

ORIGINAL: mikiluv
love the landrover by the way - i have an 88 2a!


Really? Love 88s. We're planning on getting a Lightweight next year - just for fun!

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to mikiluv)
Page:   [1]

All Forums >> Web Development >> Microsoft FrontPage Help >> FrontPage Layer help 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Copyright © 2009 Thomas Brunt's OutFront Inc. All Rights Reserved.