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 SinghHello 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
BonganiHi
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
AmolCheck 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...
> -
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,
JK1. 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.
AlexGood 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.
AlexGood 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 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
-
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
-
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
-
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