CSS - Turning A Photoshop Design Into A Web Template
Hey all,
Our graphic designer Chrono has come up with a beautiful template, and Paul and I (the "coders") are developing a plan/system to turn the template into HTML/CSS. The URL of the template is http://www.mvcc.edu/sneakpeek.cfm. If you have any insight as to how to do this, please tell me! One other thing, what would you suggest for the white curved line that goes across the template? Thank you so much, Jordan Similar Tutorialslook at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated. Hello all, I am creating a photoshop image that i am slicing and outputting into css. When it loads in firefox its perfect but when i load it into IE7 its all messed up. Is there a setting in photoshop im missing or does IE7 really suck that bad. Heres the code. Any help would be greatly appreciated. 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> <title>Untitled-3</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- ImageReady Styles (Untitled-3) --> <style type="text/css"> <!-- #Table_01 { position:absolute; left:0px; top:0px; width:700px; height:117px; } #Untitled-3-01_ { position:absolute; left:0px; top:0px; width:371px; height:19px; } #Untitled-3-02_ { position:absolute; left:371px; top:0px; width:34px; height:36px; } #Untitled-3-03_ { position:absolute; left:405px; top:0px; width:295px; height:27px; } #Untitled-3-04_ { position:absolute; left:0px; top:19px; width:308px; height:54px; } #Untitled-3-05_ { position:absolute; left:308px; top:19px; width:63px; height:17px; } #Untitled-3-06_ { position:absolute; left:405px; top:27px; width:295px; height:9px; } #Untitled-3-07_ { position:absolute; left:308px; top:36px; width:392px; height:37px; } #Untitled-3-08_ { position:absolute; left:0px; top:73px; width:700px; height:6px; } #Untitled-3-09_ { position:absolute; left:0px; top:79px; width:700px; height:29px; } #Untitled-3-10_ { position:absolute; left:0px; top:108px; width:700px; height:9px; } --> </style> <!-- End ImageReady Styles --> </head> <body style="background-color:#FFFFFF;"> <!-- ImageReady Slices (Untitled-3) --> <div id="Table_01"> <div id="Untitled-3-01_"> <img id="Untitled_3_01" src="images/Untitled-3_01.jpg" width="371" height="19" alt="" /> </div> <div id="Untitled-3-02_"> <img id="Untitled_3_02" src="images/Untitled-3_02.jpg" width="34" height="36" alt="" /> </div> <div id="Untitled-3-03_"> <img id="Untitled_3_03" src="images/Untitled-3_03.jpg" width="295" height="27" alt="" /> </div> <div id="Untitled-3-04_"> <img id="Untitled_3_04" src="images/Untitled-3_04.jpg" width="308" height="54" alt="" /> </div> <div id="Untitled-3-05_"> <img id="Untitled_3_05" src="images/Untitled-3_05.jpg" width="63" height="17" alt="" /> </div> <div id="Untitled-3-06_"> <img id="Untitled_3_06" src="images/Untitled-3_06.jpg" width="295" height="9" alt="" /> </div> <div id="Untitled-3-07_"> <img id="Untitled_3_07" src="images/Untitled-3_07.jpg" width="392" height="37" alt="" /> </div> <div id="Untitled-3-08_"> <img id="Untitled_3_08" src="images/Untitled-3_08.jpg" width="700" height="6" alt="" /> </div> <div id="Untitled-3-09_"> <img id="Untitled_3_09" src="images/Untitled-3_09.jpg" width="700" height="29" alt="" /> </div> <div id="Untitled-3-10_"> <img id="Untitled_3_10" src="images/Untitled-3_10.jpg" width="700" height="9" alt="" /> </div> </div> <!-- End ImageReady Slices --> </body> </html> Hi everybody, It is clear to me that designing using CSS is the best way to go now and that designing with tables is practically from another era. I like to make my webpages with rich design, and generaly i use photoshop to design my layouts, then i switch to ImageReady and start slicing and slicing. I just can't change that routine. My question is how can i make a smooth transition to css, how do i translate my photoshop layout to CSS, what's the best way to do it (best practice). Are there any books or tutorials out there approaching this issue. Thanks to anyone that can help. Howdy; I'm looking to set up a web page that upon clicking the 'next' or 'previous' button, the page will appear to turn similar to that of a book or magazine. here's an example of what i want to do: www.insideeonline.com Even if you could just point me in the direction of a good tutorial it'd be greatly appreciated. Thanks in advance. It looks alright in IE, but looks really messed up in Mozilla, Firefox and Netscape. I wanted vertical UL tabs down the left side. http://www.members.shaw.ca/welcomehere/test.htm please help. Hi sorry if this is the wrong place for this thread, I have been given a project to take a fully flash website and convert it into xhtml and css. There are roughly 30 pages or so but Im am really unsure of how much I should be asking as a fixed price for the work. What does everyone else usually do? I'm designing a company website. I'm relatively new to CSS and I'm having trouble creating what seems to me a very simple design:
body background: fixed full page image
banner: fixed, 100 pixels high, full-width, transparent background
nav bar: fixed, 200 px wide, auto-height, opaque nav icons, semi-transparent tiled image background
content box: scrolling, auto height, auto width, opaque text, semi-transparent tiled image background
footer: fixed, 30 px high, full width, transparent background
mockup: Here is as far as I could get in the actual design: web page attemp Well, many of you have seen me floundering around this CSS stuff. I developed 2 demos for a team of people to review and damn if they didn't want functionality combined into one site... I have words that discribe my reaction!!.. Anyway I'm building this site using a new 3 column example I found at Skidoo or something like that. Seems to be working well so far with my columns staying the same height. As I go I'm trying to maintain the functionality in both IE and FF and frankly having a bit of trouble. Seems that the code and changes looks fine in IE but there are 3 primary areas I cannot seem to fix in FF. *The white line between 'the header' and 'the horizontal nav' blocks. *The background color for the left and right content areas is not coming through. *And in the Left content area there are a lot of links with the UL set to none and a reduced margin for alignment purposes. In FF they are not over to the Left like I'd like If you look at this example in IE it is as I'd like it to appear. In FF the above are an issue. Any help would be greatly appreciated even if its a link to read this..... sort of thing. Thanks for the help. The site The CSS Also, em is fairly new to me in this style, it seems to be very good especially when adjusting the font size. Is this the better to use standard than px? Does anyone know where I can find a chart comparing the two? I have been using px for sometime and have to fiddle with em to make it all work. Thanks again for any assistance. I am trying to improve design of most popular div in one section (http://www.pearl.ru/isdunyasi/defaultinner.asp?Section=3). I designed something in photoshop but I am having hard time wth integrating it(http://www.pearl.ru/isdunyasi/newtable.gif). I cannot figure out how to do it because if I set what I designed as a background there is big chance texts will overflow as that area gets its values from the database. Code: #innersubcontentpopular{ float:right; width:300px; height:450px; background:#FFFFFF url(images/nheadlines_bg.gif) top no-repeat; } #innersubcontentpopular h1{ padding:0px; margin-bottom:5px; font-size:14px; font-weight:bold; color:#FFFFFF; } #innersubcontentpopular h2 { padding:5px 2px 5px 2px; font-size:12px; font-weight:bold; color:#aaaaaa; } #innersubcontentpopular p { padding:2px; margin:0; font-size:12px; } OK - this may sound a bit cheeky but I have been looking everywhere for a table-less design which will work in the 3 major browsers (Opera, Firefox, IE) I am looking for a 2 column layout (left column about 130 px wide) and with a header and footer - I can't find anything that works for me in all browers (I know M$ haven't made IE fully compatible ) but if anyone knows where I can get this popular and simple structure I would be most grateful, thanks, j I was told in the html forum that I should design my layout with CSS instead of tables... I'm using FireworksMX and Dreamweaver MX. Any help figuring out how to do that with the layout on this page would be great - I don't know very much about CSS. I know dreamweaver makes new ones every time I type, and it keeps changing my text when I don't want it to. I understand that you can make ones for text, html tags, and other more complicated stuff that I don't understand - is it possible for me to figure this out without spending a month studying it? Here's the non-css layout page http://www.thecurrencyofthefuture.com Ok, trying to use CSS to mirror the UNLV design header. examples of the design: http://hotel.unlv.edu/ http://alumni.unlv.edu/ etc I basically want the top header (black/red backgrounds) I am trying to do it without using tables to do the layout, but I can't seem to figure out how to do it. here is what I got: http://projects.whiteazn.com/unlvmentor/ in firefox, looks fine, except the black background doesn't seem to go all the way over. in IE, works fine, but the red background seems to get bigger (the height is bigger) and the search box seems to go to the top any ideas? (I haven't tried to float the red background part yet) I would like to be able to have headers for the smaller divs in each column similar to the one I have on the upper left hand side close to the nav bar. The question is this: How do I attain this effect with the header streched across the width of the containing div? http://www.nevertap.com/float/ Do I use an image? Do I use tables? I would just 'go for it' and try them all out, but Ive been coding too long today, I want to see what others think so im not making a total stab in the dark. Hi guys... I'm fairly experienced at webdesign, but I never actually used css for the *entire* design before (besides on one or two unfinished sites that came out badly). I was wondering if anyone could help me out designing the basic layout with css, and I can probably handle the rest. It would be much appreciated! I am new to web development and am in the process of learning XHTML, CSS, PHP and SQL. I need to know if i am making any major mistakes in my approach to making this site as far as CSS is concerned. The site is a simple file browser which displays files and their details in a table with a vertical navigation bar. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div id="header"></div> <ul id="nav"> <li><a href="index.html">Home</a></li> <li><a href="/dotastats">DoTA</a></li> <li><a href="/phpmyadmin">phpMyAdmin</a></li> <li><a href="upload.php">Uploads</a></li> </ul> <div id="content"> <table> <thead> <tr><td><a href="upload.php?sort=filename">Filename</a></td><td><a href="upload.php?sort=ext">Type</a></td></tr> </thead> <tfoot> </tfoot> <tbody> <?php require("functions.php"); updateFiles(); $page = $_GET['page']; $sort = $_GET['sort']; if($sort == "") { $sort = "ext"; } $files = getFiles($sort); $i = 0; $colours = array('even', 'odd'); foreach($files as $v) { if($i >= ($page * 20) && $i < (($page * 20)+20)) { echo '<tr class="'.$colours[$i % 2].'"> <td><a href="files/'.$files[$i][0].'">'.$files[$i][0].'</a></td> <td>'.$files[$i][1].'</td> </tr>'; } $i++; } ?> </tbody> </table> <?php echo "<br/>"; $pageCount = $i / 20; for($i = 0; $i <= $pageCount; $i++) { echo " ["; echo "<a href='upload.php?page=$i&sort=$sort'>$i</a>"; echo "] "; } ?> </div> </body> </html> Edit: Code: html, body { margin: 0; padding: 0; } a:link {text-decoration:none} a:hover {text-decoration:underline} #nav { background: #9966CC; height: 30px; border: 1px dotted #000000; margin:0; padding:0; text-align: center; } #nav li { display:inline; padding:0 10px; margin:0; font-size: 14; } #header { background: black; height: 100px; } #footer { background: black; height: 100px; } #content { width: 800px; margin: auto; padding: 10px; } #upload { text-align: center; } table { font-size: 14; } table thead tr { background-color: #6699FF; font-weight: bold; } table tbody td { width: 400px; } table tbody tr.even { background-color: #B0C4DE; } table tbody tr.odd { background-color: #CAE1FF; } table tbody tr:hover { background-color: #9999FF; } On the right side of this page the border is messed up but, in the css the mathematics are all correct. I dont know whats wrong??? Have a look at the output of this code he Code: <html> <head> <title>Template</title> <style type="text/css"> <!-- #header { border-top: #000000 thin solid; border-left: #000000 thin solid; border-right: #000000 thin solid; position:absolute; left:5%; top:30px; width:90%; height:178px; } #nav { border-left: #000000 thin solid; border-bottom: #000000 thin solid; position:absolute; left:5%; top:208px; width:18%; height:512px; } #content { border-right: #000000 thin solid; border-bottom: #000000 thin solid; position:absolute; left:23%; top:208px; width:72%; height:512px; } --> </style> </head> <body> <div id='header'> </div> <div id='nav'> </div> <div id='content'> </div> </body> </html> Whats wrong??? Daniel Hi, How do i make a table in which "title" is in the middle of the table and "help" is on right side. <table class="" width="700"> <tr><td colspan="2" align="center"> <span>title</span><span>help</span> </td></tr></table> something like this: ------------------------------------------------------ |...................................title...........................help | ------------------------------------------------------ Thank you. Hi, I have a table, which contains div. The Div contains "ul" and "li" elements. Currently my page looks awkward without any css designs. Could somebody help me with some css designs, so that page looks good. Thank you. I am new to this forum and need some help! I am creating a page and the sidebar has links. I have a graphic link that I DO NOT want highlighted. I have tried everything I can think of, but I don't think I am able to apply the link styling as an inline style, or am I wrong. Any help would be appreciated! http://annesweb.com/abramoff/ Hey everyone, I'm new to CSS, but now web design. I could find a way to build this design in tables, but thought I might try the CSS thing. I've been reading a bunch and have a general plan, but any advice on where my plan could be improved or if I should stick with tables would be great. hutec-inc. com/personal/css.gif |