Making a margin on the right

C

Cogito

I have a small gif file that consists of a short patch of color fading
into white. When I put it as a background to my page it creates a
continuous line on the left side of the page.
<body background="margin.gif"><blockquote>

So far so good. Now, on another page I would like to have a similar
effect but on the right side of the page. Is there a way of achieving
that?
 
B

brucie

in post: <
Cogito said:
I have a small gif file that consists of a short patch of color fading
into white. When I put it as a background to my page it creates a
continuous line on the left side of the page.
ok

<body background="margin.gif"><blockquote>
Click to expand...

i'm not sure what thats supposed to be but it scares me.
So far so good. Now, on another page I would like to have a similar
effect but on the right side of the page. Is there a way of achieving
that?
Click to expand...

in your <head>

for the left side:
<style type="text/css">
body{background: #FFF url(margin.gif) repeat-y left};
</style>

for the right side:

<style type="text/css">
body{background: #FFF url(margin.gif) repeat-y right};
</style>

or if you're using external CSS drop the <style> bits

what the css says is to make the background white '#FFF' use an image on
the background 'url(margin.gif)' repeat it down the window 'repeat-y' on
the 'left' or the 'right'.
 
B

brucie

in post: <
brucie said:
body{background: #FFF url(margin.gif) repeat-y left};
body{background: #FFF url(margin.gif) repeat-y right};
Click to expand...

the end bits have the ';' thingy in the wrong place, they should be:

.... left;}
.... right;}
 
C

Cogito

i'm not sure what thats supposed to be but it scares me.
Click to expand...

What is scary about it? The 'background' species the graphic for the
margin and the 'blockquote' offsets the following text to go past the
margin graphic.

Thank you *very* much for your answer. It works very well. I have
spent hours trying to do it myself and was already convinced that it
was not possible…

Meantime, a new problem has arisen. Previously I had this type of
'body' statement:

<body bgcolor=#ffffff text=#000000 alink=#993300 link=#0000cc
vlink=#0000cc rightmargin=0 topmargin=0>

It seems that your new 'body' statement works only if I remove the
previous statement. Can you please show me how to incorporate the
parameters from the fist statement into the second?

Also, why is the background color made out of only three hex
characters?

Steve
 
R

rf

Cogito said:
On Mon, 31 May 2004 16:23:10 +1000, in alt.html you wrote:
Meantime, a new problem has arisen. Previously I had this type of
'body' statement:

<body bgcolor=#ffffff text=#000000 alink=#993300 link=#0000cc
vlink=#0000cc rightmargin=0 topmargin=0>
Click to expand...
It seems that your new 'body' statement works only if I remove the
previous statement. Can you please show me how to incorporate the
parameters from the fist statement into the second?
Click to expand...

brucie gave you some CSS. CSS is used for presentational issues. You should
avoid using HTML attributes (as above) for presentational issues, CSS is so
much easier. If you mix things then stuff can break.

<style type="text/css">
body {bacground-color: white; color: black; margin-top: 0; margin-right: 0;}
a:link {background-color: inherit; color: #00c}
a:visited {background-color: inherit; color: #0fc}
a:hover {background-color: inherit; color: #whatever you want}
a:active {background-color: inherit; color: #930}
</style>
....
Also, why is the background color made out of only three hex
characters?
Click to expand...

#930 == #993300

Cheers
Richard.
 
B

brucie

in post: <
What is scary about it? The 'background' species the graphic for the
margin and the 'blockquote' offsets the following text to go past the
margin graphic.
Click to expand...

<body bgcolor=#ffffff text=#000000 alink=#993300 link=#0000cc
vlink=#0000cc rightmargin=0 topmargin=0>
Click to expand...

how about something like this instead:
http://moreshit.bruciesusenetshit.info/left-margin-thingy.shit
Also, why is the background color made out of only three hex
characters?
Click to expand...

its shorthand for #FFFFFF
 
C

Cogito

Thank you so much Brucie and Richard. I never believed that "I" would
solve my problem so quickly.
I'll just show it around as if I had whipped it up in a few minutes…

Brucie, two more thing, What is the meaning of the 50% parameter in
your sample code?

<STYLE type=text/css media=all>BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND:
url(leftmargin.png) #fff repeat-y left 50%; PADDING-BOTTOM: 0px;
MARGIN: 0px 0px 0px 100px; COLOR: black; PADDING-TOP: 0px
}

Since I see that HTML is passé and I know that you have millions of
links in your arsenal, could you please point me to some good CSS
reference and tutorials sites?
 
B

brucie

in post: <
Cogito said:
Brucie, two more thing, What is the meaning of the 50% parameter in
your sample code?
Click to expand...

i didn't put "50%" on the background property.

the line is:

background: #FFF url(leftmargin.png) repeat-y left;

i suspect your html editor is adding it. if you only specify the
horizontal position the vertical position will be 50% however mixing
keywords with other length values is invalid.

if it is your html editor doing it get a new one:

HTML
free:
jedit: http://www.jedit.org/
nedit: http://www.nedit.org/
ewisoft: http://www.ewisoft.com/
netpadd: http://www.netpadd.com/
araneae: http://www.araneae.com/
1st page: http://www.evrsoft.com/
crimson: http://crimsoneditor.com/
ezpad: http://www.mmedia.is/ezpad/
acehtml: http://freeware.acehtml.com/
notetab light: http://www.notetab.com/
html-kit: http://www.chami.com/html-kit/
context: http://www.fixedsys.com/context/
pspad: http://www.pspad.com/en/index.html
websmill: http://www.xtreeme.com/websmill/
metapad: http://www.liquidninja.com/metapad/
quanta (linux): http://quanta.sourceforge.net/
tswebeditor: http://thaler.ennstal.at/tswebeditor/
notespad: http://www.newbie.net/NotesPad/index.html
grey matter pro: http://www.pagetutor.com/misc/grey.html
editpad lite: http://www.editpadlite.com/editpadlite.html
stones webwrite: http://www.webwriter.dk/english/index.htm
matizha sublime: http://www.matizha.com/en/products/sublime/

not free:
textpad: http://www.textpad.com/ [$30]
notetab: http://www.notetab.com/ [$10+]
editplus: http://www.editplus.com/ [$30]
ultraedit: http://www.idmcomp.com/ [$35]
editpad: http://www.editpadpro.com/ [$40]
hypertext studio: http://www.olsonsoft.com/ [$100]
namo: http://www.namo.com/products/webeditor/ [$90]
acehtml pro: http://www.visicommedia.com/acehtml/ [$50]
ibm websphere: http://www-3.ibm.com/software/webservers/hpbuilder/ [$70]
spider writer: http://www.actiprosoftware.com/Products/SpiderWriter/ [$80]

PHP
phpedit: http://phpedit.org/ [$0]
Winsyntax: http://winsyntax.com/ [$0]
HydraPHP: http://www.coldmind.com/ [comming soon]
devphp: http://devphp.sourceforge.net/ [$0]
phped: http://www.nusphere.com/products/ [$300]
top php studio: http://www.top-systems.net/ [$30]
dzsoft php editor: http://www.dzsoft.com/dzphp.htm [$40]
Expert Editor: http://www.ankord.com/phpxedit.html [$35]
komodo: http://www.activestate.com/Products/Komodo/ [$30+]
phpcoder: http://www.phpide.com/go/programs/php_coder.htm [$0]
Davor's PHP Editor: http://www.pleskina.com/dphped/main.php [$0]
maguma studio/workbench: http://www.maguma.com/products/?article=Studio {$40+]

XML
xopus: http://xopus.com/ [$850]
editml: http://www.editml.com/ [$90+]
xmlpro2: http://www.vervet.com/ [$0]
cooktop: http://www.xmlcooktop.com/ [$0]
xray: http://www.architag.com/xray/ [$0]
xmlwriter: http://www.xmlwriter.net/ [$100]
oxygen pro: http://www.oxygenxml.com/ [$100]
blueprint: http://www.xmlblueprint.com/ [$45]
xmlmind: http://www.xmlmind.com/xmleditor/ [$0/$220]
peters xml eiditor: http://www.iol.ie/~pxe/ [$0]
xmlspy: http://www.xmlspy.com/products_ide.html [$400]
morphon: http://www.morphon.com/xmleditor/index.shtml [$0]
turboxml: http://www.tibco.com/solutions/products/extensibility/turbo_xml.jsp [$270]

·prices last checked may/2004

could you please point me to some good CSS reference and tutorials
sites?
Click to expand...

css tutorials and other fun 'n giggly css stuff:
http://www.css.nu/
http://www.mako4css.com/
http://www.richinstyle.com/
http://www.blazonry.com/css/
http://www.w3schools.com/css/
http://www.websitetips.com/css/
http://www.htmlhelp.com/reference/css/
http://www.pageresource.com/dhtml/indexcss.htm
http://old.climbtothestars.org/coding/cssbasic/
http://www.htmlcenter.com/tutorials/index.cfm/css/
http://www.freewebmastertips.com/php/content.php3?aid=48
http://www.canit.se/~griffon/web/writing_stylesheets.html
http://www.utoronto.ca/ian/books/xhtml2/exerpt/css-4a.html
http://www.greytower.net/en/archive/articles/tsutsumi.html
http://www.intranetjournal.com/articles/200101/csstutorial1a.html
http://webmonkey.com/authoring/stylesheets/tutorials/tutorial1.html

layout examples:
http://www.glish.com/css/
http://www.csszengarden.com/
http://www.bookofstyles.org/
http://tantek.com/CSS/Examples/
http://www.saila.com/usage/layouts/
http://www.bluerobot.com/web/layouts/
http://www.benmeadowcroft.com/webdev/
http://nemesis1.f2o.org/templates.php
http://www.xs4all.nl/~apple77/columns/
http://www.meyerweb.com/eric/css/edge/
http://www.htmler.org/tutorials/3/1.html
http://css.nu/articles/floating-boxes.html
http://webhost.bridgew.edu/etribou/layouts/
http://www.roguelibrarian.com/lj/index.html
http://css-discuss.incutio.com/?page=CssLayouts
http://ecoculture.com/styleguide/r/rollovers.html
http://thenoodleincident.com/tutorials/box_lesson/index.html
http://www.webreference.com/authoring/style/sheets/layout/advanced/

some sites using css layouts:
http://www.inc.com/
http://www.wired.com/
http://www.opera.com/
http://www.kitty5.com/
http://www.cinnamon.nl/
http://msn.espn.go.com/
http://www.virtuelvis.com/
http://www.emptybottle.org/
http://www.fastcompany.com/
http://www.littleyellowdifferent.com/
http://www.pga.com/pgachampionship/2004/

rounded corners:
http://www.albin.net/CSS/roundedCorners/
http://www.alistapart.com/articles/customcorners/
http://www.guyfisher.com/builder/workshop/css/corners/

slants: http://www.infimum.dk/HTML/slantinfo.html
lists: http://www.alistapart.com/articles/taminglists/
pure css menus: http://www.meyerweb.com/eric/css/edge/menus/demo.html
Fast rollovers: http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

centering thingys
http://dorward.me.uk/www/centre/
http://www.w3.org/Style/Examples/007/center.html
http://www.student.oulu.fi/~laurirai/www/css/middle/
http://hicksdesign.co.uk/articles/css/vertical_centering_with_css/

master compatibility charts:
http://centricle.com/ref/css/filters/
http://www.blooberry.com/indexdot/css/index.html
http://macedition.com/cb/resources/abridgedcsssupport.html
old:
http://www.immix.net/html/CSSGuide.htm
http://devedge.netscape.com/library/xref/2003/css-support/

hiding CSS from crappy browsers:
http://diveintomark.org/safari/csshacks/
http://www.ericmeyeroncss.com/bonus/trick-hide.html
http://www.w3development.de/css/hide_css_from_browsers/

css checkers:
http://jigsaw.w3.org/css-validator/
http://www.htmlhelp.com/tools/csscheck/

cascading style sheets, level 1 specification
http://www.w3.org/TR/REC-CSS1
cascading style sheets, level 2 specification
http://www.w3.org/TR/REC-CSS2/
cascading style sheets, level 2 revision 1 Candidate Recommendation
http://www.w3.org/TR/CSS21/
 
E

Els

brucie said:
in post: <


then your browser is adding it because it simply doesn't exist in the
page markup.
Click to expand...

Can browsers do that??
Mine doesn't, I'm not seeing any 50%, and would be very
surprised if any browser would try and make me see it.
 
B

brucie

in post: <
Can browsers do that??
Click to expand...

IE has a habit of adding markup to pages it think should be there.

open a blank html file with IE6 and it'll have added this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252"></HEAD>
Mine doesn't, I'm not seeing any 50%,
Click to expand...

good! <big sigh/> the little voices were even starting to get freaked
out. cogito is just messing with my head
 
E

Els

brucie said:
in post: <


IE has a habit of adding markup to pages it think should be there.
Click to expand...

One more reason to not use it.
open a blank html file with IE6 and it'll have added this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252"></HEAD>
<BODY></BODY></HTML>
Click to expand...

hmm.. just created (in TextPad) a file named blank.html,
opened it in IE (6.0 - WinXP), and looked at the source...
nothing. Really nothing.
Maybe if I upload it?
http://locusmeus.com/test/blank.html
....
!! it does indeed!
Dutch expression: "Now my wooden shoe is breaking..."
(translates as "Crikey!")

hmm... let me check your shit-link in IE:
http://moreshit.bruciesusenetshit.info/left-margin-thingy.txt
Nope, no 50%. :)
good! <big sigh/> the little voices were even starting to get freaked
out. cogito is just messing with my head
Click to expand...

If you need reassurance of reality anytime, call me ;-)
 
E

Els

Cogito said:
You are right. It's not in the txt file.
I used IE save as... to save the site and then edited it in order to
inspect the code. IE must have expanded the code and added the full
parameter names and somehow also the 50% value.
Click to expand...

Tried that too, and indeed, after saving it as webpage, it
does that. Wow, good to know that.
I have saved pages before to be able to look at the code
later, but apparently that's NOT a good method of learning
html...
 
E

Els

brucie said:
in post: <

i would never have guessed.


what about visiting?
Click to expand...

What part of my sentence did you want to replace by
visiting? 'reassurance of reality' or 'call'?
 
B

brucie

in post: <
What part of my sentence did you want to replace by
visiting? 'reassurance of reality' or 'call'?
Click to expand...

if i save the post with IE it says:

"If you need reassurance of reality anytime, visit me"

i'll pack my tape.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I need help making a zooming function 11
I Need Help with making a function that draws in a canvas using location data. 1
Image shifts to the right when export the page to pdf 4
Shift Button from Left to right, coding help 1
How to position the *tooltip* comment on these buttons? 9
Right margin in IE? 7
Canvas drawing HTML Javascript on elementor 1
Why is the e.target not working here? 1

Members online

No members online now.
Total: 32 (members: 1, guests: 31)
Robots: 331

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top