|
CSS - Header Graphic Not Aligning Right
Can anyone take a minute or two and see if they can figure out why the header graphic on the following page is not aligning properly: Click Here
It appears that way in FF, IE6, and IE7... I don;t have time to recode the entire page -- I just need to know what is causing the problem....Try as I might, I don;t see the cause...Maybe conflicting styles? I dont know... Thank you. Similar TutorialsHi, can anyone help me with this problem? I using a graphic with individual boxes on it for links. I want to place text in the boxes describing the link. When I set the padding-top and line - height properties. The text aligns prefect with the graphic. The problem I am having is the padding-top property lowers the graphic placing it below the rest of the table elements. Below is the code for the table cell and the css style. <td height="261" valign="top"><table width="198" height="410" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="198" height="410" valign="top" class="td_1"><a href="#">Home</a> <br /> <a href="neoceram.php">Design</a> <br /> <a href="pyroceram.php">Development</a> <br /> <a href="patterns.php">Management</a> <br /> <a href="drilling.php">Portfolio</a> <br /> <a href="tints.php">Contact Us</a> <br /></td> </tr> .td_1 { background-image:url(nav_bar.gif); background-position:left; background-repeat:no-repeat; background-color: transparent; padding-top: 66px; width: 154; font-size: 12px; font-weight:600; line-height: 21px; position: absolute; font-family:Arial, Helvetica, sans-serif; } Thanks for all your help, mdh2000 Ok I have created an background image to what i want in a navaigation list, the problem is I need to set the height else the graphic fails to appear and the graphic won't scale to fit inside the area ( end part chops off). #n1 { /* all lists */ // height:50px; background-image:url('green1.gif'); } #n1 ul{ /* all lists */ height:50px; //will fail without? list-style-type:none; // background-image:url('green1.gif'); } #n1 li a{ /* all lists */ float:right; // background-color:yellow; padding-right:5px; text-decoration:none; } <div id="n1"> <ul> <li><A href="#">kkk</a></li> <li><A href="#">kkk</a></li> <li><A href="#">kkk</a></li> </ul> </div> Hello there, I have been trying to get a web site up and running and am having problems getting a graphic to be positioned to the left and a menu right justified. So far I have been able to make the CSS compatible with both firefox and IE. So far I've got Code: <table width="100%" bgcolor="#666666"> <tr> <td> <img src="images/logo.gif"> </td> <td> <div class="menu" style="text-align:center"> <div class="outerFirst"><a href="index.php"><span>Home</span></a></div> <div class="outerFirst"><a href="index.php"><span>Services</span></a></div> <div class="outerFirst"><a href="index.php"><span>Senoir Centers</span></a></div> <div class="outerFirst"><a href="index.php"><span>Calendar / Menu</span></a></div> <div class="outerFirst"><a href="index.php"><span>Contact Us</span></a></div> <div class="outerFirst"><a href="index.php"><span>About</span></a></div> </div> </td> </tr> </table> and for the CSS Code:
#menu {
height: 54px;
margin: 3em 0; padding:0 1em;
border-bottom: 0px solid black;
}
div.outerFirst {
float: left;
width: 100px; height: 130px;
margin: 0 0px 0 0;
background: url( '../images/greyFirst.gif' ) 0 -50px no-repeat;
}
div.outerFirst a {
cursor: pointer;
display: block;
margin: 0; padding:0;
width:100px; height:54px;
overflow:hidden;
font-family: Arial;
font-size:0.7em;
font-weight:normal;
color:#FFFFFF;
text-decoration: none;
background: url( '../images/greyFirst.gif' ) top left no-repeat;
}
div.outerFirst span {
height: 54px;
display: block;
margin:0; padding: 25px 0px 0px 0px;
}
I know that I've got tables in there, but I don't know how the image and the menu be on the same level without it. Any help with the CSS and html (if I've missed something) would be awesome. Thanks! - K Basically I am creating a webpage using the free webhost weebly. I have modified the CSS, and the webpage is getting there, however, I have a problem with the graphics in the background, this is what I mean... [IMG](URL address blocked: See forum rules)[/IMG] Why am I getting this? Why isnt the graphic going all the way up? I also get this at the bottom of the page but only on the right hand side. Anyway heres the html.. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)"><html xmlns="(URL address blocked: See forum rules)"><head> <title>%%TITLE%%</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--[if lt IE 7.]><script defer type="text/javascript" src="/files/theme/pngfix.js"></script><![endif]--></head><body><div id="wrapper-menu-top"><div id="menu-top"> <ul> %%MENUITEMSTART%%<li><a href="%%MENUITEMLINK%%"><span>%%MENUITEMTITLE%%</span></a></li>%%MENUITEMEND%% %%MENUITEMACTIVESTART%%<li class="active"><a href="%%MENUITEMACTIVELINK%%"><span>%%MENUITEMACTIVETITLE%%</span></a></li>%%MENUITEMACTIVEEND%% </ul></div><!--menu-top--></div><!--wrapper-menu-top--><div id="wrapper-header"><div id="header" class="weebly_header"><div id="wrapper-header2"><div id="wrapper-header3"> <h1>%%TITLE%%</h1></div></div></div></div><div id="wrapper-content"><div id="content"> %%CONTENT%% </div><div id="wrapper-footer"><div id="footer"> <p><span id='weeblyFooter'>%%WEEBLYFOOTER%%</span></p></div></div> </body></html> and the css Code: body { font-family: trebuchet ms, verdana, arial, tahoma; font-size: 90%; color: #888; background-color: #CDBA96; line-height: 160%; margin: 0; padding: 0; text-align: center;}/* Set the page width */#wrapper-menu-top, #header, #wrapper-content, #wrapper-footer { width: 768px; margin: 0 auto; text-align: left;}#wrapper-menu-top { background: white url('fff.jpg') no-repeat left top;}#menu-top { background: transparent url('fff.jpg') no-repeat right top;} #menu-top ul { margin: 0 20px; padding: 1em 0 0 0; list-style: none; font-size: 85%; float: left;}#menu-top li { display: inline; float: left;}#menu-top a { float: left; background:url(menuleft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; line-height: 1.5em;}#menu-top a span { background: transparent url(menuright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#5b8fbe; display: block; float: left; cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */} #menu-top a:hover { background-position:0% -42px; } #menu-top a:hover span { background-position:100% -42px; } #menu-top li.active a { background-position:0% -42px; } #menu-top li.active a span { background-position:100% -42px; }#header { background: #eee url('banner_mountains.jpg') no-repeat center top;}#wrapper-header2 { background: transparent url('ds.jpg') top left no-repeat;}#wrapper-header3 { background: transparent url('right1.jpg') top right no-repeat;}#header h1 { margin: 0 25px; padding: 0; height: 192px; line-height: 3em; color: #636363; font-size: 130%;}#wrapper-content { background: white url('left1.jpg') no-repeat left top;}* html #wrapper-content { height: 1%; }#content { background: transparent url('right1.jpg') no-repeat right top; padding: 15px 40px; min-height: 600px; height:auto !important; height:400px;}/*#wrapper-menu-page { float: right; width:10px; margin: 20px 0px 3em 0px; text-align: center; line-height: 140%; font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;}* html #wrapper-menu-page { margin-right: 15px; }*/#menu-page { padding-top: 5px; }#menu-page ul { margin: 0; padding: 0; list-style: none; font-size: 90%;}#menu-page h3 { font-size: 75%; text-transform: uppercase; margin: 1em 0 0.3em 0; color: #5b8fbe; font-weight: normal; letter-spacing: 0.15em;}#menu-page a:link, #menu-page a:visited { color: #888; }#menu-page a:hover { color: #5b8fbe; }#wrapper-footer { margin-top: 1em; text-align: center;}#footer { margin: 0 20px; background-color: #e5f0fc; border: 1px solid #ccc; border-bottom: 0; clear: both;}h2 { font-size: 110%; }h3 { font-size: 100%; }a:link, a:visited { color: #5b8fbe; text-decoration: none; }a:hover{ color: #666; text-decoration: none; }
Thanks Hi people I have a graphic which has a specific Hue. I would like to allow users who have IE to change the Hue of that graphic by picking it from a combo-box Is there a way to change the Hue of a graphic in runtime by changing CSS filters or by some other technique? regards Hi guys, I'm roughing out a template and wondered if you could please help me with something: In IE the background graphic body-stretch.jpg does not stretch as it does in Firefox, I read around and thought this may be something to do with the peekaboo hack but I couldn't get any of the fixes to work. Any ideas? Also, you will see I have a footer graphic that stretches all the way across the bottom of the page, right now it is outside my "container" div because when placed inside it is restricted to the width of the container and not to the edges of the page. If I change the width of the container to suit it everything gets left aligned. Placing the footer div outside the container means the textual content crosses over it (see page in firefox to see what I mean). Pulling my hair out! Any pointers would be greatly appreciated Code:
@charset "utf-8";
/* CSS Document */
html { background-image:url(images/body-stretch.jpg);
background-repeat:repeat;
}
body { background-image:url(images/header-stretch.jpg);
background-repeat:repeat-x;
/*width:100%;*/
padding:0px;
margin:0px;
text-align: center; /* to centre page pt 1 */
font-family:Arial, Helvetica, sans-serif;
}
a {
color:#b7b977;
text-decoration:none;
}
a:hover {
color:#8e52b6;
text-decoration:underline;
}
#nav {
background-image:url(images/navigation.jpg);
background-repeat:no-repeat;
width:899px;
height:108px;
padding:0px;
margin:0px;
}
#nav a {
font-size:24px;
color:#000;
background-color:#e2b550;
}
#nav a:hover {
font-size:24px;
color:#fff;
background-color:#9755c3;
}
p {
color:#fff;
}
#container {
margin: 0 auto; /* to centre page pt 2 */
width:899px; /* centres stuff but messes up footer if
it's contained within it (which it is */
}
#header {
}
h1 { background-image:url(images/banner.jpg);
background-repeat:no-repeat;
width:899px;
height:242px;
padding:0px 0px 0px 0px;
margin:0px;
text-indent: -9999px;
}
h2 {
font-size:34px;
color:#e1b650;
}
#content { background-image:url(images/body.jpg);
background-repeat:repeat-y;
height:100%;
/*width:899px;
margin: 0 auto;*/
}
#main-content {
float:left;
width:635px;
text-align:left;
padding-left:20px;
}
h2 {
display:inline;
}
#sidebar-content {
float:right;
width:244px;
}
#footer { background-image:url(images/footer-stretch.jpg);
background-repeat:repeat-x;
width:100%;
height:281px;
}
Code:
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>Dwardus</title>
</head>
<body>
<div id="container">
<div id="header">
<h1><a name="top">Dwardus Prime - Entertainment Blog</a></h1>
<div id="nav">
<a href="#">HOME</a>
<a href="#">FILM</a>
<a href="#">TELEVISION</a>
<a href="#">MUSIC</a>
<a href="#">VIDEO GAMES</a>
</div>
</div>
<div id="content">
<div id="main-content">
<h2>Welcome</h2>
<p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<a href="#">link</a><p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<a href="#">link</a><p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<a href="#">link</a>
<p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<a href="#">link</a>
</div>
<div id="sidebar-content">
STUFF HERE!
</div>
</div>
</div>
<div id="footer">
<p>FOOTER INFO</p>
</div>
</body>
</html>
Hi there, I have two questions actually. I purchased this web template and am putting in my own logo but running into two problems: 1) I don't know how to adjust the css file to get the logo to move towards the bottom of brown header area (more in line with the nav text) 2) The logo I created looks okay in Internet Explorer, but is showing up as really pixelated in Firefox and I cannot seem to find any reasons why this is occurring. I am including links to the website http://www.kohlrbaby.com/Communicating/index.html and CSS file http://www.kohlrbaby.com/Communicating/default.css , but have put in the exact associated code below: CSS code associated with the logo as far as I can tell: Code: /** LOGO */
#logo {
float: left;
width: 430px;
height: 96px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
text-indent: -9999em;
}
#logo h1 {
display: block;
top: 0px;
left: 0px;
width: 430px;
height: 96px;
}
#logo img {
top: 200px;
left: 0px;
}
#logo p {
margin: -50px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
HTML Code: Code: <div id="logo"> <a href="http://www.communicatingwell.com"><img src="images/CWlogo.gif" height="35" width="300"/></a> </div> I hope these are okay questions to post, I have tried to figure it out myself, but don't seem to be getting anywhere! Many thanks for any ideas or help! Hi, This is my first post, and I am grateful for any help. I am new to CSS and I have read and absorbed Simon Collison's very good book "CSS Web Development." My question is quite simple. I have a background-image associated with an ID (shown below) which successfully lays down the image but it does not push text. #mainmenu{ background-image: url(images/mainmenubg.jpg); background-repeat: no-repeat; background-position: top center; text-align:left; } ie, my html or php file might read: <div id="mainmenu> <p>Some text blah blah </div> and the text goes right over the image. Is there a "best way" to ensure that the text appears below the image? I can apply a height variable to the id, and then place the text below the /div, which works, but it is not flexible, ie, if I change the size of the image, I need to adjust the height value, and I am trying to avoid this. Any help would be greatly appreciated. Thanks, Pradhan I created our site's home page using strictly presentational mark-up and am now trying to lay it out strictly using css. Here is my attempt: jalc.org/index_css.html The graphic on the right-hand side with the word Jazz and the musicians should align with the large center image (just under the drop-down nav). Here is how the page is supposed to look: jalc.org I can't get that image to float right and align with the top of the large image. If anyone has any suggestions I would be most appreciative if you could share. I have spent too much time on this already. I'm going mad. Thanks, Andy I'm a php/css/graphic designer and I'm looking for some small to medium projects to work on. I charge less than most people and I get everything done in a fast,professional manner. You can contact me at ajay@bountyx.net or AIM: stareatceiling. Thank you in advance. Hi There I'd really appreciate some help on this please. I keep getting a problem on just one PC (my client's!!), where a left hand graphic disappears, but shows up on everyone else's browsers in firefox, opera, IE6 and safari. She's running Windows XP with IE6 and firefox. Can anyone suggest why the left hand black logo panel does not show up on her system? Any help would be most appreciated. Thanks! Hello, I need to make some unordered lists within a page appear with a graphic as a bullet, and some appear with a disc. My current code is: Code:
ul {list-style-image: url(../img/redarrow.gif)}
But this makes all unordered lists appear with the graphic, and of course if I comments out that code, all unordered lists appear with a disc. Please let me know if it is possible to code it so that I can have both in a page. Thanks! I'm trying to have the contact information for a site to always appear in a right div next to the main content div. I would like it to always appear in the top right of the div, no matter how much the user scrolls down. This way, the information is always visible. I tried experimenting with background images in certain divs, but Firefox (but not IE) was having trouble displaying it the way I wanted. I've seen it in action before, so I'll post a URL if i can find where. I'm trying to create a 'fluid' (i.e. easily resizeable) box that has a image in the top left corner, and a different image in the top right corner. ----CSS------ .display { background-color:transparent; margin:20px 10px 40px 10px; width:45%; } .displayTopLeft { background-image:url('../images/document_logo.gif'); background-repeat:no-repeat; background-position:top left; border-left: solid 2px #0099CC; padding-left:40px; height:27px; float:left; } .displayHdr { float:left; border-top: solid 2px #0099CC; padding-top:7px; font-weight:bold; background-color:#fff; } .displayTopRight { background-image:url('../images/document_corner.gif'); background-repeat:no-repeat; background-position:top right; height:27px; width:27px; float:right; } .content { padding:5px 12px 5px 12px; background-color:#fff; border-right:solid 2px #0099CC; border-left:solid 2px #0099CC; border-bottom:solid 2px #0099CC; } ----HTML----- <div class="display"> <div class="displayTopLeft" ></div> <div class="displayHdr">Ethos</div> <div class="displayTopRight"></div> <div class="clear"></div> <div class="content"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing etc etc </p> </div> </div> It almost works the way I want,except the border of the 'DisplayHdr' div only covers the text 'Ethos', and I need it to cover all the space between the 'DisplayTopLeft' div and the 'DisplayTopRight' div. (It's not possible to put a border on the 'DisplayTopRight' div since it's meant to represent a folded corner) Is what I'm trying to do possible? Or am I missing something incredibly simple? I know the user can enable printing of bg grcs and colour, this is an administrative thing so I can put in the manual that they need to do that in their browser if they want to print a certain page. I have certain rectangles on the page that align perfectly with areas on the background graphic on the screen. However, when I print preview in Firefox this synch is lost and the rects don't line up with the bg graphic. Kravvitz will hate this page cuz it has a few xhtml errors. I don't know how to make those errors go away without ruining something else. For example, "no system id specified." Quote: Your document includes a DOCTYPE declaration with a public identifier (e.g. "-//W3C//DTD XHTML 1.0 Strict//EN") but no system identifier (e.g. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"). This is authorized in HTML (based on SGML), but not in XML-based languages. so if I put that system identifier in it then the page fails to lock if I render a secure version of it because http://www.w3.org is insecure content, and erodes consumer confidence. The "name" attribute well if you don't have it when you post, I don't think the posts will register it, will they? I have proprietery attributes also and they are kinda necessary. The rest of the errors I could probably clear, but 21 is not so bad compared to 2,874..... Anyway here is an example http://demo.tixrus.us/98 How can I get this page to print correctly??? Hi all, I'm a CSS newbie and I need your help, pleeease! I tried to make a rollover graphic menu today. And of course I got completely stuck with this code: Code:
/* Header */
#header {
position: absolute;
background: url(images/header.jpg) no-repeat;
width: 830px;
}
#menu, #menu li a:hover, #menu li.current a {
background: url(images/link_menu.jpg) no-repeat;
}
#menu {
margin: 115px 0px 0px 29px ;
width: 600px ;
height: 75px ;
list-style-type: none;
}
#menu li {
float: left;
margin: 0px 0px 0px 0px;
width: 120px;
height: 75px;
}
#menu li#menu-contact {
margin: 0;
}
#menu li a {
display: block;
padding: 75px 0px 0px 0px;
height: 75px;
overflow: hidden;
}
html>body #menu li a {
height: 0;
}
#menu li#menu-home a:hover, #menu li#menu-home.current a {
background-position: 0px -75px 120px 29px;
}
#menu li#menu-about a:hover, #menu li#menu-about.current a {
background-position: -120px -75px;
}
#menu li#menu-gallery a:hover, #menu li#menu-gallery.current a {
background-position: -240px -75px;
}
#menu li#menu-foto-shop a:hover, #menu li#menu-foto-shop.current a {
background-position: -360px -75px;
}
#menu li#menu-contact a:hover, #menu li#menu-contact.current a {
background-position: -480px -75px;
}
The rollover works, but somehow it shifts to the right Like this: URL What am I doing wrong? Why does it shift? Thanks in advance... Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please. CSS LINK http://www.devwebsites.com/estilos.css Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE. http://www.sun-awnings-direct.co.uk/the-carino-p-29.html It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it? Thanks a lot After browsing through w3schools and learning most of what css has to offer I for some reason can't figure out a way to align items using css. I was just wondering if someone could help me with the correct tag. |
|||||||