14 replies [Last post]
verd
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2007-06-25
Posts: 6
Points: 0

Hi,

I'm having a bit of trouble with a layout I'm working on and suspect my problem to come from absolute positioning...

This is the intended layout:
http://synthdriven.com/images/layout%20progress2.jpg

This is what I have:
http://synthdriven.com/ccms/test.html

CSS:
body{
background: url(images/bgright.jpg) scroll right top no-repeat;
background-color: #5ABF49;
color: #22130B;
font: normal 10pt arial;
margin: 0;
padding: 0;
}

#wrapper {
position: absolute;
left: 55px;
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 894px;
background: url("images/cols.gif") repeat;
}

#header {
margin: 0 0 0 0;
height: 139px;
background-color: #FFF7D6;
width: 894px;
background: url("images/banner.jpg") no-repeat;
}

#side-a {
line-height: 0px;
float: left;
width: 224px;
min-height: 600px;
}

#side-b {
float: right;
width: 224px;
min-height: 600px;
}

#content {
padding-left: 2px;
padding-right: 2px;
float: left;
background-color: #FFF7D6;
width: 49%;
}

#footer {
clear: both;
background: url("images/cols.gif") repeat;
height: 19px;
}

#puzzle{
z-index: 1;
position: absolute;
left: 784px;
}

#text{
position: relative;
padding: 10px;
}

#bottombar{
position: absolute;
bottom: 0px;
height: 130px;
width: 100%;
background-image: url('images/tanbarbottom.gif');
background-repeat: repeat-x;
}

.center-content{
text-align: center;
}

HTML:





The Edward H. Arnold Center for Confluent Media Studies - University of Miami College of Engineering

puzzle

high end about projects teaching people contact
mixer
Lorem ipsum in rebum apeirian sed, ei his causae inermis, ut partiendo reprimique duo. Choro soluta deterruisset mea ea. Te graeci explicari nam, veniam nominati volutpat ut vel, ad aliquip delicatissimi mei. Eum te partem alienum, pro magna iracundia te, sumo aliquid eum te. Duo id puto accumsan insolens.

Eu eam tale deterruisset, eros assum referrentur ut nec. Alii habemus vulputate mea id, ut numquam dolorum has. Natum summo saepe sea id, ad aliquando conclusionemque vix. Te sit ullum oratio consectetuer, cum dicta electram argumentum cu. At mei solet mentitum cotidieque, vix legere verear definitionem an. Ea mea reformidans voluptatibus, id pertinax elaboraret ius, eos ex inimicus splendide. Mea ut suscipit constituam.

No alii corrumpit sea. No prima invidunt sit. Eius facilis consulatu in quo. Tale novum eam ea. Debitis omnesque cotidieque ea nam, platonem cotidieque ut usu.

Natum vivendum pertinacia eos ut, minim deleniti delectus vis ne, pro vitae essent mentitum eu. In has puto nihil alterum, meis electram vis et. Decore moderatius has ad. In ignota honestatis sed, brute deserunt ut sit, duo lorem dicant delicata at. Vim nusquam nominati te, duo veri vivendum in. Propriae scaevola nec ei, sea dico causae ocurreret et.

Graeco oblique nam an. Esse complectitur id has. Eu accusam ancillae cotidieque duo, ei dolorum fuisset praesent mei, omnium sententiae appellantur ex mea. Id delenit scripserit vim, ne movet intellegat sit. Enim dictas has ad.

Est et voluptua suscipiantur, vix an simul invidunt vituperata. Molestie offendit ocurreret nec id, has autem suscipiantur et, ludus aliquip mediocrem et vel. Sit id aliquip diceret perfecto, est ad placerat sapientem. Laudem similique moderatius eum ea, dolorum volumus imperdiet ex eos. Vix diam enim habemus ea, duo et deleniti philosophia, mel enim puto paulo ne. Veritus consequat constituto ut ius.

