...

View Full Version : Unobedient navigation does not want to align to the left..



Sofie
11-03-2006, 03:32 PM
Here's the site www.sofielyr.com please see in firefox.. click on "rides" to the left and see the CSS..

I've rebuildt this site thank's to VIPstephan:thumbsup:, taking away the tables using only div.

Lot's of problems still of cause, but to begin with, why doesn't my navigation line up to the left when I've told it to?! Or actually it does if I don't align all the content to the centre... How can I align all of the page to the centre but still keep the nav to the left?

Later I would like the left pink box to follow automatically all the way down to the footer. So that the text to the right doesn't come in under it. How please?

I also want to have my text padded about 3-5 px round the picture and from the borders without making the whole box bigger... Healp Healp Please :o

Further I want the page to look the same in IE as in Firefox...

kaitco
11-03-2006, 05:09 PM
Lot's of problems still of cause, but to begin with, why doesn't my navigation line up to the left when I've told it to?! Or actually it does if I don't align all the content to the centre... How can I align all of the page to the centre but still keep the nav to the left?
Your issue here is that you are using deprecated code and it is doing exactly what you are telling it to do. align="center", aside from being deprecated will align everything within that tag to the center.



Later I would like the left pink box to follow automatically all the way down to the footer. So that the text to the right doesn't come in under it. How please?
Consider this (http://bonrouge.com/br.php?page=equalheightcss) option to accomplish this.


I also want to have my text padded about 3-5 px round the picture and from the borders without making the whole box bigger... Healp Healp Please :o
Further I want the page to look the same in IE as in Firefox...
Do remember that IE (well, IE6 at least) tends to double paddings and margins; meaning padding: 3px; will appear as padding: 6px; in IE. You would need to specifically target IE although from what I have learned, star-hacks are no longer viable in IE7.

I have corrected your primary issue of centering the page with left-aligned navigation. You should look more at using CSS shorthand for redundant properties and values. Also, validate your code (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sofielyr.com%2F) before you begin troubleshooting. It could solve a lot of problems right from the start.


CSS:


#masterdiv {
margin: auto;
width: 780px;
position:relative;
}

.navigation {
font-family: Arial, Helvetica, sans-serif;
width: 769px;
text-align: left;
font-size: 12px;
color: #513027;
text-decoration: none;
display: inline;
border-width: medium
border-style: none none none groove;
border-color: #D7926B;
margin: auto;
}
.navigation a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #4A2F28;
text-decoration: none;
width: 769px;
padding-right: 3px;
padding-left: 3px;
font-weight: bold;
}
.foten {
font-family: Arial, Helvetica, sans-serif;
color: #4A2F28;
font-size: 10px;
width: 772px;
border-width: medium;
border-style: groove none groove groove;
border-color: #D7926B;
text-align: center;
clear: both;
}

a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #4E8645;
text-decoration: none;
font-weight: bold;
}

.mainframe {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
width: 775px;
border-right-style: groove;
border-left-style: groove;
display: block;
text-align: left;
margin: 0px;
border-color: #D7926B;
color: #59453A;
white-space: normal;
position: static;
padding: 0px;
float: left;
border-width: medium;
border-top-style: groove;
}

.mainframe strong {
font-size: 20px;
font-weight: 600;
color: #4A2F28;
font-variant: normal;
text-transform: none;
display: inline;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
white-space: normal;
vertical-align: text-top;
padding: 6px;
clear: none;
page-break-before: left;
page-break-after: left;
}
.mainframe img {
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: none;
border-right-style: groove;
border-bottom-style: groove;
border-left-style: groove;
border-top-color: #D7926B;
border-right-color: #D7926B;
border-bottom-color: #D7926B;
border-left-color: #D7926B;
padding: 0px;
float: left;
page-break-before: always;
}



.leftnav {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #4A2F28;
text-decoration: none;
width: 150px;
height: auto;
float: left;
border-right-style: none;
background-color: #D7926B;
border-color: #D7926B;
border-width: thin;

}

.bannern {
width: 769px;
border: medium groove #D7926B;
}
.linksinwritten {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #513027;
text-decoration: none;
}

ul {
padding: 0;
margin: -1px 0 0 0;
}

li {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #330033;
display: inline;
padding: 0px;
}

#middle {
float: left;
width: 620px;
}

#rightinfo {
float: left;
width: 299px;
}

#pic {
float: left;
width: 318px;
}


HTML:


<body>
<div id="masterdiv">
<div class="bannern"><img src="banner kopiera.jpg" alt="this is the banner" />
</div>
<div class="navigation">
<ul>
<li style="border-left: medium groove #D7926B;">
<script type="text/javascript">

/*Current date script credit:
JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
*/

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<small><font color='733D25' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small>")

