CSS coding question? *complete noob*

[~Xandria]

Alright. So I'm going to attempt to ask my question in the least confusing way possible. Please bare with me as I am completely new to this but I'm determined to make my user-look-up as spiffy as possible with my very limited knowledge. :P

 

I'm currently using a pre-made look-up from Zepha's premades (BEST pre-made userlookups, hands down btw :3!) AND was curious if it was possible to add one of those scrolling boxes to my page on my about me section. I somehow wanted to have it where text of a brief about me was located on the left hand side of the about me and then have a scrolling box on the right side where I could put "newest, wanted and proud of avi's" goals, links, among other things. I know theres a way to do this but figuring out how to in CSS is confusing me. :worried:

 

Also, I'm trying to figure out how to change my font size and center my text in an exsisting CSS code. The current code is as follows -

 

<p align="justify"><span style="font-family: Verdana; color: #FFFFFF;"> TEXT HERE </span></p>

 

I want to be able to center and change the size of that text. I tried adding it in the only way I know how (what I use to consider very easy during my myspace days, but I guess it has since changed.) :P By using <font size="number here"><center>TEXT HERE<font></center>

 

I know my method is out-dated. lol. Idk why this is so hard. ;) If you know the answer and are able to give me the code by adding it in for me I would really appreciate it! When someone just gives me the code to insert myself I never know where to put it. Yes, I'm THAT bad at this. :ohno:

 

- If I made that confusing and you need me to clarify, please just ask. Thank you so much to anyone who can help me out! :wub_anim:

[karmacow]

I'm no css wiz, but perhaps it would work if you wrap the tags around the text directly? I don't know, maybe it'll work :P

[The Bandit]

It's not surprising you're confused! The code you pasted in is actually a mixture of two different programming languages, HTML and CSS.

 

HTML is the one you remember from your myspace days, it uses tags in pointy brackets like this: <font size=2 color=red>hello</font>

 

The <p align="justify"> is HTML - to centre something just type 'center' instead of 'justify'. i.e. <p align="center">

 

The <span style> bit means what's coming next is CSS. People often use CSS these days instead, or as well as HTML. CSS uses colons and semi-colons and { } brackets.

 

To change the size you need to add a 'font-size' tag in, like this:

 

<p align="center"><span style="font-family: Verdana; color: #FFFFFF; font-size: 12pt;"> TEXT HERE </span></p>

 

The '12pt' bit is basically the same as a font size in Microsoft Word, so you could use 14pt or 10pt instead. You could also use font-size: small; or font-size: medium; as well.

 

Hope this makes sense!

 

The scrolling box thing sounds a lot more complicated. If I want something like that I generally find one someone else has done and adapt it. What exactly do you mean by a scrolling box? Do you mean a box that stays in the same place as you scroll up and down?

[~Xandria]

It's not surprising you're confused! The code you pasted in is actually a mixture of two different programming languages, HTML and CSS.

 

HTML is the one you remember from your myspace days, it uses tags in pointy brackets like this: <font size=2 color=red>hello</font>

 

The <p align="justify"> is HTML - to centre something just type 'center' instead of 'justify'. i.e. <p align="center">

 

The <span style> bit means what's coming next is CSS. People often use CSS these days instead, or as well as HTML. CSS uses colons and semi-colons and { } brackets.

 

To change the size you need to add a 'font-size' tag in, like this:

 

<p align="center"><span style="font-family: Verdana; color: #FFFFFF; font-size: 12pt;"> TEXT HERE </span></p>

 

The '12pt' bit is basically the same as a font size in Microsoft Word, so you could use 14pt or 10pt instead. You could also use font-size: small; or font-size: medium; as well.

 

Hope this makes sense!

 

The scrolling box thing sounds a lot more complicated. If I want something like that I generally find one someone else has done and adapt it. What exactly do you mean by a scrolling box? Do you mean a box that stays in the same place as you scroll up and down?

 

You're a life saver! I finally did figure it out... and I was able to use a "scrolling box" generator that I found searching google, so that made things a lot easier. Now I just have one more question. If you take a quick peek at my user look-up it'll probably be easier to answer. I was wanting to put a picture in the big blank space there, so.... I have to somehow merge the image over there. lol. Any ideas on how to go about this? If you're not sure that's okay, you've already been a huge help and I really appreciate it!

 

Thank you!

[The Bandit]

Now I just have one more question. If you take a quick peek at my user look-up it'll probably be easier to answer. I was wanting to put a picture in the big blank space there, so.... I have to somehow merge the image over there. lol. Any ideas on how to go about this?

 

There are lots of CSS help sites out there which can probably explain it better than I can, e.g.

 

http://www.w3schools.com/css/css_positioning.asp

 

http://www.html.net/tutorials/css/lesson14.php

 

