The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
 Reply to this topicStart new topic
> Scrolling/fixing elements in a blog design?, Looking for suggestions.
Nicola
post Aug 6 2011, 02:15 PM
Post #1


Advanced Member
****

Group: Members
Posts: 109
Joined: 16-February 09
Member No.: 7,824
Hi, I'm looking for some advice about a blog design I'm struggling with. I've copied the code below.

When people scroll down on the page to read older posts, I don't want #title to scroll up -- I want it fixed where it is in the top right of the screen. Same story with the backgrounds on #containerOut, #lineR, and #lineL: when people scroll down, I want them to continue on or stay fixed or whatever -- I don't want the blog posts to go into the yellow the way they do now. I tried position:fixed but then parts get cut off when the screen is made smaller. I tried background-attachment:fixed but then the elements just disappear entirely.

Any suggestions? Thanks!

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<style type="text/css">
body,#containerOut,#title {
    padding:0;
    border:0;
    margin:0;
}
body {
    height:100%;
    background-color:#fdf5a2;
}
#containerOut {
    position:absolute;
    left:16px;
    top:0;
    height:100%;
    width:730px;
    background-color:white;
    z-index:-1;
}
#containerIn {
    width:700px;
    padding:15px;
    border:0;
    margin:0;
    margin-left:16px;
}    
#lineR {
    background:url('http://www.pmsd.morganweb.com/aceadmin/images/host/line.png') repeat-y;
    position:absolute;
    left:744px;
    top:0;
    height:100%;
    width:7px;
}
#lineL {
    background:url('http://www.pmsd.morganweb.com/aceadmin/images/host/line.png') repeat-y;
    position:absolute;
    left:11px;
    top:0;
    height:100%;
    width:7px;
}
#title {
    background-color:white;
    background-image:url('');
    background-repeat:no-repeat;
    position:absolute;
    left:755px;
    top:30px;
    height:151px;
    width:292px;
}
</style>
</head>
<body>
<div id="lineL"> </div>

<div id="lineR"> </div>

<div id="containerOut"> </div>

