|
CSS - I Need Some Suggestions On Slicing Out A Design For .css
I have a design that I need to slice out. I had done this previously making the logo (the cocktail glass/flag/name/ball and green) in a sep div using a .png background and z-index layer for positioning.
The problem is, in IE it came up with the ActiveX prompt to present, and in FF, It didn't show up. What I'm trying to do is, keep the dropshadow on the logo over the rest of the imagery. Am I over thinking this??? http://www.rustbug.com/the19thhole/index.html Similar TutorialsI don't really have a designers eye, so stuff I make tends to look like crap, but I try and make sure it's fuctional. I have a quick thing I made for an internal project at work, but need some suggestions on the design. It's mostly CSS based, but right now I see at least one problem with it: The side bar is positioned using fixed positioning, so if I fill up the bar, the stuff that falls off the end won't be available anymore. I don't want to use overflow: auto/scroll because it would make a nasty scrollbar in the middle of the page rather than on an edge. My server isn't working right now so I can't upload the copy of the page/css I made to it, so I will attach a zip file of the files. Any suggestions for improving this so that the problem I see is elimated, but a decently looking page still exists would be appricated. I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page. My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! look 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. Hey, everyone! I was wondering if someone could advise how I could vertically center this page using CSS. I'm trying to create the look of gotgosh dot com but in CSS. Thank you! Kyler Here's the CSS code: * { margin: 0; padding: 0; } body { background: #666666 repeat-x; color: #000000; } #center { position: absolute; width: 100%; float: none; } #outercontainer { width: 760px; margin: 0 auto 0 auto; } #menu { height: 70px; background:#FF0000; } #container { position: relative; height: 500px; overflow: auto; border: 10px solid #FFFFFF; background-color: #FFFFFF; } #barst { height: 20px; width: 100%; background: #00FF00; } #barsb { height: 20px; width: 100%; background: #00FF00; } Here's the HTML code: <head> <title>enter title here</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta http-equiv="Content-Language" content="en-gb" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="center"> <div id="barst"> </div> <div id="outercontainer"> <div id="menu">---- HEADER --- -----------------</div> <div id="container"> <p>Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.<br /> <br /> Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.</p> </div> </div> <div id="barsb"> </div> </div> </body> </html> Hello, I have attached my zip file and this is my first attempt on CSS2 (plenty of comments in the code), if some could look at it and recommend any suggestion and why that would be TERRIFIC. My main question is, what happens if the is say...4-5 paragraphs of text on the home page, under "Company Overview", the page then looks stupid, how do i extend the containers around the #middleContainer so that it looks intact. If you want to see the page it is also accessible at http://awo.loadedtechnologies.com/ Thanks you for your Help http://www.mihomeanddesign.com/test/ I was hoping someone would have a suggestion as to how to lay this site out without using absolute positioning for the #mainimage div. I know that I could float it right within the main wrapper, but I also want the top nav and the footer to extend 100%. I want to do this to avoid having to put "style="padding-bottom: 423px; " in every <p> at the bottom of the page if there is not a lot of text on it... like on the home page and the contact page. Any suggestions would be greatly appreciated. Hi, This is my first CSS layout. I would like to know if there is a better way to code this or what improvements or changes should be done. Thank you, Lutek <html> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css" media="screen"> body { margin-top: 0; text-align: center; background-color: #d30000; } #container{ margin: 0 auto; width: 650px; height: 800px; text-align: left; background-color: #FFFFFF; } #header { float: left; width: 100%; background: #FF9900; } #box-left { float: left; width: 33.3%; background: #FF0000; } #box-center { float: right; width: 33.3%; background: #ffff93; } #box-right { float: right; width: 33.3%; background: #ffff93; } #footer { float: left; width: 100%; background: #FF2200; } </style> </head> <body> <div id="container"> container <div id="header">header</div> <br> <div id="box-left"> box-left</div> <div id="box-center">box-middle</div> <div id="box-middle">box-right</div> <div id="footer">footer</div> </div> </body> </html> 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. 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, 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. 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 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;
}
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 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;
}
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 |
|||||||