|
CSS - Designing A Nice Footer In Css
I am new to design but really doing my best to keep up with the big boys. I am trying to tweak my site on Wordpress to have a oversized, and fluid footer.
Long story short I want my site (sac247[dot]sacobserver[dot]com) to have a footer that looks like venturebeat[dot]com or mashable[dot]com. Can someone help me get started on how to break my colors out of the widget box? Similar TutorialsHi, As you know css is the new way of desinging web sites. Does anyone have or know of any tutorials on designing sites based on css. Thanks uno_turko Hello! i am new to this forum and new to this whole html css thing also. But reading through these forums and a couple books has helped me alot. I just had a question that i have not been able to find the answer to. When you first start building a site, do you have all the design elements squared away first? or do you do all the coding first? (when designing with CSS). I am at a stage where I know what i want me pages to look like and have even started on the basic coding but was just curious if i should take a step back and design all the graphics that i will have on my site. Thank you in advance! I'm not sure if this is in the right place, but I'm just asking for a TEENSY BIT of code help. My first full CSS design isn't playing nicely with Internet Explorer and I can't for the life of me figure out WHY!! cabernetstudios dot com Take a look at it in firefox and in IE and you'll see the problem right away. I've managed to fix the navigation float, but I'm out of ideas on how to get the billboard images to stay up top. Email me if you think you can help! Hi guys I'm having a little trouble working with CSS While doing the website in IE, i didn't notice that CSS is not working good in Firefox. PLEASE SEE THIS IMAGE FIRST SO U CAN SEE DIFFERENCES BETWEEN 2 BROWSERS: http://www.appinformatica.com/firefoxie.jpg and here is the CSS code i used. in IE it looks good, but not in Firefox.. Code:
BODY {
SCROLLBAR-FACE-COLOR: #D3F0EC; SCROLLBAR-HIGHLIGHT-COLOR: #32AAA1; SCROLLBAR-SHADOW-COLOR: #35AAA4; SCROLLBAR-3DLIGHT-COLOR: #BAEDE8; SCROLLBAR-ARROW-COLOR: #32AAA1; SCROLLBAR-TRACK-COLOR: #EFEFEF; SCROLLBAR-DARKSHADOW-COLOR: #35AAA4;
}
.verde-com-big {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: 0EB7B2;
font-weight: bold;
}
select {
background-color: #FFFFFF;
color: 4B4B4A;
font-size: 11px;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
border: 1px inset #003300;
}
form {
margin: 0px;
padding: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
border-top-color: #A7D8C2;
border-right-color: #A7D8C2;
border-bottom-color: #A7D8C2;
border-left-color: #A7D8C2;
}
input {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF6600;
textarea {
color: #015953;
border-top: 1px inset #003300;
border-right: 1px inset #003300;
border-bottom: 1px inset #003300;
border-left: 1px inset #003300;
background-color: #FFF0B9;
border: 1px solid #A5D9C2;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFF0B9;
color: #FF6600;
border: 1px solid #A5D9C2;
}
Any ideas about how to make look good in Firefox too ? thanks ALOT in advance. Henry. hey.. i have this design where i need it to do this http://www.456bereastreet.com/lab/cssframes/ only in the orange field where there is a login form on the picture.. but i can't get it working.. so i am very stock.. plz help Ok, I am building a site for a model and I have a stripped background for the left navigation. IE7 wont display it, but of course all the other browsers do. I cant post a link cause im a newbie to this forum, but I can post my code! any help would be great: Css Code Code:
.container {
width: 1000px;
margin: 0px auto;
}
.header {
background: url(../images/headerbg.jpg);
height: 200px;
width: 995px;
margin-right: auto;
margin-left: auto;
}
.background {
background: url(../images/backgroud.jpg) repeat-x;
width: 14px;
}
.leftnav {
background: url(../images/stripes.jpg) repeat;
float: left;
width: 150px;
color: #FFFFFF;
visibility: visible;
margin-right: auto;
margin-left: auto;
}
.maincontent {
background: #FFFFFF;
width: 487px;
margin-right: auto;
margin-left: auto;
padding-right: 5px;
padding-left: 5px;
text-align: left;
float: left;
}
.rightside {
background: url(../images/body.jpg);
float: right;
height: 461px;
width: 351px;
margin-right: 2px;
}
.border1 {
background: url(../images/border1.gif) repeat-x;
height: 14px;
}
XHTML Code Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
<!--
body {
background: url(../images/temp_slices_03.jpg) repeat-x;
width: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<div align="center">
<div class="container">
<div class="header">Content for class "header" Goes Here</div>
<div class="leftnav">Content for class "leftnav" Goes Here</div>
<div class="maincontent">Content for class "maincontent" Goes Here</div>
<div class="rightside">Content for class "rightside" Goes Here</div>
</div>
</div>
</body>
</html>
I have a floated div that contains a h1, img, and then a p. For some reason, IE is putting extra space between the h1 and img, and between the img and p. Here is the xhtml: Code: <div id="row_b_left"> <h1>Header</h1> <img src="images/row_b_divider.png" alt="" /> <p>Hello! This is where the text goes.</p> </div> and here is the relevant css: Code: #row_b_left h1 {
color: #0b819e;
font: bold 1em Tahoma, arial, sans;
margin-bottom: 0px;
}
#row_b_left p{
color: #060606;
font: .8em/1.3em arial, sans;
text-align: justify;
margin: 0px 15px 0px 0;
}
I have no idea what is causing IE to add extra space between these elements. It works perfectly in Firefox and Opera. Any help would be appreciated. Thanks in advance. I am curious to know what many of you think about the design consideration for 800 x 600. I am about to start a major project and am considering going to a fixed width of 1024 instead of my current default of 770. As I see it only about 1 of 10 use 800 x 600, and I think that will go down in the not too distant future. I wouln't mind learing how to scale a site so it looks good in any resolution but as I understand it you can not scale images that many of my site layouts depend on. Tom Sorry if I'm being repetitive, this has been discussed before, but still there is something preventing me from making CSS boxes behave properly. Everything has to do with stopping <TABLE> and starting <CSS>-based thinking. I mean, there shouldn't be so much magic and wonderdust as I trick myself into believe. My problem is very simple; I'd like the design to do the following: [wrapper: full width, 5px padding all over] [variable size image container, 2 px padding all over, staying on the left at all times] [variable size text container, staying on the right at all times, stretching full width so it touches the image container] Here's an example of the design: Code: ------------------------ | (wrapper) | ||------||------------|| ||image || text || ||------||------------|| ------------------------ I thought I had it made when I read that you basically can look at creating a table based design as using a combination of DIV's and SPAN's, havind the DIV's being looked at as rows and SPAN's as columns/cells. But for some reason I can't seem to get the full grip out of it. I've had *some* success with this, but I'm having horrible problems with making the text get to the top left of the container. It *always* stays at bottom left, no matter how I adjust my DIV's, SPAN's or properties of those. I can't seem to make the boxes have any actual "space"; when I add margin properties to either box, I can't locate it, it's as if the container isn't there. I can get the wrapper to behace though. While I'm at it, is there some good, solid, documentation of how the boxes work and interact? I've read *alot* of different articles, looked at w3c, checked other peoples code (which actually have teached me the most), but I'd like to have some kind of resource that gives me the knowledge of "box modelling" to such an extent that I should be able to solve in not all but most problems, like this simple one. Thanks for taking time to read through all this. I know it won't become a FAQ or rooted topic, but I'm hoping perhaps someone with the same problem as I have will benefit from this. Hello, I'm trying to build a form (without tables) where the user can choose between images using radiobuttons, like this: URL http://www.karmaweb.it/varie/example-form.png (img bbcode does not seem to work, so I just inserted the link to the example image) I've tried to insert each element (radio button, image, and label or text) in a separate div with float:left and then wrap these 3 divs in an outer div, like this: Code:
.input-row
{
clear: both;
margin-bottom: 20px;
}
.input-radio
{
float: left;
width: 20px;
height: 100px;
}
.input-thumbnail
{
float: left;
width: 220px;
}
.input-label
{
float: left;
width: 200px;
}
and the html: Code: <div class="input-row"> <div class="input-radio"> <input type="radio" name="" value="" id="1" checked /> </div> <div class="input-thumbnail"> <img src="image.png" alt=""></a><br /> </div> <div class="input-label"> <label for="1">Some text</label> </div> </div> <br style="clear:both" /> but I cannot find a way to vertically center the radiobutton (image height is not fixed), besides the clear:both on the outer div doesn't seem to work (why? I had to add a br style="clear:both" after each line), and does not look very good in older browsers. Any idea how to do this? I'd appreciate any help you could offer. Thank you, Fibi hola. 1.i am looking for quick tutorials on how to cross-platform web design a page without using tables. 2. and why people dont like to use tables? ++thanks in advanced. +ckill3r Hi, Is it possible to make 3 different sites depending on the client browser medium? I have a flash site, that needs to be presented non-flash for the iphone, and another non-Flash site for the ipad. Is there a way CSS can detect these 3 different browser mediums? If so, then how? thanks - Hi I am trying to learn how to design and develop a website that has consistent behavior across browsers, browser window size and screen resolution. What are the industry best practices for designing and developing such websites. Your help is appreciated Thanks I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan Code: http://xbox-free.co.uk/ Can anyone advise as to why my footer is overlapping/floating to the right? Cheers, Neil I want my footer to have no whitespace under it (like 1px ). I have it set like this: #footer { border-top:1px solid; text-align:right; margin:0px; font-size:smaller; padding-bottom:0px; } and it doesn't work so I'm guessing it is somewhere else in the file but I've tried messing around with most (all?) of the padding / margins and it still doesn't work. How could I do this? What I want is like the footer at http://www.oswd.org . Hello. Maybe this would be a better post on CSS. Here is my code. Right now I'm trying to add a set of links at the bottom of the web page. Any thoughts? This has been driving me nuts! Thanks again everyone HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<title> Attorneys at Law, New York Lawyer</title>
<meta name="" content="">
<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
<meta name="KeyWords" content="HTML">
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="index.js">
</script>
</head>
<body>
<div id="mainContainer">
<div id="topBar"><img src="webbanner.jpg" width="760" height="100">
<!--#include file="left_bar.shtml" -->
<!-- Main Content-->
<div id="mainContent">
<!-- Google Search-->
<form action="" id="cse-search-box">
<div align="right">
<input type="hidden" name="cx" value="013298611985327428493:xedrvpp2ns4" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="(URL address blocked: See forum rules)=cse-search-box&lang=en"></script>
<!-- BreadCrumb Nav-->
<div id="navBreadCrumb">
<a href="(URL address blocked: See forum rules)">Home</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href="">Areas of Practice</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href=""> Real Estate</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<strong>Foreclosure</strong>
</div>
<h1><font face="times new roman, times, serif" size="5">About Our Firm</font> <hr size="2" width="100%" />
<!-- end content --></h1>
<p align="justify"><strong>Lawyer</strong> is a full-service law firm with conveniently located offices in ... and ... Counties. As the largest suburban general practice in ..., we have a skilled team of 31 attorneys, including a physician-attorney, as well as two on-staff Registered Nurses and an extensive support staff to serve our clients.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Why should you choose .... at your New York Attorney?</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv </p>
<p align="justify">individual circumstances.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Affiliations</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Please visit our <a class="con" href="practice_areas.php">
areas of practice</a> for further information on our legal services or <a class="con" href="email.php">
contact us </a>directly for an initial consultation.</p>
</div>
</div>
</div>
</body>
</html>
CSS Code:
html{
height:100%;
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.8em;
margin:0px;
padding:0px;
background-color:#001b4f;
text-align:center;
}
.clear{
clear:both;
}
#mainContent{
padding-right:10px;
padding-left:210px;
padding-bottom:10px;
background-color:#fff;
}
#mainContainer{
width:760px;
text-align:left;
margin:0 auto;
background-color: #fff;
border-left:1px solid #272727;
border-right:1px solid #272727;
padding-bottom:10px;
}
#topBar{
width:760px;
height:100px;
padding-bottom:0px;
padding-top:0px;
border-bottom:2px solid #272727
}
#searchbox{
position:absolute:0,0;
}
#leftMenu{
width:200px;
padding-left:10px;
padding-right:1px;
float:left;
background-color: #fff;
padd
padding-top:25px;
}
#botTable{
display: table-footer-group;
float: top;
bottom: 100%
Hi all, I'm having troubles with my footer and I hope someone will be able to help: test.katiefleming .ca (remove space) User: wendy Pass: letmein The footer is supposed to span across the bottom forever should the user increase the browser window (this works). However, my text moves as the window is expanded/contracted. I want it to be fixed. No idea how to do this. Any help would be great! |
|||||||