Ant
Member-
Posts
202 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Downloads
Gallery
Store
Everything posted by Ant
-
Thanks newseed. I'm trying to understand it. Up till now I was using class and ID's to style my elements in a very straightforward way. i.e. adding all different classes to elements at every instance. I never thought of doing it the way you showed. I think it's under "CSS: Use Descendant Selectors" I think i skipped a big section of class/ID when I learned css. I understand this ul#nav. You are telling the UL element to be styled according to the css when it is the child of the ID = nav. Is that right? It cuts down on the html code? What I don't understand is this: ul# a {color: #ff0000;} Whats the ID... "a" ? Ant
-
Wickham, thanks. I think I have it. Question: If I want to declare the font type for my links (NOT THE hover etc, but the plain link text) where should I do that? in the a or the a:link. As a test I also tried declaring them in the #nav ul, #nav li, #nav a etc.and they all effected the link text. Shouldn't only one WORK. How am I able to declare a font type for the ul, etc element if they are not elements that represent TEXT? Whats the right way, and if there is one, why do other ways work as well. Below is what I have so far. The one problem I'm having, is when I preview it in different browsers,from dreamweaver, the initial look of the nav bar is slightly distorted. When you click on it, it sort of SNAPS into proportion and looks correct. Any reason for that? /* nav styling */ #nav { text-align:center; height: 30px; } #nav ul { display:inline-block; list-style:none; } * html #nav ul { /* Target IE6 */ display:inline; } *+html #nav ul { /* Target IE7 */ display:inline; } #nav li { display:inline; } #nav a { float:left; text-decoration:none; padding:0 17px; /* variable width */ font-size: 13px; height:30px; line-height: 30px; /* vertically align text - set to the same value as the height */ display:inline; } #nav a:link { font-weight:normal; color:#FFFFFF; background-color:#98bf21; text-align:center; padding:6px; text-decoration:none; text-transform:uppercase; font-family: Arial, Helvetica, sans-serif; } #nav a:visited { font-weight:normal; color:#FFFFFF; background-color:#98bf21; text-align:center; text-decoration:none; text-transform:uppercase; font-family: Arial, Helvetica, sans-serif; } #nav a:hover { color:#333300; background-color:#7A991A; font-family: Arial, Helvetica, sans-serif; font-weight: bolder; } #nav a:active { color:#333300; background-color:#7A991A; font-family: Arial, Helvetica, sans-serif; font-weight: bolder; } /* nav styling */ <div id="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">Fly Shop </a></li> <li><a href="#">Photos</a></li> <li><a href="#">Destinations</a></li> <li><a href="#">Events</a></li> <li><a href="#">Lessons</a></li> <li><a href="#">Spey Casting </a></li> <li><a href="#">Bios</a></li> <li><a href="#">CONTACT US</a></li> </ul> </div>
-
Guys, thanks for the help. Whats tough is trying to figure out how to combine 4 different elements of the nav. bar: ul, li, a, #navigation & div, to create what I think is a complex task. I try and associate each of the elements as a visual representation in my mind. Problem is they don't necessarily have an "image" associated with them. The type of stuff that loses me is this: width:95%; /* 95% of the li width */ from this css.(see below) To me it reads, the width of EACH a element in my nav. should be 95%, BUT whats the width of the a elements? The size of the words chosen along with the text size I denoted (or it's default size) as well as the size of each box generated by a and li ? Is the li the actual word and box size, or is the a item the actual word and box size. Doesn't the a tag just make the li word a link. a { height:50px; line-height: 50px; /* vertically align text - set to the same value as the height */ text-align: center; background-color:#666633; font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bold; text-transform: uppercase; color: #FFFFFF; letter-spacing: 2pt; display: block; width:95%; /* 95% of the li width */ } By the time I get a good handle on all this, it will all be outdated and go the way of things like rubylith, paste up etc. Ant
-
To begin, my fault in all this, amongst other things, is not understanding how width: auto,100% etc effects my containers and the elements inside. I want my navigation menu to fill my 990px wide div that holds it. So the elements should expand themselves till they reach the end. Obviously if I have to much content it will run past, but that's not the case. I want my nav links & boxes to fill my 990px div and be centered. Almost like on this sites home page, BUT equal blank space both left and right of the first and last nav button. I ask myself, should I tell the div to expand all content inside equally till it reaches the 990px width. OR do I tell the elements inside the div to expand till they reach the containers 990px boundary horizontally. I'm confused by this. Which controls which? i.e whos the master? Heres what I have so far. Of course I cant seem to center the text vertically in the boxes, only horizontally.If some of this seems unnecessary,it's probably because I was trying various different things to see if any would make a change. <!-- navigation start --> #navigation { height: 30px; width: 990px; } #navigation { background-color: #CC9999; height: 50px; } ul { list-style-type:none; margin:0; padding:0; } li { float: left; display: inline; } a { height:23px; text-align: center; background-color:#666633; font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bold; text-transform: uppercase; color: #FFFFFF; letter-spacing: 2pt; width: 100px; display: block; } <!-- navigation end --> <!-- navigation start --> <div id="navigation"> <ul> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul> </div> <!-- navigation end -->
-
news/ Tiggers, thanks for the clarification. Ant
-
Thanks Eric. I added margin auto to l/r and it works. Thank you very much to everyone for their help. I learned a lot about positioning from all this. Now I have to figure out if there are right or wrong ways to do things going forward. For instance, besides being able to add a class to multiple elements, why would I place a class on a div as well as defining a div with an ID? Why not just define it all on in the ID? Ant
-
Wickham, thank you. All I want is to be able to add or subtract content from the page and have the footer be just underneath the last bit of longest content on the page. Whether it be the right or left column. I want the footer to appear when you scroll down to the longest part of the page. When I tried your version, the footer worked perfectly for both columns and stuck to the bottom of the longest content. HOWEVER the footer was shifted to the left and did not line up centered and the same width as the rest of my divs. plus I think when I decreased the size of the page to a VERY small size on my browser, the footer stayed to the left and separated from the content. So I tried this and it worked. I THINK, all I did was place the footer div inside the wrapper. I tried it in 3 different browsers and it works. I'm not sure why because you specified that the footer div was to be outside the wrapper. Any ideas if this is correct and why it SEEMS to work? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[url]http://www.w3.org/TR/html4/strict.dtd[/url]"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>{ visibility: inherit; } Sticky Footer Technique #2</title> <style type="text/css"> * { margin:0; /* zero out margin */ padding:0; /* zero out padding */ } html, body { height:100%; /* gives layout 100% height */ overflow:inherit; /* triggers 100% height in Opera 9.5 */ background:#333; } #wrapper { min-height:100%; /* gives layout 100% height */ width:990px; /* centers #wrapper */ position:relative; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #header { /*position: absolute;*/ width: 990px; /*left: 0px;*/ /*top: 0px;*/ height: 100px; background-color: #00FFCC; } #left_main { background-color: #FFFFFF; width: 960px; /*left: 0px;*/ /*top: 100px;*/ padding-bottom: 10px; padding-top: 10px;/*110px;*/ padding-right: 15px; padding-left: 15px; } * html #wrapper { height:100%; /* IE6 treats height as min-height */ } p { font-size:11pt; text-align:left; /* bottom padding clears the #footer */ font-family: Arial, Helvetica, sans-serif; color: #666666; line-height: 18px; } #clearfooter { height: 80px; border: 0; margin: 0; padding: 0; } #footer { margin-top: -80px; height:80px; width:970px; background-color: #999; text-align: center; } .style1 { font-size: 36px; color: #66FF00; border: 1.5px dashed #666666; padding-top: 8px; padding-right: 8px; padding-bottom: 12px; padding-left: 8px; background-color: #999999; } #right_main { background-color: #009900; width: 440px; padding-top: 10px;/*110px;*/ /*padding-bottom: 80px;*/ float: right; padding-left: 5px; margin-left: 22px; } .clear { clear: both; width: 100%; height: 0; visibility: hidden; } </style> </head> <body> <div id="wrapper"> <div id="header">Content for id "header" Goes Here</div> <div> <p>Content for New Div Tag Goes Here</p> <p>ax</p> <p>ax</p> <p>ax</p> <p>ax</p> <p>x</p> <p>a</p> <p>xa</p> <p>x</p> <p>ax</p> <p>a</p> <p>x</p> <p> </p> <p>ax</p> <p> </p> </div> <div id="left_main"> <div id="right_main"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p> </p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <p>mako reelsfficia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nofficia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nofficia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nofficia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nofficia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nofficia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nofficia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nodsfdsfdfds</p> <div class="clear"> </div> </div> <!--end of #left_main--> <div id="clearfooter"> </div> <div class="style1" id="footer">copyright</div> </div> <!-- end #wrapper --> <!-- #footer sits outside the #wrapper --> <!--</div>--><!-- end #wrapper --> </body> </html>
-
First off I wanted to thank Eric for using the code he provided. I assume I am allowed to use it. If I'm not please say so. I don't think code is similiar to other forms of media with regard to copyright etc, but if it is please update me on the proper use or non use of it. ok I had it I THINK until I went on to add my #right_main. I thought I had to place the right_main INSIDE the #left_main and then float right the right_main div. I thought I had to do that so it would interact with the footer as the left_main does. I placed the padding on the right_main as it appears on the left_main but it doesn't push the footer down with the padding like the left_main does. My content, in the right div, just goes past the footer. Placing the right_main outside the left_main didn't work either. Is any of the stuff I'm doing here remotely done properly? Am i using the Position properties of CSS correctly? As I said before, I had a good handle on positioning of my foundation divs to build a page when I was using the relative and absolute combination. My wrapper was relative, then I just placed every other div using absolute and all was good. Since thats not in place anymore (DUE TO THE STICKY CODE) EXCEPT for the relative wrapper together with the absolute footer I'm not sure how to place my additional divs ( left_main / right_main ) and what type of position property I should give them. Right now they are both defualt,(blank) so I assume they are STATIC??? I used the float:right to get my right_div to jump to the right of my wrapper and right_main div. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[url]http://www.w3.org/TR/html4/strict.dtd[/url]"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>{ visibility: inherit; } Sticky Footer Technique #2</title> <style type="text/css"> * { margin:0; /* zero out margin */ padding:0; /* zero out padding */ } html, body { height:100%; /* gives layout 100% height */ overflow:inherit; /* triggers 100% height in Opera 9.5 */ background:#333; } #wrapper { min-height:100%; /* gives layout 100% height */ width:990px; /* centers #wrapper */ position:relative; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #header { position: absolute; width: 990px; left: 0px; top: 0px; height: 100px; background-color: #00FFCC; } #left_main { background-color: #FFFFFF; width: 960px; left: 0px; top: 100px; padding-bottom: 80px; padding-top: 110px; padding-right: 15px; padding-left: 15px; } * html #wrapper { height:100%; /* IE6 treats height as min-height */ } p { font-size:11pt; text-align:left; /* bottom padding clears the #footer */ font-family: Arial, Helvetica, sans-serif; color: #666666; line-height: 18px; } #footer { position:absolute; /* positions #footer at bottom of #wrapper */ bottom:0;left:0; height:80px; width:990px; background:#999; } .style1 { font-size: 36px; color: #66FF00; border: 1.5px dashed #666666; padding-top: 8px; padding-right: 8px; padding-bottom: 12px; padding-left: 8px; background-color: #999999; } #right_main { background-color: #009900; width: 440px; padding-top: 110px; padding-bottom: 80px; float: right; padding-left: 5px; margin-left: 22px; } </style> </head> <body> <div id="wrapper"> <div id="header">Content for id "header" Goes Here</div> <div id="left_main"> <div id="right_main"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 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 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <p>mako reels</p> </div> <div class="style1" id="footer">copyright</div> <!-- #footer sits inside the #wrapper --> </div><!-- end #wrapper --> </body> </html>
-
Eric I will see if I can replace the p with my left_content div and see what happens. Although I think I tried that already. Does my left_content div have to have special properties to interact properly with the footer below it? Do i need to add the padding properties from p to my left_content div etc.. I'm way out of my league with the whole sticky footer solution. But I cant go back to learning layouts knowing my static footer will not work for the site I had in mind. Ant
-
Guys, thanks for all your suggestions. The one I tried to use was this one ( http://www.visibilityinherit.com/code/stickyfooter-technique2-example.php) BECAUSE it uses the position relative and absolute. When they don't and I go in and try and change them to specify the positioning everything gets screwed up. The first one I tried was the one that was posted in this thread : http://www.visibilityinherit.com/code/sticky-footer-demo.php When I tried to add my positioning etc it fell apart. I know what I'm asking for is difficult because I do not have a good handle on all of it. So I can take a sticky footer code and use it but it's really way above my skill level and so it's difficult to rework it to fit my needs. But I think thats the best way for me to learn it. I'll read it again and try and understand how it's doing what it's doing. Ant
-
I have been trying to get various sticky footers to work on my sites foundation. Without it I cant continue with the layout and LEARNING css etc. So far I'm using code which I found on a link on this site: http://www.killersites.com/forums/topic/1490/position-footer-so-that-it-does-not-scroll-up-the-page/ My problem is when I began learning this stuff I got as far as using wrappers with relative pos. and all my other divs with absolute pos.. That to me was the easiest way to do a layout with css pos. I came to a stopt once I realized my sites should at some point incorporate a dynamic style and be able to grow vertically as content grew. i realized my static div layout would not work. Enter the sticky footer. I have been trying to incorporate a sticky footer solution into what I have learned so far, but I just cant get it to work with my limited knowledge. Here's what I have so far as a TEST to try and learn it: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[url]http://www.w3.org/TR/html4/strict.dtd[/url]"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>{ visibility: inherit; } Sticky Footer Technique #2</title> <style type="text/css"> * { margin:0; /* zero out margin */ padding:0; /* zero out padding */ } html, body { height:100%; /* gives layout 100% height */ overflow:inherit; /* triggers 100% height in Opera 9.5 */ background:#333; } #wrapper { min-height:100%; /* gives layout 100% height */ width:990px; /* centers #wrapper */ position:relative; /* positions the #footer relative to the #wrapper */ background:#CCC; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #header { position: absolute; width: 990px; left: 0px; top: 0px; height: 100px; } #left_main { background-color: #666666; width: 500px; position: absolute; left: 0px; top: 100px; } * html #wrapper { height:100%; /* IE6 treats height as min-height */ } p { font-size:1.8em; font-weight:bold; text-align:center; padding:200px 0 80px; /* bottom padding clears the #footer */ } #footer { position:absolute; /* positions #footer at bottom of #wrapper */ bottom:0;left:0; height:80px; width:990px; background:#999; } .style1 { font-size: 36px; color: #66FF00; } </style> </head> <body> <div id="wrapper"> <div id="header">Content for id "header" Goes Here</div> <div id="left_main"> <p>Content for id "left_main" Goes Here</p> </div> <p># div</p> <div class="style1" id="footer">copyright</div> <!-- #footer sits inside the #wrapper --> </div><!-- end #wrapper --> </body> </html> What is throwing me is this " <p># div</p> " I know it's doing something to help the sticky footer, but I don't understand why someone chose to use the p tag as part of the solution. So I then tried to replace it with a class called .push with the same padding etc. applied to some text. I figured i would replace it because I thought it was proper to use the p tag as my main body copy throughout the site which i would restyle with css. Every time I try and add my left main content div inside the wrapper and I add random text to it, it goes PAST the footer and doesn't push it like the p text in the wrapper does.All i want is my left content div to have a pos of absolute, give it the position in pixels down from the header and a 0 left position. I plan on doing something similar with the right content div. The problem is I'm not understanding the relationship between the 2 divs i want to add (#left_main and #right ) and whats happening when i place them INSIDE the wrapper and how they interact with " <p># div</p> " It seems ( I know I'm probably wrong and it's much more involved) like the p tag is forcing the footer down with it's padding. BUT I want my 2 divs to force it down, not the p tag in the wrapper. Thanks Ant
-
What about the status, amount of time the site has been live (1.5ys) of the old site. Will that be lost? Ant
-
I helped my friend create his website about 1.5 years ago. At the time I was not responsible for the actual web design end. Now since i have learned the skills to do it myself, I would like to redo the site. If I do this what will happen with his ranking on the web. In other words will the new site have to be re-indexed(not sure of terminology)by search engines etc. to be high up on the list in the field he covers? Will he be starting from scratch? Thanks Ant
-
I think it depends on what you are interested in and what you naturally gravitate towards. I'd say that a "professional" web designer should be expert with front end production (CSS, HTML, some Javascript) and should know some basics about both design and programming PHP or similar (ASP.NET, etc). Especially now-a-days with CMS's like Wordpress, people do expect web designers to know a content management system and be able to work with it, so some programming knowledge is definitely helpful there. However, I don't think people expect that you are going to be an expert at everything. Similarly, a web developer -- someone who works with dynamic languages like PHP and has knowledge of how databases work and how to interact with them -- should be expert at that, and should have very good knowledge of HTML/CSS, but may not know that much about design. Basically, pick an area to specialize in, and then have at least basic knowledge everywhere else. Most people fall into either a web designer or a web developer category, but there are some that are good at both. If you do try to be good at both, you really have to have the time to put in to learn everything, and be the type of person who is both good at the designing/creative aspect and the coding/logical aspect. thanks Falken. I didn't realize there was a difference between web designer & web developers. I thought they were the same. So a web developer is a web designer that also knows programming? Programming to mean being other than HTML/CSS/Javascript? So far in 3 possible websites I may get involved in, 2 have already inquired about making changes themselves. These are not high end companies,(all friends websites) but still it's frustrating that I cant give them what they want because I havent learned how to allow them to make changes themselves. I can only assume in the DISTANT future(due to my learning curve) all I'm going to be asked for are dynamic websites. Is there a term that describes a web designer thats also a graphic designer? I know that sounds like a stupid question. I always thought that web designers were not necessarily graphic designers. Do you think that's norm? Ant
-
So far I have gotten a very good handle on CSS and html. My next obstacle is understanding what the FULL STORY is on a dynamic website. I want to understand what it takes to build one. Is it more of a programmers language? Should I be using some of those "shortcut" options i.e http://www.iUpdateIt.com. Do the majority of "professional" web designer learn PHP etc or???? For instance my company uses a web designer who also works with a "database guy" as he's referred to. I assume thats the person responsible for allowing our editors to change stories each day and photos. Whereas the web designer is the one who designed our site through HTML but is not schooled in dynamic site design to do the whole thing himself. Is it common for a web designer to know both. Or is it common to work with a database person to bring client side changes to the table. All these questions stem from how much time it has taken me to learn css/html and to then realize that I still need to learn dynamic design, javascript etc... I've been a graphic designer for 11 years and still learn a lot each day. I cant imagine the time it takes to be both a graphic designer and a COMPLETE web designer. Thanks Ant
-
Thanks, I see what they say.
-
--not sure where to post this-- In my company we use a data entry link to update our site. Recently our site has been moved to another server. Presently we are only able to access the data entry page sporadically. It seems for no reason one of us in the office will all of a sudden be able to get on. I was able to get on once this morning, then I got the error 500. "500 - Internal server error. There is a problem with the resource you are looking for, and it cannot be displayed. " From then on going to the login link brings me directly to the error page. No login window. Our tech/web guy is able to get on. He said he believes it may be "a delay in the web caches in certain areas" Does that make sense to anyone? I restarted my computer, emptied the cache, messed with my password settings (remember /do not remember) in both firefox/safari, tried it on a PC, tried it outside our office etc. Nothing seems to rectify the situation. A.
-
Ok, thank you. I'll have to look up dynamic content and see how that pertains to web pages and my layout. Ant
-
Thanks I will see if i can make that work. One question. Why doesn't the BOTTOM placement position of "0" work on an absolute pos. footer inside the wrapper div with a pos. of relative? NOTE: I made a mistake in my first post and switched the relative/absolute value in my statement here"Why cant I just place the footer div relative to my absolute pos. wrapper and give it a pos. setting of 0px bottom and 0px left ?"
-
I am trying to get a footer to STICK to the bottom of my wrapper div that expands with the content inside it. I searched and all I keep finding are solutions that are NOT (layout wise) set up the way I have my site set up(All content auto centered with a 900px wrapper) and I keep running into solutions that change my current css/html layout. The main problem is I'm not advanced enough yet to make it (the solutions I've found) work in my layout. I don't expect someone to try and explain the FIX to me. I've seen some of them and they are all complicated to someone who has just started learning this. Why cant I just place the footer div relative to my absolute pos. wrapper and give it a pos. setting of 0px bottom and 0px left ? The relative, 0 left, 0 Top works for all my other divs. It seems logical that it would work with 0 Left, 0 Bottom on my wrapper to get the footer to stick to the bottom of my wrapper and follow it as it expands with the content. I believe i tried that but it didn't seem to work. BTW if I felt the artistic freedom, i would do away with the traditional footer all together. But that could be misconstrued as an excuse to not learn how to do it the right way. Maybe after I learn it I will do away with it. Thanks Ant
-
deciding between divs within divs/ tables within divs
Ant replied to Ant's topic in Beginners Web Design
Thanks guys. I'm starting to get it a bit. What i did is since I removed the table from my center content div I had to add a floated left div and floated right div. I thought that was not as simple as a single table element, but I don't know of any way to SPLIT one div into 2 columns. My next problem is trying to figure out how to keep my footer at the bottom of my centered layout and STUCK to the bottom of my wrapper div that expands with the content. I'll post separately for that. Thanks again, Ant -
I know I keep reading that tables are for tabular data, but what is considered tabular data. I have 4 divs so far. in my TEST site to learn this stuff, wrapper/header/nav/content. Now I want to create more divs OR tables inside the content div. So if my content area will include images etc wrapped with text should I use a table with say 3 columns or another div. The same question goes for say a directions and hours text area in the header. Do I use a table or another div. inside the header. If I was to have one image say in the header and no text would I use another div or just use the header div to hold the image. Same question if it was just a paragraph of text inside the header. Are there rules somewhere that help me determine what to do when? Thanks Ant
-
Well I figured out why it was so out of wack. I was missing a tag at the end just before my closing container div. Somehow it still looked correct in the browsers. Well at least I'm starting to grasp this stuff. Thanks Ant
-
Thanks. I cant believe DW has such a bad flaw like that.
-
I'm going through the motions of learning css and basic page building. I'm using DW8. I am practicing my positioning, images text etc. Why is it that in my dreamweaver DESIGN view all my DIVS are not lined up and contained in my wrapper div, but when I preview it in firefox etc everything looks (correct) like what I am trying to recreate. Basically in dreamweaver my nav/content/right column/(divs) are lined up BUT offset to the right of my header div. It's really not helpful to look at the design view if all those divs are shifted incorrectly. Also my nav overlaps my header by a few pixels on the DESIGN view but everything is lined up properly in the browser preview. I cant help but think this is NOT a DW glitch but instead my error. But then why would my browser preview be correct. Ant