css adding breaks

I

iamdave

OK, so I'm moving from tables to css thanks to suggestions. One thing
I don't understand is that when I do a link like:

<a href="url">text</a> I get a break. For instance the text won't stay
in one sentence, the next words after the link drops down into a new
paragraph.

Any idea how to stop that?

css also seems to make it tough to break as you want. For instance

<a href="url">text</a><br>
<a href="url">text</a><br>
<a href="url">text</a><br>

instead of giving me:

text
text
text

gives me :

text text text

I can't seem to control breaks while using css

Dave
 
M

Michael Fesser

..oO(iamdave)
OK, so I'm moving from tables to css thanks to suggestions. One thing
I don't understand is that when I do a link like:

<a href="url">text</a> I get a break. For instance the text won't stay
in one sentence, the next words after the link drops down into a new
paragraph.

Any idea how to stop that?

It's something else in your code, so please post a URL.
css also seems to make it tough to break as you want. For instance

<a href="url">text</a><br>
<a href="url">text</a><br>
<a href="url">text</a><br>

instead of giving me:

text
text
text

gives me :

text text text

I can't seem to control breaks while using css

Same thing - code error. Post a URL.

Micha
 
I

iamdave

.oO(iamdave)
It's something else in your code, so please post a URL.


Micha

Haven't published it. Here's the page code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title>Layout 13</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #ffd700}
div#content p{line-height:1.4}
div#navigation{background:#000000}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#wrapper{float:left;width:100%}
div#content{margin-left: 130px; margin-right: 200px}
div#navigation{float:left;width:125px;margin-left:-100%}
div#extra{float:left;width:200px;margin-left:-200px}
div#footer{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>new pics will go here</h1>
</div>
<div id="wrapper">
<div id="content">
<p>text</p>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong><p><a href="http://
the316band.com/contact.htm"><img src="/images/316-contact.gif"
width="75" height="75" border="0"></a><br>
<a href="http://the316band.com/schedule.htm"><img src="/images/316-
events.gif" width="75" height="75" border="0"></a><br>
<a href="http://the316band.com/listen.htm"><img src="/images/316-
audio.gif" width="75" height="75" border="0"></a><br>
<a href="http://the316band.com/pictures.htm"><img src="/images/316-
pics.gif" width="75" height="75" border="0"></a><br>
<a href="http://the316band.com/bios.htm"><img src="/images/316-
bios.gif" width="75" height="75" border="0"></a><br>
<a href="http://the316band.com/purpose.htm"><img src="/images/316-
purpose.gif" width="75" height="75" border="0"></a><br>
<a href="http://the316band.com/links.htm"><img src="/images/316-
links.gif" width="75" height="75" border="0"></a><br>
<a href="http://the316band.com"><img src="/images/316-home.gif"
width="75" height="75" border="0"></a></p>
</div>
<div id="extra">
<p>text.</p>
</div>
<div id="footer"> <p align="center"><a href="/contact.htm"><font
color="#FFFFFF">contact </font></a> | <a href="/schedule.htm"><font
color="#FFFFFF">schedule </font></a> | <a href="/listen.htm"><font
color="#FFFFFF">listen</font></a> | <a href="/pictures.htm"><font
color="#FFFFFF">pics</font></a> | <a href="/bios.htm"><font
color="#FFFFFF">bios</font></a> | <a href="/purpose.htm"><font
color="#FFFFFF">purpose</font></a> | <a href="/links.htm"><font
color="#FFFFFF">links</font></a> | <a href="http://
the316band.com"><font color="#FFFFFF">home</font></a><br>
<a href="/are_you_saved.htm"><font color="#FFFFFF">Are
you saved?</font></a> | <a href="/need_peace.htm"><font
color="#FFFFFF">Need
peace?</font></a> </p>
<p align="left">Copyright 2008 The 3:16 Band - all rights reserved</
p></div>
</div>
</body>
</html>

The bottom footer is the where problem #1 arises. Problem #2 was on
the left side nav. But I seem to be able to get around that by
restricting the width of that column.

Thanks a lot! :)

Dave
 
M

Michael Fesser

..oO(iamdave)
Haven't published it. Here's the page code.

Nest time please get some webspace or use the one of your ISP to upload
a test case. Don't expect people to copy and paste your code onto their
own machines.
body{font: 76% arial,sans-serif}

