PDA

View Full Version : Please go to the middle of the screen. NOW SORTED.



effpeetee
Sep 7th, 2007, 12:03 PM
Will someone please tell me why the two bits of code do not work as intended.

The menu is wanted in the middle of the screen. I'm sure that my code is faulty, but I have not been able to suss it out.

Frank


CSS code-


#content
{clear:both;
position-left:auto;
position-right:auto;
font-size: 12px;
text-decoration: bold;}

#links
{ clear: left;
font:12px Georgia, "Times New Roman", Times, serif;
}

#links ul
{ margin: 0;
color: white;
padding: 0;
list-style: none; }

#links ul a
{ color: white;
font-size:1.2em;
font-weight: normal;
text-decoration: none; }

#links ul a:hover
{text-decoration: underline;}



HTML code

<div id="content">
<div id="links">
<ul>
<li><a href="http://www.huntingground.freeserve.co.uk/main/mainfram.htm">&nbsp;&nbsp;&nbsp;The Huntingground is a general help site. </a></li>
<li><a href="http://accessat.c-net.us/articles/convert.html">&nbsp;&nbsp;&nbsp;Table-based layout to a CSS layout.</a></li>
<li><a href="http://glish.com/css/">&nbsp;&nbsp;&nbsp;CSS Layout Techniques: for Fun and Profit at glish.com.</a></li>
<li><a href="http://www.snook.ca/jonathan/">&nbsp;&nbsp;&nbsp;6 Keys to Understanding Modern CSS-based Layouts.</a></li>
<li><a href="http://bonrouge.com/~home">&nbsp;&nbsp;&nbsp;HTML, CSS, PHP and javascript at Bonrouge.</a></li>
<li><a href="http://www.cssplay.co.uk/menu/shadow.html/">&nbsp;&nbsp;&nbsp;Experiments with Cascading Style Sheets.</a></li>
<li><a href="http://www.codingforums.com/index.php">&nbsp;&nbsp;&nbsp;Coding Forums - live help with programming.</a></li>
<li><a href="http://www.w3schools.com/css/css_pseudo_elements.asp">&nbsp;&nbsp;&nbsp;CSS Pseudo-elements and more.</a></li>
<li><a href="http://brainstormsandraves.com/articles/semantics/structure">&nbsp;&nbsp;&nbsp;Semantics, HTML, XHTML, and Structure</a></li>
<li><a href="http://www.alistapart.com/articles/fauxcolumns/"
>&nbsp;&nbsp;&nbsp;Faux columns.</a></li>
<li><a href="http://creativecoding.webforumz.com/articles/semantics.php">&nbsp;&nbsp;&nbsp;Semantic web design. </a></li>
</ul>
</div>
</div>

abduraooft
Sep 7th, 2007, 12:33 PM
Use margin-left:auto; margin-right:auto;
instead of position-left

Hope you are working on Source.html, please have look at the errors in CSS given by the validator (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.exitfegs.co.uk%2FSources.html&warning=1&profile=css21&usermedium=all)

effpeetee
Sep 7th, 2007, 01:02 PM
Thanks, but it has made no difference. The CSS I copied from a program on one of the sites. As my sight is poor and my typing skills about the same, I do this to avoid typing. I obviousy picked a dud this time.
Yes it is part of the tidying up of Sources.
It validates now!
Back to the grindstone.

Frank

ahallicks
Sep 7th, 2007, 02:35 PM
To get margins to work to center a block-level element you need have a specific width set.

effpeetee
Sep 7th, 2007, 04:09 PM
To get margins to work to center a block-level element you need have a specific width set.
If you go to the site and view the source, you can see it all. CSS and HTML are together. Notice that the first of the hyperlinks does not work and I have duped it so that the second entry of it works. It is shown as ...----... on screen.

Have you any idea why it will not work. It has only done this since I got the "content" div working.

Weird.

Frank

ahallicks
Sep 7th, 2007, 04:17 PM
I take it you are talking about the homepage here Frank?

Nevermind, realised it was the sources page

It would appear that you have missed a closing " at the end of the style for the h4, just before that list. Close it and it should work okay

