CSS - I Want To Make My First 100% Css Design.. Help!
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! 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. 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 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/ Hi, I'm designing a web site using a full CSS layout with XHTML. It's quite challenging as I'm used to complex table designs. My design is located at http://www.definitedigital.com/vida/index.html And the style sheet at http://www.definitedigital.com/vida/style.css There's some things that look different across browsers, and I'm not sure if it's some sort of bug or my mistake. For example, 1. On Firefox the 'Punta Del Este Vida Beach House' link image is sometimes detected and sometimes unclickable. 2. There's much more vertical spacing between the divs (logo, photo, menu) in Firefox than in IE. I'd really appreciate if someone could take a look at my CSS, as I don't really know whether I'm doing this right or not. Thanks, Ralph 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 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 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 http://www.hicksdesign.co.uk/ Please notice on the right hand side the border that streams down the bottom, I've tried to analyze his css but it just doesn't seem to make exact sense. The picture actually stays the same regardless of the user's resolution and this is an optimal solution to fight the screen rez blues. Any thoughts? Heya everyone, The next item on my todo list is to work on a design for DynaSig with just CSS for layout rather than the current tables. I haven't used CSS to create a really complex template before and I am not sure where to start. I want it to look pretty much exactly the same as the original. So. What do I do first? What should I learn and complete first? I'm kinda stuck on this one, and I don't want it to get put on the back-burner. Thanks for ideas/tips/comments/help/whatever comp Ok, this may be asking too much, but I have this design idea - http://tmh.netdbs.com/turnkey2.jpg But insofar as laying it out with CSS, I just am not sure where to begin breaking it apart and creating various divs so to speak, the main white area is where I will lay out various <P> tags and won't have a problem with that, but it is getting started that challenges me. I'd appreciate some feedback on how to approach this. TOm okay, so what i want to achieve is a result similar to: www.simplebits.com anyways, first thing is that using divs when the browser is resized everything gets screwed up, however not on the above site. thanks, any help would be great. Chris Hi, i have been reading up a lot about responsive design lately... will responsive design do away with the need for having a mobile. prefix at the start of a url (mobile.sitename.com) or do responsive designs tend to keep the mobile.sitename.com Hi all, After using silktide.com to test my site's score, the report suggested that I remake the site using CSS to make it tableless. The site i am remaking is www.verdicts.co.uk So far ive remade the interface which you can see he www.verdicts.co.uk/verdicts_css Problem is, i have absolutely NO clue how i would go about making much more complex table replication using CSS. For example, the "popular review catagories" as seen on the www.verdicts.co.uk homepage. ...Or the product listing pages like this one: http://www.verdicts.co.uk/items/663/items.html or how about the reviews tables as seen he http://www.verdicts.co.uk/reviews/1140/1140.html What i am asking, is: Should i try and find a way to recreate these tables with CSS, or is the only way to do this, with *some* use of tables? Silktide.com's checker says make the site "tableless" - so i am guessing it's saying not to use a single table?! Thanks Mat. 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) 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 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. |