|
CSS - Self Taught Noob - Css Advice
Hello,
I'm a self taught web designer, i've not really got much experience of CSS and i'm having a few issues with some alignment. I'm in the process of developing a site for my cousin, what i'm trying to achieve is the left menu to be at the top of the page, and the text to be in the center of the screen, as i'm new here i'm not able to post a link to my site, so have posted the CSS below. Playing with css and looking at Google I've padded the text so its where i want it, but i can't get the menu to come up from below the text. Any help / links in the right direction would be really appreciated. Code for the text: Code: p.mainbody
{
z-index: 1000;
vertical-align:top;
padding-left: 200px;
padding-right: 250px;
text-align:left;
code for the menu: Code: /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
vertical-align:top;
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 10em;
/*height:10em;*/
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{ z-index: 1000; }
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 10em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; }
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li { width: 8.sem; }
/******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical { border: 1px solid #CCC; }
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul { border: 1px solid #CCC; }
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: #33C;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}
/******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
float: left;
background: #FFF;
}
}
Many Thanks Similar TutorialsIm in the process of teaching myself CSS and thought id come here to get some help when I need it. (I'll probably be on 24/7) Ive come across a few hiccups, perhaps because ive done this the hard way and just tried to create CSS files before ive even read anything about them! Obviously I have a good understanding of HTML, and im not sure why I havent gotten into CSS earlier. Maybe because I have only ever created websites for personal use. Hmm... maybe I shouldn't share this but I am terrible for stealing templates and HTML for different things and modifying them as my own. Okay so ive never published any online as yet but still I know its a bad habit!! So does anyone out there have any tips for me, the idiot who tried to teach herself CSS??? Hi Guys, I've had a hunt around the forum but haven't yet found anything too specific, so here goes... Basically, I have a design all done in photoshop and ready to be physically created in CSS, no problem there, I can do that. However, I really need to be able to implement some content management into this site and am a little stuck on the best way to go. I've been on google and looked at solutions, downloaded Joomla so far, but this looks like it could be very difficult to get my design into it, so to speak and I'm not so hot on PHP. The templates in Joomla seem quite complex and look nothing even close in layout to my design! Does anyone have any advice on a good CSS based CMS (ideally free!) that I can easily integrate my own design to? If anyone has any experience or advice on doing this, it would be much appreciated. I don't need to be able to do anything massively complicated, just apply my own design, with some content pages, news etc. Any advice/suggestions, very much appreciated! Thanks Jon Hello i am new.. I basically need help with a css pop up.. i dont know nothing about coding.. I just used the method on my myspace profile. Its just a simple.. thumbnail display a large image when mouseover. It all works fine but FF and IE both put a border around the thumbnail and large images. I think its maninly because my method is also linking th ethumbnail back to my page.. i want to get rid of that too but don't know how. Anyway this is what i have.. Code:
a.class1:link,
a.class1:visited,
a.class1:active{color:FFFFFF;
font-family:georgia, verdana, tahoma, sans-serif;
font-size:0px;
text-decoration:none;}
a.class1 span{display:none;}
a.class1:hover span {display: block;
position: absolute;
top: 120px;
left:0;
z-index: 5;
filter:none;
color:FFFFFF;
background-color:transparent;
filter:none;
font-size: 0px;
font-family:georgia, verdana, tahoma, sans-serif;
text-align: center;
text-decoration:none;}
and the in the div contents obviously this.. Code: <a href="url-2-my-profile"class="class1"><img src="thumbnail-url"/><span><img src="large-image-url"/></span></a> I know i don't need all that font stuff since i have removed this and that and it still works.. but i just want to know how to remove the borders.. even if i remove the colour codes it will still default a colour border. So i just want simply image pop up without borders and without needing to link the thumbnail to a url. Thanks I want to start using em to specify widths and heights, specifically because of the fact that it correlates with the font size. However, the problem I'm having is that I have no idea what the conversion between % for width and em would be. I'm not worried about height in this fashion, simply because vertical scrolling isn't ugly, but if I specify too high of an em for width, that makes a layout span the entire page for my browser, someone else might not have the same effect, and thus scroll horizontally. Should I just stick to use em for height and % for width? I really want to use em though...need advice on this. Hi all probably a stupid question but i cant find the answer i am making a site and when i zoom out in the browser the page sits to the left, how do i make it stay in the center Cheers Hi, i'm new to CSS, started yesterday! And have overcame some problems, but have got some problems i cannot solve.. I know that there are several errors in the code below, like doc type but i dont think that is the problem. Basically i am trying to make the main container centre in the middle of the page at 80% width, then i want the container to have a minimum width of 400px. This works perfectly in Firefox, but neither seem to work in Internet Explorer 7. Any help guys? Code: <html>
<head>
<style type="text/css">
div.container
{
position: absolute;
width:80%;
min-width:400px;
margin:0 auto;
top:0;
bottom:0;
left:0;
right:0;
border:1px solid gray;
line-height:150%;
}
div.header
{
padding:0em;
color:white;
background-image:url(bg.jpg);
background-repeat:repeat-x;
clear:both;
}
div.left
{
float:left;
width:100px;
margin:0;
overflow:auto;
}
div.right
{
float:right;
width:100px;
margin:0;
overflow: auto;
}
div.content
{
margin-right:100px;
margin-left: 100px;
border-right:1px solid gray;
border-left:1px solid gray;
padding:1em;
}
div.footer
{
color:white;
background-image:url(bg.jpg);
background-repeat:repeat-x;
text-align:center;
clear:both;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="12%"><img src="bg.png" width="90" height="90"></td>
<td width="88%" align="right" valign="bottom"><img src="title.png" align="right"></td>
</tr>
</table>
</div>
<div class="left"> Menu</div>
<div class="right">
hello
</div>
<div class="content">
<h2>heading 2</h2>
<p>the paragrapth under heading 2</p>
</div>
<div class="footer">Copyright footer</div>
</div>
</body>
</html>
Hello, I am working on a web site with a two column layout, "Content" on the left and "Sidebar" on the right. Sidebar 1) Sidebar is divided into sections (div). Each section has header. Content Content can display the following data (each is a different page): 2) In HomePage.html a list of blog articles is displayed. Each blog article has a title. 3) In ShowArticle.html a specific article is displayed (Title, Body, Tags). 4) In Documents.html a list of documents is displayed but in this case the page has a title and a subtitle. For example: Documents here you can find all the documents you need. 5) In Contact.html a title with subtitle is displayed just as in (4). After the title and subtitle there is only paragraphs with the contacts. So basically that's it ... I am trying to figure the correct way to use <h1>, <h2>, etc. The text font, weight and color is always the same ... what changes is the size. For example, if in HomePage the Post Header could be <h1> because there is no page title, in Documents there is a page title and a subtitle (should be this a paragraph? it's more like a description phrase then a section separator). So in Documents each Document could have <h3> ... And if there is a Page Title (h1) then should side bar have <h2>? I suppose it is more correct to be h1.Sidebar. And in ShowArticle I am displaying one article. Should I use the <h1> in the title? Then it would be the same tag then in Sidebar section ... I have been looking in a few web sites and blogs and they differ ... Anyway, I am just trying to make this right ... Any help is welcome. Thanks, Miguel Hi all, I have modified a wordpress theme for my website and its nearly perfect except for an issue where my photo is being cutoff and I have had a look but it appears to be beyond my skill level and is making me pull my hair out. Would REALLY appreciate if anyone can solve this one for me! hmmm I cannot post the url yet as i am new dubdubdub.lightwork.co.nz/?p=1 is the url please replace dubdubdub with www thanks that is the url and its the second image down, the larger image. It works fine in firefox and ie7, but in ie6 (which it needs to work in it is being cutoff as you can see. Any help would REALLY be appreciated. happy to do something in photoshop or whatever in return Mark Would you all please peek at this layout, www.tmhdesign.com/buzza.jpg and give me some advice on the structure you'd use. I see a two column layout with a footer and header. I did not lay this out but rather it was given to me by a clients' graphic artist. I am curious to know if you think it will work. I am a bit challenged with the bottom swoosh that is in both the left hand column and the right main body. The designer has main body text going into what I would think would be the footer area? I had posted in another thread about this but it's been awhile and I am not sure if that thread is still "alive" so to speak. Here is what I am after - www.tmhdesign.com/buzza.jpg Here are my attempts: www.tmhdesign2.com www.tmhdesign2.com/default2.asp www.tmhdesign2.com/default3.asp I have come close in IE but in Firefox it bombs. I can't fathom how that bottom background can be positioned so the text in the navigation and content divs can sit on top of it. Hello, Here's the site, it's being built on a CMS called Sitestaker. http://www.mera.sitestacker.com I can't for the life of me fix all the messed up positioning. here is my CSS. I used another CSS file from a previous site, so there are duplicates and who knows what else I am missing so I can easily lay this thing out. Where can get some CSS templates that I could use to start out a new site. the cms is using Cake PHP if that helps any. I am not a programmer and it is driving me nuts attempting to do the job of one. thanks for your help. I have managed with my other sites, but I can't fix this one. www.theinlan.com Code:
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 16px;
color: #666;
background-color:#FF9933;
margin: 10 10 10 10;
}
#header {
background-color:#FFFFFF;
margin-right: auto;
margin-left: auto;
width: 1000px;
height: 133px;
}
#header_right{
}
#search {
width: 150px;
margin-left: 10px;
float: right;
}
#header_container {
background-color:#cc6600;
width: 800px;
margin-left: auto;
margin-right: auto;
}
#header_wrapper {
width: 100%;
margin-right: auto;
margin-left: auto;
height: 133px;
background-color: #cc6600;
/*/#cc6600/*/
}
#menu_wrapper {
width: 900px;
/*/background:url(images/mera_slice_09.jpg) repeat-x;/*/
margin-right: auto;
margin-left: auto;
}
#menu {
background-color:#333333;
width: 900px;
padding: 10px 0px 0px 0px;
font-size: 14px;
font-weight: bold;
}
#menu .item {
float:left;
width: 120px;
margin-right: auto;
margin-left: auto;
height: 30px;
padding-top: 13px;
text-align:center;
}
#menu a {
color: #666666;
text-decoration:none;
}
#menu a:hover {
color: #CCC;
}
#menu .main_menu {
float:left;
}
#breadcrumbs {
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
font-family:Verdana, Geneva, sans-serif;
font-size: 9px;
color: #666;
margin-left: auto;
margin-right: auto;
width: 750px;
}
/*/#r1c1 {
width: 100%;
height: 38px;
}/*/
#r1c1 {
background-color:#CC9966;
/*/Dan's New Stuff/*/
width: 180px;
float:left;
/*/ width: 800px;/*/
/*/padding: 40px 0px 0px 20px;/*/
font-size: 14px;
margin:30px 10px 10px 10px;
padding: 10px;
/*/font-weight: bold;/*/
}
#r1c1 .item { /*/ controls positioning of menu items & text/*/
width: 175px;
height: 30px;
text-align:middle;
background:url(/data/sites/34/images/merabutton.png);
background-repeat:no-repeat;
padding:5px 0px 0px 0px; /*/controls positioning/*/
}
#r1c1 a { /*/ this is the menu font styling/*/
color: #333333;
text-decoration:none;
padding:5px 0px 0px 10px;
}
#r1c1 a:hover { /*/ this is the menu button hover color/*/
color: #999999;
}
#r1c1 .main_menu {
}
#r1c2 {
margin-left: auto;
margin-right: auto;
width: 640px;
}
#r2c2 {
padding: 15px 0px 15px 15px;
margin-left: auto;
margin-right: auto;
width: 700px;
float: left;
}
#r3c2 {
margin-left: auto;
margin-right: auto;
width: 750px;
}
#r2 {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#r4 {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#r2c2 .title {
font-size: 24px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight: bold;
line-height: 40px;
}
#content_area {
background-color: #e6ebba;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
#content_bg { /*/ white content area with dropshadow edges/*/
width: 1275px;
margin-left: auto;
margin-right: auto;
background: url(images/me) repeat-y ;
/*/height: 1000px;/*/
/*/padding-left: 40px;
padding-right: 45px;
}
/*/
#mainpositions{ /*/ look at tables created in index to see how it was done
tables ,once formatted work the best to hold together
two column layout accross browsers./*/
width:900px;
margin-left: auto;
margin-right: auto;
}
#footer_wrapper {
/*/
background:url(images/mera_slice_02.jpg) repeat-y;
width: 100%;
margin-top: 0px;
position: bottom;
/*/
}
#footer {
background:url(/data/sites/34/images/footer.png) repeat-x;
/*/width: 100%;/*/
margin-left:auto;
margin-right:auto;
/*/ color: #FFF9933;
text-align:center;
padding-top: 30px;/*/
height:369px;
}
#r3c1 {
padding: 10px 10px 10px 10px;
}
#r2 {
}
.cells {
padding: 10px 10px 10px 10px;
vertical-align: top;
text-align: left;
}
#menu .style .menu .submenu_item {
background: url(images/dropdown.png) repeat-x;
height:27px;
text-align: left;
font-size: 12px;
padding-left:10px;
padding-right:14px;
padding-top: 10px;
width: 900px;
cursor: pointer;
}
#menu .style .menu .submenu_item_children {
}
#menu .style .menu .submenu_item:hover{
color: #ccc;
}
#menu .style .menu .submenu_item:hover > div > a{
color: #CCC;
}
#menu .style .menu .submenu_item a {
text-decoration:none;
color:#6699FF;
}
.submenu_item, .submenu_separator {
display:none;
position:absolute;
}
HERE IS THE INDEX FILE PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>{{PAGE_TITLE}}</title> <base href="{{BASEHREF}}" /> <link href="{{CSS_HREF}}" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript" src="{{JS_SRC}}" ></script> <style type="text/css"> <!-- body { margin-left: auto; margin-top: 0px; margin-right: auto; margin-bottom: 0px; } --> </style> <meta name="verify-v1" content="mQhyWuqXn58ls4L3sIdz1oujvxtwMSi8YIWGW8HPAGg=" /> {{HEAD}} </head> <body> <div id="header_wrapper"> <div id="header_container"> <div id="header" tpl_position="header">{{HEADER}}</div> <div id="header_right" tpl_position="header_right">{{HEADER_RIGHT}}</div> <div id="search" tpl_position="search">{{SEARCH}}</div> </div> </div> <div id="menu_wrapper"> <div id="menu" tpl_position="menu">{{MENU}}</div> </div> <div id="content_area"> <table id="content_bg" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div id="breadcrumbs" tpl_position="breadcrumbs">{{BREADCRUMBS}}</div> <div id="r1c1" tpl_position="r1c1">{{R1C1}}</div> <div id="r2c2" tpl_position="r2c2">{{R2C2}}</div> <div id="r3c2" tpl_position="r3c2">{{R3C2}}</div> </td></tr> </table> </div> <div id="footer_wrapper"> <div id="footer" tpl_position="footer">{{FOOTER}}</div> </div> </body> </html> Hi folks. I need some help with css. I have a wordpress template that has a thumbnail populated on a home page. The problem is that it looks like this: URL http://i55.tinypic.com/aoulhf.png and what I would like it to look like is this : URL http://i55.tinypic.com/2wd22r8.png And the code of the page is he Code:
<strong><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></strong><br>
<?php get_the_image( array( 'image_scan' => true,'width' => '75', 'height' => '75' ) ); ?><?php the_content_limit(80, ""); ?>
I know I should use DIV tags and css but I don't know how. Please ,anybody help. Thanks Hi, I am quite familiar with css - have a few books on the subject but always struggle when trying to work with a design of my own. I guess where I struggle is in what to do first ... how do I work ... my work flow. I always seem to get part of it right but then as I go further ... I find that my next step might undo my previous ... so I end up with a maze or positioning problems etc. I struggle with getting everything positioned properly ... not sure why. I was hoping someone could start me off in the right direction ... you a what to do first series of steps ... or maybe a workflow from someone more exprienced in the design area of things - I'm more of a backend kinda guy. Really anything would help ... Thanks okay i want to make myself a website and to make it decent i seem to need to know HTML, PHP, CSS etc etc :s it all seems really hard i know quite a bit of macromedia flash and i know quite a bit of html but i am all new to CSS and PHP. CSS from what i can gather is what i need to know and i don't have a clue about it can somebody give me a link to an easy tutorial for CSS? or if anyone knows where i can start? most tutorials i just end up giving up on because i just can't be bothered reading any further thanks fir reading this i just need to know the basics so i can have a play around with and teach myself. Daz Hey all. I'm just starting out in web design. To make things even more complicated, I'm using CSS for my first ever website. So I'm building this website from scratch, using online tutorials and such. But I'm running into a problem. On a PC, everything displays perfectly in IE and Firefox. But on a Mac, the nav bar is stretched with dead space after the last list item. This is the same in Safari, Firefox, and IE for Mac. Would you guys give it a look and maybe help me around the issue? What I'd like is no dead space after the last list item on any computer, (if you're looking on a PC, it appears correct) and I want a fixed width. Site CSS Thanks. I am having problems with my footer once I resize my to make my page have to scroll left to right. It displays fine until I do this. It makes my footer background not display all the way. Here is my css for reference: Code: .footerWrapper {
margin: 20px 0 0 0;
padding: 0;
width: 100%;
background: url(../images/content123bg.png) repeat-x;
}
.footer {
margin: 0 auto;
padding: 0;
width: 960px;
height: 155px;
}
.footer img {
margin: 10px 0 0 0;
float: right;
}
.footer h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #09F;
text-decoration: none;
text-align: center;
padding: 10px 0 10px 0;
margin: 0;
width: 145px;
}
h3.facts {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #09F;
text-decoration: none;
text-align: center;
padding: 10px 0 10px 0;
margin: 0 0 0 -3px;
width: 145px;
}
.footer p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #CCC;
text-decoration: none;
text-align: center;
width: 140px;
margin: 0 0 0 2px;
padding: 0 0 5px 0;
}
.footer p a {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
color: #999;
text-decoration: underline;
}
.footer p a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
color: #FFF;
text-decoration: none;
}
#twitter_t {
margin: 0;
padding: 0;
}
#twitter_t img {
width: 150px;
height: 50px;
margin: 0;
border: none;
padding: 0 230px 0 0;
/* [disabled]float: left; */
position: relative;
}
#twitter_m {
width: 370px;
padding: 0 10px 0 0;
background:url(../images/twiiterbubble.png) no-repeat;
float: right;
height: 140px;
margin: -40px 0 0 0px;
border: none;
}
#twitter_container {
min-height:45px;
height:auto !important;
height:40px;
padding-bottom:10px;
/* [disabled]padding-right: 10px; */
}
#twitter_update_list {
width: 350px;
padding: 0 0 0 20px;
overflow: hidden;
font-family: Georgia;
font-size: 14px;
font-style: italic;
color: #000;
line-height: 16px;
font-weight:bold;
}
#twitter_update_list li {
width: 350px;
list-style: none;
margin: 60px 0 0 0;
}
#twitter_update_list li a {
color: #FFF;
border-bottom: dotted 1px;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #09f;
}
Here is my HTML: Code: <div class="footerWrapper">
<div class="footer">
<div class="fltlft">
<h3>Quick Links</h3>
<p><a href="http://www.beckin.com/">Home</a></p>
<p><a href="http://www.beckin.com/portfolio.html">Portfolio</a></p>
<p><a href="http://www.beckin.com/css-menus.html">CSS Menus</a></p>
<p><a href="http://www.beckin.com/free-templates.php">Templates</a></p>
</div><!-- end fltlft -->
<div class="fltlft">
<h3>Help</h3>
<p><a href="http://www.beckin.com/support/">Custom Quotes</a></p>
<p><a href="http://www.beckin.com/support/">Support</a></p>
<p><a href="http://www.beckin.com/support/">Webmasters</a></p>
</div><!-- end fltlft -->
<div class="fltlft">
<h3 class="facts">Facts</h3>
<p><a href="#">Privacy Policy</a></p>
<p><a href="#">Terms of Use</a></p>
</div><!-- end fltlft -->
<div id="twitter_t">
<a href="http://twitter.com/beckindesigns"><img src="images/top.png" alt="free web templates" /></a>
</div><!-- end twitter_t -->
<div id="twitter_m">
<div id="twitter_container">
<div id="twitter_update_list"></div>
<!-- end .twitter_container --></div>
<!-- end .twitter_t --></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/beckindesigns.json?callback=twitterCallback2&count=1" type="text/javascript"></script>
<!-- end .footer --></div>
<!-- end .footerWrapper --></div>
Any help with this would be very appreciated. I have a footer image on a site and I want to line up some of the text on the left and some of the text on the right. The relevant css footer code is this: Code: #footer {
clear:both;
background:url(images/footer.jpg);
width:780px;
height:71px;
color:#ffffff;
font-size:xx-small;
}
#footer .notover {padding-top:54px;}
The xhtml is this: Code: <div id="footer"> <div class="notover">All this stuff is left aligned 54px from the top of the image.</div> </div> Now, how do I add some text on the same line as the class="notover" text that is right aligned? I thought it would be as simple as creating another div that specified text-align:right; but the text shows up right aligned and way below the footer image. Thanks in advance. Hi, Im interseted in creating V.3.0 of my site in a css valid layout using Div's and Xhtml compliant code. I am vaguely familiar with this practice, however would like some preliminary feedback and advice on how to go about doing it. Here's a preliminary screenshot of my site in jpg. format, thanks. http://uberserver.ath.cx/~rohan/PS1.0.jpg Here's the main site (v.2.0) if you're interested. http://www.ubertropolis.tk Thank you! Hello, I am creating a form that includes a few JQuery scripts and TinyMCE Editor: http://www.27lamps.com/Beta/Form/Form.html I am having a few problems with my CSS: 1. Restyling the Select (a) When using IE the Drop Down List is on the right instead of on the bottom; (b) The current item in the list should have a different background color; (Please check the select on the bottom of the page to check these 2 items working fine. In this case I used a different class) 2. Error messages Please, submit the form. After the Name input you will get a error message. How can I make this message to not expand and still have the padding? And also having the text aligned left. One problem I am having with my form is every time I use a list inside my form somethings get "broken". This is because the form is using a list. What should be the best way to counteract the styles of the form list into a child list? Any suggestion to improve my form CSS would be great. Thanks, Miguel Ok, so I've done the w3schools.com tutorial on CSS and I still have some basic syntax questions. In my wordpress style.css I see the following entry: #featured-top .featuredpost img { background: #FFFFFF; margin: 0 0 5px 0; padding: 4px; border: 1px solid #DDDDDD; } Does this mean that these rules apply only to elements in this specific order? Like, in English, "rule applies to an img, that has a parent in the class featuredpost, that has a parent with id = featured-top"? If so, does the featuredpost class have to be defined previously or is this considered the definition? Second question, in the HTML I see this syntax: <div id="wpsb" class="widget wpsb_opt_in"> I didn't think you could have spaces in a class name. Or does this mean that wpsb is in 2 classes? When I search style.css I don't see the "wbsb_opt_in" class anywhere. Thanks |
|||||||