Jump to content

banner help!

Niixie

By Niixie
in CSS Help

Recommended Posts

cssfreakie Regular Member

cssfreakie

Posted
Posted

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

Link to comment
https://forums.phpfreaks.com/topic/230013-banner-help/#findComment-1184654
Share on other sites
Niixie Member

Niixie

Posted
  • Author
Posted

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;
}

Link to comment
https://forums.phpfreaks.com/topic/230013-banner-help/#findComment-1184660
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

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>

Link to comment
https://forums.phpfreaks.com/topic/230013-banner-help/#findComment-1184715
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

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]

Link to comment
https://forums.phpfreaks.com/topic/230013-banner-help/#findComment-1184734
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

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. :)

Link to comment
https://forums.phpfreaks.com/topic/230013-banner-help/#findComment-1184753
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • 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.