Alii velit no pro, pro at discere adolescens inciderint. Pri cu diceret persecuti elaboraret, duo numquam debitis ullamcorper at. In his duis quas. Eam et tota veniam offendit, ea cum eruditi omittam deserunt, falli adipisci ex mel. Sed et graeci nostrud electram, dicam ridens usu eu, menandri similique mea et. Usu tota nominavi urbanitas et, oblique appetere adolescens at vix. Tempor noluisse aliquando sit in, ea vel tota integre, quaerendum intellegebat et nam.

Dicant omittantur has no, persius partiendo persecuti eu eum. Epicurei officiis moderatius sit te. Et sit oblique tincidunt suscipiantur, in usu ludus pericula signiferumque. Vim admodum intellegebat conclusionemque ne. Nec et suavitate deseruisse.

Usu et errem fabulas periculis. Et voluptatum definiebas vel, partiendo conceptam vis in, nostro comprehensam te nec. Odio sadipscing no sea. Nec legere scripserit ne, zzril voluptatum definitionem est ea, homero equidem aliquyam an mel. Probo munere eu mei, ad vituperata elaboraret duo, diceret disputando cu his.

Eos quas consequat no, audire pericula cum te, eius cotidieque sed ut. Sed puto persecuti ne, at eum dicant appareat. Eum ei audire inermis vulputate, ex ius ubique salutatus argumentum. Ut pro enim labor



listen



RadioBlog.playlist = 'http://www.synthdriven.com/sounds/playlist.php';
RadioBlog.width = '200px';
RadioBlog.height = '200px';
RadioBlog.cover = 0;
RadioBlog.color.body = '#AC9F67';
RadioBlog.color.border = '#897935';
RadioBlog.color.button = '#897935';
RadioBlog.color.player_text = '#897935';
RadioBlog.color.playlist_text = '#897935';
RadioBlog.start();




miami

The problem has to do with resolutions that are smaller than the layout. ...As soon as horizontal scrollbars are involved, whereever the horizontal scrollbar starts, the 100% width stuff stops. ...As in the absolute positioning stuff positions based on the intial window-size. So if you have a smaller resolution, you'll get a green stripe down the right hand side of the page, which I don't want.

...Also, there's that bar there with the UMiami logo on it that I want at after the wrapper, sort of anchored to the bottom of the page.

I know there's got to be another way to go about this... Does anyone have any suggestions?

GoogDesigns
GoogDesigns's picture
Offline
Regular
St. Louis
Last seen: 14 years 4 weeks ago
St. Louis
Joined: 2007-06-24
Posts: 20
Points: 0

one tip

based on personal experience...and a quick once over of your script...your css looks fine, but quit nesting your div tags...maybe I am wrong here and I am sure many will disagree with me...but css is here to provide us with well-structured html...i always find it best to keep each div tag separate from the next. The absolute positioning doesn't give a *beep* if they are nested and actually messes things up.

Stop thinking html 4.0....think xml...simplicity

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Er sorry gooddesigns but

Er sorry gooddesigns but nesting divs is essentially how layouts are formed, from what you say it sounds like you are using absolute positioning for all page elements this is very bad it's fragile and not how CSS works at its best, and never encouraged on this forum.

HTML is what we write whether it has a html DTD or an xhtml one. XML is a slightly different kettle of fish.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 20 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

GoogDesigns wrote:based on

GoogDesigns wrote:
based on personal experience...and a quick once over of your script...your css looks fine, but quit nesting your div tags...maybe I am wrong here and I am sure many will disagree with me...but css is here to provide us with well-structured html...i always find it best to keep each div tag separate from the next. The absolute positioning doesn't give a *beep* if they are nested and actually messes things up.

Stop thinking html 4.0....think xml...simplicity

Actually, think semantic and structural markup Wink You're half right; don't use too many divs, you should use proper elements - however, you don't need to get rid of divs entirely Tongue

Verschwindende wrote:
  • CSS doesn't make pies

verd
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2007-06-25
Posts: 6
Points: 0

Thanks for you replies...

Thanks for you replies... I'm not quite sure of what I should do to fix this problem... Any suggestions?

Thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

First, remove the position

First, remove the position properties from #wrapper and #bottombar. That will give you a better starting point. Using {position: absolute;} is best reserved for use only with compelling reason.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

