Log In · Register

 
Help with coding/layout
wordstoasong
post Jan 18 2008, 10:37 PM
Post #1


Senior Member
***

Group: Member
Posts: 30
Joined: Jan 2008
Member No: 612,365
http://www.freewebs.com/larajmarshalldotcom/

I'm looking for help with a layout like the one on the above site link.
Of course, I'd have different link titles, main title and not Laura J Marshall as an image.

Any help on how to create this type of layout, that would be great.
 
 
 Start new topic
Replies
digitalfragrance
post Jan 18 2008, 11:10 PM
Post #2


Adobe Addict
******

Group: Staff Alumni
Posts: 1,237
Joined: Mar 2005
Member No: 113,043
That's really simple. It's based on DIV layers. Actually this page only has 2, so it would be really easy to imitate. First, you make your background image in your image program and upload it on the web (like http://imageshack.us). Second, you code your website with the font styles, background color, link styles, etc. Third, you create DIV layers for your content.

It would look something like this (feel free to edit it as you please biggrin.gif)
CODE
<html>


<head>

<title>TITLE OF WEBPAGE HERE</title>

</head>

<body>
<style type="text/css">

body {
/* edits the scrollbar and background */
scrollbar-arrow-color: #000000;
scrollbar-track-color:#ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
background-color: #ffffff;
cursor: normal;
background-image:

url("");
background-repeat: repeat-y;
background-align: left;
overflow-x: hidden;  }


a:link{
/* edits all the links */
color: #6a6a6a;
  font:14px century gothic;
text-decoration: none;
text-transform: Uppercase;
letter-spacing: 0px;
cursor:normal;
}

a:visited{
/* edits all the visited links */
color: #6a6a6a;
  font:14px century gothic;
text-decoration: none;
text-transform: Uppercase;
letter-spacing: 0px;
cursor:normal;
}

a:hover{
/* edits all the hovered links */
color: #3380c2;
  font:14px century gothic;
text-decoration: none;
text-transform: Uppercase;
letter-spacing: 0px;
cursor:normal;
}

input, select, textarea, iframe.htmleditor,

.textfield, .button {
/* edits the buttons, dropdowns, etc. */
border: 1px solid #000000;
font: 12px century gothic;
background-color: transparent;
color: #000000;
letter-spacing:0px;
}


p {
/* edits all of the paragraphs */
align: justify;

}

b {
/* edits all the bolded words */
color: #3380c3;
font-weight: bold;
letter-spacing:0px;
font: 12px century gothic;
text-transform: none;
}

I, EM {
/* edits all the italic words */
color: #3380c3;
letter-spacing:0px;
font: 12px century gothic;
text-transform:none;
background-color:none;
}

u {
/* edits all the underlined words */
color: #3380c3;
letter-spacing:0px;
font-size: 12px;
text-transform:none;
font-style:none;
background-color:none;
}


body, div {
font: 12px century gothic;
line-height:normal;
color: #000000;
letter-spacing:0px;
text-align:justify;
text-transform:none;

}
</style>

<div style="position: absolute; width: ##px; height: ##px; margin-left: 0px; margin-top: 0px; overflow: auto;">
<img src="IMG URL OF BACKGROUND IMAGE HERE">

</div>


<div style="position: absolute; width: ##px; height: ##px; margin-left: ##px; margin-top: ##px; overflow: auto;">
TYPE YOUR TEXT CONTENT HERE

</div>


</body>
</html>
 

Posts in this topic
wordstoasong   Help with coding/layout   Jan 18 2008, 10:37 PM
digitalfragrance   That's really simple. It's based on DIV l...   Jan 18 2008, 11:10 PM
wordstoasong   Thank you very much. This is really helpful. Now a...   Jan 20 2008, 01:36 AM
digitalfragrance   ^ I'm not quite sure what you're talking a...   Jan 21 2008, 04:52 PM
Fawaz   I view the source of you page and got you code CO...   Feb 5 2008, 09:16 PM

« 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 · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic