/    Sign up×
Community /Pin to ProfileBookmark

Request for Assistance: text is not positioning properly

Copy linkTweet thisAlerts:
Jul 08.2007

[url]http://www.freewebs.com/lizasheni/index.htm[/url]

I’m quite new to css and I decided to do my layout using css since everyone says css is da bomb!!

Anyways, I thought I was managing alright until the whole relative positioning of text really screwed me up.. so if you could please look at the page and the code and tell me how to fix it so that the main content text and the sidebar text are on the same level from the top that would be great!!!!
Cuz whenever I add more text, the positioning of text in the side bar changes because it is relative positioning.. but I don’t know how else to position it so that is fits accordingly with the centered layout… Get my drift?

Thanks, I’ll be thinking about you in my dreams…
Just kidding! haha!

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelJul 08.2007 — #navigation {

[B]position: relative;[/B]

margin:0;

top:120;

width:150;

[B]left:635;[/B]

}[/QUOTE] "relative" positioning means that the content (which has 150px width here) is actually where it lies, but it invisibly moved, in this case, 635px to the right (because there are 635px on it's left).

Also, you MUST state the unit of measure... "635"... is this "px", "em", "ex", "pt", "cm", "in", etc... all of these are valid and will work. Probably the browser will default to assume "pixels" ("px"), -but don't count on it. Not defining the unit-of-measure can be page-breaking if you needed & required "em"-spaces but, having not defined "em", the browser 'defaults' to "px" (2em; is a lot different than 2px!).

Anyway, you have a 150(px) wide DIV that occupies space, invisibly, causing other content to 'shift around it'.

A better way is to use "float":

<!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" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

p {font-size: 100%; line-height:1.0em; margin:8px 0 5px 0;}

html, body {min-height:100%; height:101%; padding-bottom:25px;

font:x-small Arial, Verdana, sans-serif;

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */}

html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */

font-size: small; voice-family: ""}"";

voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, helvetica, serif; background-color:none;

font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}

h1{font-size: 1.93em;}

h2{font-size: 1.72em;}

h3{font-size: 1.52em;}

h4{font-size: 1.42em;}

h5{font-size: 1.32em;}

h6{font-size: 1.21em;}

</style>

<style>

</style>

<script type="text/javascript"><!--

// -->

</script>

<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->

</head>

<body>

<div style="width:500px; margin:25px auto; padding:10px; border:3px double silver;" >

<div style="width:225px; border:1px solid green; [B]float:left;[/B] padding:3px; background-color:#ececec;">

<p>Left left left left left left. Left left left left left left .</p>

<p>Left left left left left left. Left left left.</p>

</div>

<div style="width:225px; border:1px solid red; [B]float:right;[/B] padding:3px; background-color:#ececec;">

<p>Right right right right right right, right right.</p>

<p>Right right right right right right, right right. Right right, right right</p>

</div>

</div>

</body>

</html>[/QUOTE] That has it's own problems, -as a 'float' is lifted from the document flow and later on, needs to be 'cleared'..
Copy linkTweet thisAlerts:
@lianabananaauthorJul 09.2007 — I dont get it..

Can you or someone please be more specific and make changes to my code?
Copy linkTweet thisAlerts:
@WebJoelJul 09.2007 — Sure... be right with ya in a minute. ?

bak:

here is a screenshot of what "relative positioning" is doing... note the overlapping blue lines. The 'positioning' are these lines. That is where the elements actually are...

brb:

okay, -have your code & will look at this tomorrow morning... (late here). ?

[upl-file uuid=de15bcde-fdd2-470a-9282-fa77eec1757e size=42kB]ScreenHunter_1.gif[/upl-file]
Copy linkTweet thisAlerts:
@WebJoelJul 09.2007 — Simple. Basically, you had the "<head>" enclosing the entire 'content' and 'navigation', messing-up the layout. (I was too tired to even notice last night..)

Using your started layout, -I cleaned it up a bit:

<!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>

<style type="text/css">

  • * {padding:0; margin:0;}/* no need to re-state any "padding:0px" or "margin:0;" again in this page */


    • h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, helvetica, serif; background-color:none;

    font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 16px 10px;}

    h1{font-size: 1.93em;}

    h2{font-size: 1.72em;}

    h3{font-size: 1.52em;}

    h4{font-size: 1.42em;}

    h5{font-size: 1.32em;}

    h6{font-size: 1.21em;}/* All this sets defaults for H-tags. No need to adjust */

    body {background-color:#FF9; font-family:verdana, sans-serif; font-size:0.8em; line-height:1.0em; }

    p {padding:5px 0 2px 0;}

    a:link, a:visited, a:active {text-decoration:none; color:#633; }

    a:hover {text-decoration:underline; color:black;}

    #container {position:relative;width:850px; margin:0 auto; text-align:left;}

    #content {position:absolute; left:65px; top:120px; width:500px; border:3px solid black; padding:3px; border:1px solid navy;}

    #navigation {position:absolute; width:150px; top:120px; left:638px; padding:3px; border:1px solid navy;}

    #header {background: url(http://i175.photobucket.com/albums/w147/scanica/header.jpg);

    height:308px;}

    #bg {background:url(http://i175.photobucket.com/albums/w147/scanica/bg.jpg) repeat-y;

    height:800px;}

    #navs {}

    #navs li {margin:6px 0 5px 0; list-style-type:none; text-align:center;}

    #navs li a {text-decoration:none;}

    #navs li a:hover {font-weight:bold; text-decoration:underline; color:red;}

    </style>

    </HEAD>


    <BODY>

    <div id="container">

    <div id="header">This is the HEADER</div>

    <div id="content">

    <h1 title="Welcome to the website.">Welcome to the website.</h1>

    <p>This column will expand to accomodate more text</p>

    <p>Welcome to the website.</p>
    <p>Welcome to the website.</p>

    <p>Welcome to the website. Welcome to the website. Welcome to the website. Welcome to the website. Welcome to the website. Welcome to the website. Welcome to the website. Welcome to the website.</p>

    <p>Welcome to the website. Welcome to the website. Welcome to the website. Welcome to the website. Welcome to the website.</p>

    </div>

    <div id="navigation">

    <p>This column will expand to accomodate more links</p>

    <h2 style="letter-spacing:0.2em; color:gray; font-style:italic; font-weight:800;">Navigation</h2>

    <ul id="navs">

    <li><a href="#">Navigation here.</a></li>

    <li><a href="#">Navigation here.</a></li>

    <li><a href="#">Navigation here.</a></li>

    </ul>

    </div>

    <div id="bg"></div>

    </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>[/QUOTE]     And yes... CSS is [I]all that[/I]. ? -Welcome to 'da bomb!
    ×

    Success!

    Help @lianabanana 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.17,
    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,
    )...