Login

SsHady · 09.08.2016, 08:50

Hey,

So basically, I've been learning some HTML alongwith CSS. I was making an "IRC" button page so that on the website, when a player clicks the tab, it shows him a Embed "Mibbit IRC Widget". But it shows the chat widget at the most top of it, I want to basically lower the the chat widget a little bit so I can create a few buttons on the top that takes the user back to the website and some others. But I really have no idea how can I position the widget a little bit lower.
Here's my code

Код HTML:

<section>
<center><iframe width="800" height="800" scrolling="no" src="http://widget.mibbit.com/?settings=8b71c0d91bc8459f780f947ef2ad92d4&server=irc.tl&channel=%23UoS.Echo%20%23UoS"></iframe></center></section>

<html>
<body background="bgimage.jpg">
</body>
</html>

Here's a demo, how to looks like
Click Me!

I know that this forum has nothing to do with HTML or CSS, but I thought there would be a few guys who could potentially help me out!?

Thanks,

Smithy · 09.08.2016, 08:55

Simply add <br /><br /><br /> above the iFrame.

Код:

<section><br><br><br>
 
<center><iframe width="800" height="700" scrolling="no" src="http://widget.mibbit.com/?settings=8b71c0d91bc8459f780f947ef2ad92d4&amp;server=irc.tl&amp;channel=%23UoS.Echo%20%23UoS"></iframe></center></section>

SsHady · 09.08.2016, 09:08

Jesus, it worked like a charm!
Thanks alot mate!

Smithy · 09.08.2016, 09:09

No probs!

Vince · 09.08.2016, 09:17

You should know that the <center> tag has been deprecated for a while. Adding <br> for stylistic reasons is also not done. That's what CSS is for. If you're just starting to learn something then you shouldn't start with deprecated tags and lazy hacks.

Код HTML:

<section id="widget">
    <iframe width="800" height="800" scrolling="no" src="http://widget.mibbit.com/?settings=8b71c0d91bc8459f780f947ef2ad92d4&server=irc.tl&channel=%23UoS.Echo%20%23UoS"></iframe>
</section>

CSS:

Код:

#widget {
    width: 800px;
    margin: 50px auto;
}

The above is the common method to center a block element (<section>, <div>, <p> etc.) within its parent container (body in this case).

You can add another section with buttons above the current section.

klap · 09.08.2016, 11:13

<section> tag is HTML5 , so FUCK IE8

~~Luicy.~~ · 09.08.2016, 11:56

Quote:

Originally Posted by klap

<section> tag is HTML5 , so FUCK IE8

Waow..

Login
Username:
Password:	Lost Password?
	Remember me