another styling dilemma

J

John Salerno

And this time I'm using the right files! :)

Anyway, here's what I have, but it's not moving it to the right side of
the screen. Perhaps this isn't the way to do it.

<div id="footer">
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="valid-xhtml10.png" alt="Valid XHTML 1.0 Strict" height="31"
width="88" />
</a>
</p>
</div>


div#footer img {
text-align: right;
border: none;
}
 
J

John Salerno

After this, I'm calling it a night!

Ok, here's the stylesheet I'm using: http://www.johnjsal.com/msdn.css

and here is my page so far: http://www.johnjsal.com/g_camera_move.html

Two questions:

1. I have this bit at the bottom of the stylesheet:

div#banner span {
padding-top: 10px;
padding-bottom: 10px;
}

yet the text in the top banner does not have any padding. Does a <span>
not have padding?

2. But more baffling is this: You'll notice that the text in the top
banner, "GestaltCameraMove", is flush against the left side of the
banner. Looking at the stylesheet, this seems right because I can't find
anything that would move it over. Yet there are other pages very similar
to mine (that contain the same sort of information in the same layout,
using this stylesheet) that has a small margin on the left of that
banner text. If I make the margin-left property of div#banner span 10px,
then it will move it over, yet somehow those other pages have it moved
over without this property. Is there something in the stylesheet I'm
missing that causes it to indent?

Thanks.
 
M

Mark Parnell

Deciding to do something for the good of humanity, John Salerno
yet the text in the top banner does not have any padding.
Click to expand...

It does - on the bottom at least. You can see this if you add a border
to it.
Does a <span>
not have padding?
Click to expand...

Yes it does, but because <span> is inline, it flows differently to a
block-level element (e.g. <div>), which is presumably what you are
expecting. 2 solutions - add display: block to div#banner span, or put
the padding on div#banner instead. Second option is better, because then
you can get rid of the span from the HTML.
Is there something in the stylesheet I'm
missing that causes it to indent?
Click to expand...

Impossible to say without seeing one of these other pages that exhibit
such behaviour. It could be that the image is in an element that
browsers have default margin/padding on (e.g. <p>, <div>).
 
J

John Salerno

Mark said:
Yes it does, but because <span> is inline, it flows differently to a
block-level element (e.g. <div>), which is presumably what you are
expecting. 2 solutions - add display: block to div#banner span, or put
the padding on div#banner instead. Second option is better, because then
you can get rid of the span from the HTML.
Click to expand...

Thanks. I think I like the second option better also, but the span is
there for other reasons that I haven't implemented yet.
Impossible to say without seeing one of these other pages that exhibit
such behaviour. It could be that the image is in an element that
browsers have default margin/padding on (e.g. <p>, <div>).
Click to expand...

Sorry, I should have supplied this:

<body><div id="banner"><br><span>
<a class="nav" href="../home.shtml">Home</a> &gt; <a class="nav"
href="other.reference.html">Reference</a>&gt; <a class="nav"
href="function.index.html">Functions</a> &gt; <a class="nav"
href="categoryfunction.LocalVariables.html">Local Variables</a>&gt;
SetLocalInt</span><br><br></div>

This makes the banner text read: Home > Reference > Functions > Local
Variables > SetLocalInt, makes them links, etc. (which you can see,
obviously), and nothing else seems to cause the indent.

You can see this here: http://www.johnjsal.com/function.SetLocalInt.html
 
M

Mark Parnell

Deciding to do something for the good of humanity, John Salerno
nothing else seems to cause the indent.

You can see this here: http://www.johnjsal.com/function.SetLocalInt.html
Click to expand...

The indent is caused by the 3 non-breaking spaces before the first link.
&nbsp;&nbsp;&nbsp;

And the space above and below the links is caused by the line breaks.

Both should be replaced by appropriate CSS - padding on #banner would be
best.
 
J

John Salerno

Mark said:
Deciding to do something for the good of humanity, John Salerno


The indent is caused by the 3 non-breaking spaces before the first link.
&nbsp;&nbsp;&nbsp;
Click to expand...

Wow, where do you see those nbsp?
And the space above and below the links is caused by the line breaks.

Both should be replaced by appropriate CSS - padding on #banner would be
best.
Click to expand...

I agree, hence my experiment with padding the span element. If nothing
else, at least some warning lights went off in my head when I saw the
<br> being used to create space! :)
 
M

Mark Parnell

Deciding to do something for the good of humanity, John Salerno
Wow, where do you see those nbsp?
Click to expand...

