Wordpress site doesn't let me resize screen-width

4 replies [Last post]

Tue, 2011-05-31 12:18

Khalyd

Offline

newbie

Last seen: 6 years 6 weeks ago

Timezone: GMT+2

Joined: 2011-05-31

Posts: 4

Points: 5

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!

Tags:

Tue, 2011-05-31 12:23

Khalyd

Offline

newbie

Last seen: 6 years 6 weeks ago

Timezone: GMT+2

Joined: 2011-05-31

Posts: 4

Points: 5

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

Thu, 2011-06-02 00:38

NickCSS

Offline

newbie

Last seen: 6 years 7 weeks ago

Timezone: GMT+12

Joined: 2006-10-04

Posts: 8

Points: 7

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.

Thu, 2011-06-02 13:51

Khalyd

Offline

newbie

Last seen: 6 years 6 weeks ago

Timezone: GMT+2

Joined: 2011-05-31

Posts: 4

Points: 5

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!!

Sun, 2011-06-05 22:48

Khalyd

Offline

newbie

Last seen: 6 years 6 weeks ago

Timezone: GMT+2

Joined: 2011-05-31

Posts: 4

Points: 5

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

Wordpress site doesn't let me resize screen-width

I am sorry and forgot to add

You have a padding-left:

Thank you for responding.The

So does no one has a solution

User login

Navigation