GoogDesigns
GoogDesigns's picture
Offline
Regular
St. Louis
Last seen: 14 years 4 weeks ago
St. Louis
Joined: 2007-06-24
Posts: 20
Points: 0

about that fish

i was simply making a comparison about the simplistic nature of xml that should become more evident in his html...but i suppose we should address his problems directly instead of fussing around about personal preferences

verd
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2007-06-25
Posts: 6
Points: 0

Thanks for your reply. I can

Thanks for your reply. I can do that-- only problem is that I do need the wrapper placed 55px from the left of the page in order for that puzzle graphic to remain in the right place. (It's an absolutely positioned png)

Is there another technique that I'm not aware of that'll allow me to position the bottom bar and the rest of the elements from the edge of the page and not the edge of the view-space?

verd
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2007-06-25
Posts: 6
Points: 0

I realized that it might be

I realized that it might be better to take a screen shot and show you exactly what I'm talking about instead of trying to verbalize it. The problem is directly related to the user's screen resolution. With a screen resolution of 1024x768, this is what happens:

Upon immediate loading of the page:
http://synthdriven.com/images/pageprob01.png
It doesn't look so bad.

But then you scroll a bit to the right and a bit down and it looks like this:
http://synthdriven.com/images/pageprob02.png

The absolute positioning is positioning from the view-space, not the actual edge of the page. And I was wondering if anyone knew of a way to anchor objects from the actual edge of the page.

Thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Please do as I asked.

Please do as I asked. Position absolute is causing issues that mitigate against solving other problems.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

verd
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2007-06-25
Posts: 6
Points: 0

...I already did. It solved

...I already did. It solved part of the bottombar issue, but not the part I keep inquiring about. It created a new issue with the wrapper, as I predicted in an earlier post. But the same problem still stands that I keep asking about. The right background image is not anchored from the edge of the page, it's anchored from the edge of the viewable area. The same goes for anything that is declared to have a width of 100%, such as the bottombar. Still.

If you maybe explain why you are making these suggestions, I might be able to better understand the behavior of tags that are causing problems, as well as what's best to do and what the next best step might be without a step-by-step thing.

Thanks.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 20 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

AP is brittle and breaks

AP is brittle and breaks very easily.

Once you remove it we can work on using floats and relative positioning to lay out yoru page properly Smile

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

When you apply a change, be

When you apply a change, be sure to upload the new document and provide a link if you've not overwritten the old.

The why is because using absolute positioning for major layout is usually the worst of available choices. It does have its place, as we shall see.

Now, make #header {position: relative;} so it is a positioned reference for the puzzle image. Make the image a child of #header. You don't need to wrap it in a div (#puzzle).



...
===============
#header {
position: relative; /*new*/
}

#header img {
position: absolute;
left: 737px;
top: 0;
}

That should do it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

verd
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2007-06-25
Posts: 6
Points: 0

Thanks for the

Thanks for the reply.

HTML:
http://synthdriven.com/ccms/test2.html

CSS:
http://synthdriven.com/ccms/stylesheet2.css

I already have a header, which includes the title bar image, so I created #header2 for the puzzle pieces. ...I've read a lot about the difference between positioning techniques, but the reading hasn't always "clicked" for me.

I understand what you did and how you kept the puzzle png in the same location. It's positioned 729px from the left of the wrapper, and the wrapper centers itself, so everything stays in place + everything gets centered nice.

Only problem is that it doesn't seem to work all that well in IE. I know a fix for the pngs, because IE 6 doesn't understand transparencies, I'm using something called sleight.js. So that fixes the transparency dilemma. But in general, everything gets all skewed in IE. ...And I'm not sure why. If I had an idea of what was happening, I could search for a hack/fix.

This is what it looks like:
http://synthdriven.com/images/pageprob03.png

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Lose the header2; it's

Lose the header2; it's redundant and it breaks the layout in IE. Do it the way I showed you. IE requires both positional reference and hasLayout in the AP element's reference ancestor. The original header has layout already.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.