Coding Ask & Answer

posted January 08

So, a lot of people have been asking if swimchick will ever do coding tutorials and the like. It’s a possibility, but there’s a lot of stuff to be worked out if we do it. In the meantime, I figured that it’d be nice to have a coding q and a type post, so if you have any coding questions, simple or complicated, post them in the comments!

Comments on this post will be left open for the next 3 days, and then closed so that I have time to sort through them. It’s unlikely that all questions will be answered, but I’ll probably pick a few that I think demonstrate some important ideas, and either leave the rest alone or post links to information for them, depending on how things work out. So ask away!

44 comments | online news updates
Read Full Story

Comments

Well, I was wondering if there could be a coding section in the forums? :( That way, we can help each other. Last time I was at the forum, there wasn’t a section for that.

But I was wondering how to make div boxes for the sidebar of my layout?

Melissa posted this January 08 * # Reply
I’m not sure what exactly you mean—do you mean something like the boxes in the sidebar on this layout?

Sumaiya posted this January 08 * # Reply
Yeah, sorta…just some of box. I’ve tried making one, but it would not let me make more than one :S

Melissa posted this January 10 * # Reply
Sorry, I only just noticed this! I’m not sure why it wouldn’t let you do that, but the standard thing I would do is make a sidebar div and then add divs inside of it for your individual blocks, like so.
```
<div id="sidebar">
<div class="block">
First block's content goes here!
</div>
<div class="block">
Second block!
</div>
... and so on
</div>
```
(For this layout, I actually didn’t bother with the containing div and just had the blocks and floated them to the right.) If you’re still having issues, I’d have to see your code specifically, and if you’re doing some sort of widgetized sidebar with WP, there might be some finer kinks to work out.
Sumaiya posted this January 11 * # Reply
This is probably a stupid ?, but Iâ€™m gonna ask anyways. How do you install a layout using FTP? I know how to use FTP (Iâ€™m using FileZilla), I just donâ€™t know how to install a layout.

Kp posted this January 08 * # Reply
(I really should wait until it’s time to put up the actual post, but… I’ll answer anyway. :P)

FTP is just for uploading files and the like; you can’t “install” a layout with it. You can upload the images, css files, and anything of that nature that you might need for the layout but that won’t automatically make a layout for you! You’ll need to write the code for the layout yourself.

If you’re talking about theme files for WordPress, that’s another story—in that case I believe you upload the theme files to the appropriate folder in your WP installation and change the theme in the admin panel. (See this page for more detail.)

Sumaiya posted this January 08 * # Reply
How do you do the bars at the top of the page and the bottom (the header and footer)

I know how to do header and footers, but I don’t know how to make the box go all the way across the page.
Is it like width: auto; ? or How?

Thanks (:

Kyle posted this January 08 * # Reply
If you want to have a header or footer go across the page and have centered content (like a nav or columns or whatever), you need to put another div around the centered stuff (usually called a wrapper div) and just give it the right background color. Divs on their own will take up 100% of the width that they can, so in order to have one span the whole page, you need to make sure it’s not inside any other divs with a width. Does that make sense?

Sumaiya posted this January 08 * # Reply
Here is a suggestion, can you put somewhere on your site a link to forum? Maybe in the forum?

irinovna posted this January 08 * # Reply
I just wanna know if there’s a simple step by step way to learn how to make a DIV or 2-column layout. I look at different sites but I can never find step by step instructions… =/

Victoria posted this January 08 * # Reply
Tutorialtastic has a pretty good basic tutorial for a 2 column div layout. I would also recommend Floatutorial for understanding how the floats used to make 2 column layouts work.

Sumaiya posted this January 08 * # Reply
Are there floats on this site? If so, where can you see them?

Victoria posted this January 08 * # Reply
Yep, we use floats for the layout. You’ll have to look at the CSS to see how they were used!

(And by floats, I mean the CSS property! They’re not an actual tag like links or divs or paragraphs are. We just use divs for the structure and in the CSS, use the float property to get the columns to line up next to each other. Again, I recommend Floatutorial for a better understanding, it’s a bit hard to explain.)

Sumaiya posted this January 08 * # Reply
Ok, thanks! I’ll bookmark the two sites. :)

Victoria posted this January 08 * # Reply
It seems like most people are confused about divs and whatnot. I know I was for the longest time. If someone made a tutorial for the site, I know that’d help a lot of people :)

Abby posted this January 09 * # Reply
HI :D
I’m not the best wheit comes to coding.But recently an error occured at my site. I use wordpress and no-one is able to comment on my site and I’m not sure why. I’ve upgraded to the newest one automatically and I’ve use two different layout codes and it still doesn’t work.
Any solutions?

Rebecca posted this January 09 * # Reply
Rebecca,
You might have a missing file within your wordpress folders.
I tried leaving a comment, and its just a 405 error that pops up.
check your files for this page:
http://becesque.info/wp/wp-comments-post.php
because that is the file that sends the information to post the comments.

Anna posted this January 09 * # Reply
I was wondering how to make a question and answer form. I know it has to deal with PHP. I don’t want to create just like a multiple answer type of question form. I want it so that you have to write a short answer. But i also want it to be like once you complete the quiz. you can’t do it again. Are you able to help?

litoburrito posted this January 10 * # Reply
Sorry, I’m not PHP fluent. I mean, I think making a php form is pretty simple, but I’m not sure how to prevent repeats. Here’s a basic PHP form example (but it doesn’t have any security measures). You might be able to combine it with a more secure mail form tutorial and see what you get!

Sumaiya posted this January 10 * # Reply
I sort of have two questions… hopefully that’s okay. If not, feel free to answer whichever one you want.

1. How do you create image links that change images when you hover over them? For instance, the Myspace / Music / Resources / Tutorials buttons at the top of http://www.rewindd.com/ or any other type of button where you have one image and then another you want to appear in the same place when you hover over it.

2. How do you create a navigation system at the top of a page (like the one on the current SwimChick layout or on http://www.randomiss-designs.com/ for instance), but have it stick there when a visitor scrolls up/down the page instead of moving up with the rest of the content.

Thanks so much, Sumaiya! Hopefully these aren’t too specific / too hard to answer. I’m slightly more curious about the first question. :]

Dani posted this January 10 * # Reply
The more questions, the merrier! There are a couple of ways to do what you said. One is by an image map and a little bit of javascript, but that’s a very outdated bit of code, so I suggest using background images instead.

There are two ways to use background images for rollovers. In both ways, you have your links set up and you give each of them an individual id so that you can style them appropriately. You’d have one background image for each link, and then you have a different background image on hover. You can either have a whole bunch of individual background images, or you can have one large background image that is composed of each of the individual images, and then you just change the position of the background for each link and on hover so that the right part shows up. The advantage to this one is that the browser has to make fewer requests because there’s just one background image as opposed to, say, 8, so I think it’s usually the recommended way. For more information, search for "css sprites."

The code might look something like this (a better practice is to have your links inside a list, but this is just for simplicity):
```
<a href=”#” id=“home”></a>
<a href=”#” id=“about”></a>

(CSS)

Method 1 (multiple background images)

#home {
background: url(individualbg.jpg);
}

a#home:hover {
background: url(individualbghover.jpg);
}

#about {
background: url(individualbg2.jpg);
}

a#about:hover {
background: url(individualbg2hover.jpg);
}

Method 2 (one background)
#home {
background: url(background.jpg) 12px 0px;
}

a#home:hover {
background: url(background.jpg) 24px 0px;
}

#menu {
background: url(background.jpg) 36px 0px;
}

a#menu:hover {
background: url(background.jpg) 48px 0px;
}
```
To position your background, the first number is the x coordinate and the second is the y coordinate, and they’ll obviously vary with your background image; I just used mine pretending each of the link backgrounds was 12px wide and all on the same row, so I just changed the x value by 12px for each link/hover image.

As for your second question: Assuming you know how to make the navigation (a tutorial is here), all you need to do is add position: fixed to the css for your containing element, in the tutorial’s case ul#navigation. On swimchick, there’s actually another div surrounding that so that the background goes across the page (see my reply to Kyle’s comment), so that’s where the css would go. This won’t work in IE 6 and below, but should be good for most other browsers.
Sumaiya posted this January 11 * # Reply
Hello Sumaiya, I was wondering, can you keep two classes in the same thing like divs or code tags?

Priyanka posted this January 11 * # Reply
I just remembered this, you know the polls you guys used here, how did you guys make it, was it by using a plug-in of some sort?

Priyanka posted this January 11 * # Reply
Yep, we used a poll plugin (pap_xpoll) for Textpattern.

As for your other question, you can have as many classes as you like on any element, but only one id. To use multiple classes, you’d just put a space between them, so something like <div class="entry notes"> would make a div that had a class of entry and a class of notes.

Sumaiya posted this January 11 * # Reply
How did you create the rounded corners in the sidebar boxes of this layout?

Anne posted this January 13 * # Reply
CSS3! :) You can also check out our css to see our particular use.

Sumaiya posted this January 13 * # Reply
Hey! I was trying to open my own website, but it’s so complicated! Maybe you could make some tutorials step by step on exactly how to make a website?! because i have never found one of those on the net yet :/

But as for coding ask & answer, i’ve coded a website, but how do i get a blogging system – like wordpress into it? (what blogging system do you use?!)

Thanks (:

Charlotte posted this January 14 * # Reply
We use Textpattern here to manage the site. As for how to get a system going, installation itself is pretty simple and is available on their sites. The next step is just to make pages or posts via the writing section, and that’s basically it. For making your own layout work, it’s a bit more detailed, but I find that Textpattern is easier for me in that regard than WP… either way, I did it by taking the basic template they come with and modifying it. It makes a lot more sense once you’ve installed it!

Sumaiya posted this January 15 * # Reply
hey i was wondering why would my website look all out of place on a mac and not on a pc like the sidebars are all scrunched together and its just not alined right its looks perfect on a pc but when i go on my mac it doesnt =( can you please help =) oh and btw when i click on ur links to the psd brushes it somes up with greek and it wont down load =( well have a fabulous day

Brittany =P

brittany posted this March 08 * # Reply
I was just wonder what font you used on your current weblyt. I am infatuated with the one on the rollover. Is it handwritten? please help and if you could also share some good fonts it would be highly appreciated. thanks

Alex posted this March 14 * # Reply
Could you please make tutorials for Photofiltre? I’m not the only one who wants this, i comment this for six other people

Lenine posted this March 17 * # Reply
How Can I Code a layout? :D
sorry but i don’t really know how and i want to know how :)

Cha posted this March 23 * # Reply
understand nothing in coding, so will gladly lean from you. the same was actually about photoshop: with your help I learned so many useful and interesting thisngs. hope the story will repeate itself:)

Mhunter posted this May 11 * # Reply
329dac <a href=“http://wrmrfyfbjett.com/”>wrmrfyfbjett</a>, [url=http://fdorfgisovie.com/]fdorfgisovie[/url], [link=http://enkfnruckrqp.com/]enkfnruckrqp[/link], http://uplpiphqzatm.com/

qohvxks posted this December 01 * # Reply
5aWzUN <a href=“http://jjbgnxtypmdl.com/”>jjbgnxtypmdl</a>, [url=http://dkhfsjxytcxs.com/]dkhfsjxytcxs[/url], [link=http://pmyxldnqcbti.com/]pmyxldnqcbti[/link], http://kuafftbgctaj.com/

mtbcbohqg posted this December 19 * # Reply
qoEI0V <a href=“http://uugkrtpwelsv.com/”>uugkrtpwelsv</a>, [url=http://ujnhvjankvqg.com/]ujnhvjankvqg[/url], [link=http://nukxmrpbumhm.com/]nukxmrpbumhm[/link], http://dovcwsgjjpoc.com/

tpbepxwqdc posted this December 19 * # Reply
C0y4m2 <a href=“http://chomfeyidfsq.com/”>chomfeyidfsq</a>, [url=http://zljbtzidxexu.com/]zljbtzidxexu[/url], [link=http://kymuqmfiiymt.com/]kymuqmfiiymt[/link], http://xdlgxpvbbofl.com/

yxfkqfz posted this January 11 * # Reply
UKJAfi <a href=“http://crdmyvkrrslc.com/”>crdmyvkrrslc</a>, [url=http://nrcvsvlndbxz.com/]nrcvsvlndbxz[/url], [link=http://dmqiwocvpduu.com/]dmqiwocvpduu[/link], http://vkkkvaarblao.com/

lkjehbbov posted this January 11 * # Reply
6ZD4ZZ <a href=“http://geccowmzjtje.com/”>geccowmzjtje</a>, [url=http://nmuplftosbjq.com/]nmuplftosbjq[/url], [link=http://bvhvbjbaczwq.com/]bvhvbjbaczwq[/link], http://prrshrhfecsz.com/

dqcwxj posted this February 16 * # Reply
yIroXR <a href=“http://rvxdefcxqbtv.com/”>rvxdefcxqbtv</a>, [url=http://fuwhergxdcxw.com/]fuwhergxdcxw[/url], [link=http://hmndsszqqqxo.com/]hmndsszqqqxo[/link], http://zmtspwlycxkg.com/

lbffgqugyzn posted this February 16 * # Reply
First I would like to appreciate you for the valuable information sharing with us. Thanks for making informative blog.

orange county IT consulting posted this April 25 * # Reply
O0czdq <a href=“http://ctetgjogwxvo.com/”>ctetgjogwxvo</a>, [url=http://wqplrlrdhkiy.com/]wqplrlrdhkiy[/url], [link=http://mrkijarqniil.com/]mrkijarqniil[/link], http://dsusbcrbgqig.com/

hiczusgmvx posted this November 10 * # Reply
GIDeUD <a href=“http://nsdldqypxbvk.com/”>nsdldqypxbvk</a>, [url=http://pxgbtwdijixu.com/]pxgbtwdijixu[/url], [link=http://lfrkrgkberoj.com/]lfrkrgkberoj[/link], http://oricginwhmfp.com/

csorgcihji posted this December 11 * # Reply
ILWUq8 <a href=“http://gkdoipuegrap.com/”>gkdoipuegrap</a>, [url=http://xytwcjegaaln.com/]xytwcjegaaln[/url], [link=http://lfdsztwkbdmc.com/]lfdsztwkbdmc[/link], http://zgyukkjhnnll.com/

ikvwfmpvh posted this December 11 * # Reply

Â« My ad in the paper I don't like short hair Â»

Coding Ask & Answer

Comments

Add Your Comment