Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.

View Poll Results: What site coding languages do you know?

Voters
3. You may not vote on this poll
  • I know HTML.

    1 33.33%
  • I am pretty good with CSS.

    2 66.67%
  • I'm great, because I know Javascript.

    0 0%
  • You can't fathom my greatness with codes that aren't listed above.

    1 33.33%
Multiple Choice Poll.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Location
    Brazil
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Shadows, Width and Image position

    Well, I'm working on a "language selector" page for my site, and it would open as the home page. To prevent this, users could just add /uk/ or /br/ to skip the selector and go directly to the British English or Brazilian Portuguese versions of the site, respectively. But I'm having problems with doing some shading, <div> width and image positioning. Basically, I'm trying to make this look like that:
    So yes, the country icons are positioned wrongly, the div width isn't 100% as I want, and I don't really know how to make shadows if it's not text.

    Could anyone here help me? If you are willing to do so, keep in mind that I can my host (Webs) only lets me use HTML and CSS, since I'm a "free account".

    I hope that is possible without using images.

    Oh, and if you find any problem with code in there, warn me. Also, if you have any suggestion for that selector or the actual site, I'd be pleased to hear it. Or /read/, anyway.

    Thank you.
    Last edited by Friendly Fox; 10-18-2011 at 11:31 PM. Reason: Adding something.

  • #2
    New Coder
    Join Date
    Oct 2011
    Posts
    37
    Thanks
    4
    Thanked 4 Times in 3 Posts
    Should look something like this.



    ____in your style sheet_____
    body { margin:0; padding:0; width:100%; background:#efefef url(images/bg.gif) repeat-x;}
    html { padding:0; margin:0;}

    /* main */
    .main { width:984px; padding:0; margin:0 auto; }

    /********** header **********/
    .header { width:984px; height:160px;}
    /* logo */
    .logo { float:left; padding:0; margin:25px 0 0 10px; width:400px; height:150px;}


    _____in your html_____
    <div class="main">
    <div class="header">
    <div class="logo"><a href="index.html"><img src="images/logo.png" width="950" height="100" border="0" alt="logo" /></a></div>

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Location
    Brazil
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by RonnieC View Post
    Should look something like this.



    ____in your style sheet_____
    body { margin:0; padding:0; width:100%; background:#efefef url(images/bg.gif) repeat-x;}
    html { padding:0; margin:0;}

    /* main */
    .main { width:984px; padding:0; margin:0 auto; }

    /********** header **********/
    .header { width:984px; height:160px;}
    /* logo */
    .logo { float:left; padding:0; margin:25px 0 0 10px; width:400px; height:150px;}


    _____in your html_____
    <div class="main">
    <div class="header">
    <div class="logo"><a href="index.html"><img src="images/logo.png" width="950" height="100" border="0" alt="logo" /></a></div>
    I'm sorry, but did you even look at the source code of the page?

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,889
    Thanks
    43
    Thanked 202 Times in 201 Posts
    i like the inaness of the poll....

    anyways your page... a lot of issues... let's get the easiest out of the way first...
    assuming that the above image is the exact same pixel dimensions that you want/need, take a slice of that background where there is no text and then using paint or something strip it down to a 1px wide by however-many px high slice it is...

    now for the nav links...
    the format for lists (using the <ul> as example since you are using it) is
    Code:
    <ul>
    <li><a href=""> my link </a> </li>
    <li><a href=""> my link </a> </li>
    <li><a href=""> my link </a> </li>
    </ul>
    there is no need to have the divs inside of it, you can simply set the anchors to display as block if you really need the block attribute the div provides...
    now here is some CSS you will need
    Code:
    ul {width:100%;}
    ul li {width:100%; float:left; background:url('MyImgSlicePath.jpg') repeat-x;)
    ul li a{display:block;}
    I hope that points you in the right direction

    Note: the ul{width:100%} might be overkill, try without first. Also worth noting is that the elements will only grow to 100% of their parents size, they will not go out of their parents

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Location
    Brazil
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    i like the inaness of the poll....

    anyways your page... a lot of issues... let's get the easiest out of the way first...
    assuming that the above image is the exact same pixel dimensions that you want/need, take a slice of that background where there is no text and then using paint or something strip it down to a 1px wide by however-many px high slice it is...

    now for the nav links...
    the format for lists (using the <ul> as example since you are using it) is
    Code:
    <ul>
    <li><a href=""> my link </a> </li>
    <li><a href=""> my link </a> </li>
    <li><a href=""> my link </a> </li>
    </ul>
    there is no need to have the divs inside of it, you can simply set the anchors to display as block if you really need the block attribute the div provides...
    now here is some CSS you will need
    Code:
    ul {width:100%;}
    ul li {width:100%; float:left; background:url('MyImgSlicePath.jpg') repeat-x;)
    ul li a{display:block;}
    I hope that points you in the right direction

    Note: the ul{width:100%} might be overkill, try without first. Also worth noting is that the elements will only grow to 100% of their parents size, they will not go out of their parents
    I don't really see where the shade would go.

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,889
    Thanks
    43
    Thanked 202 Times in 201 Posts
    the shade would be the 1px wide slice that I told you to get... it then is set as the
    Code:
    background:url('whateveritypedupthere.jpg') repeat-x;
    what that will do is take that tiny little slice and repeat it across the x-axis the entire length of the element giving it a background of the "shadow"

    you say "shadow"; but I see a simple gradient- no need to overlay divs to achieve it

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,889
    Thanks
    43
    Thanked 202 Times in 201 Posts
    also worth noting/trying (as I think about it more) if you set the anchors to be block (ie they will attempt to occupy as much space as possible) they should force the li's to be 100% so you might not even need to have any width properties set

    *didn't check it though- just a thought to try

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #8
    New to the CF scene
    Join Date
    Oct 2011
    Location
    Brazil
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    also worth noting/trying (as I think about it more) if you set the anchors to be block (ie they will attempt to occupy as much space as possible) they should force the li's to be 100% so you might not even need to have any width properties set

    *didn't check it though- just a thought to try
    Myes, that didn't work. The best I could get is this.


  •  

    Tags for this Thread

    Posting Permissions

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