cssfreakie
-
Posts
1,674 -
Joined
-
Last visited
Everything posted by cssfreakie
-
I hope the above helps the error is in your background-xxx stuff, try the short hand i showed. or: background: transparent url("../assets/buttons.png") repeat-x ; and don't give a color to the background.
-
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
-
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
-
- since your using an image as a background. we might want to know the css properties of the element to which the background is applied. (maybe also add if it should be repeated (and don't forget the space) - concernin g the in-line image:you ommited the alt=" " tag inside the image element.
-
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
-
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; }
-
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
-
Arggghhh...can someone help me with this ul layout...
cssfreakie replied to RIRedinPA's topic in CSS Help
lol, mark it solved dude if you wish to know how to do the ul thing let me know i like to puzzle -
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
-
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.
-
ty guys for the quick responses. I'll pm an admin and see what they do Thanks!
-
ty ty!
-
little difficulty with stretching an image inside a div
cssfreakie replied to cssfreakie's topic in CSS Help
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
cssfreakie replied to cssfreakie's topic in CSS Help
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 -
what is your problem in a more precise manner, this is a pretty general stated 'help me?' I have no idea where to begin nor am i able to know if i can help. isn't this more php related? because that is what i see in your code.
-
Hi all i was wondering if it is possible to change my username. I now have ccsfreakie which should have been cssfreakie Not sure if this is possible, but if so i would love to have it changed hehe. Well thanks for anyone reading this.
-
hello
-
i use firebug for this. if you right click inspect element it tells directly where some properties came from. At-least that works for me
-
Hi all i am new here, hope i can learn something here But i bet i will. My sister fortnox pointed me here. I am starting to learn css and php because it looks like fun
-
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