Welcome to SP!  -
Areas & RangesMountains & RocksRoutesImagesArticlesTrip ReportsGearOtherPeoplePlans & PartnersWhat's NewForum

CSS help needed please

Get HTML help, style input, and feedback on your pages from other SP members.
 

CSS help needed please

Postby Big Benn » Tue Aug 09, 2011 9:39 pm

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.
Posting photos of curvy Bavarian Serving Wenches wearing low cut dirndls since time began.
User Avatar
Big Benn

 
Posts: 6589
Joined: Sat Oct 16, 2004 4:50 am
Location: European, United Kingdom
Thanked: 502 times in 316 posts

Re: CSS help needed please

Postby Josh Lewis » Tue Aug 09, 2011 10:05 pm

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
User Avatar
Josh Lewis

 
Posts: 2456
Joined: Thu Jan 06, 2011 11:12 pm
Location: Lynnwood, Washington, The Cloudiest Place on Earth, United States
Thanked: 519 times in 341 posts

Re: CSS help needed please

Postby Big Benn » Tue Aug 09, 2011 10:33 pm

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.
Posting photos of curvy Bavarian Serving Wenches wearing low cut dirndls since time began.
User Avatar
Big Benn

 
Posts: 6589
Joined: Sat Oct 16, 2004 4:50 am
Location: European, United Kingdom
Thanked: 502 times in 316 posts

Re: CSS help needed please

Postby Josh Lewis » Tue Aug 09, 2011 11:07 pm

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. :?
User Avatar
Josh Lewis

 
Posts: 2456
Joined: Thu Jan 06, 2011 11:12 pm
Location: Lynnwood, Washington, The Cloudiest Place on Earth, United States
Thanked: 519 times in 341 posts

Re: CSS help needed please

Postby phlipdascrip » Wed Aug 10, 2011 2:00 am

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;
User Avatar
phlipdascrip

 
Posts: 221
Joined: Tue May 05, 2009 5:13 pm
Location: Vancouver, BC, Canada
Thanked: 23 times in 16 posts

Re: CSS help needed please

Postby Big Benn » Wed Aug 10, 2011 2:57 pm

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
Posting photos of curvy Bavarian Serving Wenches wearing low cut dirndls since time began.
User Avatar
Big Benn

 
Posts: 6589
Joined: Sat Oct 16, 2004 4:50 am
Location: European, United Kingdom
Thanked: 502 times in 316 posts

Re: CSS help needed please

Postby Big Benn » Wed Aug 10, 2011 10:18 pm

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.
Posting photos of curvy Bavarian Serving Wenches wearing low cut dirndls since time began.
User Avatar
Big Benn

 
Posts: 6589
Joined: Sat Oct 16, 2004 4:50 am
Location: European, United Kingdom
Thanked: 502 times in 316 posts

Re: CSS help needed please

Postby phlipdascrip » Wed Aug 10, 2011 11:20 pm

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?
User Avatar
phlipdascrip

 
Posts: 221
Joined: Tue May 05, 2009 5:13 pm
Location: Vancouver, BC, Canada
Thanked: 23 times in 16 posts

Re: CSS help needed please

Postby Big Benn » Thu Aug 11, 2011 11:24 am

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
Posting photos of curvy Bavarian Serving Wenches wearing low cut dirndls since time began.
User Avatar
Big Benn

 
Posts: 6589
Joined: Sat Oct 16, 2004 4:50 am
Location: European, United Kingdom
Thanked: 502 times in 316 posts

Re: CSS help needed please

Postby phlipdascrip » Thu Aug 11, 2011 1:32 pm

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!
User Avatar
phlipdascrip

 
Posts: 221
Joined: Tue May 05, 2009 5:13 pm
Location: Vancouver, BC, Canada
Thanked: 23 times in 16 posts

Re: CSS help needed please

Postby Big Benn » Thu Aug 11, 2011 8:25 pm

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
Posting photos of curvy Bavarian Serving Wenches wearing low cut dirndls since time began.
User Avatar
Big Benn

 
Posts: 6589
Joined: Sat Oct 16, 2004 4:50 am
Location: European, United Kingdom
Thanked: 502 times in 316 posts

Re: CSS help needed please

Postby phlipdascrip » Thu Aug 11, 2011 9:12 pm

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/
User Avatar
phlipdascrip

 
Posts: 221
Joined: Tue May 05, 2009 5:13 pm
Location: Vancouver, BC, Canada
Thanked: 23 times in 16 posts

Re: CSS help needed please

Postby Big Benn » Thu Aug 11, 2011 10:05 pm

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
Posting photos of curvy Bavarian Serving Wenches wearing low cut dirndls since time began.
User Avatar
Big Benn

 
Posts: 6589
Joined: Sat Oct 16, 2004 4:50 am
Location: European, United Kingdom
Thanked: 502 times in 316 posts

Re: CSS help needed please

Postby phlipdascrip » Fri Aug 12, 2011 1:03 am

Looking good! Now on to some fine tuning :)
User Avatar
phlipdascrip

 
Posts: 221
Joined: Tue May 05, 2009 5:13 pm
Location: Vancouver, BC, Canada
Thanked: 23 times in 16 posts


Return to Page Help

 


  • Related topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: No registered users and 0 guests

© 2006-2013 SummitPost.org. All Rights Reserved.