Log In · Register

 
 
 Closed TopicStart new topic
Livejournal Layout Confusion, Just completely confused
xxangel
post Aug 6 2006, 01:38 PM
Post #1


Newbie
*

Group: Member
Posts: 2
Joined: Feb 2005
Member No: 104,515
I've attempted to code layouts in LJ before, but they've all failed. I'm just completely and utterly lost when it comes to coding in LJ. I have the layout completely coded outside of LJ, and you can see it here:

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=iso-8859-1" />
<title>a caravan of fortunes</title>
<style type="text/css">

<!--

body {
cursor: default;
font-size: 0.8em;
font-family: verdana, arial;
color: #516F9F;
background: url("http://img357.imageshack.us/img357/9660/backgrounduu0.gif");
margin: 0;
padding: 0;
}

#container {
border-left: 10px solid #516F9F;
border-right: 10px solid #516F9F;
width: 505px;
min-height: 100%;
background: url("http://img182.imageshack.us/img182/2776/bgnk4.gif");
margin: 0 auto;
}

#top {
width: 505px;
height: 212px;
background: url("http://img303.imageshack.us/img303/4861/mainss0.gif");
}

#left {
float: left;
width: 158px;
padding-left: 14px;
font-size: 0.8em;
}

#right {
float: right;
width: 315px;
padding-right: 6px;
font-size: 0.8em;
}

#footer {
clear: both;
width: 505px;
height: 31px;
background: url("http://img371.imageshack.us/img371/6250/footeraz9.gif");
}

h1 {
font-weight: bold;
font-size: 1.4em;
font-family: arial, verdana;
padding: 0;
margin: 0 0 7px 0;
}

h2 {
font-weight: bold;
font-size: 1.4em;
font-family: arial, verdana;
padding: 0;
margin: 0;
text-align: right;
text-decoration: underline;
}

h2:first-letter {
border: 1px solid;
padding: 5px;
font-size: 1.3em;
background: #E6EBF2;
}

.icon {
float: left;
width: 104px;
height: 104px;
background: #E6EBF2;
margin-right: 5px;
}

.links {
font-size: 1.1em;
text-align: right;
padding: 2px 0px 2px 0px;
margin: 5px 0 5px 0;
background: #E4EAF3;
}

.links ul {
margin: 0px;
padding: 0px;
}

.links li {
padding: 0px 7px 0px 7px;
margin: 0px;
display: inline;
}

a {
text-decoration: none;
color: #3E5C8A;
cursor: default;
}

a:hover {
text-decoration: underline;
cursor: default;
}

h3 {
font-weight: normal;
font-size: 0.9em;
text-align: right;
margin: 0 0 7px 0;
color: #7691B8;
}
-->
</style>

</head>

<body>
<div id="container">
<div id="top"></div>
<div id="left">
<h1>About Me</h1>
I am a girl
</div>
<div id="right">
<h2>Summer 2006 Volunteer Trip</h2>
<h3>4th-Aug-2006 03:11 pm</h3>
<div class="icon">
</div>
Test test test test</b>
<div class="links">
<ul>
          <li><a href="http://yingna.livejournal.com/7191.html">Read 2</a></li><li><a href="http://yingna.livejournal.com/7191.html?mode=reply">Speak</a></li><li><a href="http://yingna.livejournal.com/7191.html">Link</a></li><li><a href="http://www.livejournal.com/editjournal.bml?journal=yingna&amp;itemid=7191">Edit</a></li><li><a href="http://www.livejournal.com/edittags.bml?journal=yingna&amp;itemid=7191">Edit Tags</a></li><li><a href="http://www.livejournal.com/tools/memadd.bml?journal=yingna&amp;itemid=7191">Remember</a></li>

          </ul>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>


However, the only thing I got up to in my LJ was this:

CODE
GLOBAL_HEAD<=

<style type="text/css">

<!--

body {
cursor: default;
font-size: 0.8em;
font-family: verdana, arial;
color: #516F9F;
background: url("http://img357.imageshack.us/img357/9660/backgrounduu0.gif");
margin: 0;
padding: 0;
}

#container {
border-left: 10px solid #516F9F;
border-right: 10px solid #516F9F;
width: 505px;
min-height: 100%;
background: url("http://img182.imageshack.us/img182/2776/bgnk4.gif");
margin: 0 auto;
}

#top {
width: 505px;
height: 212px;
background: url("http://img303.imageshack.us/img303/4861/mainss0.gif");
}

#left {
float: left;
width: 158px;
padding-left: 14px;
font-size: 0.8em;
}

#right {
float: right;
width: 315px;
padding-right: 6px;
font-size: 0.8em;
}

