Hi there!
I have one problem and I was hoping that someone could help me. I tried everything and I know it's something in the CSS or the div's where the problem is. I have build this website with Wordpress and it is good as it looks now. But once you start resizing the screen-width the header part (div:bgtopbg) doesn't move with the rest of the website. Could someone please look at it.
The website is: www.abdullah.creativefactoryworks.com
Thank you!
I am sorry and forgot to add
I am sorry and forgot to add the CSS code. Sorry for double posting:
@font-face { font-family: chopin_script; src: url('../fonts/ChopinScript.eot'); src: local(chopin_script), url('../fonts/ChopinScript.ttf') format('truetype'); } #body { min-width:960px; } a:link { text-decoration: none } a:active { text-decoration: none } a:visited { text-decoration: none } #top { margin:0 auto; font-family: calibri; height: 300px; width: 100%; background-color: #1C0F00; } #topbg { background-image:url(../images/header.png); background-repeat: no-repeat; width: 1400px; height: 300px; margin: 0 auto; } #bgtopbg { padding-left: 121px; width: 1095px; margin: 0 auto; position:relative; } #audioplayer { width: 1095px; margin:0 auto; padding-top: 100px; } #access { font-family: chopin_script; font-size: 32px; text-align: left; height: 75px; width: 1095px; background-image: url(../images/menu.png); background-repeat:no-repeat; margin:0 auto; } #access a { color: #35230f; } #access a:hover { color: #a3471e; } .current-menu-item { background-image: url(../images/menubg.png); background-repeat: repeat-x; background-image: -ms-linear-gradient(bottom, #2E1E0D 0%, #3B2610 50%, #402A12 75%, #30200D 100%); /* IE10 */ background-image: -moz-linear-gradient(bottom, #2E1E0D 0%, #3B2610 50%, #402A12 75%, #30200D 100%); /* Mozilla Firefox */ background-image: -o-linear-gradient(bottom, #2E1E0D 0%, #3B2610 50%, #402A12 75%, #30200D 100%);/* Opera */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2E1E0D), color-stop(0.5, #3B2610), color-stop(0.75, #402A12), color-stop(1, #30200D)); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-linear-gradient(bottom, #2E1E0D 0%, #3B2610 50%, #402A12 75%, #30200D 100%); /* Webkit (Chrome 11+) */ background-image: linear-gradient(bottom, #2E1E0D 0%, #3B2610 50%, #402A12 75%, #30200D 100%); /* Proposed W3C Markup */ -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft:10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; behavior: url(border-radius.htc); heigth: 40px; } #access .current_page_item a:link ,#access .current_page_item a:visited { color: #FFF; } .menu-header ul { } .menu li { float:left; margin:0 auto; height: 50px; padding-top: 10px; padding-left: 30px; padding-right: 30px; margin-left: 10px; margin-right: -10px; list-style:none; border:none; text-decoration: none; } .menu ul { margin-top: -10px; } #header { width: 1045px; float:left; z-index: 3; margin:0 auto; } #slider { width: 974px; height: 350px; margin:0 auto; background-image:url(../images/content.png); background-repeat:repeat; z-index: 3; float:left; position:relative } #socialmedia { float:left; z-index: 2; position:relative } #facebook { background-image:url(../images/facebook.png); width: 80px; height: 80px; margin-top: 10px; margin-left: -20px; } #facebook:hover{ margin-top: 10px; margin-left: -10px; } #twitter { background-image:url(../images/twitter.png); width: 80px; height: 80px; margin-left: -20px; } #twitter:hover{ margin-left: -10px; } #myspace { background-image:url(../images/myspace.png); width: 80px; height: 80px; margin-left: -20px; } #myspace:hover{ margin-left: -10px; } #headerbottom { clear:both; } #sitetitle { width: 1px; height: 1px; flaot:left; } #sitetitle p { display:none; } #sitetitle h1 { display:none; } #middle { margin: 0 auto; width: 1095px; } #main { width: 974px; margin: 0 auto; background-image:url(../images/content.png); background-repeat: repeat; margin-bottom: 20px; -moz-box-shadow: 0px 0px 12px #999; -webkit-box-shadow: 0px 0px 12px #999; box-shadow: 0px 0px 12px #999; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#999999',ShadowOpacity=0.30); ) "; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#999999', ShadowOpacity=0.30);); -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft:10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; behavior: url(border-radius.htc); } #contentleft { width: 550px; float:left; padding-left: 20px; padding-right: 20px; font-family:myriad pro; padding-top: 24px; padding-bottom: 20px; } #contentleft a { color: #000; } #contentleft p { margin-top: -20px; padding-left: 9px; padding-top: 10px; padding-right: 9px; padding-bottom: 10px; width: 578px; background-color: #FFF; border-style:none solid solid solid; border-color: #EEE; border-width: 1px; } #contentleft a:hover { color: #a3471e; } #contentleft a:link a:active a:visited { text-decoration: none } #contentright a:link a:active a:visited { text-decoration: none } #contentright a:hover { color: #a3471e; } #contentleft h2 { padding-left: 10px; font-family:myriad pro; font-weight:bold; background-image:url(../images/contentbar.png); width: 590px; height: 32px; } #contentleft h1 { padding-left: 10px; font-size: 23px; font-family:myriad pro; font-weight:bold; background-image:url(../images/contentbar.png); width: 590px; height: 32px; } #contentright { background-image: url(../images/sidebar.png); background-repeat: no-repeat; width: 300px; float: right; margin-top: 39px; padding-top: 15px; padding-right: 25px; padding-bottom: 20px; } #contentright a { color: #000; } #contentright li { padding-top: 10px; padding-bottom: 10px; } #contentright ul li ul { border:none; } #contentright h3 { font-family:myriad pro; font-weight:bold; } #contentright ul { background-color: #FFF; list-style:none; border:none; text-decoration: none; padding-left: 20px; border-style:none solid solid solid; border-color: #EEE; border-width: 1px; } #contentbottom { clear:both; } #bottom { background-color: #1C0F00; width: 100%; margin: 0 auto; } #footer { clear:both; width: 974px; min-height:106px; margin: 0 auto; background-image:url(../images/footer.png); z-index: 3; } #footer ul{ float:left; width: 240px; background-color: #F00; background-repeat: repeat; } #copyright{ padding-top: 20px; clear:both; margin: 0 auto; text-align:center; color: #000; z-index: 3; } #copyright a{ clear:both; text-align:center; color: #FFF; }
You have a padding-left:
You have a padding-left: 121px
style applied to your #bgtopbg
div. This will pad the contents of that div 121px away from the left, is this intentional? I can also see you have the height for your #topbg div set to height: 300px
. Within this div, you have nested your #bgtopbg
, #audioplayer
, #menu
and #header
divs. Try removing these divs and nesting them within the #top
div.
Thank you for responding.The
Thank you for responding.
The padding-left wass intentional. In firebug you can shut it off and you can see that the slider isn't nicely aligned. The height of #topbg
is for the image. But I changed it a little bit. The #bgtopbg
should indeed be nesting within the #top
div, my mistake. But I changed the way the divs and the paddings were working in the CSS.
I know now what the problem is, I just don't have the solution. If you go to www.abdullah.creativefactoryworks.com, you can see that once you adjust the screen-width, the #top
will float away. The reason for that is because of the image that's in #topbg
. It has a backgroundimage that is wider then the content. The image is 1400px width but the content/footer etc is 974px width. So that's the reason why my divs are a little weird. Now I need to let the #top
div scroll with the rest of the screen and not float away once the screen is 1400px in width
The div #top
is for the backgroundcolor
The div #topbg
is for the image that's 1400 width and 300 in height
The div #bgtopbg
is for the #audioplayer
, #menu
and #header
divs.
If there is another way to insert this way easier please let me know. I tend to overthink stuff and look for the hard way.
"EDIT: I found the solution almost. By removing the width in #topbg
and changing it into width:100%
, it lets me scroll the screen now, but the image is aligned left and margin: 0 auto
, doesn't work. So if someone has a solution for that I would be realy grateful!!
So does no one has a solution
So does no one has a solution for me. Please, I want to finish this website and the only thing standing in the way is this damn error. Please help, thank you very much