Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Problem with layout in CSS

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 28, 2012 at 4:43 am #38687
    nitish
    Member

    Problem: On minimizing the explorer the background image of body merges with other div tag


    
* {margin: 0; padding: 0;}
    
body {
    
position:relative;
    
margin: 0 auto;
    
text-align: center;
    
background:url(../images/songsback.jpg) 0 0 no-repeat;
    
overflow: scroll;
    
height: 200%;
    
width:100%;
    
}
    
#header {
    
WIDTH: 900px;
    
height : 107px;
    
background-color:#FFF;
    
/*background:url(../images/topheader.png) 0 0 no-repeat; margin: 0 auto;  //nitish */
    
padding: 0;
    
left: auto;
    
right: auto;
    
}
    
#footer {
    
WIDTH: 90%;
    
height : 65px;
    
background-color:#FFF;
    
/*background:url(../images/footer.png) 0 0 no-repeat;   //nitish */
    
margin: 0 auto;
    
padding: 0;
    
}
    
#container {
    
width: 900px;
    
margin: 0 auto;
    
position: relative;
    
}
    
#content {
    
WIDTH: 900px;
    
HEIGHT: auto;
    
margin: 0;
    
background-color:#FFF;
    
/*background:url(../images/content_back.png) 0 0 repeat-y;  // nitish */
    
padding: 0;
    
position: relative;
    
}
    
.content2 {
    
WIDTH: 900px; HEIGHT: auto; margin: 0;
    
background-color:#FFF;
    
/*background:url(../images/content_back.png) 0 0 repeat-y;   //nitish */
    
padding: 0;
    
}
    
#wrapper {
    
width : 900px;
    
height: auto;
    
margin: 0 auto;
    
padding: 0;
    
background:url(../images/songsback.jpg);
    
/*	background:url(../images/content_back.jpg) 50% 50% repeat-y;   //nitish */
    
text-align: center;
    
}
    
#menuarea {
    
width: 100%;
    
height: auto;
    
margin: 0 auto;
    
padding: 0;
    
}
    
#navigation {
    
width: 854px;
    
height: 50px;
    
margin: 0 auto;
    
background:url(../images/nav_back.png) 0 0 no-repeat;
    
padding: 0;
    
}
    
ul#topnav {
    
margin: 5px 0 0 0;
    
padding: 0 0 0 10px;
    
float: left;
    
width: 854px;
    
list-style: none;
    
position: relative;
    
font : normal 14px arial;
    
z-index: 99;
    

    
}
    
ul#topnav li {
    
float: left;
    
margin: 0; padding: 0 0 0 12px;
    
}
    
ul#topnav li a {
    
padding: 10px 2px 10px 5px;
    
display: block;
    
color: #000;
    
text-decoration: none;
    
}
    
ul#topnav li:hover { background : none;
    
}
    
ul#topnav li span {
    
float: left;
    
padding: 15px 0;
    
position: absolute;
    
left: 0; top:35px;
    
display: none;
    
width: 854px;
    
background:url(../images/nav_back2.png) 0 0 no-repeat;
    
color: #fff;
    
-moz-border-radius-bottomright: 5px;
    
-khtml-border-radius-bottomright: 5px;
    
-webkit-border-bottom-right-radius: 5px;
    
-moz-border-radius-bottomleft: 5px;
    
-khtml-border-radius-bottomleft: 5px;
    
-webkit-border-bottom-left-radius: 5px;
    
}
    
ul#topnav li:hover span { display: block; }
    
ul#topnav li span a { display: inline; }
    
ul#topnav li span a:hover {text-decoration: underline;
    
}
    
#songcontent1 {
    
margin: 0 auto;
    
width: 825px;
    
height: 540px;
    
min-height: 540px;
    
background-color:#FFF;
    
/*background:url(../images/songcontentback.jpg)  left bottom no-repeat;*/
    
padding: 0;
    
}
    

    
#songcontent {
    
margin: 0 auto;
    
width: 825px;
    
height: 540px;
    
min-height: 540px;
    
background-color:#FFF;
    
