SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie in need of help!(css)

    So I'm new to CSS. But I went through a CSS course on lynda.com!
    I made this website with the new knowledge with CSS. http://www.hackstavastergard.com/

    But now for the other links (gästhem, bed&breakfast, uthyrning,stipendium, ledarskap, möbler and kontakt), there will be a whole new look. As in not the same
    look at all like the main page.

    This is how it's going to look. http://www.hackstavastergard.com/ima...them_wip01.jpg

    I got inspired to make background similar to this http://www.csszengarden.com/?cssfile...207.css&page=0 .
    But my problem is that I'm new to css and don't really know how to do it. I'm wondering if I could get a little help?=)

    Here is what I got to work with:
    http://www.hackstavastergard.com/images/body_bg.jpg it looks the same as http://www.csszengarden.com/207/body_bg.jpg and
    http://www.hackstavastergard.com/ima...ent_bg_top.jpg it looks the same as (i want to learn how to put text over that image later with css ^^) http://www.csszengarden.com/207/content_bg_top.jpg
    I really really need help, I really want to learn.

    So.
    In the firefox addon "web developer", if I choose outline>outline custom elements> and write in "div" in Element 1. Then on the website (http://www.csszengarden.com/?cssfile...207.css&page=0) I can see alot of divs. I do have a problem with the names of divs, what they really mean (thinking that my english isn't the best as well).

    I'm wondering if this is the correct way to build the website:
    http://www.hackstavastergard.com/ima...v_needHelp.jpg

    Here is how I got to it=
    If i choose Outline>Outline current element, then I can see this:

    "html > body#css-zen-garden" in here goes the body_bg i think.

    "html > body#css-zen-garden>div#container" in here is everything else on the page. But how in the world did he center this div with so many divs inside?????

    Makes no sense to me! The only way that I know how to center is with
    .center
    margin:auto;
    width:80%;
    And most of the time I can't even get that to work! And I've heard that code snippet isn't good/healthy!

    "html > body#css-zen-garden>div#container>div#intro" I'm guessing that in here goes content_bg_top.jpg somehow...

    "html > body#css-zen-garden>div#container>div#intro>div#preamble" Or is it in here he puts the content_bg_top.jpg? How confusing! =(. If I write in

    div#preamble inside of outline custom elements. Then it's between the blue text saying "Littering a dark and dreary road..." and the "The Road to

    Enlightenment". How in the world did he put div#preamble right over the picture of content_bg_top.jpg in that position? Do i use "position:relative" or "position:absolute" to put the text there inside of div#intro? In div#preamble I want to put a text with a picture. The text on the left and the picture to the right. The first text and picture under the title here http://www.hackstavastergard.com/ima...them_wip01.jpg . I want to continue like that further down but then switching place. I'm guessing I could do this "text+picture" with a

    div#firsttext
    float : left; /*on the picture*/
    width : 395px;
    height: 170px;

    div#firstpicture
    float : right ; /*on the text*/
    width : 395px;
    height: 170px;

    div#secondtext
    float : right; /*on the text*/
    width : 395px;
    height: 170px;

    div#secondpicture
    float : left ; /*on the picture*/
    width : 395px;
    height: 170px;

    /*and so on and on*/

    "html > body#css-zen-garden>div#container>div#intro>div#preamble>p.p1" and
    "html > body#css-zen-garden>div#container>div#intro>div#preamble>p.p1>span" I don't remember anything about a 'span' in the lectures =(! And p.p1 doesn't look like a div! What is a span??

    "html>body#css-zen-garden>div#container>div#intro>div#pageHeader". I have no idé how he put up that div ontop of all over the other divs. My best guess is that in the css lynda.com dvd they talked about a 'depth'. This thing "z-index: 3;" and he didn't say much about it at all!=( So how and when do I use z-index: 3;?

    "html>body#css-zen-garden>div#container>div#supportingText" I guess this isn't difficult. It's just inside of div#container together with div#intro. Right?

    I'll give you a mental cookie if you tell me if I'm on a good way to success or a good way to failure =)!

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by sittadin View Post
    I don't remember anything about a 'span' in the lectures =(! And p.p1 doesn't look like a div! What is a span??
    p.p1 refers to <p class="p1">
    A <span> is a generic element for inline content, in the same way that <div> is a generic element for block-level content. If you want to apply arbitrary formatting (eg <strong>, <i> etc are not appropriate, you just want a particular bit of text styled differently), you can put a <span> round it, and then apply formatting to the span.

    "html>body#css-zen-garden>div#container>div#intro>div#pageHeader"
    Holy guacamole! That is serious overkill.

    An ID must be unique - it can only be used once on each page. So you know exactly what #pageHeader refers to, because there can only be one element on the page with id="pageHeader". Therefore there is no reason at all even to say that it's a div, let alone to list every parent element that it sites inside. That just creates a whole load of unnecessary work for you, and gives a much higher chance that it will all go wrong.

  3. #3
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    p.p1 refers to <p class="p1">
    A <span> is a generic element for inline content, in the same way that <div> is a generic element for block-level content. If you want to apply arbitrary formatting (eg <strong>, <i> etc are not appropriate, you just want a particular bit of text styled differently), you can put a <span> round it, and then apply formatting to the span.


    Holy guacamole! That is serious overkill.

    An ID must be unique - it can only be used once on each page. So you know exactly what #pageHeader refers to, because there can only be one element on the page with id="pageHeader". Therefore there is no reason at all even to say that it's a div, let alone to list every parent element that it sites inside. That just creates a whole load of unnecessary work for you, and gives a much higher chance that it will all go wrong.
    I see ok. I understand span a bit more now, thanks. I won't touch #pageHeader, lol!

    I have a problem with the body not being on the top of the page, so wierd! Please take a look.

    http://img34.imageshack.us/img34/443...swierdhtml.jpg

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    You'll have to give us a link to a live page for us to really understand what's going on.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I notice your page isn't online in the screenshot. If you are unable to give us a live link, at least post full HTML/CSs
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh okay, here is the live website http://www.hackstavastergard.com/gasthem.html

  7. #7
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I want the text and pictures to line up like this http://www.hackstavastergard.com/ima...them_wip01.jpg
    but they simply won't!

    And the background picture of the clouds won't show either!
    Can anybody help? In dreamweaver it looks perfect! But in firefox or ie it looks like bad! please take a look!:
    http://www.hackstavastergard.com/gasthem.html

  8. #8
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Oh my word, that's a mess...

    This is the problem with using Dreamweaver - it turns out to be a nightmare it's woven - and if you're just using it as a WYSINQWYG editor without understanding what it's doing underneath, it can create some absolutely abominable code that is impossible to figure out.

    The reason the clouds are not appearing is because the element they're applied to has shrunk to zero height. It has no content and it's only children are floated - and unless you tell it to, the parent won't expand to enclose the floated children. You can do this by adding overflow:hidden; to the container. (Although the method I've outlined below uses this in a different place)

    But beyond that, the div-460s are confusing the heck out of me.

    It should be very simple.

    Code:
    <div class="item odd">
    <img src="piccy1.jpg">
    <p>Text text text text</p>
    </div>
    <div class="item even">
    <img src="piccy2.jpg">
    <p>Text text text text</p>
    </div>
    and so on.

    Then in your CSS, you need:
    Code:
    .item {clear:both; overflow:hidden;}
    .odd img {float:right; margin-left:20px;}
    .even img {float:left; margin-right:20px;}
    and any other styling you need.

    There's no need to give any dimensions to them, they will pick up the intrinsic dimensions of the images automatically.

  9. #9
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    It should be very simple.
    or even better

    Code:
    <div class="item">
    <img src="piccy1.jpg">
    <p>Text text text text</p>
    </div>
    
    <div class="item even">
    <img src="piccy2.jpg">
    <p>Text text text text</p>
    </div>

    Code:
    .item {clear:both; overflow:hidden;}
    .item img {float:right; margin-left:20px;}
    .even img {float:left; margin-right:20px;}

  10. #10
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Oh my word, that's a mess...

    This is the problem with using Dreamweaver - it turns out to be a nightmare it's woven - and if you're just using it as a WYSINQWYG editor without understanding what it's doing underneath, it can create some absolutely abominable code that is impossible to figure out.

    The reason the clouds are not appearing is because the element they're applied to has shrunk to zero height. It has no content and it's only children are floated - and unless you tell it to, the parent won't expand to enclose the floated children. You can do this by adding overflow:hidden; to the container. (Although the method I've outlined below uses this in a different place)

    But beyond that, the div-460s are confusing the heck out of me.

    It should be very simple.

    Code:
    <div class="item odd">
    <img src="piccy1.jpg">
    <p>Text text text text</p>
    </div>
    <div class="item even">
    <img src="piccy2.jpg">
    <p>Text text text text</p>
    </div>
    and so on.

    Then in your CSS, you need:
    Code:
    .item {clear:both; overflow:hidden;}
    .odd img {float:right; margin-left:20px;}
    .even img {float:left; margin-right:20px;}
    and any other styling you need.

    There's no need to give any dimensions to them, they will pick up the intrinsic dimensions of the images automatically.
    The overflow:hidden; worked perfect!
    But my background image still won't show itself .

    I'm wondering something else.
    How do I make the h1 go further down? I really need that air. As in the text is to tight.

    But what I really want is to not delete the h1 there and instead make my background image showitself instead (because the background image have the same text as h1). But I have no id&#233;e how to do that.

  11. #11
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! I accidently made the background image ( http://www.hackstavastergard.com/ima...ent_bg_top.jpg ) appear from nowhere! First it wasn't there, only the background color was shown. But now it's there after I changed the css of h1 a little. I change the height, margin 0 and padding 0. Then I was like, what! It worked? But how?
    So I deleted those values (attributes) one by one, and when I deleted all the new attributes (that fixed the problem), the background image hasn't dissapeared! So how is this possible? Everything has the same attributes as before. I don't understand!


    But one question, how do I make the h1 container get taller? as in height.
    I need to push the text and picture further down below the backgroundimage.

  12. #12
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by sittadin View Post
    Wow! I accidently made the background image ( http://www.hackstavastergard.com/ima...ent_bg_top.jpg ) appear from nowhere! First it wasn't there, only the background color was shown. But now it's there after I changed the css of h1 a little. I change the height, margin 0 and padding 0. Then I was like, what! It worked? But how?
    So I deleted those values (attributes) one by one, and when I deleted all the new attributes (that fixed the problem), the background image hasn't dissapeared! So how is this possible? Everything has the same attributes as before. I don't understand!
    It might be a caching issue - maybe your browser hadn't properly reloaded the page last time round? Anyway, it works now and that's what matters!

    But one question, how do I make the h1 container get taller? as in height.
    I need to push the text and picture further down below the backgroundimage.
    h1 {min-height:...}

  13. #13
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With the new code

    Code:
    <div class="item odd">
    <img src="piccy1.jpg">
    <p>Text text text text</p>
    </div>
    <div class="item even">
    <img src="piccy2.jpg">
    <p>Text text text text</p>
    </div>
    Code:
    .item {clear:both; overflow:hidden;}
    .odd img {float:right; margin-left:20px;}
    .even img {float:left; margin-right:20px;}
    I understand and have more controll of it all. Sweet!
    But I have a problem with this piecture:
    http://www.hackstavastergard.com/ima...ro_gasthem.png

    You can see that it's 'sticking out' out of the container just a little. Also it makes the left side of the picture white. Any solutions to fix this??

    http://www.hackstavastergard.com/gasthemv2.html

  14. #14
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by sittadin View Post
    But I have a problem with this piecture:
    http://www.hackstavastergard.com/ima...ro_gasthem.png

    You can see that it's 'sticking out' out of the container just a little. Also it makes the left side of the picture white. Any solutions to fix this??

    http://www.hackstavastergard.com/gasthemv2.html
    Glad to see it's working better! The only thing I can think of that might be causing that 1 pixel jog (which doesn't happen in Opera, so Dragonfly is no help here ) might be the float:left; on the intro div - I can't see why you need the float, try getting rid of it and see if that helps.

  15. #15
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It got fixed with a left:-1; in the .intro.
    the .container is 940px and the .intro is 940px. The picture of the heavens is 940px wide. Why is .intro still sticking out a little? I shouldn't need to put a left:-1; on it , right?

    Now I have my other problem.
    The black lines under every text( http://www.hackstavastergard.com/ima...them_wip01.jpg )...I have no idée how to put it in there. If i make a
    Code:
    border-bottom : 1px solid #f4j5j66;
    on
    Code:
    .odd
    .even
    then it will also effect the pictures! I don't want that !
    Any idéas?

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sittadin View Post
    It got fixed with a left:-1; in the .intro.
    the .container is 940px and the .intro is 940px. The picture of the heavens is 940px wide. Why is .intro still sticking out a little? I shouldn't need to put a left:-1; on it , right?

    The background image is 1279px wide which means that it will rounded up or down at a different rate to the even numbered 940px element when thay are made central. The background image should be 1280px with the central part exactly in the center of that image.

    You will still get a 1pixel jog in older versions of IE though as images on the body are rounded differently.

    Now I have my other problem.
    The black lines under every text( http://www.hackstavastergard.com/ima...them_wip01.jpg )...I have no idée how to put it in there. If i make a
    Code:
    border-bottom : 1px solid #f4j5j66;
    on
    Code:
    .odd
    .even
    then it will also effect the pictures! I don't want that !
    Any idéas?

    To save adding an extra html element just make a 450px wide 1px image for the line and then place at 0 0 on .odd and at 100% 0 on .even (or vice versa).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •