z-index? Wrapping text and positioning


Z

zac.gorak

<!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>Redesign for twodayslate.com</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
}

html {
height: 100%;
font-family: Verdana, Arial, Helvetica, 'Trebuchet MS', sans-serif;
}

body {
height: 100%;
background: #1f3f9f url(http://images.twodayslate.com/design/
background.gif) repeat-x top;
}

#container {
margin: 0 auto;
margin-top: 30px;
width: 85%;
min-width: 770px;
max-width: 1900px;
}

#header {
margin-bottom: -300px;
background: none;
display: block;
margin-left: -30px;
vertical-align: center;
z-index: 1000;
}

/*NAVIGATION!*/
/* Nav=35, sub=20 */


/* the styling */
#navigationdiv {
float:right;
width:100%;
height:60px;
background:#315d9d url(http://images.twodayslate.com/design/
navigationend.png) no-repeat right;
font-size: 18px;
margin-top: -100px;
z-index: 200;
}

#navigationdiv .select, #navigationdiv .current {
margin: 0;
padding:0;
list-style:none;
display:block;
line-height: 40px;
}

#navigationdiv .sub {
margin:0;
padding:0;
list-style:none;
}

#navigationdiv li {
display:block;
float:left;
margin:0;
padding:0;
position:relative;
z-index:100;
}
#navigationdiv .current li {
z-index:50;
line-height: 35px;
}

#navigationdiv .select a,
#navigationdiv .current a { /* select main */
display:block;
height:100%;
float:left;
width: 100px;
padding:0 0 0 9px; /*Important*/
text-decoration:none;
font-weight:bold;
line-height:35px;
white-space:nowrap;
color: #f7f9ff;
}

/* calculate the required widths of the top level */
#navigationdiv .one a {width:3.1em;}
#navigationdiv .two a {width:2.3em;}
#navigationdiv .three a {width:2.3em;}
#navigationdiv .four a {width:9em;}

#navigationdiv .select a b,
#navigationdiv .current a b {
height:100%;
display:block;
padding:0px;
color: #f7f9ff;
line-height: 40px;
}

#navigationdiv .sub {
display:none;
line-height: 20px;
font-size: 14px;
}

#navigationdiv .select a:hover b {
color:#b3c4ec;
cursor:pointer;
height: 100%;
}

#navigationdiv .current a {
background-position:0 -150px;
}
#navigationdiv .current a b {
background-position:100% -150px;
color:#8fa5da;
line-height: 40px;
}

#navigationdiv .sub li a:hover,
#navigationdiv .select a:hover .sub li a:hover,
#navigationdiv .select li:hover .sub li a:hover {
background:#315d9d;
color:#bdccec;
}

#navigationdiv .current .sub .current_sub a,
#navigationdiv .current .sub a:hover {
background:#315d9d;
color: #bdccec;
}

#navigationdiv .current .sub,
#navigationdiv .select a:hover .sub,
#navigationdiv .select li:hover .sub {
display:block;
position:absolute;
width:700px;
top: 40px;
background:#315d9d;
}

* html #navigationdiv .current .sub, * html #navv .select a:hover .sub
{
margin-top:0;
margin-t\op:1px;
}

#navigationdiv .current .sub li a,
#navigationdiv .select a:hover .sub li a,
#navigationdiv .select li:hover .sub li a {
display:inline;
background:#315d9d;
width:auto;
white-space:nowrap;
font-weight:normal;
font-size:0.9em;
height:20px;
line-height:20px;
}

#navigationdiv .select a:hover,
#navigationdiv li:hover a {
background-position:0% -150px;
}

#navigationdiv .select a:hover b,
#navigationdiv .select li:hover a b {
background-position:100% -150px;
color:#a8b8df;
}

/* calculate the left edge position of each sub level */
#navigationdiv .one .sub {left:0;}
#navigationdiv .two .sub {left:-3.8em; margin-left:-9px;}
#navigationdiv .three .sub {left:-6.9em; margin-left:-18px;}
* html #navigationdiv .three .sub {margin-left:-9px; marg\in-
left:-18px;}
#navigationdiv .four .sub {left:-38.5em; margin-left:-27px;}
* html #navigationdiv .four .sub {margin-left:-18px; marg\in-
left:-27px;}

/* End Navigation*/


#topcorners {
background: url(http://images.twodayslate.com/design/
toprightcornerlong.png);
background-position: right;
height: 12px;
margin-left: 13px;
}

#topleftcorner {
background: url(http://images.twodayslate.com/design/
leftopcorner.png) no-repeat;
display: block;
height: 12px;
width: 10px;
margin-left: -7px;
}

#contentcontainer {
background: url(http://images.twodayslate.com/design/
rightsidecontentfade.png) repeat-y;
background-position: right;
padding-right: 8px;
margin-top: 4px;
}

#content {
background: #FFF;
margin-left: 6px;
margin-top: -4px;
margin-bottom: -3px;
padding: 10px;
padding-top: 100px;
}

#bottomcorners {
background: url(http://images.twodayslate.com/design/
bottomrightcornerlong.png);
background-position: right;
height: 16px;
margin-right: 2px;
margin-left: 19px;
}

#bottomleftcorner {
background: url(http://images.twodayslate.com/design/
bottomleftcorner.png) no-repeat;
float: left;
display: block;
height: 16px;
width: 13px;
margin-left: -13px;
margin-top: -1px;
}

#footer {
margin: 0 auto;
margin-top: 5px;
color: #8f9ecb;
text-align: center;
margin-bottom: 8px;
font-size: .9em;
}

#footer a {
color: #8f9ecb;
text-decoration: none;
font-size: .9em;
}
</style>

</head>

<body>

<div id="container">

<div id="header">
<img src="http://images.twodayslate.com/design/logo.png" style="z-
index: 300;"/>

<!-- Start Naviation -->

<div id="navigationdiv">
<ul class="current one"><li><a href="http://twodayslate.com"><b>Index</
b></a>


<ul class="sub">
<li><a href="#">About</a></li>
<li><a href="#">Geek?</a></li>
<li><a href="/x.php">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</li>
</ul>

<ul class="select two"><li><a href="doors_drop_line.html?
current=two&amp;sub=none"><b>Blog</b></a>
<ul class="sub">
<li><a href="doors_drop_line.html?current=two&amp;sub=a">Newest</a></
li>
<li><a href="doors_drop_line.html?current=two&amp;sub=b">Catagories</
a></li>
<li><a href="doors_drop_line.html?current=two&amp;sub=c">RSS</a></li>
</ul>

</li>
</ul>

<ul class="select three"><li><a href="doors_drop_line.html?
current=three&amp;sub=none"><b>Forums</b></a>

<ul class="sub">
<li><a href="doors_drop_line.html?current=three&amp;sub=a">Profile</
a></li>
<li><a href="doors_drop_line.html?current=three&amp;sub=b">Members</
a></li>
<li><a href="doors_drop_line.html?current=three&amp;sub=c">Log-in/
Register</a></li>
</ul>

</li>

</ul>
</div>

<!-- end Navigation -->
</div>

<div id="topcorners">
<div id="topleftcorner">&nbsp;</div>
</div><!-- end topcorners-->

<div id="contentcontainer">

<div id="content">
Background color for content: white<br />What I am going for the
sidebar:<br />
<a href="http://images.twodayslate.com/design/over800.gif">When width
is over 800px</a> | <a href="http://images.twodayslate.com/design/
lessthan800.gif"><br />When width is under 800px</a><br />Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Phasellus consectetuer,
lacus sit amet sollicitudin commodo, mauris diam fermentum dolor, sed
accumsan pede est quis lacus. Pellentesque dignissim massa at ante.
Phasellus vitae felis. Quisque varius facilisis augue. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Quisque iaculis leo a
eros. Phasellus venenatis ante ullamcorper odio. Nunc adipiscing
sodales nibh. Nullam luctus tempor tortor. Donec eu est. Quisque
accumsan velit at ante. Integer risus. Curabitur erat mi, tristique
ut, molestie sed, facilisis tincidunt, pede.

Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec a pede. Praesent vel ligula a pede
imperdiet pulvinar. Aliquam non sapien. Vivamus nibh odio, fringilla
in, dictum in, sagittis vitae, eros. Nulla eu eros. Praesent a nisl a
nibh mollis ullamcorper. Proin tristique. Nulla accumsan felis at
odio. Suspendisse sit amet risus nec lectus ornare auctor. Sed quis
est. Aliquam erat volutpat. Integer suscipit sem et eros. Duis et dui
eget odio consectetuer egestas. Nunc augue nisi, mollis ut, aliquet
vitae, nonummy ac, urna. Cras in libero.

