CSS - Beginer Css Design Problem
Hello every body, I am just learning how to place the elements of a website using css design (I want to be a better designer :P)
here is the problem: http://trustedonlinepharmacy.com/dev/ I have this divs Id s: Code: #container { width:760px; margin:0px auto 0px auto; text-align:left; } #pageHeader { display:block; height:140px; width:760px; background:url("trusted.gif") no-repeat; } #content { background-image: url('textfull.gif'); background-repeat: repeat-y; width:760px; } #ptext { position:relative; top:10px; left:170px; width:570px; padding-left:10px; padding-right:10px; background-image : url('pills.jpg'); background-repeat: no-repeat; background-position: bottom right; } #linkList{ position:absolute; top:150px; width:150px; text-align: left; } this is the html code using the divs: Code: <div id="container"> <div id="pageHeader"></div> <div id="content"> <div id="ptext"> ... ptext code <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br> </div> <div id="linkList"> link list code.... ...... </div> <div id="footer"> ... footer code </div> </div> </div> the problem is that i have to add <br> in the ptext div for get fill the end of the page of the backgroud (textfull.gif), I want to know if i can do it in another way without the <br>, just an auto mode, and if I can make it look the same in firefox and IE... thanx to every body Similar TutorialsOn 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 Here is my design. Look at it in IE and/or Firefox. Everything looks right. Now look at it in Opera. You can see some of the "wrapper" layer, which I've given a pink background. Is there any way to fix this? Here is my code: Code: <html> <head> <style type="text/css"> body { background: #3e1f00 url(../images/background.gif); background-position: top center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 80%; color: #FFFFFF; margin-top:30px; } #top { background: red; position: relative; margin-left: auto; margin-right: auto; width: 758px; height: 167px; text-align: left; } #wrapper { position: relative; margin: 0 auto; width: 758px; background: pink; } #middle { position: relative; margin: 0 auto; width: 758px; height: 200px; text-align: left; background: yellow; } #bottom { position: relative; margin-left: auto; margin-right: auto; width: 758px; height: 23px; text-align: left; background: green; } /*** see http://www.positioniseverything.net/easyclearing.html for explanation of Tony Aslett's elegant hack ***/ .clearing:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearing { display: inline-block; } /* hides from IE/Mac \*/ * html .clearing { height: 1%; } .clearing { display: block; } /* end hide from IE-Mac */ /*** end clearing hack ***/ </style> </head> <body> <center> <div id="top"> TOP </div> <div id="wrapper" class="clearing"> <div id="middle"> MIDDLE </div> </div> <div id="bottom"> BOTTOM </div> </center> </body> </html> 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. Hi there folks, Im about to go insane with this one. My site is akamarketing.com and you will notice on the left there is various elements about me & my blog which display fine in IE but the text continues across (without confining to its parent div width specification) in opera and firefox. According to my stats 25% are firefox so I do of course need to fix this issue. The css and html for one broken section is Code: <div align=center style="text-align:CENTER; border:<?=$bordersize ?>px dashed #000000; margin:2px; width:185px; padding:2px; margin-top:2px; margin-bottom:0px; padding 7px; float:left; margin-left:7px; padding-bottom:0px;"> <table border=0 style="border:0px dashed black;"><tr><td style="text-align:left;"><img title="David Callan" style="margin: 0px 5px 0px 0px; padding-top: 0px; border: #000000 1px solid" alt="David Callan" src="http://www.akamarketing.com/images/davesmall.gif" align="left" vspace="0" hspace="0"/>Welcome. I'm <a href="http://www.akamarketing.com/blog/about-dave/" title="Read more about Dave on our blog"><font color="#22229C">Dave Callan</font></a>, a 24 year old SEOer & Web developer from Ireland. I've been doing design, development, seo, ppc, Internet marketing etc. since I was about 15. This site is my canvas!</td></tr></table> </div> Can anyone help me with this? I've tried a couple of things mostly around float properties but no joy. Thanks in advance for any help. Howdy. Disclaimer: I've been working on a redesign of my homepage, and I decided to go 100% CSS. I'm still learning CSS, so if this has a braindead easy solution, just laugh and point it out to me. The problem: Here is the design I have for my website (forgive the ascii art): Code: +------------------------------------------------------+ | Header | +--------------+---------------------------------------+ | Stuff Bar | Content : :Google | | | : : Ad | | Navigation | : : | | | : : | | Firefox | : : | | Info Box | : +.......| | | : | | Affiliates | : | | | : | +--------------+---------------------------------------+ | Footer | +------------------------------------------------------+ The Content has been artificially "width"ed to be no more than 400px wide. The Google Ad should float all the way to the right on a separate layer to keep out of the way on large monitors. Now, what I want to do is also float every IMAGE from the content all the way to the right on large monitors: Code: +------------------------------------------------------+ | Header | +--------------+---------------------------------------+ | Stuff Bar | Content : :Google | | | : : Ad | | Navigation | : : | | | : : | | Firefox | : : | | Info Box | : +.......| | | : | | Affiliates | : | | | : ------------------------ | | | : +---------------------+ | | | : | IMAGE from Content | | | | : +---------------------+ | | | : ------------------------ | | | : | | | : | +--------------+---------------------------------------+ | Footer | +------------------------------------------------------+ I havn't a clue how to do that correctly. I want the Content to wrap around the image callout. I'd appreciate the pointer. 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. 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 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, 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. 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; } 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 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 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! 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'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 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 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 |