/    Sign up×
Community /Pin to ProfileBookmark

using a lot of negative values for positioning

Are many of you out there using a lot of negative values to position your content using CSS? Maybe I’m not doing it correctly, but I’m finding that I have to use negative values to achieve the layout that I want.

Here’s a link to what I’m trying to achieve. I made this site using tables, but I want to convert it to a table-less CSS layout:

[url]http://www.mark-yieh.com/anneSharp/aboutMagda.html[/url]

Here’s the code that I’m working with to try to achieve the same layout using CSS:

[code]
body {background-color: #C4C4C4; width: 800px; margin: auto;}
.header {font-family: Blackadder ITC, arial, serif; font-size: 51px;

color: blue; text-align: left; padding: 15px 0px;}
.leftLinks {font-family: papyrus; width: 175px; float: left;}
.leftLinks img {width: 150px;}
.leftLinks ul {list-style-type: none; padding-left: 0px;}
.leftLinks .indent {padding-left: 15px;}
.leftLinks a {text-decoration: none;}
.content {font-family: arial; text-align: justify;}
.content #portrait {padding: 0px 20px;}
.header2 {font-size: 150%;}
blockquote {font-style: italic;}
[/code]

Here’s the HTML that I was working with:

[code=html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>

<head>
<title>About Magda Herzberger</title>
<meta http-equiv=”content-type” content=”text/html; charset=ISO-8895-1″ />
<link rel=”stylesheet” href=”magdaCSS.css” type=”text/css” />
</head>

<body>

<div class=”header”>Magda Herzberger</div>

<div class=”leftLinks”>
<img src=”pictures/starOfDavid3.gif” alt=”Star Of David” title=”Star of David” />
<ul>
<li><a href=”magdaHomePage.html”>Home</a></li>
<li><a href=”abougMagda.html”>About Magda</a></li>
<li class=”indent”><a href=”timeline.html”>Timeline</a></li>
<li class=”indent”><a href=”gallery.html”>Gallery</a></li>
<li><a href=”books.html”>Books</a></li>
<li><a href=”speaking.html”>Speaking</a></li>
<li><a href=”pressRoom.html”>Press Room</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>

<div class=”content”>

<img id=”portrait” src=”pictures/MagdaHerzberger.jpg” alt=”A picture of Magda

Herzberger” />
<h3>Magda Herzberger</h3>
<blockquote>I was an eyewitness to the Holocaust. ‘What is the meaning of

life?’ I ask myself after all my experiences.</blockquote>
<blockquote>The meaning of life is the live life fully… to love, to share, to

be.</blockquote>

<h3>Biography:</h3>
<p>A poet, lecturer, composer and author of several books, Magda Herzberger is one

of the few remaining survivors of the Holocaust perpetrated by the Nazis upon the

Jewish people during World War II. Against all odds, she survived three death

camps: Auschwitz-Birkenau, Breman, and Bergen-Belsen.</p>
<p>Magda was born in 1926 in the city of Cluj, Romania. An only child, she was

raised by her loving parents in the heart of Romania. There she lived a happy

childhood surrounded by many young cousins, and enjoying family get-togethers with

handmade ice cream and freshly roated corn-on-the-cob.</p>
<p>But Magda’s world was shattered when Adolph Hitler’s troops occupied her native

city in 1944. Being of Jewish faith, she and her family were deported on cattle

cars to the German concentration camps.</p>
<p>Magda has spent the last 30 years writing and speaking about how the Nazis almost

murdered her entire family and finally left her to die in a pile of dead bodies at

Bergen-Belsen. It was her physical stamina combined with her tenacious spirit and

faith in God that helped her survive the most unimaginable horrors. Magda’s mother

also survived, passing away in 1995 at the age of 93.</p>
<p>Magda is a remarkable poet, drawing on her thoughts about life, faith, hope,

love, her feelings as a Holocaust survivor, and a variety of other subjects. Her

book &quote;Inspirational Poetry&quot; is one of her unpublished manuscripts

consisting of a selection of the best writings of her 38-year writing career.

Behind each of her poems thre is a story to be told and experienced.</p>
<p>

</div>

</body>

</html>
[/code]

Thanks for reading.

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@WebJoelJul 05.2006 — 

There is nothing wrong with negative positioning. Generally, I use no more than a few pixels though, for some pleasing effect. But if something is positioned relative to another and positioned-negative a whole lot, there is probably another, easier way of doing this. That doesn't mean that neg-positioning is wrong. Maybe just slightly unweildy, but it works and it is correct. It is a good way to center content. Just margin-left:50% a DIV that has a set-width, and negative-position it at half the width! The result? -A centered DIV! ?
---


Nice site, btw.

Just today in fact, while I was waiting outside my doctor's office, a very senior Polish woman came by and waited with me, and we got to talking about her life in Poland. She was 'taken out of Poland' at age 15 by the Germans and made to labour for them in a factory. She showed me photographs of herself from when was younger, the man she'd later marry (deceased some 30+ years ago), her son (deceased over 3 years ago), and so forth. Very touching, this old, well-lived woman that shared her afternoon with me on a park bench outside my doctor's office... I wonder if Magda Herzberger's books are as good... I might have to go book shopping and find out.
Copy linkTweet thisAlerts:
@ray326Jul 06.2006 — You shouldn't need any negative values to recreate that layout. You'll get better feedback if you go ahead and put the page up using a different name and posting the link here.
Copy linkTweet thisAlerts:
@beemaJul 06.2006 — Yeah, that layout is pretty simple, you shouldn't have to use negative values at all.

Might want to read some of these articles: http://search.atomz.com/search/?sp-q=three+column+layout&x=0&y=0&sp-a=sp1002d27b&sp-f=ISO-8859-1&sp-p=All&sp-k=All
Copy linkTweet thisAlerts:
@WebJoelJul 06.2006 — Using the same basic layout that I provided here some short while ago, you could take this site 100% non-tables.

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
body {background-color:#c4c4c4;}
#header {width:744px; height:70px; /*border-bottom: 4px double gray;
border-left: 4px double gray;*/ padding-left:10px; margin:15px auto 0 auto;}
#content {width:750px; height:auto; /* border: 4px double gray;*/ margin:0 auto 0 auto; }
#navigation {width:160px; height:600px; float:left; /*border-right: 2px dashed blue*/;}
#main {width:583px; height:auto; padding-bottom:25px; float:right; /* border:1px solid red;*/ }
h1 {font-family: 'Blackadder ITC', arial, serif; font-size:2.5em; color: blue; text-align: left; padding-top:6px;}
ul li {list-style-type:none; padding-bottom:8px; line-height:1.2em;}/* padding-bottom vertically-spaces the list-items */
a img {border:none;} /* this takes border off of image-link Thumbnail books */
a {font-size:1.0em; line-height:1.2em;}
a:hover {font-size:1.0;font-weight:bold;}
</style>
<!-- note that BORDER(s) above in STYLE above are commented out.-->
<!-- They were only used for visual referance and are not needed -->

</head>

<body>

<div id="header"><h1 title="Magda Herzberger">Magda Herzberger</h1>
</div><!-- end HEADER -->

<div id="content">
<div id="navigation">
<img alt="Star of David" src="http://www.mark-yieh.com/anneSharp/pictures/starOfDavid3.gif" style="width:150px; height:170px; padding-left:6px;" />
<ul>
<li><a href="magdaHomePage.html">Home</a></li>
<li><a href="aboutMagda.html">About Magda</a></li>
<li><a href="books.html">Books</a></li>

<li><a href="order.html">Order</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="excerpts.html">Excerpts</a></li>
<li><a href="speaking.html">Speaking</a></li>
<li><a href="pressRoom.html">Press Room</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!-- end NAVIGATION -->

<div id="main">
<h3 title="Books by Magda Herzberger" style="position:relative; left:30px; top:20px;">Books by Magda Herzberger</h3>

<p title="For more information about a book written by Magda Herzberger, please click on the corresponding book cover below." style="position:relative; left:30px; top:20px;">For more information about a book written by Magda Herzberger, please click on the corresponding book cover below.</p>

<!-- I'll let you fill in the HREFs -->

<a href="#">
<img alt='Thumbnail of book "Survival"' title='Thumbnail of book "Survival"' src="http://www.mark-yieh.com/anneSharp/pictures/SurvivalThumb.jpg" style="padding-top:25px; padding-left:75px;" />
</a>

<a href="#">
<img alt='Thumbnail of book "The Waltz of the Shadows"' title='Thumbnail of book "The Waltz of the Shadows"' src="http://www.mark-yieh.com/anneSharp/pictures/WaltzoftheShadowsThumb.jpg" style="padding-left:125px; top:25px;" />
</a>

<a href="#">
<img alt='Thumbnail of book "Devotional Poetry"' title='Thumbnail of book "Devotional Poetry"' src="http://www.mark-yieh.com/anneSharp/pictures/DevotionalPoetryThumb.jpg" style="padding-top:25px; padding-left:75px;" />
</a>

<a href="#">
<img alt='Thumbnail of book "Tales of the Magic Forest"' title='Thumbnail of book "Tales of the Magic Forest"' src="http://www.mark-yieh.com/anneSharp/pictures/talesOfTheMagicForestThumb.jpg" style="padding-left:125px; top:25px;" />
</a>

</div><!-- end MAIN -->
</div><!-- end CONTENT -->
<div style="width:750px; height:40px;"><!-- a place for copyright or whatever --></div>

</body>
</html>[/code]
×

Success!

Help @mark_yieh spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...