I think it's absolute positioning you want, rather than fixed or relative.

 

Basically you put something like:

position:absolute;

top: 100px;

left: 200px;

which would place the image 100 pixels from the top and 200 pixels from the left-hand side. It's probably just a matter of experimenting with different numbers until you get it where you want!

 

However, I'm not a real expert on CSS, so this may not be quite right - if anyone else knows different do correct me!

[Xepha]

All answers in one post :

 

<style>
#myscrollbox {
width : 450px;
height : 200px;
overflow: auto;
background-color: #333333;
color: white;
border: 3px solid white;
font-size: 15px;
font-family: verdana;
}
.imageleft {
float: left;
margin: 10px 10px 10px 10px;
padding: 5px;
border: 1px solid red;
}
.mycenter {
text-align: center;
}
</style>
<img class="imageleft" src="https://images.neopets.com/new_shopkeepers/900.gif" />
<div id="myscrollbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id risus ante. Integer pretium tellus ac turpis interdum sed venenatis sapien porttitor. Nam tincidunt tincidunt blandit. Mauris accumsan aliquet tempus. Vestibulum tempor faucibus vestibulum. Nam auctor, orci et tincidunt malesuada, leo neque mattis mi, sit amet viverra velit sem et mi. In hac habitasse platea dictumst. Duis tellus magna, dictum sed hendrerit nec, fringilla sed arcu. Phasellus ullamcorper turpis nec massa tincidunt suscipit at at tellus. Morbi eget ultricies tellus. Curabitur lectus ipsum, feugiat at viverra id, commodo faucibus nunc. Pellentesque est ipsum, imperdiet nec interdum in, laoreet at mi. Aliquam sit amet felis libero, ac fringilla nisi. Suspendisse tempus, nisl ac condimentum volutpat, justo tellus malesuada turpis, in sollicitudin eros nisi in risus.
Proin accumsan mi sollicitudin magna tempus dignissim. Phasellus ullamcorper, erat at faucibus ornare, lacus elit sagittis ligula, vitae pellentesque lorem dui nec velit. Morbi non augue odio, id venenatis neque. Quisque luctus, odio sit amet ornare ullamcorper, nibh nisl luctus purus, eget laoreet lectus tellus volutpat libero. Nulla nisi augue, fermentum vitae fermentum nec, venenatis eget lectus. Maecenas dui diam, accumsan at auctor nec, tempus et enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis enim neque, consequat a suscipit vel, malesuada nec libero. Suspendisse et est id lorem tristique varius. Etiam ut metus ipsum, non volutpat leo. Donec lacinia ipsum vel sapien ullamcorper ac rhoncus velit molestie. Aenean quis lectus ac urna posuere rutrum at sit amet risus. Praesent non augue a elit tristique commodo in eu urna. Suspendisse auctor quam a risus lobortis placerat. Aenean iaculis lacus et tellus elementum sodales. Pellentesque ultrices egestas condimentum.
Aliquam sit amet sem neque. Aliquam eget turpis neque. Aenean non diam facilisis leo luctus faucibus. Sed diam est, malesuada non vestibulum non, imperdiet id orci. Quisque tincidunt nisl a elit facilisis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec orci vel massa posuere pulvinar. In sit amet sapien odio, scelerisque consectetur arcu. Fusce lacus turpis, egestas at posuere vitae, tristique et velit. Aliquam ac arcu eu turpis varius condimentum. Praesent urna dolor, faucibus eu eleifend nec, imperdiet mollis leo. Suspendisse est diam, rutrum in vehicula sit amet, hendrerit non tortor.
</div>
<p class="mycenter">This sentence is centered! YAYAYAYAYAYAY!</p>

 

 

Things you want to know!

 

When a CSS selector starts with "#", you will be using id in HTML to assign that style to it.

When a CSS selector stars with a ".", you will be using class in HTML to assign that style to it.

 

ID is preferred when that style will only be applied once.

Class is preferred when that style could be applied multiple times.

 

I always use the same code to center things. It has become TDN's standard too :D Very simple. One tiny CSS that we apply over and over, always on a p tag that wraps the element we want to center. So it's good to center paragraphes and images.

 

And if I understood correctly, you want to float an image at the left of your box. So rather than floating the box right, I applied that to an image and added proper margin to it. Whenever you see something like 10px 10px 10px 10px it corresponds to top, right, bottom and left. Always in that order. So if you want to increase the left margin (the blank space between 2 elements), you would change the last 10. Sometimes you will see just 1 value after margin or after padding. That means all the sides are equal. And if you only see 2 values, it means top and bottom are the same, right and left are the same.

 

If you want to center the entire mytextbox, you can apply text-align:center to its style directly too :P And skip applying it to each p.