Need help with Page Layout and Background Scaling

hello, everyone.
I am in the process of designing a new website for myself,
and while I was researching nicely designed pages to use as
inspiration, I stumbled upon this site:
http://www.jeffsarmiento.com/
obviously, the design is very impressive, but it also
incorporates a lot of web mechanics that I have been trying to
figure out, so I will use this page as an example.
one thing I need help with is backgrounds. as you can see in
the posted website, the creator used a seamlessly tiled paper
texture to display the bulk of his content on. also make not of the
pattern that is located to the left of the paper texture. how do I
create seamless backgrounds like this that will scale to fit any
amount of content or any resolution? I can't imagine that the guy
that made that site created a new size background every time he
made an update, so there has to be an easier way.
the second thing that I am having trouble with is general
site layout. I have read that most sites used series of invisible
tables to organize there content, but when I open the source of
this page in dreamweaver, he was using something different. div
tags? should I be using these? who do I use them? are there any
general layout tips that someone could pass on to me? perhaps a
link to a good tutorial?
please help me. i am very confused.
thanks so much.

IMO not a good site to emulate. To wit:
Top background image:
http://www.jeffsarmiento.com/images/bg-top.jpg;
745px
x 350px 137K
Main background image:
http://www.jeffsarmiento.com/images/bg-tile.jpg;
745px x 950px 130K
Total page size: 454K (Check here:
www.websiteoptimization.com)
Website usability experts routinely recommend a maximum page
size of ~80K
Check out the We We Scale @ www.FutureNowInc.com/wewe/ where
they suggest,
"You speak about yourself approximately 0,003 times as often
as you speak
about your customers. Might that have an impact on your
effectiveness?"
That is 100% consistent with the #1 Web Design mistake:
"Believing people
care about you and your web site." or to phrase more
expansively, "Our site
tries to tell you how wonderful we are as a company, but not
how we're going
to solve your problems."
www.sitepoint.com has some excellent books on making a
website actually
attractive and usable at the same time.
Walt
"beWILLdered_" <[email protected]> wrote in
message
news:[email protected]...
> hello, everyone.
> I am in the process of designing a new website for
myself, and while I was
> researching nicely designed pages to use as inspiration,
I stumbled upon
> this
> site:
>
http://www.jeffsarmiento.com/
> obviously, the design is very impressive, but it also
incorporates a lot
> of
> web mechanics that I have been trying to figure out, so
I will use this
> page as
> an example.
> one thing I need help with is backgrounds. as you can
see in the posted
> website, the creator used a seamlessly tiled paper
texture to display the
> bulk
> of his content on. also make not of the pattern that is
located to the
> left of
> the paper texture. how do I create seamless backgrounds
like this that
> will
> scale to fit any amount of content or any resolution? I
can't imagine that
> the
> guy that made that site created a new size background
every time he made
> an
> update, so there has to be an easier way.
> the second thing that I am having trouble with is
general site layout. I
> have
> read that most sites used series of invisible tables to
organize there
> content,
> but when I open the source of this page in dreamweaver,
he was using
> something
> different. div tags? should I be using these? who do I
use them? are there
> any
> general layout tips that someone could pass on to me?
perhaps a link to a
> good
> tutorial?
> please help me. i am very confused.
>
> thanks so much.
>

