Jump to content

cssfreakie

Staff Alumni
 View Profile  See their activity

  • Posts

    1,674

  • Joined

  • Last visited

 Content Type 

Posts posted by cssfreakie

    Safari and Chrome not displaying images/background images, firefox/IE does

    in CSS Help

    Posted

    well i bet that is because I didn't see the html, that's also why i removed the display block but it seems you use an anchor element for this so it's needed than. and that's why i used input.class.

     

    maybe adjust it a bit to your needs? btw this works in chrome!

     

    a.button {
background: transparent url(../assets/buttons.png) repeat-x;
border: 1px solid black;
color: white;
cursor: pointer;
display: block;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
padding: 5px 12px;
text-align: center;
text-decoration: none;
}

     

    -edit if this doesn't work, in safari, maybe add a width or something not sure if that works, but you never know :)

    Safari and Chrome not displaying images/background images, firefox/IE does

    in CSS Help

    Posted

    here you are, some things i changed but the effect and idea are the same:

     

    <style type="text/css">
input.coolbutton {
    background:transparent url(assets/yourimage.png) repeat-x top; /* don't give a background color since it will screw up your image */
    color: #FFF;
    border: 1px solid #000;
    padding: 5px 12px; /* made this shorter */
    cursor: pointer;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    text-decoration: none;
    text-align: center;
    /* removed display block */
}

input.coolbutton:active {/* i don't know what that share class was for */
    background-image: transparent url(assets/navigationback-active.png) repeat-x;
}

        </style>
        <title></title>
    </head>
    <body>
        
        <input class="coolbutton" type="button" value="my-button" name="my-button" />
    </body>

     

    I made the code a little shorter, but the above wrked for me. ( i recommend an external style sheet though

    Creating Website In Photoshop

    in CSS Help

    Posted

    photoshop doesn't makes divs for you, and i am pretty sure the approach you choose doesn't take use the full functionality of for instnace the z-index of elements with a state other than static. The slicing looks pretty much as the tabluar design used in the old days. Nowadays we can place elements on top of eachother by using a z-index. Google it and it gives you some more space for creativity (transparency etc).

     

    more practical, what i would do is, make a sketch of how your website should be looking, where content should be placed and what the widths are etc. so you have a more clear look on things. After that style every module apart. As if you had a big peice of paper with a background and you can place other small pieces over it. Ones every thing is in the position you like. you can start scripting the css positions.

     

    Hope it helps a bit, if you need help i am happy to help. make sure you read about the  z-index though

    On hover, show image at its original size?

    in CSS Help

    Posted

    well you need to remove the inline style because it will overwrite your properties set in the external stlyesheet i suppose.

    maybe tryout this:

    a.image img {
      width:50px;
   }

a.image:hover img {
   position: absolute;
        width: 100%; /* maybe even try auto */
   z-index: 10000;
   }

    Pear mail

    in Other Libraries

    Posted

    HI all, this maybe be a silly question, but i was wondering if it is possible to use pear mail when that package is in de webfolder. I don't have the luxury to do it any different than on a shared host.

    If that is possible, may i assume that i should use an include path/to_file  to use it's functionality?

    I try to look at the documentation, but it's pretty overwhelming for me. IF someone could explain it in simple words i would be pretty happy :) Still have to learn alot  8)

     

    display:table breaking layout

    in CSS Help

    Posted

    so any suggestions on how I can get it to work with this layout? I dont want to have to use the normal html table tags and know no other way of doing a table. just the display:table or making div`s inside of div's using padding between each section

    could you draw how you want it to look (as basic containers etc), and maybe post your code in code tags next time, the above is really unreadable. Ill make it for you if i am able today :)

    Footer adjustment

    in CSS Help

    Posted

    hi bassa, maybe i can be of help. Though you second question seems different than in your first post. That first question is a bit fague though in the way what do you mean with overwrite.

    concerning your second question. I see you have given the footer a height of 100px so in what way do you mean correspond to vertical height and of which the body? the wrapper, the div above it?

     

    Could you maybe tell what you like it to be in a more clear way. :)

    little difficulty with stretching an image inside a div

    in CSS Help

    Posted

    omg IE is such a facking ridiculous browser. the space caused between the bottom was caused by a newline in the markup.....!?@wtf!

     

    so my markup now look pretty ugly to solve this for ie 7 and lower:

    <div id="wrapper">
            <div id="header">
                <div id="header-content">

                </div>
            </div>
            <div id="middle"><img id="fancy" src="images/gradiant.png" alt="" /></div>
            <div id="footer">
               
            </div>
        </div>

     

    Does anyone know if there is a way to do this more cleaner, because i hate reading a mark-up like this

    little difficulty with stretching an image inside a div

    in CSS Help

    Posted

    OK i think i fixed something by using the code below but there still is one problem: In IE 7 and lower now show a small space between the middle div and the footer div. I have the impression this is caused by the image, but i am not sure. This little space is not showing between the header and middle div.

    if someone could please take a look it would make me pretty happy

     

    the css:

    body{
    background:#010706;  
}
#wrapper{
    width:960px;
    margin:0 auto;
}
#header{
    width:960px;
    height:424px;
    background: url(../images/header.png) no-repeat;
    float:left;
}
#header-content{

}
#middle{
    position:relative;
    width:960px;
    height:auto;    /* adjust height  to content */
    float:left;
    clear:both;
}
#middle img#stretchy{
    width:960px;
    height:100%;
}
#footer{
    width:960px;
    height:273px;
    background: url(../images/footer.png) no-repeat;
    float:left;
}

    and the mark up

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link type="text/css" rel="stylesheet" href="css/stylesheet.css" />
        <!--[if lte IE 7]>
           
        <![endif]-->
    <title>test</title>
  </head>
    <body>
        <div id="wrapper">
            <div id="header">
               
            </div>
            <div id="middle">
                <img id="stretchy" src="images/imagestretch/mid.png" alt="" />
            </div>
            <div id="footer">
                
            </div>
        </div>
    </body>
</html>

     

    -edit: see below

    little difficulty with stretching an image inside a div

    in CSS Help

    Posted

    Hi all i am having a little difficulty stretching an image in a div. It works perfect for ie8/9 and firefox, but ie 7 and lower don't like it at all. Any help or tips are welcome :)

     

    Here is the css i used:

    /* meyers reset is above this */
body{
    background:#AAD400;
}
#wrapper{
    background:#cccccc;
    width:960px;
    margin:0 auto;
    border: 1px dotted #888;
}
#header{
    width:960px;
    height:300px;
    background: url(../images/imagestretch/header.png)no-repeat;
    border: 1px dotted red;
    float:left;
}

#middle{
    width:960px;
    height: 500px; /*100px too much on purpose */   
    border: 1px dotted blue;
    float:left;
    clear:both;
}
#middle img#stretchy{
    width:960px;
    height:100%;
}
#footer{
    width:960px;
    height:300px;
    background: url(../images/imagestretch/footer.png)no-repeat;
    border: 1px dotted orange;
    float:left;
}

    and the markup

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link type="text/css" rel="stylesheet" href="css/imagestretch.css" />
       
        <title>stretch an image in a div</title>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                
            </div>
            <div id="middle">
                <img id="stretchy" src="images/imagestretch/mid.png" alt="" />
            </div>
            <div id="footer">
                
            </div>
        </div>

    </body>
</html>

    here is an example hosted of the above: http://tinyurl.com/6j2vyh4

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.