...

View Full Version : Moving around text...



stalk3r
01-26-2012, 10:44 PM
Hello,

I'm new to CSS and i've made a little website for my band.
I wonder, how would I put text in the right bottom corner like on the picture?

The date on the picture is added in photoshop. I just wanna know how to place it there using CSS and regular text.

Thank you.

http://img638.imageshack.us/img638/3606/oitg.jpg

melloorr
01-26-2012, 10:49 PM
<p style="text-align: right;">Jan, 1st. 2012</p>

thewebguy2011
01-26-2012, 10:51 PM
is the box a fixed height?

stalk3r
01-26-2012, 10:59 PM
<p style="text-align: right;">Jan, 1st. 2012</p>

Didn't work. The text goes up about 15px from the bottom of the box.


is the box a fixed height?

Nope.

melloorr
01-26-2012, 11:05 PM
try float:right instead then

also, a link would be helpful, or atleast the html code

stalk3r
01-26-2012, 11:10 PM
<div class="leftbar">
<div class="main_post">
<table width="100%">
<td width="210px">
<h1>The website is uploaded! Stay tuned for more updates.</h1>
</td>
</table>
</div>
<div class="main_post">
<table width="100%">
<td width="200px">
<ul class="piclink">
<a href="https://www.recordunion.com/Music/Album/11640" target="_blank"><img height="200px" width="200px" src="album.jpg" /></a>
</ul>
</td>
<td width="300px">
Demo released at 1st of January, 2012. Click on the album image for more info.<br /><br />
You can also click on one of the four stores below to get instant access to our songs.<br /><br />
<ul class="piclink">
<a href="http://open.spotify.com/album/6JtKvPQVI83MT0zZleKWCL" target="_blank"><img id="piclink1" height="40px" width="40px" src="spotify_icon.png" /></a>
<a href="http://itunes.apple.com/us/album/scream-out-single/id491714832" target="_blank"><img id="piclink1" height="40px" width="40px" src="itunes_icon.png" /></a>
<a href="http://downloads.cdon.com/index.phtml?country=se&page=product&albumid=104925983" target="_blank"><img id="piclink1" height="40px" width="40px" src="cdon_icon.png" /></a>
<a href="http://www.amazon.com/gp/product/B006PWT9LS/ref=dm_sp_alb?ie=UTF8&qid=1325521575&sr=1-11" target="_blank"><img id="piclink1" height="40px" width="40px" src="amazon_icon.png" /></a>
</ul>
<p style="text-align: right;">Jan, 1st, 2012.</p>
</td>
</table>
</div>
</div>

Float:right; same thing.

melloorr
01-26-2012, 11:15 PM
Well, if it goes up 15px, have you tried

<p style="text-align: right; margin-top: 15px;">Jan, 1st, 2012.</p>

thewebguy2011
01-26-2012, 11:19 PM
deleted message i was talking rubbish

stalk3r
01-26-2012, 11:23 PM
Fixed by adding:


p {margin: 0px auto;}

to the CSS Sheet.

thewebguy2011
01-26-2012, 11:28 PM
Ok this should work.

You box must have a fixed width for this to work.

Lets say your box is 200px in width as example.

put your date like this

<div style="position:absolute;">Date Here</div>

and place this as the very last item in the <td>

Now change the code like this:

<div style="position:absolution; margin: -15px 0px 0px 0px;">Date Here</a>

Adjust the -15px until the date is at the correct position at the bottom of the box.

Now change the code again:

<div style="position:absolute; margin: -15px 0px 0px 0px; left: 170px;">Date Here</a>

The left part is the box width minus a few to keep away from right edge of the box.

You might have to add your fixed width to the TD, like <td style="width:200px;">


Hope this helps

I have added this to my blog for other people with the same question, feel free to comment on it: http://thewebsolutionprovider.com/uncategorized/how-to-place-a-div-at-the-bottom-of-another-with-css/

melloorr
01-26-2012, 11:40 PM
Ok this should work.

You box must have a fixed width for this to work.

Lets say your box is 200px in width as example.

put your date like this

<div style="position:absolute;">Date Here</div>

and place this as the very last item in the <td>

Now change the code like this:

<div style="position:absolution; margin: -15px 0px 0px 0px;">Date Here</a>

Adjust the -15px until the date is at the correct position at the bottom of the box.

Now change the code again:

<div style="position:absolute; margin: -15px 0px 0px 0px; left: 170px;">Date Here</a>

The left part is the box width minus a few to keep away from right edge of the box.

You might have to add your fixed width to the TD, like <td style="width:200px;">


Hope this helps

I have added this to my blog for other people with the same question, feel free to comment on it: http://thewebsolutionprovider.com/uncategorized/how-to-place-a-div-at-the-bottom-of-another-with-css/

If the position is absolute, why have margin to change where it goes? why not use:
<div style="position:absolute; top: 15px; left: 170px;">Date Here</a>

stalk3r
01-26-2012, 11:56 PM
Maybe u guys can help me with another problem...

Is it possible to make overflow scroll if necessary?

Like if u use a screen on 1024x768 resolution it will add a scrollbar, and if using 1920x1080 it won't?

melloorr
01-26-2012, 11:59 PM
What so if the screen size is smaller than the width of your website, then it adds a scroll bar? You can do that with a wrapper

#wrapper{
margin: 0 auto;
width: 1240px;
}

stalk3r
01-27-2012, 12:02 AM
What so if the screen size is smaller than the width of your website, then it adds a scroll bar? You can do that with a wrapper

#wrapper{
margin: 0 auto;
width: 1240px;
}

Okey, didn't get your point there.

1. Who, today, 2012, uses a screen resolution with a width smaller than 1020px?
2. You basically mean that I should make a big wrapper over the whole screen with a height of 1080px?

thewebguy2011
01-27-2012, 12:09 AM
If the position is absolute, why have margin to change where it goes? why not use:
<div style="position:absolute; top: 15px; left: 170px;">Date Here</a>

because that would position it in the wrong place. try them both

melloorr
01-27-2012, 12:16 AM
because that would position it in the wrong place. try them both

What you said will push the text UP, but he wanted the text going DOWN, and if you changed what you said to margin: 15px 0px 0px 0px; it would be exactly the same as top: 15px; if he did want it going UP, bottom: 15px; would also work :)


Okey, didn't get your point there.

1. Who, today, 2012, uses a screen resolution with a width smaller than 1020px?
2. You basically mean that I should make a big wrapper over the whole screen with a height of 1080px?
I have no idea what you are talking about. I did not mention height at all, and i also didn't mention anything about 1020px

thewebguy2011
01-27-2012, 12:22 AM
What you said will push the text UP, but he wanted the text going DOWN, and if you changed what you said to margin: 15px 0px 0px 0px; it would be exactly the same as top: 15px; if he did want it going UP, bottom: 15px; would also work :)


I have no idea what you are talking about. I did not mention height at all, and i also didn't mention anything about 1020px

No the code i created works, i have tested it already.

It positions the date below the box widht the text right under it. we then move it back up by -15px to position it as though its inside the container element. This figure is not eact. We then position it 170px from the left, so its 30px away from the right edge.

:)

melloorr
01-27-2012, 12:29 AM
No the code i created works, i have tested it already.

It positions the date below the box widht the text right under it. we then move it back up by -15px to position it as though its inside the container element. This figure is not eact. We then position it 170px from the left, so its 30px away from the right edge.

:)

I didnt say yours didn't work, I just basicly pointing out that top: 15px or even bottom: 15px would be a lot simpler

stalk3r
01-27-2012, 12:44 AM
Okey so please just give me an answer on HOW to make a Scrollbar on screens with resolutions causing overflow?

melloorr
01-27-2012, 12:54 AM
Okey so please just give me an answer on HOW to make a Scrollbar on screens with resolutions causing overflow?

I have just told you. Make a wrapper. Then, as the name might suggest, you wrap the contents of your website in it. It would go:


<body>
<div id="wrapper">
your code here
</div>
</body>
if you use the code i gave you before, it will set the width of your website to 1240px. If you want it bigger, then change it. But if the screen resolution is lower than the width you set, then will they see a scroll bar

Excavator
01-27-2012, 01:03 AM
Hello stalk3r,
Just came on the original question... not sure if you've moved on from there or what but though I'd show you an idea or two - http://nopeople.com/stalk3r/

stalk3r
01-27-2012, 01:10 AM
I have just told you. Make a wrapper. Then, as the name might suggest, you wrap the contents of your website in it. It would go:


<body>
<div id="wrapper">
your code here
</div>
</body>
if you use the code i gave you before, it will set the width of your website to 1240px. If you want it bigger, then change it. But if the screen resolution is lower than the width you set, then will they see a scroll bar

Yeah I think I understand but when you talk about width, won't that make a horizontal scrollbar?

stalk3r
01-27-2012, 01:11 AM
Hello stalk3r,
Just came on the original question... not sure if you've moved on from there or what but though I'd show you an idea or two - http://nopeople.com/stalk3r/

What was you point here? Hehe.. Little slow right now.

melloorr
01-27-2012, 01:18 AM
Yeah I think I understand but when you talk about width, won't that make a horizontal scrollbar?

Isn't that what you want? I can't see it not making a vertical scroll bar

Excavator
01-27-2012, 01:20 AM
What was you point here? Hehe.. Little slow right now.

No problem, if you've moved on to other issues, it's pulled.

stalk3r
01-27-2012, 01:21 AM
No problem, if you've moved on to other issues, it's pulled.

Uhm Okey...

Well here's the website currently:

http://www.oneinchtogo.com/

melloorr
01-27-2012, 01:24 AM
Uhm Okey...

Well here's the website currently:

http://www.oneinchtogo.com/

In your CSS file, delete
overflow: hidden
from the body { }

stalk3r
01-27-2012, 01:26 AM
In your CSS file, delete
overflow: hidden
from the body { }

Well, this adds a scrollbar for every resolution. Even 1920x1080, and there's really no need to have one.

melloorr
01-27-2012, 01:28 AM
Well, this adds a scrollbar for every resolution. Even 1920x1080, and there's really no need to have one.

Take a look at the source code from the site Excavator linked to

stalk3r
01-27-2012, 01:32 AM
Take a look at the source code from the site Excavator linked to

He removed it.

melloorr
01-27-2012, 01:39 AM
He removed it.

Wel what I said is right, you can try:
overflow: auto; but I think is is just your background causeing the problems, try removing it and see if your still have the problem

stalk3r
01-27-2012, 01:47 AM
Wel what I said is right, you can try:
overflow: auto; but I think is is just your background causeing the problems, try removing it and see if your still have the problem

Yeah. It is the background. But, how to create a similar background which won't cause this problem?

melloorr
01-27-2012, 01:49 AM
you could crop it, in a way that when the same picture is under each other, they look like the same image, if that makes sense

stalk3r
01-27-2012, 02:05 AM
you could crop it, in a way that when the same picture is under each other, they look like the same image, if that makes sense

I tried something now.

http://oneinchtogo.com/

Tell me what you think

melloorr
01-27-2012, 02:11 AM
I tried something now.

http://oneinchtogo.com/

Tell me what you think

That looks much better, a lot "cleaner"

Excavator
01-27-2012, 02:19 AM
Well, this adds a scrollbar for every resolution. Even 1920x1080, and there's really no need to have one.

If overflow is wider than the screen, there wil be an x scrollbar. In the case of http://www.oneinchtogo.com/ , the only x scroll I see is on unstyled #stream_content / .page_stream_short

The really cool thing about using overflow: auto (http://www.quirksmode.org/css/clearing.html); to clear floats is how it also show when you've messed up the box model rule (http://www.w3.org/TR/CSS2/box.html). It seems the box model is the most difficult concept for new coders to grasp, not sure why...

I can put up that demo again since seems it may still be relevant - http://nopeople.com/stalk3r/

stalk3r
01-27-2012, 02:24 AM
That looks much better, a lot "cleaner"

That's my opinion to. Therefor, I'll keep it! :)

stalk3r
01-27-2012, 02:27 AM
If overflow is wider than the screen, there wil be an x scrollbar. In the case of http://www.oneinchtogo.com/ , the only x scroll I see is on unstyled #stream_content / .page_stream_short

The really cool thing about using overflow: auto (http://www.quirksmode.org/css/clearing.html); to clear floats is how it also show when you've messed up the box model rule (http://www.w3.org/TR/CSS2/box.html). It seems the box model is the most difficult concept for new coders to grasp, not sure why...

I can put up that demo again since seems it may still be relevant - http://nopeople.com/stalk3r/

I still don't understand what point you want to get...

Is there something wrong on http://oneinchtogo.com/ right now?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum