473,695 Members | 2,404 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

css - cleanest way to make spacer

Hi,
i am going to make my pages more css and xhtml compatible.
Before i got athe following code:
---------------------
<p>first text</p>
<p><img src="spacer.gif " width="1" height="80" /></p>
<p>second text</p>
---------------------

By changing the value of the transparent spacer.gif i can arange the
second text on the page where i want it to.

Is there a good way to do this with css?
Jul 23 '05 #1
11 32716
Els
Wilhelm Kutting wrote:
Hi,
i am going to make my pages more css and xhtml compatible.
Before i got athe following code:
---------------------
<p>first text</p>
<p><img src="spacer.gif " width="1" height="80" /></p>
<p>second text</p>
---------------------

By changing the value of the transparent spacer.gif i can
arange the second text on the page where i want it to.

Is there a good way to do this with css?


Yes,
<p>first text</p>
<p class="second"> second text</p>

And in your styles (so it'll work for all pages with a 'second-
class paragraph'):
p.second{margin-top:80px;}

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Jul 23 '05 #2
Els wrote:
Wilhelm Kutting wrote:

Hi,
i am going to make my pages more css and xhtml compatible.
Before i got athe following code:
---------------------
<p>first text</p>
<p><img src="spacer.gif " width="1" height="80" /></p>
<p>second text</p>
---------------------

By changing the value of the transparent spacer.gif i can
arange the second text on the page where i want it to.

Is there a good way to do this with css?

Yes,
<p>first text</p>
<p class="second"> second text</p>

And in your styles (so it'll work for all pages with a 'second-
class paragraph'):
p.second{margin-top:80px;}

This is margin 80px from the last paragraph
Can i use absolute margin from top of page, too?
Jul 23 '05 #3
Els
Wilhelm Kutting wrote:
<p>first text</p>
<p class="second"> second text</p>

And in your styles (so it'll work for all pages with a
'second- class paragraph'):
p.second{margin-top:80px;}

This is margin 80px from the last paragraph
Can i use absolute margin from top of page, too?


Yes, but it's not called margin then.
p.second{positi on:absolute;top :80px}
will set the second paragraph exactly 80 pixels from the top of
the closest positioned parent.
Meaning: if the paragraphs are inside another div which also has
position:absolu te, or position:relati ve, the 80 pixels are
calculated from the top of that div.

WARNING!!: don't even think about using the position property
until you really understand CSS.
Just one small little tiny disadvantage of setting the second
paragraph to 80px from the top of the page: What happens if the
first paragraph is higher because someone adjusted the font-
size?

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Jul 23 '05 #4
Els wrote:
Wilhelm Kutting wrote:

<p>first text</p>
<p class="second"> second text</p>

And in your styles (so it'll work for all pages with a
'second- class paragraph'):
p.second{mar gin-top:80px;}


This is margin 80px from the last paragraph
Can i use absolute margin from top of page, too?

Yes, but it's not called margin then.
p.second{positi on:absolute;top :80px}
will set the second paragraph exactly 80 pixels from the top of
the closest positioned parent.
Meaning: if the paragraphs are inside another div which also has
position:absolu te, or position:relati ve, the 80 pixels are
calculated from the top of that div.

WARNING!!: don't even think about using the position property
until you really understandto CSS.
Just one small little tiny disadvantage of setting the second
paragraph to 80px from the top of the page: What happens if the
first paragraph is higher because someone adjusted the font-
size?

Tahnx, that is a really good point!
My objective is get the site working for blind people with css so i do
not use the absolute thing.
Jul 23 '05 #5
Els
Wilhelm Kutting wrote:
Els wrote:
WARNING!!: don't even think about using the position
property until you really understandto CSS.
Just one small little tiny disadvantage of setting the
second paragraph to 80px from the top of the page: What
happens if the first paragraph is higher because someone
adjusted the font- size?

Tahnx, that is a really good point!
My objective is get the site working for blind people with
css so i do not use the absolute thing.


Eh... to get the site working for blind people, the CSS won't
do anything...

Mark up your page with pure html first, but very simple, like:
<h1>Title</h1>
<p>
introduction
</p>
<h2>secondary title</h2>
<p>
information
</p>

etc.

Then, after you're sure it's all readable and accessible,
*then* you start to add CSS, so it will be visually nice
looking for non-blind people.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Jul 23 '05 #6
Wilhelm Kutting <wk******@arcor .de> wrote:
i am going to make my pages more css and xhtml compatible.
Only your intention to move to xhtml is on topic here, and the answer
is: don't. Xhtml currently serves no useful purpose, use html 4.01
Strict.
Is there a good way to do this with css?


comp.infosystem s.www.authoring.stylesheets is the correct place for
questions regarding css, but instead of moving your questions there you
should at least make a minimum effort to learn the basics yourself.

I'm assuming that you can access the web, there's a plethora of
information on css there, use it.

--
Spartanicus
Jul 23 '05 #7
Els <el*********@ti scali.nl> wrote:
Yes,
<p>first text</p>
<p class="second"> second text</p>

And in your styles (so it'll work for all pages with a 'second-
class paragraph'):
p.second{margin-top:80px;}


This is mostly off-topic for this group (and better suited for
c.i.w.a.stylesh eets), but there are HTML issues involved in the sense
that HTML elements have some _default_ rendering in browsers. Partly this
behavior is (obscurely) described in the sample style sheets for HTML in
CSS specifications.

It is important to note in cases like this that paragraphs (p elements)
generally have a default top margin and a default bottom margin.
Moreover, by CSS rules the actual spacing between two consecutive p
elements is the larger of the first element's bottom margin and the
second element's top margin.

Thus, p.second{margin-top:80px;}, if applied by a browser, will set a
_minimum_ vertical spacing between the paragraphs. It is quire probable
that it will also set the actual spacing, but there is really no law
against using a browser with, say, a font size of 100 pixels, in which
case the first paragraph's bottom margin is probably larger than 80
pixels.

The morale is that you should normally not use the px unit but set e.g. a
top margin using the em unit, which equals the size (height) of the font
in use.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Jul 23 '05 #8
Els wrote:
Eh... to get the site working for blind people, the CSS won't do
anything...


Not yet. But in principle, there is room for an aural stylesheet.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 23 '05 #9
Els
Brian wrote:
Els wrote:
Eh... to get the site working for blind people, the CSS
won't do anything...


Not yet. But in principle, there is room for an aural
stylesheet.


True, and of course "display:no ne" does actually interfere, as
speech browsers seem to honour that value, but as the OP is only
starting out using CSS (or so it seems) I thought I'd generalize
just a little bit :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
31447
by: Richard Barnet | last post by:
I'm trying to style a line break, something like this: <br class="spacer" /> via CSS, but none of the following seems to have any effect. Any ideas? br.spacer { clear: both; height: 50px; margin-bottom: 20px;
2
2302
by: Daniel Lidström | last post by:
Hi, I would like to know the cleanest way to change the serialization of my Line class from: <Line staStart="2327.02" length="10.00000003390744"> <End>549016.570965 57945.741122</End> <Start>549019.590988 57955.274194</Start> </Line>
0
325
by: moondaddy | last post by:
using vb.net I have a datalist where the Repeat layout has: Columns 2 Direction Horizontal Layout Table I want to put a spacer column inbetween the 2 columns for better control of the distance between these 2 columns. Is this possible? And by the way, I find it a little difficult to control the spacing and alignment of template items (cells). For examle the right cell/column is a little lower than the left one.
0
954
by: | last post by:
ASP.NET 2.0 simplifies binding datasources to controls like the repeater. These new methods allow nearly code-less mechanisms to dump data to a page. I like this new feature a whole lot. HTML tags embedded in the source data are intepreteted by the web browser, of course. In cases where invalid markup has made its way into our database, this causes problems across the entire repeater presentation. I'm wondering what the simplist and...
4
2346
by: | last post by:
I'm finishing an .ascx control that takes custom properties. I've made a generalized administrative form that can be made specific by calling the user control with a bunch of parameters (e.g. <uc1:IconicNews ControlsTemplateName="FlashNewsBar" ControlsContentCategoryID="35" ControlsIconWidth="100" ControlsIconAspectRatio="1.538" ControlsPhysicalPathForImages=...) I want customized titles to appear on the administrative forms associated...
1
1112
by: shapper | last post by:
Hello, I am working on an Asp.Net 2.0 web site and I need to set the height of a panel to 200px. Should I use the Asp.Net 2.0 panel height property or should I try to use a spacer.gif image? I think that using height might give some problems .... I read this somewhere.
2
4056
by: neuneudr | last post by:
Hi everybody, I'm scratching my head with a CSS problem. I want to have the following (the two pics have these size for a good reason, the whole point of the page is basically to show these pices at these fixed sizes) : spacer - fixed size picture - spacer - fixed size picture - spacer
3
3746
by: eye ohh ewe | last post by:
Im a bit of a novice to web design and have constructed this site: www.uniguild.co.uk It displays well in IE and Safari but when in firefox the spacer gif's I used to pad it out show with a border and I can't figure out why. Any help would be gratefully received thanks in advance
0
1167
by: nataraj jaideep | last post by:
Hi, I created a spacer in CSS and called in HTML inside a div tag, so that space will occur between one div to another in webpage. But the .whitespacer is working fine with IE8 and in IE6 the space is more, i tried reducing the height for IE6 alone but it's not accepcting.I tried creating a transparent GIF image and called for IE6, but it's not working. Is there any solution for this problem to get resoved. Thanks for your help
0
8649
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8586
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9137
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
7684
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6507
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5842
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4351
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4594
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2289
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.