/* background:url(../images/stroy.jpg)  left bottom no-repeat; */
    
padding: 0;
    
}
    
#generalcontent {
    
margin: 0 auto;
    
width: 825px;
    
height: 540px;
    
min-height: 540px;
    

    
/* background:url(../images/stroy.jpg)  left bottom no-repeat;*/
    
padding: 0;
    
}
    
#kherocontent {
    
margin: 20px auto 0 auto;
    
width: 826px;
    
height: 720px;
    
min-height: 620px;
    
background:url(../images/kherocontentback.jpg)  right bottom no-repeat;
    
padding: 0;
    
text-align: left;
    
}
    
#kherocontent .navigate{
    
float : left;
    
margin-left : 50px;
    
margin-top: 70px;
    
padding: 0;
    
}
    
#kherocontent .navigate a {
    
color:#FFFFFF;
    
}
    
#kherocontent .pics{
    
width : 250px;
    
height: 376px;
    
float : left;
    
margin-left : 40px;
    
margin-top : 30px;
    
}
    
#kherocontent .pics img {
    
color:#FFFFFF;
    
}
    

    
#kherocontent .khero{
    
width : 250px;
    
height: 310px;
    
float : left;
    
margin-left : 20px;
    
margin-top : -30px;
    
}
    
#commentcontent {
    
margin: 20px auto 0 auto;
    
width: 826px;
    
height: 600px;
    
min-height: 600px;
    
background:url(../images/commentback.jpg)  0 0 repeat-y;
    
padding: 0;
    
text-align: left;
    
}
    
.commenthead {
    
margin: 0 auto;
    
width: 826px;
    
height: 74px;
    
background:url(../images/commenthead.jpg)  0 0 no-repeat;
    
padding: 0;
    
}
    
.clear {
    
clear: both;
    

    
}
    
#profile {
    
position:relative;
    
left:40px;
    
right:40px;
    
top:60px;  /*230px Shondhi*/
    

    
width:550px;  /* 750px nitish*/
    
float:none;
    
z-index:1;
    
OVERFLOW-Y: scroll;
    
visibility: visible;
    
height: 480px;  /*300px   edited by Shondhi*/
    
min-height: 300px;
    
border:#ccc 1px solid;
    
width: 90%;	/*added my nitish*/
    

    
}
    
#profile p{
    
font : normal 12px/150% Verdana;
    
color:#000;
    
text-align: left;
    
padding : 60px 10px 0 5px;
    
margin : 0;
    

    
}
    
#profilegen {
    

    
position:relative;
    

    
left:40px;
    

    
top:40px;
    

    
width:750px;
    

    
z-index:1;
    

    
OVERFLOW-Y: scroll;
    

    
visibility: visible;
    

    
height: 500px;
    
min-height: 500px;
    
border:#ccc 1px solid;
    

    
}
    
#profilegen p{
    
font : normal 12px/150% Verdana;
    
color:#000;
    
text-align: left;
    
padding : 60px 10px 0 5px;
    
margin : 0;
    

    
}
    

    
#profile1 {
    

    
position:relative;
    

    
left:40px;
    

    
top:80px;
    

    
width:600px;
    

    
z-index:1;
    

    
OVERFLOW-Y: scroll;
    

    
visibility: visible;
    

    
height: 450px;
    
min-height: 300px;
    
border:#ccc 1px solid;
    

    
}
    
#profile1 p{
    
font : normal 12px/150% Verdana;
    
color:#000;
    
text-align: left;
    
padding : 60px 10px 0 5px;
    
margin : 0;
    

    
}
    

    
.left{
    
width: 300px;
    
float: left;
    
margin: 0;
    
text-align : left;
    
padding-left: 50px;
    
font : bold 16px/59px arial;
    
color: #962212;
    
}
    
.right{
    
width: 400px;
    
float: right;
    
margin-top : 0;
    
padding-top: 2px;  /*40px*/
    
padding-right: 50px;
    
font : bold 16px/59px arial;
    
color: #962212;
    
text-align: right;
    
width:90%;
    
}
    