#footer {
clear: both;
width: 505px;
height: 31px;
background: url("http://img371.imageshack.us/img371/6250/footeraz9.gif");
}

h1 {
font-weight: bold;
font-size: 1.4em;
font-family: arial, verdana;
padding: 0;
margin: 0 0 7px 0;
}

h2 {
font-weight: bold;
font-size: 1.4em;
font-family: arial, verdana;
padding: 0;
margin: 0;
text-align: right;
text-decoration: underline;
}

h2:first-letter {
border: 1px solid;
padding: 5px;
font-size: 1.3em;
background: #E6EBF2;
}

.icon {
float: left;
width: 104px;
height: 104px;
background: #E6EBF2;
margin-right: 5px;
}

.links {
font-size: 1.1em;
text-align: right;
padding: 2px 0px 2px 0px;
margin: 5px 0 5px 0;
background: #E4EAF3;
}

.links ul {
margin: 0px;
padding: 0px;
}

.links li {
padding: 0px 7px 0px 7px;
margin: 0px;
display: inline;
}

a {
text-decoration: none;
color: #3E5C8A;
cursor: default;
}

a:hover {
text-decoration: underline;
cursor: default;
}

h3 {
font-weight: normal;
font-size: 0.9em;
text-align: right;
margin: 0 0 7px 0;
color: #7691B8;
}

table, tr, td, .shadowed {
background: transparent;
}

-->
</style>


<=GLOBAL_HEAD

LASTN_WEBSITE<=

<div id="container">
<div id="top"></div>
<div id="left">
<h1>About Me</h1>
I am a girl
</div>
<div id="right">

<=LASTN_WEBSITE


And the LASTN_WEBSITE thing doesn't show up in my LJ. Can anyone give me a start in the code...like start it so I know how it looks?
 
Mulder
post Aug 6 2006, 02:48 PM
Post #2


i lost weight with Mulder!
*******

Group: Official Designer
Posts: 4,070
Joined: Jan 2005
Member No: 79,019
ok, first thing: LJ has its own elements. if you know html, you'll be better at coding lj, but its not exactly the same. plus, LJ has its own elements. also, make sure you have all styles set to generator and have a website listed in your profile.

sorry if this isn't exactly what you want (i'm not actually testing this):
CODE
GLOBAL_HEAD<=
<title>a caravan of fortunes</title>

<style type="text/css">

<!--

body {
cursor: default;
font-size: 0.8em;
font-family: verdana, arial;
color: #516F9F;
background: url("http://img357.imageshack.us/img357/9660/backgrounduu0.gif");
margin: 0;
padding: 0;
}

table {
float: right;
width: 315px;
padding-right: 6px;
font-size: 0.8em;
}

#footer {
clear: both;
width: 505px;
height: 31px;
background: url("http://img371.imageshack.us/img371/6250/footeraz9.gif");
}



td.index {
font-weight: bold;
font-size: 1.4em;
font-family: arial, verdana;
padding: 0;
margin: 0;
text-align: right;
text-decoration: underline;
}

td.index:first-letter {
border: 1px solid;
padding: 5px;
font-size: 1.3em;
background: #E6EBF2;
}

.icon {
float: left;
width: 104px;
height: 104px;
background: #E6EBF2;
margin-right: 5px;
}

.links {
font-size: 1.1em;
text-align: right;
padding: 2px 0px 2px 0px;
margin: 5px 0 5px 0;
background: #E4EAF3;
}

.links ul {
margin: 0px;
padding: 0px;
}

.links li {
padding: 0px 7px 0px 7px;
margin: 0px;
display: inline;
}

a {
text-decoration: none;
color: #3E5C8A;
cursor: default;
}

a:hover {
text-decoration: underline;
cursor: default;
}

h3 {
font-weight: normal;
font-size: 0.9em;
text-align: right;
margin: 0 0 7px 0;
color: #7691B8;
}

table table {
width: 100%;
margin:0;

}
table table table {
width: auto;

}
html>body table{
position: relative;

}

table, tr, td, .shadowed {
background: transparent;
}

-->
</style>


<=GLOBAL_HEAD

LASTN_WEBSITE<=

<div id="container">
<div id="top"></div>
<div id="left">
<h1>About Me</h1>
I am a girl
</div>
<div id="right">

<style type='text/css'>
#container {
border-left: 10px solid #516F9F;
border-right: 10px solid #516F9F;
width: 505px;
min-height: 100%;
background: url("http://img182.imageshack.us/img182/2776/bgnk4.gif");
margin: 0 auto;
}

#top {
width: 505px;
height: 212px;
background: url("http://img303.imageshack.us/img303/4861/mainss0.gif");
}

