...

View Full Version : Resolved footer questions



OGGordon
11-14-2009, 10:54 AM
Hey guys,

I want to add this line under the title but not underline the title itself, just add a line below it. Just like in the picture here:

http://codingforums.com/attachment.php?attachmentid=7923&stc=1&d=1258195987

But how? Is that part of the border or a background image?

abduraooft
11-14-2009, 11:06 AM
But how? Is that part of the border or a background image? How can we give help on your code without seeing it? Can we have a link?

OGGordon
11-14-2009, 12:37 PM
http://derderder.cwsurf.de/

this is how my footer looks right now. this is the code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
</head>
<style>

#footer { width: 960px; height: 219px; padding-top: 7px; font-family: verdana; font-size: 12px; color: #fff; }

#menu1 { width: 200px; float: left; padding-left: 0px; padding-right: 10px; padding-bottom: 10px; margin-left: 20px; text-decoration: underline; }
#menu2 { width: 200px; float: left; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; margin-left: 20px; text-decoration: underline; }
#menu3 { width: 200px; float: left; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; margin-left: 20px; }
#menu4 { width: 200px; border: 1px: solid; float: left; padding-left: 10px; margin-left: 20px; }

t1 { color: #fff; font-family: times new roman; font-size: 20px; text-decoration: unterline; }

</style>
<body>
<div id="footer">
<div id="menu1">
<t1>Community</t1><br>
<br>
Hilfe<br>
Tipps<br>
FAQ<br>
Forum
</div>
<div id="menu2">
<t1>Heute schon gephugt?</t1><br>
<br>
Wer oder was<br>
Gaestebuch<br>
Kontakt
<br>
Feedback<br>
</div>
<div id="menu3">
<t1>Folge uns!</t1>
<br>
<br>
<img border="0" src="images/facebook.png" width="48" height="48">
<img border="0" src="images/myspace.png" width="48" height="48">
<img border="0" src="images/twitter.png" width="48" height="48"><br>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>

abduraooft
11-14-2009, 12:58 PM
this is the code That might be the expected code, but not actual. Take the page source from your browsers and check it. It doesn't follow the structure of a valid document. I think I had told you about this before at http://www.codingforums.com/showpost.php?p=884901&postcount=2

PS: Please always validate your code and try to fix the errors before asking for help.

Scriptet
11-14-2009, 02:38 PM
To create this effect you add a border-bottom, as an underline would just underline the text and not go all the way across.

But this piece of text must also reside in a block element, say a heading tag, or a div, or a span set to display block e.g



CSS:
h3{ border-bottom: 2px solid #000; }

HTML:
<h3>This text will have a line underneath it going all the way across!! </h3>


Oh and you seem to have invented your own element, t1 ? You can only invent your own elements in XML I think. See here (http://www.w3schools.com/tags/default.asp) for a list of HTML elements (don't use the ones that say "depreceated" next to them"). As explained earlier, instead use a heading tag (<h1>,<h2>..<h7>) or a <div> or a <span> set to display:block.

OGGordon
11-14-2009, 03:11 PM
To create this effect you add a border-bottom, as an underline would just underline the text and not go all the way across.

But this piece of text must also reside in a block element, say a heading tag, or a div, or a span set to display block e.g



CSS:
h3{ border-bottom: 2px solid #000; }

HTML:
<h3>This text will have a line underneath it going all the way across!! </h3>


Oh and you seem to have invented your own element, t1 ? You can only invent your own elements in XML I think. See here (http://www.w3schools.com/tags/default.asp) for a list of HTML elements (don't use the ones that say "depreceated" next to them"). As explained earlier, instead use a heading tag (<h1>,<h2>..<h7>) or a <div> or a <span> set to display:block.

I was just trying something out with t1, didn't know that some browsers don't accept that haha. But thanks for your post, exactly what I wanted. However, I know the heading tag makes everything bold, is there any way to get rid of that?

Scriptet
11-14-2009, 03:24 PM
Yea for sure, by default all headings are bold, and have different font sizes.

They also have default margins and paddings applied to them, if you haven't reset them already at the top of your stylesheet.

Anyhow to change bold, you use:

h1{ font-weight:normal ;}

Obviously change h1 to the heading you used.

OGGordon
11-14-2009, 03:34 PM
That might be the expected code, but not actual. Take the page source from your browsers and check it. It doesn't follow the structure of a valid document. I think I had told you about this before at http://www.codingforums.com/showpost.php?p=884901&postcount=2

PS: Please always validate your code and try to fix the errors before asking for help.

I now got what you meant on that previous post. Finally. I'll have to let the website run through a validator and fix all the errors. Sorry about that, I'm new to coding and still learning :thumbsup: thanks for pointing that out tho!

OGGordon
11-14-2009, 03:36 PM
Yea for sure, by default all headings are bold, and have different font sizes.

They also have default margins and paddings applied to them, if you haven't reset them already at the top of your stylesheet.

Anyhow to change bold, you use:

h1{ font-weight:normal ;}

Obviously change h1 to the heading you used.

aah that's what i thought, everything was in different places once I put on the h3 tag. Thanks a bunch!;)

OGGordon
11-14-2009, 09:29 PM
Yea for sure, by default all headings are bold, and have different font sizes.

They also have default margins and paddings applied to them, if you haven't reset them already at the top of your stylesheet.

Anyhow to change bold, you use:

h1{ font-weight:normal ;}

Obviously change h1 to the heading you used.

just one more thing, how do you reset the margins and paddings?

Scriptet
11-14-2009, 09:35 PM
Well to reset all default margins and paddings for all elements e.g headings, ul's and forms you add the following to the very top of your stylesheet:



*{ margin:0; padding:0; }


* basically selects all elements. This is called the universal css reset.

But there are occassions where you wouldn't want to use this universal css reset, e.g if you are happy with browser defaults, or on some pages where you use forms, because the defaults here are pretty handy.

If you didn't use the universal reset you can do it using:


h1{ margin:0; padding:0; }

Obviously replace h1 with the heading you have used again.

OGGordon
11-15-2009, 02:24 PM
Well to reset all default margins and paddings for all elements e.g headings, ul's and forms you add the following to the very top of your stylesheet:



*{ margin:0; padding:0; }


* basically selects all elements. This is called the universal css reset.

But there are occassions where you wouldn't want to use this universal css reset, e.g if you are happy with browser defaults, or on some pages where you use forms, because the defaults here are pretty handy.

If you didn't use the universal reset you can do it using:


h1{ margin:0; padding:0; }

Obviously replace h1 with the heading you have used again.


great, thank you :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum