Log In · Register

 
 
 Closed TopicStart new topic
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.
 
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>
 
wordstoasong
post Jan 20 2008, 01:36 AM
Post #3


Senior Member
***

Group: Member
Posts: 30
Joined: Jan 2008
Member No: 612,365
Thank you very much. This is really helpful.
Now a question:
I'm having troubles placing the words in the box. Any ideas/suggestions/tips? Thank you.

EDIT:
http://www.freewebs.com/tammys-tackshop/
This is my site now, as you can see, the words "under construction" are not in the box.
 
digitalfragrance
post Jan 21 2008, 04:52 PM
Post #4


Adobe Addict
******

Group: Staff Alumni
Posts: 1,237
Joined: Mar 2005
Member No: 113,043
^ I'm not quite sure what you're talking about. Could you post the editted coding to your website?
 
newkidontheblock
post Feb 5 2008, 09:16 PM
Post #5


Offline.
*****

Group: Official Designer
Posts: 609
Joined: Mar 2007
Member No: 507,591
I view the source of you page and got you code
CODE
<html>


<head>

<title>Tammy’s Tack Shop</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: #1f80d9;
cursor: normal;
background-image:

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


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

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

a:hover{
/* edits all the hovered links */
color: #3380c2;
font:10px arial;
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: 10px arial;
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: 10px arial;
text-transform: none;
}

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

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


body, div {
font: 10px arial;
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="http://i26.tinypic.com/ofvx1y.png">

</div>

<div style="position: absolute; width: 373px; height: 450px; margin-left: 410px; margin-top: 70px; overflow: auto;">
<br>Welcome to the newly re-designed Tammy’s Tack Shop.
<br>We are happy to serve you with new products and information about our stuff.
<br><br>Located in Kenora, Ontario, you won’t find any other handmade products likes ours anywhere else except here.
<br><br>Our polo wraps and saddle pads are made of soft colorful fleece, with Velcro straps for the wraps and solid color binding for the pads. Lead ropes come in a range of solid colors, with a bull snap on the end.
<br><br>Looking for something custom? Email us! We'll be happy to help you out!
<br><br>Also, we have new products coming out soon, so keep a watchful eye on our new works. We hope you enjoy our new site, and please do come back soon!
<br><br><br>An extra huge thank you to Tay Smith for creating the lovely layout design. You can contact her at: <a href="http://myspace.com/teelerthekitty">myspace.com</a>

<br><br>WRITE WHAT YOU WANT HERE


</div>

<!-- --><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="freewebs.com";urchinTracker();}</script></body>
</html>

<div style="position: absolute; width: 100px; height: 95px; margin-left: 10px; margin-top: 500px; overflow: auto;">
<a href="http://www.freewebs.com/tammys-tackshop/Index.htm">Home</a>
<br><br><br>
<a href="http://www.freewebs.com/tammys-tackshop/bio.htm">Bio</a>
<br><br><br>
<a href="http://www.freewebs.com/tammys-tackshop/gallery.htm">Gallery</a>
<br>
</div>

<div style="position: absolute; width: 400px; height: 95px; margin-left: 320px; margin-top: 500px; overflow: auto;">
<a href="http://www.freewebs.com/tammys-tackshop/products.htm">Products</a>
<br><br><br>
<a href="http://www.freewebs.com/tammys-tackshop/FAQ.htm">FAQ</a>
<br><br><br>
<a href="http://www.freewebs.com/tammys-tackshop/Order.htm">Order</a>
<br>
</div>


scroll down and find the red to change.
 
« 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: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic