|
CSS - Ok, So Here Is A Design Idea - (css?)
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
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. Ok here is my problem: .leftmenu { font-family:Verdana,Helvetica,Arial,sans-serif; font-size:12px; color:#444444; text-decoration:underline; } .leftmenu:link,.leftmenu:visited { font-family:Verdana,Helvetica,Arial,sans-serif; font-size:12px; color:#FFFFFF; text-decoration:underline; } .leftmenu:hover,.leftmenu:active { font-family:Verdana,Helvetica,Arial,sans-serif; font-size:12px; color:#F22222; text-decoration:underline; } I already have an a:link ect section (which works) However, i want to call the leftmenu class from the start of a table insert. <td width="70px" background="img/topbar.gif" class="leftmenu"> the leftmenu class itself works for text, BUT it doesnt get applied to links. Is there anyway to do this short of coding it into each link? I know css but have never tried anything like this before, and its been wrecking my head all morning..... B Thanks for reading, I have no idea what I'm doing as far as CSS goes and I just purchased this code for a bigcartel store. My main issue is that when I click checkout button with something in the cart nothing is happening. This is the checkout page code.where is says ---- is where my site goes but this is my first post so I cant post with it in there. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(----)"> <html xmlns="(----)"> <head> <title>{{ store.name }} — One moment...</title> <style type="text/css"> body { margin: 100px; text-align: center; font-family: Arial, Helvetica, sans-serif; color: #666; } h3 { padding: 50px; border: solid 1px #ddd; background-color: #f8f8f8; width: 300px; font-size: 18px; } </style> <script type="text/javascript" charset="utf-8"> function checkout() { if(top != self) { top.location.replace(self.location.href); } else { document.checkout_form.submit(); } } </script> {{ head_content}} </head> <body onload="checkout();"> <div align="center" style="margin:20px;"> <h3>One moment...</h3> </div> {% checkoutform %} <noscript> <input type="submit" value="Checkout" /> </noscript> {% endcheckoutform %} </body> </html> Anyone see anything wrong with it? The checkout button is supposed to take your paypal account so you can pay for the t-shirts. Here's the actual site add the www and com to it naffleskell.bigcartel Any help is greatly appreciated. Thank you!! I've been trying to figure out how I can use css to make one side of the body one color and the other side another color. For example: if I want the entire left 70% of the page to be white and the right 30% to be black. no margins. it needs to stretch the entire length of the page regardless if there's any content in a div or not. And it need to be fluid. I've been trying everything I know and apparently that's not very much because I can't figure it out. The link below is what I've tried using a bg image. Hopefull this will illustrate the idea. But I don't want to use a bg image if I don't have to plus the division where the color changes needs to be fluid with the text and I haven't figured out how to do it with the offset percentages. Basically the left side needs to be white as wide or wider as the left column and the right side color can go from that point all th eway right regardless of how wide the browser is. Does that make sense? I think I could do it if it were 50/50 but that's not what I'm after. http://sonicparke.com Has anybody done this or know how it should be done? I haven't figured out how to align the <div> tag to be center for the Mozilla browser.. I know I'm missing something here but I can't remember which. This one work in IE but not Mozilla. Code:
<div style="text-align: center;">
<div>
<STYLE TYPE="text/css">
body {font-family:Verdana;
font-size:10pt;
font-weight:normal;
color:black;}
H2 {font-family:Verdana;
font-size:12pt;
font-weight:bold;
color:black;
width: 625px;
BORDER-BOTTOM: black 1px solid;
}
TD {font-family:Verdana;
font-size:8pt;
font-weight:normal;
color:black;}
.cTradeLines TD
{FONT-WEIGHT: normal;
FONT-SIZE:10ptl;
COLOR: black;
FONT-FAMILY: Arial}
.cTradeLines A
{FONT-WEIGHT: normal;
FONT-SIZE:10pt;
FONT-FAMILY: Arial}
.cTradeLines A:hover
{FONT-WEIGHT: normal;
FONT-SIZE:10pt;
FONT-FAMILY: Arial}
.cSpSm
{FONT-WEIGHT: normal;
FONT-SIZE: 7pt;
COLOR: black;
FONT-FAMILY: Arial}
</STYLE>
<p>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50%"></td>
<td width="50%" align="right" style="font-size:10pt;" valign="top"><LABEL style="font-family:Verdana; font-size:12pt; font-weight:bold; color:black;">TRANS UNION Credit Profile Report</LABEL><br>TRANS UNION<br>555 W ADAMS<br>CHICAGO, IL. 60661<br>800 888-4213<br>
Date Reported: 9/16/2005</td>
</tr>
</table>
</p>
<p>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50%"></td>
<td width="50%" align="right" style="font-size:10pt;" valign="top"></td>
</tr>
</table>
</p>
<p>
<H2>Status</H2>
No Hit<br></p>
</div>
</div>
I know the codes isn't w3.org compliant with the way the <style> tag are inserted. It's the way the web page is created via the 3rd party website when receiving it and I'm encapsulating it with a <div> tag. I don't wanna do a lot of screen scraping and moving around the tags with PHP because they are never the same from the 3rd party website. Thanks.. for my website, i'm going to be using some css for every page in it, would it be advisable to store the css for each page in their own file? or even better in the actual page itself? if i put it all into one css file i'll end up putting bit spacers: /*-=-=-=-=-=-=---=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-*/ to block things apart Actually I had 4 files named the same as they were importing: Code: CSS @import "header.css"; @import "menu.css"; @import "content.css"; @import "footer.css"; It took me a half hour to figure out why IE was loading and Firefox wasn't. Hahaha, I am dumb. D-U-M-B, I mean D-U-N-C-E Off to the corner with me... Picture What if someone only had two middle fingers? Would they raise both and then go piss on their shoe? GEOGRAPHY :P I'm bored, at least I'm getting paid for this post :P Hahahaha... Quoted from a recent post " Using a server-side language or JavaScript to send different stylesheets to different browsers is a bad practice. It tends to cause more problems than it solves. " Enlighten me on "why this is considered a bad practice " -- or even better yet, what would u suggest is a work around. Specifically ive found that the use of absolute positioning tends to vary on how it works ( or doesn't) , ive narrowed my specific problem down to what seems to be the different browser's assigning a different "meter value" ( for lack of a better term) or size increment for "1px" My test page is essentially "displaying correctly" except offset values seem to produce a varying range of "what 1px really means". IE6 (win) and FF1/2 (win) displays the test page fine - but on IE5.2(mac), Safari (not sure version, but oddly enough this browser gives the closest true values) , and FF1 (mac) seem to "define 1px as either larger or smaller" then whatever their windows counterpart decides. How would you suggest I work around this situation if not with Browser Dection via the use of serverSide / Javascript coding ( which until reading the quoted statement above, i was going to implement). Do Share please ! edit: heres the CSS file, its been validated. The issue is inspecific to my file but related to browser detection. anyway... Code:
#totalcontents {
z-index : 7;
position : relative;
}
.banner {
z-index : 6;
position : absolute;
top : -1px;
z-index : 3;
}
#introblock {
position : relative;
}
.navigation {
z-index : 10;
position : absolute;
top : -33px;
left : 200px;
}
.smallheadline {
z-index: 8;
position : absolute;
top : -43px;
left : -175px;
width : 395px;
color : #CCFF00;
background-color : #333300;
padding : 3px;
border-style : solid;
border-width : 1px;
border-color : #999966;
font-family : times;
font-size : 10pt;
}
.dropright {
z-index: 8;
position : absolute;
top : -67px;
padding : 7px;
left : 203px;
color : #CCFF00;
border-style : solid;
border-width : 1px;
border-color : #66FF00;
background-color : #333300;
width : 325px;
}
.othernews {
z-index : 5;
position : absolute;
top : -276px;
left : -175px;
width : 390px;
color : #FFFFFF;
padding : 5px;
/*border-style : solid;
border-width : 1px;
border-color : #CCFF00;*/
}
.backdrop {
z-index : -1;
position : absolute;
top : -635px;
}
html {
background-color : #646464;
}
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 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? 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. 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, 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. 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 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;
}
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 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 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. |
|||||||