Page 1 of 1

CSS help needed please

PostPosted: Tue Aug 09, 2011 9:39 pm
by Big Benn
I'm trying to build a web site for my bird photos using CSS.

It's not directly related to SP, but I have a similar issue to that below to overcome with my hill walking web site which needs updating to cope with modern sized screens etc.

Whilst I've started on three pages, it is the Home page I want to get right, and then work on the others, copying the CSS styles where appropriate.

Home page is at Kentyeti.co.uk

I cannot find how to place a transparent, scrollable box under the main text in the white area I have left for it in the center of the background iamage, and where I currently have the small Index data in a Table. I want to put the Index data in such a box.

For the present I'm keeping the CSS stuff on the Home page as it helps me, and makes it easier for people to give me online help!

I do need very simple CSS coding! My website wil be very simple, (like me!), but in the end that wil make it so much easier for me to work with.

Any help very gratefully received.

Re: CSS help needed please

PostPosted: Tue Aug 09, 2011 10:05 pm
by Josh Lewis
So why does this box have to be scrollable? Well not sure if this will help, but is this something along the lines of what you are looking for?

http://www.w3schools.com/Css/tryit.asp? ... ansparency

Re: CSS help needed please

PostPosted: Tue Aug 09, 2011 10:33 pm
by Big Benn
Josh Lewis wrote:So why does this box have to be scrollable? Well not sure if this will help, but is this something along the lines of what you are looking for?

http://www.w3schools.com/Css/tryit.asp? ... ansparency

Thanks Josh. I had found that as I use WWW3C a lot!

I need it to be scrollable up and down as the Index will get too big to fit in the small area I have for it.

I can make a scrollable box ok. But I can't get it to position dead center on the screen so it just fits into the white area I have made for it. It always goes over to the left of the screen no matter what position instructions I use.

Re: CSS help needed please

PostPosted: Tue Aug 09, 2011 11:07 pm
by Josh Lewis
Do you mind providing me your style sheet? Also it seems as though the box is a bit wider than it has to be, when you scroll over to the right you don't actually get more text. Also did you use the absolute positioning property? Here is a quick read on it:
http://www.w3schools.com/cssref/pr_class_position.asp

Now I am by no means a css professional and been recently been getting into it, but I do know somethings. :wink:

Perhaps I'm just picky when it comes to saving myself work, but I always prefer cms's or something to run the software by rather than just using raw html and css for my website. This way you would not have to do all the work and say that a piece of writing was recently updated, it would do it automatically. But you would have to re-do your site if you did this approach. :?

Re: CSS help needed please

PostPosted: Wed Aug 10, 2011 2:00 am
by phlipdascrip
You can achieve what you are looking for much easier and cleaner. First remove the white box from the background image, then:

Code: Select all
<!DOCTYPE html>
<html>
<head>
   <style type="text/css" media="screen">
   body {
      background:url(http://www.kentyeti.co.uk/background.jpg) white center center no-repeat fixed;
      padding:0px;
   }
   div.content {
      width:580px;
      margin:20px auto;
      background-color:white;
      padding:15px;
   }
   </style>
</head>
<body>
   <div class="content">
      all content goes here
   </div>
</body>
</html>

Now the white box will only be as large as it needs to be and will expand if the content is longer. When you scroll, the background image stays where it is because its attachment is set to "fixed".

If you still need a scrollable div after all:

Code: Select all
<!DOCTYPE html>
<html>
<head>
   <style type="text/css" media="screen">
   body {
      background:url(http://www.kentyeti.co.uk/background.jpg) white center top no-repeat fixed;
      padding:0px;
   }
   div.content {
      width:580px;
      margin:20px auto;
      background-color:white;
      padding:15px;
   }
   div.my-scrollable-div {
      height:100px;
      overflow:auto;
      border:1px dotted red;
   }
   </style>
</head>
<body>
   <div class="content">
      all content goes here
      
      <div class="my-scrollable-div">
         <p>test</p>
         <p>test</p>
         <p>test</p>
         <p>test</p>
         <p>test</p>
         <p>test</p>
      </div>
      
   </div>
</body>
</html>


Basically all elements initially have a transparent background. If you need to overwrite an inherited background and set a transparent background:
Code: Select all
background-color:transparent;

Re: CSS help needed please

PostPosted: Wed Aug 10, 2011 2:57 pm
by Big Benn
Very many thanks for the help guys.

I've been out and only just got in, so it will be a few hours until I start using the above. But I will report back here as to how I get on.

Cheers,

Bryan

Re: CSS help needed please

PostPosted: Wed Aug 10, 2011 10:18 pm
by Big Benn
phlipdascrip wrote:You can achieve what you are looking for much easier and cleaner. First remove the white box from the background image, then:

Code: Select all
<!DOCTYPE html>
<html>
<head>
   <style type="text/css" media="screen">
   body {
      background:url(http://www.kentyeti.co.uk/background.jpg) white center center no-repeat fixed;
      padding:0px;
   }
   div.content {
      width:580px;
      margin:20px auto;
      background-color:white;
      padding:15px;
   }
   </style>
</head>
<body>
   <div class="content">
      all content goes here
   </div>
</body>
</html>

Now the white box will only be as large as it needs to be and will expand if the content is longer. When you scroll, the background image stays where it is because its attachment is set to "fixed".

If you still need a scrollable div after all:

Code: Select all
<!DOCTYPE html>
<html>
<head>
   <style type="text/css" media="screen">
   body {
      background:url(http://www.kentyeti.co.uk/background.jpg) white center top no-repeat fixed;
      padding:0px;
   }
   div.content {
      width:580px;
      margin:20px auto;
      background-color:white;
      padding:15px;
   }
   div.my-scrollable-div {
      height:100px;
      overflow:auto;
      border:1px dotted red;
   }
   </style>
</head>
<body>
   <div class="content">
      all content goes here
      
      <div class="my-scrollable-div">
         <p>test</p>
         <p>test</p>
         <p>test</p>
         <p>test</p>
         <p>test</p>
         <p>test</p>
      </div>
      
   </div>
</body>
</html>


Basically all elements initially have a transparent background. If you need to overwrite an inherited background and set a transparent background:
Code: Select all
background-color:transparent;

I do appreciate what you've done there for me.

And I'm sure it must be something I'm still doing wrong. I do get the background in center screen using that code. But the box with the content stubbornly stays on the left hand side of the screen!

I've not uploaded the revised index page to the server I use yet. But have copied the first table of CSS code you wrote. And have not yet added the various bits I need for color and size yet.

Not sure where to go from here. The idea of having the content box expand with what was in it did seem such a great way to proceed.

Re: CSS help needed please

PostPosted: Wed Aug 10, 2011 11:20 pm
by phlipdascrip
The code I posted works only in itself, the CSS won't do much to your existing HTML; Copy the whole code from <!DOCTYPE html><html> until </html>, paste it into your text editor and save it as an HTML file, then open the file in a browser. I hope you're not using an old version of Internet Explorer?

Re: CSS help needed please

PostPosted: Thu Aug 11, 2011 11:24 am
by Big Benn
Just downloaded IE8 and no change.

But in any case I believe I am using the correct Doctype declaration from W3C to cope with IE anomolies.

GOOGLING the subject I am not alone with this issue.

One solution, clumsy and over-heavy, is to open a table and put the box, (scrollable or otherwise), inside a cell, (ie. inside ,<td>).

I've done that and it works.

Not ideal but if that is the only solution I'll have to stick with it and develop the bird photo site, and my hiking site along those lines.

At least I've got a scrollable box now!

Cheers,

Bryan

Re: CSS help needed please

PostPosted: Thu Aug 11, 2011 1:32 pm
by phlipdascrip
I don't have IE8 handy to test, but maybe wrapping everything in <center> does the trick for legacy browsers..?

Code: Select all
<!DOCTYPE html>
<html>
<head>
   <style type="text/css" media="screen">
   body {
      background:url(http://www.kentyeti.co.uk/background.jpg) white center top no-repeat fixed;
      padding:0px;
   }
   div.content {
      width:580px;
      margin:20px auto;
      text-align:left;
      background-color:white;
      padding:15px;
   }
   div.my-scrollable-div {
      height:100px;
      overflow:auto;
      border:1px dotted red;
   }
   </style>
</head>
<body>
<center>
   <div class="content">
      all content goes here
      
      <div class="my-scrollable-div">
         <p>test</p>
         <p>test</p>
         <p>test</p>
         <p>test</p>
         <p>test</p>
         <p>test</p>
      </div>
      
   </div>
</center>
</body>
</html>


PS. Do yourself a favor and get Chrome or Firefox!

Re: CSS help needed please

PostPosted: Thu Aug 11, 2011 8:25 pm
by Big Benn
Great! I'm getting there. Many thanks indeed.

Now onto the next stages................ LOL!

Getting a different browser won't help as I like my web sites to be readable by a wide variety of browsers. But I will download a few more to test each page on.

Thanks again,

Bryan

Re: CSS help needed please

PostPosted: Thu Aug 11, 2011 9:12 pm
by phlipdascrip
Ya I just meant switching the browser you primarily use. Do you know the web developer toolbar? Really handy for web dev and available for Chrome and Firefox only: http://chrispederick.com/work/web-developer/

Re: CSS help needed please

PostPosted: Thu Aug 11, 2011 10:05 pm
by Big Benn
phlipdascrip wrote:Ya I just meant switching the browser you primarily use. Do you know the web developer toolbar? Really handy for web dev and available for Chrome and Firefox only: http://chrispederick.com/work/web-developer/

OK. I'll check that out.

I have, err, done away with the scrollable box that seemed to horrify Josh! And am sorting out something a bit better than that for the Index. LOL.

http://www.kentyeti.co.uk/

Needs a bit more work. As does the Owl Index page now.

Cheers,

Bryan

Re: CSS help needed please

PostPosted: Fri Aug 12, 2011 1:03 am
by phlipdascrip
Looking good! Now on to some fine tuning :)