</script></li>
<li class="navigation"><a href="#">home</a></li>
<li class="navigation"><a href="#">about us</a></li>

<li class="navigation"><a href="#">the yard</a></li>
<li class="navigation"><a href="#">the horses</a></li>
<li class="navigation"><a href="#">livery</a></li>
<li class="navigation"><a href="#">hacking</a></li>
<li class="navigation"><a href="#">lessons</a></li>
<li class="navigation"><a href="#">prices</a></li>

<li class="navigation"><a href="#">contact</a></li>
<li class="navigation"><a href="#">map</a></li>
<li class="navigation"><a href="#">links</a></li>
</ul>
</div>
<div>
<div class="mainframe">
<div class="leftnav">
In this box you can put things that are coming up like
<ul>
<li class="linksinwritten"> <a href="index.css" class="linksinwritten">rides</a> </li>
</ul>
I'm just writing here to fill space la la la la la....
<br />

<p>&nbsp; </p>
</div>
<div id="middle">
<div id="pic">
<img src="cowhorsemen.jpg" alt="this is a picture of some cowboys" width="316" height="223" />
</div>
<div id="rightinfo">
<p><strong>Ride along goat tracks, through rivers and on mountain ridges in Sierra de las Nieves national park.</strong></p>
<p>Enjoy stunning scenery, fantastic food, wonderful horses, and friendly staff. Join us for a great ride in Southern Spain. We are in the white village of Monda, yet only 30 minutes drive from Jet Set Marbella, Puerto Banus and the beach. We cater for all levels and you can ride for as little as one hour to a full day. You could also join us for the adventure of your life on an overnight ride or full weeks riding holiday.</p>
<p>Other activities available nearby for non-riders, such as archery, quad biking, shooting, jeep safari, walking, swimming, art classes, golf and tennis.</p>
</div>
</div>


<div class="foten">Monda riding stables Sue Platt tel: 952 1245877 </div>
</div>
</body>


The above will validate once you set the javascript as an external file. In place of the javascript, you would use:


<script src="date.js" type="text/javascript"></script>

I attached the date.js file to this post.

Hope this helps.
PS: It is disobedient, not un- :)

Sofie
11-04-2006, 02:32 PM
Hi kaitco,

Thanks a lot for all this! Will go through it asap - just wanted to say thank's right away.

And jepp, I thought about "dis" right after I sent it... Couldn't change it though. I am not a native english speaker - I am from "hurdy-gurdy land" ie Sweden..

/Sof

Sofie
11-07-2006, 03:54 PM
Hi,

I have now updated my code with your changes. There are some more questions though. I noticed that you had put quite a few new rules in my CSS. To begin with why does your rules have a # in front of them? (may be a silly question ) Also I noticed that you had made the box with my text bigger so it didn't match the banner. When I tried to correct this it all went a bit wrong:o ...

First there is a big gap between the banner and the navigation, then the textbox text goes into the picture..

I have not fully understood the changes you have made, which makes it a bit hard to fix them. I have noticed a lot of small tag changes in my html too. like the use of <p> in stead of <div> I also want to know what this does..
<body>
<div id="masterdiv">
<div class="bannern"><img src="banner kopiera.jpg" alt="this is the banner" />
</div>
It namely sais "invalid markup because of unclosed tag" on the "masterdiv" -bit in my properties box. Hope you can take some time to help some more..
Thanks /Sof

Sofie
11-08-2006, 03:30 PM
Have managed to fix some of the things myself now..

But I still don't want that big space between the navigation and the banner. It goes away if I take away the <ul> but then I get a fault in my validation. And I still want it to look the same in IE.. Someone??

_Aerospace_Eng_
11-08-2006, 04:47 PM
ul {
margin:0;
padding:0;
}

Sofie
11-09-2006, 09:28 AM
Hi,

I already have that in my CSS - don't know how to put it in with my html... DO I have to make some sort of special <div> for that?

kaitco
11-09-2006, 09:40 PM
The CSS for your navigation, and your navigation re-written:

.navigation {
font-family: Arial, Helvetica, sans-serif;
width: 769px;
text-align: left;
font-size: 12px;
color: #513027;
text-decoration: none;
display: inline;
border-width: medium
border-style: none none none groove;
margin: auto;
border: medium none #D7926B;
}

.navigation a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #4A2F28;
text-decoration: none;
width: 769px;
padding-right: 3px;
padding-left: 3px;
font-weight: bold;
border: none;
}

.navigation ul {
padding: 0;
margin: 0;
}

.navigation li {
border-right: medium groove #D7926B;
display: inline;
}

The HTML:

<div class="navigation">
<ul>
<li><script src="datum.js" type="text/javascript"></script></li>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">the yard</a></li>
<li><a href="#">the horses</a></li>
<li><a href="#">livery</a></li>
<li><a href="#">hacking</a></li>
<li><a href="#">lessons</a></li>
<li><a href="#">prices</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">map</a></li>
<li><a href="#">links</a></li>
</ul>
</div>

Like Aerospace said above, adding padding: 0; and margin: 0; will fix your problem.

I went through your code again and added comments everywhere I made changes. I bolded some of the more important ones. Read the comments and then see if the changes I made make sense to you.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sierra de las Nieves riding adventures</title>
<link href="navigation.css" rel="stylesheet" type="text/css" />

<style>
#masterdiv {
margin: auto;
width: 780px;
position:relative;
}

.navigation {
font-family: Arial, Helvetica, sans-serif;
width: 769px;
text-align: left;
font-size: 12px;
color: #513027;
text-decoration: none;
display: inline;
border-width: medium
border-style: none none none groove; /* This is CSS shorthand. It describes the border style according to top, right, bottom and left; in that order. Look at W3Schools (http://www.w3schools.com) for more information.*/
margin: auto;
border: medium none #D7926B;
}
.navigation a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #4A2F28;
text-decoration: none;
width: 769px;
padding-right: 3px;
padding-left: 3px;
font-weight: bold;
/*All this can be simplified as shown below this comment.
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;*/
border: none;
}

.navigation {
font-family: Arial, Helvetica, sans-serif;
width: 769px;
text-align: left;
font-size: 12px;
color: #513027;
text-decoration: none;
display: inline;
border-width: medium
border-style: none none none groove;
margin: auto;
border: medium none #D7926B;
}

.navigation a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #4A2F28;
text-decoration: none;
width: 769px;
padding-right: 3px;
padding-left: 3px;
font-weight: bold;
border: none;
}

.navigation ul {
padding: 0;
margin: 0;
}

.navigation li {
border-right: medium groove #D7926B;
display: inline;
}

ul {
margin:0;
/* Use shorthand
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0; */
padding: 0;
vertical-align: top;
display: inline;
}

li {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #4A2F28;
display: inline;
padding: 0;
text-decoration: none;
margin: 0;
}

.foten {
font-family: Arial, Helvetica, sans-serif;
color: #4A2F28;
font-size: 10px;
width: 769px;
text-align: center;
clear: both;
/* This is a perfect example of how to use CSS shorthand instead of 11 lines of CSS, you can just use 4.
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: groove;
border-right-style: none;
border-bottom-style: groove;
border-left-style: none;
border-top-color: #D7926B;
border-right-color: #D7926B;
border-bottom-color: #D7926B;
border-left-color: #D7926B;*/
border-top: medium groove #D7926B;
border-right: medium none #D7926B;
border-bottom: medium groove #D7926B;
border-left: medium groove #D7926B;
}

a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #4E8645;
text-decoration: none;
font-weight: bold;
}

.mainframe {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
width: 769px;
/* Use shorthand
border-right-style: groove;
border-left-style: groove;
border-top-style: groove; */
border-style: groove groove none groove;
display: marker;
text-align: left;
margin: 0px;
border-color: #D7926B;
color: #59453A;
white-space: normal;
position: static;
padding: 0px;
float: left;
border-width: medium;

}

.mainframe strong {
font-size: 18px;
font-weight: lighter;
color: #4A2F28;
text-transform: none;
display: inline;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
white-space: normal;
padding: 6px;
clear: none;
page-break-before: auto;
page-break-after: auto;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
position: static;
}
.mainframe img {
float: left;
page-break-before: always;
border: medium none #D7926B;
/* Use shorthand
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px; */
padding: 0;
}

.leftnav {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #4A2F28;
text-decoration: none;
width: 140px;
height: auto;
float: left;
border-right-style: groove;
background-color: #D7926B;
/* Use shorthand. Since border-right has a "groove," you will need to describe the border properties for the top, right, bottom and middle. Otherwise, this could have been inside just one line: border: thin none #D7926B;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-color: #D7926B;
border-right-color: #D7926B;
border-bottom-color: #D7926B;
border-left-color: #D7926B;*/
border-top: thin none #D7926B;
border-right: thin groove #D7926B;
border-bottom: thin none #D7926B;
border-left: thin none #D7926B;
}

.bannern {
width: 769px;
border: medium groove #D7926B;
}

.linksinwritten {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #513027;
text-decoration: none;
}

#middle {
float: left;
}

#rightinfo {
float: left;
width: 292px;
/* Use shorthand
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;*/
padding: 0 10px 0 0;
}

#pic {
float: left;
padding: 0px;
list-style-image: url(bullet%20kopiera.jpg);
}