Nam vel elit. Sed sed massa. Quisque sollicitudin euismod eros.
Curabitur laoreet egestas metus. Mauris sagittis. Sed erat nisl,
facilisis quis, auctor eu, placerat a, purus. Curabitur id magna sit
amet magna tristique viverra. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Sed hendrerit, libero
sed suscipit laoreet, pede pede convallis erat, ut viverra magna
turpis luctus nisl. Nulla vel orci ac leo facilisis egestas. Fusce at
enim.

Curabitur consequat nulla gravida erat. Curabitur mi. Mauris congue
ipsum quis tellus. Suspendisse semper elementum libero. Nunc velit.
Donec faucibus vestibulum nisl. Nulla semper nisl eu neque. Nulla eget
tellus. Nullam felis leo, faucibus at, sodales non, facilisis ac,
augue. In vitae orci nec nulla tempor tristique. Aliquam consectetuer
erat. Vivamus in orci sed lectus tempor aliquam. Duis consectetuer
interdum mi. Integer blandit, arcu sed sollicitudin dignissim, ligula
odio porttitor augue, at mollis quam odio ornare diam. Etiam pharetra
sollicitudin enim. Phasellus quis diam sed risus lacinia faucibus.

In dictum, erat quis mattis vehicula, lorem lorem vestibulum dolor,
eget adipiscing ipsum velit tempus leo. Duis faucibus porta odio.
Morbi neque. Fusce convallis libero eget sapien. Aliquam nec justo.
Integer ac nunc a odio molestie ullamcorper. Praesent a nibh sed massa
vulputate varius. Duis lacus. Vivamus euismod ultrices pede. In luctus
malesuada lorem.

</div><!-- end content-->
</div><!-- end contentcontainer -->

<div id="bottomcorners">
<div id="bottomleftcorner">&nbsp;</div>
</div><!-- end topcorners-->

</div><!-- end container-->

<div id="footer">
<a href="#">linkage</a> | <a href="#">linkage</a> | <a
href="#">linkage</a>
</div> <!-- end footer-->

</body>
</html>



http://twodayslate.com/test/test.php
You can probably get the idea of what I want to do by just looking at
the site and the two images on the site. I am having a hard time
positioning the logo and nav. (This is were z-index might come in
hand?)

Don't worry about styling the nav I will do that later, more worried
about the position.

After we do that I would like the text to wrap around the logo a bit.
I am sure there is something online already that will help me with
that.
 
Ad

Advertisements

J

John Hosking

(e-mail address removed) wrote:

http://twodayslate.com/test/test.php
You can probably get the idea of what I want to do by just looking at
the site and the two images on the site.

Yes, excellent; that's all you had to provide.
I am having a hard time
positioning the logo and nav. (This is were z-index might come in
hand?)

No, probably just an absolutely positioned element (although I admit to
being unsure; I wanted to use a float, but couldn't get it to work for
me right away). I inserted an element here

<div id="contentcontainer">

<div id="sidebar"><p>Here is the desired sidebar. It is neither
"greeked" nor "latined", nor have I tried using Klingon....</p></div>

<div id="content">Background color for content: white...

with some CSS:

#sidebar {background-color:#0066AA; color:#FFFFFF; width:10em;
padding:1em; position:absolute; top:2em; right:-2em; }
with
#content {...; right:10em; ...}

That got me something like your "over 800px" picture, but the content
doesn't wrap around the sidebar, and it doesn't change when the browser
gets narrower.

I do not know of any way to get two such completely different placements
to reliably result from resizing the browser (without using JavaScript).
There may be some slick trick (like setting some minimal width so that a
conflict causes the sidebar element to move down to clear another), but
it exceeds my time/interest/capability right now. Even still, I think
you'd me hard-pressed to get the seconday arrangement you want for under
800px. So sorry.
 
Z

zac.gorak

Right now I am just worried about the nav/logo, I sorta know how to
make the sidebar work. The pictures were just to let you know where I
want the nav.
 
N

Neredbojias

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
(snip)

http://twodayslate.com/test/test.php
You can probably get the idea of what I want to do by just looking at
the site and the two images on the site.

Then why did you post all that useless html?
I am having a hard time
positioning the logo and nav. (This is were z-index might come in
hand?)

How do you want it positioned? I find your question too vague to
comprehend.
 
Ad

Advertisements

Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top