Search the Community
Showing results for tags 'div'.
-
Hello all, I have a master div (#master) and inside it I have other class boxes. I want to align my contentbox class up against the left border of my master div, but there is always a space there of about 10px. I am editing a tutorial file which I followed, so perhaps the original tutorial specified this space somewhere, I don't know, but I can't get rid of it. I have tried combinations of float-left, margin and padding none and played around with positioning but have had no joy. My master file CSS is: #master /*the box we work in - struggling to get this tight up against the header*/ { width: 1024px; height:auto; background-color: rgb(255,255,255); padding: none; padding-left:none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; border: 1px solid #999; /*replace with border: none; after the images have been alligned*/ } The content box class which I want to place within my master 'frame' and have aligned to the left is as followes. There are three content boxes but I want the first one to be placed to the left, within the master div. I have attached code for contentbox and associated images... .contentbox { width: 300px; margin: none; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: none; border: none; float: left;} .contentbox p {font-family:verdana; font-size:80%; line-height:140%;} .contentbox img { margin-bottom: 10px; border: none; padding-left: none; margin-left: none; float: left;}
-
Hi, I'm in the process of making a todo list app in HTML5. This is how it looks at this moment: I'm not a HTML coder so I first wanted to see if I could do the interface in CSS. I use border-image to handle 9 slicing and I'm happy with the result. The interface is fully responsive so I can scale the main DIV and everything scales accordingly (when scaling horizontally buttons will grow larger filling the space etc). The second part of my quest now is to make the relevant buttons clickable and linking on a weblink with preferably a mouseover and mousedown effect and this is where I'm stuck. My requirements are as follows; - The solution should work with the responsive aspect of the tool; the clickable zone should scale up or down automatically. - The text contained in the buttons should not affect the clickability or change the mouse pointer unless its the weblink mouse pointer (problem visible in example bellow). Nice but not required; - It would be great if the solution allowed me to tweak the clicking zone manually once(that will work well when the button scales). For example I have buttons with quite large shadows and I might want to avoid having the shadows clickable, instead I would substract a couple of pixels down and perhaps left and right from the button's DIV area. I've made a simple test page with the border-image method and my buttons images if anyone wants to give it a shot. Here's the JSFiddle page: http://jsfiddle.net/gYLn8/ And the html code: <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style type="text/css">.MouseoverButton { border-width: 15px 21px 17px 20px; /* border-image: url(http://www.stormunited.com/images/test/Screen.png) 35 35 35 35 repeat; */ /* -moz-border-image: url(http://www.stormunited.com/images/test/Screen.png) 35 35 35 35 repeat; */ -webkit-border-image: url(http://www.stormunited.com/images/test/Button_UnPushed.png) 15 21 17 20 repeat stretch; position: absolute; font-style: normal; color: #B94400; text-align: center; padding-right: 73px; padding-top: 47px; left: 63px; top: 108px; font-size: xx-large; cursor: hand;}body { background-color: #2A2A2E;}</style></head><img src="http://www.stormunited.com/images/test/Button_UnPushed.png" alt=""/><img src="http://www.stormunited.com/images/test/Button_Hover.png" alt=""/><img src="http://www.stormunited.com/images/test/Button_Pushed.png" alt=""/><body><div class="MouseoverButton">Button</div></body></html>
-
I have a piece of CSS as following (in order to align a div vertically center) #center { position:relative; height:200px; width:500px; top:50%; margin:-100px auto 0px auto; border-radius:10px; border:1px solid white;} In Chrome, it works well, as in the first illustration: but in Firefox, it's displayed as following: Please, explain to me the reason of the issue. You can check this issue in your browser by link: http://thichtomo.com/example/
-
Hey Guys... I really dont undertand th use of <div> tag in and meaning of "container" in:- <div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;"> If there is a link to w3schools then plz post..Please HELP!!!!!!
-
how to change the content of div tag by another html file externally using javascriptin my HTML file i want to cange content of div tag "hello freinds" with another file content i.e image.html without opening new tab<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Amazon</title><link rel="stylesheet" href="amazon.css" /> </head><body> <a href="http://www.microsoft.com" id="one" onMouseOver="return submenu('first','inline');" onMouseOut="return submenu('first','none');">Menu 1</a><br /> <a href="http://www.vnnotech.com" onMouseOver="return submenu('second','inline');" onMouseOut="return submenu('second','none');">Menu 2</a><br /> <a href="#" onclick="hi('third');" >Menu3</a> <div id="first"> This is first div </div> <div id="second"> This is second div </div> <div id="third"> hello friends </div><script>function submenu(item, visibility) {document.getElementById(item).style.display = visibility;return false;}function hi(item1){var newContent="http://localhost/project/image.html";document.getElementById(item1).innerHTML="image.html";return false;}</script></body></html>
-
Hi everyone. I have been trying to solve a problem that top navigation css affects other div menus. (margin, background color) Here my all source are: <!doctype html> <style> @charset "UTF-8"; body { font: 9pt, Helvetica, Arial, sans-serif !important; font-family: Sans-Serif; margin: 0px; padding: 0px; border:0px; color: #333; } dl, dt, dd{margin:0px; padding:0px; border:0px;} dl, dt, dd a, a:visited, a:hover, a:focus{margin:0px; padding:0px; border:0px;} div {border:0;} Img {border:0;} Img Img a:visited, Img a:hover {border:0; margin:0; padding:0;} a {margin:0; padding:0; border:0;} ul, li{list-style:none; border:0px; padding:0px; margin:0px;} ul, li a, a:visited, a:hover, a:focus{list-style:none; border:0px; padding:0px; margin:0px;} #wrapper{width:1000px; *zoom:1; margin:0px; padding:0 10px 0 10px; text-align:center;} #wrapper:after{content:""; clear:both; display:block; } #top_logo{ width:1000px; height:70px; border:#000 1px solid; text-align:center; } #top_logo ul li a, a:visited, a:hover{ position:relative; width:140; height:32px; padding:19px 430px 19px 431px; } #top_lang{ *zoom:1; position:absolute; width:1000px; top:0px; padding:0px; margin-top:2px; float:right; } #top_lang:after{content:""; clear:both; display:block;} #top_lang ul{position:relative;} #top_lang ul li{float:right;} #top_lang ul li a, a:visited{ margin:0; padding:0 1px 0 0; border:0; display:block; width:17px; height:12px; } #top_menu{width:1000px; height:50px; margin-bottom:20px; clear:both; border:1px #FF0000 solid;} #top_menu ul{position:relative;} #top_menu ul li{float:left; text-align:center;} #top_menu a, a:visited{ margin:0; padding:0; border:0; display:block; width:166px; height:32px; padding-top:18px; background-color:#345a92; color:#fff; font-size:10pt; font-weight:bold; text-decoration:none; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } #top_menu a:hover{background-color:#0575b2; font-weight:bold;} #top_menu ul li:last-child a, a:visited{ margin:0; border:0px; padding:0; width:170px; height:32px; padding-top:18px; } #top_menu ul li:last-child a:hover{ background-color:#cf4e56; } #top_menu ul li:last-child a:after{content:""; clear:both;} /* Top Menu CSS end */ </style> <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="dist/iepp.min.js"></script> <![endif]--> <body> <div id="wrapper"> <!-- top start --> <!-- language selection start --> <div id="top_logo"> <ul> <li><a href="index.php"><img src="Images/Logo_KFCSED.jpg" title="HOME" alt="to main page"></a></li> <!-- <li><img src="Images/main_slogan.jpg" id="slogan"></li> --> </ul> </div> <div id="top_menu"> <ul> <li><a href="about_us.php">About Us</a></li> <li><a href="get_involved.php">Get Involved</a></li> <li><a href="project.php">Projects</a></li> <li><a href="Partners.php">Partners</a></li> <li><a href="contact_us.php">Contact Us</a></li> <li><a href="#">DONATE</a></li> </ul> </div> <!-- top_navi menu end --> <!-- top end --> </div> </body> </html> div id "top menu" affect other divs and change all background color - top_logo, and other main contents. (I put example preview of IE8) Could you explain me why this li a, a:visited affects others? Have no idea.......and it is killing me! Thanks in advance.
-
I created a page that when you click on the link to the left the content of the new payre is shown in the iframe in the main content area. just before the content is loaded the iframe area flashes white and then the content is shown ok. I there something wrong with my coding? Have I overlooked something or is this just how the page gets loaded? I would like to have a smooth transition into the change of content. If you need to see my website to understand what I am trying to explain the site is snsg.us Thank you for any help Paul
-
I've got a webpage that pulls some XML tables. And at the top I want to have the user choose which page to load. the buttons work as is but if the buttons are clicked more than once the div that get's populated multiplies. So if they click button 1 then button 2 and button 2 and button 1 I get 4 tables on down the page.What I want to do is to clear the <div> element if it's not blank. Here's part of my function (duplicated for both buttons): function displayResultPS() { if (document.getElementById("example").value !=""){ document.getElementById("example").innerHtml = ""; } ...code that loads XML table that works } here's the HTML for the buttons and div: <input name="HC" id="HC" type="button" value="HC" onclick="displayResultHC()"> <input name="PS" id="PS" type="button" value="PS" onclick="displayResultPS()"> <div id="example" /> Why doesn't it work???
-
Hi i have a textarea. Text area is to enter label names. When i enter first letter of the label name the matching labels appear as dropdown so that they can select the label from the drop down instead of typing the whole name. This drop down is a div. Now i need to hide the div when i click elsewhere on the document except on the dropdown. how can i achieve this? I tried with onblur on the textarea but there is a pronblem with that. the problem is when drop down appears there will be list of tags in the drop down. now i have to capture the clicked tag from drop down but as onblur is geting fired the drop down is getting hiden and onclick event on the labels is not working. In the drop down every label is a div. Thanks in advance for helping?
-
I'm trying to make a site for senior project (A huge project in our school where we show skills we learn on our own), and I'll just come right out I have no idea what I'm doing. I'm surprised I have what I've got already. I'm trying to make a CSS document that makes it look like this image I'm about to attach, but so far, the CSS doc I've got looks nasty. Utterly colorless, and when I try adding color to the sides it just doesn't work. See attached image to see what I'm looking for. I'm not sure how to make this work however. And I've got 3 or 4 versions and methods I've attempted, and failed miserably at each. Here's my best one. Can I get some help? (And don't worry about logo placement, I'll fix that on my own after I get the rest figured out) CUE WALL OF CODE! @import url(http://fonts.googleapis.com/css?family=Philosopher);@font-face{font-family: rex;src: url(Fonts/rex.otf)} body{color: #FFFFFF;background-color: #7BD148;font-family: "philosopher", "Palatino Linotype", "Book Antiqua", Palatino, serif;text-indent: 25px;}.NavBar{color: #FFFFFF;background-color:#000000;font-family: "rex", "Arial Black", Gadget, sans-serif;text-indent: 25px;padding: 0;display: inline;text-align: center;width: 100%;float: left;margin: 0;list-style: none;background-color: #000000;border-bottom: 2px solid #d9d9d9;border-top: 2px solid #FFFFFF;}h1{text-align: center;font-weight: bold;font-size: 250%;font-family: "rex", "Arial Black", Gadget, sans-serif;}.article{-webkit-column-count:3; /* Chrome, Safari, Opera */-moz-column-count:3; /* Firefox */column-count:3;-webkit-column-gap:40px; /* Chrome, Safari, Opera */-moz-column-gap:40px; /* Firefox */column-gap:40px;-webkit-column-rule:4px outset #7BD148; /* Chrome, Safari, Opera */-moz-column-rule:4px outset #7BD148; /* Firefox */column-rule:4px outset #7BD148;background-color: #000000;margin-left:25px; margin-right:25px; }.stronger {font-weight: bold;}.tab{display: block;padding: 8px 15px;text-align: center;display: inline;border-right: 1px solid #000000;border-left: 1px solid #000000;}a:link {text-decoration:none;color:#00ADDC;} /* unvisited link */a:visited {text-decoration: none;color: #A47AE2;} /* visited link */a:hover {text-decoration: underline;color: #7BD148;} /* mouse over link */a:active {text-decoration: underline;color: #FF7436} /* selected link */ <!DOCTYPE html><html lang="en"> <head> <title>Template HTML page. </title> <meta content="text/html; charset=windows-1252" http-equiv="content-type"> <link rel="stylesheet" type="text/css" href="style/theme.css"> </head> <body> <div class="NavBar"> <ul class="NavBar"> <li class="tab"><a href="index.html"> Home </a></li> <li class="tab"><a href="challenges"> Challenges </a></li> <li class="tab"><a href="impact"> Impact </a></li> <li class="tab"><a href="powersources"> Power Sources </a></li> <li class="tab"><a href="action"> Action </a></li> </ul> </div> <div class="headline"> <h1> <p><img src="graphics/construction.png" width="728" height="90" alt="This site is under construction..."></p> <p><img src="graphics/banners/logo.png" alt="Energized."></p> <p> </p> <p>Template for Energized.</p> </h1> </div> <div class="article"> <p> Nearly everyone is concerned about how much fuel we use, either in the form of how much we spend on fuel or about global warming. Either way, we're paying for the energy we use to do nearly everything in our lives. Transportation, games, cleaning, cooking, construction, light, internet, EVERYTHING in our lives costs fuel. And everyone has a reason to cut back on fuel usage. There are ways to cut back on fuel usage, either by picking up a skill or simply making a new habit (or breaking one). But how effective is this? Well, it's different for everyone, but I bet that it can be reduced by half for some folks.</p> <p>Will it work for you? I can't tell, but I can help you to find out for yourself. Go ahead!<!--zzz...zZz...ZzZ...ZZZ...--> </p> </div> </body></html>
-
Am designing a simple php forum platform with mysql database. But on redirecting from a page called main_forum.php to a page called view_topic.php, am stuck with this error message------> You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'WHERE id='4'' at line 1 What should i do, please am dieing ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////main_forum.php//// <?phpinclude("connect_to_mysql.php");$forum_output='';$sql=mysql_query("SELECT * FROM forum_question ORDER BY id DESC LIMIT 6") or die(mysql_error()); while($row=mysql_fetch_array($sql)){ $id=$row['id']; $topic=$row['topic']; $view=$row['view']; $reply=$row['reply']; $email=$row['email']; $datetime=$row['datetime']; $forum_output.=' <table width="1300" border="0" cellspacing="2" cellpadding="6" align="center" ><tr> <th width="49" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">ID</li></ul></th> <th width="362" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Your Topic</li></ul></th> <th width="120" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Views</li></ul></th> <th width="100" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Reply</li></ul></th> <th width="83" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Email</li></ul></th> <th width="100" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Date</li></ul></th> </tr><br /><br />'; $forum_output.=' <tr> <td bgcolor="#CCCCCC">'.$id.'</td> <td bgcolor="#CCCCCC"><a href="view_topic.php?id='.$id.'"><font size="large">'.$topic.'</font></a></td> <td bgcolor="#CCCCCC" align="center">Viewed by '.$view.' persons</td> <td bgcolor="#CCCCCC" align="center"><b>'.$reply.'</b></td> <td bgcolor="#CCCCCC">'.$email.'</td> <td bgcolor="#CCCCCC">'.$datetime.'</td> </tr> <tr> <td align="center" colspan="2" bgcolor="#CCCCCC">Create New Topic</td> </tr> </table><br /><br />'; }?><!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>Untitled Document</title><link href="style.css" rel="stylesheet" type="text/css" media="screen" /></head><body><div id="mainwrapper"> <div id="container"> <?php echo $forum_output; ?> <!---<table width="1300" border="0" cellspacing="1" cellpadding="6" align="center" > <!--- <tr> <th width="49" bgcolor="#004200" scope="col" style><h2 style="color: #FFF">ID</h2></th> <th width="362" bgcolor="#004200" scope="col"><h2 style="color: #FFF">TOPIC</h2></th> <th width="302" bgcolor="#004200" scope="col"><h2 style="color: #FFF">VIEWS</h2></th> <th width="264" bgcolor="#004200" scope="col"><h2 style="color: #FFF">REPLY</h2></th> <th width="83" bgcolor="#004200" scope="col"><h2 style="color: #FFF">EMAIL</h2></th> <th width="89" bgcolor="#004200" scope="col"><h2 style="color: #FFF">DATE</h2></th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr>----> <!-- <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> ---> </div></div></body></html> //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////view_topic.php/////// <?php///Error reportingerror_reporting(E_ALL);ini_set('display errors','1');include_once("connect_to_mysql.php");$topic_output='';$id=$_GET['id'];$sql="SELECT * FROM forum_question WHERE id='".$_GET['id']."'";$result=mysql_query($sql) or die(mysql_error()); $row = mysql_fetch_array($result); $name=$row['name']; $topic=$row['topic']; $view=$row['view']; $reply=$row['reply']; $email=$row['email']; $detail=$row['detail']; $datetime=$row['datetime']; $topic_output=' <table width="900" height="127" border="0" cellpadding="2" cellspacing="4" align="center"> <tr> <th scope="col"><li style="color:#004200;"><h3>'.$topic.'</h3></li></th> </tr> <tr> <td bgcolor="#CCCCCC"><div><p width="500px">'.$detail.'</p></div></td> </tr> <tr> <td bgcolor="#004200"><li style="color:white;"><strong>By: '.$name.'</strong> <strong> Email: '.$email.'</strong></li></td> </tr> <tr> <td bgcolor="#004200"><li style="color:white;"><strong>Date/Time: <font>'.$datetime.'</strong></li></td> </tr> <tr> <td> </td> </tr> </table>'; ?> <?php///Error reportingerror_reporting(E_ALL);ini_set('display errors','1');$answer_output='';$sql2=mysql_query("SELECT * FROM forum_answer WHERE question_id='$id'") or die(mysql_error());$row=mysql_fetch_array($sql2);while($row){ $a_id=$row['a_id']; $a_name=$row['a_name']; $a_email=$row['a_email']; $a_answer=$row['a_answer']; $a_detail=$row['a_detail']; $a_datetime=$row['a_datetime']; $answer_output.=' <table width="600" height="127" border="0" cellpadding="2" cellspacing="4" align="center"> <tr> <td><li style="color:#004200;"><strong>By: '.$a_name.'</strong></li></td> </tr> <tr> <td bgcolor="#CCCCCC"><div><p width="500px" align="center">'.$a_detail.'</p></div></td> </tr> <tr> <td bgcolor="#004200"></li></td> </tr> <tr> <td bgcolor="#004200"><li style="color:white;"><strong>Date/Time: '.$a_datetime.' <strong> Email: '.$a_email.'</strong></strong></li></td> </tr> </table> '; }?><!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>Untitled Document</title></head><body><div align="center" style="margin:0px 24px 0px 24px" id="topic_output"><div align="center" style="margin:0px 24px 0px 24px" id="topic_output"> <?php echo $topic_output; ?></div><br /><br /><div align="center" style="margin:0px 24px 0px 24px" id="answer_output"> <?php echo $answer_output; ?></div><br /> <?php$sql3=mysql_query("SELECT view FROM forum_question WHERE id='$id'") or die(mysql_error()); $row = mysql_fetch_array($sql3); $view=$row['view']; ////if have no counter value set counter ==1 if($view=0){ $view=1; } $sql4=mysql_query("INSERT INTO forum_question(view) VALUE('$view') WHERE id='$id'") or die(mysql_error()); ///Count more values $addview=$view+1; $sql5=mysql_query("UPDATE forum_question SET view='$addview' WHERE id='$id'") or die(mysql_error()); mysql_close(); ?><br /><br /><br /><div align="left" style="margin:0px 0px 0px 24px" id="table"><form action="add_answer.php" method="POST"><table width="595" border="0" cellspacing="0" cellpadding="2"> <tr> <td width="203"><li style="color:#004200;">NAME:</li></td> <td width="386"><label for="a_name"></label> <input type="text" name="a_name" id="a_name" size="60"/></td> </tr> <tr> <td><li style="color:#004200;">EMAIL:</li></td> <td><input type="text" name="a_email" id="a_email" size="60"/></td> </tr> <tr> <td valign="bottom"><li style="color:#004200;">ANSWER:</li></td> <td><label for="a_answer"></label> <textarea name="a_answer" id="a_answer" cols="57" rows="10"></textarea></td> </tr> <tr> <td colspan="2"> <input type="submit" name="submit" id="submit" value="SUBMIT" /> <input type="reset" name="reset" id="submit2" value="RESET" /> </td> </tr></table><input name="id" type="hidden" value="<?php echo $id; ?>"/></form></div></div></body></html>
-
Am designing a simple php forum platform with mysql database. But on redirecting from a page called main_forum.php to a page called view_topic.php, am stuck with this error message------> You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'WHERE id='4'' at line 1 What should i do, please am dieing ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////main_forum.php//// <?phpinclude("connect_to_mysql.php");$forum_output='';$sql=mysql_query("SELECT * FROM forum_question ORDER BY id DESC LIMIT 6") or die(mysql_error()); while($row=mysql_fetch_array($sql)){ $id=$row['id']; $topic=$row['topic']; $view=$row['view']; $reply=$row['reply']; $email=$row['email']; $datetime=$row['datetime']; $forum_output.=' <table width="1300" border="0" cellspacing="2" cellpadding="6" align="center" ><tr> <th width="49" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">ID</li></ul></th> <th width="362" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Your Topic</li></ul></th> <th width="120" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Views</li></ul></th> <th width="100" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Reply</li></ul></th> <th width="83" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Email</li></ul></th> <th width="100" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Date</li></ul></th> </tr><br /><br />'; $forum_output.=' <tr> <td bgcolor="#CCCCCC">'.$id.'</td> <td bgcolor="#CCCCCC"><a href="view_topic.php?id='.$id.'"><font size="large">'.$topic.'</font></a></td> <td bgcolor="#CCCCCC" align="center">Viewed by '.$view.' persons</td> <td bgcolor="#CCCCCC" align="center"><b>'.$reply.'</b></td> <td bgcolor="#CCCCCC">'.$email.'</td> <td bgcolor="#CCCCCC">'.$datetime.'</td> </tr> <tr> <td align="center" colspan="2" bgcolor="#CCCCCC">Create New Topic</td> </tr> </table><br /><br />'; }?><!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>Untitled Document</title><link href="style.css" rel="stylesheet" type="text/css" media="screen" /></head><body><div id="mainwrapper"> <div id="container"> <?php echo $forum_output; ?> <!---<table width="1300" border="0" cellspacing="1" cellpadding="6" align="center" > <!--- <tr> <th width="49" bgcolor="#004200" scope="col" style><h2 style="color: #FFF">ID</h2></th> <th width="362" bgcolor="#004200" scope="col"><h2 style="color: #FFF">TOPIC</h2></th> <th width="302" bgcolor="#004200" scope="col"><h2 style="color: #FFF">VIEWS</h2></th> <th width="264" bgcolor="#004200" scope="col"><h2 style="color: #FFF">REPLY</h2></th> <th width="83" bgcolor="#004200" scope="col"><h2 style="color: #FFF">EMAIL</h2></th> <th width="89" bgcolor="#004200" scope="col"><h2 style="color: #FFF">DATE</h2></th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr>----> <!-- <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> ---> </div></div></body></html> //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////view_topic.php/////// <?php///Error reportingerror_reporting(E_ALL);ini_set('display errors','1');include_once("connect_to_mysql.php");$topic_output='';$id=$_GET['id'];$sql="SELECT * FROM forum_question WHERE id='".$_GET['id']."'";$result=mysql_query($sql) or die(mysql_error()); $row = mysql_fetch_array($result); $name=$row['name']; $topic=$row['topic']; $view=$row['view']; $reply=$row['reply']; $email=$row['email']; $detail=$row['detail']; $datetime=$row['datetime']; $topic_output=' <table width="900" height="127" border="0" cellpadding="2" cellspacing="4" align="center"> <tr> <th scope="col"><li style="color:#004200;"><h3>'.$topic.'</h3></li></th> </tr> <tr> <td bgcolor="#CCCCCC"><div><p width="500px">'.$detail.'</p></div></td> </tr> <tr> <td bgcolor="#004200"><li style="color:white;"><strong>By: '.$name.'</strong> <strong> Email: '.$email.'</strong></li></td> </tr> <tr> <td bgcolor="#004200"><li style="color:white;"><strong>Date/Time: <font>'.$datetime.'</strong></li></td> </tr> <tr> <td> </td> </tr> </table>'; ?> <?php///Error reportingerror_reporting(E_ALL);ini_set('display errors','1');$answer_output='';$sql2=mysql_query("SELECT * FROM forum_answer WHERE question_id='$id'") or die(mysql_error());$row=mysql_fetch_array($sql2);while($row){ $a_id=$row['a_id']; $a_name=$row['a_name']; $a_email=$row['a_email']; $a_answer=$row['a_answer']; $a_detail=$row['a_detail']; $a_datetime=$row['a_datetime']; $answer_output.=' <table width="600" height="127" border="0" cellpadding="2" cellspacing="4" align="center"> <tr> <td><li style="color:#004200;"><strong>By: '.$a_name.'</strong></li></td> </tr> <tr> <td bgcolor="#CCCCCC"><div><p width="500px" align="center">'.$a_detail.'</p></div></td> </tr> <tr> <td bgcolor="#004200"></li></td> </tr> <tr> <td bgcolor="#004200"><li style="color:white;"><strong>Date/Time: '.$a_datetime.' <strong> Email: '.$a_email.'</strong></strong></li></td> </tr> </table> '; }?><!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>Untitled Document</title></head><body><div align="center" style="margin:0px 24px 0px 24px" id="topic_output"><div align="center" style="margin:0px 24px 0px 24px" id="topic_output"> <?php echo $topic_output; ?></div><br /><br /><div align="center" style="margin:0px 24px 0px 24px" id="answer_output"> <?php echo $answer_output; ?></div><br /> <?php$sql3=mysql_query("SELECT view FROM forum_question WHERE id='$id'") or die(mysql_error()); $row = mysql_fetch_array($sql3); $view=$row['view']; ////if have no counter value set counter ==1 if($view=0){ $view=1; } $sql4=mysql_query("INSERT INTO forum_question(view) VALUE('$view') WHERE id='$id'") or die(mysql_error()); ///Count more values $addview=$view+1; $sql5=mysql_query("UPDATE forum_question SET view='$addview' WHERE id='$id'") or die(mysql_error()); mysql_close(); ?><br /><br /><br /><div align="left" style="margin:0px 0px 0px 24px" id="table"><form action="add_answer.php" method="POST"><table width="595" border="0" cellspacing="0" cellpadding="2"> <tr> <td width="203"><li style="color:#004200;">NAME:</li></td> <td width="386"><label for="a_name"></label> <input type="text" name="a_name" id="a_name" size="60"/></td> </tr> <tr> <td><li style="color:#004200;">EMAIL:</li></td> <td><input type="text" name="a_email" id="a_email" size="60"/></td> </tr> <tr> <td valign="bottom"><li style="color:#004200;">ANSWER:</li></td> <td><label for="a_answer"></label> <textarea name="a_answer" id="a_answer" cols="57" rows="10"></textarea></td> </tr> <tr> <td colspan="2"> <input type="submit" name="submit" id="submit" value="SUBMIT" /> <input type="reset" name="reset" id="submit2" value="RESET" /> </td> </tr></table><input name="id" type="hidden" value="<?php echo $id; ?>"/></form></div></div></body></html>
-
Maybe I'm missing something obvious here, but I'm having a problem with max-width when applied to a div with padding. Can anyone tell me what the issue is here? If I have a div that has a max-width of 960px and a width on 100% it works as expected. If I then add padding, the div does not contract with the browser until it has overlapped it a certain ammount. <!DOCTYPE html><html><head><style> .content {width:100%;max-width:920px;padding:20px;background-color:white;height:500px;margin-left: auto;margin-right:auto;}body {margin:0px;padding:0px;background-color:red;}</style></head><body><div class="content">But I must explain to you how all this mistaken idea of denouncing of a pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</div></body></html>
-
0 down vote favorite Hello! I am trying to style this page: http://techno-french.com/french-news-room and for the life of me, I cannot figure out why the H1 heading, Learn French Online Free with Mots de L’actu is partly obscured by the right floated div above it. I have tried putting 2em of bottom margin on the Div above, and then tried putting top margin on the Div containing the Heading. It works fine in Dreamweaver outside of Wordpress so I suspect the CSS is right, but inside of Wordpress, the heading slips under the Div above it. It's driving me crazy. I'm not expert, but this seems to be coded correctly. Here's the code: <div style="float: left; width:360px; height:467px;"><h2 style="text-align: center;">Top Stories: Le Progres</h2>[Wordpress shortcode for an advanced iFrame]</div><div style="float: right; width:517px; height:560px; margin-bottom: 2em;"><h2>Funny Helps Learning</h2>[Wordpress shortcode for an advanced iFrame}</div><div style="float: left; clear: both;"><h1 style="text-align: center; color: #0b00dd;">Learn French OnlineFree with Mots de L'actu</h1>TEXT</div> Can anyone help me. I'm green, but not too green. Barry
-
Hi all! I'm not entirely certain I've got this post in the right forum, since I suspect the solution will be javascript rather than css, but the problem is with the css so I figured I'd start here. I've done extensive Googling for this problem and still come up blank, so any help anyone can give would be much appreciated! I have a div empty of everything except a repeated background image that I would like stretching from almost the top of the page (90px down) right to the very bottom. Obviously, making the height:100%; only stretches to the bottom of the browser window. If the content makes the page scroll, the div doesn't go any further down. I'm hoping for a css solution to this, but after searching and finding that's probably not possible, I'm willing to go with a javascript or jQuery solution, or php if that would help? I'm brand new to these languages so please be gentle! The html: <!DOCTYPE html><html><head> <link href="main.css" rel="stylesheet" type="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script></head><body><header id="top-trim"></header><header id="main-header"></header></body></html> The css (that matters): body{ font-family: conquerorsans, Tahoma, verdana, sans-serif; font-size: 18pt; color: #9e8166; letter-spacing:2px; background-color: #e6e0d5; background-image:url(images/layout/whitepaper.jpg); background-position:0px 0px; background-repeat:repeat;}#top-trim{ position:absolute; left:90px; top:0px; height:20px; width:550px; background-image:url(images/layout/brownpaper.jpg);}#main-header{ position:absolute; left:90px; top:90px; bottom:0px; margin-bottom:0px; width:550px; min-height:100%; display:table-cell; background-image:url(images/layout/brownpaper.jpg);} And the full page is here. The cheating column idea (using a background image with the column in it) won't work for this unfortunately, since the page is planned to be side-scrolling and would therefore require a background image several thousand pixels long to stop the column from repeating and that would be hellishly load-time-heavy. I'd also prefer not to just specify that the div be 10000px high and scroll the thing on forever, because that's just untidy and lazy.
-
Hey guys, I can't figure out why my top image on my table isn't working right. The bottom border won't show up and the image is clearly readjusting to something because the quality is awful when I put it into my coding, but it's fine on photobucket. I've adjusted the whole table size, the tr size, the td size, the padding and the margin on absolutely everything. I can't figure it out. Please help! Page i'm struggling with: audreyholmesmusic.webs.com/testhome.htm Let me know if 'view source' doesnt work and you need the code.
-
Hi there! I was just wondering, there is a theme named 'Tetris' for wordpress. (Link) When posts are placed they float to the left and line up to the top neatly. Well currently i am creating a wordpress based website, and on the pages i use '#homediv' to id the div's that i want to do the same. Problem with how i coded it: they do float left, but do not line up to the top... I tried to search the code of 'Tetris' how they manage to do it, but couln't figure it out. If you know how to make this happen please tell me (and the others that search for the same problem on Google and land here). Code as it is now: /*CSS OF HOMEDIV:*/ #homediv { width:45%; min-width:180px; float: inherit; border:solid 1px #7D1517 ; margin:1%; border-bottom-left-radius:10px; -moz-border-bottom-left-radius:10px; -o-border-bottom-left-radius:10px; -webkit-border-bottom-left-radius:10px; border-bottom-right-radius:10px; -moz-border-bottom-right-radius:10px; -o-border-bottom-right-radius:10px; -webkit-border-bottom-right-radius:10px; padding-bottom:15px; } #homediv h5 { text-align:center; background:#7D1517; color:#FFF; } #homediv h6 { margin-left:3%; margin-right:2%; } #homediv p { margin-left:2%; margin-right:2%; } Image example: As you see, they do not line up to top. Thanks in advance! - Marcel
-
Hi how can I set the position of the background div in center vertically , same space between top and bottom . in this example. http://w3schools.com/css/tryit.asp?filename=trycss_transparency i tried margin-top:auto; margin-bottom:auto; but it didn't work! thanks
-
I am trying to get our social media icons to stay in place, no matter how zoomed in or out you are (ctrl+scroll). We have clients with varying monitor sizes, technologies, browsers, etc. The website is www.cleantelligent.com Currently our icons are floated and aligned right, so no matter how you look at it, they line up with the right side of the screen. How do I get them to "stick" right under the "get started" button, no matter where you look? There's a lot of CSS formatting on this page that deals with the slider right below and I don't want to displace or mess anything else up. Is there any way to get them to stay right under the button while in their own div, span, aside, or whatever? The code is as follows:Quote:<div id="main"> <div id="primary" class="showcase"> <div id="content" role="main"> <article id="post-89" class="post-89 page type-page status-publish hentry intro"><header class="entry-header"><h2 class="entry-title">Home</h2> </header><!-- .entry-header --> <div class="entry-content"><!--SOCIAL MEDIA ICONS--><div style="align: right; float: right; padding-right: 50px;" id="first" class="widget-area" role="complementary"><aside id="text-2" class="widget widget_text"><div class="textwidget"><div class='footer_social_icons'><a href="http://www.facebook.com/CleanTelligent"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/facebook.png" /></a><a href="http://www.linkedin.com/company/cleantelligent_software"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/linkedin.png" /></a><a href="https://twitter.com/#!/CleanTelligent1"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/twitter.png" /></a><a href="/news-and-events/rss.xml" ><img src='/wp-content/uploads/2012/05/Blog-button.png' ></a></div></div></div><!--END OF SOCIAL MEDIA ICONS--> <div class='slider' id='slider-1'><div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div><img src="/wp-content/uploads/2012/02/clean-slide-1.jpg" alt="Slide 1" /><div class='slide-desc'><h2>Productivity</h2>We believe technology is not only for automation, but for empowerment. <a class="alignright" title="Productivity" href="/about-us/janitorial-service-software/efficiency-in-the-workplace/">Meet and Exceed Expectations</a> </div></div>
-
Hey w3s again, im currently trying to make a foot div for a green webshop (for fun). Anyhow, im using this code: #foot { width:950px; height:20px; color:#FFF; background-color:#90CA77; bottom: 0px;} what i am trying to, is go take the whole foot div down to the bottom, but it will not do it. Any ideas? Oo...it is working so far, but wont go down, and that is all i need it to. here is the rest of my CSS: img {border: none;}a img { border: none;}html, body {height: 100%; /*to fill it out with no white borders or weird remain space...*/margin: 0em;padding: 0em;background-color: #D0D6B8;}#wrapper {width: 950px;margin: 0 auto;background-color: #ECEEE1; top: 0px;bottom: 0px;height: 100%;}#logo_holder { width: 950px; /*or 100%*/ height: 85px; background-color:#595959;} #menu_holder { width: 940px; /*Original: 950px, minus 10 for 5px at left and right (padding)...*/ height: 20px; background-color:#90CA77; padding-left: 5px; padding-right: 5px; border: none;} /* unvisited link */ #menu_holder a:link { color:#FFF; text-decoration:none; } /* visited link */ #menu_holder a:visited { color:#FFF; text-decoration:none; } /* mouse over link */ #menu_holder a:hover { color:#FFF; text-decoration:none; } /* selected link (clicking on it with mouse)... */ #menu_holder a:active { color:#FFF; text-decoration:none; }#foot { width:950px; height:20px; color:#FFF; background-color:#90CA77; bottom: 0px;}
-
Hello internet - here is what I would like to do: I want to load an html file into a <div> element in my current html file.I have several buttons on my webpage where I would like to be able to click the button so that the <div> element that I placed in the middle of the page (which is sort of large 500px by 500px) will display a dynamic file where I would have more buttons and <a href> links and anything that html page would have coded in it. Where should I start? You help as always is appreciated!!! -
EDIT: i found out myself, sorry for a empty post! ..
-
I've got problem, how to automatic resize height of in . Here I'am trying to make pure css slideshow, and its works, but when I scale browser window widthchanges and height - doesn't. Why? and how to fix this? more of all I'll try to use different hack/advices and use a lot of them here, but it didnt work. When I change width manualy(in css), height changes.I found that problem may be in #slides{width: 500%;...} , but I need it! How to change height dynamic in this examples? p.s. sorry for my bad english...I hope you understand me....p.p.s. what I want Is adopt it for mobile devices. I know about @media but trying to make it without it.. Tnx for any help...
-
Hi everybody. First of all, this is my very first post, and I wanted to congratulate and thank the creators of this site. It's really really helpful and I've been using it for a long time before even needed to post. I'm working on a music band site. It will look like a bandcamp site, but I want to be able to add/remove/modify/personalize everything. I'm just using a free web hosting for testing, and the code is still rough, but it's only to see how it looks like. The URL is: http://costarica.myartsonline.com/tdr/ My first two problems are with the "main" body part. I've created a DIV with a transparency so you can see the background image, but I want only the "box" to be transparent, not the content. You can see the code by clicking on the right button: View source code. For now, the file is really short, and I haven't used a separate CSS file (again, it's just to see how it looks like). The second one is the top and bottom margin of that main body box. I've used a DIV layout inside the main one, cause the content was too stuck to the left, but there's probably a better way to do it. I'm open to suggestions. The thing is that I can't manage to leave a top and bottom margin, unless I use the <br> tag, which I don't like. The margin-top and margin-bottom parameters don't seem to do anything in any of the DIV's style parameters (I've tried in both of them). .transparent {background-color: #F4F3F3;height: 1000px;width:1000px;zoom: 1;filter: alpha(opacity=50);opacity: 0.5;margin-left: auto ;margin-right: auto ;border-radius: 5px;box-shadow: 3px 3px 3px #000000;}<div id="body2" class="transparent"><div id="body3" style="height:auto;width:950px;margin-left:auto;margin-right:auto;"><br><br>(...)</div></div> Thank you
-
Hello once again, i will do this one short, since i feel stupid asking about it, but its a must since i cannot remember, and might be a rookie question -.-'... anyhow, here is my css: .chat_div_bottom_global_friend_list_button a:hover { text-decoration:none; color:#CDCDCD; background-color:#900; } .chat_div_bottom_global_friend_list_button a:link,a:visited,a:active { text-decoration:none; color:#CDCDCD; } here is my html: <span class='chat_div_bottom_global_chat_rooms_button'> Chat Room (Public)</span> <span class='chat_div_bottom_global_friend_list_button'> <a href='#'>Friend list (0)</a></span> now the question, i have a background to the link, but i would like that background, to cover the whole span if possible, any ideas? X)... [PICTURE ATTACHED]
