/    Sign up×
Community /Pin to ProfileBookmark

Implementing Elements in CSS

Copy linkTweet thisAlerts:
Sep 07.2007

I’m trying to use the getHeight() element to define the height of a line that’s been created in my CSS file. Problem is, when I put in
height: Element.getHeight(‘leftCol’)
(leftCol being the name of the div)
It returns nothing and therefore the line doesn’t exist. I really need some help here! If it can’t be implemented, ideas on ways around it would be so appreciated. Thanks!

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelSep 07.2007 — This actually sound more like a javascript situation whereby the leftCol would be a var= . I don't think you can return a DIVs height unless you relate it to a variable.

I am quite a bit rusty on my *js, and am not much help on this one.. :o
Copy linkTweet thisAlerts:
@TraikenauthorSep 07.2007 — Damn, I thought so. But can javascript defined variables be used in CSS anyway? If so, how?
Copy linkTweet thisAlerts:
@WebJoelSep 08.2007 — ...to define the height of a line that's been created in my CSS file.[/QUOTE] I am not sure what you intend to do here. Do you want to change the height 'on-the-fly' for some visual effect? It just sounds as if "line-height:foo;" is the answer. I can't imagine the need for javascript to mess with this. :o If the line was created in CSS, -why hire javascript to mess with it? ? If the font size changes, the line height should be "line-height:1.0[B]em[/B];" (or thereabout), and it will be correct for any font-size that occupies it... ?
Copy linkTweet thisAlerts:
@TraikenauthorSep 08.2007 — The height of the line needs to be equal to the height of the left column on my webpage, which is why I originally used Element.getHeight('leftCol');.

Here's the website anyway: [URL=http://www.kambani.com]Kambani[/URL]. See how the line is too long? That's because I had to set it to a defined height of 4500px to compensate each page since I need to keep this website up for my uncle's business.
Copy linkTweet thisAlerts:
@ray326Sep 08.2007 — I'm not sure of what "the line" is but you need to get rid of the absolute positions and use good mark up and floats to reassemble your page.
Copy linkTweet thisAlerts:
@WebJoelSep 09.2007 — Do you mean that thousand+ pixel vertical yellow line indentified in the Screenshot as ".vLine"? -I do not even see what generates this... nothing in your HTML does that. I see that it is about 4X the height of your current content... ?

image att:

[upl-file uuid=33c1b54d-1b2d-4628-b6ba-47fa22ef0fd1 size=80kB]vLine.jpg[/upl-file]
Copy linkTweet thisAlerts:
@TraikenauthorSep 12.2007 — Wow, nice program that generates that (sorry for the late reply, had to get on with some coursework that's been bothering me). Anyway, it's created in a javascript, I'll show it now:

function writeHeader()
{
document.write( "<img src="images/HeaderImage.jpg" width="765" height="115" border="0">" +
"<div class="vLine"></div>" +
"<div class="hLine"></div>" +
"<div class="kLogo"><img src="images/Kambani.jpg" width="258" height="90" border="0"></div>" +

<i> </i> "&lt;div class="navBar"&gt;&lt;nobr&gt;");

<i> </i>writeNavBarLink("index.htm", "home");
<i> </i>writeNavBarLink("aboutus1.htm", "about");
<i> </i>writeNavBarLink("gallery1.htm", "gallery");
<i> </i>writeNavBarLink("events.htm", "events");
<i> </i>writeNavBarLink("artist1.htm", "artists");
<i> </i>writeNavBarLink("contact.htm", "contact");

<i> </i>document.write( "&lt;/nobr&gt;&lt;/div&gt;");
}

It's in a javascript file so you won't see it. The entire website's header system runs on a complex system of javascript that make it easier for me to make changes and introduce new systems into it.

What you see above is how it generates the div that makes the vLine, I should have mentioned it but in the CSS file, it's basically just defined as a class. Anyway, defining the div a height won't work because the vLine's set height will just overwrite it when it's loaded as the class.

As you can probably see, everything's just nicely floating around. I don't want to resort to redoing the javascript because that'd take me time to make sure the header and everything still works, any ideas now that you've seen this? Thanks.
Copy linkTweet thisAlerts:
@WebJoelSep 12.2007 — .... in the CSS file, it's basically just defined as a class. Anyway, defining the div a height won't work because the vLine's set height will just overwrite it when it's loaded as the class.....[/QUOTE] If this is defined as a "class", could the container element just have "overflow:hidden;" to 'hide' the extrenuous oveflow of "vLine"? The content (in the normal sense) would be what makes the 'container' expand, and the "vLine" will be cut-off there... ? ?
Copy linkTweet thisAlerts:
@TraikenauthorSep 13.2007 — Nopee...there is no overflow as it's been held in a div. That div is given the height it's defined by the CSS. when I don't define the height in the CSS, it disappears. Basically, doesn't work. Tried it out though but no such luck, any other ideas? Thanks for helping still.
×

Success!

Help @Traiken 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 6.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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...