Help - Search - Members - Calendar
Full Version: Css help?
Forums > Resource Center > Webmasters' Corner
Gippersnap
Sep 13 2009, 03:25 AM
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/
Mike
Sep 13 2009, 03:44 AM
Read through this tutorial or this tutorial. If those aren't helpful, you can always search for more on Google or Yahoo.
Gippersnap
Sep 13 2009, 04:34 AM
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.
click to enlarge

I really wanna get this problem solved :|


http://gippersnaplyts.com/Domain_practice.php
Mike
Sep 13 2009, 05:04 AM
Why do you keep saying "domain lyt"? I'm sure everyone can see it's a website template. We've discussed this issue before, haven't we?

QUOTE(Mike @ Aug 10 2009, 03:43 AM) *
It only happens to people who have resolutions smaller than the width of your whole layout. I can see that happening since your layout is quite large, innit? Sorry but I don't think there's a solution besides finding another way to center your layout.

QUOTE(fixtatik @ Aug 10 2009, 03:59 AM) *
It's not even how you're centering the layout; it's because your layout is tremendously wide. Because of the size of your layout, the minimum resolution a visitor can have without having that scroll bar and getting cut off is 1152x720. Believe it or not, most people are still using 1024x768. The only solution is to sacrifice the width.

But anyway, try another centering method. Add this to your stylesheet:

CODE
body {
text-align: center;
}

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

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

Then construct your layout like this:

CODE
<div id="container">
<div id="frame">
Insert your layout codes here.
</div>
</div>

Something like that should do. See if it works.
Gippersnap
Sep 13 2009, 05:42 AM
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...
Mike
Sep 13 2009, 05:57 AM
It's not that. You obviously forgot about the other topic you posted on this problem. It's the fact that you are using this method of centering:

CODE
<div style="position: absolute; top: -6px; left: 50%; margin-left: -547px;">

Like Elia said on your previous topic:

QUOTE(fixtatik @ Aug 10 2009, 02:11 PM) *
Scroll bars in browsers go left to right. If something goes beyond the left margin or the top margin, that portion will get cut off.

That's why part of your layout gets hidden, and that's also why I provided another way for you to center your layout. However, you can stick with the method you are using. You just need to calculate the margin-left value again. The width of your layout is 990px, and half of that is 495 and not 547. That's why it's a little too much over to the left. Just fix that and it should be properly aligned.
Gippersnap
Sep 13 2009, 06:05 AM
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?
Mike
Sep 13 2009, 06:20 AM
You need to change it to -495px, yes. It shouldn't misalign on your screen but if it does, post a screenshot and all the codes you're using.
Gippersnap
Sep 13 2009, 06:34 AM
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>


click to enlarge

It's the layout now.
Mike
Sep 13 2009, 06:37 AM
The cause of your problem is the advertisement on the right. You'll need to find another spot for it to go in or else your problem will never be solved. I mean, it's starting to come together. You just need to fix the positioning of the background and the content then it's complete.
Gippersnap
Sep 13 2009, 06:38 AM
Okay, the ad is taken out, any other idea on what to do?

http://gippersnaplyts.com/Domain_practice.php
Mike
Sep 13 2009, 06:44 AM
You'll need to fix the position of the borders on the background that mark the content areas, then the position of the content in the middle.
Gippersnap
Sep 13 2009, 06:46 AM
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.
Mike
Sep 13 2009, 10:26 AM
You're not positioning areas. You're positioning content into areas. Like I said, recalculate the updates and sidebars' margin-left values. Don't forget to fix up the background as well.
Gippersnap
Sep 13 2009, 03:40 PM
Idk what to do for the background -_-.
But for the areas.
Just put margin: left at half the widths of the sidebar? px?
Mike
Sep 13 2009, 04:09 PM
No. Just adjust them until they're where they need to be. You can't calculate their position based on widths because you don't want them absolutely centered. You want one on the left and the right. For the background, move the designated areas over to the right by 52 pixels.
fixtatik
Sep 14 2009, 05:19 AM


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.
Gippersnap
Sep 14 2009, 08:47 PM
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
Sep 14 2009, 11:59 PM
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.

click to enlarge


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).
Gippersnap
Sep 15 2009, 03:47 PM
Jesus this is confusing -_-
fixtatik
Sep 16 2009, 02:27 AM
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.