|
CSS - Menu Images Aren't Seamless - Wrap
I am having issues with a horizontal menu bar. The menu is supposed to be created with 4 images seamlessly aligned, but I find that there is a 3px space between each when I load the page. This causes the width of the 4 images to exceed the specified width specified for that id and a wraparound occurs.
Page: www .sjbcathedral. org/php/sample.php CSS: Code: body {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:url(../images/redbkgnd.jpg);
overflow:auto;
text-align:center;
}
img {border:0px; margin:0px; padding:0px;}
#container {
margin-left:auto;
margin-right:auto;
height:auto;
text-align:left;
width:995px;
background:url(borderShadow2.png);
#menuBar {
width:905px
height:35px
}
menuBar PHP: PHP Code: <div id="menuBar"> <img src="menu1_MassTimes.jpg" ></img> <img src="menu2_OurSchool.jpg" ></img> <img src="menu3_OurClergy.jpg" ></img> <img src="menu4_ContactUs.jpg" ></img> </div> I'm new around here and to webdesign in general... Thanks for the help! Best, Andrew Similar TutorialsHere'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! i am making a web page using CSS. At the bottom of the page I have a box from left to right with thumbnails in it. I do not want these thumbnails to wrap. I tried whitespace:nowrap, but this makes the page really wide. The box the images are in has AUTO for the width. So if I re-size the window the width of the box re-sizes. I am displaying a list of users on my site. Each user has a picture with some text below. I want to display this image+text block" and I want it to wrap like text. I made inline div and tables with these elements but it seems to wrap arbitrarily around the page. any suggestions? I have a full page menu which resizes. eg item1 | item2 | item3 | item4 | item5 | item6 Which resizes depening on the window size. However if you shrink the window X ways, it does the following item1 | item2 | item3 | item4 | item5 | item6 how can I stop it wrapping the items to new lines heres my code. Code:
#menu2 {
display : inline;
white-space : nowrap;
width: 100%;
margin: 1em 0;
padding: 0px 0.5em;
background: #eee none;
}
#menu2 ul {
display : inline;
white-space : nowrap;
margin: 0;
padding: 0;
list-style-type: none;
}
#menu2 li {
display : inline;
white-space : nowrap;
margin: 0;
padding: 0;
float: left;
}
#menu2 li {
white-space : nowrap;
display : inline;
width: 24%;
text-align: center;
}
#menu2 a {
float:left;
display:block;
margin: 2px 0 0;
text-decoration: none;
padding-right: 0.4em;
padding-left: 0.65em;
}
and Code: <div id="menu2">
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
</ul>
</div>
I am developing a simple band webpage for my band. When you navigate between sections, the top header and menu either shift up/down or left/right depending on which section you go to and which browser you use. It is extremely annoying. I have tried 3 different forums and I'm getting no help. And this one wont let me post links (bleh). I did notice that in Dreamweaver, in some sections the header touches the top of the page and it others, it looks like it is down a bit. I have tried everything I can to get all the sections to look the same but I can't figure out why the header is in different places in different sections. I made all the sections at the same time. This is so frustrating! PM me or AIM me at blacklefthands. Please help.. someone. PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } example page: here css The links in the footer aren't available in FF (IE is OK)... I thought it had something to do with not clearing the floats, so I added that, now the red boarder(that I was using to try and get a visualization) goes around the whole content div, but the links still are clickable... I read about this somewhere, but I couldn't decipher the fix, and I can't find the page again... How do I fix this? Thanks Bryan This may be a pretty vague question, so I'm sorry in advanced. But I'm working on one of those recipe websites that you get as an assignment during school. Everything seems to be working, like adding comments, writing up recipes, etc. But for some reason, I'm having a huge issue with apostrophes. Whenever I want to add a comment to a recipe that involves an apostrophe in any way, it says "Sorry, there was a problem with your comment." I mostly want to know why this happens on websites instead of getting the direct "this-is-how-you-fix-it" answer, because i've seen this happen on other websites. Hello all. I have the following code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#base {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
background: #c0c0c0; } /* end #base */
#main_block {
margin: auto;
text-align: left;
width: 955px; } /* end #main_block */
#main_content, #main_content_2c, #main_content_3c {
background: #ffffff;
border-left: 1px solid #575757;
border-right: 1px solid #575757; }
#top_main_content { padding-top: 1em; }
#top_main_content ul {
float: left;
padding: 0;
margin: 0;
list-style-type: none;
border-top: 1px solid #f1f1f1; } /* end #top_main_content ul */
#top_main_content ul li {
text-align: right;
border-bottom: 1px solid #f1f1f1; } /* end #top_main_content ul li */
#top_main_content ul li a {
line-height: 26px;
display: block;
color: #686868;
width: 266px; } /* end #top_main_content ul li a */
.indent { margin-right: 1.5em; }
#top_main_content #rotating {
z-index: 0;
float: right;
width: 687px;
height: 242px;
border-bottom: 1px solid #f1f1f1;
border-top: 1px solid #f1f1f1; } /* end #top_main_content img */
#top_main_content #rotating p, #top_main_content #rotating h1 { margin: 2em 0 0 2em; }
#sidemenu12,
#sidemenu11,
#sidemenu13,
#sidemenu14,
#sidemenu15,
#sidemenu16,
#sidemenu17,
#sidemenu18,
#sidemenu22 {
width: 687px;
height: 242px;
font-weight: bold;
overflow: hidden;
position: absolute;
visibility: visible; }
</style>
</head>
<body>
<div id="base">
<div id="main_block">
<div id="main_content">
<div id="top_main_content">
<ul>
<li><a id="sidemenu11_link" href="#"><span class="indent">Link 1</span></a></li>
<li><a id="sidemenu22_link" href="#"><span class="indent">Link 2</span></a></li>
<li><a id="sidemenu12_link" href="#"><span class="indent">Link 3</span></a></li>
<li><a id="sidemenu13_link" href="#"><span class="indent">Link 4</span></a></li>
<li><a id="sidemenu14_link" href="#"><span class="indent">Link 5</span></a></li>
<li><a id="sidemenu15_link" href="#"><span class="indent">Link 6</span></a></li>
<li><a id="sidemenu16_link" href="#"><span class="indent">Link 7</span></a></li>
<li><a id="sidemenu18_link" href="#"><span class="indent">Link 8</span></a></li>
<li><a id="sidemenu17_link" href="#"><span class="indent">Link 9</span></a></li>
</ul>
<div id="rotating">
<div id="default_div"><p>Default</p></div>
<div id="sidemenu11"><p>Section 1</p></div>
<div id="sidemenu12"><p>Section 2</p></div>
<div id="sidemenu13"><p>Section 3</p></div>
<div id="sidemenu14"><p>Section 4</p></div>
<div id="sidemenu15"><p>Section 5</p></div>
<div id="sidemenu16"><p>Section 6</p></div>
<div id="sidemenu17">
<p>Section 7 - A<br />
<a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
<p>Section 7 - B<br />
<a href="#">Link 1</a><br />
<a href="#">Link 2</a><br />
<a href="#">Link 3</a></p>
</div>
<div id="sidemenu18"><p>Section 8</p></div>
<div id="sidemenu22"><p>Section 9</p></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Which if you look at it in a browser looks rather messy but I have javascript that hides and shows things. But my question is why aren't the links clickable in Firefox. They are in IE7, IE6, and Opera but not Firefox or Safari. I know that if I remove position: absolute from the last set of styles that it will work but then everything isn't stacked on top of each other. Hi! I'm trying to implement an image drop-down menu. Everything seems to be working but there is an element that is pushing my second image button down and I can't seems to figure where it's coming from. It seems to be my link that is causing it but i'm stumpped. I've set up a test page so you can see what is happening. the site is at test .sylvaindelisle .com Thanks for taking the time to take a look. Hi there, Can someone help me make a menu Im working on. The menu is make up of a few cells in a table, each cell has a Background image and an image which I would like to haved change when the mouse is over that cell in the table. How is this done? Owen, Can somebody tell me if this is possible? I have a horizontal menu and I'm using images. I'm using javascript for the drop down menu etc. The menu is an include so it looks the same on all the pages. What I want to do is when I'm on say "Contact" the rollover color (this is an image) displays the "Contact" hover image, and the same with the other pages. So what needs to happen is CSS needs to override the button with the hover image. Is it possible to put css in every page that tells it to display the needed hover image when on that page? Hi, I'm trying to set up my (very basic, horizontal, no dropdown) CSS menu so that when a user hovers over the menu link items, the formatting changes and they basically get an image on mouseover (nothing more than changing the text colour and adding a curve on the left hand side, so it just looks like a selected tab). It kind of works but instead of the whole image showing it only shows in the area where the menu link text is, so instead of covering the height of the menu bar and a length I specify, it's just covering the actual word e.g "Home" in each case on the menu. I can't seem to get it so that on rollover the whole image shows. I've tried setting it so that the links have a background image (just a plain block from the nav bar) but that doesn't work. My CSS is: /* this is the bar where the menu is located */ .menuholder { width:1001px; height:2.19em; background-color:#0f2763; } /*holder for the menu */ div.navigation { margin-left:30px; padding-top:10px; } .navigation ul { list-style-type: none; position: relative; float: left; } .navigation ul li { display: block; padding: 0px 20px 0px 10px; display: inline; height:2.19em; } .navigation ul li a { font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:14px; font-weight:bold; line-height:18px; width:100px; height:2.19em; text-decoration:none; } .navigation ul li a:hover { color:#0f2763; background-image:url(/images/menutab.gif); width:100px; height:2.19em; } I've tried setting display:block; and float:left; on the .navigation ul li, but this makes the menu become vertical and throws the whole page out of sync. I tried this altrnative code, to no avail: .menuholder { width:1001px; height:2.19em; background-color:#0f2763; } div.navigation { margin-left:30px; padding-top:10px; height:2.19em; } .navigation ul { list-style-type: none; position: relative; float: left; } .navigation ul li { padding: 0px 20px 0px 10px; display: block; float:left; height:2.19em; } .navigation ul li:hover { color:#0f2763; background-image:url(/images/menutab.gif); width:100px; height:2.19em; background-repeat:no-repeat; } .navigation ul li a { font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:14px; font-weight:bold; line-height:18px; width:100px; height:2.19em; text-decoration:none; display: inline; } Any ideas or pointers gratefully received! Hello I'm a photographer trying to code my site myself, I'm a control freak and trying to learn css but coding is not my thing. I have two different rollover effects on my page but only one part is working. The links on the right of photo function correctly when I hover over them, but the links on top don't change as they should. a link to my css file Can anyone help me on this? I believe i have the order correct (a:hover follows link and visited) but i'm sure it's an easy fix. Sadly, not for me. Thanks for any help here is my site: chrisziebarth dot com/test My css file is located in /style.css I had my css working fine and then I decided to change the layout and I almost have the new style sheet finished. However, I am trying to divide my header field into 2 columns (each 50% of the width), the left most column will have my banner and the right most column will be split in half (each half being 50% of total height), with 2 rows, one for a search field and the other for my main site navigation. However, the 2 rows are not taking up the 50% of the height that I would like for them to take up. Any ideas as to why? I tried defining min and max height, but that didn't work... Here's my css: Code:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}
h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
width: 1024px;
min-height: 748px;
margin: 0 auto;
background: #ffffff;
overflow: hidden; /* contain inner floats */
position: relative; /* establish the containing block */
}
#accounttypeselector { /* select personal or business to affect page display */
height: 25px;
background: #0000FF;
}
#servicesbar { /* container for user services */
height: 30px; /* 30px should be adequate height */
width: 100%;
}
#servicesbar-services { /* container for user services once logged in */
float: left; /* push this to left side */
width: 75%; /* want it to be 75% of the servicesbar width */
height: 100%; /* since servicesbar container height is 30px should be 100% of this */
background: #ff00ff;
}
#servicesbar-login { /* for user login and logout - contained inside servicesbar */
float: left; /* should push this just beside services */
width: 25%;
height: 100%; /* since servicesbar container height is 30px should be 100% of this */
background: #8B2323;
}
#header { /*header for the site - will contain logo, search, and main navigation */
float: left;
width: 1024px;
height: 100px;
}
#header-logo { /* will include site banner/logo - will be located on left side */
background: #ff0000;
width: 50%;
float: left;
}
#header-rightcol { /* column for search and main nav */
width: 50%;
float: left;
}
#header-rightcol-search {
min-height: 50%;
max-height: 50%;
background: #7FFFD4;
}
#header-rightcol-navmain { /* navbar that will be located below header */
min-height: 50%;
max-height:-50%;
background: #21ee00;
}
#bodywrapper { /* wrapper for main content - will have 3 columns here */
width: 1024px;
height: 100%;
padding-top: 10;
}
#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
width: 15%;
background: #8B8378;
float: left;
}
#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
width: 60%;
background: #66CDAA;
float: left;
}
#bodywrapper-news { /* news column to be located in right column of bodywrapper */
width: 25%;
background: #8A2BE2;
float: left;
}
#footer { /* footer to be located at bottom of wrapper */
margin: 0 auto;
position: relative;
width: 1014px; /* will be 1024 with padding */
height: 20px;
padding-right: 10px;
}
and here's my basic html Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test2.css" /> </head> <body> <div id= "wrapper" > <div id= "accounttypeselector" > Lorem ipsum dolor sit amet </div> <div id= "servicesbar" > <div id= "servicesbar-services" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> <div id= "servicesbar-login" > Lorem ipsum dolor sit amet</div> </div> <div id= "header" > <div id= "header-logo" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</div> <div id= "header-rightcol" > <div id= "header-rightcol-search" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> <div id= "header-rightcol-navmain" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> </div> </div> <div id= "bodywrapper" > <div id= "bodywrapper-navleft" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> <div id= "bodywrapper-main" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> <div id= "bodywrapper-news" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> </div> </div> <div id= "footer" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> </body> </html> Thanks in advance and any suggestions would be greatly appreciated. The problem is that I have a wrapper div that will contain two "boxes", one that has a white background one that has a black background. I want the white background box to be to the left of the black background box, but inside the wrapper div which has a red background. It works just fine in IE (which surprised me) but Firefox is doing something really strange. The black background box starts all the way to the left of the wrapper with the white background box on top of it. Not only that, but the text for the black background box starts below the white background box. I'm new to inserting code, but I'll give it a try: 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>
<title>linking to style sheets 2</title>
<style type="text/css">
body {
background-color: #ccccff;
}
h1 {
font: bold 20px arial, tahoma, verdana;
color: #6633ff;
border-bottom: 1px solid #444444;
margin: 25px 0;
padding: 5px;
}
p {
font: 15px verdana;
line-height: 1.5em;
color: #000077;
margin: 0;
padding: 0;
}
.leftbox {
width: 300px;
background-color: #ffffff;
padding: 10px;
margin: 10px 10px;
float: left;
}
.rightbox {
width: 300px;
padding: 10px;
margin: 10px 10px;
background-color: #000000;
}
.wrapper {
width: 800px;
background-color: #ff0000;
}
.end {
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="leftbox">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras pede sem, lobortis tempus, sodales sed, vehicula vitae,
lorem. Fusce nec massa id erat lobortis semper. Vestibulum
dignissim orci et orci. Fusce quis tortor eu sapien gravida
pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque
suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque
augue. </p>
</div>
<div class="rightbox">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras pede sem, lobortis tempus, sodales sed, vehicula vitae,
lorem. Fusce nec massa id erat lobortis semper. Vestibulum
dignissim orci et orci. Fusce quis tortor eu sapien gravida
pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque
suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque
augue. </p>
</div>
<div class="end"></div>
</div>
</body>
</html>
You'll see that I've floated the white background div, but again, this is making that div sit on top of the black background div. Can anybody help? P.S. I know this isn't really pleasing to the eye, but it's just for demonstration purposes I have a fairly simple page that is composes of a header and two cols. The left hand col is the menu which I would like to use with background images but these seem not to work. Any advice is appreciated. [Code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> <head> <!--Don't add anything above this line, you may change the DTD to match your page--> <title>Test Page</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <!--Uncomment the following line and remove the embedded style sheet if your style is external--> <style type="text/css"> body { min-width: 760px; margin: 0; padding: 0; text-align: center; } #wrapper { width: 720px; margin:0 auto; text-align: left; background-color: #CDCDCD; } #branding { width:720px; height:120px; } #content { width: 520px; float: right; } #mainNav { width: 180px; float: left; } ul { list-style: none; margin: 0; padding: 0; } /* =-=-=-=-=-=-=-[Menu Eight]-=-=-=-=-=-=-=- */ #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #000000; font-weight: bold; display: block; background: url(images/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover { color: #257EB7; background: url(images/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(images/menu8.gif) 0 -64px; padding: 8px 0 0 25px; } #footer { clear: both; width: 720px; background-color: #CDCDCD; border: 2px solid; } body{ background-color:#ffffff; } </style> </head> <body> <div id="wrapper"> <div id="branding"> <img border="0" src="images/Top Bar.gif" width="720" height="120" alt="Hawkesley Publishing Solutions"/> </div><!--End Branding--> <div id="content"> <p>Spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam.</p> <p>Spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam.</p> <p>Spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam.</p> <p>Spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam.</p> </div><!-- End of Content --> <div id="mainNav"> <div id="menu8"> <ul> <li><a href="home.php" title="Home"><b>Home</b></a></li> <li><a href="e-books.php" title="E-Books"><b>E-Books</b></a></li> <li><a href="e-learninig.php" title="E-Learing"><b>E-Learning</b></a></li> <li><a href="hoe.php" title="How To Books"><b>How To Books</b></a></li> <li><a href="about.php" title="About Us"><b>About Us</b></a></li> </ul> </div><!-- End menu8--> </div><!-- End of mainNav --> <div id="footer"> <p>spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam.</p> </div><!-- End Footer--> </div><!--End Wrapper--> </body> </html> [Code] Hello, I've always made my menu buttons with the text built into the image but is there a better way to do it? Thanks for the help. If you take at the link below I'm having trouble with the top menu. http://departments.brooklands.ac.uk/ifp/test/ I'm trying to use background images as buttons with normal xhtml text links. But I can't seem to get the text in the middle of the buttons. I think I may be going about this in the wrong way, so if anyone could take a look that would be great. Thanks Jemes Code:
#topbar{
padding-top:18px;
border: 0px solid #000000;
background-image:url(../images/top.gif);
background-repeat:no-repeat;
height:120px;
margin-left:16px;
}
#topmenu{
margin:32px 0px 0px 30px;
font-size: 10pt;
font-weight:bold;
height:30px;
}
#topmenu ul{
margin:0px;
padding:0px;
list-style-type: none;
}
#topmenu ul li{
padding-right:4px;
}
.home{
float:left;
display:inline;
background-image: url(../images/home.gif);
background-repeat: no-repeat;
height:33px;
width:45px;
}
.active{
float:left;
display:inline;
background-image: url(../images/top_active.gif);
background-repeat: no-repeat;
height:33px;
width:106px;
}
.norm{
float:left;
display:inline;
background-image: url(../images/top_norm.gif);
background-repeat: no-repeat;
height:33px;
width:106px;
}
#topmenu li a{
text-decoration: none;
color: #AC5BA0;
padding-right: 0.7em;
height:30px;
}
|
|||||||