close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Full Length Header

Thread began 2/23/2010 2:49 pm by impeccabledesign400696 | Last modified 2/26/2010 5:02 pm by Eric Mittman | 978 views | 4 replies |

impeccabledesign400696

Full Length Header

≠Hi all,

I'm new to the forum and I'm using CSS Sculptor and I like the preset CSS layouts. I have a very limited and basic understanding of HTML & CSS and I'm trying to separate a full length header from the rest of the CSS layout. (Ideally having the header at the left, top of the browser and having the CSS layout begin maybe 250 pixels below that) I've seen it done many times all over the web (example: Adobe's product support tutorial site) But I cannot figure this out after much research and experimentation. Can anyone assist me ?

Sign in to reply to this post

Dani Chankhour

If you look at the CSS files generated by Sculptor, you should find a class called:

#fullWidthHeader

and to get the result you need, you will just need to add this line of code to that class:

margin-bottom:27px;


You can adjust the number as needed.

Let me know if you still have a question.

Sign in to reply to this post

Eric Mittman

One way that you could do this is to start with a full width header layout then edit the css. In here choose the box tab and select the outer wrapper, it should be just below the full width header.

With this selected you can move down on the page by adjusting the top margin value. In my test I just set the top margin to be 250 px. This put the content area down 250px on the page well below the header.

What have you tried and what are the results you are getting?

Sign in to reply to this post

impeccabledesign400696

Full length header

To All who provided me with prompt response,

I did experimentation using the suggestions and ultimately decided to do away with full length headers for my page design. It is good to know how to do that in the future however, should I ever get a client that requests such a feature. I'm in the process of building my site: www.impeccabledesign.net and from the homepage if you click the rollover link for free consultation it takes you to where I attempted to place a form using form builder. I placed the form relatively with a top margin of -300 pixels or so and it displayed how I wanted it to when previewing in dreamweaver but once posting it online....the form is pushed about 500-700 pixels down. Does anyone know why it is doing this ? I'm sorry to hassle anyone I'm a neophyte to web design, part of the reason I sought out web assists products. I have limited HTML, CSS experience. Thanks in advance for your help !

Sign in to reply to this post

Eric Mittman

It looks like you are putting it in between the left and rite columns that are floated. It looks like if I add a float left to the form css it adjusts it properly.

This setting is in this css file:

CSSFormBuilder/FD_Standout_Default.css

In here on line 83 is this style, add in the float left here like this:

form.Standout_Default {
background-color:#999999;
font-family:Futura,"Trebuchet MS",Helvetica,sans-serif;
font-size:11pt;
padding:60px;
width:20em;
float:left; /* this is the float that was added */
}
Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...