Similar Messages

  • Writers - please help with page layout and headers/footers in Pages

    Hello
    Apologies if this is a stupid question, but I have fiddled around with my page layout and can't figure this out for myself!
    When I type a manuscript, I like to have a header and footer giving the book title, chapter, my name, etc. I'm finding that the header and footer is set to a wider range than I have set the main body of the page. Would you leave it that way, so that it is easily differentiated from the actual text, or would you align the left and right margins on the header and footer to match the body of the text? And if so, how do you do this please?
    Secondly, I can't figure out how to increase the top and bottom gap so that there is a good space between the header and the first line of text.
    Any advice would be gratefully received!
    Thank you!

    rainbow-warrior wrote:
    When I type a manuscript, I like to have a header and footer giving the book title, chapter, my name, etc. I'm finding that the header and footer is set to a wider range than I have set the main body of the page. Would you leave it that way, so that it is easily differentiated from the actual text, or would you align the left and right margins on the header and footer to match the body of the text? And if so, how do you do this please?
    I don't understand what you did.
    When we use the normal tools:
    Inspector > Document > Margins, the widths of header, body and footer are the same.
    Secondly, I can't figure out how to increase the top and bottom gap so that there is a good space between the header and the first line of text.
    With the already named tools, we may adjust top & bottom margins with no change on the header & footer.
    As I often wrote, looking in the PDF User Guide which is delivered with every copy of iWork is an efficient way to spare time.
    Yvan KOENIG (from FRANCE mardi 7 octobre 2008 14:08:55)

  • Need help with Blog, Wiki and Gallery

    Hi Team,
    Need help with Blog, Wiki and Gallery startup. I have newly started visiting forums and quite interested to contribute towards these areas also.
    Please help.
    Thanks,
    Santosh Singh
    Santosh Singh

    Hello Santhosh,
    Blog is for Microsoft employees only. However, you can contribute towards WIKI and GALLERY using the below links.
    http://social.technet.microsoft.com/wiki/
    http://gallery.technet.microsoft.com/

  • Can you help me with Page Layout and/or Design ideas for a software manual?

    Greetings,
    I am a new InDesign user, and am converting a software manual that I created in MS Word into InDesign. It will be converted to a pdf to view online. I have the basics (3 master pages, page numbers, running headers, 2column pages with text boxes on the left and screenshots on the right), but I want to make it look prettier. Could you please give me some ideas on page layout and/or design to make it look better or more creative?
    A few things that I am considering: borders around screenshots, a watermark, a logo next to the page numbers, different size/type of fonts, etc.
    I am open to any suggestions to make this look better. However, please understand that I am new to InDesign. With that being said, please tell me a few steps when you mention your tips. Thank you!

    Take a look at a few websites on Cannons of Page Construction.
    I think the best idea for you is to look at a few software manuals and take tips from how they accomplished the layouts.
    I'm not saying to copy them - but rather see what works and doesn't work, what worked for them might not necessarily work for you - research some layouts.
    Fonts/type/sizes etc. are pretty much ambigious without context - is this a software manual for kids (soft cuddly big fonts easy to read), technical (small, tight spacing etc), Adult friendly (smooth, crisp clear, well spaced), elderly (large elegant fonts).
    It all really depends on your demographic audience.
    Being new to InDesign I suggest you take up Sandy Cohens Quickstart Visual Guide.
    I think you should look at Michael Murphys Book on Styles
    And you should definitely get your printer (the guys bulk printing) the booklet for you on board from the start to work out optimal sizes to suit their printing presses and workflow etc. And to ensure that you are setup correctly in page sizes, margins, safe type areas, colour profiles and a few other things that your printers prepress can help you with.

  • Need help with show/hide and layers moving

    I'm more of a designer, so I don't know code or CSS well at
    all. I'm doing an online portfolio for a class and need help with
    layers not staying in place in different browsers. The portfolio is
    created with a table, but I wanted to use the show/hide function
    for thumbnails of work. Are layers the only way you can use this
    function? I read layers don't work well with tables, so how else
    can I make it so when you mouse over a thumbnail, the larger image
    appears in another cell?

    > I don't know code or CSS well at all.
    That's unfortunate.
    > layers not staying in place in different browsers.
    Layers don't move. But the rest of your page does.
    Before you get too wrapped up in layers, though, please read
    this -
    http://www.great-web-sights.com/g_layerlaws.asp
    They are not good when be used as a primary layout method.
    > I read layers don't work well with tables
    They work fine with tables - but you have to understand both
    tables and
    layers to use them.
    Why not show us your page, so we can see what you are
    struggling with?
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "Bobbi67" <[email protected]> wrote in
    message
    news:ertd9h$h3m$[email protected]..
    > I'm more of a designer, so I don't know code or CSS well
    at all. I'm doing
    > an
    > online portfolio for a class and need help with layers
    not staying in
    > place in
    > different browsers. The portfolio is created with a
    table, but I wanted to
    > use
    > the show/hide function for thumbnails of work. Are
    layers the only way you
    > can
    > use this function? I read layers don't work well with
    tables, so how else
    > can I
    > make it so when you mouse over a thumbnail, the larger
    image appears in
    > another
    > cell?
    >

  • Need Help with particular layout

    Hi,
    I need help with a particular layout with jsf.
    I dont be able to get this layout with checkbox and inputtext.
    label checkbox
    label checkbox
    label checkbox
    label checkbox
    label checkbox labelinputtext inputext
    with panelgrid I obtain only this one
    label checkbox
    label checkbox
    label checkbox labelinputtext inputext
    label checkbox
    label checkbox
    But I want place inputext and its label next to the last checkbox.
    Could someone help me? Thanks

    <h:panelGrid columns="2">
         <h:selectManyCheckbox layout="pageDirection" styleClass="styled">
              <f:selectItem itemLabel="Ischemica" itemValue="Ischemica"/>
              <f:selectItem itemLabel="Ipertensiva" itemValue="Ipertensiva"/>
              <f:selectItem itemLabel="Valvolare" itemValue="Valvolare"/>
              <f:selectItem itemLabel="Cardiomiopatia" itemValue="Cardiomiopatia"/>
              <f:selectItem itemLabel="Altro" itemValue="Altro" />
         </h:selectManyCheckbox>     
         <h:panelGrid columns="2" styleClass="tableA" >
              <h:outputText value="Specificare" />
              <h:inputText value="" styleClass="styled2" />
         </h:panelGrid>
    </h:panelGrid>     
    In my css I insert class
    .tableA{
    vertical-align: bottom;
    }

  • Need help with Airport Express and so on.

    Ok so my main problem before getting into what I need help with here is that our MacBooks and now my iPhone 6 plus isn't staying online. Keep getting booted off and then I either have to select the network again or it will eventually go back on. If anyone has a solution or so please feel free to answer that as well. I'm running on Roadrunner with a Netgear 600 wireless router and a motorola modem. Both of which I'll leave the link to below for a better look.
    My Main Question: So I'm looking at a new wireless router mainly and possibly a new modem. I know Apple products are trustworthy but how good is the Airport Express and other Airport products. Also what is the Maximum speed and Maximum data speed for the cheapest express station and if anyone knows the speeds of the other devices it would be greatly appreciated.

    DSL Router to Netgear 5-port Switch and I used the switch to connect to Airport Extreme, TV, Blue-Ray DVD player and DirecTV Receiver.
    The AirPort Extreme base station (AEBS) is a router so it will do what you need.
    You need to reconfigure your setup. Connect the WAN port of the AEBS to the DSL router. Then connect the Netgear switch to one of the LAN ports on the AEBS. The AEBS will properly share the connection.

  • Need help with saving data and keeping table history for one BP

    Hi all
    I need help with this one ,
    Scenario:
    When adding a new vendor on the system the vendor is suppose to have a tax clearance certificate and it has an expiry date, so after the certificate has expired a new one is submitted by the vendor.
    So i need to know how to have SBO fullfil this requirement ?
    Hope it's clear .
    Thanks
    Bongani

    Hi
    I don't have a problem with the query that I know I've got to write , the problem is saving the tax clearance certificate and along side it , its the expiry date.
    I'm using South African localization.
    Thanks

  • Need help with JSF table and scrollable pages

    I need help regarding usage of <t:dataTable>
    I have a List on my managed bean. It has 50 records.
    I am displaying the first 10 records and need to implement paging.
    I hear that there is a faces taglibrary called tomahawk which provides a <t:dataTable> and a <t:dataScroller> to implement scrolling.
    Is there a sample implentation that I can take a look at to see how I can solve my problem??
    Any help is highly appreciated.
    Thanks
    Amol

    Check here: http://www.irian.at/myfaces/dataScroller.jsf;jsessionid=F3F50A51583FEEF38D968A4AF5DC949C

  • Beginner needs help with css layout

    i'm new to using dw (cs3) and css, though i have some
    background in html and coding. i'm creating a page using the "one
    column elastic, centered, header and footer" layout and i have a
    banner header with a horizontal spry menu bar at the bottom of the
    header. the background color of the buttons on the menu bar is red,
    and there's a yellow 5px border on the top and bottom of the red
    menu bar, so it looks like there's red bar with yellow piping above
    and below it, and this bar is between the header and body section
    of the page. i've set these colors in the "ul.MenuBarHorizontal a"
    rule.
    now, the issue i have is that my menu bar does not extend
    across the entire column, so there's empty space to the right of my
    menu bar (between the end of the menu bar and the far right
    column). i'd like the look of the red and yellow menu bar to extend
    all the way across, but i can't figure out how to do this in css.
    do i:
    extend the menu bar all the way across the width of the page?
    i can't figure out how to do this.
    insert an image to make it appear as though the red and
    yellow bar keeps extending to the right? if so, how will that image
    remain elastic along with my page?
    or is there a better solution?
    i'm very new to css and i'm doing my best to figure out how
    everything fits together. the last web site i built was in 1997 and
    it was done in notepad. any help would be tremendous. i'm in
    kinshasa, in the democratic republic of congo, and truth be told
    there aren't a lot of dw gurus out here.
    thanks in advance...

    Can you post a link to your page, please?
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "charliemooreiv" <[email protected]> wrote
    in message
    news:[email protected]...
    > i'm new to using dw (cs3) and css, though i have some
    background in html
    > and
    > coding. i'm creating a page using the "one column
    elastic, centered,
    > header
    > and footer" layout and i have a banner header with a
    horizontal spry menu
    > bar
    > at the bottom of the header. the background color of the
    buttons on the
    > menu
    > bar is red, and there's a yellow 5px border on the top
    and bottom of the
    > red
    > menu bar, so it looks like there's red bar with yellow
    piping above and
    > below
    > it, and this bar is between the header and body section
    of the page. i've
    > set
    > these colors in the "ul.MenuBarHorizontal a" rule.
    >
    > now, the issue i have is that my menu bar does not
    extend across the
    > entire
    > column, so there's empty space to the right of my menu
    bar (between the
    > end of
    > the menu bar and the far right column). i'd like the
    look of the red and
    > yellow menu bar to extend all the way across, but i
    can't figure out how
    > to do
    > this in css.
    >
    > do i:
    >
    > extend the menu bar all the way across the width of the
    page? i can't
    > figure
    > out how to do this.
    >
    > insert an image to make it appear as though the red and
    yellow bar keeps
    > extending to the right? if so, how will that image
    remain elastic along
    > with
    > my page?
    >
    > or is there a better solution?
    >
    > i'm very new to css and i'm doing my best to figure out
    how everything
    > fits
    > together. the last web site i built was in 1997 and it
    was done in
    > notepad.
    > any help would be tremendous. i'm in kinshasa, in the
    democratic republic
    > of
    > congo, and truth be told there aren't a lot of dw gurus
    out here.
    >
    > thanks in advance...
    >

  • Help with page layout please

    This may be a stupid question, but I am new and still
    learning. I hope that someone will help me out. I am learning
    Dreamweaver and I notice that some more advanced looking pages have
    better looking layouts. For example this link
    http://www.templatemonster.com/website-templates/20061.html
    is of a page that has a heading box with Newspaper text and then
    the page background color appears to be off white… But on top
    of the heading box and the background, It appears to be a large
    rectangular box with more boxes inside it and the biggest box
    overlays the newspaper heading box slightly. What is this called
    and how do I achieve this? I am thinking this is some type of
    advanced form of tables. But I notice on other pages ex:
    http://www.templatemonster.com/website-templates/19973.html,
    http://www.templatemonster.com/website-templates/19976.html
    some boxes are rounder and they are placed all over the page…
    I didn’t think you could move/adjust tables in Dreamweaver. I
    notice that some pages even have different background design on
    some parts of the background and not all… how is that
    possible if you can only select a solid color for your background
    color in Dreamweaver? Are there tutorials somewhere that I could
    follow?

    >more advanced looking pages have better looking layouts.
    Ok... so take a look at the CODE for those pages... As well
    as the links below - another way to learn (including anyone else's
    bad habits) is to find a page you like, and then tell your web
    browser to show you the code view for the page and/or do a "Save
    As" and save the page to your computer to then copy & paste
    code segments into your file (in IE click View at the top, select
    Source from the options)
    HTML and/or DW Tutorials
    http://validator.w3.org/
    http://www.w3schools.com/
    http://www.adobe.com/devnet/
    http://www.scriptarchive.com/
    http://www.htmldog.com/guides/
    http://www.htmlcodetutorial.com/
    http://alistapart.com/topics/code
    Download User Guide PDF for easy search
    http://www.adobe.com/support/documentation
    http://lynda.com/ Hours of videos.
    (must pay)
    http://www.projectseven.com/tutorials/index.htm
    If not PDF (link above) an online guide to read
    http://livedocs.adobe.com/en_US/Dreamweaver/9.0/
    Customizing the layouts that come with CS3 (VIDEO)
    http://www.adobe.com/designcenter/video_workshop/?id=vid0155
    For those using MySQL - Installing PHP and MySQL on Windows
    XP
    http://www.webassist.com/professional/products/solutionrecipes.asp
    Community MX lessons
    http://www.communitymx.com/abstract.cfm?cid=3D074
    http://www.adobe.com/cfusion/designcenter/search.cfm?product=Dreamweaver&go=Go

  • Need help with margins & footer, and browser display issues....

    Hello,
    I am working on a splash page in Dreamweaver, but am having trouble with the margins and the footer.
    1. Margins: I basically want/need the center contents of the page never to extend past the contents of the header and footer.
    If you look at the page header, the logo on the top left and "Student and Faculty Portal" should be the margins. Seems to look fine on some users' systems, but not consistent across our department.
    2. Footer:  I can't seem to figure out how to keep the footer at the bottom without rising above the background image across all browsers & screen sizes.  Looks fine on some, but too high or low on others. (Looks the worst when the background image shows underneath the footer).
    3. Browser/Screen Size:  Depending on which PC I am using, my page changes.  At the office, on my 26" monitors, my page looks fine, however, when on different laptops, my right div (that contains the login table) goes under the left.  How can I code my page so that it looks consistent on all?
    I guess my main complaint/need is for my page to look consistent regardless of screen size, browser or system.
    If you could take a look, I would greatly appreciate it.
    Your expertise and time is greatly appreciated.  I hope I was clear enough, but please let me know if there is any confusion.
    http://www.saintleo.edu/PortalLanding/PortalSplash.html
    Kind regards,
    JK

    1.  Create a div around your content, give it a width and margin: 0 auto;
    2.  Follow this tutorial.  It will be a lifesaver and it sounds like what you are trying to do: http://css-tricks.com/snippets/css/sticky-footer/
    3.  See #1.  In addition, remove right-margin from login box, add float: right; and remove float: left; from main content.

  • Need help with load balancing and DNS proxy

    Hi,
    I need help on how to configure my router so it will work with my DNS proxy and load balancing.
    I have a Linksys LRT224 router. I have two broadband connections from two separate ISPs,500Mbps each (WAN1 & WAN2). WAN1 has a static IP and WAN2 is dynamic assigned. I use Unlocator (www.unlocator.com) so I can access geographically restricted sites (Pandora, Netflix, etc.).
    The problem I have is that unlocator registers only one IP address (WAN1 address) and since I am doing load balancing I have no way of knowing if the DNS request will go through the registered IP (WAN1) or through the other (WAN2). I am not an expert in routing or networking but I'm guessing I have a way of configuring the router so all the DNS requests go out through WAN1, right?
    In the router's Dual WAN config page there is a section for Protocol Binding. I tried to configure but only managed to screw up the internet at home. I used:
    DNS[UDP/53-53]->192.168.1.1-192.168.1.254(0.0.0.0-0.0.0.0)WAN2
    Any help or suggestions are appreciated.
    Alex

    Good solution though. That's probably the only way you could do true Load Balancing anyway.
    Please remember to Kudo those that help you.
    Linksys
    Communities Technical Support

  • Need help with load balancing and DNS proxy -Repost

    Hi,
    I need help on how to configure my router so it will work with my DNS proxy and load balancing.
    I have a Linksys LRT224 router. I have two broadband connections from two separate ISPs,500Mbps each (WAN1 & WAN2). WAN1 has a static IP and WAN2 is dynamic assigned. I use Unlocator (www.unlocator.com) so I can access geographically restricted sites (Pandora, Netflix, etc.).
    The problem I have is that unlocator registers only one IP address (WAN1 address) and since I am doing load balancing I have no way of knowing if the DNS request will go through the registered IP (WAN1) or through the other (WAN2). I am not an expert in routing or networking but I'm guessing I have a way of configuring the router so all the DNS requests go out through WAN1, right?
    In the router's Dual WAN config page there is a section for Protocol Binding. I tried to configure but only managed to screw up the internet at home. I used:
    DNS[UDP/53-53]->192.168.1.1-192.168.1.254(0.0.0.0-​0.0.0.0)WAN2
    Any help or suggestions are appreciated.
    Alex

    Good solution though. That's probably the only way you could do true Load Balancing anyway.
    Please remember to Kudo those that help you.
    Linksys
    Communities Technical Support

  • Need help with IE 8 and 9 not showing alignment right

    Ok I am working on a sit for a friend.  I have a Spry vertical menu that looks fine in FF when I view it in IE 8 or IE 9 it is to the left of the bos I need it centered.  Also in IE 8 the FAQ link jumps up beside the Slides link box.  And when I added a E-Male link under the menu it jumps up into the menu.
                    FF                                                                     IE-9                                                          IE-8
    I have been looking for a while now for a post that will help me fix this and I will keep looking till some one answers this post here is a link to the test page I have up.
    http://www.dnawebcreations.com/jump_index.html
    Thanks for any help.

    Using the original (un-modified) SpryMenuBarVertical.css as our foundation, I added the following style rules
    <style>
    ul.MenuBarVertical {
         width: 145px;
         border: none;
    ul.MenuBarVertical li {
         text-align: center;
         width: 145px;
    ul.MenuBarVertical a {
         background-color: #EB071C;
    @media screen, projection {
         ul.MenuBarVertical li.MenuBarItemIE      {
              background: #EB071C;
    </style>
    In passing, have a look here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.dnawebcreations.com%2Fjump_in dex.html. This shows the improper use of the ol element.
    Gramps

Maybe you are looking for

  • Hi All,i am currently working on a flex application that will allow the user to change the language

    Hi All,i am currently working on a flex application that will allow the user to change the language within the application from english to Japanese and vice versa. And everything works fine. I am using flex 4.5 We allow the user to save records with

  • Data of measure is not seen in  webi report when drill is disabled

    Hi i have created a hierarchy in universe on which i drill down in webi reports the problem is that  i have drilled my report till the last level and saved it the object  on which im drilling  is set as a section in the report so i have added a measu

  • In a helpset with multiple chms, how do you make the master toc appear in all child chms?

    I'm using RoboHelp 11. The software product I'm documenting is modular so the help is also divided into many chms (requirement). One of the other requirements is that the TOC from the master project appear, no matter which which chm contains the link

  • IPod Won't Finish Sync

    So, today I've had to restore my iPod to factory settings about our times now. Every time I try to re-sync all my music back, it'll slow down significantly and stop around after 1700 songs or so (out of roughly 3700). When I try to eject my iPod, iTu

  • Adding calendar to web page

    Hi I need to add a calendar to an existing website, so that someone could add events to certain days (it's actually for hall bookings), so that anyone visiting the site could see which days were free and which events were happening on which days in t