Thu, 2009-11-26 20:00
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.
Thu, 2009-11-26 21:19
#1
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:
.
Mon, 2010-01-04 12:19
#2
Could you be more specific as
Could you be more specific as to what to change?
Mon, 2010-01-04 15:29
#3
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).
Wed, 2010-01-06 10:22
#4
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.
Tue, 2010-01-12 08:18
#5
Quote: I understand the power
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.
Tue, 2010-01-12 12:41
#6
Quote: CSS but it is still a
CSS but it is still a pain in the ass to learn it
Only if you are a programmer 
they need the comfort and rigid boundaries of their paradigms otherwise they moan and complain.
Fri, 2010-01-15 09:09
#7
Quote: Only if you are a
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!