PDA

View Full Version : HTML CSS Formating



korki696
Oct 5th, 2009, 01:59 AM
Hey all,
I have some php that im am echoing and i need to put some formatting on it. Right now the code im using is this:

<div class="additional_info ie6fix" id='twitterbox'>
<?php echo $feed[0]; ?>
<h2><?php echo $feed[1]; ?></h2>
<h4><?php echo $feed[2]; ?></h4>
</div>
Lets say the feed[1] is "Hello" and feed[2] is "Mom". The way it is outputting right now is:
Hello
Mom

I want it to output like this: Hello Mom. on one line.

I need feed[2] to be smaller font than feed[1]. I have tried using float:left but it still keeps it on 2 lines. I tried span which does work but the alignment is off then. Any ideas?

Thanks

Excavator
Oct 5th, 2009, 02:14 AM
Hello korki696,
Not sure at all if this will work with php but try this:


h2 {
float: left;
}
h4 {
float: left;
clear: left;
}

korki696
Oct 5th, 2009, 04:55 AM
Hey I tried the float:left and clear:left and still no luck. Any other ideas?

Thanks

Scriptet
Oct 5th, 2009, 06:26 PM
All you need is

h2{
float: left;
}

using clear:left, you are just clearing the float you've added, so it shouldn't be there!

Remember only use heading tags if the text really is a heading..

korki696
Oct 5th, 2009, 06:33 PM
The float left doesnt work. Also All I need is feed[2] to be smaller font. if there is another way to do this please let me know.
Thanks

Scriptet
Oct 5th, 2009, 06:37 PM
Yea for sure, if it's not a heading use a SPAN like:


<div class="additional_info ie6fix" id='twitterbox'>
<?php echo $feed[0]; ?>
<span class="large"><?php echo $feed[1]; ?></span>
<span class="small"><?php echo $feed[2]; ?></span>
</div>

CSS:


.large { font-size: 22px; }
.small { font-size: 16px; }


Change the font-sizes to whatever you deem appropriate :)

korki696
Oct 5th, 2009, 08:40 PM
The problem with span is that the alignment is now off.
http://jpmusicgroup.com/
That is the site I am working on and specifically the twitter box. feed[1] is the tweet and feed[2] is going to be the time. What happens with span is that it covers the bird.

Any other ideas?

Thanks

Scriptet
Oct 5th, 2009, 09:07 PM
With a quick look looks like the bird is positioned absolutley hence the overlapping.

Add this in the addition to the above:

.large { padding-left: 104px; }

korki696
Oct 5th, 2009, 09:44 PM
Hey thanks. That works but if there is more than one line it doesnt pad the second line.

Thanks

Scriptet
Oct 5th, 2009, 10:03 PM
What part on your page are we talking about here so I can have a look,

the bit with the blue bird and the text which says @bbreal etc..

korki696
Oct 5th, 2009, 10:06 PM
Yeah. Thats the part and at the end it will have how long ago it was posted. I am working locally right now. With the padding the first line is perfect but the next line doesnt have it anymore.

Thanks again

Scriptet
Oct 5th, 2009, 10:11 PM
Well you could do something like this:



<div class="additional_info ie6fix" id='twitterbox'>
<?php echo $feed[0]; ?>
<h2><?php echo $feed[1]; ?><span><?php echo $feed[2]; ?></span></h2>

</div>


With the CSS:



#twitterbox h2 span { font-size:12px; }


That's gotta work..

korki696
Oct 5th, 2009, 10:21 PM
Hey I am new to CSS, but I already have #twitter h2{} in the CSS. I added span to that and the font-size, and the spaces are the size of tabs now.

Sorry this is taking so long and thanks for helping me.

Scriptet
Oct 5th, 2009, 10:45 PM
I don't understand why with your original code:



<div class="additional_info ie6fix" id='twitterbox'>
<?php echo $feed[0]; ?>
<h2><?php echo $feed[1]; ?></h2>
<h4><?php echo $feed[2]; ?></h4>
</div>


If you float the h2 to the left, the h4 should be appearing next to it?



#twitterbox h2{ float:left; }


or even



#twitterbox h2{ float:left; }
#twitterbox h4{ float:left; }

korki696
Oct 6th, 2009, 02:22 AM
Yeah neither of that changes it. its always on two lines. Theres gotta be a way to make this work.

Thanks