#left {
float: left;
width: 158px;
padding-left: 14px;
font-size: 0.8em;
}

h1 {
font-weight: bold;
font-size: 1.4em;
font-family: arial, verdana;
padding: 0;
margin: 0 0 7px 0;
}
</style>
<=LASTN_WEBSITE
LASTN_TALK_LINKS<=
<tr>
<td colspan="2" width="100%" class="links">
%%readlink%%<a href="%%urlpost%%">Speak</a><br /><br />
<center><hr color="#700F3C"></center>
</td>
</tr>
<=LASTN_TALK_LINKS



ok, so its been 6 weeks since ive touched an LJ. its very likely that i messed something up. ive gotten you started... and dani will probably come behind me and finish the rest.
 
xxangel
post Aug 6 2006, 03:07 PM
Post #3


Newbie
*

Group: Member
Posts: 2
Joined: Feb 2005
Member No: 104,515
Thanks for the help and coding, and it does help me get a start. But, I just want to ask if there's a way to write coding AFTER the entries? Because, my layout requires coding to go in after the entries.

I'm tweaking the coding to make it look a little better until I get an answer to the question.

Edit: I made the layout look somewhat okay on IE (missing footer and I couldn't get rid of the margins) but that was only because I was using the dysfunctions of IE to my advantage (if I could only add something AFTER the entries, then my layout would look all right). On all other browsers, my layout looks messed up.

BTW, I'm also using the layout style of Magazine instead of Generator and the coding is now:

CODE
GLOBAL_HEAD<=
<style type="text/css">

<!--

body {
cursor: default;
font-size: 0.8em;
font-family: verdana, arial;
color: #516F9F;
background: url("http://img357.imageshack.us/img357/9660/backgrounduu0.gif");
margin: 0;
padding: 0;
}

h1, .Navigation {
display: none;
}

#container {
border: 10px solid #516F9F;
width: 505px;
min-height: 100%;
background: url("http://img182.imageshack.us/img182/2776/bgnk4.gif");
margin: 0 auto;
}

#top {
width: 505px;
height: 212px;
background: url("http://img303.imageshack.us/img303/4861/mainss0.gif");
}

#left {
float: left;
width: 158px;
padding-left: 14px;
font-size: 0.8em;
}

h4 {
font-weight: bold;
font-size: 1.4em;
font-family: arial, verdana;
padding: 0;
margin: 0 0 7px 0;
}

#footer {
clear: both;
width: 505px;
height: 31px;
background: url("http://img371.imageshack.us/img371/6250/footeraz9.gif");
}

h2 {
font-weight: bold;
font-size: 1.4em;
font-family: arial, verdana;
padding: 0;
margin: 4px 0 0 0;
text-align: right;
text-decoration: underline;
border-bottom: 0;
}

h2:first-letter {
border: 1px solid;
padding: 5px;
font-size: 1.3em;
background: #E6EBF2;
text-decoration: none;
}

.icon {
float: left;
width: 104px;
height: 104px;
background: #E6EBF2;
margin-right: 5px;
}

.links {
font-size: 1.1em;
text-align: right;
padding: 2px 0px 2px 0px;
margin: 5px 0 5px 0;
background: #E4EAF3;
}

.links ul {
margin: 0px;
padding: 0px;
}

.links li {
padding: 0px 7px 0px 7px;
margin: 0px;
display: inline;
}

a {
text-decoration: none;
color: #3E5C8A;
cursor: default;
}

a:hover {
text-decoration: underline;
cursor: default;
}

#right {
float: right;
width: 315px;
padding-right: 6px;
font-size: 0.8em;
background: #CDD8E9;
}

.H3Holder {
width: 315px;
border: 0;
margin: 0;
padding: 0;
}

h3 {
font-weight: normal;
font-size: 1.0em;
text-align: right;
margin: 0 0 7px 0;
color: #7691B8;
}

h3 span {
border: 0;
padding: 0;
}
-->
</style>
<=GLOBAL_HEAD

LASTN_WEBSITE<=
<div id="container">
<div id="top"></div>
<div id="left">
<h4>About Me</h4>
I am a girl
</div>
<div id="right">
<=LASTN_WEBSITE

LASTN_TALK_LINKS<=
<div class="links">
<ul><li>
<a href="%%urlread%%">Read</a></li>
<li><a href="%%urlpost%%">Speak</a></li>
</ul>
</div>
<=LASTN_TALK_LINKS


Second Edit: Since no one answered my question yet, I just went with s2 and did tweaking to another template. But, it doesn't allow me to really write anything (HTML-wise) in the profile, so I would like to still be able to get up the layout coding I had before.
 
« Next Oldest · Livejournal 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: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic