Jump to content
SkatePerception
jkoroscil

Website Design Netjiot

Recommended Posts

i feel like this thread is much needed. i'm just starting to try and design my own website, and i can say i'll have many questions to ask, so why not just keep them in one thread?

 

to start it off, i bought a domain name off 1and1, i created my index.html and style.css in dreamweaver, but now i don't know my next step to getting it all into my domain name?

 

new question, can someone re write my code so my website is centered?

http://jayjoob.com/

 

and im sure you can all just view source so i dont have to post my whole html in here

 

thanks

  • Like 5

Share this post


Link to post
Share on other sites

first of all you need a separate css file rather than putting it into the code itself. i didn't do that, but i did change it so its centered

<html>
<head>
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#000000">
<meta name="color:Content Background" content="#000000">
<meta name="color:Title" content="#eeeeee">
<meta name="color:Description" content="#777">
<meta name="color:Nav Links" content="#44A3E2">
<meta name="color:Date" content="#ccc">
<meta name="color:Post Title" content="#444">
<meta name="color:Text" content="#555">
<meta name="color:Inline Link" content="#111">
<meta name="color:Quote" content="#444">
<meta name="color:Quote Source" content="#666">
<meta name="color:Link Post" content="#666">
<meta name="color:Conversation Background 1" content="#f4f4f4">
<meta name="color:Conversation Background 2" content="#e8e8e8">
<meta name="color:Conversation Border" content="#555">
<meta name="color:Conversation Text" content="#000">
<meta name="color:Caption" content="#888">
<meta name="color:Content Decoration" content="#aaa">
<meta name="color:Footer" content="#eee">
<!-- END DEFAULT COLORS -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Trill Niggas Coming Soon</title>
<style type="text/css">

body {

background-image: url('http://farm6.static.flickr.com/5293/5461845520_091d43e572_z.jpg');

background-repeat:repeat;

margin: 0px px 50px 60px;

font: Normal 13px Arial, Helvetica, sans-serif;

color: #555;

}


#container {

height: 100%;

padding: 10px;

background-color: #blank;

border-bottom: dashed 1px #aaa;

margin-left: auto;

margin-right: auto;

width: 50em;

}


}

div#description {

position: relative;

}


div#description div {

position: absolute;

margin-left: 575px;
margin-top: 20px;

font: Normal 14px Georgia,"Times New Roman",serif;

line-height: 15px;

width: 252px;

background-color: #FFFFFF;

padding: 10px;

color: #999999;

top: 0px;

height: 100;

font-family: Arial, Helvetica, sans-serif;

letter-spacing: normal;

}



#nav {

text-align: right;

float: right;

margin-left: 30px;

margin-bottom: 10px;

font-size: 11px;

white-spacing: nowrap;

}



#nav a {

color: #44A3E2;

font-weight: bold;

}



#nav .dim {

filter: alpha(opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;

margin: 0px 0px;

}


h1 {

color: #666;

margin: 0px 0px 10px 0px;

font-weight: normal;

font-size: 40px;

letter-spacing: -1px;

}


h1 a {

color: #666;

text-decoration: none;

}



#description {

color: #777;

font-size: 11px;

line-height: 18px;

padding-right: 70px;

margin-bottom: 5px;

}



.date {

margin: 30px 0px 10px 0px;

color: #ccc;

font-size: 18px;

text-align: right;

letter-spacing: -1px;

text-transform: uppercase;

border-bottom: dashed 1px #ccc;

}



div.post {

margin-bottom: 40px;

position: relative;

}


div.post img.permalink {

border-width: 0px;

width: 23px;

height: 9px;

position: absolute;

top: 5px;

right: 5px;

display: none;

}


div.post:hover img.permalink {

display: block;

}


div.post h2 {

font-size: 22px;

color: #444;

margin: 0px 0px 5px 0px;

}


div.post h2 a {

color: #444;

text-decoration: none;

}



a {

color: #111;

}



/* Regular Post */

div.post div.regular {

font: Normal 11px 'Lucida Grande', Verdana, Arial, sans-serif;

line-height: 17px;

}


div.post div.regular blockquote {

font-style: italic;

}



/* Photo Post */

div.post div.photo img {

border-width: 0px;

}


div.post div.photo div.caption {

font-size: 11px;

margin-top: 5px;

color: #888;

}



div.post div.photo div.caption a {

color: #888;

}



/* Quote Post */

div.post div.quote {

padding: 0px 30px 0px 30px;

}



div.post div.quote span.quote {

font-size: 32px;

letter-spacing: -2px;

font-weight: bold;

color: #000000;

text-transform: uppercase;

}


div.post div.quote span.quote a {

color: #444;

}


div.post div.quote span.quote big.quote {

font: Bold 60px Georgia, serif;

line-height: 1px;

vertical-align: -23px;

opacity: 0.4;

-moz-opacity: 0.4;

filter: alpha(opacity=40);

}


div.post div.quote span.quote big.quote a {

text-decoration: none;

}



div.post div.quote div.source {

font-size: 16px;

color: #666;

text-transform: lowercase;

text-align: right;

}


div.post div.quote div.source a {

color: #666;

}



/* Link Post */

div.post div.link {

color: #666;

font-size: 24px;

letter-spacing: -1px;

}



div.post div.link a.link {

color: #666;

text-decoration: none;

border-bottom: dotted 1px #666;

}


div.post div.link div.description {

font-size: 15px;

letter-spacing: 0px;

line-height: 20px;

}



/* Conversation Post */

div.post div.conversation ul {

list-style-type: none;

margin: 0px;

padding: 0px 0px 0px 1px;

border-left: solid 5px #555;

}



div.post div.conversation ul li {

font-size: 12px;

padding: 4px 0px 4px 8px;

color: #000;

margin-bottom: 1px;

}



div.post div.conversation ul li span.label {

font-weight: bold;

}



div.post div.conversation ul li.odd {

background-color: #f4f4f4;

}



div.post div.conversation ul li.even {

background-color: #e8e8e8;

}



/* Audio Post */

div.post div.audio div.caption {

margin-top: 5px;

color: #888;

font-size: 11px;

}


div.post div.audio div.caption a {

color: #888;

}



/* Video Post */

div.post div.video div.caption {

margin-top: 5px;

color: #888;

font-size: 11px;

}



div.post div.video div.caption a {

color: #888;

}



#navigation {

font-size: 11px;

font-weight: bold;

}



#navigation a {

color: #555;

text-decoration: none;

}



#navigation a:hover {

text-decoration: underline;

}



#footer {

margin-top: 11px;

font-size: 10px;

color: {background: 000000;


};

}



#footer a {

color: #eee;

}





.blogtitle {

font-family: "century gothic", san-serif;

font-size:18px;

word-spacing:2px;

text-transform:uppercase;

font-variant: small-caps;

letter-spacing:-1px;

line-height: 17px;

margin:0px;

padding:0px;

color:#CCCCCC;

background-color:#666666;

text-align:left;}


.blogtitletwo {

font-family: "century gothic", san-serif;

font-size:14px;

word-spacing:2px;

text-transform:uppercase;

font-variant: small-caps;

letter-spacing:-1px;

line-height: 17px;

margin:0px;

padding:0px;

color:#FFFFFF;

background-color:#999999;

text-align:left;}


.music {

font-family: "century gothic", san-serif;

font-size:14px;

word-spacing:2px;

text-transform:uppercase;

font-variant: small-caps;

letter-spacing:-1px;

line-height: 17px;

margin:0px;

padding:0px;

color:#FF004E;

background-color:#CCCCCC;

text-align:left;}

