|
CSS - Images Not Lining Up; Breaking To Next Line...
Hi there,
I'm having a tough time getting these two images to align side by side...the line keeps breaking and thus forcing the image to the next line, as show here (not to mention it's messing with my footer): http://www.groundedgroup.com/client...A_Index_v2.html Here's the respective css: CSS Stuff Here's what it's supposed to look like: http://www.groundedgroup.com/client...EA_Show_v2.html Both of the images add up to a total width of 956px, however, the div containing it is set to 947px width. If I change it to 956px, it works, but it pushes out the sides, resulting in the left and right vertical borders not lining up with the rest of header, footer, etc. Ideally, I want these images to hover over this area and thus not spread out the design. Got any ideas? BTW, I checked my css and xhtml before posting and it validates. Thanks for your help. Similar TutorialsHi, I have my images defined in my .css file and then called in the div so that I can write on them and like them this way But the problem is that I seem to be unable to put them side by side because div puts in a line break and span won't show them with their assigned width and height. Any help appriciated! Denis Code:
<html>
<head>
<title> Dublin Blues || Rugby League Football Club</title>
<link href="base.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main_container" style="border:solid 2px black">
<div class="newsarea" style="border:solid 2px black">
</div>
<div class="welcomeBar" style="border:solid 2px black">
</div>
</div>
</body>
</html>
Code: .mainBackground {
background-repeat: repeat-x;
background-color: #284164;
}
#main_container {
background-repeat: no-repeat;
background-image: url(images/main.jpg);
background-color: #284164;
width: 850px;
height: 520px;
border: solid 1px black;
margin: auto;
}
.newsArea {
background-repeat: no-repeat;
background-image: url(images/main_bg.jpg);
background-color: #284164;
margin-left: 10px;
margin-top: 20px;
width: 370px;
height: 455px;
}
.welcomeBar {
background-repeat: no-repeat;
background-image: url(images/bgRecRed.jpg);
background-color: #284164;
width: 500px;
height: 95px;
}
Hi CSS masters, I am building a site for a friend who's starting a concrete business. I just finished making all the BG images, and am now starting the coding process, all CSS based. Well, I'm highly mediocre at CSS design, and could use some help. The build site is here. As you'll be able to see, the entire BG is actually made up of 4 images. The top image repeats along x, the bottom left along why. The other two are to remain static and unrepeated. In IE, the problems are as follows: 1. On top, there is a small white area, and I don't know why. I can't seem to find why it's padded. The two images should but right up against each other to create a seamless piece visually. 2. The part that is currently in the middle should be on the left. Why is it not? 3. The tan portion of the left part should repeat downward along y. It doesn't. Why? In FF, the problems are as follows: 1. The body is not centered. 2. Everything else is fine regarding BG placement (damned IE), but the bottom part of the left image is still not repeating. Help is, as always very much appreciated! Thanks, folks, Chris I've got stuck and am having difficult lining images and adverts up in my hobby website. What I want is one image, a small advert, home image, small advert, next image all in a line. When I test the page with google's Chrome the page looks perfect, but with firefox and IE it's all jumbled up. To understand have a look at the page i've been working on with the three different programs. The link is: www (dot) lisbonweekendguild (dot) com/photowebpage/evora/aqueduct_evora.html Any ideas how to organise it for IE and firefox? Any help is greatly apperciated, as its driving me mad! CSS for the three images is .navigationimagesleft{ margin-right: 8px; margin-left: 8px; } and i'm using dreaweaver CS3..... Here's the site: http://www.whitecapgraphics.com/APP/index.php Here's the CSS: Code:
@import url("shadows.css");
* {margin:0; padding:0;}
body {
background-image:url(images/background.gif);
color:#450109;
behavior:url(scripts/csshover.htc);
width: 100%;
}
img {
behavior:url(scripts/pngbehavior.htc);
}
img#yap {
width:167px;
height:145px;
border: 0;
}
a {
color:#D6970C;
text-decoration:none;
font-weight:bold;
font-variant:small-caps;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:.9em;
}
a:visited {
color:#D6970C;
text-decoration:none;
font-weight:bold;
font-variant:small-caps;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:.9em;
}
a:hover {
color:#450109;
text-decoration:underline;
}
a:active {
color:#450109;
text-decoration:underline;
}
div#main {
background-color: #FFFFFF;
margin: auto;
border-width: 0px 5px 0px 5px;
border-style: solid;
border-right-color: #450109;
border-left-color: #D6970C;
border-bottom:15px solid #450109;
min-width:980px;
width: 95%;
width: expression((documentElement.clientWidth < 1000) ? "980px" : "95%" );
}
#main #logo {
background-image:url(images/headerbg.gif);
background-position: top center;
background-repeat:no-repeat;
background-color:#71001E;
}
#logo #logoimage {
text-align:center;
margin:auto;
margin-left:193px;
}
#main #leftflourish {
float:left;
}
#main #rightflourish {
float:right;
}
div#navigation {
background-color:#400000;
float: right;
margin: 0;
width: 100%;
min-height: 24px;
border:0;
}
div#navigation ul {
margin-left: 193px;
padding-left: 5px;
padding-right: 5px;
background-image:url(images/logob.jpg);
background-position:center;
background-repeat:no-repeat;
}
div#navigation ul li {
float: left;
list-style-type:none;
width: 25%;
position: relative;
z-index:99;
}
div#navigation a {
text-decoration:none;
font-variant:normal;
color: #DFCDB6;
text-align:center;
display: block;
width: 100%;
line-height: 25px;
font-family: serif;
font-size:1.1em;
font-weight:normal;
letter-spacing:-.05em;
}
div#navigation a:hover {
color: #FFCC00;
}
div#navigation ul li ul {
width: 90%;
padding: 0;
margin:0;
margin-left:5%;
margin-right: 5%;
position:absolute;
display: none;
background-image:url(images/uldropback.jpg);
background-position:bottom;
background-repeat:no-repeat;
background-color:#DAC4A5;
}
div#navigation ul li ul li {
width: 100%;
background:transparent;
background-image:url(images/lidropback.jpg);
background-position: left center;
background-repeat:repeat-y;
}
div#navigation ul li ul li a{
color:#660000;
background-image:url(images/adropback.jpg);
background-position:right;
background-repeat:repeat-y;
line-height:1.8em;
}
div#navigation ul li ul li a:hover{
color:#71001E;
font-weight:bold;
text-decoration:underline;
}
/* shows drop down on hover */
div#navigation ul li:hover ul, div#navigation ul li ul:hover {display:block;}
div#lcolumn {
width: 190px;
float: left;
margin: 0;
padding: 0;
position: relative;
top: -66px;
z-index:999;
}
div#lcolumn ul{
padding:0;
margin-bottom:2em;
}
div#lcolumn ul li {
list-style-type:none;
text-align:center;
width: 167px;
margin-bottom: .1em;
background-image: url(images/yapdropback.jpg);
background-color:#660000;
background-repeat: repeat-y;
}
#main #body #lcolumn ul li a {
color:#DFCDB6;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:.9em;
line-height: 24px;
letter-spacing: -.02em;
font-variant:small-caps;
margin: 0;
}
#main #body #lcolumn ul li a:hover {
color: #ffcc00;
}
#main #body #lcolumn #featureContent {
padding-top: 114px;
background-image: url(images/featurestitle.jpg);
background-repeat: no-repeat;
width: 190px;
}
#main #body #lcolumn #featureContent div{
padding-right: 30px;
padding-left:10px;
background-image:url(images/featuresback.jpg);
background-repeat:repeat-y;
color:#FFFFCC;
}
#main #body {
background-image:url(images/chaser.jpg);
background-position:bottom right;
background-repeat:no-repeat;
position: relative;
margin-bottom:3em; /*1.25 + 1.75*/
clear:both;
height: 100%;
}
#main #body #content {
padding-left: 210px; /*fix for IE - it's including from side of L Column*/
position: relative;
top: 48px;
z-index:1;
padding-bottom:200px;
}
#content img {
border: 1px solid black;
padding: 5px;
margin: 0px 10px;
}
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 1.3em;
line-height:1.1em;
text-transform: uppercase;
color: #350000;
width: 50%;
}
#main #body #content div ul li {
float: right;
list-style-type:none;
padding-left: 2%;
line-height:2em;
display:block;
font-weight:bold;
font-size:.9em;
}
h2 {
position:relative;
width: 98%;
background-image:url(images/navback.jpg);
background-repeat:repeat-x;
padding-top:1%;
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
text-indent: 2em;
padding-bottom: 1.5em;
}
#main #body #content div ul {
width: 46%;
position: absolute;
top: .2em;
right:0;
padding-right:4%;
}
h1:first-letter {
font-size: 1.7em;
}
div#h1line {
background-image:url(images/divider.gif);
background-position:right;
height:65px;
width: 97%;
}
h3 {
font-size: 1.2em;
padding-left: 4%;
}
h4 {
font-size: 1em;
font-weight:bold;
padding-left: 6%;
line-height:1em;
font-family:Georgia, "Times New Roman", Times, serif;
}
.h3line {
background-image:url(images/smdivider.gif);
background-position: top right;
background-repeat:no-repeat;
min-height: 2em;
}
hr {
color:#660000;
margin-left: 4%;
width: 90%;
}
#content p {
padding: .5em 20px 1.5em 2%;
margin: 0 8% 0 4%;
font-family:Georgia, "Times New Roman", Times, serif;
}
ul.contentlist{
padding: 0px 20px 1.5em 2%;
margin: 0 8% 0 4%;
font-family:Georgia, "Times New Roman", Times, serif;
}
p.center {
text-align:center;
}
table {
width: 80%;
font-family:Georgia, "Times New Roman", Times, serif;
}
form table {
padding-left:6%;
margin-bottom:1.5em;
}
form td {
font-weight:normal;
}
td {
font-weight:bold;
}
.right {
text-align:right;
padding-right: 2%;
width:59%;
}
div.table {
top: -1.5em;
width:auto;
position:relative;
}
div.iframe {
display: block;
width: 92%;
margin-left: 4%;
height:60em;
}
span.leftcell{
display:block;
width:47%;
text-align:right;
float:left;
padding-right:1%;
font-family:Georgia, "Times New Roman", Times, serif;
}
span.rightcell{
display:block;
width:49%;
float:left;
text-align:left;
padding-left:1%;
font-weight:bold;
font-family:Georgia, "Times New Roman", Times, serif;
}
span.question {
font-weight:bold;
}
span.package {
width:55%;
float: left;
}
#main #footer {
text-align: center;
position:relative;
top: -1em;
padding: 0 3% 0 3%;
}
div#logoBottom {
border:0px;
padding:0;
margin:auto;
text-align:center;
}
/* Hack Zone - KILL INTERNET EXPLORER! & Aslett Clearing */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* backslash hack hides from IE mac \*/
* html .clearfix {height: 1%;}
* html #main #body #content {padding-left:10px;width:80%;}
* html #main #body #content div ul {
top: .6em;
}
* html a:hover {text-decoration:underline;}
* html #main #body #lcolumn ul li a {
font-size: .8em;
}
* html hr {
text-align:left;
}
* html div#h1line {
width:98%;
}
.clearfix {display:block;}
/* end backslash hack */
I have two little questions. One, the logo is divided into three parts, and they just don't seem to be lining up correctly. I think they should be right though? Can anyone see why? Second, I found some CSS styling that is supposed to provide a text shadow in any browser. I'm using it because the text for the main links is blending in too much with that background bit. It works in IE6, but it doesn't seem to be working for Firefox, where it's supposed to be using :before I think. I'm unable to test any other browsers except IE7 which I just haven't yet. Here is the attached shadows style sheet code: Code:
/* CSS Document */
/* default setup that everything sees */
.shadow {
/* needed for Internet explorer */
height: 1em;
filter: Shadow(Color=#666666,
Direction=135,
Strength=5);
/* Needed for Gecko */
line-height: 2em;
white-space: nowrap;
}
/*
* used by browsers which know about
* :before to create the shadow
*/
.shadow:before {
display: block;
margin: 0 0 -2.12em 0.15em;
padding: 0;
color: #666666;
}
#shadow_1:before {
content: 'In shadow';
}
#second_2:before {
content: 'Happy Shadowing!';
}
/*\*/
html*.shadow {
[color:red;/* required by Safari
* so that [] is correctly
* begun. associated with
* the property, yet hiding
* it. Seen by IE6 */
/*
* seen by IE6 and Safari, but hidden
* from Gecko
*/
text-shadow: #666666 5px 5px 5px;
]color:auto; /* resets color for IE6 */
}/**/
/*
* end hack using dummy attribute selector
* for IE5 mac
*/
.dummyend[id]{clear: both;}
/*\*/
html*.shadow:before {
[color:red;/* required by Safari.
seen by IE6 */
/*
* seen by IE6 and Safari, but hidden
* from Gecko
*/
display: none;
]color:auto; /* resets color for IE6 */
}/**/
/*
* end hack using dummy attribute selector
* for IE5 mac
*/
.dummyend[id]{clear: both;}
Any assistance is of course greatly appreciated. Thanks! Hi I have 3 background images that make up the background for my navigation you can see here http://dmumford.bizhat.com/test/about.htm When viewed in FF and Netscape it breaks in 3 positions, in IE just below the top image. Does anyone know why, and can they please help me Thanks hey guys i have a question.. i wan't to make a picture gallery for my cus(tattoo) im doing an admin so he can upload his pics. now on the gallery page i will use php to echo the pictures. now when you use an echo usally it showws all the pics on on line.. how can i make it so i can have like 4per line? pic pic pic pic pic pic pic pic I have a number of icons. - back button - print button - next button I want to display them all on the same line. I want the back button to be placed on the far left while the other two on the far right. I have experimented quite abit with trying to get this to work, and have managed to sort of get it right by using left padding. However, I know this is a rubbish way of doing it as depending on the screen size will depend on where the right hand icons appear. I did think I would just use tables, but figured someone here maybe able to help me out. hello, I want the right arrow to be displayed on the same line as the slide show. Any suggestions as to how to do so? below is the CSS and the HTML. Here is the html 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> <script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script> <link type="text/css" href="scrollable.css" rel="stylesheet" /> <script> // execute your scripts when the DOM is ready. this is a good habit $(function() { // initialize scrollable $("div.scrollable").scrollable(); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .leftbutton {width: 30px; float:left; margin-top:30px;} .rightbutton {display:inline;} </style> </head> <body> <!-- "previous page" action --> <a class="prevPage browse left leftbutton"><img src="left.png" /></a> <!-- root element for scrollable --> <div class="scrollable inline"> <!-- root element for the items --> <div class="items"> <!-- 1-5 --> <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /> <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" /> <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /> <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" /> <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" /> <!-- 5-10 --> <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" /> <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" /> <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" /> <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" /> <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" /> <!-- 10-15 --> <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" /> <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" /> <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" /> <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" /> <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" /> </div> </div> <!-- "next page" action --> <a class="nextPage browse right rightbutton"><img src="right.png" /></a> </body> </html>
Here is the CSS: Code: /* root element for the scrollable. when scrolling occurs this element stays still. */ .scrollable { /* required settings */ position:relative; overflow:hidden; width: 680px; height:120px; /* custom decorations */ border:1px solid #ccc; background:url(/img/global/gradient/h300.png) repeat-x;} /* root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accomodate scrollable items. it's enough that you set the width and height for the root element and not for this element. */ .scrollable .items { /* this cannot be too large */ width:20000em; position:absolute; clear:both; } /* single scrollable item */ .scrollable img { float:left; margin:20px 5px 20px 21px; background-color:#fff; padding:2px; border:1px solid #ccc; cursor:pointer; width:100px; height:75px; -moz-border-radius:4px; -webkit-border-radius:4px; } /* active item */ .scrollable .active { border:2px solid #000; z-index:9999; position:relative; }
Hoping someone can help me out as I'm still pretty new to the whole web design thing. I'm using CSS to create a container wrapper. As you can see from the code I have a bottom, top and center image. When I was using JPEG images everything lined up correctly, however I needed to switch to PNG image files (to take advantage of transparency) and now the top and bottom sections of the wrapper are offset. Here is a live link: storrepictures.weebly.com/projects.html -Please find an image of the resulting problem he http://i.imgur.com/YnTS8.png -This is how it looks when I use JPEGs instead of PNGs: http://i.imgur.com/2WMFN.png Here is my CSS wrapper code: Code: #wrapper {
background: url(containerbg.png) center repeat-y;
}
#wrappertop{
background: url(containertop.png) top center no-repeat;
}
#wrappertbtm{
background: url(containerbtm.png) bottom center no-repeat;
padding-bottom: 65px;
}
And here is the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<style>
#content
{
height:400px !important;
}
</style>
<![endif]-->
</head>
<body class="wsite-theme-light">
<div id="wrappertop">
<div id="wrapper">
<div id="header">
<div id="headerleft">{logo max-height="60"}</div>
<div id="navigation">{menu}</div>
</div>
<div id="content">{content}
<div id="footer">{footer}
<div id="wrappertbtm">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hello, I'm looking for some help with this problem and would really appreciate some guidance. I'm teaching myself layout with CSS (just picked up the dummies book, so you can guess my current level) but am currently stumped. I'm looking to have a header, with a central image and two link images positioned either side. The central image would be exactly centred, with the link images aligning to the sides of the central image: [PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]. As the link images are different widths, I'm unable to simply centre everything in one go, as then the central image is not viewed as exact centre. I need a way to centre the image and then float the link images to the relevant sides but have it so they align either left or right against the centred image. Also, the centre image height is greater than the link images, so as well as aligning either left or right I'm trying to get them to align to the middle, like this: Code: [ ]
----------------[PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]-----------------
[ ]
---- variable empty space depending on browser width
I currently have a div to centre using left-margin: auto; right-margin: auto; text-align: center; and have another div inside this with the centred image. I've also created a left div and right div to contain the link images on either side using the float tag: left/right and aligned left or right, but I don't know where to go from there. I know it's probably simple but I can't seem to find the answer. Any help would be great. Code: #header {
margin-left: auto;
margin-right: auto;
text-align: center;
}
#title {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 400px;
}
#imgleft {
float: left;
text-align: right;
width: 30%
}
#imgright {
float:right;
text-align: left;
width: 30%
}
<div id="header">
<div id="imgleft">
<a href="portfolio.html"><img src="l_portfolio.gif" alt="Portfolio"></a>
<img src="l_about.gif" alt="About">
</div>
<div id="imgright">
<img src="l_blog.gif" alt="Blog">
<img src="l_contact.gif" alt="Contact">
</div>
<div id="title">
<img src="title.gif" height="84" width="400" alt="Title">
</div>
</div>
Hi All! I am hoping that someone might be able to help me out here. I am working on a page layout that consists of a header/logo then beneath that is five link nav bar and then below the content area. The header and content are fine and look great - but the nav bar seems to stepping over to the left a touch (PC IE in particular) and so is messing up the layout! I am finishing the job off for someone and there is a lot of bits and bobs that don't need to be in there - but when I take stuff out it messes up other parts of the layout! this is the layout and this is the css How can I stop the nav from moving and just make go full width (729px)????? Please save my sanity!!!! D I'm very new to CSS, and I'm learning to use div tags for my layout. My navbar is a div within my header div, and it's not lining up the way I'd like. Here's a link for an example: www . cooperworkskilns . com The Home button should be at the bottom left of the header. Here's the pertinent css: #header{ margin:0px 0px 10px 0px; padding:0px; width: 700px; height: 125px; border-bottom: 1px solid #666; background-image:url(../img/header.gif); } #navbar{ margin:0px 0px 0px 0px; padding:0px; width: 700px; } I have 2 buttons that are not lining up in IE7. I have it working Safari and Firefox on the MAC, but my PC IE browser won't align the buttons. I have tried everything, but no luck. Here's the site: http://www.caillouette.com/Utilitrek/four/ Here's the CSS for the button elements: Code: #bottombox{
clear:both;
float:left;
display:inline;
width:710px;
height:61px;
margin:0px 0px 0px 0px;
}
.collectionBig
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;
display: inline;
width: 271px;
height: 61px;
margin: 0 0 0 0px;
padding: 0;
}
.collectionBig a
{
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;
display: inline;
color: #000000;
font-size: 11px;
width: 271px;
height: 61px;
float: left;
color: black;
text-decoration: none;
}
.collectionBig img
{
width: 271px;
height: 61px;
border: 0;
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;
}
* html a:hover
{
visibility:visible;
}
a:hover img
{
visibility:hidden;
}
.memberBig
{
float:right;
position: absolute;
top:0;
margin-right:5px;
font-family: arial, helvetica, sans-serif;
background: url(images/nav/bigBN/membershipBig_on.gif) no-repeat;
/* white-space: wrap; */
display: inline;
width: 414px;
height: 61px;
padding: 0 0 0 0;
}
.memberBig a
{
display:inline;
color: #000000;
font-size: 11px;
width: 414px;
height: 61px;
float: right;
color: black;
text-decoration: none;
}
.memberBig img
{
width: 414px;
height: 61px;
border: 0;
}
"collectionBig" and "memberBig" are wrapped inside of the "bottombox" div any help is appreciated. -S Hi guys, I'm having trouble with the css on the website I'm building. I have a background image and am trying to arrange the navigation link on the left hand side of the page. The trouble is that I can line up images with the background on IE and Firefox but chrome is proving troublesome. I can't figure out why it works fine in Firefox but not in chrome. Can anyone shed some light or offer me an alternative to get the same effect. jamesdrinkwater.co.uk Thanks in advance everyone James Big surprise, issue with IE. I have a layout I'm working on that is tableless. In FF the layout appears as it should, but in IE I'm getting a little bit of a gap between my header image and my nav images. The background (where the date is showing) is also appearing a little bit lower than the rest div contents. The site is Shallow Drop The CSS is: Code:
html, body {
background: url(../images/back.gif) #4a4949;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #d6d5d5;
height: 100%;
text-align: center;
}
a {
color: #d6d5d5;
font-weight: bold;
}
a:hover {
color: #faec0a;
}
#container {
width: 816px;
margin: 0 auto;
text-align: left;
background: url(../images/fill2.gif) repeat-y center;
}
#header {
width: 816px;
height: 118px;
}
#nav {
width: 816px;
height: 29px;
padding: 0px;
margin: 0px;
text-align: left;
vertical-align: top;
background: url(../images/date.gif) no-repeat right;
}
#nav-list {
float: left;
width: 80%;
height: 29px;
}
#nav a {
cursor:crosshair;
}
#date {
float: right;
vertical-align: bottom;
text-align: left;
width: 20%;
height: 29px;
padding-top: 7px;
}
#bod {
width: 780px;
height: auto;
margin: 0 auto;
padding: 5px;
}
HTML Code:
<div id="container">
<div id="header">
<img
src="<?php echo"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/images/header.gif";?>"
alt="Shallow Drop" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="33,9,165,117" href="index.php" alt="Home" /></map>
</div>
<div id="nav">
<span id="nav-list">
<img src="<?php echo"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/images/left_sun.gif";?>"
alt="Shallow Drop Madison, WI"
/>
...some more images...
</span>
<span id="date"><?php echo (strftime (_DATE_FORMAT_LC)); ?></span>
</div>
<div id="bod"><?php mosMainBody(); ?></div>
I've got a page whose layout I'm defining with divs and spans and css, and it *seems* at first glance that the divs in 2 separate columns are lining themselves up when they shouldn't be. The code: Basic layout defined by Code: <div class="menucolumn"> <!-- some content in my left hand column --> </div> <div class="maincolumn"> <!-- some content in my right hand column --> </div> Corresponding CSS: Code:
div.menucolumn{
float: left;
width: 200px;
margin-top: 20px;
}
div.maincolumn{
margin-left: 205px;
padding-left: 5px;
border-left: 1px solid #222222;
}
Form Fields: Code: <span class=\"formlabel\">Use MySQL (yes or no):</span> <input type=\"text\" name=\"usemysql\" class=\"formfield\"> CSS: Code: .formlabel, .formfield{
color: #222222;
text-decoration: none;
font-color: #222222;
font-family: Arial;
font-size: 12px;
font-style: normal;
font-weight: normal;
display: block;
width: 300px;
float: left;
margin-top: 5px;
}
.formlabel{
text-align: left;
width: 300px;
}
Inside the left column (menucolumn class) there are about 10 small divs which contain a link each with short text. In the right column there are 6 very large divs used to define peices of a large configuration form. As you can see by the screenshot, the first right hand div (the "Program Configuration" label in the screenshot below) and the span immediatly below it (the first field in the form) seem to be lining up with the div that contains the links on the left. How can I get the rest of the form fields to fill up that space? currently i am trying to get my navigation to line up in IE, works great in FF... currently i have something that kinda works... Code: * html #navigation {
margin-top:-24px;
}
but it has fatal flaws.. is there any setting i can flick on to get IE to look like FF... here is the link.. Navigation Menu Issues in IE also, for some reason there is a wider gap on the right of the login boxes then in FF... i could define a * html code for it, but would rather not. Hi there, I have a drop down menu which I want to display next to another link to the right of the page (so there is a link to the far right and then the drop down to the left of the right link), however the drop down link is appearing under the far right link in FF, instead of beside it like it is in IE. Any ideas what I have wrong? This is my CSS: PHP Code: #tools{ text-align:right; padding-right: 20px; } #add_business{ background-image: url('images/add_business.png'); height: 21px; width: 156px; float:right; text-align:center; padding-top: 4px; } #add_business a:link{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-decoration:underline; } #add_business a:hover{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-decoration:none; } #com_tools{ text-align: right; margin-right: 200px; margin-top: 0px; float:right; } #menu ul .item{ display:none; list-style:none; list-style-image:none; } #menu ul:hover .item{ display:block; list-style:none; list-style-image:none; } #menu{position:absolute; list-style:none; list-style-image:none; } and this is my HTML: PHP Code: <div id="tools"> <div id="com_tools"> <div id="menu"> <ul id="item1"> <li class="top">Community Tools</a> <img src="templates/images/arrow_down.gif" /></li> <li class="item"><a href="#">menu item 1</a></li> <li class="item"><a href="#">menu item 2</a></li> <li class="item"><a href="#">menu item 3</a></li> </ul> </div> </div> <div id="add_business"><a href="#">Add Your Business!</a></div> </div> Hello, I am sure that the solution to my problem is obvious in many ways. I thought maybe a fresh set of eyes would help. I have a two column site, the columns are constructed side by side using the css float parameter. I have a wrapper around all of it to center it, and divs for every element. One of the last divs (containing an h2, but I'd rather use images)will not drop down and line up with other h2. They are both inside divs. I followed several instructions on several websites, listed below, but I cannot get this div to sit right, meaning be under my images (using lightbox 2) and act as a delimiter for the next set of images Web Site: (sample dot funky-penguin dot com) CSS help garnered he (alistapart dot com/stories/practicalcss) My xhtml and css 2.0 all validate, so I don't think that is the problem. I hope I was specific enough. Thank you in advance for all of your assistance. |
|||||||