Scroll - Page 2

Jun 10th, 2013 at 06:06 PM
User 271657 Photo

paintbrush
Ambassador
3,816 posts

You could set your scroll image as a background to the div that holds the text.
Here's a bunch of info about what you can do with background images:
http://www.css3.info/preview/background-size/

Since the site itself isn't responsive, it won't do any good to try and make just that one element responsive. Check out what happens when you give your image 100% width and auto height. :o

Another book recommendation:
http://www.sitepoint.com/books/htmlcss1/
and a free download:
http://it-ebooks.info/book/1549/

Responsive design will be quite the uphill battle if you don't have a good understanding of CSS3/HTML5. A few hours study will will go a long way. :D
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
Jun 10th, 2013 at 07:11 PM
User 2924428 Photo

bough
Registered User
1,718 posts

Hello Paintbrush ;) Well I am just trying to get the text onto the scroll, I took a look at cssinfo and it was stating that a backround can have multiple images, but i'm just trying to see if I can get the text to read over the scroll.. is there a way to float all text? I'll just hover it over the image..
Jun 10th, 2013 at 07:52 PM
User 271657 Photo

paintbrush
Ambassador
3,816 posts

The scroll can't be a separate object, it needs to be a background behind the text. :cool:
Example:
#scroll {
width: 600px;
height: 900px;
text-align: center;
background-image: url( img/scroll.png ); ***
background-repeat: no-repeat;
}

Either set your scroll image's width/height or use one of the background properties (contain...).
Make sure your div is large enough to hold the image and the text.

Now, you would create a div... <div id="scroll">paragraphs go here</div>
You can also give the paragraphs some styles as needed.
p.scroll {
>>put padding, font family, color, size etc. here<<
}
<p class="scroll">text here</p>
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
Jun 10th, 2013 at 08:50 PM
User 2924428 Photo

bough
Registered User
1,718 posts

Oh wow, thank you paintbrush, i'm going to have to give that a try right now!
Jun 10th, 2013 at 08:58 PM
User 2924428 Photo

bough
Registered User
1,718 posts

It works! Now I just need to find out how to create a way to get the font to fit inside the scroll ;) Is that within the padding ?
Jun 10th, 2013 at 09:12 PM
User 271657 Photo

paintbrush
Ambassador
3,816 posts

Yes, you'll need to play with some padding to get some space around your text.
Carry on.......:D
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
Jun 11th, 2013 at 05:57 AM
User 122279 Photo

Inger
Senior Advisor
14,625 posts
Online Now

I see that a lot has been achieved since I went to bed last night. :)

The scroll and its contents are slightly off center, so you have to give the class index the same width as the 'scroll' div:

.index {
margin:20px auto 10px;
display: block;
width: 835px;
height:600px;
}

#scroll {
width: 835px;
height: 1087px;
text-align: center;
background-image: url(scroll.png);
background-repeat: no-repeat;
margin: auto;

}

#scroll p {
width: 700px;
padding: 20px;
margin: 50px auto 20px;
test-align: center;
}


Those three wee stars can be removed. They were probably put in there to make you aware of the background image.

I have suggested a p element inside #scroll for the text.

Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jun 11th, 2013 at 06:06 AM
User 122279 Photo

Inger
Senior Advisor
14,625 posts
Online Now

And you will see that your page has a horizontal scrollbar. That is because of the negative left and right positioning of the two stripes. The container divs for those boxes are much too wide and too short, so you need to adjust them to match the size of the stripes. Here is my suggestion:

#img1
{
position: absolute;
top: 0px;
right: 20px;
height: 500px;
width: 108px;
}
#img2
{
position: absolute;
bottom: 0px;
left: 20px;
width: 108px;
height: 500px;
}


The style sheet contains a lot of redundant code which should be removed to shorten the loading time. You don't need:
#header_left
#header:right
#sheet
#img4
#img5
.center

These can be deleted from the style sheet.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jun 11th, 2013 at 10:52 AM
User 2924428 Photo

bough
Registered User
1,718 posts

Thank you so much ladies!! I really appreciate you helping me! I'm excited to see that my scroll works perfectly with text inside, and i'll have to remember the backround part of this lesson as well as the scroll for paragraph's :) I didn't know that you could make two backrounds within one page of html.. but I suppose everyday I learn something new ;)
Jun 11th, 2013 at 12:18 PM
User 122279 Photo

Inger
Senior Advisor
14,625 posts
Online Now

Looks good now, Matt. :) Maybe if you typed an extra <br> before each text heading, it would look a bit more spread out.

Another thing: I have seen on various pages where they are showing new updates of something, that the newest one always comes above the older ones, so that it is visible for any clients right when they open the page. Maybe an idea?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.