Weirdly enough, not when I View Source. I saw them using the Web
Developer extension to edit the HTML, but I can also see them using the
View Rendered Source extension. You can see it if you highlight the text
on the page too - there are definitely 3 spaces before the first link.

I can also see them if I save the page locally and then look at the
source. What program did you use to create that page? My guess would be
that there are some weird MS characters in there or something.

BTW: That page is missing a doctype declaration - so it triggers Quirks
mode in most modern browsers (and IE). That could cause it to behave
differently to the other page anyway.
 
J

John Salerno

Mark said:
I can also see them if I save the page locally and then look at the
source. What program did you use to create that page? My guess would be
that there are some weird MS characters in there or something.

BTW: That page is missing a doctype declaration - so it triggers Quirks
mode in most modern browsers (and IE). That could cause it to behave
differently to the other page anyway.
Click to expand...

Actually, that particular page (and many more) weren't created by me.
I'm just using the same stylesheet to make some new pages dealing with
some new functions. In a way I'm kind of stuck using their styling (the
<span>, for instance, although I suppose I could easily change that),
but I definitely am being more strict with my structure, such as no <br>
to make space. My page also has a doctype.

I guess they put the nbsp in there on purpose, because it does look
nicer than mine, but in order to do the same thing I like I'll use div
padding or span margin. You suggest:

padding: 10px 0px 10px 10px; ?
 
J

John Salerno

Mark said:
Deciding to do something for the good of humanity, John Salerno


Weirdly enough, not when I View Source. I saw them using the Web
Developer extension to edit the HTML, but I can also see them using the
View Rendered Source extension. You can see it if you highlight the text
on the page too - there are definitely 3 spaces before the first link.

I can also see them if I save the page locally and then look at the
source. What program did you use to create that page? My guess would be
that there are some weird MS characters in there or something.

BTW: That page is missing a doctype declaration - so it triggers Quirks
mode in most modern browsers (and IE). That could cause it to behave
differently to the other page anyway.
Click to expand...
P.S. For my own part, I'm just typing it in by hand. It helps me
learn, but I think now I will write a small program to automate some of
it, but still I'd like to have control over the structure, so I don't
plan to use a big program to create the pages for me.

But I do have one question: I think that some pages will have duplicate
information. Is it best to just have the info twice, or is there some
way that it can be inserted via scripting, perhaps? The only issue with
this is I plan to compile these pages into a CHM file, so I don't know
if having scripting in the pages will cause problems. (Example, every
function I plan to make a page for will have the same "Requirements"
section.)
 
M

Mark Parnell

Deciding to do something for the good of humanity, John Salerno
padding: 10px 0px 10px 10px; ?
Click to expand...

I generally use em as it is relative to the font size, but px is fine
for padding.
 
J

John Salerno

Mark said:
Deciding to do something for the good of humanity, John Salerno


I generally use em as it is relative to the font size, but px is fine
for padding.
Click to expand...

That's true. I think I would too, but I'm trying to stay consistent with
the stylesheet as it's already written. It's a pain dealing with someone
else's markup and style! :)
 
J

John Salerno

Mark said:
Deciding to do something for the good of humanity, John Salerno


You can do that either on the server or when generating the pages in the
first place.

http://allmyfaqs.net/faq.pl?Include_one_file_in_another
Click to expand...

Yeah, I think JavaScript and PHP will be my next projects, after I get
better with HTML and CSS. But as far as this particular thing I'm
working on, I don't think any kind of scripting would work, since I plan
to compile it into a CHM file. PHP definitely wouldn't work, and I doubt
JS would either, unless CHM has some kind of support for it.
 
M

Mark Parnell

Deciding to do something for the good of humanity, John Salerno
I don't think any kind of scripting would work, since I plan
to compile it into a CHM file.
Click to expand...

You'd have to look at some sort of preprocessor then.
PHP definitely wouldn't work, and I doubt
JS would either, unless CHM has some kind of support for it.
Click to expand...

IIRC CHMs support Javascript, as long as it is enabled in IE.
 

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

Help with code 0
Help with Visual Lightbox: Scripts 2
Help with my responsive home page 2
Aligned to the left 3
Image shifts to the right when export the page to pdf 4
Please Help? 0
Working on mobile css menu with plenty of frustration! 2
Flip-Cards with Local Images 1

Members online

No members online now.
Total: 28 (members: 0, guests: 28)
Robots: 453

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top