|
HTML - Graphic Logo Positioning Problems
Hey guys I'm having a terrible time getting some graphic logos to layout. I know the coloring right now is not looking up to par either so don't judge me too bad I have a header div with a nav div inside and then a content div below this with a swf slide show inside. Basically inside the header div I have 5 graphics and then a nav div nested inside below that. My problem is that I want 2 of the logos aligned to the left and close to centered up/down inside the header div, then I want the main masthead logo centered in the middle of the header div up/down and left/right, and finally I want the other 2 logos floated right and centered up/down. I'm trying various methods and the best I have so far shows the middle masthead logo not correctly centered, and the 2 left logos floating left, but the far 2 right logos do not show up at all. The page is located at http://www.atlanta-web.com and I'll past all of my code below.
index.html snippet Code:
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#000080" alink="#800000" leftmargin="0" topmargin="5" marginleft="0" margintop="5">
<script type="text/javascript" src="fsmenu_commented.js"></script>
<script type="text/javascript" src="menuset.js"></script>
<link rel="stylesheet" type="text/css" href="listmenu_h.css" />
<link rel="stylesheet" type="text/css" href="listmenu_h_settings.css" />
<style type="text/css">
#navitoolbarcontainer a {
line-height: 16px;
}
</style>
<div id="header">
<img class="award1" src="nahb.gif" /><img class="award2" src="gahomebuilders.gif" />
<center><img src="Jhomes.jpg" /></center>
<img class="award3" src="southernlivingmember_sm.gif" /><img class="award4" src="lobb.gif" />
<!-- START TOP TOOLBAR -->
<!--<div id="heightcontainer"></div>-->
<div style="width: 100%;" id="navitoolbarcontainer">
<div style="margin: 0px; padding: 0px; width: 100%;">
<div id="navitile" style="width: 100%;">
<ul class="menulist" id="listMenuRoot" style="height:22px;">
<li style="margin-top:0px;">
<a class="gt" href="index.html" style="font-size: 10px; font-family: arial,verdana,helvetica; text-decoration:none;"> <b>Jeffery Homes Inc.</b> </a>
<ul id="listMenu-id-1">
.
.
.
NAV Bar HTML Cut for space sake
.
.
.
<div style="margin-top: 0px;" id="lightgrey">
</div>
</div>
</div>
</div>
</div>
<div id="content" style="width: 100%; background-color: #6B6637">
<div id="slideshow">
<object width="600" height="350">
<param name="movie" value="slideshow1.swf" wmode="transparent">
<embed src="slideshow1.swf" width="600" height="350" wmode="transparent">
</embed>
</object>
<br />
<br />
</div>
</div>
<!-- END TOP TOOLBAR -->
css file1 Code: @charset "UTF-8";
a.gt{ text-decoration:none}
a.gt:hover{text-decoration:none}
a.gt:visited{text-decoration:none}
a.gt:link{text-decoration:none}
a.gt:active{text-decoration:none}
#header { margin: 0px; padding: 0px; width:100%; min-width:830px; width:100%; background-color: #AFAB73; position: absolute; left: 0px; top:0px; font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 0}
.award1 { float:left }
.award2 { float:left }
.award3 { float: right }
.award4 { float: right }
#navitile{width:820px; margin-left:0px; height:22px; background-repeat:repeat-x; position:absolute; color: #F2FFE4; left:0px; top: 0px; font-family:arial,verdana,helvetica; font-size:8px; white-space:nowrap; }
#navtile a{ color: #F2FFE4 }
#navitoolbarcontainer{width:100%; min-width:830px; width:100%; height:22px; position:absolute; top: 100px; left:0px; font-family:arial,verdana,helvetica; font-size:8px; background-image:url('background_end_fixed.png'); background-repeat:repeat-x; white-space:nowrap; margin:0px; padding:0px; z-index:1000}
#navitoolbarcontainer a{color: #F2FFE4}
#content {margin: 0px; padding: 0px; width:100%; min-width:830px; width:expression('100%'); position: absolute; left: 0px; top: 122px; font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 1}
#slideshow {
margin: 0 auto;
position: relative;
top: 30px;
height: 480px;
width: 600px;
}
#heightcontainer{position:relative; height:17px; width:99%; background:transparent;}
#globalform{padding:0px; margin:0px}
#lightgrey{text-align:left; color: #F2FFE4; text-indent:5px; background-image:url('background_end_fixed.png')}
#lightgrey .inputglobal{font-size:9px; font-size:expression('8px'); text-align:left; margin-top:0px; margin-left:2px; background-repeat:no-repeat}
#lightgrey .inputglobal:hover{font-size:9px; text-align:left; margin-top:0px; background-color:#ccc}
#lightgrey a{font-family:sans-serif; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; top:1px; top:expression('-2px'); position:relative}
#lightgrey a:link{text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px}
#lightgrey a:visited{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
#lightgrey a:active{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
#lightgrey a:hover{display:inline; text-decoration:none; color:#fcf2ca; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
A lot of this css is for the menus that i found on a site and have highly modifed, but I've used class/id's for most of everything so it should be easy to see what is what. Thanks for any help that you all can provide. This site has been a godsend for getting help. Similar TutorialsHaving problems with my logo on ie and firefox. It opens fine in safari. Site is www.justintimemelodies.com. I am new to html and am not sure what the problem is. I assume i need to add something for the coding to show in those two browsers. the following is the code:<div id="Logo"> <a href="index.html"><img src="./images/JustInTime2.jpg"alt="Home" border="0"></img></a></div> <a href="index.html"></a> I am trying to changed the logo on my website. The part of the html code which does this, is showing as: <div id="logo-div" class="fw-logo"></div> the logo is a .gif file and I cant find anywhere in the html which is calling this image file. Where is it getting logo-div and fw-logo from, can someone please explain the html above that I posted I've run into a few problems that don't appear in firefox but do in Internet explorer..The first problem I have is that in IE the content box on the right is bumped down, it looks exactly the way I want in FF, but not in internet explorer. The next problem I'm having is the banner in IE..It seems as if theres a pixel or two underneath of the banner I can't get rid of... Also, any ideas on how I can center the navbar? I can't seem to get it to go in any browsers... page: http://www.ssvfd.com/newsite/history.html css file: http://www.ssvfd.com/newsite/style.css Hi guys. Sorry if I'm inconveniencing you, but I have a really big problem that I can't work out. http://automata.firephoenixnet.com/design/ Could you take a look at that in Firefox and then in IE? Did I miss a margin or something? And, is there a way I can get my footer div always at the bottom of the page without setting a margin-bottom for the sidebar div? Many thanks guys. Usually I wouldn't be so, well...rude, but this is very urgent, I need to finish this website by college tomorrow because if I don't hand in my work, I fail the course. This is in no way illegal, I'm an art student, so I'm being marked solely on the layout and such, not on the coding! As such, any comments or critiques would be greatly appreciated also. Here are some pictures demonstrating my problems: http://img504.imageshack.us/img504/1956/70406583qo6.jpg http://img481.imageshack.us/img481/576/74706440aq5.jpg What's wrong is the positioning of the navigation and main content... the titles should be at their respective black bars right near the top, just below the banner image. I've gotten so rusty, I don't even remember how to do something so simple. Also, for some reason the header titles don't want to be white instead of black. What am I doing wrong? Here is the CSS: Code: body
{
margin: 0;
padding: 0;
background-color: #dcd8e5;
}
body, p, td
{
font-family: trebuchet ms, sans-serif;
font-size: 12px;
color: #000000;
cursor: default;
}
a
{
font-family: trebuchet ms, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
a:hover
{
font-family: trebuchet ms, sans-serif;
font-size: 12px;
color: #afa7c1;
font-style: italic;
cursor: help;
}
#wrap
{
margin: 0 auto;
width: 906px;
background-image: url(container.jpg);
}
#topbanner
{
width: 906px;
}
.header
{
padding: 0px;
font-size: 14px;
text-align: center;
text-transform: uppercase;
margin: 2px;
font-color: #ffffff;
font-weight: bold;
}
#nav
{
float: left;
width: 260px;
padding: 20px;
}
#main
{
float: right;
width: 606px;
padding: 20px;
text-align: justify;
top: 300px;
}
#footer
{
clear: both;
text-align: center;
}
And here is the HTML: HTML Code: </head> <body> <div id="wrap"> <div id="topbanner"> <img src="topbanner.jpg" alt=""/> </div> <div id="nav"> <p class="header">Navigate</p> <p> <a href="#">Home</a> <br /> <a href="#">Gallery</a> <br /> <a href="#">Prints</a> <br /> <a href="#">Affiliates</a> <br /> <a href="#">About</a> </p> </div> <div id="main"> <p class="header">Welcome</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p><p> Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem. </p><p> Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam. </p> </div> <div id="footer"> Site & Content © Nicole Turner, 2007, all rights reserved <img src="container.jpg" alt=""> </div> </div> </html> Any help, particularly of the super-speedy variety, is greatly appreciated! Hi all, First post here hope someone can help. I'm creating a portfolio web page for my 3D work and using this to learn a bit of web design. My current problem comes from using absolute positioning to get text to float over a background image in a precise location. I have this as I want it in Fiirefox 2.0.0.6 but the text all appears a fair bit higher in IE (I have looked using IE 6 on its own and by changing the render mode to IE in Firefox). I realise I need to do a fair bit of validation and refinement to the site but at the moment I want to get this alignment issue sorted so the site is at least visible while I work on other elements. Page url: www.iamjames.co.uk The text in question is on the used on all pages! Thanks in advance James So I just decided to redesign my website, and I learned the wonders of "position: absolute" and the left, right, top, and bottom CSS tags. But of course, with that comes some issues (and other things, like me having to think about people with different browsers/resolution settings than me). Some of my problems are as follows (captions of the problem are under the images) When the text overflows here, it just leaves the <div> tag... well... multiple <div> tags. This one takes the body <div> with it.. but doesn't let the bottom page image extend down. Top filler image doesn't extend all the way, body <div> doesn't connect properly to fade images. So as you can see, my big problem is the overflow, which really needs to be fixed. Don't know what the problem is with Opera there, but it's something else that should be checked out. So anyway, here's my code for the website. If you have any ideas for how to improve it/make it work better, then I'm happy with that. Don't worry about validation right now, though. I'm saving that for later. HTML Code: <html>
<head>
<title>Home - Alex Crooks Webdesign</title>
<style type="text/css">
body
{
margin: 0px;
background-color: #035b07;
font-size: 10pt;
color: white;
font-family: verdana, arial, sans-serif;
}
a
{
text-decoration: none;
color: white;
}
a:hover
{
text-decoration: underline;
color: white;
}
img
{
border: 0px;
}
.navlink
{
font-size: 16pt;
font-variant: small-caps;
font-weight: bold;
}
#navlinks
{
text-align: right;
vertical-align: middle;
padding: 5px 10px 0px 10px;
}
#topleft
{
position: absolute;
top: 0px;
left: 0px;
float: left;
width: 141px;
height: 228px;
background-image: url(topleft.gif);
z-index: -11;
}
#topfiller
{
position: absolute;
top: 0px;
width: 100%;
height: 155px;
background-image: url(topfiller.gif);
z-index: -12;
}
#left
{
float: left;
position: absolute;
left: 0px;
width: 65px;
height: 100%;
background-image: url(leftfiller.gif);
z-index: -13;
}
#bottomleft
{
position: absolute;
bottom: 0px;
left: 0px;
float: left;
width: 137px;
height: 134px;
background-image: url(bottomleft.gif);
z-index: -11;
}
#bottomfiller
{
position: absolute;
bottom: 0px;
width: 100%;
height: 67px;
background-image: url(bottomfiller.gif);
z-index: -12;
}
#nav
{
margin: 100px 0px 0px 65px;
margin-top: 100px;
height: 40px;
width: auto;
background-image: url(navbg.gif);
color: white;
}
.sep
{
vertical-align: middle;
width: 2px;
height: 25px;
padding: 0px 5px 0px 5px;
}
#bodyright
{
position: absolute;
top: 273px;
right: 200px;
bottom: 104px;
height: auto;
width: 22px;
background-image: url(bodyright.gif);
z-index: -7;
}
#body
{
padding: 5px 5px 5px 5px;
position: absolute;
top: 273px;
right: 221px;
bottom: 104px;
left: 200px;
width: auto;
height: auto;
background-color: white;
color: black;
z-index: 0;
}
#bodybottom
{
float: left;
position: absolute;
left: 246px;
right: 221px;
bottom: 87px;
left: 200px;
width: auto;
height: 17px;
background-image: url(bodybottom.gif);
z-index: -7;
}
#bodycornerleft
{
position: absolute;
bottom: 87px;
left: 200px;
width: 46px;
height: 18px;
background-image: url(bodycorner1.gif);
z-index: -6;
}
#bodycornerright
{
position: absolute;
right: 205px;
bottom: 87px;
width: 17px;
height: 17px;
background-image: url(bodycorner2.gif);
z-index: -7;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="top">
<a href="index2.html"><img style="padding: 5px 0px 0px 5px;" src="crookslogo.png" /></a>
<div id="topleft"></div>
<div id="topfiller"></div>
</div>
<div id="nav">
<div id="navlinks">
<a class="navlink" href="">Home</a> <img class="sep" src="navseparate.gif" />
<a class="navlink" href="">Features</a> <img class="sep" src="navseparate.gif" />
<a class="navlink" href="">Blog</a> <img class="sep" src="navseparate.gif" />
<a class="navlink" href="">Clients</a> <img class="sep" src="navseparate.gif" />
<a class="navlink" href="">Products</a>
</div>
</div>
<div id="content">
<div id="body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac enim sapien, vel tristique sapien. Vivamus erat purus, feugiat non porttitor id, cursus at sapien. Curabitur eleifend, leo facilisis consequat faucibus, ante eros bibendum tellus, et dictum nibh mi laoreet turpis. Proin pellentesque, nulla et ornare pretium, ipsum lectus faucibus mi, sed dictum purus ipsum a ante. Aenean nibh odio, porttitor a volutpat ut, euismod vitae nisi. Integer urna turpis, ultrices ullamcorper porttitor in, placerat ut metus. Sed venenatis nisl in elit faucibus non consectetur quam commodo. Pellentesque ut augue massa, ac iaculis elit. Integer eu quam nisi, non faucibus neque. Donec sit amet magna at nulla commodo cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tellus mauris, congue ut lobortis nec, adipiscing eu arcu. Suspendisse congue consectetur ante at porttitor. Maecenas sapien nibh, porttitor non pellentesque sed, sodales eu dui.
</p>
<p>
Nullam sodales malesuada lorem, et cursus velit malesuada nec. Phasellus vestibulum elit quis nunc semper vel accumsan dui lobortis. Nunc viverra tortor tincidunt dolor congue quis porta tortor auctor. Sed porta neque ac libero tristique varius. Nam id nisi lectus. Integer consectetur magna id erat volutpat adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer risus sem, interdum sed eleifend at, tincidunt in odio. Vestibulum euismod mauris eget magna semper sit amet feugiat risus varius. Mauris non neque et arcu ultricies venenatis a non mauris. Nulla facilisi. Donec sem turpis, porttitor et posuere id, posuere eget diam. Vestibulum et aliquam nibh. Phasellus quis ligula mauris, non porttitor sapien. Duis eu est id elit blandit vestibulum quis non urna. Maecenas enim augue, cursus faucibus tincidunt eget, cursus sed sem. Curabitur dictum dolor id massa bibendum vel tincidunt nunc volutpat. Nunc lobortis augue vitae ante porta eget mattis nisl faucibus. Ut sodales lorem vel dolor malesuada bibendum. Maecenas eget neque in elit semper rhoncus.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec aliquet semper volutpat. Suspendisse vitae sapien pulvinar mi egestas ornare quis nec sapien. Pellentesque nec ipsum ligula, sed ultricies lectus. Duis eu ipsum et dui vehicula luctus. Sed mollis rutrum dui elementum consectetur. Nunc viverra tortor quis tellus semper a imperdiet nisl suscipit. Nullam et dolor at purus dignissim faucibus eu vitae quam. Proin lacus ante, tempus ut ullamcorper id, mattis vitae eros. Vivamus mauris lorem, interdum at ultrices in, ultrices non metus. Phasellus convallis lobortis sem, sit amet convallis ante dignissim in. Nullam id mollis nibh. Pellentesque lobortis convallis erat, suscipit lobortis velit euismod ultricies.
</p>
<p>
Cras mollis imperdiet dignissim. Nulla sit amet elementum dolor. Curabitur luctus vestibulum sodales. Quisque eu odio velit, et pretium diam. Maecenas porttitor metus et mauris mattis sit amet facilisis odio sagittis. Aenean at turpis ac sapien ultrices pellentesque vel id erat. In ultrices pharetra erat, pulvinar molestie nisi hendrerit id. Mauris nunc eros, consequat in ultrices sed, malesuada non magna. Etiam dictum ultricies blandit. Vestibulum augue ipsum, malesuada a ullamcorper vel, porta accumsan nunc. Quisque dapibus posuere neque, sit amet lacinia justo tempus nec. Curabitur sit amet tortor nulla. Sed enim quam, facilisis eu dapibus quis, vestibulum at erat. Cras placerat sagittis eros, ac faucibus tellus ultricies vitae.
</p>
<p>
Aenean commodo enim facilisis tellus lacinia sit amet vulputate est condimentum. Vivamus viverra vehicula felis sed rhoncus. Donec sed imperdiet est. Proin molestie velit nec urna lacinia vel fermentum sem tincidunt. Maecenas rutrum sollicitudin varius. Donec et ligula semper eros euismod interdum. Aenean ultricies magna sed nisl consectetur venenatis. Nullam quis orci sapien. Curabitur pellentesque lacinia ante, id pharetra risus sagittis id. Etiam metus turpis, rutrum vel faucibus nec, feugiat rutrum nibh. Donec fringilla sagittis ligula, nec varius felis dapibus eu. Curabitur felis quam, fermentum non eleifend ac, faucibus vel libero. In nec leo ut nulla sagittis scelerisque nec in orci.
</p>
</div>
<div id="bodyright"></div>
<div id="bodycornerleft"></div>
<div id="bodybottom"></div>
<div id="bodycornerright"></div>
</div>
<div id="bottom">
<div id="bottomleft"></div>
<div id="bottomfiller"></div>
</div>
</body>
</html>
Hi, Ive spent hours upon hours painfully sculpting this website and i can't for the love of gaaawd get the positioning of my element standard throughout the website. The home page and the watercolour-classes page have the bottom graphics bar in the same position But different from all the other pages. All i want it to do is be the same throughout and its only out by about 10px. why oh why Ive been struggling for days and weeks with this problem and cant work it out. Im sure its something simple but as a self taught web designer i dont know it all.... far from it. Any ideas or suggestions Please. The website is http://www.miriartist.co.uk Any help or light on the matter would be great THANKS Cheeeers Ben I have this menu to rollover... and I cant seem to get the positioning correct. All I want to do is shift it to the right about 100px so that it doesnt cover up the rest of the menu items. I will paste the CSS, javascript, and html code here... I have tried positioning it via CSS and thats not working :/ Is there a way to do it in the java code? Or if you want you can say how you would do it in CSS... maybe I just was doing it wrong. CSS Code: #dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{
color:#000000;
background-color: #cc0000;
}
JAVA Code: <script type="text/javascript">
var menu1=new Array()
menu1[0]='<a href="group.html">About (group)</a>'
menu1[1]='<a href="officers.html">Current Officers</a>'
menu1[2]='<a href="officerjoin.html">Become an Officer</a>'
var menu2=new Array()
menu2[0]='<a href="meetings.html">Meetings</a>'
menu2[1]='<a href="alumniday.html">Alumni Day</a>'
menu2[2]='<a href="industryday.html">Industry Day</a>'
var menuwidth='165px'
var menubgcolor='lightyellow'
var disappeardelay=50
var hidemenu_onclick="yes"
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
}
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
if (hidemenu_onclick=="yes")
document.onclick=hidemenu
</script>
HTML Code: <li><a href="events.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">Events</a> </li> Any help would be appreciated! Thanks! I'm attempting to center the logo / table located at the top of the page. I tried several various forms of alignment commands, all with no success. Any help is appreciated. Site: http://blog.camhabib.com I'm starting to develop a (rudimentary) website for my sis. I've noticed a little graphic glitch in IE only. What's the best forum to post my question? HTML? CSS? Here's the page in question: http://www.coldvalleyfarm.com/sheep.htm In IE only, at the bottom of the left row of pictures, there's a small white square with a white dot in the middle. Any idea what could be causing that? I've validated the pages, but I know IE isn't always compliant. This is with IE 7.0, btw. Thanks in advance! Hi Am here to look for some help about a problem I can't seem to "overcome" in the layout of my website. I put the background in bright pink so the problem kinda "jumps" to the eye. It is available here : http://www.guitarbattle.fr/gb_test.html or you can also copy and paste this code in an HTML document and see how it behaves (this is a full copy of the source code of that page linked above) : HTML Code: <HTML> <HEAD> <TITLE>Guitar Battle</TITLE> </HEAD> <body bgcolor=ff00ff> <br><br> <center> <table CELLSPACING="0" CELLPADDINg="0" BORDER="0"> <tr> <TD colspan="5"> <img src="http://www.guitarbattle.fr/interface_haut.jpg"> </TD> </tr> <tr> <TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_gauche.jpg"> </TD> <TD> <img src="http://www.guitarbattle.fr/interface_situ.jpg"> </TD> <TD> <img src="http://www.guitarbattle.fr/interface_prin.jpg"> </TD> <TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_video.jpg"> </TD> <TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_droite.jpg"> </TD> </tr> <tr> <TD colspan="2"> <img src="http://www.guitarbattle.fr/interface_part.jpg"> </TD> </tr> <tr> <TD colspan="5"> <img src="http://www.guitarbattle.fr/interface_bas.jpg"> </TD> </tr> </table> </center> </HTML> I hope someone can tell me what mistake I did that makes the various parts not well aligned and loosing 1 to 3 pixels here and there. Thanks a lot ! OK what I need to do is find a way to make a specific graphic change automatically on a certain date and change again on another date. A client of mine is having me design his logo so that the logo resembles the season eg: On Christmas his logo would include a Santa Clause and on Halloween there would be a pumpkin within his logo etc... You get the idea... I want to design each logo and have them change at the appropriate time of year. Thank you all in advance On some websites where you type in the link and you are on the site in front of the link where normally E for the internet they change it to an image. Here is an example http://www.bf2player.com click on the link and look at the address bar. HOW CAN I DO THAT. Please Help MCBGamer. In Opera, IE 8, and Chrome, a single graphic image on my webpage apprears distorted. It looks fine in Firefox. The website is the main page of cousincouples.com and the problem is the yellow pixels/yellow line at the very bottom left of the page (Left of the copyright information). One of the graphics appears to wrap within the cell! If anyone could point me in the right direction, I would appreciate it. Hi guys, I'm very new here - literally just searched the web for help on this problem which has been plaguing me for some time... I'll post the code below, but basically, the div_id centre_image, the body text and the right hand side graphics are correctly formatted just in the wrong place! I need them to be to the right hand side of the Left hand menu... I'm hoping I make sense!? There is CSS as well but not sure whether or not this is a CSS issue or html! I would be really greatful if someone could help me out. I'm fairly new to website design but am trying my best using various tutorials on the web and compile something half decent! Thanks in advance, Graham. Code: <!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=UTF-8" />
<title>Double Glazing | Windows | Doors | Conservatories | Rooftrim</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="email_header"><a href=" mailto: xxxx@zurichtitanium.com">xxxx@zurichtitanium.com</a></div>
</div>
<div id="blue_banner">
<h1>Double Glazing Worcester</h1>
</div>
<div class="cleaner"></div>
<div id="menu_wrap">
<div id="tabs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Doors</a></li>
<li><a href="#">Conservatories</a></li>
<li><a href="#">Rooftrim</a></li>
<li><a href="#">Get a Quote</a></li>
</ul>
</div>
</div>
<div id="holder">
<div id="lhs_menu_wrap">
<div id="windows_menu">
<ul>
<li><a href="#">Sleek White</a></li>
<li><a href="#">Woodgrain Collection</a></li>
<li><a href="#">Specialist Finishes</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Energy Saving</a></li>
<li><a href="#">Maintenance Free</a></li>
<li><a href="#">The Logical Choice</a></li>
</ul>
</div></div>
<div id="centre_image">
<div id="centre_LHS_pic"></div>
<div id="centre_RHS_pic"></div>
<div id="getquote_button"><a href="#">Get a Free Quote...</a></div>
</div>
<div id="RHS_Content">
<div id="rhs_window_offer">Double Glazed Windows...<div id="win_text1"><a href="#">Get Quote</a></div></div>
<div id="rhs_cons_offer">Your New Conservatory...<div id="win_text2"><a href="#">Get Quote</a></div></div>
<div id="rhs_trim_offer">Transform Your Roofline...<div id="win_text3"><a href="#">Get Quote</a></div></div>
<div class="guarantee_logo"></div>
</div>
<div id="body_text">
If you are considering enhancing your home, you owe it to yourself to get a professional consultation. At Zurich Titanium we pride ourselves on giving you exactly what you want. Whether it be treating yourself and your home to new <h2>double glazing windows</h2>, <h2>doors</h2>
or a <h2>conservatory</h2>, invite us to show you what we can do. We guarantee you won't be disappointed.
<p>We offer a fully customisable suite of Home Improvement Products, tailor made for your home, to ensure you get what you want and need, and not wasting money on features you'll never use. With our own highly skilled installers, we are able to keep quality control in house, enabling us to give, as standard, the unrivalled <b>Zurich Titanium 10 Year Guarantee</b> on all work undertaken.</p> <p>Our bespoke quotation service, available totally free of charge, will allow you to design the windows or doors, conservatory or roofline, most suited to your home, give you an accurate assessment of the work involved, and of course an exact price.</p>
<div id="body_footer"></div>
</div>
</div>
<div id="footer">Zurich Titanium Home Enhancements Ltd, Registered in England and Wales xxxxxxxx. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</div>
</body>
</html>
And CSS to follow... It may be somewhat rough around the edges; different hints and tips put together from across the web! Thanks so far Michael... I created a sliced image / navigation in Fireworks CS5 and implemented it on a page with success. I then attempted to implement the same code to the header of a WordPress theme, giving me some issues. The actions work correctly, but the images are significantly lower, blocking a portion of the remaining page, and not correctly aligned with one another. I checked for conflicts in the CSS, as well as other simple errors, but couldn't really find what the cause was. Any suggestions? Homepage (correctly displayed graphic): http://camhabib.com WordPress (incorrectly displayed): http://blog.camhabib.com I have a logo on my page coded like this <img src="http://www.etcetc.com/logo.gif" border="0"align="center"> however when u hover ure mouse over the logo it turns into a linked image and when u click on it ,it opens a blank page. I havent coded for the logo to be linked anywhere. why is that happeninig?: thanks Ok so I have these affiliate links and what I would like to do is create a page have my banner/logo located at the top of the page and then have the affiliate link open at the bottom of the page |
|||||||