Help - Search - Members - Calendar
Full Version: I need help with my layout.
Forums > Resource Center > Graphics Help > Resolved Topics
theerinkal
Aug 24 2008, 02:00 PM
I need help with the coding of the links.

I am trying to get only one link on a line.

Like This One.

This Is My Coding for my layout:

CODE

body{background:#fff url('http://img182.imageshack.us/img182/7577/bodybg2in2.png') repeat-y;text-align: normal;margin: 00px 0 00px 0}

div,body{font: 9px georgia;color: #969593;line-height: 11px;}

ul{list-style-type:circle;color:000;line-height: 12px;}

#content{position:absolute;width:750px;left:165px;top:480px;z-index:1;}

#side1{position:absolute;width:156px;left:2px;top:480px;z-index:2;}

#side2{position:absolute;width:164px;left:922px;top:479px;z-index:2;}

#content h1{background-color: pink;letter-spacing: 0px;font-family: arial black;font-size: 9px;color:hotpink;font-weight: normal;padding-top: 4px;padding-bottom: 4px;margin-bottom:6px;margin-top:0px;padding-right:6px;text-align: right;text-transform: uppercase;border-bottom: 1px dotted #9ca892;}

#content a:hover{text-decoration: none;color: purple;font-weight:none;letter-spacing:0px}

#content a:link,a:active{text-decoration: none;color: #000;font-weight:none;letter-spacing:0px;}

#content a:visited{text-decoration: none;color: #000;font-weight:none;letter-spacing:0px;}

#side1 h3{background-color: hotpink;letter-spacing: 0px;font-family: arial black;font-size: 9px;color:pink;font-weight: normal;padding-top: 4px;padding-bottom: 4px;margin-bottom:6px;margin-top:0px;padding-right:6px;text-align: right;text-transform: uppercase;border-bottom: 1px dotted #9ca892;}

#side1 a:hover{text-transform : none;border-bottom: 1px dotted #000000;color: purple;font-weight:none;letter-spacing:0px;}

#side1 a:link,a:visited,a:active{text-decoration: none; text-transform : none;color: #000;font-weight:none;letter-spacing:0px; line-height: 11px;background:brown;}

#side2 h3{background-color: #dfe0df;letter-spacing: 0px;font-family: arial black;font-size: 9px;color:p;font-weight: normal;padding-top: 4px;padding-bottom: 4px;margin-bottom:6px;margin-top:0px;padding-right:6px;text-align: right;text-transform: uppercase;border-bottom: 1px dotted #9ca892;}

#side2 a:hover{text-decoration: underline; text-transform : none;border-bottom: 1px dotted #000000;color: purple;font-weight:none;letter-spacing:0px;}

#side2 a:link,a:visited,a:active{text-decoration: none; text-transform : none;color: #000;border-bottom: 1px dotted #000000;font-weight:none;letter-spacing:0px;}


That is the coding I have. I don't know what I should change. Ask me if you need all of the code inclueding the text.
Smarmosaur
Aug 24 2008, 02:10 PM
your CSS has nothing to do with it. please give us a screenshot and the rest of your coding.
also, is this a website or myspace layout?
theerinkal
Aug 24 2008, 02:36 PM
This is a website layout. Do you mean a screenshot of my layout or my coding? I'll give you both.






nikx618
Aug 24 2008, 02:38 PM
have you tried just putting a simple br?
CODE
<BR>
Smarmosaur
Aug 24 2008, 02:38 PM
ok, i see what you need, but please post the rest of your coding. :]
theerinkal
Aug 24 2008, 02:39 PM
I don't quite have the text all in the right places on the screenshot of my site
theerinkal
Aug 24 2008, 02:40 PM
ok here is all of my coding. From top to bottom (without the extra text in the background.)

CODE

<html>
<head>

<title>Sugar-Blossom.net</title>

<style type="text/css">

b {font-weight: bold; color: #b77de1;}
u {text-decoration: underline; border-bottom: 2px solid #f3e6b8; color: #e7b2ab;}
i {font-style: italic; color: #f294b4; font-weight: bold;}
p {margin: 0; margin-bottom: 8px;}

#content A:link, #content A:visited { text-decoration: none; color:#7dda7e; cursor: crosshair; font-family: arial; font-weight: bold; border-bottom: 1px dashed #c6c6c6;}
#content A:hover { text-decoration:none; color:#f38181; cursor: crosshair; font-family: arial; border-bottom: 3px double #c6ffb8; }

#navi A, #navi A:link, #navi A:visited { display:block; margin:1px; margin-left:1px; margin-right:1px; ; padding:1px; letter-spacing: 1px; cursor: crosshair; text-decoration:none; color:#fc93ae; font-family: arial; font-weight: bold; text-align: center;}
#navi A:hover { text-decoration:none; color:#75d16f; font-family: arial; font-weight: bold; text-align: center; border: none;}

body {
cursor: ne-resize;
background-color:#e5dffc;
margin:0px;
text-align: justify;
min-width: 700px;
background-image:url(http://img142.imageshack.us/img142/2562/bodybg2qd1.png); background-repeat:repeat-y;
font-family:tahoma, arial; font-size: 11px; line-height: 16px;}


#content {width:385px; position:absolute; left:240px; top:520px; color:#666666; }

#navi {width:167px; position:absolute; left:44px; top:520px; color: #a295de; text-align: justify;}

h1 { display: block; font-family: "century gothic"; font-size: 18px; font-weight: normal; height: 36px; text-align: right; color: #a586b5; background: url(http://cbimg9.com/layouts/08/08/30242ah.jpg) no-repeat; padding-top: 8px; padding-right: 15px; margin: 0;}
h2 { display: block; margin-left: 1px; font-size: 16px; height: 34px; text-align: center; color: #e497c7; font-weight: bold; background: url(http://cbimg9.com/layouts/08/08/30242ai.jpg) no-repeat; padding-top: 7px; padding-right: 2px; margin: 0;}

</style></head>
<BODY BGCOLOR="#fff" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="http://img142.imageshack.us/img142/7083/headerbg2pj8.png" ALT="" usemap="#Map" BORDER="0"></TD>
</TR></TABLE><body>
<div id="navi"><center>

<h2>About Me?</h2>

<center><img src="http://cbimg9.com/layouts/08/08/30242af.jpg" border="0"></center>
<br>You can talk about random stuff here... I dunno. Short introduction of your site? Or yourself? Maybe write about your latest site updates. Or put some pictures here (but the width of the picture shouldn't exceed 150 pixels). Well, you decide. =)<br>

<br><h2>Navigation</h2>

<a href="#">Home</a>

<a href="#">Visitor Content</a>

<a href="#">Guestbook</a>

<a href="#">About The Site</a>

<a href="#">Webmistress</a>

<a href="#">Affiliates</a>

<a href="#">Links Out</a>


<br><h2>Credits</h2>

Layout By:<a href="http://dreamgurl36.createblog.com" target="_blank"> dreamgurl36</a>

</center>
</div>


<div id="content">

<h1>About This Layout....</h1>

<p>This is where your <i>main content</i> will go. Fill up as much or as little as you want! XD It's all up to you!</p>

<p>Please do not alter the images/layout in any way. And it goes without saying.... <b>do not remove the credit</b>. I mean... I've taken the time to code this, so the least you can do is leave the credit there. But of course.... you may edit the navigation, contents, and such to suit your website needs. I think you'd need some basic knowledge of <u>HTML and CSS</u> to be able to fully make use of this layout. But it's nothing too complicated. There are plenty of tutorials on the web, and even some on <a href="http://www.createblog.com" target="_blank">CreateBlog</a> too.</p>

<p>This layout was tested in both Internet Explorer and Firefox. In Firefox, the font of the text will be slightly different. Other than that, it works perfectly fine.... compatible in <b>both</b> browsers. ^^ Oh, and it works in <i>all resolutions</i> too. :) Hope you enjoy it!</p>

<center><b>This is bold text.</b><br>
<u> This is underlined text.</u><br>
<i>This is italic text.</i><br>
<a href="#" target="_blank">This is a link</a>
</center>

<br><h1>Header Title Goes Here</h1>
<p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p>

<p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p>

<p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p>

</div>

</body>
</html>
theerinkal
Aug 24 2008, 02:45 PM
QUOTE(nikx618 @ Aug 24 2008, 02:38 PM) *
have you tried just putting a simple br?
CODE
<BR>


yes but I liked the way that other person did hers.
Smarmosaur
Aug 24 2008, 02:46 PM
all you need to do is add a line break after each link.
CODE
<br />
theerinkal
Aug 24 2008, 02:48 PM
Do you know how she did hers? I mean with the background and left border. I'm not stupid (if that is what you are thinking) I know a lot of coding just not that.
Smarmosaur
Aug 24 2008, 02:53 PM
all she (or he) did was place all of her navigation in a DIV, then styled it with CSS.

CODE
#navi a, #navi a:link, #navi a:active, #navi a:visited { color:#c4689d;
font-size:10px;
font-family:arial;
line-height:15px;
display:block;
text-align: left;
text-transform: uppercase;
letter-spacing: none;
text-decoration: none;
background-color: #f3f3f3;
color: #cd1a55;
font-style: normal;
padding: 0px 0px 2px 2px;
border-left: 3px solid #f16c98;
}
#navi a:hover, #navi a:focus {
color:#765183;
cursor: default;
text-align: right;
text-decoration: none;
font-style: none;
padding-right: 3px;
background: #e5cff0 url();
border-left: 3px solid #9f78ad;
}


CODE
<h4>Menu</h4>

<div id="navi">
<a href="#">Home</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a></div>
<div id="navi2">
<a href="#">Link</a></div>
<p>



DO NOT TAKE THAT CODING! I just posted it (and probably shouldn't have) for an example. don't copy and paste, don't type it letter from letter. take that bit of codes as an example and do it yourself.
theerinkal
Aug 24 2008, 02:56 PM
I know but that is a good note for other users. I know not to just steal coding. I give credit where it is needed.
theerinkal
Aug 24 2008, 02:57 PM
thanks!
theerinkal
Aug 24 2008, 03:03 PM
Do you want to see my site when it is done?
schizo
Aug 24 2008, 04:26 PM
Topic closed and moved to Resolved.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.