<div id="containerIn">
<p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a sem vel nibh interdum egestas sit amet eu tortor. Donec vitae enim risus, quis ultrices metus. Donec vitae mi nibh. Morbi sed placerat metus. Curabitur auctor eros eget odio fermentum et fringilla ante hendrerit. Fusce at tempor libero. Maecenas et iaculis velit. Nulla sit amet lacus enim, vitae hendrerit metus. Donec a risus nunc. Etiam accumsan, ligula sit amet molestie dictum, turpis orci blandit justo, nec porttitor dui ante bibendum risus. Praesent luctus luctus tortor posuere tincidunt. Phasellus ante elit, sollicitudin id dignissim id, bibendum vel nulla.<br /><br />Vivamus vitae elit sed quam consequat interdum sed sit amet ante. Aliquam euismod ipsum non elit sagittis vulputate. Praesent id libero est. Aliquam eget hendrerit nibh. Donec ut sapien massa, vitae consectetur odio. Nunc ut convallis mauris. Donec nisi neque, cursus vitae faucibus a, sagittis et ipsum. Fusce vitae felis augue. Sed eu venenatis enim. Sed pharetra elementum vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi tincidunt euismod vehicula. Sed facilisis imperdiet pellentesque. Suspendisse ac orci et odio dignissim sodales eget pharetra erat. Etiam arcu odio, adipiscing sed sollicitudin in, egestas et orci. Donec id diam eget libero ultrices tincidunt id et dolor. Etiam malesuada tortor in mi pretium ultricies. Sed faucibus, dolor aliquam pulvinar lobortis, nulla neque condimentum dolor, vel hendrerit lorem elit id ipsum.<br /><br />Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse fringilla luctus ipsum, a suscipit dolor volutpat vitae. Nunc feugiat magna quis lorem porttitor a accumsan mauris pharetra. Mauris eget lectus sit amet mauris tincidunt congue non vitae massa. Donec mi mi, iaculis ut congue ut, aliquam ut est. Ut varius ultricies vulputate. Proin aliquet massa ac nulla volutpat dictum. Donec aliquam diam vel odio rutrum vitae tincidunt felis dapibus. Donec diam velit, elementum eget rutrum sed, congue eget sapien. Integer aliquet cursus pulvinar. Sed varius diam rhoncus metus tristique semper. Donec mauris enim, porttitor a eleifend at, porttitor id nisl. Donec est tellus, pellentesque tempor egestas sed, eleifend id dui. Nulla euismod erat non tellus bibendum quis vehicula odio faucibus. Cras enim turpis, pulvinar ac facilisis sit amet, egestas eu metus. Fusce orci sapien, sagittis non iaculis pharetra, fermentum non augue. Aliquam velit erat, facilisis at faucibus ut, semper sed velit. Proin ac sapien magna.<br /><br />Duis vestibulum varius orci vel tempor. Maecenas id magna nibh, id aliquam mauris. Aliquam auctor metus eget metus hendrerit sed luctus nisi convallis. Mauris faucibus interdum felis ac vestibulum. Aenean ut quam quis velit imperdiet fringilla nec tempor magna. Nam vel neque a justo cursus varius. Nam in erat ante. In convallis mi in tellus tempus id mollis ipsum cursus. Nam a ultrices nulla. Nullam pellentesque interdum ligula, quis mattis ante pharetra et.<br /><br />Etiam nisi nibh, tempus eu tincidunt lobortis, cursus sed ligula. Nam vitae elit purus, id facilisis purus. Fusce lorem quam, porta eget sodales quis, luctus eget mi. Fusce scelerisque, justo vestibulum varius porta, tellus nulla bibendum mi, non adipiscing neque leo vitae mi. Donec posuere, lacus eu lobortis rutrum, eros nulla iaculis orci, sed mollis orci purus rhoncus sapien. Fusce ac enim diam, quis posuere enim. In faucibus, sem a tincidunt mollis, eros nisl faucibus diam, ut volutpat dolor arcu quis augue. Sed iaculis justo auctor nulla vestibulum congue. Cras venenatis, sem non ullamcorper eleifend, risus tellus semper sem, quis fermentum mi nulla id metus. Fusce at placerat lacus. Sed tristique, velit id ultrices sollicitudin, massa tellus vehicula neque, in dignissim sapien nisl a ante. Etiam varius tristique ante et eleifend. Aliquam erat volutpat. Mauris luctus tristique eros, vehicula pharetra purus convallis vitae. Suspendisse porta condimentum magna in luctus. Aliquam erat volutpat.<br /><br />In dui risus, consequat sed sagittis pretium, fringilla a est. Vivamus gravida, est vel cursus tristique, est est aliquet quam, quis fermentum quam neque et justo. Nulla eu urna eu sapien rutrum varius eget id odio. Sed lacinia tristique purus ac auctor. Nam ornare auctor mauris, ac pharetra nisl dignissim sed. In hac habitasse platea dictumst. Suspendisse potenti. Donec eleifend malesuada orci vitae posuere. Vivamus mattis vestibulum ante, mattis pellentesque magna sagittis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum congue nunc ac felis volutpat vel vestibulum libero pulvinar. Duis rutrum dui non libero mollis ultrices. Vestibulum et sapien ac justo tristique rutrum. Duis nec nibh eros, eu pretium mauris. Ut tristique eleifend elementum. Duis id leo id nisl commodo sagittis at a elit. Cras aliquet, nibh a bibendum ultricies, nisl nisl posuere justo, in feugiat enim nunc non eros. Pellentesque vitae dui eget metus molestie sodales. Aenean id augue leo, a bibendum felis.<br /><br />Donec tristique laoreet lobortis. Aenean vestibulum congue mauris vitae suscipit. Maecenas in euismod orci. Suspendisse vel egestas leo. Vestibulum faucibus vestibulum felis at interdum. Cras vestibulum, augue quis convallis laoreet, ligula est suscipit turpis, a sodales nunc orci vitae risus. Nam eu tristique dolor. Vivamus nec aliquam neque. Integer magna eros, mattis non cursus ut, hendrerit eu orci. Morbi eu felis metus. Vivamus eu malesuada tortor. Vivamus eget lectus sit amet magna mattis adipiscing eu non magna. Praesent pretium tincidunt enim vel consectetur. Sed dictum vestibulum ligula, non dictum quam vulputate quis. Aliquam erat volutpat. Maecenas iaculis pharetra iaculis.</p>
</div>

<a href=""><div id="title"> </div></a>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 6 2011, 02:45 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Use position: fixed rather than position: absolute .
http://www.w3.org/TR/CSS2/visuren.html#propdef-position
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Nicola
post Aug 6 2011, 05:16 PM
Post #3


Advanced Member
****

Group: Members
Posts: 109
Joined: 16-February 09
Member No.: 7,824
QUOTE(pandy @ Aug 6 2011, 03:45 PM) *

Use position: fixed rather than position: absolute .
http://www.w3.org/TR/CSS2/visuren.html#propdef-position


Like I said, when I use position:fixed part of the page gets cut off when the screen is small. Is there a way around this?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 6 2011, 05:51 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Sorry, I missed that. I don't see that happening with the example you posted. It would happen if the positioned section was taller than the not positioned content, but that goes for absolute as well as fixed.

A fix would depend on the situation, I guess. If we imagine that #title was taller then the normal text, you'd have to force a hight on something non-positioned or body and make it at least as high as #title. All I can think of.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Nicola
post Aug 7 2011, 11:59 AM
Post #5


Advanced Member
****

Group: Members
Posts: 109
Joined: 16-February 09
Member No.: 7,824
Huh, that's odd because I do see it happening with the example I posted. Here's a screenshot to illustrate what I mean: http://www.pmsd.morganweb.com/aceadmin/ima...screenshot1.jpg.

This also happens when I use position:fixed: http://www.pmsd.morganweb.com/aceadmin/ima...screenshot2.jpg. I know it's probably to do with how #containerIn is not inside #containerOut in the HTML, but I haven't bothered trying to fix this yet because of the first problem.

This post has been edited by Nicola: Aug 7 2011, 12:06 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 7 2011, 04:53 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Ah, the width. Positioned boxes (fixed and absolute) don't take up any space, so #title doesn't add to the width of the page and no scrollbar is needed (as the browser sees it). You must create space for it, make the page always be wide enough to accommodate it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Nicola
post Aug 7 2011, 06:17 PM
Post #7


Advanced Member
****

Group: Members
Posts: 109
Joined: 16-February 09
Member No.: 7,824
QUOTE(pandy @ Aug 7 2011, 05:53 PM) *

make the page always be wide enough to accommodate it.