<h4 style="text-align:left;>

effpeetee
Sep 7th, 2007, 04:20 PM
This one. http://www.exitfegs.co.uk/Sources.html

Sorry, I should have said. It is also available from my home page under urls at the bottom of the menu.

Frank

ahallicks
Sep 7th, 2007, 04:34 PM
See above... the problem should be sorted by adding that quotation mark

effpeetee
Sep 7th, 2007, 04:36 PM
See above... the problem should be sorted by adding that quotation mark
Sorted. Thanks again.

Any ideas. Let me know.

Frank.

ahallicks
Sep 7th, 2007, 04:48 PM
I would suggest you take off all of the absolute positioning on that page. At the moment your div called #body is messing things up. Remove the inline styles you have on that element in the HTML and remove what you have in the CSS. I find that div quite redundant because you could simply style the body tag itself, rather than wrapping a div around everything and calling it #body

I've attempted a little clean up:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- I know that there is a lot of surplus rubbish here. I'll deal with it in good time.-->

<html>
<head>
<title>Useful web addresses.</title>
<style type="text/css">
a:link {
COLOR: #FFF;
}

a:visited {COLOR: #FFFF00;}

a:hover {COLOR: #FF0000;}

a:active {COLOR: #FFFFFF;}


.wrapper
{ text-align: left;
background-color:black;
color:white;
margin-top:0px; }


#main
{ float: right;
width: 100%; }

#main p
{ clear: both;
width: auto;
text-align: center;
color: #0FF; }

#main a
img {border: 2px solid white;}

#main a:hover
img {border-color: orange;}

#wrap
{ position: relative;
width: 950px;
margin: auto; }


body
{background-color: #220000;
font-family: Arial, Helvetica, sans-serif;
color: white;
font-weight: bold; }

#header {
clear: both;

text-align: center;
padding: 10px;
}

#header h1
{ color:#ff0000;
text-align: center;}

#content {
width: 380px;
margin: 0 auto;
text-align: left;
}

#links
{ clear: left;
font:12px Georgia, "Times New Roman", Times, serif;
}

#links ul {
padding-left: 16px;
margin-left: 16px;
color: white;
width: 370px;
}

#links ul a
{ color: white;
font-size:1.2em;
font-weight: normal;
text-decoration: none; }

#links ul a:hover
{text-decoration: underline;}

#footer {
clear: both;
position: absolute;
left: 5%;
width: 85%; /* Overall width of div */
height: 70px; /* Overall height of div */
top: 435px; /

color:red;
text-align: center;
padding: 10px;

}
#footer h2
{ color:#ff8800;
text-align: center;}

</style>
</head>

<body>
<div id="body">
<div id="header">
<h1>Useful URLs.</h1>
</div>


<div id="content">
<div id="links">

<ul>
<li><a href="http://www.huntingground.freeserve.co.uk/main/mainfram.htm">The Huntingground is a general help site. </a></li>
<li><a href="http://accessat.c-net.us/articles/convert.html">Table-based layout to a CSS layout.</a></li>
<li><a href="http://glish.com/css/">CSS Layout Techniques: for Fun and Profit at glish.com.</a></li>
<li><a href="http://www.snook.ca/jonathan/">6 Keys to Understanding Modern CSS-based Layouts.</a></li>
<li><a href="http://bonrouge.com/~home">HTML, CSS, PHP and javascript at Bonrouge.</a></li>
<li><a href="http://www.cssplay.co.uk/index">Experiments with Cascading Style Sheets.</a></li>
<li><a href="http://www.codingforums.com/index.php">Coding Forums - live help with programming.</a></li>
<li><a href="http://www.w3schools.com/css/css_pseudo_elements.asp">CSS Pseudo-elements and more.</a></li>
<li><a href="http://brainstormsandraves.com/articles/semantics/structure">Semantics, HTML, XHTML, and Structure</a></li>
<li><a href="http://www.alistapart.com/articles/fauxcolumns/">Faux columns.</a></li>
<li><a href="http://creativecoding.webforumz.com/articles/semantics.php">Semantic web design. </a></li>
<li><a href="http://www.hotdesign.com/seybold/">The alternative to tables.</a></li>

