minor CSS adjustments...

vrufusx65v

vrufusx65v

New Member
Messages
74
Reaction score
0
Points
0
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

Twinkie

Banned
Messages
1,389
Reaction score
12
Points
0
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.
 
Last edited:
vrufusx65v

vrufusx65v

New Member
Messages
74
Reaction score
0
Points
0
slacker3 said:
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.
Click to expand...

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>
 
vrufusx65v

vrufusx65v

New Member
Messages
74
Reaction score
0
Points
0
Thanks, I'm working on it and will reply back with any other problems...
 
You must log in or register to reply here.
Top