76% will be way too small for many people, but the main problem ...
a{display:block;color: #981793;padding:10px}

.... is this. Remove the 'display: block'.
The bottom footer is the where problem #1 arises. Problem #2 was on
the left side nav. But I seem to be able to get around that by
restricting the width of that column.

For a navigation bar using an unordered list would make more sense.

Micha
 
I

iamdave

.oO(iamdave)
Nest time please get some webspace or use the one of your ISP to upload
a test case. Don't expect people to copy and paste your code onto their
own machines.

Sorry, my fault. I posted it now. It was just goofy looking and I was
ashamed to have it up there. It's live now at http://the316band.com
76% will be way too small for many people

I'm the novice with css and got this template from somewhere on the
net to get started using css instead of tables. Not sure even what 76%
is. I increased it to 90% though figuring it needed to be higher.
, but the main problem ...


... is this. Remove the 'display: block'.

thank you much!
For a navigation bar using an unordered list would make more sense.

Micha

I'll look into that and learn about that also. :)

If I may, a couple new questions from a rookie.

- In Firefox I get a little red line under my links at the bottom of
the page in the footer section. any way to get rid of those?

- In both IE and firefox an extra space is created directly before and
after every hyperlink. Nothing I do seems to move the "extra" space. I
tried deleting any space which didn't change anything. Still 2 spaces
before and after hyperlinks.

- For some reason in IE sometimes hovering over a link doesn't give
you the url or little hand showing you it's a hyperlink. But you go
back to it again it finally will. I see this especially in the footer
section. It just doesn't seem to like the links very well for some
reason.

I ordered 2 books on css so I can gain some more insight into this. My
next step is to make a file so that I don't have to call the css files
on every page. I forget what they call that but realize how useful it
will be for the entire site to look much better and be easier to
maintain.

Thanks again, I certainly appreciate your help.

Dave
 
B

Beauregard T. Shagnasty

iamdave said:
I'm the novice with css and got this template from somewhere on the
net to get started using css instead of tables. Not sure even what
76% is. I increased it to 90% though figuring it needed to be higher.

The percentage is the .. percentage .. of your visitors chosen default
font size. 90% is only 90% of my chosen size. Or yours. Or BillyBob's.
See this page of mine, which may help in understanding:
http://k75s.home.att.net/fontsize.html

If 100% looks too large in *your* browsers, decrease your own default by
a little bit.

I'd also recommend you not use pixel (px) sizing for anything but sizes
of images, and borders 'round stuff. Use em units instead. This way,
when the visitor with vision problems comes by and increases the size to
something s/he can read, your content doesn't escape outside your
constrained limits.
I ordered 2 books on css so I can gain some more insight into this. My
next step is to make a file so that I don't have to call the css
files on every page. I forget what they call that but realize how
useful it will be for the entire site to look much better and be
easier to maintain.

I'd call it using "external css" rather than "inpage..." ;-)

While you wait for your books, have a play here:
http://htmldog.com/

You have HTML errors on your page:
<http://validator.w3.org/check?verbose=1&uri=http://the316band.com/>
 
J

John Hosking

iamdave said:
On Jan 18, 12:32 pm, Michael Fesser wrote:
Sorry, my fault. I posted it now. It was just goofy looking and I was
ashamed to have it up there. It's live now at http://the316band.com/


I'm the novice with css and got this template from somewhere on the
net to get started using css instead of tables. Not sure even what 76%
is. I increased it to 90% though figuring it needed to be higher.

You were right, but the number is 100%. 90% might be okay for your
copyright text, though.

I'll look into that and learn about that also. :)

If I may, a couple new questions from a rookie.

- In Firefox I get a little red line under my links at the bottom of
the page in the footer section. any way to get rid of those?

The line is there because that's how browsers typically display links.
The underlines are also how people recognise where the links are. Since
you're talking about a menu, it might not confuse anybody to remove the
underlines, but I wouldn't suggest you do it otherwise.

To your a rule you could add the declaration "text-decoration:none;"
(without quotes). But this will affect the other links on your page,
such as those in the sidebar. So consider making a separate ruleset

..footer a { color:#FFFFFF; text-decoration:none; }

to come after your .footer and a rule sets.

Then you can (and should) take all the said:
- In both IE and firefox an extra space is created directly before and
after every hyperlink. Nothing I do seems to move the "extra" space. I
tried deleting any space which didn't change anything. Still 2 spaces
before and after hyperlinks.

That'll be the padding:10px; in your CSS for a. Delete that. It'll be:
a {color:#981793; }

This will also clear up the problem I see in FF where only part of the
link is underlined.
- For some reason in IE sometimes hovering over a link doesn't give
you the url or little hand showing you it's a hyperlink. But you go
back to it again it finally will. I see this especially in the footer
section. It just doesn't seem to like the links very well for some
reason.

I don't know (although I see that too), but maybe it's because your
footer links are inside a <p> which has a line-height declared. What
happens when you remove that declaration from the p rule, or you change
the links from <p> contents to <ul> list items as Michael suggested?

May I also suggest you consolidate your declations for one element to a
single rule set? So instead of two rules for .footer you get
div#footer {background:#333; color:#FFF; clear:left; width:100%; }.

I also suggest you declare color where you specify background-color, and
vice-versa.
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top