#leftinfo {
float: left;
width: 130px;
font-family: Arial, Helvetica, sans-serif;
padding: 3px;
background-color: #D7926B;
/*Use shorthand
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-right-style: groove;
border-top-color: #D7926B;
border-right-color: #D7926B;
border-bottom-color: #D7926B;
border-left-color: #D7926B;*/
border-top: thin none #D7926B;
border-right: thin groove #D7926B;
border-bottom: thin none #D7926B;
border-left: thin none #D7926B;
}

</style>
</head>
<body>
<div id="masterdiv"><div class="bannern"><img src="banner kopiera.jpg" alt="this is the banner" />
</div>

<!-- I have replaced this list below this comment. CSS is about cascading your styles. Look at the corresponding CSS for this <div>. Rather than include an inline style for each list item, style this specific list using your stylesheet. It will save far more code and keep you from having to go back and change several items if you need to make one change. For example, you have 10+ items in this list. If you decided to change your colors, you would have to change the colors on every single list item.
<div class="navigation"><ul id="ul"> <--Unless you have an id you are calling "ul" (which is not advisable) this is not necessary.
<li style="border-left: medium groove #D7926B; border-right: medium groove #D7926B;">



<script src="datum.js" type="text/javascript"></script></li>
<li class="navigation" style="border-right: medium groove #D7926B;"><a href="#">home</a></li>

<li class="navigation" style="border-right: medium groove #D7926B;"><a href="#">about us</a></li>


<li class="navigation" style="border-right: medium groove #D7926B;"><a href="#">the yard</a></li>
<li class="navigation" style="border-right: medium groove #D7926B;"><a href="#">the horses</a></li>
<li class="navigation" style="border-right: medium groove #D7926B;"><a href="#">livery</a></li>
<li class="navigation" style="border-right: medium groove #D7926B;"><a href="#">hacking</a></li>
<li class="navigation" style="border-right: medium groove #D7926B;"><a href="#">lessons</a></li>

<li class="navigation" style="border-right: medium groove #D7926B;"><a href="#">prices</a></li>

<li class="navigation" style="border-right: medium groove #D7926B;"><a href="#">contact</a></li>
<li class="navigation" style="border-right: medium groove #D7926B;"><a href="#">map</a></li>
<li class="navigation" style="border-right: medium groove #D7926B;"><a href="#">links</a></li>
</ul>
</div>
-->

<div class="navigation">
<ul>
<li><script src="datum.js" type="text/javascript"></script></li>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">the yard</a></li>
<li><a href="#">the horses</a></li>
<li><a href="#">livery</a></li>
<li><a href="#">hacking</a></li>
<li><a href="#">lessons</a></li>
<li><a href="#">prices</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">map</a></li>
<li><a href="#">links</a></li>
</ul>
</div>


<div class="mainframe">
<div id="leftinfo">

In this box you can put things that are coming up like
<!-- You have added an unordered list here, and I assume you will eventually have a list of links here. If you are not, why not just include this link as just a hyperlink: ...coming up like <a href="navigation.css" class="linksinwritten">rides</a> -->
<ul>

<li class="linksinwritten"> <a href="navigation.css" class="linksinwritten">rides</a> </li>
</ul>
<p>I'm just writing here to fill space la la la labla la vla vI'm just writing here to fill space la la la labla la vla vI'm just writing here to fill space la la la labla la vla vI'm just writing here to fill space la la la labla la vla vI'm just writing here to fill space la la la labla la </p>
<!-- Stuff like this is not necessary. You have a line break within paragraph tags. This is wrong; just use the line break <br />.
<p> <br />

</p>
-->
<!-- It looks like you want just a link break here, so just use a line break or better yet, change the margins and padding of the paragraph "I'm just writing...." to fill this space
<p>&nbsp; </p>
-->
</div>
<div id="middle">
<img src="cowhorsemen.jpg" alt="this is a picture of some cowboys" width="312" height="219" />
<div id="rightinfo">
<p><img src="bullet kopiera.jpg" width="16" height="18" longdesc="bullet kopiera.jpg"></p><strong>Ride along goat tracks, through rivers and on mountain ridges in Sierra de las Nieves national park. </strong></p>
<p>Enjoy stunning scenery, fantastic food, wonderful horses, and friendly staff. Join us for a great ride in Southern Spain. We are in the white village of Monda, yet only 30 minutes drive from Jet Set Marbella, Puerto Banus and the beach. We cater for all levels and you can ride for as little as one hour to a full day. You could also join us for the adventure of your life on an overnight ride or full weeks riding holiday.</p>
<p>Other activities available nearby for non-riders, such as archery, quad biking, shooting, jeep safari, walking, swimming, art classes, golf and tennis.</p>
</div>

</div>


<div class="foten">Monda riding stables Sue Platt tel: 952 1245877 </div>
</div></div>

<p>&nbsp;</p><!--Again, use page breaks when necessary.-->
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum