CSS Questions

BigWords

BigWords

Geekzilla
Super Member
Registered
Joined
May 22, 2009
Messages
10,670
Reaction score
2,360
Location
inside the machine
I have a couple, but I'll start with the one which has been bugging me for over 24 hours now, and nothing on W3 seems to answer the specific situation (although there *is* a solution if I ignore the fact it affects the vertical as well as the horizontal, but it breaks the visual impact)

The code stands as this:

h3 {
background: url(images/icon.jpg) no-repeat left;
margin: 20px 20px 20px 20px;
padding: 20px 50px 20px 20px;
font-family: "Courier New", Courier, monospace;
font-size: 120%;
font-weight: bold;
color: #000000;
}

And the little flag sitting before the sub-header is buttressed right up against the text. I have adjusted all of the spacing endlessly, and no matter what I do I can't seem to get the text in line with the image, WITH a space. I'm so frustrated, I may actually bite someone...
 

Deleted member 42

Is there more context, like is there a page you can link to where we can see it?

I can see several potential issues; one of them being that I.E. and other browsers handle padding differently.

Is the "little flag" meant to be in the background?
 

Deleted member 42

You want some version of the img src tag; not background. Background is for, well, backgrounds. You've got warring tags.

Let me see if I can come up with something.

Is this what you want?
 
Last edited by a moderator:
asroc

asroc

Alex
Super Member
Registered
Joined
Aug 25, 2012
Messages
1,537
Reaction score
293
How about changing the left padding property?

This
Code: 
padding: 20px 50px 20px [COLOR=Red]25[/COLOR]px;
gives me 5px of white space between the flag and the heading in my quick reproduction of your code. You can adjust to your needs.
 
BigWords

BigWords

Geekzilla
Super Member
Registered
Joined
May 22, 2009
Messages
10,670
Reaction score
2,360
Location
inside the machine
Hmm. The other image properties are screwing with it as well (set right of screen with a substantial margin), so I'm leaving the small touches until I can work out how to have more than one class of image.

The handling of the main images is

img {
float: right;
background: #000000;
margin: 60px 10px 10px 10px;
padding: 5px;
border: 1px solid #000000;
}

That's in the original planning of the overall design. *considers taking up something simpler, such as brain surgery*
 

Deleted member 42

Padding is risky to use if you're not coding for browser specificity.

Bigwords, why did you choose to hand-code rather than using a CMS?
 

Deleted member 42

BigWords said:
Hmm. The other image properties are screwing with it as well (set right of screen with a substantial margin), so I'm leaving the small touches until I can work out how to have more than one class of image.

The handling of the main images is

img {
float: right;
background: #000000;
margin: 60px 10px 10px 10px;
padding: 5px;
border: 1px solid #000000;
}
Click to expand...

Well, creating image classes is a matter of just declaring them, but the size of the image in question is going to make rather a lot of difference. You could have an image class for each size of image, for instance, if you're only going to have a few sizes.

I'm not sure what you're idea is with the background since there's nothing there to restrain the background it's a little odd. Typically background is used as an attribute of a div, the body, or a table, or table row or column.
 
BigWords

BigWords

Geekzilla
Super Member
Registered
Joined
May 22, 2009
Messages
10,670
Reaction score
2,360
Location
inside the machine
Yeah. :Headbang:

I'm currently hunting through WP themes looking for something I can live with in the meantime. They are all so shiny - I don't want shiny.
 
SianaBlackwood

SianaBlackwood

Super Member
Registered
Joined
Jul 21, 2012
Messages
735
Reaction score
99
Location
Australia
Website
sb.siasan.com
It might help to do this at the top of the style sheet:

* { margin: 0; padding:0; }

If I have the syntax right, that sets the margin and padding for every single CSS element to zero. After that you'll have to explicitly declare padding and margin for anything that you want to have a margin or padding, but it eliminates the fact that different browsers have different default margin/padding values.

(It might be supposed to be applied to 'body' rather than globally using the *. I can't remember exactly, but like I said the purpose is to make sure the defaults are overridden at the highest possible level.)
 
BigWords

BigWords

Geekzilla
Super Member
Registered
Joined
May 22, 2009
Messages
10,670
Reaction score
2,360
Location
inside the machine
I actually went and broke it in the meantime (fixing something else, which... didn't go well). I'm waiting on word about how much time it will take to get a completely stripped-down, no-annoyance (no dates, author details, or categories and tags on screen) layout created - I gave up doing it by hand when I realized I would have to do EVERY page. Too much time is going to be spent fiddling with it which could be better used elsewhere.
 

Deleted member 42

BigWords said:
Yeah. :Headbang:

I'm currently hunting through WP themes looking for something I can live with in the meantime. They are all so shiny - I don't want shiny.
Click to expand...

Look at the Basic category. Consider taking a theme like Atahualpa or Twenty Eleven or Plain Fields and turning off pretty much everything.

Alternatively, download a theme/css style sheet and hand-build static pages.

Check out Blue Robot's Layout Reservoir: http://www.bluerobot.com/web/layouts/

Owen Brigg's Little Boxes lets you create the primary divs and incorporate their structures in your own css:
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

If you're already comfortable with HTML, check out Mark Newhouse's article on Practical CSS Layout Tips, Tricks and Techniques:
http://www.alistapart.com/articles/practicalcss/

And remember whether you're modifying WordPress or some other template/layout, work on a copy.
 
BigWords

BigWords

Geekzilla
Super Member
Registered
Joined
May 22, 2009
Messages
10,670
Reaction score
2,360
Location
inside the machine
Oooh. Those links are brilliant. :)

I can already tell I'm gonna lose another couple of weeks to this...
 

Deleted member 42

BigWords said:
Oooh. Those links are brilliant. :)

I can already tell I'm gonna lose another couple of weeks to this...
Click to expand...

If you're really serious about properly learning CSS, the O'Reilly CSS The Definitive Guide is the best reference book. Eric Meyer is a good writer, and knows his stuff.

I found using the O'Reilly book to look stuff up rather than reading it cover to cover was best. But Eric Meyer's books Eric Meyer on CSS, and Eric Meyer on More CSS were more directly helpful.

http://www.ericmeyeroncss.com/
 
You must log in or register to reply here.