|
CSS - Completely Stuck W/ Css
I'm completely stuck with my current web design. Pretty sure I'm not doing this the most efficient way, so any suggestions are helpful.
My intention is to have the following: 1) an overall pg wrapper that sets width and centering 2) header 3) nav/links area 4) main content 5) footer My probs are all over the place. First, I have wrapper divs that aren't showing up. The content that is supposed to be inside these divs doesn't appear to be in them, so I guess the divs are empty. But I have no idea why this is happening. There is supposed to be a blue bg behind my links section. It's not showing up in IE6. The #main div --which should be a wrapper that contains all the thumbnails of the page -- is empty and showing up mid-way down the page behind all the thumbnails in IE6. If someone can start with these issues and help me, I would be forever grateful! XHTML is attached in a txt file and CSS is posted below. (I added the obnoxious bg colors & borders to divs intentionally to see where things are showing up.) Code: * {margin:0;padding:0}
#wrapper {
border: #f09 dashed 3px;
background-color: yellow;
text-align: left;
margin: 50px auto;
padding: 0;
width: 810px;
}
#header {
border: blue dashed 1px;
background-color: pink;
padding: 0px;
margin: 5px;
}
#header p {
display: inline;
}
#intro {
border: 1px solid black;
background-color: purple;
}
#intro p{
font: bold 80% arial;
position: absolute;
left: auto;
top: 85px;
color: #fff;
padding: 15px 0 0 435px;
margin: 0 0 25px 0;
width: 350px;
line-height: 1.4em;
border: 1px red solid;
}
#nav {
background-color: #09f;
border: solid red 1px;
min-height: 30px;
}
ul {
float: right;
list-style-type: none;
margin: 10px 0;
}
li {
font: bold 12px arial;
display: inline;
padding: 0 17px 0 17px;
border-right: 1px solid white;
}
span {
position:absolute;
top: -100000px;
}
#main {
border: thin green solid;
padding: 25px 25px 0 25px;
background-color: #eee;
min-height: 1000px;
}
div.work {
float: left;
padding: 10px;
/*border: thin red solid;*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background-color: white;
margin: 0 0 25px 0;
}
div.work img {
display: inline;
border: 4px black solid;
float: left;
}
div.work p {
margin: 0;
padding: 10px 0 0 25px;
line-height: 1.3em;
font: 100% arial;
float: left;
border: thin purple solid;
width: 400px;
}
div.work h1 {
margin: 25px 0 0 0;
padding: 10px 0 0 25px;
display: inline;
font: 125% arial;
color: #ff8529;
width: 400px;
float: left;
border: thin green solid;
}
div.work h2 {
display: inline;
margin: 0;
padding: 10px 0 0 25px;
font: 85% arial;
width: 400px;
float: left;
border: thin black solid;
}
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "removed link">
<html xmlns="removed link" xml:lang="en" lang="en">
<head>
<title>Page Title here</title>
<link rel="stylesheet" type="text/css" href="divtest.css" media="screen"/>
</head>
<body>
<!--begin overall page wrapper; sets width and centering-->
<div id="wrapper">
<!--begin header-->
<div id="header">
<p><img src="assets/logoHolder.jpg" alt="Logo alt text here" /><span>Logo description here</span></p>
<div id="intro">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei
usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</p>
</div>
</div>
<!--end header-->
<!--begin nav-->
<div id="nav"><ul><li><a href="#">Link 1 goes here</a></li><li><a href="#">Link 2 goes here</a></li></ul></div>
<!--end nav-->
<!--begin main content area-->
<div id="main">
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
</div>
<!--end of main container-->
</div>
</body>
</html>
Similar TutorialsPlease look at this page in Firefox: http://www.pacunionsonoma.com/real-estate-listings.asp?city=Santa-Rosa Notice the links up to the top area that read Showing Appointment, Listing Images, etc. No matter what I do I can't get them to appear within the respective property listing div. It must be some inheritance issue but I just can't figure it out. Thanks. http://energetic.bluekazoo.eu/ Hi all. Hope someone can help. The above site has a strange quirk with there being a 20px gap to the right of the image which try as I might, I cannot seem to resolve. Been looking at it so long now that I reckon I can't see the wood for the trees. All help would be gratefully appreciated. Mark. Well I trying to build a navbar and I want it to be completely in CSS so I can have it in my styling sheet and only have to edit it once when I add a new page to the navbar. I have it figured out so the formatting for it is in the CSS but the actual items and links to pages are in the HTML, and I want the format and items in the CSS. Here's my CSS for the navbar formatting: Code:
#navbar ul {
margin: 10px auto auto auto;
padding: 6px;
list-style-type: none;
text-align: left;
background-color: #000;
font-family: arial;
}
#navbar ul li {
display: inline;
font-family: arial;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #ffffff;
background-color: #000000;
font-family: arial;
}
#navbar ul li a:hover {
color: #000000;
background-color: #ffffff;
font-family: arial;
}
And here's the code I have in the body of my HTML that adds each of the items to the navbar: Code: <div id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="irc.html">IRC</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> Anyone have any ideas on how I would do this? Thanks. I've been doing a bit of professional work for just a little while now (about a month and a half) as a summer job, but I'm just completely lost at this point and I have a clue as to how to handle this problem. Programming and styling works fine on my main computer (which has no special mods as far as I know) as well as one of my laptops (well family laptop) However, on my father's work laptop, Both macs as well as the computers for both my clients, the CSS stylesheets aren't working properly at all, almost as if certain commands from the stylesheet are ignored. On my dad's work laptop, one of my DIV tabs (the menu bar) width properties (15%) is almost completely ignored. The width of the DIV is actually extended to the point where it's pushed underneath the main content page. Changing the width value to 0 actually does nothing. I'm at a loss. On both my clients computers the main body DIV min-height value doesn't load properly, creating a small space of colour at the top of the page, while the rest of the actual content is properly placed below it. This div holds the background and "boundaries" for the nav bad and the main content. Both of which are not present. Both my father's work laptop and my clients computers use the latest version of IE.and I get these strange errors. I also get the second error when using Safari on both macs. God I love Firefox... it loads everything properly.... Either way, I'm confused as confused can be. HELP!!!! http://loganagency.com/temp/index.php Please click there and view in IE and then in Firefox. The div is completely shifted upward and the baber overlaps the text in FF but looks fine in IE. What is wrong and how can I avoid this in the future? While we are on the subject, what gives with IE vs FF web design? Everyone posts errors here. Is there a tutorial or post that describes the reasons they process code so differently and ways to prevent it? You would need to look in Internet Explorer (probably on windows) for the bug to show up. I've posted in css, because I assume it's something to do with css, but I guess it could be something else. The stylesheet for the page can be found here... http://estore.e-av.co.uk/stylesheet.css I realise there are various other errors on these pages still, but hey, it's a work in progress. It's really weird, if you click around through the pages, about 50% of the time, a white block seems to get drawn over the left and right hand menus (actually, I'm assuming it's over everything, but behind the main content). It follows no pattern, and if you move your cursor over it, it will redraw. It's so weird, and if it was any other browser, I would ignore it - but it's i.e. on windows, the most heavily used browser out there, so I've got to fix it somehow. Has anyone come across this before and managed to fix it?? Anyone got any ideas at all?? Any advice at all would be very much appreciated. Thanks in advance... I've done these types of thing before myself, and the pages actually loaded faster, it was easier to edit and find things I wanted. This layout is completely table based, too much positioning for me to do. I would like the layout to preserve it's flexiblity yet still look quite the same. I need a great CSS Guru to completely CSSfy my site. This includes positioning, changing images to texts and small taggies and stuff. Since it's only one page and it'll take half hour at the most, I will pay $7 whoever asks me first. Nadalitian@VFEmail.net April 18th, 2004 Hi all, I use an background image for a menu. Code:
#menu a, #menu a:hover {
height: 20px;
width: 150px;
text-decoration: none;
padding-left: 40px;
padding-top: 3px;
padding-right: 3px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-bottom: 10px;
background-position: 0px;
vertical-align: middle;
}
#menu a {
color: #9E007F;
background-image: url(../imgs/nav/subNav/subNav_bg.gif);
background-repeat: no-repeat;
}
#menu a:hover {
color: #FFF;
background-image: url(../imgs/nav/subNav/subNav_bg_over.gif);
background-repeat: no-repeat;
}
It works fine in IE but not in firefox. Somehow the background image is not completely shown. It stops after the last letter. Any suggestions?? Grtz, A friend of mine recently explained to me how css can be used to write webpages without use of any tables whatsoever. I was very sceptical and asked him to show/write me some examples. I immediately noticed that if you use absolute positioning you'll mess up the page presentation on differrent monitor resolutions. Also, for the same reason I found CSS to be unhandy when you have dynamically loaded content. Still, the idea to use div tags and css and abolish tables sounds very tempting, but I want to ask people with more experience than me: Should I stop using tables, is all previous functionality still available without tables, and if not, in what cases, theoretically, it is better to use css and where it is better to use tables? I'm at a loss because I'm not very familiar with css... this page www.centerpointpilates.com/index.html has pricing formatted by line 42 of the code at the very bottom of this post, printed out here by itself: Code: #main #plans {
position: relative;
float: right;
width: 220px;
background-color: transparent;
border: 1px solid #6B9D98;
margin: 0px 0px 10px 10px;
left: 428px;
top: 29px;
}
I've done something but I'm unaware of what! The text within the div using this now goes off the screen, all the way to the right! Can anyone tell me why? I'm printing the whole css sheet below, the above code is line 42. If I can't figure this out tonight I'm going to just redo the page using tables until I can find what is wrong. Code:
body {
background-color: #F6EEC2;
margin: 10px;
padding: 0px;
}
#bannerBox {
background-color: transparent;
background-image: url(gfx/cpp_banner2.jpg);
background-repeat: no-repeat;
border: none;
padding-left: 5px;
height: 80px;
margin: 0px;
}
#leftNav {
position: absolute; left: 10px; top: 100px;
width: 130px;
background-color: transparent;
}
#navBlock {
position: relative; left: 7px;
width: 110px;
background-color: transparent;
border: 1px solid #6B9D98;
}
#main {
background-color: transparent;
position: relative;
margin-top: 5px;
margin-left: 138px;
margin-right: 0px;
border-left: 1px solid #6B9D98;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 137px;
margin-right: 0px;
}
html>body #main {
margin-left: 139px;
margin-right: 0px;
}
#main #plans {
position: relative;
float: right;
width: 220px;
background-color: transparent;
border: 1px solid #6B9D98;
margin: 0px 0px 10px 10px;
left: 428px;
top: 29px;
}
#tagLine {
background-color: transparent;
border: none;
margin: 0px;
padding-top: 10px;
padding-bottom: 50px;
}
IMG {
position: relative;
float: right;
border: 0px;
padding-left: 20px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
}
P,H1,H2 {
margin: 0px 10px 0px 10px;
}
H1 {
font: bold 16px "arial";
color: #6B9D98;
letter-spacing: 0px;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 10px;
}
H2 {
font: bold 14px "arial";
color: #6B9D98;
letter-spacing: 0px;
padding-top: 10px;
padding-bottom: 13px;
}
#leftNav P {
padding-top: 6px;
margin: 0px 10px 0px 10px;
}
#leftNav P.spacer {
padding-bottom: 15px;
}
#navBlock P {
font: bold 11px arial;
color: #6B9D98;
padding-top: 1px;
padding-bottom: 1px;
}
#main P {
text-align: justify;
font: 11px arial;
color: #6B9D98;
line-height: 17px;
padding-left: 10px;
padding-bottom: 10px;
}
#main P.head {
font: bold 12px arial;
color: #6B9D98;
padding-left: 10px;
padding-bottom: 3px;
}
#plans P {
font: 12px "arial";
color: #6B9D98;
padding-left: 10px;
padding-bottom: 3px;
}
#plans P.list {
text-align: justify;
font: bold 10px arial;
color: #6B9D98;
width: 150px;
padding-left: 15px;
padding-bottom: 5px;
}
#plans P.list2 {
text-align: justify;
font: bold 10px arial;
color: #6B9D98;
width: 180px;
padding-left: 15px;
padding-bottom: 5px;
}
#plans P.price {
font: 11px arial;
color: #6B9D98;
padding-left: 15px;
padding-bottom: 1px;
}
#tagLine P {
font: italic 11px arial;
color: #6B9D98;
padding-bottom: 3px;
}
#tagLine P.copy {
font:11px "lucida console";
color: #6B9D98;
padding-top: 5px;
}
A.nav:link {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.nav:visited {
text-decoration: none;
background color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.nav:hover {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.reg:link {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
border-bottom: 1px solid #8DBFBA;
}
A.reg:visited {
text-decoration: none;
background-color: transparent;
color: #8DBFBA;
border-bottom: 1px solid #8DBFBA;
}
A.reg:hover {
text-decoration: none;
background-color: transparent;
color: #8DBFBA;
border-bottom: none;
}
Hello, i am currently makeing a website that uses CSS to handle the font colors for the menu, page titles and general text. my problem is this (i hopt this is in the right area) i have a page where the admin can chose the text colors for the different areas, when its selected its saved in a database. is there a way i can set it up so that the CSS file i have pulls the code out of the db and places it in the right place? here is an example ---Menu--- (title) <- class name = mtitle home <- class name = nav in the site.css file which has all my style code in it i need where you put the color code to pull it from the db instead. thank you Hello, guys im new, i need help. i have this website. i can pm the URL. and i am having problems outting ad bars down the sides. i have three bars on the left side, the 3rd one is supposed to float to the other side. the right side has one that is being pushed down. im so lost and really out-of-my-mind lol, i usually have no problems, but wordpress is kicking my butt with this css. any and all help would be greatly appreciated. because i need the layout done by the 1st. so i have less than a week. thank you guys. hope to recieve good answers thank you. Hi all, Sorry about posting something like this but my knowledge (and the stuff in the CSS book besides me) only goes so far. I've tried to fix the problem I have but I've got stuck. Would somebody mind taking a look for me? All I want is the shadows on the left & right hand side to extend to the same height as the MainHolding div. I've tried various things but haven't been able to get it to work without screwing up the whole layout. I know the problem is because the items in the middle are floating and the height doesn't count those items - I just can't fix it. Here's links to the HTML & CSS. If anyone would prefer me pasting the code straight in here, let me know and I'll do it. Sorry about the state of the stylesheet. It's all over the shop at the moment. HTML CSS *** All working now. These's page will probably stop working soon *** It doesn't look very good in IE at the moment. That's next on my to do list. Any other general comments would also be gladly appreciated. Thanks for any help. Regards, Lee Hi all, I have a problem with a dynamic page on my web site which is driving me mad. I have inserted a javascript nugget on two pages which displays the contents of a shopping cart (from Mals e-commerce). This information is positioned using CSS on two different pages of my site. The structure of the pages is almost identical and they share a common CSS file, yet the cart 'nugget' only displays correctly on one of the pages. The website is www.candle-shack.co.uk. The page that displays correctly is the 'shop by product' page. In this page, the cart information is black text against the white background. The 'shop by fragrance' page displays incorrectly, with the black text hidden against a black background. Any help in resolving this issue would be greatly appreciated, as I have tried everything. Many thanks, Duncan Im trying to Implement http://www.trowbridge-wiltshire.co.uk/adrian into a total css page as shown on http://www.trowbridge-wiltshire/newadrian . Unfortunately I am stuck. Please could u have a look at tell me what I am doing wrong. Code:
html, body {
margin: 0:
padding: 0;
font-size: 100%;
color: #333;
background-color: #6795E1;
text-align:justify;
font:normal 10pt "Arial", "Times New Roman"
}
p, h1, pre {
padding: 0px 10px;
text-align:justify;
}
p {
font-size: 1em;
}
h1 {
font-size: 1em;
}
img {
margin: 0;
}
#container {
position: relative;
width: 768px;
margin: 0 auto;
border:2px solid rgb(0,0,0);
}
#banner {
height: 60px;
margin: 0px 0px;
}
#leftcontent {
float: left;
width:130px;
background:#BAC4C8;
}
#leftcontent ul {
list-style: none;
margin: 0;
padding: 0;
}
#leftcontent li {
border-bottom: 1px solid #CBDEF5;
}
#leftcontent li a {
display: block;
padding: 2px 0px;
border: 1px solid black;
background: #BAC4C8;
color: #fff;
text-align:center;
text-decoration: none;
}
#leftcontent li a:hover {
border: 1px solid #1958b7;
background: #BAC4C8;
color: #fff;
}
#centercontent {
position: relative;
background:#E2EAF8;
border-left:2px solid rgb(0,0,0);
margin-left: 130px;
margin-right: 0px;
}
.panel {background:#6E7E86; border:1;color:black}
.Information {background:#E2EAF8;padding:10px;vertical-align:top}
.copyright {padding=5px;font:10pt;text-align:center;background:#CBDEF5}
I am trying to build a site, and integrate a blog with Feedburner. The site is wwhgc.craigstanley.org The Issue: When the blog is present, the left column drops below all of the right content in IE (but not in Firefox) When the blog is not present (click "tandem flights" at the top), the content is fine. Feedburner says that they do not set a width to their content. Is there any way to see the actual HTML that the Feedburner Javascript spits out? Please help me . . . too many days down the drain on this one. -Craig Terrible thread topic, but couldn't think of a better summary. First, the link: http://www.crossthebridge.net/html/ In Firefox, everything is gravy. In Internet Explorer, the right float div is fine, but the content boxes stack under the float. If I change the right content box width to 3 pixels smaller, the left content boxes slide up to the top as they're supposed to, but there is a gap between the left and right boxes. You can append "center.css" to the above link to see my CSS. I've read a ton of threads and haven't found the solution yet... and I'm at my wit's end. If you can point me in the right direction I'd be grateful. I'm setting up a website order form, and using CSS for formatting. I want to be able to put a picture icon (to view a picture of the product) beside the products details. I'm having problems because the product details keep wrapping to a new line. Here are some images illustrating the predicament: What it currently looks like Picture 1 What I want it to look like Picture 2 Structure of the DIV boxes Picture 3 The code for the boxes is he Code:
<A href="http://localhost/21072004/picture.php?id=t35064">
<SPAN class=kitTitle>t35064. Kampfpanzer Leopard </SPAN></A>
<DIV style="position: relative; WIDTH: 500px; HEIGHT: 100px">
<IMG src="hobbyhq - tamiya_com_au - Browse_files/camera.jpeg" style=\"position: absolute; margin: 0px 0px 0px 0px;\">
<DIV style="position: relative;LEFT: 45px; WIDTH: 400px; TOP: 0px; HEIGHT: 40px; BACKGROUND-COLOR: #f0f0f0">
<TABLE class=dataFile border=0>
<FORM name=module action=cart.php?action=confirm method=post>
<TBODY>
<TR class=listColor>
<TH>1:35</TH>
<TH class=listHighlight>AFV</TH>
<TH>AU$30.00</TH>
<TH align=right>QTY
<INPUT type=textField size=3 value=1 name=qty>
<INPUT type=submit size=3 value="Add to Cart" name=submit>
<INPUT type=hidden size=3 value=t35064 name=id>
</TH>
</TR>
</TBODY>
</FORM>
</TABLE>
</DIV>
I also took the liberty of putting a sample capture page on my webspace (if anyone wishes to investigate further) Sample Page Page Stylesheet I'm trying to use a "DIV within a DIV", but when I set the positioning to "absolute", the DIV warps to the top of the page! I've been stumped for days on this, and it's delayed the page's launch. If anyone can help me... it'd be very much appreciated. Hello, I am having some problems with my code. I'm not able to insert these forms properly into these divs. I would like the forms to be placed within the tab (more or less centered), however, how it is now the form is half way in and half out of the tab. When I try and move the form over it distorts the tab image. Please help me fix this problem. I'm uncertain about what is wrong and how to fix it. Thank you in advance. Code:
<head>
<style type="text/css">
body
{
color: black;
}
/*Form Formatting*/
fieldset
{
margin: 1em 0;
padding: 1em;
border: 1px solid #ccc;
background: #000000;
}
legend
{
font-weight: bold;
color: #FFFFFF;
}
label
{
display: block;
}
input [type="text"]
{
width: 200px;
}
input.radio, input.checkbox, input.submit
{
width: auto;
}
input.radio
{
float: left;
margin-right: 1em;
}
input.author:focus, input.email:focus
{
background: #E9C2A6;
}
input[type="text"]
{
border-top: 2px solid #999;
border-left: 2px solid #999;
border-bottom: 1px solid #ccc;
}
.required
{
font-size: 0.75em;
color: green;
}
.author, .email, .subscribe-yes, .subscribe-no, .checkbox/*.HTML_Box, .Plain_Text*/
{
color: #FFFFFF;
}
/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*Form Placement*/
#Display_Name
{
margin: auto 33% auto 33%;
width: 150px;
left: 100px;
}
#Details
{
margin: auto 33% auto 33%;
}
#Subscription
{
margin: auto 33% auto 33%;
width: 150px;
}
#Mailing
{
margin: auto 33% auto 33%;
width: 180px;
}
#Submit_Subscription
{
margin: auto 33% auto 33%;
}
#HTML_Box
{
float: none;
}
#PText_Box
{
float: right;
}
/*------------------------------------------------------------------------------------------------------------------------------------*/
/*Background Tab*/
/* set the image to use and establish the lower-right position */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2
{
background: transparent url(../../Working/red_tab.php.png) no-repeat bottom right
}
.cssbox
{
/* intended total box width - padding-right(next) */
width: 250px !important; /* IE Win = width - padding */
width: 320px; /* the gap on the right edge of the image (not content padding) */
padding-right: 15px; /* use to position the box */
margin: 20px auto;
}
/* set the top-right image */
.cssbox_head
{
background-position:top right;
/* pull the right image over on top of border */
margin-right:-15px;
/* right-image-gap + right-inside padding */
padding-right:40px
}
/* set the top-left image */
.cssbox_head h2
{
background-position:top left;
margin:0; /* reset main site styles*/
border:0; /* ditto */
/* padding-left = image gap + interior padding ... no padding-right */
padding:8px 0 0px 40px;
height:auto !important;
height:1%; /* IE Holly Hack */
font-family: Comic Sans MS, Arial, sans-serif;
}
/* set the lower-left corner image */
.cssbox_body
{
background-position:bottom left;
margin-right:25px; /* interior-padding right */
padding:15px 0 15px 40px; /* mirror .cssbox_head right/left */
}
</style>
</head>
<body>
<!--Tab-->
<div class="cssbox">
<div class="cssbox_head">
<h2>Mailing List</h2>
</div>
<div class="cssbox_body">
<!-- Contact Info -->
<div id="Display_Name">
<fieldset id="Details">
<legend>Contact Details</legend>
<!--Name-->
<label for="author" class="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" size="25"/>
<!-- E-mail Address-->
<label for="email" class="email">Email: <em class="required">(Required)</em></label>
<input name="email" id="email" type="text" size="25" maxlength="200"/>
<!-- E-mail Format-->
<div id="HTML_Box">
<p>
<input class="checkbox" id="HTML" name="HTML" type="checkbox"
value="HTML" />
<label>HTML</label>
</p>
</div>
<div id="PText_Box">
<p>
<input class="checkbox" id="Plain_Text" name="Plain_Text" type="checkbox"
value="Plain_Text" />
<label>Plain Text</label>
</p>
</div>
</fieldset>
</div>
<!-- Subscription Question -->
<div id="Subscription">
<fieldset id="Mailing">
<legend>Join Mailing List?</legend>
<p>
<input id="add-subscribe" class="radio" name="add" type="radio"
value="subscribe" checked="checked" />
<label for="add-subscribe" class="subscribe-yes">Subscribe</label>
</p>
<p>
<input id="add-unsubscribe" class="radio" name="add" type="radio"
value="unsubscribe" />
<label for="add-unsubscribe" class="subscribe-no">Unsubscribe</label>
</p>
<!-- Mailing List Submit Button -->
<div id="Submit_Subscription">
<input id="enter" type="submit" value="Submit" />
</div>
</fieldset>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------
http://johnmifsud.byethost22.com/John_Mifsud_files/index.php I've been creating this site using percentages for the relevant sections of the page. However, in the footer the 'site map' image in falling out the bottom of the footer if the screen is shrunk, (both in IE and Firefox). Why??? What's wrong with the CSS? (sitemap and imgsitemap are both within the footer)And suggetions would be greatly appreciated! Thanks Miffy! #footer { position: relative; top: 0px; left: 0px; height: 2%; margin: 0px; padding: 0px; background-color: black; background-image: url('bottom menu files/bottommenu.gif'); width: 85%; border-style: none; border-width: 0px; } .sitemap { position: absolute; top: 0px; left: 0px; border-style: none; border-width: 0px; padding: 0px; margin: 0px; height: 100%; } .imgsitemap { border-style: none; border-width: 0px; padding: 0px; margin: 0px; height: 100%; } |
|||||||