How? What I've tried doesn't work. (I've tried defining width for BODY, min-width for BODY, width for HTML, min-width for HTML.) Attached is the updated markup and here's another screenshot illustrating the problem: http://www.pmsd.morganweb.com/aceadmin/ima...screenshot3.jpg.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 7 2011, 08:46 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Sure a width for BODY works. Maybe you didn't make it wide enough. #title is positioned 755px from the left and is 292px wide which adds up to 1047px.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Nicola
post Aug 8 2011, 07:40 AM
Post #9


Advanced Member
****

Group: Members
Posts: 109
Joined: 16-February 09
Member No.: 7,824
I actually made it 1051px wide. Could you consult the html file I attached and the screenshot I linked to? Maybe I'm missing something obvious.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 8 2011, 08:56 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(Nicola @ Aug 8 2011, 02:40 PM) *

Could you consult the html file I attached and the screenshot I linked to?


I already did. I added this rule to your style sheet and the page behaved as expected.
CODE
body   { width: 1047px }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Nicola
post Aug 8 2011, 09:08 AM
Post #11


Advanced Member
****

Group: Members
Posts: 109
Joined: 16-February 09
Member No.: 7,824
I don't understand -- my stylesheet already has a rule about body width:
CODE

body {
height:100%;
background-color:#fdf5a2;
width:1051px;
}

Are you saying you replaced the 1051 with 1047 and it worked? Or that you added a duplicate body width definition and it worked? When I do either one, I get the same problem illustrated in my last screenshot.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 9 2011, 07:10 AM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
No, I just added it at the bottom of the style sheet. The CSS you posted doesn't have a width for body.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Nicola
post Aug 9 2011, 08:54 AM
Post #13


Advanced Member
****

Group: Members
Posts: 109
Joined: 16-February 09
Member No.: 7,824
I realize you wouldn't be here if you didn't want to help people, and I know how frustrating it can be to try helping people who know so much less than you do, but please stop scanning over things. It feels insulting to me, to be half-listened to, and from a practical standpoint you just end up wasting your time. Please consult the html file I attached on Aug 7 -- this is the updated html that has uses position:fixed rather than position:absolute, and that has a body height definition. Clearly, I'm doing something wrong but I don't know what and I'd like help with it, but I can't know what's wrong until someone looks at it!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 9 2011, 10:15 AM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
That also works for me. What browser(s) have you checked with? Maybe there are discrepancies. Or maybe you want something that I don't understand. The white box is fully visible but in a small window you need to scroll to see it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Nicola
post Aug 9 2011, 10:25 AM
Post #15


Advanced Member
****

Group: Members
Posts: 109
Joined: 16-February 09
Member No.: 7,824
Well, something occurred to me in the meantime and I've managed to correct part of my problem, but I'm still struggling with #title. I mean, is there some way to fix an element vertically but not horizontally? Or is there some workaround you're aware of?

I'm attaching a third html file here, the updated file that incorporates my corrections. I will no longer be working with the earlier files.

I would really appreciate your help. Thank you.

EDIT: I've just seen your latest response -- I'll go through all my browsers now and report back with the results.

EDIT AGAIN: Shoot, my link to the background image was wrong in that attachment -- I've now deleted it and attached the correct file.

This post has been edited by Nicola: Aug 9 2011, 10:30 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Nicola
post Aug 9 2011, 10:53 AM
Post #16


Advanced Member
****

Group: Members
Posts: 109
Joined: 16-February 09
Member No.: 7,824
(FYI, the server where I'm hosting my images is up and down this morning. Sorry about the added trouble.)

I'm having the same problem on my browsers.

IE 9
Chrome 13.0.782.107
FF 3.6.18
Safari 5.0.5
Opera 11.5

Here's another screenshot to illustrate the problem, so that we're clear: screenshot4.

What browser are you using?

This post has been edited by Nicola: Aug 9 2011, 10:56 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 9 2011, 11:36 AM
Post #17


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I get it now. No, if you position something a certain distance from one side of the viewport, that's where it's gonna be, no matter what. As long as you use a fixed width design, I don't see how you could work around it without creating a big gap between the content and the sidebar in large window, but maybe there is a way even if I haven't tried it.

If you could give up the fixed width it would be a whole lot easier, and you would also spare users from having to scroll each line in a small window since the text would wrap.

This won't work with all your AP borders and stuff, so ignore that they are all over the place. You'd have to do that differently. I just want to show you what happens to the text and the fixed DIV when we make these changes.

I'm using the CSS you originally posted, so no width for BODY, right? I post only the rules I've changed.

Position #title a suitable distance from the right instead of from the left.

CODE

#title {
    background-color:white;
    background-image:url('');
    background-repeat:no-repeat;
    position: fixed;
/* left:755px; */
    right: 10px;
    top:30px;
    height:151px;
    width:292px;


Remove the width altogether from #containerIn and give it a right margin at least as wide as the width of #title + its right offset (I added 10px more).


CODE
#containerIn {
/* width:700px; */
    padding:15px;
    border:0;
    margin:0;
    margin-left:16px;
    margin-right: 310px
}


See how that works for you. The content text adapts to the window width, it's always out of the way for the fixed sidebar and the lines wrap. The sidebar doesn't go out of sight because it's positioned from the right. And as said, the borders are all over.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Nicola
post Aug 9 2011, 02:52 PM
Post #18


Advanced Member
****

Group: Members
Posts: 109
Joined: 16-February 09
Member No.: 7,824
I hadn't thought of positioning by the right for some reason, so thank you for mentioning that! Your idea is interesting, but it only works well for text posts. If I post a picture, say one that's 700px wide, #title ends up overlapping it on a small browser.

I'll keep fooling around with it. I'd still be interested in hearing any other ideas you have!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 10 2011, 02:28 AM
Post #19


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
I have the impression you are trying to make this work on smaller mobile devices. If so, then you should look into Responsive design. See ALA's article: http://www.alistapart.com/articles/responsive-web-design/ .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 10 2011, 03:57 AM
Post #20


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Well, there is a penalty if you want to use large fixed widths (images or not) and everything positioned relative the browsers window. No way around that. You can't have rigid and flexible at the same time.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 03:59 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC