Log In · Register

 
Css help?
Jamesisgsnap
post Sep 13 2009, 03:25 AM
Post #1


Senior Member
****

Group: Member
Posts: 164
Joined: May 2008
Member No: 647,219
Lmao, I'm sorry, I'm done coding domain lyts the way I normally do.
I really wanna go to Css.
Is there ANY tutorials really that are good?
The one on here makes no sense.
Or can I atleast have someone message me? Etc.
http://gippersnaplyts.com/
 
 
 Start new topic
Replies (1 - 12)
Jamesisgsnap
post Sep 13 2009, 04:34 AM
Post #2


Senior Member
****

Group: Member
Posts: 164
Joined: May 2008
Member No: 647,219
Okay, I tried doing some of the things it said.
And apparently my domain Lyt is still off.
I just wanna ask how that's possible if like for example
A site friend.
http://acryliclyts.com/

Their Domain lyt is 4px less than ours? And it's not misaligned on my friends pc.
And mine is still doing this for hundreds of people.

I really wanna get this problem solved :|


http://gippersnaplyts.com/Domain_practice.php
Reason for edit: Please use [thumb] tags instead of [img] tags when posting large images. - Mike
 
Jamesisgsnap
post Sep 13 2009, 05:42 AM
Post #3


Senior Member
****

Group: Member
Posts: 164
Joined: May 2008
Member No: 647,219
How can it be the resolution if my site friend is 4px less width then mine and it's still perfectly aligned.

Edited- She hasn't told me if it worked yet, so...
 
Jamesisgsnap
post Sep 13 2009, 06:05 AM
Post #4


Senior Member
****

Group: Member
Posts: 164
Joined: May 2008
Member No: 647,219
So if I was to move it to -495px; or 495px on margin left it'd align?
But wouldn't it mis-align on my screen?
 
Jamesisgsnap
post Sep 13 2009, 06:34 AM
Post #5


Senior Member
****

Group: Member
Posts: 164
Joined: May 2008
Member No: 647,219
CODE
<head>
<meta name="description" content="Over 2000 Myspace Layouts and over 5000 Graphics, Tutorials, Comment Boxes, Music Skins, and way more!">
<meta name="keywords" content="layouts, myspace layouts, 2.0 layouts, myspace2.0layouts, myspace 2.0 layouts, lyts, myspace, cute myspace layouts, resources, content, graphics, page graphics, icons, brushes, tutorials, twilight, twicons, sunshine, sunshine layouts, sunshinee, sunshinee.com, sunshinelayouts, cbitw, cbitw-layouts, cbitw-layouts.com, hot-lyts.com, hot-lyts, hot lyts, hot layouts, whateverlife.com, whatever life">

<html>
<title>Adorable Layouts. Divs. Blog Layouts. Games. Requests. Graphics & More!! &nbsp;&nbsp;&nbsp Gippersnaplyts.com!</TITLE>


<div id="container">
<div id="frame">
<style type="text/css">
body {
font-size: 11px;
font-family: arial;
line-height: 11px;
color: 000000;
background-image:url("http://gippersnaplyts.com/Images/Forme/Sitestuff/Newlookbottom.png");
background-position: top center;
background-repeat: repeat-y;
background-color: 3d3d3d;
background-attachment: fixed;
float: center;
text-align:center;}


#container {
margin: 0;
padding: 0px;
width: 100%;
}

#frame {
margin: auto;
width: 990px;
height: 100%;
text-align: left;
}

body,table {font:normal 11px arial;
color:000000;
font-weight:none;
border:0px;
text-transform: none;
line-height:11px;}


b{color: 000000;}

i{color: 000000;}

u{color: 000000;}

big{background-color: none;
color: 000000;
font-size: 15px;
line-height:110%;
font-weight: none;
font-family: arial;
font-weight: bold;
letter-spacing: 0px;
text-transform: capitalized;
text-decoration: none;
}
small{background-color: none;
color: 000000;
font-size: 7px;
line-height:100%;
font-weight: none;
font-family: small fonts;
font-weight: normal;
letter-spacing: 0px;
text-transform: uppercase;
text-align:;
border-bottom: 0px solid black;}

textarea {font-family:small fonts;
font-size: 7px;
line-height: 8px;
font-weight: normal;
text-transform: uppercase;
text-align: left;
color: 000000;
width: 120px;
height: 50px;
background-color: transparent;
border: 1px solid;
border-color: black;
overflow:auto;
}

strong{background-color: none;
color: 000000;
font-size: 11px;
line-height:100%;
font-weight: none;
font-family: arial;
font-weight: normal;
letter-spacing: 0px;
text-transform: none;
text-align: right;
border-bottom: 0px solid black;}



a:hover img {filter: progid:DXImageTransform.Microsoft.Pixelate (maxsquare=5)}

a:link, a:visited, a:active
{color: 000000;
font-family: arial;
font-weight:normal;
font-size:11px;
letter-spacing: 1px;
text-transform: lowercase;
text-decoration:none;}

a:hover{
font-family: arial;
font-weight:normal;
font-size: 11px;
letter-spacing: 1px;
text-transform: lowercase;
color:3d3d3d;}

a.navi, a.navi:active, a.navi:link, a.navi:visited{
font-family: small fonts;
font-weight:normal;
font-size: 8px;
letter-spacing:1px;
text-transform: uppercase;
letter-spacing:0px;
color:000000;}

a.navi:hover{
font-family: small fonts;
font-weight:normal;
font-size: 8px;
letter-spacing:1px;
text-transform: uppercase;
letter-spacing:0px;
color:000000;
background-color: 6163BB;}

a.page, a.page:active, a.page:link, a.page:visited{
font-weight: bold;
font-family: arial;
font-style: italic;
letter-spacing:1px;
font-size: 14px;
text-transform: lowercase;
letter-spacing:0px;
color:FF3E40;}

a.page:hover{
font-weight: bold;
font-family: arial;
font-style: italic;
letter-spacing:1px;
font-size: 14px;
text-transform: lowercase;
letter-spacing:0px;
color:FF3E40;}

.mainheader{
font-family: arial;
gpprsnp; font-size:23px;
color:000000;
line-height:18px;
font-weight: bold;
text-transform:lowercase;
letter-spacing:-2px;
display:block;
text-align:left;
border-bottom: 2px solid;
border-bottom-color: 6163BB;
background-color: transparent;}

.adheader{color: 000000;
font-size: 30px;
line-height:110%;
font-weight: Normal;
font-family: arial;
font-style: italic;
z-index:5;
font-weight: bold;
letter-spacing: -2px;
text-transform: capitalized;
display:block;
text-align: center;
border-bottom: 0px solid; snap;
border-bottom-color: 000000;
font-weight:Normal;
font-style: italics;}

.sideheader
{font-family: arial;
gpprsnp; font-size:23px;
color:000000;
line-height:18px;
font-weight: bold;
text-transform:lowercase;
letter-spacing:-2px;
display:block;
text-align:center;
border-bottom: 2px solid;
border-bottom-color: 6163BB;
background-color: transparent;}

.sideheader2
{font-family: arial;
gpprsnp; font-size:23px;
color:000000;
line-height:18px;
font-weight: bold;
text-transform:lowercase;
letter-spacing:-2px;
display:block;
text-align:center;
border-bottom: 2px solid;
border-bottom-color: 6163BB;
background-color: transparent;}

.sideheader:first-letter{color:FF3E40;}
.sideheader2:first-letter{color:FF3E40;}
.mainheader:first-letter{color:FF3E40;}

br{line-height: 1.5px;}

</style>



<div style="position: absolute; top: -6px; left: 50%; margin-left: -495px; float: center;">
<img src="http://gippersnaplyts.com/Images/Forme/Sitestuff/Newlooktop.png" border="0"></div>


<div style="position:absolute;background-color:transparent; left: 50%; margin-left: -348px; top: 240px; width:598px; border:none;">
<div class="mainheader">Daily and weekly Updates!</div><br>
<div style="width:595px; height:120px; overflow:auto; color: black; border: 0px solid; background-color:transparent; text-align: left; padding: 1px;">


