minor CSS adjustments...

**vrufusx65v** · 01-26-2010 07:15 PM

I need help trying to figure out a couple things:

1] How to combine an image with my search box [looks like the serach box is transparent instead of white]
2] How to bump my logo a little higher [no more than 15px]
3] How to show all of my sprite navigation buttons
4] How to get rid of the spacing between each navigation button [except 2 or 3px of space]

Here's my HTML & CSS so far; it's still in draft mode so if their are unnecessary things in the code, either ignore it or notify me so i can deal with it.

I will reward credits & rep for the people who help me [NOTE: 1st Come 1st Serve on the Credits]
=========================================

HTML Code:

Code:

<body>

    <div id="container" class="container_24">
        <div id="header">
            <form id="search" method="get" action="http://cykstudios.net/">
            <fieldset>
                      <input id="search-term" type="text" onClick="if(this.value == 'Search CYK Studios')
                    this.value='';" onBlur="if(this.value.length == 0) this.value='Search CYK Studios';"
                    value="Search CYK Studios" name="s">
                <input class="submit_button" type="submit" value="Search">
              </fieldset>
              </form>
            <a href ="index.html" id="logo">
            <img src="img/logo.png" alt="CYK Studios" />
            </a>
            <ul id="navigation">
                <li id="home" class="active"><a href="#" title="Home">Home</a></li>
                <li id="forums"><a href="#" title="Forums">Forums</a></li>
                <li id="videos"><a href="#" title="Videos">Videos</a></li>
                <li id="tutorials"><a href="#" title="Tutorials">Tutorials</a></li>
                <li id="about"><a href="#" title="About">About</a></li>
            </ul>

=========================================

CSS Code:

Code:

body {
    background: #1c1c1c;
    height:100%;
}

#header {
    background-image:url(../img/headerbar.jpg);
    background-repeat:repeat-x;
}

#header #search {
background-image:url(../img/searchbar.jpg);
border:1px solid #342B23;
height:25px;
width:195px;
margin-left:800px;
margin-top:5px;
color:#000;
}

#header #search .submit_button {
    background:transparent url(images/searchbar.jpg) no-repeat scroll 0 0;
    border:medium none;
    height:27px;
    position:absolute;
    right:4px;
    text-indent:-9999px;
    width:27px;
}

#logo {
    margin-left:25px;
}

ul#navigation {
    list-style:none;
    margin-top: 216px;
    position: absolute;
    left: 147px;
    top: -60px;
    width: 469px;
}

ul#navigation li {
    background: url('../img/navbar.png') no-repeat;
    float: left;
    height: 35px;
    margin-right: 1px;
    width: 62px;
}

ul#navigation li a {
    display: block;
    height: 100%;
    text-indent: -9000px;
    width: 100%;
}

ul#navigation li#home {
    background-position:0px 0px;
}

ul#navigation li#home:hover {
    background-position: 0px -35px;
}

ul#navigation li#home.current, ul#navigation li#home:active {
    background-position: 0px -70px;
}

ul#navigation li#forums {
    background-position: 65px 0px;
}

ul#navigation li#forums:hover {
    background-position: 65px -35px;
}

ul#navigation li#forums.current, ul#navigation li#forums:active {
    background-position: 65px -70px;
}

ul#navigation li#videos {
    background-position: 130px 0px;
}

ul#navigation li#videos:hover {
    background-position: 130px -35px;
}

ul#navigation li#videos.current, ul#navigation li#videos:active {
    background-position: 130px -70px;
}

ul#navigation li#tutorials {
    background-position: 195px 0px;
}

ul#navigation li#tutorials:hover {
    background-position: 195px -35px;
}

ul#navigation li#tutorials.current, ul#navigation li#tutorials:active {
    background-position: 195px -70px;
}

ul#navigation li#about {
    background-position: 272px 0px;
}

ul#navigation li#about:hover {
    background-position: 272px -35px;
}

ul#navigation li#about.current, ul#navigation li#about:active {
    background-position: 272px -70px;
}

**~~Twinkie~~** · 01-29-2010 08:17 PM

Well, I can help you out of the goodness of my heart

The images referenced in the style sheet is important for us to know how to style your page, so I can not give you cut and paste code. You should post a link to your page.

1) The best way to do this is to make an image that looks like it is semi transparent against the background color you pan to use for your text box, and apply it with the background-image property. Another method would be to wrap the text box in a div, set the background of the div of an opaque image, then make the text box semi transparent. I would prefer the first method because the text and cursor get transparent too, and there is nothing you can do about it.

Code:

//css
#search {
  background-image: url([image location);
}

//html
<input type="text" id="search" />

Code:

//css
#container {
  background-image: url([image location);
}

#container input {
  opacity:0.8;
  filter:alpha(opacity=80);
}

//html
<span id="container">
  <input type="text" />
</div>

2, 3, and 4 you will have to post the page for help. I haven't tested this yet, so some modification may be necessary for method 2.

**vrufusx65v** · 01-30-2010 12:03 AM

okay heres a link to my site under my "testing grounds"; it is public but its just to show you what i have so far and what i need help with...

http://testgrounds.cykstudios.net/

**slacker3** · 01-30-2010 02:49 AM

Try this site for sprite generation:
http://spritegen.website-performance.org/

You just have to copy/paste the generated CSS, should work out of the box.

**vrufusx65v** · 01-31-2010 05:50 AM

Originally Posted by slacker3

Try this site for sprite generation:
http://spritegen.website-performance.org/

You just have to copy/paste the generated CSS, should work out of the box.

i am not understanding the proper way to set this up. I sliced my nav buttons and ZIPed them up, put in my specifications, but when i copy my css into the style.css i get repeated buttons overlapping each other with at least 30px a space between them...

What should the HTML code look like cause that whole process seems open-ended?

this is what i am using HTML wise:

Code:

<div id="container">
    <ul id="navigation">
        <li id="home" class="active"><a href="#" title="Home">Home</a></li>
        <li id="forums"><a href="#" title="Forums">Forums</a></li>
        <li id="videos"><a href="#" title="Videos">Videos</a></li>
        <li id="tutorials"><a href="#" title="Tutorials">Tutorials</a></li>
        <li id="about"><a href="#" title="About">About</a></li>
    </ul>
</div>

**slacker3** · 02-01-2010 12:46 PM

http://css-tricks.com/css-sprites/

**misson** · 02-01-2010 01:42 PM

I've always liked "CSS Sprites: Image Slicing’s Kiss of Death" on A List Apart.

**vrufusx65v** · 02-11-2010 08:19 PM

Thanks, I'm working on it and will reply back with any other problems...

Thread: minor CSS adjustments...

LinkBack

Thread Tools

Display

minor CSS adjustments...

Re: minor CSS adjustments...

Re: minor CSS adjustments...

Re: minor CSS adjustments...

Re: minor CSS adjustments...

Re: minor CSS adjustments...

Re: minor CSS adjustments...

Re: minor CSS adjustments...

Posting Permissions