Jump to content

Announcing our new website

To find out the latest about our new website, visit Game Dev Unlimited

- - - - -

That HTML Shiznick

Started by Tenoukii, Jan 29 2012 02:16 PM

  • You cannot reply to this topic
11 replies to this topic

#1 Tenoukii

    Loyal Member

  • Member
  • 154 posts

Posted 29 January 2012 - 02:16 PM

Hey :)
First off, dreadfully sorry if this is in the wrong section in in some way has something wrong with it, I don't think it does/is, but just in case.

Okay! So I'm so confused with HTML. (To get this out the way, I have tried to learn it but my brain just isn't functional enough :[)
So I'm using a Tumblr theme and I want to change a small thing on it. (Small to me, but it might not be. I don't know) Here's the code:
Spoiler


Here's a picture of what it looks like:
Posted Image
(Ignore the picture of the surfacing hippo and my gross comment about it)
But yeah! What I want to do is do a little rearrangement of the sidebar on the right.
I want to center the portrait picture and the "About Me" title and have the description text below it (instead of at the side of it) IF that makes any sense? I think it does.
If anyone has any advice or anything than I thank you muchly as it would make me quite happy.
Thank you very much! :)

#2 Chief

    Publisher

  • Teacher
  • 884 posts

Posted 29 January 2012 - 07:26 PM

This is actually a problem that would be fixed with CSS. If you can't learn HTML, then you can't learn CSS... But really, HTML is the easiest thing. Its made especially for designers so its an extremely self explanitory 'language' thats super simple to learn.

#3 Marked

    I administrate

  • Admin
  • 3,351 posts

Posted 29 January 2012 - 10:36 PM

I can't open the spoiler :< (not on my own comp atm)

Try applying the following styles to those elements:
.my-title{
text-align:center;
}
.my-image{
display:block;
margin:0 auto;
}

If there are columns however, which it looks like there may be, this won't work and I'd need to see the code. It would be so much easier if you posted the link so we could look at the source code in the browser.

And yeah that comment is kinda gross. From your about me page I think I see why you made it lol

#4 Chief

    Publisher

  • Teacher
  • 884 posts

Posted 29 January 2012 - 11:30 PM

also add:

clear:both;

to those elements as well.

#5 Tenoukii

    Loyal Member

  • Member
  • 154 posts

Posted 30 January 2012 - 12:06 AM

Hmm.. I can't open the spoiler either :s confuzzled.
The section I can find for those elements is this bit:
	  <div class="section" style="min-height:130px;">
	    <h2>About me</h2>
	    <div id="avatar"></div>
	    <div class="description">{Description}</div>
	  </div>

So I'm slightly confused even more...
And Chief... I'm so useless with any kinds of code. I can do really really really simple stuff, but nothing else. I don't have the brain space to understand it.

Link: http://sunshinecapital.tumblr.com

And hah! It was the first thing I thought when I saw it. It's moved down a page or two now though XD
I have no idea what in my description gives you the indication of why I wrote it though o.o

#6 Marked

    I administrate

  • Admin
  • 3,351 posts

Posted 30 January 2012 - 12:14 AM

The contents of the spoiler are conflicting.

Ok firstly you need to search in your CSS for

#avatar {


	background: url("http://29.media.tumblr.com/avatar_b67bccb69eaa_96.png") no-repeat scroll 0 0 transparent;
	border: 1px solid #000000;
	border-radius: 5px 5px 5px 5px;
	float: left;
	height: 96px;
	margin: 4px 14px 0 0;
	width: 96px;
}
And change it to this

#avatar {


	background: url("http://29.media.tumblr.com/avatar_b67bccb69eaa_96.png") no-repeat scroll 0 0 transparent;
	border: 1px solid #000000;
	border-radius: 5px 5px 5px 5px;
	display:block;
	height: 96px;
	margin: 0 auto;
	width: 96px;
}
Then you should add a class to your h2

Quote

<h2 class='about-me'>About me</h2>
And add this to your CSS
h2.about-me{
text-align:center;
}

Try that and see what happens. I can actually edit your CSS and HTML from my browser using firebug to see the effects.
Posted Image

#7 Tenoukii

    Loyal Member

  • Member
  • 154 posts

Posted 30 January 2012 - 12:27 AM

Feel stupid asking this.. But which bit does the last bit go in? ;/
And sorry if this is a pain, but which bit would I change to center the Description text?
Thank you ^^

#8 Marked

    I administrate

  • Admin
  • 3,351 posts

Posted 30 January 2012 - 12:50 AM

The last bit? Are you referring to adding the class to the h2 tag or adding the CSS? I dont know anything about tumblr so you gotta find your CSS. Looking at your source code you havn;t got it in a separate stylesheet, looks pasted right into your html
Posted Image

So you know where you changed the #avatar thing? Just putting the .about-me class anywhere in that place will do, just so long as your defining the class. And similarly to center your description text, it already has a class applied to it, so just add this to your CSS anywhere:
.description{
text-align:center;
}

Got it?

you could pretty much just paste it all in once place
#avatar {
        background: url("http://29.media.tumblr.com/avatar_b67bccb69eaa_96.png") no-repeat scroll 0 0 transparent;
        border: 1px solid #000000;
        border-radius: 5px 5px 5px 5px;
        display:block;
        height: 96px;
        margin: 0 auto;
        width: 96px;
}
h2.about-me, .description{
text-align:center;
}

#9 Tenoukii

    Loyal Member

  • Member
  • 154 posts

Posted 30 January 2012 - 01:03 AM

Right! I have the text and picture centered, but for some reason, the About Me bit is still on the left and has lost it's boldness? I could just delete that bit and not have the heading.
It must be me doing something wrong :L

#10 Marked

    I administrate

  • Admin
  • 3,351 posts

Posted 30 January 2012 - 01:10 AM

Not necessarily. With CSS, if you have an ID (#) it will overwrite anything that a class (.) states, even if the class comes last in the CSS.

Therefore, attach an ID instead to h2 tag and see if it works then
<h2 id='about-me'>About Me</h2>
CSS:
#about-me{
font-weight:bold;
text-align:center;
}

#11 Tenoukii

    Loyal Member

  • Member
  • 154 posts

Posted 30 January 2012 - 01:18 AM

Whoop! That's done it ^^
Thank you so much!
Gosh, one of the most confusing things ever!

#12 Marked

    I administrate

  • Admin
  • 3,351 posts

Posted 30 January 2012 - 01:39 AM

No problem :) You would get used to it if you did it often enough.
Back to Programming & Webdesign


0 user(s) are reading this topic

members, guests, anonymous users

  1. RMXP Unlimited
  2. → Creativity & Design
  3. → Programming & Webdesign