<b>September 13th</b>-<a href="http://gippersnaplyts.com/Layouts/Divs/Sitedivs.php">2new site divs</a>.
<a href="http://gippersnaplyts.com/Layouts/Style4.php">5 New style 4 Defaults</a>.
<a href="http://gippersnaplyts.com/Warninggraphics.php">5 Warning graphics</a>.
<br>
<b>September 12th</b>-<a href="http://gippersnaplyts.com/Layouts/Divs/Sitedivs.php">1 New Site div</a>.
<a href="http://gippersnaplyts.com/Layouts/Style3.php">5 New style 3 defaults</a>.
<a href="http://gippersnaplyts.com/Myspacecodes/Hide.php">2 New Myspace Hide codes</a>. <br>
<b>September 11th</b>-<a href="http://gippersnaplyts.com/Layouts/Style15.php">5 New style 15 Default Lyts</a>.
<br><b>September 10th</b>-<a href="http://gippersnaplyts.com/Bloglyts.php">5 New Blog Lyts!</a>.
<br><b>September 7th</b>-<a href="http://gippersnaplyts.com/Layouts/Style14.php">5 New Style 14 Defaults</a>.
<a href="http://gippersnaplyts.com/Layouts/Style16.php">5 New style 16 Defaults</a>.<br>
<b>September 6th</b>-<a href="http://gippersnaplyts.com/Twitterlyts.php">4 New Twitter Layouts</a>.
<a href="http://gippersnaplyts.com/Commentboxes.php">8 new comment boxes</a>.
<a href="http://gippersnaplyts.com/Contacttables/Regular.php">1 New reg. Contact table</a>.<br>
<b>September 5th</b>-<a href="http://gippersnaplyts.com/Layouts/Graytabled.php">7 new Gray tabled Defaults</a>.
<a href="http://gippersnaplyts.com/Layouts/Style11.php">5 New style 11 Defaults</a>.<br>
<b>September 4th</b>-<a href="http://gippersnaplyts.com/Layouts/Divs/Personaldivs.php">2 New Personal divs/Fixed Internet explorer codes</a>.
<a href="http://gippersnaplyts.com/Layouts.php">Four New Layout Stylesheets!</a>.<br>
<b>September 2nd</b>-<a href="http://gippersnaplyts.com/Layouts/Style5.php">5 Style 5 Defaults</a>.
<a href="http://gippersnaplyts.com/Layouts/Style6.php">5 Style 6 Defaults</a>.
<a href="http://gippersnaplyts.com/Sitenames.php">2 Site names</a>.<br>
<b>September 1st</b>-<a href="http://gippersnaplyts.com/Zodiacgraphics.php">1 Zodiac graphic set</a>.
<a href="http://gippersnaplyts.com/Namehdrs.php">5 Name headers</a>.
<a href="http://gippersnaplyts.com/Backgrounds.php">5 Backgrounds</a>. <br>
<b>August 31st</b>-<a href="http://gippersnaplyts.com/Colorschemes.php">5 Color schemes</a>.
<a href="http://gippersnaplyts.com/Dvdcovers.php">10 DVD covers</a>.
<a href="http://gippersnaplyts.com/Commentbuttons.php">5 Comment Buttons</a>.
<a href="http://gippersnaplyts.com/Pagegraphics.php">20 Page graphics</a>. <br>
<b>August 30th</b>-<a href="http://gippersnaplyts.com/Premade_Signs.php">15 premade signs</a>.
<a href="http://gippersnaplyts.com/Aboutmeheaders.php">4 About me headers</a>.
<a href="http://gippersnaplyts.com/Blogheaders.php">4 Blog headers</a>.
<a href="http://gippersnaplyts.com/Evrythnghdrs.php">4 Content headers</a>.<br>
<a href="http://gippersnaplyts.com/Welcomeheaders.php">6 Welcome headers</a>.
<a href="http://gippersnaplyts.com/Holicgraphics.php">10 Holic-graphics</a>.
<a href="http://gippersnaplyts.com/Photography.php">8 Photography pictures</a>.
<a href="http://gippersnaplyts.com/Headlines.php">5 Headline Images</a>.
<a href="http://gippersnaplyts.com/Layouts/Style7.php">5 style 7 defaults</a>.
</div><br>


<div class="adheader">
<center><!-- Beginning of Project Wonderful ad code: -->
<!-- Ad box ID: 40409 -->
<script type="text/javascript">
<!--
var pw_d=document;
pw_d.projectwonderful_adbox_id = "40409";
pw_d.projectwonderful_adbox_type = "1";
pw_d.projectwonderful_foreground_color = "";
pw_d.projectwonderful_background_color = "";
//-->
</script>
<script type="text/javascript" src="http://www.projectwonderful.com/ad_display.js"></script>
<!-- End of Project Wonderful ad code. --><br><br>
<iframe SCROLLING="No" FRAMEBORDER="0" MARGINHEIGHT="0" MARGINWIDTH="0" width="400" height="350" src="http://tags.nabbr.com/e29d7bf4809241d6f5baf83043b9df9bc2bad779.html"> </iframe>


<br><style>textarea.area{
background-color:FFFFFF;
background-image:url();
background-repeat:repeat;
border:1px solid;
border-color:96AEFF;
color:000000;
width:500px;
height:30px;
font-family:arial;
text-transform: lowercase;
line-height:25px;
font-size:25px;
letter-spacing:-2px;
overflow:hidden;
text-align:left;
}

input.button {
background-color:96AEFF;
color:ffffff;
border:1px solid;
border-color:6163BB;
text-transform: uppercase;
font-size:7px;
width:500px;
height:12px;
text-align: center;
font-family:small fonts;
line-height:7px;
font-weight: normal;
padding:0px;
}
</style>

<form method="post" action="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=40890335"><input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /><input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="" /><textarea name="ctl00$ctl00$cpMain$UserWriteCommentsControl$commentTextBox" class="area">Hey, I'm commenting to tell yah I used somethangg!</textarea><br />
<input type="submit" name="ctl00$ctl00$cpMain$UserWriteCommentsControl$postcommentImageButton" class="button" value="Tell me!" /></form>


</div>
<center>
<div class="mainheader">Welcome to the new domain Layout</div><br>
I hope you like. This one is going to be different.<br><br>

<b>Bold</b> - <i>Italics</i> - <u>Underline</u> - <small>Small</small> - <big>Bigg</big> - <a href="">Link.</a> - <a class="navi" href="">Navi Link</a>
<a class="page" href="">Page Link</a><br>

<textarea>Textarea Goes here</textarea>
<br>

</div>


<div style="position:absolute;background-color:transparent; left: 50%; margin-left: -495px; top: 240px; width: 192px; border:none;">
<div class="sideheader">Navigation</div>
<div class="side2">
<center>Add my Myspaces & More</center>
<table width="192px;"><td align="left">
<a class="navi" href="http://www.gippersnaplyts.com/">Home</a><br>
<a class="navi" href="http://www.myspace.com/fillyfynestdzn">Main Site</a><br>
<a class="navi" href="http://www.myspace.com/sparklingxlemonade">My Backup</a><br>
<a class="navi" href="http://www.myspace.com/assassinator112">My Personal</a><br>
<a class="navi" href="http://blogs.myspace.com/index.cfm?fuseaction=blog.view&friendID=40890335&blogID=421995240">Sitemodel App.</a><br>
<a class="navi" href="http://twitter.com/Gippersnap">My Twitter</a><br>

</td><td align="right">
<a class="navi" href="http://gippersnaplyts.com/Aboutowner.php">About Owner</a><br>
<a class="navi" href="http://www.myspace.com/motocrossf*cka">Elegante</a><br>
<a class="navi" href="http://gippersnaplyts.com/Privacy.php">Privacy Policy</a><br>
<a class="navi" href="http://blogs.myspace.com/index.cfm?fuseaction=blog.view&friendID=40890335&blogID=433130147">Suggestion Box</a><br>
<a class="navi" href="http://gippersnaplyts.com/Support.php">Support/Button?</a><br>
<a class="navi" href="http://jamesisgsnap.tumblr.com/">Get my Tumblr.</a><br>
</td>
</td></table> </td></tr></table>

<center><a class="navi" href="http://blogs.myspace.com/index.cfm?fuseaction=blog.view&friendID=40890335&blogID=460526076">Apply for Sub-domain!</a><br><br>
<script type="text/javascript">
<!-- Begin
rnd.today=new Date();
rnd.seed=rnd.today.getTime();

function rnd() {
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
};

function rand(number) {
var result = Math.ceil(rnd()*number);
if (!result)result++;
return result
};
var ad_cnt1 = 4;
var ad1 = rand(ad_cnt1);
var link1;
var adBanner1;
var width1
var height1


if (ad1==1) {
link1="http://lovelyts.net/link-exchange/?op=in&site=67";
adBanner1="http://i43.tinypic.com/27ymln5.png";
width1="88";
height1="31";
}

if (ad1==2) {
link1="http://preciselyts.net/";
adBanner1="http://preciselyts.net/button/3.png";
width1="88";
height1="31";
}

if (ad1==3) {
link1="http://lov3burst.net/";
adBanner1="http://i39.tinypic.com/rutg9i.png";
width1="88";
height1="31";
}

if (ad1==4) {
link1="http://chocolatemilkk.net/";
adBanner1="http://chocolatemilkk.net/images/cmbttn.png";
width1="88";
height1="31";
}

document.write('<center><a href="' + link1 + '" target="_top">');
document.write('<img src="' + adBanner1 + '" width=' + width1 + ' height=' + height1 + ' border=0"></a>');
document.write('</center>');
// End -->
</SCRIPT><br>
<a href="http://gippersnaplyts.com/Buttonapp.php">Wanna be here?</a><br><br><br>

<a class="navi" href="http://gippersnaplyts.com/Groups&trainsimon.php">Trains & Groups I'm in</a><br>

</center>
</div>


<br>
<div class="sideheader">Myspace content</div>
<div class="side2"><center>
<table width="192px;"><td align="left">
<a class="navi" href="http://gippersnaplyts.com/Layouts.php">Layouts</a><BR>
<a class="navi" href="http://gippersnaplyts.com/Layouts/Divs.php">Div Lyts</a><br>
<a class="navi" href="http://gippersnaplyts.com/Bloglyts.php">Blog Layouts</a><br>
<a class="navi" href="http://gippersnaplyts.com/Premade_Signs.php">Premade Signs</a><BR>
<a class="navi" href="http://gippersnaplyts.com/Contacttables.php">Contact Tables</a><Br>
<a class="navi" href="http://gippersnaplyts.com/Games.php">Games</a><BR>
<a class="navi" href="http://gippersnaplyts.com/Requests.php">Requests</a><br>
<a class="navi" href="http://gippersnaplyts.com/Aboutmeheaders.php">About me Headers</a><br>
<a class="navi" href="http://gippersnaplyts.com/Evrythnghdrs.php">Content Headers</a><br>
<a class="navi" href="http://gippersnaplyts.com/Blogheaders.php">Blog Headers</a><br>
<a class="navi" href="http://gippersnaplyts.com/Commentboxes.php">Comment boxes</a><br>
<a class="navi" href="http://gippersnaplyts.com/Extnetworkbanners.php">Ext.Ntwrk banners</a><br>
<a class="navi" href="http://gippersnaplyts.com/Wraparounds.php">Wrap arounds</a><br>


</td><td align="right">
<a class="navi" href="http://gippersnaplyts.com/Imagemaps.php">Imagemaps</a><br>
<a class="navi" href="http://gippersnaplyts.com/Wiltmheaders.php">W.I.L.T.M Headers</a><br>
<a class="navi" href="http://gippersnaplyts.com/Wiltmbanners.php">W.I.L.T.M Bnnrs</a><br>
<a class="navi" href="http://gippersnaplyts.com/Celebbanners.php">Celeb Banners</a><br>
<a class="navi" href="http://gippersnaplyts.com/Musicskins.php">Music Skins</a><br>
<a class="navi" href="http://gippersnaplyts.com/Supportimgs.php">Support Images</a><br>
<a class="navi" href="http://gippersnaplyts.com/Headlines.php">Headline Images</a><br>
<a class="navi" href="http://gippersnaplyts.com/Surveys.php">Surverys</a><br>
<a class="navi" href="http://gippersnaplyts.com/Codes.php">Myspace Codes!</a><br>
<a class="navi" href="http://gippersnaplyts.com/Commentbuttons.php">Comment Buttons</a><br>
<a class="navi" href="http://gippersnaplyts.com/Quicklinks.php">Quick Links</a><br>
<a class="navi" href="http://gippersnaplyts.com/Premadebckgrnds.php">Premade Bckgrnds</a><br>
<a class="navi" href="http://gippersnaplyts.com/Contentrollovers.php">Cntnt-rllovrs</a><br>

</td>
</td></table> </td></tr></table>
</div>

<div class="sideheader">Extras' content</div>
<div class="side2"><center>
<table width="192px;"><td align="left">
<a class="navi" href="http://gippersnaplyts.com/Domainlyts.php">Domain Lyts</a><Br>
<a class="navi" href="http://gippersnaplyts.com/Credits.php">Credits</a><br>
<a class="navi" href="http://gippersnaplyts.com/Backgrounds.php">Backgrounds</a><br>
<a class="navi" href="http://gippersnaplyts.com/Pagegraphics.php">Page Graphics</a><br>
<a class="navi" href="http://gippersnaplyts.com/Dropdownmenus.php">Drop-down boxes</a><br>
<a class="navi" href="http://gippersnaplyts.com/Namehdrs.php">Name Headers</a><Br>
<a class="navi" href="http://gippersnaplyts.com/Colorschemes.php">Color Schemes</a><br>
<a class="navi" href="http://gippersnaplyts.com/Zodiacgraphics.php">Zodiac Graphics</a><br>
<a class="navi" href="http://gippersnaplyts.com/Iconmovies.php">Icons</a><br>
<a class="navi" href="http://gippersnaplyts.com/Stategraphics.php">State Graphics</a><br>
<a class="navi" href="http://gippersnaplyts.com/Interesticons.php">Interest Icons</a><br>
<a class="navi" href="http://gippersnaplyts.com/Welcomeheaders.php">Welcome headers</a><br>
<a class="navi" href="http://gippersnaplyts.com/Dvdcovers.php">Dvd covers</a><br>
<a class="navi" href="http://gippersnaplyts.com/SMcutouts.php">SM Cutouts</a><br>
<a class="navi" href="http://gippersnaplyts.com/Warninggraphics.php">Warning graphics</a><br>



</td><td align="right">
<a class="navi" href="http://gippersnaplyts.com/Buttongraphics.php">Button Graphics</a><br>
<a class="navi" href="http://gippersnaplyts.com/Webheaders.php">Web Headers</a><br>
<a class="navi" href="http://gippersnaplyts.com/Summerheaders.php">Summer Headers</a><br>
<a class="navi" href="http://gippersnaplyts.com/Scrollboxes.php">Scroll Boxes</a><br>
<a class="navi" href="http://gippersnaplyts.com/Sitenames.php">Site names</a><br>
<a class="navi" href="http://gippersnaplyts.com/Vectors.php">Vectors</a><br>
<a class="navi" href="http://gippersnaplyts.com/Fan&lovergraphics.php">Lover Graphics</a><br>
<a class="navi" href="http://gippersnaplyts.com/Helloimgraphics.php">Hi I'm graphics</a><br>
<a class="navi" href="http://gippersnaplyts.com/Statusgraphics.php">Status Graphics</a><br>
<a class="navi" href="http://gippersnaplyts.com/Birthstonegraphics.php">Birthstone Graphcs</a><br>
<a class="navi" href="http://gippersnaplyts.com/Iheartgraphics.php">I <3 graphics</a><br>
<a class="navi" href="http://gippersnaplyts.com/Classofgraphics.php">Class of_ graphics</a><br>
<a class="navi" href="http://gippersnaplyts.com/Thnks4addgraphics.php">Thanks4add graphcs</a><br>
<a class="navi" href="http://gippersnaplyts.com/Holicgraphics.php">Holic Graphics</a><br>
<a class="navi" href="http://gippersnaplyts.com/Photography.php">Photography</a><br>


</td>
</td></table> </td></tr></table>
</div>
<br>

<div class="sideheader">Tutorials</div><br>
<div class="side2"><center>
<table width="192px;"><td align="left">
<a class="navi" href="http://gippersnaplyts.com/Pshoptutorials.php">P.shop Tutorials</a><br>

</td><td align="right">
<a class="navi" href="http://gippersnaplyts.com/Myspacetutorials.php">Myspace Tutorials</a><br>

</td>
</td></table> </td></tr></table>
</div>
<br>



<div class="sideheader">Twitter content</div><br>
<div class="Side2"><center>
<a class="navi" href="http://gippersnaplyts.com/Twitterlyts.php">Twitter Layouts</a><br>
</div>
<br>

<div class="sideheader">Sponsers</div><br>
<div class="side2"><center>
<!-- Beginning of Project Wonderful ad code: -->
<!-- Ad box ID: 41646 -->
<script type="text/javascript">
<!--
var pw_d=document;
pw_d.projectwonderful_adbox_id = "41646";
pw_d.projectwonderful_adbox_type = "3";
pw_d.projectwonderful_foreground_color = "";
pw_d.projectwonderful_background_color = "";
//-->
</script>
<script type="text/javascript" src="http://www.projectwonderful.com/ad_display.js"></script>
<!-- End of Project Wonderful ad code. -->
</center>
</div>



<div style="position:absolute;background-color:transparent; left: 50%; margin-left:696px; top: 0px; width: 196px; border:none;">

<div class="sideheader">Affiliates</div>
<div class="side2">
<center>Affies in No Specific Order. <br>
Yet.;]</center>
<table width="196px;"><td align="left">

<a class="navi" href="http://hairflip.net/">Hairflip</a><br>
<a class="navi" href="http://lov3burst.net/">Loveburst</a><br>
<a class="navi" href="http://magazine.adorablelayouts.net/">F.Magazine</a><br>
<a class="navi" href="http://www.egraphixx.com/">Paint Shop Inc.</a><br>
<a class="navi" href="http://osll.xlayoutsx.com/">Oh so Lscius</a><br>
<a class="navi" href='http://www.createblog.com/myspace-layouts/'>Createblogg</a><br>
<a class="navi" href="http://lyts.me/">Lyts Me</a><br>
<a class="navi" href="http://loveshowerlyts.com/">Loveshower</a><br>
<a class="navi" href="http://excludedrick.com/">Excluded rick</a><br>
<a class="navi" href="http://sweetcafelyts.com/">Sweet Cafe</a><br>
<a class="navi" href="http://friendalicious.com/">Friendalicious</a><br>
<a class="navi" href="http://syntheticsilencelyts.com/">synthetic$</a><br>
<a class="navi" href="http://preciselyts.net/">Precise</a><br>
<a class="navi" href="http://regrettelayouts.net/">Regrette Lyts</a><br>
<a class="navi" href="http://atomicaffliction.com/">Atomic Affliction</a><br>
<a class="navi" href="http://lovelyts.net/link-exchange/?op=in&site=121">love lyts</a><br>




</td><td align="right">
<a class="navi" href="http://southbeachlyts.com/">South Beach</a><br>
<a class="navi" href="http://snugglelyts.com/">Snuggle</a><br>
<a class="navi" href="http://neskaya.net/">Neskaya</a><br>
<a class="navi" href="http://overrated.mascaralyts.com/">Overrated</a><br>
<a class="navi" href="http://www.reinlyts.net/">Rein Lyts</a><br>
<a class="navi" href="http://towerlyts.com/">Tower Lyts</a><br>
<a class="navi" href="http://expresslyts.net/">Express Lyts</a><br>
<a class="navi" href="http://afy-layouts.com/">Afy Layouts</a><br>
<a class="navi" href="http://www.dreamerxproductions.com/">Dreamer</a><br>
<a class="navi" href="http://manipulatedd.com/">Maniupulatedd</a><br>
<a class="navi" href="http://www.lovebooklyts.com/">Lovebook</a><br>
<a class="navi" href="http://amazing-lyts.com/">Amazing Lyts</a><br>
<a class="navi" href="http://www.pagexgraphics.com/">PagexGraphics</a><br>
<a class="navi" href="http://hautelyts.com/">Haute Lyts</a><br>
<a class="navi" href="http://www.dailycute.net/">Daily Cute</a><br>
<a class="navi" href="http://acryliclyts.com/link-exchange/?op=in&site=12">Acrylic Lyts</a><br>
</td>
</td></table> </td></tr></table>


<center><a class="navi" href="http://gippersnaplyts.com/Affiliates.php">Apply For Affie</a></a>
</div>





<div class="sideheader">Hostees</div>
<div class="side2">
<center>Subbies I host.</center>
<table width="196px;"><td align="left">
<a class="navi" href="http://passion.gippersnaplyts.com/">Passion Lyts</a><br>
<a class="navi" href="http://interpid.gippersnaplyts.com/">Interpid</a><br>

</td><td align="right">
<a class="navi" href="http://glamourazzi.gippersnaplyts.com/">Glamourazzi</a><br>


</td>
</td></table> </td></tr></table>


<center><a class="navi" href="http://blogs.myspace.com/index.cfm?fuseaction=blog.view&friendID=40890335&blogID=460526076">Apply For Subby</a></a>
</div>
<br>

<div class="sideheader2">Stats</div>
<div class="side2"><center>
&copy; Gippersnaplyts.com. 2007-2009.<BR>
All rights reserved.<br>

<a href="http://www.freeonlineusers.com">
<font color=#000000><script type="text/javascript" src="http://st1.freeonlineusers.com/on4.php?id=155073"> </script> Online Users</font></a>
<br>

<div id="eXTReMe"><a href="http://extremetracking.com/open?login=jamesccc">
<img src="http://t1.extreme-dm.com/i.gif" style="border: 0;"
height="38" width="41" id="EXim" alt="eXTReMe Tracker" /></a>
<script type="text/javascript"><!--
var EXlogin='jamesccc' // Login
var EXvsrv='s11' // VServer
EXs=screen;EXw=EXs.width;navigator.appName!="Netscape"?
EXb=EXs.colorDepth:EXb=EXs.pixelDepth;
navigator.javaEnabled()==1?EXjv="y":EXjv="n";
EXd=document;EXw?"":EXw="na";EXb?"":EXb="na";
EXd.write("<img src=http://e2.extreme-dm.com",
"/"+EXvsrv+".g?login="+EXlogin+"&amp;",
"jv="+EXjv+"&amp;j=y&amp;srw="+EXw+"&amp;srb="+EXb+"&amp;",
"l="+escape(EXd.referrer)+" height=1 width=1>");//-->
</script><noscript><div id="neXTReMe"><img height="1" width="1" alt=""
src="http://e2.extreme-dm.com/s11.g?login=jamesccc&amp;j=n&amp;jv=n" />
</div></noscript>
</div>

<div class="sideheader">Sponsers</div><br>
<div class="side2"><center>
<!-- Beginning of Project Wonderful ad code: -->
<!-- Ad box ID: 41647 -->
<script type="text/javascript">
<!--
var pw_d=document;
pw_d.projectwonderful_adbox_id = "41647";
pw_d.projectwonderful_adbox_type = "3";
pw_d.projectwonderful_foreground_color = "";
pw_d.projectwonderful_background_color = "";
//-->
</script>
<script type="text/javascript" src="http://www.projectwonderful.com/ad_display.js"></script>
<!-- End of Project Wonderful ad code. -->
</center>
</div>



<div style="position:absolute;background-color:transparent; left: 50%; margin-left: 113px; top: -100px; border:none; SIDE BAR AD;">
<!-- Beginning of Project Wonderful ad code: -->
<!-- Ad box ID: 39537 -->
<script type="text/javascript">
<!--
var pw_d=document;
pw_d.projectwonderful_adbox_id = "39537";
pw_d.projectwonderful_adbox_type = "3";
pw_d.projectwonderful_foreground_color = "";
pw_d.projectwonderful_background_color = "";
//-->
</script>
<script type="text/javascript" src="http://www.projectwonderful.com/ad_display.js"></script>
<noscript><map name="admap39537" id="admap39537"><area href="http://www.projectwonderful.com/out_nojs.php?r=0&amp;c=0&amp;id=39537&amp;type=3" shape="rect" coords="0,0,160,600" title="" alt="" target="_blank" /></map>
<table cellpadding="0" border="0" cellspacing="0" width="160" bgcolor="#ffffff"><tr><td><img src="http://www.projectwonderful.com/nojs.php?id=39537&amp;type=3" width="160" height="600" usemap="#admap39537" border="0" alt="" /></td></tr><tr><td bgcolor="#ffffff" colspan="1"><center><a style="font-size:10px;color:#0000ff;text-decoration:none;line-height:1.2;font-weight:bold;font-family:Tahoma, verdana,arial,helvetica,sans-serif;text-transform: none;letter-spacing:normal;text-shadow:none;white-space:normal;word-spacing:normal;" href="http://www.projectwonderful.com/advertisehere.php?id=39537&amp;type=3" target="_blank">Ads by Project Wonderful! Your ad here, right now: $0</a></center></td></tr><tr><td colspan=1 valign="top" width=160 bgcolor="#000000" style="height:3px;font-size:1px;padding:0px;max-height:3px;"></td></tr></table>
</noscript>
<!-- End of Project Wonderful ad code. -->
</div>


</head>
</html>
</div>
</div>



It's the layout now.
Reason for edit: Please use [codebox] tags instead of [code] tags for longer codes and [thumb] tags instead of [img] tags for large images. - Mike
 
Jamesisgsnap
post Sep 13 2009, 06:38 AM
Post #6


Senior Member
****

Group: Member
Posts: 164
Joined: May 2008
Member No: 647,219
Okay, the ad is taken out, any other idea on what to do?

http://gippersnaplyts.com/Domain_practice.php
 
Jamesisgsnap
post Sep 13 2009, 06:46 AM
Post #7


Senior Member
****

Group: Member
Posts: 164
Joined: May 2008
Member No: 647,219
But aren't I only doing positioning?
Because the areas are still the same size, so why would I need to fix them?
Thanks with the first few steps btw.

Quick edit-I'ma go back to bed, and Hopefully you can help, cause you'd be the coolest person in the world lmao. I thought I had it last time and then apparently I didn't, so please don't close this if I don't reply to it yet.
 
Jamesisgsnap
post Sep 13 2009, 03:40 PM
Post #8


Senior Member
****

Group: Member
Posts: 164
Joined: May 2008
Member No: 647,219
Idk what to do for the background -_-.
But for the areas.
Just put margin: left at half the widths of the sidebar? px?
 
fixtatik
post Sep 14 2009, 05:19 AM
Post #9


Senior Member
******

Group: Member
Posts: 1,237
Joined: May 2008
Member No: 648,123


