Grow your CSS skills. Land your dream job.

Newbie CSS troubleshooting

  • # February 27, 2009 at 8:06 pm

    Hi, First off, I would like to say that I love CSS-Tricks. This is a great site and the video tutorials are helping me learn so much. Very easy to understand.

    This is my very first blog template design and the very first time I have done slicing and coding. If someone could please break this down barney style. :? I would greatly appreciate it.

    I use blogger as my blogging platform, currently I am trying to re-design my blog. I built my blog template in THE GIMP. I have sliced the images and uploaded them to photobucket. I am using notepad as my html editor. I have created an index.html file and a style.css file. So far, I have been able to successfully get the background rendered properly. I have some dummy text on the page. I have some links and a datetime coding.

    The following image is what it should look like when finished coding and uploading it to blogger.
    [img]http://i212.photobucket.com/albums/cc284/mdkallas/mdkblog.jpg[/img]

    Here are some of the problems I am running into. I am really, really trying to learn and do this on my own, but I have been at a standstill for too long. I keep trying different things but I am just not having any luck.

    The image below depicts how it is rendering on my ff browser.
    [img]http://i212.photobucket.com/albums/cc284/mdkallas/Blog–MistiKallasDesigns.png[/img]
    problem # 1 – i have a blue bracket(datebracket) and right now it shows up at the bottom of the main content page. I need to find the proper css coding to have that separate image show up at the top left corner of the white part(main content) in the design.

    here is the html for that datebracket image:

    Code:

    Post Title Goes Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque. Nulla facilisi.
    Cras lectus magna, congue sit amet, sollicitudin ac, tempus eu, nisi.
    Maecenas et libero porttitor magna blandit tempor. Nunc bibendum, augue eget rhoncus viverra, nibh mauris vehicula ante, eu semper lacus elit eu eros.
    Donec malesuada. Nam a dui. Pellentesque vestibulum sem eu nulla. Etiam vel metus at felis venenatis scelerisque. Suspendisse potenti.

    Curabitur vitae tortor non purus tincidunt dignissim. Integer euismod, turpis id imperdiet scelerisque, est urna ultrices mi, eget volutpat est urna vitae ligula.
    Vestibulum purus. Donec non augue vitae sem eleifend semper. Cras mauris. Praesent dignissim pulvinar augue. Cras tempor metus quis risus. Aliquam dui neque, tincidunt vitae,
    dictum non, vulputate vitae, tellus. Mauris aliquam, nibh lobortis faucibus adipiscing, risus erat molestie orci, quis euismod nunc velit a libero. Cras odio est, gravida vitae,
    vehicula sollicitudin, sollicitudin non, lorem. Duis vel neque.

    datebracket

    I am also having problems with the title and dummy text aligning properly. It should fall just under the blue bracket(datebracket image), and stop before the twitter bird image and the green bracket(my designs) at the bottom right corner. I would like all text(posts) to fall in between the left margin & right margin.

    Also, is there a way to make my navigational links: about me, archives, flickr, and recipes to work on a vertical base? I do not even know what to call this type of linkage. If someone could point me in the right direction to the proper css coding. Do I have to slice each tab for this?

    Thank you in advance for all your help!
    Misti

    # February 28, 2009 at 3:37 am

    This is… a plethora of questions – I’ll just start throwing some advice, but I probably won’t answer all of your questions.

    First thing to do would be to give your #main-content some layout, basically – give it width and height equal to that of the content area in the background image, and then place it using margins – giving left and right margins a value of auto should horizontally center it and then you can just give a top margin to bring it down to the right place on the y-axis (margin:Ypx auto;)

    If the blue-bracket is supposed to go before the text – you should place it there in your html – then you can just style it as a block element and clear:both; and the text will not wrap around it

    Vertical text – no can do. You’ll have to accomplish that with images.

    I don’t want to discourage you, but this is a very ambitious layout for your first foray into creating an html/css template. It can definitely be done, but it’s going to be a lot of work and a lot to learn – and a lot of what you’re going to learn will be anecdotal rather than foundational. I would suggest starting with a much simpler design so that you can wrap your head around the whole process – rather than cobbling together something complex from bits and pieces.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".