18 replies [Last post]
nickandjules
Offline
Regular
Last seen: 12 years 34 weeks ago
Timezone: GMT+1
Joined: 2007-02-04
Posts: 45
Points: 0

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 – why us?

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

Search

Sotogrande Port

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;
}

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi

Hi

Add this css:

#rightpicture{display:block;}

Does that do it for you?

PLUS, PLEASE VALIDATE the page and FIX the ERRORS

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 6 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Works for me, WinXp, IE7 and

Works for me, WinXp, IE7 and Firefox, the image IS on the right under the boxes.

Verschwindende wrote:
  • CSS doesn't make pies

nickandjules
Offline
Regular
Last seen: 12 years 34 weeks ago
Timezone: GMT+1
Joined: 2007-02-04
Posts: 45
Points: 0

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?

nickandjules
Offline
Regular
Last seen: 12 years 34 weeks ago
Timezone: GMT+1
Joined: 2007-02-04
Posts: 45
Points: 0

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!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

nickandjules wrote:Hi Also

nickandjules wrote:
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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

nickandjules
Offline
Regular
Last seen: 12 years 34 weeks ago
Timezone: GMT+1
Joined: 2007-02-04
Posts: 45
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Ahhhhhh never use design

Ahhhhhh never use design view for anything only check rendering in real browsers.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hugo wrote:Ahhhhhh never use

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

nickandjules
Offline
Regular
Last seen: 12 years 34 weeks ago
Timezone: GMT+1
Joined: 2007-02-04
Posts: 45
Points: 0

ClevaTreva wrote:Hugo

ClevaTreva wrote:
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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

nickandjules
Offline
Regular
Last seen: 12 years 34 weeks ago
Timezone: GMT+1
Joined: 2007-02-04
Posts: 45
Points: 0

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 6 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

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 Smile

Verschwindende wrote:
  • CSS doesn't make pies

nickandjules
Offline
Regular
Last seen: 12 years 34 weeks ago
Timezone: GMT+1
Joined: 2007-02-04
Posts: 45
Points: 0

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

  • Booking Form for #PropRef#: #PropLocation# #PropType#
  • Full Name
  • Telephone Number
  • Email
  • Number Adults in Party
  • Number Children in Party
  • Dog No Yes

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 6 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

You shouldn't be using a

You shouldn't be using a list, you should be using a form with labels.

Verschwindende wrote:
  • CSS doesn't make pies

nickandjules
Offline
Regular
Last seen: 12 years 34 weeks ago
Timezone: GMT+1
Joined: 2007-02-04
Posts: 45
Points: 0

makes sense - thanks for

makes sense - thanks for that - till tomorrow then, another exciting day learning the pleasures of CSS ............. Smile

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

nickandjules wrote:I'll keep

nickandjules wrote:
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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.