|
CSS - Need Advice On Css Conversion Of Image Slices From Html To Css
I am working on converting my site (http://www.thejokejukebox.com ) from html to css/xhtml . I am working on the header image. I've used Photoshop's image slicing routine to cut the photoshop image into smaller pieces and have outputted the css code for the images.
While this is mostly fine, Photoshop outputs css using absolute positioning. My goal is to have the header graphic displayed centered regardless of the screen resolution of the user. This is how the site appears now using html. On either side of the centered image is a filler graphic (bg.gif) that is repeated in x only. What approach should I take to accomplish this look in css? I've read a bit on using floating divs . Is this the route I should be looking at? If so, can someone give me a rough idea on how I can position the individual images to make the continous graphic within the floating div? As you can tell, I am very green when it comes to CSS, so your patience and time is appreciated. Similar TutorialsHi Guys I am using the script here to create so called rollovers on image maps/slices. Now I would like to keep those image slices but add 2 or 3 level menus to them, Can this be done Please help DD 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! yes i am a css n00b and am trying to place a sliced image (with a link in one slice) from a table (yes adobe) into a <div> like this... Code: <!-- display welcome div--> <div id="welcome"> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr border="0"> <td colspan="3"> <img src="images/welcome_01.jpg" width="536" border="0" height="99" alt=""></td> </tr> <tr border="0"> <td rowspan="2"> <img src="images/welcome_02.jpg" width="67" border="0" height="128" alt=""></td> <td> <a href="search.php"> <img src="images/welcome_03.jpg" width="124" height="107" border="0" alt="search viera florida real estate brevard fl"></a></td> <td rowspan="2"> <img src="images/welcome_04.jpg" width="345" border="0" height="128" alt=""></td> </tr> <tr> <td> <img src="images/welcome_05.jpg" width="124" border="0"height="21" alt=""></td> </tr> </table> here is my css snip... Code: #welcome{
padding: 10px 10px 10px 10px;
height: 250px;
color: #000000;
text-indent: 0px;
}
the problem is that the sliced image seems to have borders around each slice so the composite images is being rendered thusly.. link to jpeg URL http://www.viera-brevard-real-estate.com/badTable.jpg any ideas appreciated.. advTHANKSance, - mark 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 Hi, I'm having a little problem getting a layout to work with divs. I can hack it fairly easily with tables, but I am realying on undefined behavior to make it work, so I would rather do it right with css. Here is the code, if you can make the page, you can see the result I would like, and as close as I could get with css. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {
padding-top: 5px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Center Test</title>
<style type="text/css">
.navCell {
width: 14%;
text-align: center;
background-color: teal;
float: left;
}
</style>
</head>
<body>
<div style="width: 100%; height: 20px; background-color: red;">
<div style="width: 196px; text-align: center; background-color: green; position: absolute; left: 0px;"><p>Stay Home</p></div>
<div id="restOfNav" class="restOfNav" style=" padding-left: 196px; ">
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
</div>
</div>
<p>Desired result</p>
<table cellpadding="0" cellspacing="0" style="height: 20px;">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr align="center" >
<td class="headerCell" ><div style="width: 196px; background-color: green;"><span>Stay Home</span></div></td>
<!-- <td class="dividerCell"></td> -->
<td class="mainLinkTd" style="width: 340px; background-color: teal;">CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;">CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Thanks for any help you all can give me. Hi guys, I'm new to the boards, but I have done a search before posting. I've got a page based completely on tables that I want to convert to tableless.. URL is my original site, I tried to transport it to URL And I lost my navigation icons.. Not a huge deal, but I'd still like to have them. Anyway, Heres the code... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Guttermonkey</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
p {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 12px;
margin: 2px;
line-height: 14px;
padding-left: 20px;
color: #000000;
}
h3 {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 16px;
margin: 10px;
line-height: 18px;
padding-left: 5px;
color: #e9f2fc;
}
.smallheader
{
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
font-weight: normal;
padding-left: 10px;
padding-right: 5px;
line-height: 14px;
color: #e9f2fc;
}
.small {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
font-weight: normal;
padding-left: 5px;
line-height: 14px;
color: #e9f2fc;
}
a:link {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:visited {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:active {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:hover {
color:#707770;
font-weight: normal;
text-decoration: none;
}
.info
{
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
line-height: 13px;
padding-left: 5px;
color: #e9f2fc;
}
.infohead {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
line-height: 12px;
padding-left: 20px;
color: #e9f2fc;
}
.newshead {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 12px;
line-height: 13px;
padding-left: 5px;
color: #333333;
}
input, textarea, select {
background-color: #CCCCCC;
border-style: solid;
border-width: 1px;
font-family: verdana, arial, sans-serif;
font-size: 10px;
color: #333333;
padding: 0px;
}
-->
</style></head>
<body bgcolor="#808080">
<br>
<center>
<!-- Main Table -->
<table bgcolor="#808080" border="0" cellpadding="1" cellspacing="0" width="670"><tbody><tr><td colspan="2">
<!-- Header -->
<table bgcolor="#000000" border="0" cellpadding="1" cellspacing="0" width="100%"><tbody><tr><td>
<table bgcolor="#808080" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="smallheader" align="right" bgcolor="#354463">Last update: 28/06/2002, v4.0</td>
</tr>
<tr>
<td bgcolor="#354463"><h3>// Guttermonkey</h3></td>
</tr>
<tr>
<td class="smallheader" align="right" bgcolor="#354463">"I never think of the future, it comes soon enough." - A. Einstein</td>
</tr>
</tbody></table>
</td></tr></tbody></table>
<!-- End Header -->
</td></tr>
<tr><td>
</td></tr>
<tr><td colspan="2">
<!-- Main Field -->
<table bgcolor="#000000" border="0" cellpadding="1" cellspacing="0" width="100%"><tbody><tr><td>
<table bgcolor="#dcdcdc" border="0" cellpadding="0" cellspacing="10" width="100%"><tbody><tr><td align="center" valign="top" width="160">
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td>
<table border=0 width=100% height="100%">
<td width="495" height=100% valign="top">
Ewwwwww!<td width="175" height="100%" valign="top">
<table bgcolor="#2d3851" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#bfc4cb" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#2d3851" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#354463" border="0" cellpadding="2" cellspacing="2" width="175">
<tbody><tr>
<td class="infohead" bgcolor="#354463"><b>:: Navigation</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<link rel="StyleSheet" href="navbar_files/dtree.css" type="text/css">
<script type="text/javascript" src="navbar_files/dtree.js"></script></head>
<body>
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Guttermonkey.com');
d.add(1,0,'Home','index.php');
d.add(2,0,'Calendar','index.php?page=calendar');
d.add(3,0,'Poetry','index.php?page=poetry');
d.add(4,0,'Blog','index.php?page=blog');
d.add(5,0,'Download','index.php?page=download');
d.add(6,0,'Photo Gallery','javascript:void','RC\'s Picture Folder!','','','img/imgfolder.gif');
d.add(7,6,'RC Naked','index.php?page=naked','You sick ****!','','','img/jpg.gif');
document.write(d);
//-->
</script>
</body></html> </tr>
<tr>
<td class="infohead" bgcolor="#354463"><b>:: VITAL STATS</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Name</b>: RC</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Nick</b>: The Freaky Penguin</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Location</b>: New Perth</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Born</b>: Begotten before time</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Mood</b>: Wonky</td>
</tr>
<tr>
<td class="infohead" bgcolor="#354463"><b>:: SYSTEM</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>MB</b>: TF-486 with 256K cache</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>CPU</b>: AMD 486-66MHz</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>MEM</b>: 4MB </td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>HD</b>: Quantum Fireball 2 GB </td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>VGA</b>: Number Nine GXE 2MB ISA video card</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>OS</b>: MS-DOS 5.7 </td>
</tr>
</tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</table>
</body></html>
I havent done serious web design in a couple years, and to tell you the truth its over my head now. Oh, and when I moved the site, I FTP transfered the entire public_http folder, so I know the images are there for the nav bar. But thats not important, getting table-less is... Any help on where/how to begin? Much thanks in advance, rcmaples. Hi everyone, I am in the midst of converting my fathers website from an old frames based version into a CSS version, and I have had some trouble getting it working properly in both firefox and ie explorer. I would really appreciate if anyone could give me some advice! The original page is he http://www.qualspec.com.au I have started by just trying to replicate the frames look with css, and have come up with this single page: http://www.qualspec.com.au/test/testid.html It seems to work well in internet explorer, but as soon as I load up firefox, it looks ugly as hell (I was using topstyle which uses IE as the internal css and html preview). Can anyone help me out here? Thanks in advance! Regards, Thomas. I had to redo my page because none of it was validating through w3c so I'm trying it again and attempting to get my css right however the widths of my divs correct to match my psd. Any thoughts on what I'm doing wrong? PSD jpg kansasoutlawwrestling.com/wrestling2.jpg Site kansasoutlawwrestling.com I am so determined to get my entire site table-less but i ma having some more trouble on a "complicated" table layout This is the current table Code:
<table>
<tr>
<td width="50px"></td>
<td></td>
<td width="200px"></td>
<td width="50px"></td>
<td width="50px"></td>
</tr>
</table>
Now what i have done so far to convert this to CSS is the following Code: <div class="forums"> <span class="image"></span> <span class="name"><span> <span class="lastpost"></span> <span class="topics"></span> <span class="posts"></span> </div> however i do not know the CSS code to make it look like the table layout above. I have messed around with width and float but i am not getting it how it should be. some CSS code i wrote Code:
div.forums
{
width: 90%;
clear: both;
height: 50px;
margin: 0 auto;
}
span.image
{
float: left;
width: 10%;
}
span.name
{
float: left;
}
span.lastpost
{
float: left;
width: 20%;
}
span.topics
{
float: left;
width: 10%;
}
span.posts
{
float: left;
width: 10%;
}
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 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. 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 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> 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. 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? 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 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 |
|||||||