This is only the 2nd CSS page I have had a go at - and have found myself going round in circles getting one thing right and knocking another out.
I have validated the CSS but on the page below the image displays on the left when I would like it to be under the search boxes - this is probably so simple to solve but I can't see the wood for the trees!
Any advice is very much appreciated
[url]http://209.85.46.199/$sitepreview/wcsspain.com/rentals/index.cfm[/url]
Thanks
WCS Spain - Property Management and Concierge Services for your life in
Spain

WCS Property Rentals specialise in the Sotogrande, Alcaidesa and San Roque area of Andalucia, Spain, with access to the best properties to make sure that you find the ideal location for your holiday. Whether you are looking for a family holiday, golf break or just somewhere to get away to, we can help.
You will find some of the properties that we have available on this website. However, this is not a complete list, as WCS Property Rentals also work with other rental agencies in the area, so if you cannot find a suitable property listed, please contact us and we will try and help you find your perfect holiday home.
Statement text from Clare - eg To check out our other services click here
body
{
background-image: url(../images/backrentals.jpg);
background-color: #FFFFFF;
font-size: 1em;
width: 100%;
}
#container
{
width: 85%;
margin: auto;
}
#logo
{
margin: auto;
text-align: center;
}
#navigation {
width: 648px;
height: 33px;
position: relative;
margin: auto;
background-image: url(../images/navigation/jointnav.jpg);
background-repeat: no-repeat;
}
#navigation li {margin: 0; padding: 0; list-style: none; position: absolute;}
#navigation li, #navigation a {height: 33px; display: block;}
#home {left: 0px; width: 108px;}
#sotogrande {left: 108px; width: 108px;}
#alcaidesa {left: 216px; width: 108px;}
#sanroque {left: 325px; width: 108px;}
#conciergeservices {left: 433px; width: 108px;}
#enquiries {left: 541px; width: 108px;}
#home a:hover {background: url(../images/navigation/jointnav.jpg) 0px -33px no-repeat;}
#sotogrande a:hover {background: url(../images/navigation/jointnav.jpg) -108px -33px no-repeat;}
#alcaidesa a:hover {background: url(../images/navigation/jointnav.jpg) -216px -33px no-repeat;}
#sanroque a:hover {background: url(../images/navigation/jointnav.jpg) -325px -33px no-repeat;}
#conciergeservices a:hover {background: url(../images/navigation/jointnav.jpg) -433px -33px no-repeat;}
#enquiries a:hover {background: url(../images/navigation/jointnav.jpg) -541px -33px no-repeat;}
#mainpage
{
width: 80%;
margin: auto;
padding-top: 20px;
}
#leftcontent {
width: 400px;
padding-right: 40px;
float: left;
}
#leftcontent h1
{
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
color: #669900;
font-size: 90%;
}
#leftcontent p
{
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
color: #669900;
font-size: 80%;
line-height: 20px;
}
#leftcontent li a:link
{
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
color: #669900;
font-weight: bold;
text-decoration: none;
}
#leftcontent li a:hover
{
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
color: #669900;
font-weight: bold;
text-decoration: underline;
}
#leftcontent dl {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
}
#leftcontent dt {
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
font-size: 90%;
font-weight: bold;
color: #669900;
}
#leftcontent dd {
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
font-size: 80%;
color: #669900;
}
#leftcontent li {
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
font-size: 80%;
color: #669900;
}
#leftcontent ul {
list-style-type: none;
}
#leftcontent a:link {
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
color: #669900;
text-decoration: none;
}
#leftcontent a:hover {
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
color: #669900;
text-decoration: underline;
}
#rightcontent h1
{
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
color: #669900;
font-size: 90%;
}
#rightpicture img
{
padding: 1em;
}
Hi
Hi
Add this css:
#rightpicture{display:block;}
Does that do it for you?
PLUS, PLEASE VALIDATE the page and FIX the ERRORS
Works for me, WinXp, IE7 and
Works for me, WinXp, IE7 and Firefox, the image IS on the right under the boxes.
Tried that and it is still
Tried that and it is still the same -
Uploaded to
[url]http://209.85.46.199/$sitepreview/wcsspain.com/rentals/index.cfm[/url]
Have I got my ID right and should the Cfinclude template have any id or CSS?
I have tested this
Hi
I have tested this locally and live on 3 machines and the image is definately on the left under the words statement from Clare - can you confirm you are seeing it on the right cos if you are I don't know whats happening.
Also re validation, I have tried to validate on line but the validator cant find the page in $sitepreview, because its a .Cfm database page if I move it to a valid URL it won't pick up the database and it throws an error - don't you just love computers!
nickandjules wrote:Hi Also
Hi
Also re validation, I have tried to validate on line but the validator cant find the page in $sitepreview, because its a .Cfm database page if I move it to a valid URL it won't pick up the database and it throws an error - don't you just love computers!
:? then copy and paste the browser source view directly into the online validators 'Direct input' box!
You must sort those errors out, there are too many mall-formed/missing tags.
The images are on the right but that is also dependent on screen width! have a look at widths and your minimum settings as they probably need adjusting or float the right column right.
You essentially just have a
You essentially just have a imbalance between fixed widths and relative percentage widths , look at your widths i.e navigation, and images they fix your page minimum yet they are set largely in undefined fluid widths. You just need to control these widths more precisely. Use tools such as FF web dev outliner to 'see' the blocks and vary screen width and observe which elements attempt to keep adjusting and those that have fixed widths that dictates the actual width.
Thanks Hugo From your first
Thanks Hugo
From your first posting I altered the widths and the page displays fine, but now from your 2nd posting I will go back and correct the width %age errors - going to take a look at FF web dev because I am using Dreamweaver MX at the moment and the page looks ugh! in design view.
Thanks for the direct input validation tip
Ahhhhhh never use design
Ahhhhhh never use design view for anything only check rendering in real browsers.
Hugo wrote:Ahhhhhh never use
Ahhhhhh never use design view for anything only check rendering in real browsers.
Which is why I use Webcoder coz you can preview in IE and FF using the browsers inside the webcoder window
ClevaTreva wrote:Hugo
Hugo wrote:Ahhhhhh never use design view for anything only check rendering in real browsers.
Which is why I use Webcoder coz you can preview in IE and FF using the browsers inside the webcoder window
Hi
Hugo says use Firefox web developer outliner to check pages and you say buy Webcoder.
I am presently using Dreamweaver MX but hand coding in code view. Should I change to webcoder for all future CSS design work - I was thinking of buying DW 8 (but am struggling to afford it!).
The site I have discussed above is (was!) being designed at 1024 x 768, now the owner has phoned and said the index.cfm page is misbalanced because she is viewing on a widescreen laptop at 1440 x 900 - I could do all this in tables in a morning but really want to design all future sites as compliant as possible - Is webcoder the way to go.
No offence to Treva but you
No offence to Treva but you do not need to 'Buy' anything Web Dev is an extremely useful tool for FF that allows you to delve into many aspects of a rendered page and is utterly invaluable for web development/checking
DW or as I call it the 'Weaver of lies' does not make your web pages you do I wouldn't waste money on upgrading it use what you have as a text editor by all means but just don't rely on anything it tries to 'help' you with or features designed to shortcut things.
All your problems have nothing to do with editors it's your understanding of the properties at this stage , dont look for answers within applications/editors not believe that they enable you to code properly as it isn't the case! - that is apart from things like Web Dev which just aid debugging.
Hugo.
Thanks Hugo I'll keep using
Thanks Hugo
I'll keep using Dreamweaver as text editor because I'm used to it.
What has really thrown me is the client using a laptop of 1440 x 900 and saying the page is misbalanced, firstly my graphics card/ monitor wont display that so I cant see the problem, but I thought margin auto took screen widths into account.
I wouldn't trust to anything
I wouldn't trust to anything a client said , people that possibly are not that conversant with things will have a habit of mis-describing what they are seeing which if you take verbatim will waste much of your time. You need to ask the client to, as accurately as possible, describe the layout she is seeing and what exactly she means by imbalanced.
margin auto should center an elements regardless of screen resolution. perhaps importantly you ought to ask her what browser she is using to view the site.
and fix up those errors you shouldn't be showing anyone anything other than SC until your code is clean and free of errors
Carry on using Dreamweaver's
Carry on using Dreamweaver's code view by all means, but do not rely on it's preview feature, always do your checking in a real browser.
And it's still appearing on the right for me
Thanks for your help - The
Thanks for your help - The image appears for me now I have corrected the %ages
One last question and I'll leave you in peace for today.
Below is part of the code for a booking form (ColdFusion) I need to format the li so the caption of each field is lined up and the field input to the right is lined up.
I have tried forcing the width of the li but it does not give me the required look
Any advice welcome
You shouldn't be using a
You shouldn't be using a list, you should be using a form with labels.
makes sense - thanks for
makes sense - thanks for that - till tomorrow then, another exciting day learning the pleasures of CSS .............
nickandjules wrote:I'll keep
I'll keep using Dreamweaver as text editor because I'm used to it.
I use it myself. But I never, ever use the design view to tell me how a page will look in a browser because it always lies.