Niixie Posted March 8, 2011 Share Posted March 8, 2011 Hey peeps! I need somehelp because, my logo has a line that should go from the very start of the screen to the very end. My problem is, how? -I tryed to get a picture, and make the width. But it sets the hole picture big? Please help if you can! Quote Link to comment Share on other sites More sharing options...
Niixie Posted March 8, 2011 Author Share Posted March 8, 2011 For some reason i could not edit my last post. Nvm, i just attached my logo so you can see the white stribes that i want to go to the sides of the screen. [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 8, 2011 Share Posted March 8, 2011 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 Quote Link to comment Share on other sites More sharing options...
Niixie Posted March 8, 2011 Author Share Posted March 8, 2011 Thank you very much for answering, but it doesnt turn out that good. Its just blank side? HTML <div id="banner"> <div id="bannerfix-left"></div> <div id="bannerfix-middel"></div> <div id="bannerfix-right"></div> </div> CSS #bannerfix-left { height:100%; /* or as high as the height of the image */ width:20%; /* anything is ok */ background: url(images/bannerfix-left.gif) repeat-x top left; /* repeating horizontal */ float: left; } #bannerfix-middel { height:100%; /* or as high as the height of the image */ width:60%; /* anything is ok */ background: url(images/bannerfix-middel.gif) repeat-x top left; /* repeating horizontal */ float: left; } #bannerfix-right { height:100%; /* or as high as the height of the image */ width:20%; /* anything is ok */ background: url(images/bannerfix-right.gif) repeat-x top left; /* repeating horizontal */ float: left; } Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 8, 2011 Share Posted March 8, 2011 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. Quote Link to comment Share on other sites More sharing options...
Niixie Posted March 8, 2011 Author Share Posted March 8, 2011 Alright Quote Link to comment Share on other sites More sharing options...
Niixie Posted March 8, 2011 Author Share Posted March 8, 2011 No respond yet? Can anybody else help? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 8, 2011 Share Posted March 8, 2011 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> Quote Link to comment Share on other sites More sharing options...
Niixie Posted March 8, 2011 Author Share Posted March 8, 2011 Thank you, and sorry. Quick question, how can i do so its impossible to scroll to the sides? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 8, 2011 Share Posted March 8, 2011 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 Quote Link to comment Share on other sites More sharing options...
Niixie Posted March 8, 2011 Author Share Posted March 8, 2011 I did the php stuff, and did the few changes in my own document. And it does not work? is it because its gif? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 8, 2011 Share Posted March 8, 2011 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] Quote Link to comment Share on other sites More sharing options...
Niixie Posted March 8, 2011 Author Share Posted March 8, 2011 Thank you very much! It worked! Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 8, 2011 Share Posted March 8, 2011 great, now you may remove the base 64 code i placed at the top, it was a quote of Frans kafka Quote Link to comment Share on other sites More sharing options...
Niixie Posted March 8, 2011 Author Share Posted March 8, 2011 I cannot administrate anything in here sorry -But, i got one thing you need to clear for me. Is there a way to let something in behind, like butting the background in first layer? Because i have a dropdown menu just above the pictures? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 8, 2011 Share Posted March 8, 2011 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. Quote Link to comment Share on other sites More sharing options...
Niixie Posted March 8, 2011 Author Share Posted March 8, 2011 It totaly answered my question, and it totaly worked! Thanks for your help and time! Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 8, 2011 Share Posted March 8, 2011 no problem m8 good luck! Quote Link to comment Share on other sites More sharing options...
crmamx Posted March 10, 2011 Share Posted March 10, 2011 It totaly answered my question, and it totaly worked! Thanks for your help and time! His stuff always works. He sits on top of the food chain. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 10, 2011 Share Posted March 10, 2011 I just ate the food chain in the form of a pizza Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.