Here goes...a lot of reading. Get comfy.

A dandy basic 3-column template:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title, no way</title>

<style type="text/css" media="screen">
body { text-align:center; }
#main { margin:auto; text-align:left; width:900px; }
#left { float:left; width:150px; }
#content { float:left; width:600px; }
#right { float:right; width:150px; }
#footer { clear:both; }
</style>

</head>
<body>

<div id="main">

<div id="left">
The left side bar
</div>

<div id="content">
The main content area
</div>

<div id="right">
The right sidebar
</div>

<div id="footer">
The footer
</div>

</div>

</body>
</html>


Piece by piece:

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is the type of document you're delivering to a browser. In this case, XHTML 1.0 transitional - "transitional", meaning it supports some elements of HTML and some of XHTML. Because it's XHTML and not HTML, all tags need to be in lowercase. You can do HTML if you want; doesn't really matter.

CODE
<style type="text/css" media="screen">
selector { property:value; }
</style>
Just for sake of simplicity, I put the stylesheet in the head. However, to save on bandwidth and load times, it's better to link to an external stylesheet. To do that, make a file called "style.css". Inside it, put all the styles, but without the <style> tags. Then, call it in the head of your document like this:
CODE
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

"text/css" tells the browser to deliver it as CSS. The 'media="screen"' part is to tell browsers that it's for computer monitors. There are other media available, like handheld (for small screens), print (for printing) and a few others. You should only have to deal with "screen".

The parts of the stylesheet in my example:

body { text-align:center; } - This centers everything on your page. It doesn't center elements like "div" or "table" in modern browsers, but it's a fix for old, stupid browsers like IE5 and IE6.

#main { margin:auto; text-align:left; width:900px; } - margin:auto; centers elements in modern browsers. text-align:left; aligns all text inside the div with an ID of "main" to the left. width:900px; gives it a width of 900 pixels. It can be whatever you want; as long as you have that margin:auto; in there, it'll be centered.

#left { float:left; width:150px; } - This is for the left sidebar. float:left; aligns it on the left margin of the "main" div. I've given it a width of 150 pixels.

#content { float:left; width:600px; } - This is for the main content area. It also has float:left;, which will put it right next to the left sidebar. It has a width of 600 pixels.

#right { float:right; width:150px; } - This is for the right sidebar. float:right; aligns it on the right margin of the "main" div. Again, a width of 150 pixels. (150 + 600 + 150 = 900)

#footer { clear:both; } - Obviously for the footer. clear:both; just tells browsers that you want the sidebars and content areas to extend all the way down to the footer. I'd go more into detail with that, but it's not really necessary right now; all you need to know is that it works.

Do the HTML, close the body, save the document, upload.
 
Jamesisgsnap
post Sep 14 2009, 08:47 PM
Post #10


Senior Member
****

Group: Member
Posts: 164
Joined: May 2008
Member No: 647,219
http://gippersnaplyts.com/Newdomainpractice.php

Okay.
I didn't align them yet.
But...
It's hiding the left corner navi a lot.
Like, I have each thing for the navi side up there.
And it hides it.
:(.
Like it hides The Navigation section, and part of the Myspace content.
 
fixtatik
post Sep 14 2009, 11:59 PM
Post #11


Senior Member
******

Group: Member
Posts: 1,237
Joined: May 2008
Member No: 648,123
Well, you kinda mutilated the example template I gave you. It's almost as if you pasted wherever your cursor happened to be.

Rather than writing an essay about the problems you need to fix, I put your source code together in an image. All that's left is the structural HTML. Green lines are parts that are fine. Red lines are parts you need to fix. Yellow is just a tip. You need to think back to 1st grade English, too (not to be offensive, just using it as an example): indent, indent, indent!

By the way...the way you have your site set up is a search engine nightmare, but I won't go into that since this is about structure.



edit: You're also trying to put 192-pixel-wide tables into sidebars that are 150 pixels wide. Either drop the tables to 150 pixels, or increase the sidebars to 192 pixels (and adjust the width of the "main" div accordingly).
 
Jamesisgsnap
post Sep 15 2009, 03:47 PM
Post #12


Senior Member
****

Group: Member
Posts: 164
Joined: May 2008
Member No: 647,219
Jesus this is confusing -_-
 
fixtatik
post Sep 16 2009, 02:27 AM
Post #13


Senior Member
******

Group: Member
Posts: 1,237
Joined: May 2008
Member No: 648,123
You're making this harder than it really is. Your problem isn't CSS; it's basic HTML structure.

CODE
<!DOCTYPE>
<html>
<head></head>
<body>
body content
</body>
</html>

HTML isn't magic, so it doesn't know what you mean if you don't do it perfectly. When you start a tag, and put another tag inside it, that nested tag has to end before the first one does.

Incorrect:
CODE
<p>Lorem ipsum <span>dolor sit amet</p></span>

Correct:
CODE
<p>Lorem ipsum <span>dolor sit amet</span></p>


When you applied the example template I gave you, you put div tags, head tags, bodies all over the place, with no rhyme or reason. Go back and look at the example template, then look at the image I posted earlier, and compare them.
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic