Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Div issue... 1

Status
Not open for further replies.
taxgirl

taxgirl

Programmer
Nov 8, 2006
7
US
Hey,

I'm having issues w/ the right and bottom of this site...

http://www.suburbannoizerecords.com/frontpage.htm

Here's the coding

Code: 
<style type="text/css">
<!--
.topleft {
	position: absolute;
	height: 61px;
	width: 52px;
	left: 0px;
	top: 0px;
	background-color: #000000;
	background-image: url(storefront/topleft.jpg);
}
.topcenter {
	position: absolute;
	height: 61px;
	width: 100%;
	left: 52px;
	top: 0px;
	right: 51px;
	background-color: #000000;
	background-image: url(storefront/topcenter.jpg);
	background-repeat: repeat-x;
}
.topright {
	position: absolute;
	height: 61px;
	width: 51px;
	top: 0px;
	right: 0px;
	background-color: #000000;
	background-image: url(storefront/topright.jpg);
}
.centerleft {
	position: absolute;
	height: 100%;
	width: 52px;
	left: 0px;
	top: 0px;
	bottom: 0px;
	background-color: #000000;
	background-image: url(storefront/centerleft.jpg);
	background-repeat: repeat-y;
}
.centerright {
	position: absolute;
	height: 100%;
	width: 51px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	background-color: #000000;
	background-image: url(storefront/centerright.jpg);
	background-repeat: repeat-y;
}
.bottomleft {
	position: absolute;
	height: 38px;
	width: 52px;
	left: 0px;
	bottom: 0px;
	background-color: #000000;
	background-image: url(storefront/bottomleft.jpg);
	top: 0px;
}
.bottomcenter {
	position: absolute;
	height: 38px;
	width: 100%;
	left: 52px;
	right: 51px;
	bottom: 0px;
	background-color: #000000;
	background-image: url(storefront/bottomcenter.jpg);
	background-repeat: repeat-x;
	top: 0px;
}
.bottomright {
	background-color: #000000;
	background-image: url(storefront/bottomright.jpg);
	position: absolute;
	height: 38px;
	width: 51px;
	right: 0px;
	bottom: 0px;
	top: 0px;
}
.storefront {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 125px;
	top: 160px;
	right: 0px;
	bottom: 0px;
	overflow: visible;
}
.center {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #FFFFFF;
	position: absolute;
	height: 100%;
	width: 100%;
	left: 52px;
	top: 0px;
	right: 51px;
	bottom: 0px;
}
body,td,th {
	color: #FFFFFF;
}
body {
	background-color: #000000;
}
a:link {
	color: #FF0000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #990000;
}
a:hover {
	text-decoration: underline;
	color: #666666;
}
a:active {
	text-decoration: none;
	color: #990000;
}
.bottom {
	position: absolute;
	height: 38px;
	width: 100%;
	left: 0px;
	right: 0px;
	bottom: 0px;
	overflow: visible;
}
.hori-center {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 61px;
	right: 0px;
	bottom: 38px;
}
.top {
	position: absolute;
	height: 61px;
	width: 100%;
	left: 0px;
	top: 0px;
	right: 0px;
}
-->
</style>
<div class="storefront" id="storefront">
  <div class="top" id="top">
      <div class="topleft" id="topleft"></div>
      <div class="topcenter" id="topcenter"></div>
      <div class="topright" id="topright"></div>
  </div>
  
  <div class="hori-center" id="hori-center">
      <div class="centerleft" id="centerleft"></div>
      <div class="center" id="center">INSERT ALL TEXT HERE ```````!</div>
      <div class="centerright" id="centerright"></div>
  </div>
  <div class="bottom" id="bottom">
    <div class="bottomleft" id="bottomleft"></div>
    <div class="bottomcenter" id="bottomcenter"></div>
    <div class="bottomright" id="bottomright"></div>
  </div>
</div>

Pretty much, it's supposed to be a white box (w/ the cool edges) that expands height and width wise to fit the screen (the top and left margins are set for a header and left side global navigation)

This is SOO important that I fix this today and I'd love and adore anyone that could help me MORE than you will ever know.

Please let me know if you can help.

And if you need more info contact me on AIM my screen name is taxgirlsrh or PM me or something. Please and thank you!!
 
Sort by date Sort by votes
Hey taxgirl,

A couple of things:

First og all, you forgot to "end" the head and begin the body of your html. So insert
Code: 
</head>
<body>

... between

Code: 
</style>

... and

Code: 
<div class="storefront" id="storefront">

Furthermore - the image paths must be exact. According to your html, I should be able to see an image on this URL:


... I don't.
 
Upvote 0 Downvote
... one more thing: you storefront class: It's 100% in both width and height AND you ofset it by 125x160px - that's gonna render your storefront out of the browser window (ie. you get scrollbars horiz & vert)....
 
Upvote 0 Downvote
First up.. I actually removed those on purpose because of where I put the code in our form (I know it's improper but it's kinda myspace style I guess.. .NOT myspace though)

Second, the path is actually
so here's the code redone....

Code: 
<style type="text/css">
<!--
.topleft {
    position: absolute;
    height: 61px;
    width: 52px;
    left: 0px;
    top: 0px;
    background-color: #000000;
    background-image: url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/topleft.jpg);[/URL]
}
.topcenter {
    position: absolute;
    height: 61px;
    width: 100%;
    left: 52px;
    top: 0px;
    right: 51px;
    background-color: #000000;
    background-image: url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/topcenter.jpg);[/URL]
    background-repeat: repeat-x;
}
.topright {
    position: absolute;
    height: 61px;
    width: 51px;
    top: 0px;
    right: 0px;
    background-color: #000000;
    background-image: url(storefront/topright.jpg);
}
.centerleft {
    position: absolute;
    height: 100%;
    width: 52px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background-color: #000000;
    background-image: url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/centerleft.jpg);[/URL]
    background-repeat: repeat-y;
}
.centerright {
    position: absolute;
    height: 100%;
    width: 51px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #000000;
    background-image: url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/centerright.jpg);[/URL]
    background-repeat: repeat-y;
}
.bottomleft {
    position: absolute;
    height: 38px;
    width: 52px;
    left: 0px;
    bottom: 0px;
    background-color: #000000;
    background-image: url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/bottomleft.jpg);[/URL]
    top: 0px;
}
.bottomcenter {
    position: absolute;
    height: 38px;
    width: 100%;
    left: 52px;
    right: 51px;
    bottom: 0px;
    background-color: #000000;
    background-image: url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/bottomcenter.jpg);[/URL]
    background-repeat: repeat-x;
    top: 0px;
}
.bottomright {
    background-color: #000000;
    background-image: url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/bottomright.jpg);[/URL]
    position: absolute;
    height: 38px;
    width: 51px;
    right: 0px;
    bottom: 0px;
    top: 0px;
}
.storefront {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 125px;
    top: 160px;
    right: 0px;
    bottom: 0px;
    overflow: visible;
}
.center {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    background-color: #FFFFFF;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 52px;
    top: 0px;
    right: 51px;
    bottom: 0px;
}
body,td,th {
    color: #FFFFFF;
}
body {
    background-color: #000000;
}
a:link {
    color: #FF0000;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #990000;
}
a:hover {
    text-decoration: underline;
    color: #666666;
}
a:active {
    text-decoration: none;
    color: #990000;
}
.bottom {
    position: absolute;
    height: 38px;
    width: 100%;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: visible;
}
.hori-center {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 61px;
    right: 0px;
    bottom: 38px;
}
.top {
    position: absolute;
    height: 61px;
    width: 100%;
    left: 0px;
    top: 0px;
    right: 0px;
}
-->
</style>
<div class="storefront" id="storefront">
  <div class="top" id="top">
      <div class="topleft" id="topleft"></div>
      <div class="topcenter" id="topcenter"></div>
      <div class="topright" id="topright"></div>
  </div>
  
  <div class="hori-center" id="hori-center">
      <div class="centerleft" id="centerleft"></div>
      <div class="center" id="center">INSERT ALL TEXT HERE!</div>
      <div class="centerright" id="centerright"></div>
  </div>
  <div class="bottom" id="bottom">
    <div class="bottomleft" id="bottomleft"></div>
    <div class="bottomcenter" id="bottomcenter"></div>
    <div class="bottomright" id="bottomright"></div>
  </div>
</div>
 
Upvote 0 Downvote
How do I have a 100% fill both horizontally and vertically WITH that offset then?

That totally makes sense that that would happen but I don't understand my it's rendering the way it is... in so instances when I changed the expanding divs to static rather than absolute they expanded off the page (and that would explain what is happening there) but how do I resolve this issue?
~beth.
 
Upvote 0 Downvote
I'm not quite sure a full screen layout can be done with absolute positioning ... but this might get you on the tracks :

Code: 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<html>
<head>
  <title>TexGirl's Project</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <style type="text/css">
  <!--
  body {
    margin : 0;
    padding : 0;
    overflow : hidden;
  }
  .storeFront {
    width : 100%;
    height : 100%;
    background : #FFFFFF url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/centerleft.jpg)[/URL] repeat-y;
    color : red;
  }
  .topLeft {
    width : 52px;
    height : 61px;
    position : absolute;
    top : 0;
    left : 0;
    z-index : 1;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/topleft.jpg)[/URL] no-repeat;
  }
  .topRight {
    width : 52px;
    height : 61px;
    position : absolute;
    top : 0;
    right : 0;
    z-index : 1;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/topright.jpg)[/URL] no-repeat;
  }
  .bottomRow {
    position : absolute;
    bottom : 0;
    height : 38px;
    width : 100%;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/bottomcenter.jpg);[/URL]
  }
  .bottomLeft {
    width : 52px;
    height : 38px;
    position : absolute;
    bottom : 0;
    left : 0;
    z-index : 1;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/bottomleft.jpg)[/URL] no-repeat;
  }
  .bottomRight {
    width : 52px;
    height : 38px;
    position : absolute;
    bottom : 0;
    right : 0;
    z-index : 1;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/bottomright.jpg)[/URL] no-repeat;
  }
  .centerRight {
    z-index : 0;
    width : 52px;
    height : 100%;
    position : absolute;
    top : 0;
    right : 0;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/centerright.jpg)[/URL] repeat-y;
  }
  .topCenter {
    z-index : 0;
    width : 100%;
    height : 61px;
    position : absolute;
    top 0;
    left : 0;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/topcenter.jpg)[/URL] repeat-x;
  }
  .bottomCenter {
    z-index : 0;
    width : 100%;
    height : 38px;
    position : absolute;
    bottom : 0;
    left : 0;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/bottomcenter.jpg)[/URL] repeat-x;
  }
  -->
  </style>
</head>
<body>
  <div class="storeFront">
    <div class="topLeft">
    </div>
    <div class="topCenter">
    </div>
    <div class="topRight">
    </div>
    <div class="centerRight">
    </div>
    <div class="bottomLeft">
    </div>
    <div class="bottomCenter">
    </div>
    <div class="bottomRight">
    </div>
  </div>
</body>
</html>

For fullscreen layouts I still turn to tables -it still works.

Anyway, have a glance at what I made. Just can't put a content container in and make it scroll, but maybe you can figure it out. And if you do, pleeeease post the solution ;-)
 
Upvote 0 Downvote
I figured out if I put a lower than 100% I can create my offset and keep the whole thing on my page... youre coding change made a WORLD of difference... thank you sooo much! You wouldnt even believe the stress you've relieved me of. THANK YOU!

Code: 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<html>
<head>
  <title>TexGirl's Project</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <style type="text/css">
  <!--
  body {
	margin : 0;
	padding : 0;
	overflow : hidden;
	background-color: #000000;
  }
  .storeFront {
    width : 100%;
    height : 100%;
    background : #FFFFFF url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/centerleft.jpg)[/URL] repeat-y;
    color : red;
  }
  .topLeft {
    width : 52px;
    height : 61px;
    position : absolute;
    top : 0;
    left : 0;
    z-index : 1;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/topleft.jpg)[/URL] no-repeat;
  }
  .topRight {
    width : 52px;
    height : 61px;
    position : absolute;
    top : 0;
    right : 0;
    z-index : 1;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/topright.jpg)[/URL] no-repeat;
  }
  .bottomRow {
    position : absolute;
    bottom : 0;
    height : 38px;
    width : 100%;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/bottomcenter.jpg);[/URL]
  }
  .bottomLeft {
    width : 52px;
    height : 38px;
    position : absolute;
    bottom : 0;
    left : 0;
    z-index : 1;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/bottomleft.jpg)[/URL] no-repeat;
  }
  .bottomRight {
    width : 52px;
    height : 38px;
    position : absolute;
    bottom : 0;
    right : 0;
    z-index : 1;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/bottomright.jpg)[/URL] no-repeat;
  }
  .centerRight {
    z-index : 0;
    width : 52px;
    height : 100%;
    position : absolute;
    top : 0;
    right : 0;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/centerright.jpg)[/URL] repeat-y;
  }
  .topCenter {
    z-index : 0;
    width : 100%;
    height : 61px;
    position : absolute;
    top 0;
    left : 0;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/topcenter.jpg)[/URL] repeat-x;
  }
  .bottomCenter {
    z-index : 0;
    width : 100%;
    height : 38px;
    position : absolute;
    bottom : 0;
    left : 0;
    background : #000000 url([URL unfurl="true"]http://www.suburbannoizerecords.com/store/storefront/bottomcenter.jpg)[/URL] repeat-x;
  }
.container {
	position: absolute;
	left: 135px;
	top: 160px;
	overflow: visible;
	height: 82%;
	width: 82%;
}
  -->
  </style>
</head>
<body>
<div class="container" id="container"><div class="storeFront">
    <div class="topLeft">
    </div>
    <div class="topCenter">
    </div>
    <div class="topRight">
    </div>
    <div class="centerRight">
    </div>
    <div class="bottomLeft">
    </div>
    <div class="bottomCenter">
    </div>
    <div class="bottomRight">
    </div>
</div></div>
</body>
</html>
 
Upvote 0 Downvote
Good job, taxgirl!

Glad to hear you found a solution - we're here to help eachother out, right?

Jakob ;-)
 
Upvote 0 Downvote
Ok, to ask a couple of obvious ones.

1. Does the page need to be completely absolutely positioned? I have found that it is best to use absolute positioning sparingly, only when it is the only (or clearly the desired) solution. Yours does not strike me as such.

2. Is there a lack of doctype only in these examples or in general. If you want to have at least a remote shot at your page looking somewhat the same across different browsers, you should have a doctype.
 
Upvote 0 Downvote
See the thing with this is, I'm not using it as the entire page, I'm using it as part of a whole.

And I'm not sure how else I would do this without absolute positioning... maybe you could shed some light on another way...

Much thanks!!
~beth.
 
Upvote 0 Downvote
I only see a huge white section amidst a huge black section. Based on that, I can suggest you do all of it via two elements, one black and one white. If you provide a bit more insight into your design, we might be able to help you better.
 
Upvote 0 Downvote
The white part is supposed to be the content area on the front page of this web store.. .. however this page isn't edited like normal HTML, I can only access part of the page via a backend datafield... if that makes sense?
~beth.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
623
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
184
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
122
tyutghf
tyutghf
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
145
vacunita
vacunita
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
199
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top