</ul>
</div>
</div>

<div id="footer">
<h2>Site under construction. The mind boggles! (Ideas welcomed.) And how!</h2>
</div></div>
</body>
</html>

ahallicks
Sep 7th, 2007, 04:58 PM
Okay, nevermind that... I've cleaned it up a bit myself and it should still have the desired effect. I've removed all of the absolute positioning that really wasn't needed and used some nice indents as well to make things a little easier to read:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- I know that there is a lot of surplus rubbish here. I'll deal with it in good time.-->

<html>
<head>
<title>Useful web addresses.</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
background-color: #220000;
font-family: Arial, Helvetica, sans-serif;
color: white;
font-weight: bold;
margin: 20px 0;
}

a:link {
color: #FFF;
background-color: inherit;
}

a:visited {
color: #FFFF00;
background-color: inherit;
}

a:hover {
color: #FF0000;
background-color: inherit;
}

a:active {
color: #FFFFFF;
background-color: inherit;
}

.wrapper {
text-align: left;
background-color:black;
color:white;
margin-top:0px;
}

#main {
float: right;
width: 100%;
}

#main p {
clear: both;
width: auto;
text-align: center;
color: #0FF;
}

#main a img {
border: 2px solid white;
}

#main a:hover img {
border-color: orange;
}

#wrap {
position: relative;
width: 950px;
margin: auto;
}

#header h1 {
color:#ff0000;
text-align: center;
padding: 10px;
clear: both;
}

#content {
width: 380px;
margin: 0 auto;
text-align: left;
}

#links {
clear: left;
font: 12px Georgia, "Times New Roman", Times, serif;
margin-top: 40px;
}

#links ul {
padding-left: 16px;
margin-left: 16px;
color: white;
width: 370px;
}

#links ul a {
color: white;
font-size:1.2em;
font-weight: normal;
text-decoration: none;
}

#links ul a:hover {
text-decoration: underline;
}

#footer h2 {
clear: both;
height: 70px;
color:red;
text-align: center;
padding: 10px;
color:#ff8800;
margin-top: 50px;
}

</style>
</head>

<body>
<div id="body">

<div id="header">
<h1>Useful URLs.</h1>
</div>


<div id="content">

<div id="links">
<ul>
<li><a href="http://www.huntingground.freeserve.co.uk/main/mainfram.htm">The Huntingground is a general help site. </a></li>
<li><a href="http://accessat.c-net.us/articles/convert.html">Table-based layout to a CSS layout.</a></li>
<li><a href="http://glish.com/css/">CSS Layout Techniques: for Fun and Profit at glish.com.</a></li>
<li><a href="http://www.snook.ca/jonathan/">6 Keys to Understanding Modern CSS-based Layouts.</a></li>
<li><a href="http://bonrouge.com/~home">HTML, CSS, PHP and javascript at Bonrouge.</a></li>
<li><a href="http://www.cssplay.co.uk/index">Experiments with Cascading Style Sheets.</a></li>
<li><a href="http://www.codingforums.com/index.php">Coding Forums - live help with programming.</a></li>
<li><a href="http://www.w3schools.com/css/css_pseudo_elements.asp">CSS Pseudo-elements and more.</a></li>
<li><a href="http://brainstormsandraves.com/articles/semantics/structure">Semantics, HTML, XHTML, and Structure</a></li>
<li><a href="http://www.alistapart.com/articles/fauxcolumns/">Faux columns.</a></li>
<li><a href="http://creativecoding.webforumz.com/articles/semantics.php">Semantic web design. </a></li>
<li><a href="http://www.hotdesign.com/seybold/">The alternative to tables.</a></li>

</ul>
</div>

</div>

<div id="footer">
<h2>Site under construction. The mind boggles! (Ideas welcomed.) And how!</h2>
</div>

</div>

</body>
</html>

effpeetee
Sep 7th, 2007, 05:29 PM
Thanks friend ahallicks .

I have used your code and I have given you credit for it in a header comment.

Thank you for your kindness and expertise.

Frank