objecterror
Daemon Poster
- Messages
- 734
- Location
- United States
The screen shot is pretty bad, but I want to set up my navigation so that it replaces the area underneath the "Welcome To" bar, can anyone help?
Not the final option
- Thread starter objecterror
- Start date
- Status
OP
OP
objecterror
Daemon Poster
- Messages
- 734
- Location
- United States
<head>
<title>Vudoo Soul;;</title>
<style>
body {background-color: #6F0605;}
font, p, div, td, table {font-family: tahoma; font-size: 12px; font-weight:normal; color: #000000;}
#img {position: absolute; top: 20px; left: 200px;}
#side {position: absolute; top: 390px; left: 200; width: 180px;}
#roots {position: absolute; top: 390px; left: 390; width: 400px;}
.header {display: block; border-right: 10px solid #000000; background-color:#AB120F; text-align: right; padding-right: 10px; font-family: times; font-size:24px; font-weight:normal; line-height: 15px;
text-transform:lowercase;}
.header2{display: block; border-left: 10px solid #000000; background-color: #ab120f; text-align: left; padding-left: 10px; font-family:times; font-size:24px; font-weight:normal; text-transform: lowercase; line-height: 15px;}
a:link, a:active, a:visited {color: #000000; text-decoration: none;}
a:hover {cursor: crosshair; text-decoration:none; color: black; border-bottom: 1px #000000 dotted;}
a.nav:link, a.nav:visited, a.nav:active {text-align: center; display: block; border: 10px solid #000000; border-top:none; border-bottom:none; width:90%; color:black; background-color:#8C0100; text-transform:lowercase; letter-spacing: 1px; font-size: 11px;}
a.nav:hover {border: 10px solid #FFFFFF; border-top:none; border-bottom:none; color:FFFFFF; letter-spacing: 2px}
</style>
</head>
<img src="http://cbimg9.com/layouts/07/07/18/19648aa.jpg" width="592" height="366" id="img">
<div id="side">
<span class="header">About</span>
<p>
Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here
</p>
<span class="header">Navigation</span>
<P><center>
<a class="nav" href="http://urlname.com/">Stories</a>
<a class="nav" href="http://urlname.com/">Artwork</a>
<a class="nav" href="http://urlname.com/">Blog</a>
<a class="nav" href="http://urlname.com/">Escape</a>
<a class="nav" href="http://urlname.com/">URL Name Here</a>
</center>
</P>
<div id="roots">
<span class="header2">Welcome to ...</span>
<p>
</P>
<img src="http://cbimg9.com/layouts/07/07/18/19648aa.jpg" width="592" height="366" id="img">
<div id="side">
<span class="header">About</span>
<p>
Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here
</p>
<span class="header">Navigation</span>
<P><center>
<a class="nav" href="http://urlname.com/">Stories</a>
<a class="nav" href="http://urlname.com/">Artwork</a>
<a class="nav" href="http://urlname.com/">Blog</a>
<a class="nav" href="http://urlname.com/">Escape</a>
<a class="nav" href="http://urlname.com/">URL Name Here</a>
</center>
</P>
<div id="roots">
<span class="header2">Welcome to ...</span>
<p>
</P>
</div>
the layout uses some css and some html, take a look for yourself, I haven't created the indiviual pages yet. I will once i figure out if i need to create a table or individual something right beneath the "Welcome" portion. all this is subject to change of course, thanks for looking at the code.
<title>Vudoo Soul;;</title>
<style>
body {background-color: #6F0605;}
font, p, div, td, table {font-family: tahoma; font-size: 12px; font-weight:normal; color: #000000;}
#img {position: absolute; top: 20px; left: 200px;}
#side {position: absolute; top: 390px; left: 200; width: 180px;}
#roots {position: absolute; top: 390px; left: 390; width: 400px;}
.header {display: block; border-right: 10px solid #000000; background-color:#AB120F; text-align: right; padding-right: 10px; font-family: times; font-size:24px; font-weight:normal; line-height: 15px;
text-transform:lowercase;}
.header2{display: block; border-left: 10px solid #000000; background-color: #ab120f; text-align: left; padding-left: 10px; font-family:times; font-size:24px; font-weight:normal; text-transform: lowercase; line-height: 15px;}
a:link, a:active, a:visited {color: #000000; text-decoration: none;}
a:hover {cursor: crosshair; text-decoration:none; color: black; border-bottom: 1px #000000 dotted;}
a.nav:link, a.nav:visited, a.nav:active {text-align: center; display: block; border: 10px solid #000000; border-top:none; border-bottom:none; width:90%; color:black; background-color:#8C0100; text-transform:lowercase; letter-spacing: 1px; font-size: 11px;}
a.nav:hover {border: 10px solid #FFFFFF; border-top:none; border-bottom:none; color:FFFFFF; letter-spacing: 2px}
</style>
</head>
<img src="http://cbimg9.com/layouts/07/07/18/19648aa.jpg" width="592" height="366" id="img">
<div id="side">
<span class="header">About</span>
<p>
Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here
</p>
<span class="header">Navigation</span>
<P><center>
<a class="nav" href="http://urlname.com/">Stories</a>
<a class="nav" href="http://urlname.com/">Artwork</a>
<a class="nav" href="http://urlname.com/">Blog</a>
<a class="nav" href="http://urlname.com/">Escape</a>
<a class="nav" href="http://urlname.com/">URL Name Here</a>
</center>
</P>
<div id="roots">
<span class="header2">Welcome to ...</span>
<p>
</P>
<img src="http://cbimg9.com/layouts/07/07/18/19648aa.jpg" width="592" height="366" id="img">
<div id="side">
<span class="header">About</span>
<p>
Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here
</p>
<span class="header">Navigation</span>
<P><center>
<a class="nav" href="http://urlname.com/">Stories</a>
<a class="nav" href="http://urlname.com/">Artwork</a>
<a class="nav" href="http://urlname.com/">Blog</a>
<a class="nav" href="http://urlname.com/">Escape</a>
<a class="nav" href="http://urlname.com/">URL Name Here</a>
</center>
</P>
<div id="roots">
<span class="header2">Welcome to ...</span>
<p>
</P>
</div>
the layout uses some css and some html, take a look for yourself, I haven't created the indiviual pages yet. I will once i figure out if i need to create a table or individual something right beneath the "Welcome" portion. all this is subject to change of course, thanks for looking at the code.
- Status
Similar threads
