Jump to content

cssfreakie

Staff Alumni
 View Profile  See their activity

  • Posts

    1,674

  • Joined

  • Last visited

 Content Type 

Everything posted by cssfreakie

  1. cssfreakie
    I don't want to be rude, but you clearly missed the point here. you don't need position relative for this nor is it recommended to use <style> without a type attribute.
  2. cssfreakie
    the code above fixed the problem... I could clarify, but there are enough resources out there already that do. http://www.positioniseverything.net/easyclearing.html
  3. cssfreakie
    seriously? please sue your teacher x*1.2 x*0.8
  4. cssfreakie
    you might want to have a read in the css manual on the property float. this is exactly what it (float) is suppose to do in your code given(also see this). Run the code below and see what i mean. (notice the word moo) mooo<div style="background-color:#00C ; float:left; width:200px; height:100px;"></div> <div style="background-color:#00C ; clear:left; margin: 200px 0 0 40px; width:200px; height:100px;"></div> or try <div style="background-color:green; overflow:hidden;"> <div style="background-color:#00C ; float:left; width:200px; height:100px;"></div> <div style="background-color:#00C ; clear:left; margin: 200px 0 0 40px; width:200px; height:100px;"></div> </div> Just another thing. your markup was invalid this didn't cause your problem, but it still is invalid to do the following: <div/></div> see your code (<div style="background-color:#00C ; float:left; width:200px; height:100px;"/></div>) Hope this helps.
  5. cssfreakie
    interesting... I have no idea what you mean. I have never seen firefox show messages nor any other browser indicating invalid use of css or html. MOst just ignore rules that are not valid. IF you can't provide use with a Printscreen of this or with the complete code that produces this i am afraid no one can help here. instead you can use rgba or use a transparent png if it's for a background. Anyway opacity is a valid property. again filter (is an IE thing)
  6. cssfreakie
    Some colors are often a bit more useful when shaping things up. Have a look at the following mark-up and css. And next time try to isolate the problem in 1 piece of code like below saves you and others some time. I recreated it with the following in mind. The container: Your image shows 1 container with a the same amount of space between the border and the child elements. So i gave the container a bit of padding. The left side Your image shows a fixed height and width floated to the left with a margin at the right side. so we just make that. The right side Your image shows that #friendrating, #globalrating are exactly the same no need to declare anything different for them except for a color maybe. and that's it try it out and learn from it. <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <title></title> <style type="text/css"> #cardcontainer{width:500px;margin:0 auto; overflow:hidden; padding:10px;background:gray;} #coverart{width:200px; height:200px;background:yellow; float:left;margin-right:10px;} #right{overflow:hidden;} #gametitle{width:290px;height:40px;margin-bottom:10px;background:red; float:left;} #friendrating, #globalrating{background:green; float:left; width:100px; height:150px;margin-left:30px;} #globalrating{ background:orange;} </style> </head> <body> <div id="cardcontainer"> <div id="coverart"></div> <div id="gametitle"></div> <div id="friendrating"></div> <div id="globalrating"></div> </div> </body> </html> another thing to have a look in to is a "grid system". your template is far from ordered if i am honest it could be much better aligned.
  7. cssfreakie
    do you have some html mark up with this or even better an online example?
  8. cssfreakie
    firefox 5 tells you this or the validator? (got a printscreen of this message? ) As far as i know opacity is just valid css3 and filter is an IE thing
  9. cssfreakie
    got an online example?
  10. cssfreakie
    just a note make sure the doctype is the very first thing in your script right now there is a line above it. if you view the source you will see. as far as suggestion, do not use tables for creating a layout. it wrong redundant, and mostly limits your creativity. Instead i can recommend to have a look in to the properties float and clear. a great tutorial can be found here. http://css.maxdesign.com.au/floatutorial/ try it out!
  11. cssfreakie
    Assuming you use a strict doctype a few things are wrong with your code. -don't forget end tags -don't use align as attribute (see: http://www.htmldog.com/guides/htmlintermediate/badtags/) -use an alt tag on images i adjusted it a bit have a look i added a comment in the style run that as is and see the difference. <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <title></title> <style type="text/css"> body { background-color: #E0E0E0 ; } .main { height: auto; width: 100%; background-color: #F8F8F8; padding-bottom: 10px; } div.top { position:fixed; height: 40px; width: 100%; border-style: solid; font-size: 16; border-bottom-color: #585858; border-bottom-width: 1px; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(240,240,240)), color-stop(0.74, rgb(255,255,255)) ); background-image: -moz-linear-gradient( center bottom, rgb(240,240,240) 0%, rgb(255,255,255) 74% ); } div.top li { float:left; color: #E0E0E0; margin-right: 20px; /* <--------------- added this */ list-style: none; /* remove this line if you want bullets */ } div.top a { color: #D0D0D0; text-decoration:none; padding: 2px; -moz-border-radius: 2px; border-radius: 5px; border-style: none; border-width: 1px; } div.top a:hover { color: #000000; padding: 2px; } #nav #current{ color: #000000; padding: 2px; -moz-border-radius: 2px; border-radius: 5px; border-style: solid; border-width: 1px; border-color: #C0C0C0; background-color: #C0C0C0; } .sidebar { width: 200px; height: 500px; -moz-box-shadow: 10px 10px 5px #E0E0E0 ; -webkit-box-shadow: 10px 10px 5px #E0E0E0 ; box-shadow: 10px 10px 5px #E0E0E0 ; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(248,248,248)), color-stop(0.4, rgb(243,243,243)) ); background-image: -moz-linear-gradient( center bottom, rgb(248,248,248) 9%, rgb(243,243,243) 40% ); } .credits { height: auto; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.4, rgb(240,240,240)), color-stop(0.51, rgb(248,248,248)) ); background-image: -moz-linear-gradient( center bottom, rgb(240,240,240) 40%, rgb(248,248,248) 51% ); } .clear { height: 4px; } .moveBar { width: 90px; } </style> </head> <body> <div class="top"> <ul id="nav"> <li><a id="current" href="index.php">Home</a> </li> <li><a href="inbox.php">Inbox</a> </li> <li><a href="notification.php">Notification</a> </li> <li><a href="logout.php">Logout</a> </li> </ul> </div> <div class="clear"></div> <div class="main"> <div class="sidebar"> <p>rank</p> <hr/> <img src="images/male_silhouette.png" alt=""/> <br/><br/> <p>Name: </p> <p>Contact: </p> </div> </div> <div class="credits" > Created by Zulfadly AshBurn. All Rights Reserved!<div class="clear"/> </div> </body> </html> a smart thing to do when debugging, run it through a validator or use a decent editor that indicates errors
  12. cssfreakie
    do you have some html with that. Right now a cause could be the following i see some overflow hidden being used and padding and margin set to 0, but if you can provide some html it will be much more useful. Online example would be even better.
  13. cssfreakie
    apart from abbreviating vital words. Do you have some code? Apart from that, do you know why you use position absolute?
  14. cssfreakie
    the only thing you can do without causing the line to shift in the vertical axes is the following. <style type="text/css"> .boldText{ margin-right:12px; /* this to compensate growth horizontally on hover */ } .boldText:hover { font-weight:bold; opacity:0.99; vertical-align: bottom; /* this */ margin:0; /* remove margin */ } </style> <div class="stuff"> <p>Some text with styling that will make it <span class="boldText">go bold on hover</span> lalalalala lalala<br /> lalala lalala mamama lalala amamama amamamamama </p> </div> p.s. but this will never look very cool. I suggest to just take another color. bold text just changes the dimensions of the element, and you need to deal with that or if your in to css3 use text-shadow. (comes close to bold
  15. cssfreakie
    as far as i know this is not possible without using position absolute. which will be pretty tricky and far from dynamic when there is also text after the span. Usually a different color is chosen for these types of things.
  16. cssfreakie
    position relative shouldn't be used for a simple layout as that. I recommend you read a little about the propperties float and clear. HAve a look at a simple layout below. <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <title>float stuff</title> <style type="text/css"> #wrapper{width:1020px;margin:0 auto;} #left{width:300px;float:left;} #right{width:700px;margin-left:20px;min-height: 400px;float:left;} #a,#b,#c{border: 3px solid #000;min-height: 200px;margin-bottom: 10px;} </style> </head> <body> <div id="wrapper"> <div id="left"> <div id="a"></div> <div id="b"></div> </div> <div id="right"> <div id="c"></div> </div> </div> </body> </html>
  17. cssfreakie
    the amount of posts wont say anything but the amount of posts made.
  18. cssfreakie
    -edit: I was distracted, so here is a working example without the use of tables and without loads of css (including a heading) The extra classes are not needed in this example but allow to style each collumn. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>View Users</title> <link href="loginmodule.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { font: 11px Verdana, Arial, Helvetica, sans-serif; color: #666666; margin: 0px; padding: 20px 10px 0px; } /* general style */ .list{ margin:0; padding:0; width:840px; } .list li{ list-style: none; margin:2px 0; overflow:hidden; border-bottom:1px solid #eee; } .entries span, .heading span{ display:block; width:155px; /* (~width of list) / 5 keep in mind the boxmodel*/ float:left; padding-left:12px; border-right:1px solid #eee; line-height: 30px; height:30px; } .heading span{ background: #CAE8EA; } /* entries */ </style> </head> <body> <ul class="list"> <li class="heading"> <span class="id">ID</span> <span class="firstname">FIRST NAME</span> <span class="lastname">LAST NAME</span> <span class="login">LOGIN</span> <span class="password">PASSWORD</span> </li> <li class="entries"> <span class="id">9</span> <span class="firstname">John</span> <span class="lastname">Miller</span> <span class="login">fatmonkeys</span> <span class="password">hfhfhfhf</span> </li> <li class="entries"> <span class="id">9</span> <span class="firstname">John</span> <span class="lastname">Miller</span> <span class="login">fatmonkeys</span> <span class="password">hfhfhfhf</span> </li> <li class="entries"> <span class="id">9</span> <span class="firstname">John</span> <span class="lastname">Miller</span> <span class="login">fatmonkeys</span> <span class="password">hfhfhfhf</span> </li> <li class="entries"> <span class="id">9</span> <span class="firstname">John</span> <span class="lastname">Miller</span> <span class="login">fatmonkeys</span> <span class="password">hfhfhfhf</span> </li> <li class="entries"> <span class="id">9</span> <span class="firstname">John</span> <span class="lastname">Miller</span> <span class="login">fatmonkeys</span> <span class="password">hfhfhfhf</span> </li> </ul> </body> </html>
  19. cssfreakie
    well in a nutshell the absolute positioning will place all items on top of each other the way you used it now. A much better approach is the use of an unordered list. have a look at the code i provided at the bottom and run it. Not only do you need les mark up/css it much easier to read through the source code. Note though i did not mess with the header. you may do that your self to make it picture perfect (get rid of the table or make everything a table) but you'll get the idea The only thing you need to do when querying a database is to put the values in a list like this <li class="entries"> <span class="id">9</span> <span class="firstname">John</span> <span class="lastname">Miller</span> <span class="login">fatmonkeys</span> <span class="password">hfhfhfhf</span> </li> Also keep in mind that #id's can only be used 1 time I onticed in your code you use the same Id multiple time that will produces weird stuff in some browsers <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>View Users</title> <link href="loginmodule.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { font: 11px Verdana, Arial, Helvetica, sans-serif; color: #666666; margin: 0px; padding: 20px 10px 0px; } .textfield { font-size: 11px; color: #333333; background: #F7F7F7; border: 1px solid #CCCCCC; padding-left: 1px; } h1 { color: #99CC00; margin: 0px 0px 5px; padding: 0px 0px 3px; font: bold 18px Verdana, Arial, Helvetica, sans-serif; border-bottom: 1px dashed #E6E8ED; } a { color: #2D3954; font-size: 11px; } a:hover { color: #99CC00; } .err { color: #FF9900; } th { font-weight: bold; text-align: left; } #navigation {font-size:0.75em; width:150px;} #navigation ul {margin:0; padding:0;} #navigation li {list-style: none;} caption { padding: 0 0 5px 0; width: 700px; font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-align: right; } th { font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; border-top: 1px solid #C1DAD7; letter-spacing: 2px; text-transform: uppercase; text-align: left; padding: 6px 6px 6px 12px; background: #CAE8EA url(pacificbasintest/images/bg_header.jpg) no-repeat; } th.nobg { border-top: 0; border-left: 0; border-right: 1px solid #C1DAD7; background: none; } td { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; background: #fff; padding: 6px 6px 6px 12px; color: #4f6b72; } td.alt { background: #F5FAFA; color: #797268; } th.spec { border-left: 1px solid #C1DAD7; border-top: 0; background: #fff url(pacificbasintest/images/bullet1.gif) no-repeat; font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; } th.specalt { border-left: 1px solid #C1DAD7; border-top: 0; background: #f5fafa url(pacificbasintest/images/bullet2.gif) no-repeat; font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #797268; } /* general style */ .list{ margin:0; padding:0; width:840px; } .list li{ list-style: none; margin:2px 0; overflow:hidden; border-bottom:1px solid #eee; } .entries span{ display:block; width:155px; /* (~width of list) / 5 keep in mind the boxmodel*/ float:left; padding-left:12px; border-right:1px solid #eee; line-height: 30px; height:30px; } /* entries */ </style> </head> <body> <table id="mytable" cellspacing="0" summary="User Table"> <caption>Pacific Basin Users </caption> <tr> <th width="150" class="nobg" scope="col" abbr="Configurations">User ID</th> <th width="150" scope="col" abbr="fname">First Name</th> <th width="150" scope="col" abbr="lname">Last Name</th> <th width="150" scope="col" abbr="login">Login</th> <th width="150" scope="col" abbr="passwd">Password</th> </tr> <!-- i removed a tr --> </table> <ul class="list"> <!-- each user has it's own <li> --> <li class="entries"> <span class="id">9</span> <span class="firstname">John</span> <span class="lastname">Miller</span> <span class="login">fatmonkeys</span> <span class="password">hfhfhfhf</span> </li> <li class="entries"> <span class="id">9</span> <span class="firstname">John</span> <span class="lastname">Miller</span> <span class="login">fatmonkeys</span> <span class="password">hfhfhfhf</span> </li> <li class="entries"> <span class="id">9</span> <span class="firstname">John</span> <span class="lastname">Miller</span> <span class="login">fatmonkeys</span> <span class="password">hfhfhfhf</span> </li> <li class="entries"> <span class="id">9</span> <span class="firstname">John</span> <span class="lastname">Miller</span> <span class="login">fatmonkeys</span> <span class="password">hfhfhfhf</span> </li> <li class="entries"> <span class="id">9</span> <span class="firstname">John</span> <span class="lastname">Miller</span> <span class="login">fatmonkeys</span> <span class="password">hfhfhfhf</span> </li> </ul> </body> </html>
  20. cssfreakie
    could you run that page, than right click view source and copy paste that here. HAppy to take a look at that. Right now, I am pretty sure your use of position absolute it screwing things up. Did you try out the list btw?
  21. cssfreakie
    see TOS
  22. cssfreakie
    I would say I am not a big fan of it. And say why I don't use it. For designing (css html) it creates the ugliest code there is. That's why we don't use wysiwyg editors and instead use tools like firebug to test it. As far as coding php. I have no idea how well it is (in suggesting, and debugging). I always use netbeans and we even have a whole sticky for: what editor do you use? Most use something different than dreamweaver. But if they want you to use it, well I can't imagine it will be hard. Keep in mind in the end it's your brain that creates the code not the computer or some piece of software, how cool expensive it might be. So if you have better experience with other IDE's i would say you rather use that. If they don't take you because you don't like it. Get a bottle of champagne and celebrate that you made a right choice not working for them.
  23. cssfreakie
    don't set a width to the div, or use min-width. (as far as widths) for the height, you can use overflow:hidden, (if you don't set a height)
  24. cssfreakie
    well this is the part where you output the stuff from your database: while ($rows = mysql_fetch_assoc($sql)){ echo '<div id="positionid">' .$rows[$id]. '</div>' ; echo '<div id="positionfname">' .$rows[$fname]. '</div>' ; echo '<div id="positionlname">' .$rows[$lname]. '</div>' ; echo '<div id="positionlogin">' .$rows[$login]. '</div>'; echo '<div id="positionpassword">' .$rows[$password]. '</div>' ; } It has nothing to do with the table you created above that. What i would do is make a nice list. while ($rows = mysql_fetch_assoc($sql)){ echo <ul class="profilelist"> echo '<li id="positionid">' .$rows[$id]. '</li>' ; echo '<li id="positionfname">' .$rows[$fname]. '</li>' ; echo '<li id="positionlname">' .$rows[$lname]. '</li>' ; echo '<li id="positionlogin">' .$rows[$login]. '</li>'; echo '<li id="positionpassword">' .$rows[$password]. '</li>' ; echo </ul> } If you mean with it all appears on one line in your source code..? you a newline character \n withing double quotes "\n" Apart from your question. Keep in mind that if you hashed the password (i hope you do!instead of storing it in plain text) there is no use in outputting the password to the user.
  25. cssfreakie
    As Maq already said what are you trying to do, can you be more precise. spamming emoticons would help
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.