Jump to content

CSS Newbie - Problems with boxes...


Helipacter

Recommended Posts

Hey, hey,

 

As the title suggests, I'm new to this fun filled world.

 

I'm trying to create a rounded edge box, and I've followed a few web tutorials on line, but for whatever reason it's just not working, could someone have a look at my code and let me know if there's any obvious problem:

 

HTML:

 

class="br">

  • <--my content-->

 

 

CSS:

 

.bl { background: url (images/bl.jpg) 0 100% no-repeat #8BC159; width: 20em }

.br { background: url (images/br.jpg) 100% 100% no-repeat }

.tl { background: url (images/tl.jpg) 0 0 no-repeat }

.tr { background: url (images/tr.jpg) 100% 0 no-repeat; padding:10px }

.clear { font-size: 1px; height: 1px }

 

I've put the CSS section into the "content" part of the script - not that I'm sure that it matters.

 

It seems that Kompozer is having trouble attaching the images to the box - as the box is set out "in ghost form", but not in the colour I suggested.

 

Can anyone help?

 

Thanks

Link to comment
Share on other sites

The CSS belongs into the head section of your code, and it's hard telling what's going on with the little bit of code you paste. Ideally, load up the page somewhere and send a link, so we can see the entire thing.

 

And your list needs to be closed.

Link to comment
Share on other sites

Hi Thelma,

 

Thanks for the advice, as far as I can see all my lists are closed, so I don't think it's a problem there. The page I'm experimenting with is http://www.joannaporter.com/indexeng.html

 

The box is going to contain the first list, the one with the three bullet points (I'm going to remake the other list and replace the numbers with ticks - a later query no doubt ;)). I want it to be the same colour as the header (which I've put into the code).

 

If anyone can help I'd be greatly appreciative!

 

Thanks

Link to comment
Share on other sites

From just a very quick look, you are using a template with an external stylesheet and you are trying to add a rounded box using inline styling. You are bound to have some conflict there especially as your page has 21 HTML validation errors, presumably from the code you have added as Six Shooter Media provides fully validating HTML and CSS templates.

 

You will need to create div (class if you are going to repeat the box on the page or id if it will only appear once) for your rounded box. Then place ALL the styling in the CSS file, including width, background images et tutti quanti.

Link to comment
Share on other sites

Thanks both, I've tried the Visibility Inherit site, and the coding does seem easier than other sites. It seems pretty successful, the problem is that the box is not finding the images that I've got on my hard drive. I point the URL at it (cunningly enough, the file is "images/" then the name of the .gif.

 

I'm also getting to work on the error messages. I've got it down to 14 and 1 CSS error - so that's not bad eh? I take it that of the content of the box is under a header tag then I can't put a list tag next to it: eg

my list? (This is one of the errors that has come up.)

 

Thanks

Link to comment
Share on other sites

  • my list
  • indeed, this code has no semantic sense at all: why would you need to put list into tag?

    If you want to highlight the whole list, create id or .class with CSS properties you have now:

    In CSS

    #highlight{

    ...

     

    }

    in HTML:

    • ...
    • ...

     

    As for rounded corners - if you use some example you've found elsewhere, try to recreate it on some test page where only one div with rounded corners is and after you get this code working for you, add it to your actual page.

    Edited by lm
    Link to comment
    Share on other sites

    Is the folder called "images" in the same folder as the html file you are calling it from? Besides the rounded box images, are any other images in the same "images" folder showing up on your page? If the answer to both is no, then your problem is with the path, the html file cannot find the folder "images" because the path to it is incomplete.

    Link to comment
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Reply to this topic...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    Loading...
    ×
    ×
    • Create New...