[Wolves] CSS qustion - help - it should be easy!

Wed Dec 15 16:09:40 UTC 2010

Hi Wayne,

I had a similar problem recently with our Request Tracker installation. I ended up using absolute positioning. RT puts everything in DIV's.

Before this hack, the logo would display overlaying the nav bar. I had to bump it down by 10em.

This positions the logo (I've left my untidy comments in for "authenticity"):

div#logo .rtname {
    display: none;
    position: absolute;
    font-weight: bold;
    font-size: 50;
    top: 1em;
    /* left: 1em; */
    left: 100;
}

This bumps the nav bar down by 10em:

div#nav {
 position: absolute;
 /* left: 0; */
 left: 100;
 font-size: 0.9em;
 /* top: 3.2em; */
 top: 10em; /* Bump nav bar down under logo */
 width: 10.5em;
 background: #fff;
 -moz-border-radius-bottomright: 0.5em;
 -webkit-border-bottom-right-radius: 0.5em;
  border-left: 1px solid #999;
border-top: 1px solid #999;

 -moz-border-radius-topright: 0.5em;
 -webkit-border-top-right-radius: 0.5em;
 z-index: 99;

}

Hope that helps - it took me ages to figure it out too.

Andy D'Arcy Jewell
SysMicro Linux Support

T:  +44 (0) 844 991 8804
M: +44 (0) 7961 605631
F:  +44 (0) 844 357 7020
E:  andy.jewell at sysmicro.co.uk
W: www.sysmicro.co.uk

CRN THE CHANNEL AWARDS 2009 WINNER
SysMicro named CRN’s Editor’s Choice for Emerging Business of the Year 2009, recognising SysMicro for our considerable growth, specifically in Enterprise Solutions.
________________________________
From: wolves-bounces at mailman.lug.org.uk [wolves-bounces at mailman.lug.org.uk] on behalf of Wayne Morris [waynelists at machx.co.uk]
Sent: 15 December 2010 14:46
To: Wolverhampton Linux User Group
Subject: [Wolves] CSS qustion - help - it should be easy!

Help - it should be easy but I'm tearing my hair out trying to figure css out - 7 hours of google last night and i still can't make this stupid
easy bit work.
want page to look like:

Image 1 Image 2 --->  Image 5               ---------------  preferably scale to fit webwindow but thats another thing
Menu bar

No matter what I do - use <p>, use image block instead of inline, use all sorts of fancy snippets of code with div in them...
the menu bar or any text I try instead just slaps itself on the top line next to the images.
I can fix it with lots of br's after the images so the text drops down to the right place, but I understand that isnt a clever way.

This is it working with br's:
http://www.exceldiving.co.uk/test/zzz.html

please help!

code below

cheers

Wayne

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.exceldiving.co.uk/test/tswtabs.css<UrlBlockedError.aspx>" />
</head>

<style type="text/css">
div.img
{
  margin: 2px;
  border: 0px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}
div.img img
{
  display: block;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}

</style>
</head>
<body>

<div class="img">
 <a target="_blank" href="klematis_big.htm<UrlBlockedError.aspx>"><img src="/pics/PADILogo-L1.jpg<UrlBlockedError.aspx>" alt="Klematis" width="auto" height="90" /></a>

</div>

<div class="img">
 <a target="_blank" href="klematis2_big.htm<UrlBlockedError.aspx>"><img src="/pics/lionfishsmall.jpg<UrlBlockedError.aspx>" alt="Klematis" width="auto" height="90" /></a>

</div>
<div class="img">

 <a target="_blank" href="klematis3_big.htm<UrlBlockedError.aspx>"><img src="/pics/companylogo.jpg<UrlBlockedError.aspx>" alt="Picture" width="auto" height="90" /></a>

</div>

<div class="img">

 <a target="_blank" href="Picture3_big.htm<UrlBlockedError.aspx>"><img src="/pics/pike.jpg<UrlBlockedError.aspx>" alt="Picture" width="auto" height="90" /></a>

</div>
<div class="img">

 <a target="_blank" href="Picture4_big.htm<UrlBlockedError.aspx>"><img src="/pics/PADILogo-L1.jpg<UrlBlockedError.aspx>" alt="Picture" width="auto" height="90" /></a>

</div>
<div class="img">

 <a target="_blank" href="Picture4_big.htm<UrlBlockedError.aspx>"><img src="/pics/PADILogo-L1.jpg<UrlBlockedError.aspx>" alt="Picture" width="auto" height="90" /></a>

</div>
<p><p><br></br>
<br></br>
<br></br>

<h1>
Why isn't this working!!!!<br>
Why isn't this working!!!!<br>
Why isn't this working!!!!<br>
Why isn't this working!!!!<br>
Why isn't this working!!!!<br>
Why isn't this working!!!!<br>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman.lug.org.uk/pipermail/wolves/attachments/20101215/6b999303/attachment.htm>