Jump to content

cssfreakie

Staff Alumni
  • Posts

    1,674
  • Joined

  • Last visited

Everything posted by cssfreakie

  1. Well its depends a bit on where they are positioned in the mark-up. As you can see in the style i gave div#left and div#right an absolute position and a z-index of 40 and 50 i think. Now if you were to put the menu above it (which i assume you will do), it should sit in a div with a higher z-index or have a higher z-index itself. So more practical, if you would place your menu inside div#middle your menu should be perfectly visible. That's what i woulc do since 1004px is pretty ok, to view the website on most screens. (i use 960px myself but that is a choice i made. Did this answer you question? if not be a bit more descriptive.
  2. great, now you may remove the base 64 code i placed at the top, it was a quote of Frans kafka
  3. Look at the code i added a wrapper DIV to target it! which is of vital importance.... So i changed it instead of only using extra indentation. Just delete the code in menu.php and add what i posted it should work and otherwise it wouldn't work either.
  4. giv png or jpg won't do any harm really. I added a zip file with png's and 3 images. it should pretty good, just tested it. code looks like this: <!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="en" lang="en" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>impatience is for lazy people</title> <style type="text/css"> body{ background:#1d1d1b; margin:0; padding:0; } div#left{ width:40%; height:531px; background:url(left.png) repeat-x top; left:0; top:0; position:absolute; z-index: 50; } div#right{ width:40%; height:531px; background:url(right.png) repeat-x top; right:0; top:0; position:absolute; z-index: 40; } div#middle{ margin:0 auto; width:1004px; /*width of image */ min-height:531px; /* height of image */ background:url(middle.png) no-repeat top; position:relative; z-index: 1000; } </style> </head> <body> <div id="left"></div> <div id="right"></div> <div id="middle"></div> </body> </html> Oh and if what i send doesn't work, are you sure you are able to run php? got a local host or a webserver. Although this is phpfreaks, this sometimes is a problem for people. [attachment deleted by admin]
  5. what you mean with scroll on the sides? vertical or horizontal scroll? oh wait the code i posted is incorrect, sorry I was in a hurry for some odd reason. brb
  6. and the link is?? you did't provided one. anyway without even seeing it I am pretty sure you need to wrap the objects up in a div give that div a id and float all images in that div to left, give the images a little padding and maybe even some margin right and botttom? Am i right?
  7. lol, dude i was having dinner, patience is a virtue.... here you are mister... works as intended, you may ad the image yourself i allready showed how, so now it's you turn to use the gray mass. save as php and run it. <?php $str = '4oCcQWxsIGh1bWFuIGVycm9ycyBhcmUgaW1wYXRpZW5jZSwgYSBwcmVtYXR1cmUgYnJlYWtpbmcgb2ZmIG9mIG1ldGhvZGljYWwgcHJvY2VkdXJlLCBhbiBhcHBhcmVudCBmZW5jaW5nLWluIG9mIHdoYXQgaXMgYXBwYXJlbnRseSBhdCBpc3N1ZS7igJ0gQ2hlZXJzISBGcmFucyBLYWZrYQ==';?> <!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="en" lang="en" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>impatience is for lazy people</title> <style type="text/css"> body, html{ height:100%; width:100%; margin:0; padding:0; } #wrapper{ width:100%; height:100%; } div#left{ width:20%; height:100%; background: #f4a; float:left; } div#middle{ width:60%; height:100%; background: #333; float:left; color:#fff; } div#right{ width:20%; height:100%; background: #f4a; float:left; } </style> </head> <body> <div id="wrapper"> <div id="left"></div> <div id="middle"><?php echo $str ;?></div> <div id="right"></div> </div> </body> </html>
  8. give me a second, need to eat supper, will post something afterwards, but it wil probably be the same idea. a div left middel and right and the left and right div got an image repeat.
  9. i am not a smart ass, but that was a tutorial i was linking to, so i could be a smart ass and post exactly that here, but that would be a waste of my and your time now wouldn't it. here is another one: http://maxmakedesign.co.uk/how-to/6/cufon-tutorial-installation-guide-how-to-install-2 REally it can't be any clearer than this. if it doesn't work: what did you try what is your code, do you have it on-line, can we see it.
  10. well this is fairly easy, you will need 3 div's and slice a little part of the left and right side of this image, so you have some black with that stripe. (so you will have 3 images to keep it simple. than the mark up <div id="left"></div> <div id="middle"></div> <div id="right"></div> Than the css. you need to set the width and height of all divs all have the same height. body,html{ width:100%; height:100%; background: #000; /*black */ } div#left{ height:100%; /* or as high as the height of the image */ width:20%; /* anything is ok */ background: url(leftimage.png) repeat top left; float:left; } div#middle{ height:100%; /* or as high as the height of the image */ width:60%; /* anything is ok */ background: url(middleimage.png) repeat-x top left; /* repeating horizontal */ float:left; } div#right{ height:100%; /* or as high as the height of the image */ width:20%; /* anything is ok */ background: url(rightimage.png) repeat-x top left; /* repeating horizontal */ float: left; } that's it! haven't tested it but it should work
  11. Ah well any way, Your site is bad aligned the top part is 18 pixels or so aligned from the middle. We usually use margin: 0 auto for that; Now i changed your code to the following. Notice the clear that is used! .footer { background: url("images/bottom.png") no-repeat scroll center top transparent; clear: both; display: block; height: 10px; margin: 0 auto 0 -18px; } good luck!
  12. this is a job for CSS selectorman Your problem shows exactly why one would need to use either a class or an id. answer is to target it. And also illustrates why i said use a paragraph or span instead of text loose in a div in a question you asked before this thread! Now before you screw up you whole style sheet. do the following. Wrap this new menu in a div and give it an id (there is only one so an ID is perfect) that way we can target it and it's inner elements. Also note that a decent editor would have given proper indentation. I fixed this for now. <div id="supermenu"> <ul><!-- start ul 1 --> <li> <a href="#">Videos</a><!-- ====== Main item #1 ==== --> <ul> <li> <a href="#">Amazing 3D</a> </li> <li> <a href="#">B36</a> </li> <li> <a href="#">B52</a> </li> </ul> </li> <li> <a href="#">Slideshows</a><!-- === Main item #2 ==== --> <ul> <li> <a href="#">Grading</a> </li> <li> <a href="#">Fabric</a> </li> </ul> </li> <li> <a href="#">Product Reviews</a><!-- ==Main item #3 == --> </li> </ul><!-- end ul 1 --> <ul><!-- start ul 2 --> <li> <a href="#">Miscellaneous</a> <!-- =========== Main item #4 ==== --> </li> </ul><!-- end ul 2 --> </div> Now i wrapped it in a div with the id of #supermenu Now lets style it since now we can target it by using the #id of supermenu. /*-----------start supermenu ----*/ body { behavior: url(csshover.htc); } div#supermenu a { color: #000; text-decoration: none; } div#supermenu ul { list-style: none; margin: 0; padding: 0; width:200px; } div#supermenu ul li { font: bold 11px/16px arial, helvetica, sans-serif; height:100%; background:#ff8b8e; border-bottom:1px solid #fff; position: relative; float:left; width:100%; } div#supermenu ul li ul li{ background:#ffcf8b; } div#supermenu ul li a{ display:block; padding: 2px 3px; } div#supermenu ul li a:hover { color: #a00; background: #ffd3d4; border-right:1px solid #fff; border-left:1px solid #fff; } div#supermenu ul li ul li a:hover{ background: #ffedd3; border-left:1px solid #fff; } div#supermenu ul ul { position: absolute; top: 0; display:none; } div#supermenu ul li:hover ul{ display: block; left:200px; } /*--- end supermenu ----*/ And that's it, put that top code in menu.php and add super menu styling to the stylesheet put the .htc in the right folder and you are ready to go. This again shows why people should start at the beginning. ID and Classes..... css is worthless without them. -edit: as far as stuff i should already have, anything i don't need i through away. besides that, this forum is to help more people than the person posting, so it's always nice to post the stuff so others can learn from it too.
  13. Well if it just works, all you need to do is paste the html of that menu in the proper place in menu.php or where ever you want. Show me the code you use for that menu (that standalone menu thing ) and of your menu.php
  14. If it's for a business, i would ask someone to make it. since "you never have a second chance to make a first impression" Maybe ask a digital arts student. They are all poor and are happy to earn some money which you should be able to earn back when it's an awesome looking site and the products you sell are good. otherwise i think rocketthemes has some. But as far as i can tell free templates pretty much always look the same. ugly
  15. well for 700 dollars, you are not going to be able to play awesome new games. since a video card is pretty expensive. Certainly for a laptop. Depending on your grafical needs the laptops you showed looked pretty okay. btw, why do you want a laptop. I hope you do know laptops are for more expensive than a desktops. If you want an awesome laptop (and won the lottery) alien-ware has some nice ones
  16. yep he said lie-berry I also noticed he didn't have his keyboard plugged, explains the difficulties in coding
  17. I would rather use a database, but this seems to be a solution http://tinyurl.com/4b9oc2m
  18. Thanks John, happy to help. But don't promote me power corrupts
  19. Hi crmamx, The best menu system i know that exists is named suckerfish or son of suckerfish. It's pure css and a little javascript to mimic the hover effect. you can find it here: http://htmldog.com/articles/suckerfish/dropdowns/ I don't know yours since it uses a .htc file which i never use. This is far from easy though, and it will take you a day to totally understand what happens and how to reproduce it out of your head. (Although not many people to do that, but that's okay since you can copy paste most of the code ) Like many menu's, it uses an unordered list and in that list are nested lists, children (so pay attention to a <li> </li> that suddenly has an <ul> inside of it. That's nesting. It's a bit inefficient to explain it all here, besides that they describe it pretty well. Now how i would learn this: Just try to get this working stand alone. So don't pay attention to your site, first get this to work as described in the guide. ones you know how it works. I am pretty sure all you need to do is change the code that sits in menu.php with what you have now and adjust the links. and add the styling to your existing menu (saves an extra header request) at the bottom of that page i linked are also links to examples.
  20. Thanks guys, where would we be without peeps like you I in fact echoed $languages[0] on my system and it was as expected. but left it out here Good to know that or is not possible. I think i'll go for the in_array() one seems to be less code But i am very happy you guys explained it, I am still a big noob in php Cheers! csssfreakie -edit: holy crap i used 4 smilies
  21. Hi all, I made a css blog to help out people with stuff I find in the css forum here. Pretty much the same questions seem pop up all the time, so I though i bundle it fro reference. Now here is the request: If someone has some spare time I would be more than pleased if someone could have a look and review my English Since I am not a native speaker, but eager to learn it the proper way i would love someone to correct me. Your free to step by for info on css of course, and leave a comment on that, but my main "concern" is the proper use of English. Any help is welcome Cheers! cssfreakie
  22. Hi all i provided a little code to someone in the misc thread to block users based on the user agent language as an alternative to ipaddresses. I used switch for this but the each line is executed even if my language code is different. Anyone have an idea why the switch code below is messing with me? <?php if ( isset( $_SERVER["HTTP_ACCEPT_LANGUAGE"] ) ){ $languages = strtolower( $_SERVER["HTTP_ACCEPT_LANGUAGE"] ); // $languages = ' fr-ch;q=0.3, da, en-us;q=0.8, en;q=0.5, fr;q=0.3'; // need to remove spaces from strings to avoid error $languages = str_replace( ' ', '', $languages ); $languages = explode( ",", $languages ); // do something when you don't like the language switch ($languages[0]) { // first array item case 'ko': // korea echo "do something or set a variable"; break; case 'ru-md'||'ru': // russia echo "do something or set a variable"; break; case 'zh-cn'||'zh-hk'||'zh-mo'||'zh-sg'||'zh-tw'||'zh': // china echo "do something or set a variable"; break; case 'ne': // india echo "do something or set a variable"; break; default: echo "good"; } } ?> I changed it to a different code that uses in_array() which works, but i really would love to know why the above is not working as intended, i looked at php.net, but didn't found something nice in the comments. Maybe a guru out here that knows? <?php if ( isset( $_SERVER["HTTP_ACCEPT_LANGUAGE"] ) ){ $languages = strtolower( $_SERVER["HTTP_ACCEPT_LANGUAGE"] ); // $languages = ' fr-ch;q=0.3, da, en-us;q=0.8, en;q=0.5, fr;q=0.3'; // need to remove spaces from strings to avoid error $languages = str_replace( ' ', '', $languages ); $languages = explode( ",", $languages ); // do something when you don't like the language $lang_array = array('ko','ru-md','ru','zh-cn','zh-hk','zh-mo','zh-sg','zh-tw','zh','ne'); if (in_array($languages[0], $lang_array)){ echo 'bad stuff'; }else{ echo 'good stuff'; } } ?> Thanks guys!!
×
×
  • 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.