|
CSS - Messed Up Header Alignment
Every div was aligned correctly until I added gallery-wrapper and tried to position it on empty blue space on the left under the menu div. Now its a mess.
http://aysetunceltaste.refinethetaste.com header html Code:
<div id="wrapper">
<div id="header">
<div class="callus">
<p>
Ayse Taste - PO Box 373 - Westfield, New Jersey 07090
<br />
<a href="mailto:info@aysetaste.com">info(AT)aysetaste(DOT)com</a>
</p>
<h3>1 973 563 0870</h3>
</div>
<div id="menu">
<ul class="lamp">
<li><a href="default.asp">HOME</a></li>
<li><a href="#">ABOUT AYSE</a></li>
<li><a href="#">RECIPES</a></li>
<li><a href="menus.asp">MENUS</a></li>
<li><a href="#">CATERING</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
<style>
#header #gallery-wrapper { float:left; width:350px; height:120px; overflow:hidden; }
#header #gallery-wrapper .gallery-pagination { float:left; }
#header #gallery-wrapper .gallery-more { float:left; }
</style>
<div id="gallery-wrapper">
<div class="gallery-pagination">
<a href="#" class="prev">Previous</a>
<a href="http://eisabainyo.net/demo/images/image2.jpg" class="next" title="Harbour Bridge" rel="2">Next</a>
<span>Photo <span class="current-pos"></span> of <span class="total-pos"></span></span>
</div>
<div class="gallery-more">
<ul>
<li><a href="http://eisabainyo.net/demo/images/image1.jpg" title="Opera House" class="t1 active"><img src="http://eisabainyo.net/demo/images/thumb1.jpg" width="60" height="50" alt="Opera House" /><span>Opera House</span></a></li>
<li><a href="http://eisabainyo.net/demo/images/image2.jpg" title="Harbour Bridge" class="t2"><img src="http://eisabainyo.net/demo/images/thumb2.jpg" width="60" height="50" alt="Harbour Bridge" /><span>Harbour Bridge</span></a></li>
<li><a href="http://eisabainyo.net/demo/images/image3.jpg" title="Sydney from the above" class="t3"><img src="http://eisabainyo.net/demo/images/thumb3.jpg" width="60" height="50" alt="Sydney from the above" /><span>Sydney from the above</span></a></li>
<li><a href="http://eisabainyo.net/demo/images/image4.jpg" title="Sydney Buildings" class="t4"><img src="http://eisabainyo.net/demo/images/thumb4.jpg" width="60" height="50" alt="Sydney Buildings" /><span>Sydney Buildings</span></a></li>
<li><a href="http://eisabainyo.net/demo/images/image5.jpg" title="The Iconic Opera House" class="t5"><img src="http://eisabainyo.net/demo/images/thumb5.jpg" width="60" height="50" alt="The Iconic Opera House" /><span>The Iconic Opera House</span></a></li>
</ul>
</div>
</div>
<div class="logo"></div>
</div>
header css Code:
#header { float:left; width:790px; height:260px; background: url(../images/bg_header.gif) no-repeat; padding:0 5px 0 5px; position:relative; }
#header .callus { float: left; width: 790px; height:60px; color:#FFF; display:inline; }
#header .callus h3 { float:left; font-size:36px; }
#header .callus p { float:right; text-align:right; font-size: 12px; line-height:20px; }
#header #menu { float:left; width: 350px; margin: 0; }
#header #menu ul {margin:0px; padding:0px; }
#header #menu li { float: left; height:30px; list-style: none; }
#header #menu li.backLava { background-color:#a9b3e3; position: absolute; }
#header #menu li a { font-size:14px; font-family: "Trebuchet MS",Vedana,Geneva; text-decoration: none; padding: 8px; display: block; float: left;
position: relative; z-index:10; }
#header .logo { float:left; width:440px; height:200px; background:url(../images/Logo.gif) 20px 10px no-repeat; position:relative; }
#header #gallery-wrapper { float:left; width:350px; height:120px; overflow:hidden; }
#header #gallery-wrapper .gallery-pagination { float:left; }
#header #gallery-wrapper .gallery-more { float:left; }
Similar TutorialsHi Please see watermark.sc It works fine in Firefox but header alignment is not proper in IE What might be the problem? San Okay, I'm no newbie on using CSS but the long story short is that I bought software for a shopping cart and had to use their pre-made template in order to keep the peace. I of course, being a web designer changed the template to my own liking, but can NOT get this header centered for the life of me! I have tried everything I know, including things I have looked up, nothing will work. Here is the main.css (only css file being used) Code:
body {
color: #ffffff;
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-align: left;
margin:auto;
text-align:center;
margin:0 auto;
}
a {
color: #d92f2f;
font-weight: normal;
text-decoration: underline;
cursor: pointer;
}
p {
margin: 0px 0px 7px 0px;
}
sup {
display: inline;
padding: 0px;
vertical-align: super;
font-size: 8px;
}
a:hover {
color: #ffb4b4;
}
legend {
display: none;
}
label {
display: none;
}
fieldset {
border: none;
padding: 4px 0px 4px 5px;
}
fieldset p {
display: block;
margin: 5px 5px 5px 2px;
}
form {
margin: 0px 0px 5px 0px;
}
img {
border: none;
}
li {
padding-bottom: 5px;
}
/* +------------------------------------------------------------+ */
/* | General XHTML Classes | */
/* +------------------------------------------------------------+ */
.center {
text-align: center;
}
.inlinecenter {
text-align: center;
}
p.inline {
display: inline;
padding: 0px;
}
.strong {
font-weight: bold;
}
.big {
font-weight: bold;
font-size: 16px;
}
.hidden {
display: none;
}
a.unfancy {
color: #d92f2f;
font-weight: normal;
text-decoration: underline;
cursor: pointer;
}
/* +------------------------------------------------------------+ */
/* | Skin Specific Divs | */
/* +------------------------------------------------------------+ */
#skin_header {
height: 230px;
width: 899px;
margin:auto;
padding: 0px;
background-position: center top;
}
#skin_wrapper {
width: 910px;
padding: 0px;
margin:auto;
}
#skin_wrapper_full {
width: 100%px;
padding: 0px;
margin:auto;
background-image: url('../media/header.png')
background-repeat: repeat-x;
background-position: top left;
}
#skin_ct {
width: 100%;
padding: 0px;
margin: auto;
border-spacing: 0px;
border-collapse: collapse;
}
#skin_ct_lcol_head {
font-size: 16px;
font-weight: bold;
padding: 10px;
margin: auto;
width: 160px;
height: 80px;
}
#skin_ct_rcol_head {
font-size: 16px;
font-weight: bold;
padding: 10px;
margin: auto;
height: 80px;
text-align: right;
}
#skin_ct_lcol {
padding: 20px 10px 10px 10px;
margin: 0px;
vertical-align: top;
width: 160px;
text-align: left;
}
#skin_ct_mcol {
padding: 20px 10px 10px 10px;
margin: 0px;
vertical-align: top;
line-height: 150%;
}
#skin_ct_rcol {
padding: 2px 10px 10px 10px;
margin: 0px;
vertical-align: top;
width: 160px;
}
#skin_footer {
color: #FFFFFF;
background-color: #000000;
padding: 50px 10px 10px 10px;
margin: 0px;
text-align: center;
background-image: url('../media/footer.png');
background-repeat: repeat-x;
background-position: top left;
}
#skin_pgtitle {
font-size: 16px;
padding: 0px 0px 4px 0px;
margin: 0px 0px 10px 0px;
font-weight: bold;
border-bottom: 1px solid #999999;
}
#skin_content {
margin: auto;
}
There is more coding but the actual image header is located inside of the #skin_header. Also, here is the PHP code where the SRC code is located: Code:
</head>
<body>
<div id="skin_header" align="center">
<img src="skins/Default/media/logo.png" alt="Home" width="899" height="230" align="center" style="margin:auto;"/>
</div>
<div id="skin_wrapper_full"><div id="skin_wrapper">
<table id="skin_ct">
<tr>
<td id="skin_ct_rcol_head" colspan="3">
<div id="skin_menu_head">
<ul>
<?php
if (!(empty($link_home))) {print '<li><a href="' . $link_home . '" title="Home">Home</a></li>';}
if (!(empty($link_cart))) {print '<li><a href="' . $link_cart . '" title="Shopping Cart">Shopping Cart</a></li>';}
if (!(empty($link_checkout))) {print '<li><a href="' . $link_checkout . '" title="Checkout">Checkout</a></li>';}
if (!(empty($link_account))) {print '<li><a href="' . $link_account . '" title="Your Account">Your Account</a></li>';}
if (!(empty($link_contact))) {print '<li><a href="' . $link_contact . '" title="Contact">Contact</a></li>';}
?>
</ul>
Please, ANY help would be appreciated, I want to get this site live, pronto. The link is www.PhantomSupplements.net thank you! I'm trying to get something that looks like this: Here is the xhtml: Code: <div id="container">
<div class="design_box">
<img src="images/image.png" alt="" />
<h1>Header goes here</h1>
<p>Paragraph goes here</p>
</div>
<div class="design_box">
<img src="images/image.png" alt="" />
<h1>Header goes here</h1>
<p>Paragraph goes here</p>
</div>
<div class="design_box">
<img src="images/image.png" alt="" />
<h1>Header goes here</h1>
<p>Paragraph goes here</p>
</div>
</div>
Here is the relevant css: Code: .design_box {
display: block;
margin-bottom: 17px;
}
#row_a_right_web_design img {
float: left;
}
.design_box h1 {
color: #fbfbfb;
font: bold .9em Tahoma, arial, sans;
margin-bottom: 4px;
}
.design_box p {
color: #c4c2c2;
}
Needless to say, the above css does not produce the desired outcome. I'm having a serious brain-fart as to what the best way is to tackle this. Thanks in advance. Hello all, still a little new to css layout problem-shooting in older browsers, so thanks for your help in advance! I'm having a problem which is only occurring in Internet Explorer 6, but I just can seem to figure out what's wrong. if you look at the page in any other browser, you can see the header <div> stretches the width: 100%, but in IE6, the header <div> does not extend all the way to the left, but rather starts where the margin:auto Main <div> tag starts from the left side. What I am lost on is that the footer <div> performs this just fine, but it's position is not fixed and there is no z-index. here is the code for both, and thanks again for having a look: #header { width: 100%; height: 107px; display: block; position: fixed; margin: 0px; padding: 0px; background-color: #000000; background-image: url(../images/main/bhs_design_header_gradient.jpg); z-index: 100; } #footer { width: 100%; height: 35px; display: block; background-color:#000000; margin-top: 10px; clear: both; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #EBEAE8; margin: 0px; background-image: url(../images/main/bhs_design_footer_gradient.jpg); } I don't have a Mac but a buddy of mine that does said the dropdowns for this site are completely screwed up on it.... does anyone know why? Thanks for any help.... http://yourthreshold.com/staging/Chiro/ http://www.lovemeforme.org/test/index.html works perfect in FF, but in IE, the sidebar is further down than I want. How do I fix this? Viewing this page in Firefox: http://moneyextra.thehelpgroup.co.uk/compare/creditcards/ProductDetails.php?index=79 - it looks fine, but when you view it in IE 6, it is really messed up Does anyone know whats causing that to happen and how I would fix it Thanks alot Ie is driving me nuts, well I'm coding this web page and it looks perfect so far in firefox, but it looks messed up in IE http://drowninginmytears.org/store/blah.html thats the link.. i want it to look how it is in firefox in IE, but I'm not sure how.. this is my css: Code: body
{
margin: 0px auto;
background-color: #BFD1E1;
text-align: center;
padding: 0px;
background-position: top;
}
#wrap
{
position: relative;
margin: 0 auto;
text-align: left;
width: 679px;
}
#hearts
{
background-image: url(hearts.jpg);
height: 44px;
width: 43px;
position: absolute;
margin-left: 490px;
}
#girl
{
background-image: url(girl.jpg);
margin-top: 190px;
height: 358px;
width: 142px;
margin-left: 10px;
}
h4 {
font-family: Arial, verdana, tahoma;
text-transform: uppercase;
font-size: 1.0em;
text-align: right;
font-weight: bold;
color: #5886B2;
letter-spacing: 0px;
padding: 10px 20px 0px 0px;
margin: 0;
}
h5 {
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.7em;
text-align: right;
line-height: 5px;
font-weight: bold;
color: #C3D4E3;
letter-spacing: 3px;
padding-right: 17px;
margin: 0;
}
#navigation
{
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.54em;
text-align: left;
font-weight: bold;
color: #769DBF;
letter-spacing: 1px;
margin-top: 25px;
margin-left: 20px;
position: absolute;
}
#toptitle
{
background-position:top;
height: auto;
width: 768px;
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
}
#blueline
{
height: 6px;
width: 752px;
background-color: #D8E8F8;
margin-top: 8px;
margin-left: 8px;
margin-right: 0px;
position: absolute;
}
#headerimage
{
height: 173px;
width: 752px;
background-image: url(main.jpg);
margin-top: 15px;
margin-left: 8px;
position: absolute;
}
#main {
margin-top: 100px;
width: 768px;
margin: 20px 0;
margin-left:40px;
display: inline;
}
#header
{
background-image: url(top.jpg);
vertical-align: bottom;
height: 10px;
width: 768px;
margin-top: 20px;
padding: 0px;
}
#bottom
{
background-image: url(bottom.jpg);
vertical-align: bottom;
height: 17px;
width: 768px;
margin-top: 0px;
padding: 0px;
}
p
{
text-align: justify;
color: #555;
margin-top: 0px;
margin-bottom: 9px;
}
.caps
{
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
ol
{
margin: 0;
padding: 0;
}
ul, li
{
color: #666;
list-style-type: none;
border: 0;
margin: 0;
padding: 0;
}
a:link, a:visited
{
color: #FA65CD;
text-decoration: none;
}
a:hover
{
color: #FD92E0;
}
a:active
{
color: #FB7FD7;
}
#container
{
position: relative;
margin: 0 auto;
text-align: left;
background: url(bgfront.gif) repeat-y;
width: 679px;
}
#content
{
padding: 28px 20px 0 20px;
min-height: 200px;
}
can anyone help? thanks! There is a problem with What's New section's appearance (right bottom). I want it appear just like here http://aslanyurek.com/atolye/index.asp but instead, it appears as. http://www.refinethetaste.com/html/ Style I created for the whole right block. PHP Code: /*right block*/ #rblock .notice { width:375px; height:30px; font-size:13px; line-height:30px; color:#f3f2f1; background:#5f5548 url(../images/isaret_2.gif) no-repeat 1% 55%; text-indent:15px; } #rblock .search { width:325px; margin-top:1px; background:#9e0b0e url(../images/icon_arama.gif) 3% 50% no-repeat; padding:5px 5px 5px 45px;} #rblock .search span { color: #FFFFFF; font-size:9px;} #rblock .news { width:375px; border-bottom:1px dotted #CCCCCC;} #rblock h1 { font-size: 14px; color:#716759; background:#ece7d1; text-indent:15px; line-height:25px;} #rblock .news h2 { font-size: 12px; color:#534741;} #rblock .news p { font-size: 10px;} #rblock img#news{ float:left; margin:10px; height: 60px; width: 66px; border:1px solid #b39f87; padding:1px; background:url(../images/load.gif) center no-repeat; } #rblock .clear { clear:both; height:1px; width:1px; overflow:hidden; } On the right column of my website NashvilleDesignz dot com the form is all the way at the bottom right of the page in Internet Explorer...I checked all the margins and padding yet either seems to check out ok. Any ideas on how to get this to work correctly in IE please let me know...all other browsers are working correctly I've created a 3 column layout and it works fine. But on some pages including links,banners... the whole of the right column is positioned wrongly. It even works fine in Firefox. Any idea what the problem could be? Any advice would be appreciated. The link by the way is here Thanks, Sunny Patel I have 2 images that are not working the same in IE and FireFox take a lookhere Ok now it isnt a fire fox issue anymore it is a problem in all browsers. Here is the css that is messing up. Code: .forgot {COLOR: #dddddd; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #4d1e09; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.forgot:active {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.forgot:visited {COLOR: #dddddd; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #4d1e09; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.forgot:hover {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.meminfol {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #EEEEEE; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol:active {COLOR: #000000; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #bbbbbb; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol:visited {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #EEEEEE; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol:hover {COLOR: #000000; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #cccccc; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol2 {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #dddddd; padding: 2px 0px 2px 0px; width: 390px; display: block;}
.meminfol2:active {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 390px; display: block;}
.meminfol2:visited {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #dddddd; padding: 2px 0px 2px 0px; width: 390px; display: block;}
.meminfol2:hover {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 390px; display: block;}
Never mind it was just that the font Verdana was spelled wrong. Nick I'm trying to make a simple css dropdown menu for one link in my nav bar. The website is: http://www.blanchetrocker.com/ If you hover above "Products", you should see a drop down, but a few of the below layers overlap it, including the flash object, which cuts off submenu items. It seems to me that the rest of the page is overlapping the dropdown menu when you hover over it, so as soon as you leave the little box that you originally hover over to see the submenu, the rest of the menu disappears. Also, none of the other links work yet either because I was just trying to get this dropdown to work initially. Any help is greatly appreciated! EDIT: I added a z-index to the hidden drop down menu and it seems to have fixed my problem. Was this a good solution or should I be doing something else? EDIT #2: Scratch that it only seems to work in FF, and in IE the flash object blocks the menu still. I'm having some issues with an info form for a website I'm coding. The form uses CSS, and looks just fine in Firefox, but in IE part of it is messed up. http://www.blanchetrocker.com/contactus There's the URL. I really appreciate any tips and fixes. Hey Folks, I am a newbie with designing webpages and having some problems with a website that I just created. If any of you could point to a resource of help me out, that be great. Heres the link www.pcdigger.com The middle part is messed up in firefox. HTML and CSS both are validated per www.w3.org but I guess, that doesnt do anything for firefox. Thanks, DesignFlaw hey i am new in developing sites with css codes so i started coding my home page with all the css code that was required and when half the page was done i checked it in the browser. so it looks good in firefox but it looks messed up in IE. So please suggest me something to fix my problems. I am using Dreamweaver to develop my site. http://www.zahra-zahra.com/admin/editCategory.php the input boxes are all out of align.. i dont know why!!! here is the css Code:
#content form {
font-size:0.8em;
clear:none;
}
#content label {
width:20%;
float:left;
font-size:0.9em;
margin-bottom:0em
font-size:1em;
clear:none;
}
#content input, #content select, #content textarea {
margin:0em;
clear:none;
}
#content .submit {
clear:none;
}
I have a website that I am trying to add some graphical enhancements to. I made them, and I think they look great! The problem is that they do not look the same when viewed in IE and I am not even sure where to start fixing them, as the problem doesn't make sense to me. starcraft-source.com/sandbox/ That is the URL to the page. It works great in FF but as I have said IE is messed up. Any help anyone can offer would be awesome. Thank you in advance. |
|||||||