CSS - Responsive Design Url

Help?

I have designed a look for one of my buddies companies. However, it is quite complicated.

I have attached the .GIF file for you to reference.

The design needs to be cross-browser friendly.

The navigation is going to be dynamically built using a backend application built in PHP. The nav_links will be text not images, as well as the text next to the "did you know" items. I imagine that the placement of some of the "did you know" items can be arranged to ease the slicing process. Also, the left main image (the guy) needs to be dynamic in that it rotates through images on refresh or a revisit (probably some javascript).

On top of all that, I need the "featured" or "did you know" items i.e. the round images and text to dynamically change also. These will be likes into specific sections of the site. My major concern is getting the main header pieced together correctly while meeting cross-browser compatibility. I have some CSS knowledge but as i mentioned the design is quite advanced.

Any ideas on how to correctly structure it to work?

TIA

BA

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.

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.

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

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

Hi everyone

I'm very new to CSS and I'm having some trouble getting a layout to work as I want it to. I have attached the file as a .txt as HTML files are not allowed. Just change the extension to .html.

The problem, in Opera, none at all. Firefox doesn't display it properly. IE does to an extent but it has horizontal scrolling. Being new to CSS, I have absolutely no idea what needs changing. If anyone could tell me where I'm going wrong, preferably with an explanation why it has gone wrong, it'd be much appreciated.

Thanks very much

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.

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.

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

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.

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;
}

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

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

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