.right a { color:#FFFFFF}
    
.navright{
    
width: 400px;
    
float: right;
    
margin-top : 0;
    
padding-top: 40px;
    
padding-right: 50px;
    
font : bold 16px/59px arial;
    
color: #962212;
    
text-align: right;
    
}
    

    

    

    
#left_column {
    
width: 360px;
    
margin-top: 0;
    
float: left;
    
margin-left: 100px;
    
padding: 10px 10px;
    
}
    
.comment_boxes_head {
    
background:url(../images/commenttop.jpg) 0 0 no-repeat;
    
width: 359px;
    
height: 53px;
    
margin: 20px 0 0 0;
    
padding: 0;
    
text-align: left;
    
}
    
.comment_content {
    
width: 359px;
    
height: auto;
    
background:#FFF;
    
margin: 0;
    
padding: 0;
    
}
    
.commentxthead {
    
font : bold 11px arial;
    
color : #000;
    
margin : 0;
    
padding-left: 30px;
    
padding-top: 40px;
    
}
    
.commentcomment {
    
font : normal 11px arial;
    
color : #000;
    
margin : 0;
    
padding-left: 15px;
    
padding-top: 5px;
    
}
    
.commentdate {
    
font : normal 11px arial;
    
color : #D77A49;
    
margin: 0;
    
padding-left: 15px;
    
padding-top: 5px;
    
padding-bottom: 10px;
    
}
    
/*

    
Contact form

    
*/
    

    
label {
    
font : normal 12px arial;
    
color : #7C7C7C;
    
}
    

    
form.contact_us {
    
width: 170px;
    
}
    

    
input.fields_contact_us {
    
display: block;
    
width: 170px;
    
border : 1px solid #D5D5D5;
    
margin-top: 3px;
    
margin-bottom: 3px;
    
background:#F1F1F1;
    
}
    

    
textarea {
    
width: 170px;
    
border : 1px solid #D5D5D5;
    
margin-top: 3px;
    
background:#F1F1F1;
    
}
    

    
.submit_button_contact {
    
margin-top: 15px;
    
width: 100%;
    
padding: 2px;
    
background: none;
    
cursor: pointer;
    
color: #7C7C7C;
    
border: none;
    
font-size: 14px;
    
font-weight: bold;
    
font-family: Arial;
    
font-style: italic;
    
text-transform: uppercase;
    
}
    
#right_column{
    
width : 280px;
    
height: 376px;
    
float : left;
    
margin-left : 20px;
    
margin-top : 0;
    
}

    Please help me with the code.

    June 29, 2012 at 2:05 am #105048
    nitish
    Member

    Below is HTML code using the above CSS


    

    

    

    

    
গুপী গাইন বাঘা বাইন
    June 29, 2012 at 2:14 am #105049
    nponnen
    Participant

    can u send the url…

    June 29, 2012 at 2:18 am #105050
    nitish
    Member

    I haven’t hosted this site yet…

    June 29, 2012 at 2:23 am #105051
    nponnen
    Participant

    body {

    margin: 0px;
    text-align: center;
    background:url(../images/songsback.jpg) 0 0 no-repeat;
    overflow: scroll;
    height: 100%;
    width:100%;
    }

    try this

    June 29, 2012 at 2:27 am #105052
    nitish
    Member

    
গুপী গাইন বাঘা বাইন
    

    

    

    

    

    

    


    

    


    

    


    


    


    

    

    


    

    

    

    


    

    

    


    

    


    


    

    

    


    

    

    


    
Notice:  Use of undefined constant SUCCESS - assumed 'SUCCESS' in C:xampphtdocsgoopybaghaincludesgrdn_class.theme.php on line 140
    June 29, 2012 at 2:35 am #105053
    nitish
    Member

    Can you give me your mail-id so I will send you snap of the bug?

    June 29, 2012 at 2:44 am #105054
    nponnen
    Participant

    [email protected]

    July 2, 2012 at 2:42 am #105198
    nitish
    Member

    Anyone Please help me with this

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.