7 replies [Last post]
Oedipus112
Oedipus112's picture
Offline
Regular
Last seen: 11 years 38 weeks ago
Timezone: GMT+2
Joined: 2009-11-22
Posts: 15
Points: 19

I have used some css on my website (http://www.newthinking.nl). But the results are not satisfactory.
Here is the code I have used:

.text {position: absolute; left: 270px; top: 120px; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 20px; font-style: normal; line-height: normal; font-weight: bolder; font-variant: normal; text-transform: uppercase; }
 
.image {top: 15px; position: absolute; }
 
.line {position: absolute; top: 240px; right: auto; left: auto;}
 
body { padding:0 5%; background-image: url(Images/blue_paper.gif); background-repeat: repeat;}
 
a:link { color: blue }
 
a:hover { color: purple }
 
.floatright {float: right; margin: 0 0 10px 10px; padding: 2px; }
 
.floatleft {float: left; margin: 10px 10px 0 0; padding: 2px; }
 
.floatleft1 {float: left; margin: 0 10px 0 0; padding: 2px;}
 
.floatright1 { float: right; margin: 0 0 10px 0; padding: 2px; }
 
 
.beauty:first-letter { font-size: 250%; float: left;
 
                 color: red; background-color: #778899;
 
                 padding: 2px; margin: 0 2px 2px 0; }
 
 
 

As you can see from the code I have used for positioning all the elements absolute positioning. But the result is that the title and image overlap each other. It must be possible to write better css to create a better result, that is that the image and the headings of each page are better related to each other. But I am a complete newbie to css and I don't know what css code to use to get better results.

Any help is appreciated.

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 12 years 11 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

It is better to stay away

It is better to stay away from absolute position for your entire layout. Absolute positoning has its uses, but for layout and structure it is really not neccesary and highly problematic.

You should let things flow naturally and then use floats, paddings, clears and margins to perfect the layout. It is also a good idea to cancel the default paddings and margins of some elements including uls and lis (margin:0;padding:Innocent.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Oedipus112
Oedipus112's picture
Offline
Regular
Last seen: 11 years 38 weeks ago
Timezone: GMT+2
Joined: 2009-11-22
Posts: 15
Points: 19

Could you be more specific as

Could you be more specific as to what to change?

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 14 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Oedipus, this is probably

Oedipus, this is probably something best done through a tutorial or a book, actually. On a page that's not the one you are using now.

HTML elements have a natural, default behaviour and that's what we start out with. So, they all look ugly, sitting as close as they can to the top left corner of our pages (or top right in a rtl language page). We use widths, margins, floats, and sometimes a bit of positioning to lay out pages. The advantage of this is that you often have less code, because you're letting the horse take you to your destination, instead of first insisting where exactly it must place each footstep (so, first rule of programming, Be Lazy) : )

I haven't looked at them in a long time but htmldog.com has basic mini tutorials for some postioning, however it didn't entirely satisfy me.

I got basic CSS positioning under my butt with a book, which is old enough to be in your local library but maybe not popular enough:
HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer.

Just reading it shows you how you can position major boxes of a page, naturally without artificial additives or preservatives.

Someone else here might know an actually good online tutorial, and then after going through it you'll need to spend some time actually trying the techniques out on your current site.

You'll run into questions or some browser will be bull-headed about something, and then you come back here with a specific "why with this css does this box not do what I want!?!?!" and we can explain in enough depth to make you need a paracetamol (or acetaminophen if you're in NA).

I'm no expert, but I fake one on teh Internets

Oedipus112
Oedipus112's picture
Offline
Regular
Last seen: 11 years 38 weeks ago
Timezone: GMT+2
Joined: 2009-11-22
Posts: 15
Points: 19

Thank you for answering,

Thank you for answering, Stomme poes. I have already ordered Css Mastery, Advanced Web Standards Solutions. I understand the power of CSS but it is still a pain in the ass to learn it. I understood it more when I learnt to use Inkscape.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 14 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote: I understand the power

Quote:

I understand the power of CSS but it is still a pain in the ass to learn it.

I agree, though I seem to be having more trouble learning Inkscape than I had learning CSS : )

Whenever you read something that doesn't make sense or try to do an exercise and it doesn't make sense, this is the place to come and ask. It's easier for us to answer specific questions than give advice over wide-ranging topics. There's a lot to misunderstand or not get in CSS.

I'm no expert, but I fake one on teh Internets

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

Quote: CSS but it is still a

Quote:

CSS but it is still a pain in the ass to learn it

Only if you are a programmer Smile they need the comfort and rigid boundaries of their paradigms otherwise they moan and complain.

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

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 14 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote: Only if you are a

Quote:

Only if you are a programmer they need the comfort and rigid boundaries of their paradigms otherwise they moan and complain.

Good lord, if that's the way it is, I'll never become a programmer! CSS was hard enough with nothing else as background!

I'm no expert, but I fake one on teh Internets