|
CSS - Looking For An Html/css Editor. Suggestions?
Similar TutorialsHey, everyone! I was wondering if someone could advise how I could vertically center this page using CSS. I'm trying to create the look of gotgosh dot com but in CSS. Thank you! Kyler Here's the CSS code: * { margin: 0; padding: 0; } body { background: #666666 repeat-x; color: #000000; } #center { position: absolute; width: 100%; float: none; } #outercontainer { width: 760px; margin: 0 auto 0 auto; } #menu { height: 70px; background:#FF0000; } #container { position: relative; height: 500px; overflow: auto; border: 10px solid #FFFFFF; background-color: #FFFFFF; } #barst { height: 20px; width: 100%; background: #00FF00; } #barsb { height: 20px; width: 100%; background: #00FF00; } Here's the HTML code: <head> <title>enter title here</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta http-equiv="Content-Language" content="en-gb" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="center"> <div id="barst"> </div> <div id="outercontainer"> <div id="menu">---- HEADER --- -----------------</div> <div id="container"> <p>Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.<br /> <br /> Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.</p> </div> </div> <div id="barsb"> </div> </div> </body> </html> I have a design that I need to slice out. I had done this previously making the logo (the cocktail glass/flag/name/ball and green) in a sep div using a .png background and z-index layer for positioning. The problem is, in IE it came up with the ActiveX prompt to present, and in FF, It didn't show up. What I'm trying to do is, keep the dropshadow on the logo over the rest of the imagery. Am I over thinking this??? http://www.rustbug.com/the19thhole/index.html I don't really have a designers eye, so stuff I make tends to look like crap, but I try and make sure it's fuctional. I have a quick thing I made for an internal project at work, but need some suggestions on the design. It's mostly CSS based, but right now I see at least one problem with it: The side bar is positioned using fixed positioning, so if I fill up the bar, the stuff that falls off the end won't be available anymore. I don't want to use overflow: auto/scroll because it would make a nasty scrollbar in the middle of the page rather than on an edge. My server isn't working right now so I can't upload the copy of the page/css I made to it, so I will attach a zip file of the files. Any suggestions for improving this so that the problem I see is elimated, but a decently looking page still exists would be appricated. Hello, I have attached my zip file and this is my first attempt on CSS2 (plenty of comments in the code), if some could look at it and recommend any suggestion and why that would be TERRIFIC. My main question is, what happens if the is say...4-5 paragraphs of text on the home page, under "Company Overview", the page then looks stupid, how do i extend the containers around the #middleContainer so that it looks intact. If you want to see the page it is also accessible at http://awo.loadedtechnologies.com/ Thanks you for your Help Hi, This is my first CSS layout. I would like to know if there is a better way to code this or what improvements or changes should be done. Thank you, Lutek <html> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css" media="screen"> body { margin-top: 0; text-align: center; background-color: #d30000; } #container{ margin: 0 auto; width: 650px; height: 800px; text-align: left; background-color: #FFFFFF; } #header { float: left; width: 100%; background: #FF9900; } #box-left { float: left; width: 33.3%; background: #FF0000; } #box-center { float: right; width: 33.3%; background: #ffff93; } #box-right { float: right; width: 33.3%; background: #ffff93; } #footer { float: left; width: 100%; background: #FF2200; } </style> </head> <body> <div id="container"> container <div id="header">header</div> <br> <div id="box-left"> box-left</div> <div id="box-center">box-middle</div> <div id="box-middle">box-right</div> <div id="footer">footer</div> </div> </body> </html> http://www.mihomeanddesign.com/test/ I was hoping someone would have a suggestion as to how to lay this site out without using absolute positioning for the #mainimage div. I know that I could float it right within the main wrapper, but I also want the top nav and the footer to extend 100%. I want to do this to avoid having to put "style="padding-bottom: 423px; " in every <p> at the bottom of the page if there is not a lot of text on it... like on the home page and the contact page. Any suggestions would be greatly appreciated. Can someone please recommend me a decent CSS WYSIWYG editor. I've been using DW2004MX, which is useless at rendering more complex CSS layouts. Cheers. I'm looking for an easy to use WYSIWYG editor that works in CSS. In my admin (back end) panel right now, I'm set up with a regular editor that works with tables and I want to switch that out for a CSS editor. Two things to consider here....I have no CSS experience so I'm hoping that there's something out there that's as easy to use as TinyMCE which is what I have currently. The other point to consider is that I have no dynamic content on these pages. They are just simple and straight forward. Can anyone recommend something? Thanks! I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page. My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! I'm trying to create a "sticky footer" as described in css-tricks.com. When I enter -150px, it is "greyed out". If I delete the -, it's OK. Using Bluefish. The code for the sticky footer doesn't work w/o the -150px value. Any ideas why negative values are not being accepted? Can't find any postings that mention this problem anywhere. Anyone know of a good javascript ,DHTML editor for stylesheets. I need to allow users to build a limited addition to the default stylesheet and would like to find something so I dont have to code from scratch. Hi, Im interested in finding an app to create the layouts of my web in a visual way, you know creating the divs with the mouse dragging and droping the corners and the laterals of the divs. I have found Kompozer, but the position, the margins, etc, of the divs that you dimension, go directly to the HTML code (inline styles). Do you know any visual css editor that writes the dimensions, margins and position of the divs in a .css file? Ciao Hi, I would like to make a html 'button' tag of 'submit' type look and behave like a html hyperlink. (For those who would be curious, the reason is that I want to pass a variable to the target script, using the post method rather than appending a name-value pair to the hyperlink url, while keeping a conventional presentation. In the end, it should make the passed variable less visible for the end user, except of course if they look at the source code and look for a hidden input). I considered to use the CSS2 system colors codes, but I did not find a code for hyperlink, and anyway, system colors will be deprecated in CSS3, so it is no good idea if I want to make my pages portable in the far future. I tried to use the appearance property from CSS3, but it does not seem to be wel implemented yet in current browsers. For now, I just styled my html button, removing border, and setting the background and foreground colors to something similar to an hyperlink, but then I have no guarantee that this will match the actual look & feel in the end user's browser. Any hint or suggestion ? Hey guys. I am having trouble getting a column to go the full length of the page. Here is a link to the page http://www.tjshafer.com/projects/ca...me/subpage.html I have marked in the page where the table is that should have a height of 100%. Also here is the section that needs to be 100%. This is the td which has the code in it, Code: <td id="leftcell" valign="top" height="100%"> <!--begin table for menu which includes background--> <table border="0" cellspacing="0" id="menucell"><tr><td width="247" valign="top"> <!--begin menu table--> <table cellspacing="0" id="menuitems" border="0" width="159"> <tr><td> </td><td id="menuheader" align="left" width="159" style="line-height:12px"> <br>CONTEMPORARY<img src="images/menu_underline.gif" width="159" height="1" alt="menu cell bg"><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Sofas & Chairs</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot" border="0"> Casual Dining & Bar Stools</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Bedroom</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Home Entertainment</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Home Office</a><br><br> WICKER & RATTON<img src="images/menu_underline.gif" width="159" height="1" alt="menu cell bg"><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Sofas & Chairs</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Dining</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Bedroom</a><br><br> OUTDOOR<img src="images/menu_underline.gif" width="159" height="1" alt="menu cell bg"><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Aluminum</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Cast Aluminum</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Wrought Iron</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> All Weather Wicker</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Wood</a></td> </tr> </table> <!--end menu table--> </td></tr></table> <!--end table which includes background--> </td> I tried adding height="100%" everywhere i could think. Any help would be greatly appreciated. hey guys i didnt know what to do so came here to ask im making just one web page, i have done all the coding and everything is set it works fine in Firefox and works fine with IE7 and IE8.... but i am having problems with the page when i open with IE6 help would be appreciated as a new user i cannot add webpage link anyone who is interested to help i can PM them the webpage or here im adding webpage hope i dont get banned for this linux103.mysite4now.net/desimafia/test2/tvshows.htm view it in IE6 and you will know the problem thanks Im not certain whether or not this is an HTML or CSS problem, or if its just a bug i will have to live with. I cannot for love nor money get IE6 to use my specified link colors... ---------FROM MY CSS SHEET--------------------- a:link { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #FFCC33 ; } a:active { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #FFCC33 ; } a:visited { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #FFCC33 ; } A:hover { background-color: #FFCC33 ; color : #000000 ; font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; } a:hover img { background-color: #000000; } A:link.noback { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #000000 ; } A:active.noback { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #000000 ; background-color: #000000 } A:visited.noback { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #000000 ; } A:hover.noback { color : #000000 ; background-color : #000000 ; font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; } in Firefox, this is all displayed as I want it to be, but in IE6, I get pants defaults. I have been able to remove the initial color by adding <Body link="000000"> to the body, but, that doesnt seem like a complete solution. I have spent all morning at work (nice job i know) trying to figure this out, and have had no joy... I bow to the infinate wisdom of the masses. how would i convert: <table border="1" cellspacing="0" style="border-collapse: collapse; text-align: left; border-style: ridge; margin: 0; padding: 0" bordercolor="#111111" width="779" id="table3"> <tr> <td width="649"><font face="Small Fonts" color="#666666" style="font-size: 20pt"> <img border="0" src="Banner1.jpg" width="649" height="92"></font></td> <td width="174"><font face="Small Fonts" color="#666666" style="font-size: 20pt"> <img border="0" src="Banner2.jpg" width="167" height="92"></font></td> </tr> </table> to simple CSS code? I tried doing that all in one style and nothing worked! I am not sure if something like the attached should be put in an html table or done with css positioning. Any thoughts? |
|||||||