.style7 {font-family: "century gothic", san-serif; font-size: 10px; word-spacing: 2px; text-transform: uppercase; font-variant: small-caps; letter-spacing: -1px; line-height: 17px; margin: 0px; padding: 0px; color: #FF004E; background-color: #CCCCCC; text-align: left; }

.style8 {color: #000000}

</style><!--[if IE]>

<style type="text/css">

div.post div.quote span.quote big.quote {

line-height: 40px;

}

</style>

<![endif]-->
</head>
<body>
<div id="container">
<img src="http://cl.ly/4idu/trill_niggas.png" border="0" height="200"
width="580"><br>
<br>
<iframe title="YouTube video player" class="youtube-player"
type="text/html" src="http://www.youtube.com/embed/Z4pf4riLa48"
allowfullscreen="" frameborder="0" height="390" width="480"></iframe>
<div id="description">
<div>
<p class="blogtitle">Jaydon Koroscil</p>
<p><img src="http://www.digitalproducer.com/pages/sake/vx1000.jpg"
height="99" width="220"><br>
<br>
<strong>This
is my website. I will be uploading exclusive clips to here, that aren't
viewable on my YouTube channel. If you just want to see the updates
about the full length I am working on, Click the link below.</strong><br>
<br>
if you want to contact me, send an email to jaydon_100@hotmail.com</p>
<br>
<p class="blogtitle">Links:</p>
<p><span class="music"><a href="http://www.jayjoob.com/trillniggas"
target="new window">Trill Niggas Blog</a><br>
<a href="http://www.youtube.com/user/jayjoob" target="new window">YouTube</a><br>
<a href="http://www.facebook.com/jayjoob" target="new window">Facebook</a><br>
<a href="http://www.last.fm/user/jayjoob" target="new window">Last.FM</a></span></p>
PRE-ORDER TRILL NIGGAS DVD
<form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input
name="cmd" value="_s-xclick" type="hidden"> <input
name="hosted_button_id" value="WN9ASYRJ7T9UN" type="hidden">
<table>
<tbody>
<tr>
<td><input name="on0" value="Pre-Order Trill Niggas DVD"
pre-order="" trill="" niggas="" dvd="" type="hidden"></td>
</tr>
<tr>
<td>
<select name="os0">
<option value="canada">canada $10.00</option>
<option value="international">international $12.00</option>
</select>
</td>
</tr>
</tbody>
</table>
<input name="currency_code" value="CAD" type="hidden"> <input
src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif"
name="submit" alt="PayPal - The safer, easier way to pay online!"
type="image" border="0"><img alt=""
src="https://www.paypal.com/en_US/i/scr/pixel.gif" border="0"
height="1" width="1"></form>
<br>
<br>
Winnipeg, Manitoba.
<p class="style8">2011 NIGGAS! </p>
</div>
</div>
<div id="navigation">
<p align="center"> </p>
<p align="center"> page 1 of 1 </p>
</div>
<!-- BEGIN TUMBLR CODE --><iframe
src="http://assets.tumblr.com/iframe.html?9&src=http%3A%2F%2Fjayjoob.com%2F&lang=en_US&name=trillniggas"
style="border: 0px none ; overflow: hidden; position: absolute; z-index: 1337; top: 0px; right: 0px; background-color: transparent;"
id="tumblr_controls" frameborder="0" height="25" scrolling="no"
width="330"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('tumblr_controls').allowTransparency=true;</script><![endif]-->
<script type="text/javascript">_qoptions={qacct:"p-19UtqE8ngoZbM"};</script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script><noscript><img
src="http://pixel.quantserve.com/pixel/p-19UtqE8ngoZbM.gif"
style="display:none; border-width:0px; height:1px; width:1px;" alt=""/></noscript><!-- END TUMBLR CODE -->
</div>
</body>
</html>

 

copy all that to your index.html file and re-upload, see if its fixed

Share this post


Link to post
Share on other sites

thanks cult classic, and i would change my css but im hosting my domain with tumblr, so im kinda confused as to using css... its like built into my html?

Share this post


Link to post
Share on other sites

Yes, putting the content of the site in a container div is the way I usually center stuff. just add right-margin and left-margin properties, and width set to like 50em, 45em etc.

 

 

and yea your css properties is built into your html code. usually you have it as a seperate style.css file and it calls for it in the head of the html file

 

also, I really don't think splash pages are necessary.. i never understood why so many kids on here insisted on having them

Share this post


Link to post
Share on other sites
thanks cult classic, and i would change my css but im hosting my domain with tumblr, so im kinda confused as to using css... its like built into my html?

 

youre hosting with tumblr? See if they give you some ftp username / pw info, if they do you can upload directly to it

Share this post


Link to post
Share on other sites

I'm not a kid haha I understand the whole splash page = one more step to take to reach the content, but I just have a thing about them. My site isn't publicized since it needs a lot of work, but if it drives down traffic I'll remove it...then again, not wanting to click one more button says a lot about the users that make up said traffic.

 

 

EDIT: thanks for the centering tip. didn't see that. just went straight to your use of the word 'splash' lol

Share this post


Link to post
Share on other sites
youre hosting with tumblr? See if they give you some ftp username / pw info, if they do you can upload directly to it

i just spent a good 5 minutes on google, and i can't find anything about ftp and tumblr. what other free site would you reccommend i use instead of tumblr? i'm sick of not being able to use css

Share this post


Link to post
Share on other sites

there isn't really a "free" option like tumblr. what else do you want to have on your site? Have it be just like an info page for the trill niggas video or an entire blog? I think as what it is, it looks good. you can buy the video, it tells about it and has a trailer for it

 

 

edit: i deserve a point for re-writing some of that code haha

Share this post


Link to post
Share on other sites

haha yeah thanks for re writing all that.

 

basically i want it so there is the home page with the promo, information about the video, and then a link on the right to the actual blog for trill niggas. in that link i'm gonna want to post all my youtube videos and some pictures, plus some blog exclusive clips that aren't seen on my youtube channel.

 

to make some more sense out of what i just said, i want the home page to be more of a portfolio with links an info of my work, and then i want a separate page for my blog.

 

something just seems ugly about my site so far, and i'm not digging editing html with tumblr.

Share this post


Link to post
Share on other sites

I think if you're gonna have it the way you said and just have a link to the blog, then it's good the way it is. And i think that backgrounds a little harsh. You don't have to edit it through tumblr, get an html editor and just copy and paste it in and out of tumblr

Share this post


Link to post
Share on other sites

shane, or you could easily do it for free, just make another "store" page, have the pictures of what you want to sell, when you click on the picture of an item have it show like: quantity, color, size.. etc.

then just have an embedded buy it now button or add to shopping cart and they can pay via paypal.

Share this post


Link to post
Share on other sites
shane, or you could easily do it for free, just make another "store" page, have the pictures of what you want to sell, when you click on the picture of an item have it show like: quantity, color, size.. etc.

then just have an embedded buy it now button or add to shopping cart and they can pay via paypal.

 

Yeah this is what I was thinking. I just don't know how to link it up with paypal.

Share this post


Link to post
Share on other sites

If you want to center something for real, set the right and left margins to auto. That way when a user changes the window size, the container will remain centered.

 

 

#container {  width:960px;  margin:0 auto;}

 

 

The first value sets the top and bottom margins to 0, and the second value sets the right and left margins to auto.

 

As far as having the fixed column, you'll want to emulate a frame layout without using frames. I have something similar on my website,nikorablin.com.

 

So, lets start with the structure.

 

 

<div id="container">  <div id="side">		  Side Stuff  </div>  <div id="content">		 Content  </div></div>

 

 

Then in the css

 

 

body {margin:0;padding:0;}html, body {height:100%;}#container {position:absolute;width:100%;}#side {position:fixed;float:left;overflow:hidden;top:0;left:0;width:305px; /* set a width */}#content {margin-left:305px; /* same as width of sidebar */height:100%;width:700px; /* width of content area */}

 

 

You can check it out in action and look at the source here

Share this post


Link to post
Share on other sites

thanks a ton nikovision, i'm going to work on that as soon as i rewrite basically all my code. i was using tumblr this whole time and everything is all in one html code which is stupid. no css or anything.

Share this post


Link to post
Share on other sites

Can ANYONE find out how to make my horizontal lines above my content line up in safari? it works in everything else.

 

website below

Share this post


Link to post
Share on other sites
Can ANYONE find out how to make my horizontal lines above my content line up in safari? it works in everything else.

 

website below

 

Yeah, the reason why it was doing that is because the height of your h2 was being determined by the text itself and different browsers sometimes render text slightly different. So first set the height of your .post h2 to 30px and also set margin-top to 0. So the styles I edited for .post h2

 

.post h2 {
  height:30px;
  margin-top:0;
}

 

Next, we'll adjust the right sidebar. Basically, all we need to do here is reset the margin-top to 42px.

 

#right-sidebar {
   margin-top:42px;
}

 

Now, all your content is pushed up to the top, so we'll use your header to set a margin.

 

#header {
   margin-bottom:50px;
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×