Search the Community

Showing results for tags 'div'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar




Website URL








Found 94 results

  1. I am trying to have my background in my division take up it's full height but it is only taking up the height of the header. I've tried setting the height but it doesn't budge. It will only fill as much content as I have in the section, the problem is I only want the one header and that's all. I am simply trying to recreate a webpage that I made on weebly with for my class in html but I am really stuck on this. I will post the code below and a screen shot. <!DOCTYPE html> <html> <head> <style> .first { background-image: url('trampoline.jpg'); margin-bottom: 1000px; background-size: cover; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; font-family: arial; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } .footer { background-color: grey; color: white; padding: 15px; } </style> </head> <body> <ul> <li style="float:right"><a href="#news">HOME</a></li> <li style="float:right"><a href="#contact">ABOUT ME</a></li> <li style="float:right"><a href="#about">ABOUT FAMILY</a></li> <li style="float:right"><a href="#about2">ABOUT SCHOOL</a></li> </ul> <div class="first"> <h1>Hi, I'm Mr. Buza. Technology teacher</h1> </div> <div class="clearfix"> <div class="column content"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> </div> <div class="footer"> <p>Footer Text</p> </div> </body> </html>
  2. Interesting problem with the W3 schools checker 'Nu Html Checker'. I am using a CSS file that I have written which includes a reference 'area1'. I am calling it on many occasions e.g. <a href="mountains.php" id = "area1">Mountains</a> as I only want 'Mountains' to be affected by this particular CSS. When I run Nu Htnl Checker, I get this: Error: Duplicate ID area1. From line 330, column 148; to line 330, column 185 ></td><td><a href="mountains.php" id = "area1">Mounta Surely I can use a piece of CSS more than once in an html document??
  3. I recently took over somebody else's website and am trying to get an element to size up and down when the window changes size. I tried to add Position: Absolute; to no avail. I currently have it as Position: Fixed so it moves with the scroll. Specific page is here and I'm referring to the three sidebar nav menus on the left. #mySidenav a { position: fixed; /* Position them relative to the browser window */ left: -25px; /* Position them outside of the screen */ transition: 0.3s; /* Add transition on hover */ padding: 15px; /* 15px padding */ width: 200px; /* Set a specific width */ text-decoration: none; text-align: center; font-size: 18px; /* Increase font size */ color: white; /* White text color */ border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */ } #mySidenav a:hover { left: 0; /* On mouse-over, make the elements appear as they should */ text-decoration: underline; } #board { top: 320px; background-color: #5d2a2c; } #blog { top: 380px; background-color: #5d2a2c; } #kidswehelp { top: 440px; background-color: #5d2a2c; Any help would be beyond amazing.
  4. What is the difference between: <form> tag and <div> tag ?
  5. To the developers of W3.CSS thank you so much for creating a platform that in my opinion, uses less code to create a web responsive site with bells and whistles built in. I had hand coded a webpage template, but now that Google won't rank your site properly unless it is responsive, thus my template goes by the way of the 8-track. W3 provided the coding to make sites responsive, but that was still more time that I didn't have. Then, came W3.css now I can replicate my template using W3css, THANK YOU! my original template used layers via z index, placement via <div>, and in page css. My query is what is the proper syntax and use for z index within W3.css and within the container, and can multiple layers be used with a container? also can background images be used within W3.css? I see you have colors, what about images? also can the rollover feature within W3.css be used with custom images, and for non menu? based on replies, I will update your free template accordingly. Thanks once again
  6. Hello everyone, I am trying to make a navigation bar. I want the buttons to be image hyperlinks that change opacity on hover and click. This is how I am doing it: <style> .jw-button a:link, .jw-button a:visited { border: 2px dotted orange; opacity: 0.6; overflow: hidden; } .jw-button a:hover, .jw-button a:active { border: 2px dotted yellow; text-decoration: none; /* to remove the little line */ opacity: 0.95; overflow: hidden; } </style> <body> <div class="jw-button"> <a href=""> <img src="" alt="illustrations" width=auto height="25px" /> </a> <a href=""> <img src="" alt="tutorials" width=auto height="25px" /> </a> <a href=""> <img src="" alt="references" width=auto height="25px" /> </a> <a href=""> <img src="" alt="contact" width=auto height="25px" /> </a> <a href=""> <img src="" alt="facebook" width="30px" height="30px" /> </a> <a href=""> <img src="" alt="instagram" width="30px" height="30px" /> </a> </div> </body> However, as you can see the results at: , the resulting divs (at top of page navigation bar, in the orange dotted lines) that contain the image hyperlinks do not expand to fit the image hyperlinks. I have put "display: inline-block;" in the code, but the divs still are not expanding. Do you know why this is? Thank you, Jason
  7. Hi all, I just finished a webdesign course for home study. Now I am working on my first assigment but it's going quite the way I want... I want to use a background image in my header div. Here is my code, what am I doing wrong? Can anybody help me please? Thank you! my CSS: #header { background-image: url(header.jpg); background-size: cover; background-position: fixed; text-align: center; width: 100%; height: 200px; top: 100px; } HTML <div id="header"> <header> <div class="nav"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Classes</a></li> <li><a href="">Contact</a></li> </ul> </div> </header> </div>
  8. Let's pretend, there's a <div> on a page. There's a usual HTML form inside it that sends information to another php-file. By default, the visibility of the div is hidden, and the click on the button makes it visible. The question is how to close the form (i.e. hide the div) using a button or <a> element on the div, WITHOUT the sending data to php-file. In other words, how to close this <div> as if it is usual popup-window, without changes?
  9. I have a question about margin-top. I made a css script with span columns. The higher columns are supposed to push the lower ones down. I place them in a div, in here multiple columns. The second column though, takes the top of the outer div as reference (not sure if that tis called parent). I find this strange. I tried to make a second div inside but it didnt work. Can you only use div as a reference point or also a span element or p ?
  10. Hello! I am quite new to CSS, and have learned much the past months, but I still have some things that trouble me and i struggle to find a sollution. I do work with div tags. Problem 1: At the right, you can see "New Comics" with an unorderd list consisting of two items at this moment. The date is "float: right". it shows good on my screen, and any other medium to large screen resolution, but once it gets to small, the date gets ON the border line. I tried: min-width:300px Result: It jumped UNDER the content that should be on the left of it. URL: Problem 2: The images here are floating right and left respectively. Again, on my screen, or any other large screen, there is no visible problem, but once you start resizing the screen, the text does no longer fit into the div's. I tried: min-width. Result: No visible change. URL: Problem 3: When resizing the width of the comic images gets adjusted, but the height does not, resulting in well, a weird image. The height should also change accordingly. In addition, on smaller screens the word (heading1) Chapters sometimes sticks out of it's Div. How would this be solvable? URL: Question: Is it possible to make the website appaer like on my screen on other resolutions as well? By simply "resizing it" to their resolution (example: My resolution: 800 x 600, and visitor X resolution 400 x 300, to let the CSS resize the page to 50%, including text and images,...?) Thanks in advance =D
  11. Hi guys it's been forever I haven't touch code and I ended up with this situation. I have no problem to display the page with IE and FF. I have a div that contain embedded posts from a facebook page that should not exceed 500px by 500px and keep the left of the page. On the right there is an other div a little bit smaller that should float right but for some reason the facebook div seems to clear right only with chrome. I've been trying to wrap it, force my other div, and find a hack but no success. Since every attempt failed I went back to my original code. Your help is appreciated, thx! the address of the page is css: /****************** #desc Style ******************/#desc{ float: right; width:450px; max-width:450px; display:block;}#desc>.innerBox>.contentBox{ height: 484px;} html: <div class="outerBox fb-page" data-href="" data-width="500" data-height="500" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true" data-show-posts="true"> <div class="fb-xfbml-parse-ignore"> <blockquote cite=""> <a href="">WhiteSpiders</a> </blockquote> </div></div><div id="desc" class="outerBox"><div class="innerBox"><div class="contentBox">
  12. guys i need your help. .a {width:500px; height:300px; overflow-x:hidden; overflow-y:auto; } i have a div which shows messages like facebook. i want to open the page with overflow-y but it wont up it will show end of div. Scroll should be down when page opens.
  13. Hello. i dont get why my background in my Container isn't showing even to i've done margins in it that works (The code proving that it can find the image) (The result of that coding) but when i write in the body of the html it looks like this (then thats the result) even tho i write in the lower "tier" div it's still inside the margin aswell but it's suppose to be a background right? and with this code <style>body { background-image: url("Images/Background/Wall.jpg"); background-repeat: no-repeat; background-position: right top; margin-right: 200px;} </style> inside the html it works perfectly but thats not where i want the code to be Sorry if i make no sense but i tried my best in explaining it
  14. Hi everyone, Can anyone tell me why my div is not auto expanding to fit its contents, even though I set "width: auto;" ? Also, why does my "display: inline;" not work? You can see what I mean here: Basically, I am trying to make it so that all the elements inside the div-with-thick-red-dashed-border will appear in one horizontal row. Question 1: I set the div-with-thick-red-dashed-border to "width: auto;", but the inner divs are wrapping for some reason, and the div-with-thick-red-dashed-border is not expanding horizontally to contain more divs. Question 2: Also, I set the div-with-thick-orange-dashed-border, the div-with-thick-green-dashed-border, and the div-with-thick-blue-dashed-border to "display: inline;", but they are wrapping and breaking up. Does anyone know the answers to the 2 above questions? My goal is to make all the elements inside the div-with-thick-red-dashed-border line up in one horizontal arrangement. The code is below. Thank you very much, Jason <!doctype html> <style>/* HEADER OUTER BOX */ .jw-1-header-box { border: 1px dashed red; width:100%; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color: rgba(0,0,0,1); }/* GRAPHICS */ .jw-2-graphics-bar { border: 1px dashed purple; width: 100%; height: 0px; overflow: visible; } .jw-3-circle-large { position: relative; left: 10px; top: -200px; width: 270px; height: 270px; background-color: rgba(180,200,255,1); border-radius: 135px; } /* NAVIGATION */ .jw-2-nav-bar { border: 1px dashed cyan; width: 100%; overflow: hidden; } .jw-3-nav-bar-left-section { border: 1px dashed maroon; display: inline; float: left; } .jw-3-nav-bar-right-section { border: 5px dashed red; width: auto; display: inline; float: right; } /* HOME BUTTON */ .jw-3-button-home a:link, .jw-3-button-home a:visited { border: 1px dashed purple; position: relative; z-index: 1; font-size: 41px; color: rgba(80,100,155,1); } .jw-3-button-home a:hover, .jw-3-button-home a:active { color: rgba(0,0,0,1); text-decoration: none; /* to remove underline on hover */ } /* PAGES */ .jw-3-button-pages a:link, .jw-3-button-pages a:visited { border: 5px dotted orange; margin: 0px 10px 0px 10px; display: inline; font-size: 18px; color: rgba(80,100,155,1); } .jw-3-button-pages a:hover, .jw-3-button-pages a:active { color: rgba(0,0,0,1); text-decoration: none; /* to remove underline on hover */ } .jw-3-social-text-box { border: 5px dotted green; margin: 0px 10px 0px 10px; display: inline; font-size: 18px; color: rgba(0,0,0,0.7); } .jw-3-social-icon-box { border: 5px dotted blue; margin: 0px 10px 0px 10px; display: inline; font-size: 16px; /* need this to align block-1 */ } .jw-opacity-link a:link, .jw-opacity-link a:visited { border: 0px solid black; width: 30px; opacity: 0.45; } .jw-opacity-link a:hover, .jw-opacity-link a:active { border: 0px solid black; text-decoration: none; /* to remove the little line */ opacity: 1.0; } img /* need this to align icon image */ { vertical-align:top; /* top or bottom */ }/* DIVIDER */ .jw-2-divider-1 { border: 1px dashed violet; width: 100%; padding: 50px 0px 0px 0px; text-align: center; } .jw-3-circle-small { display: inline-block; width: 10px; height: 10px; background-color: rgba(171,225,250,1); border-radius: 5px; margin: 0px 50px 0px 50px; } /* UPDATE */ .jw-2-update-bar { border: 1px dashed pink; width:100%; text-align: center; } .jw-3-update-text-box { border: 1px dashed turquoise; font-size: 16px; color: rgba(0,0,0,1); }</style> <!-- HTML --><!-- MAIN BOX --> <div class="jw-1-header-box"><!-- GRPHICS --> <div class="jw-2-graphics-bar"> <div class="jw-3-circle-large"></div> </div><!-- NAVIGATION --> <div class="jw-2-nav-bar"> <div class="jw-3-nav-bar-left-section"> <div class="jw-3-button-home"> <a href="">Jason Wang Art</a> </div> </div> <div class="jw-3-nav-bar-right-section"> <div class="jw-3-button-pages"> <a href="">illustrations</a> <a href="">tutorials</a> <a href="">references</a> <a href="">about & contact</a> </div> <div class="jw-3-social-text-box"> Follow me on </div> <div class="jw-3-social-icon-box"> <div class="jw-opacity-link"> <a href=""> <img src="" width="24px" height="24px" alt="facebook"/> </a> </div> </div> </div> </div> <!-- DIVIDER --> <div class="jw-2-divider-1"> <div class="jw-3-circle-small"></div> <div class="jw-3-circle-small"></div> <div class="jw-3-circle-small"></div> </div><!-- UPDATE --> <div class="jw-2-update-bar"> <div class="jw-3-update-text-box"> Berry Season 9 coming soon! </div> </div> </div> </!doctype>
  15. Hi, I have a page on which I have a div inside a div. <div name="divWrapper" id = "divWrapper" style="overflow:auto;height:90vh;width:98vw" > <div style="-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin: 0 0;overflow:visible;" name="divMap" id="divMap"> <img and ... imagemap tags> The result I'm looking for is an image is in the window, with scollbars around it. I have a script that's run when the user clicks a button and zooms the inner div to make the image bigger or smaller. I have an imagemap for the image, and I found that just resizing the image didn't resize the map, so the coordinates would be off. But if I put the whole thing in a div and resized THAT, it would work. Here's the script that "zooms" the inner div (curScale is set to 1 earlier in the *.js page): function zoomDiv(elementID,change) { var d = document.getElementById(elementID); var newScale; if (change == 0) { newScale = 1; } else { newScale = curScale * change; } var s = "scale(" + newScale + "," + newScale + ")"; = s; = s; = s; = s; curScale = newScale; = * curScale; = * curScale;} I'm sure there are better ways to do what I'm trying to do with a lot of this, but it's kind of a slapped togethr page and I'm really interesting in fixing this... Without the transform-origin tags, if I resize the div by making it smaller (zooming "out"), the left side of the div moves to the right, almost as if it's trying to right-justify itself on the page (or in the outer div). If I increase the size back to the original, it doesn't move back to the left. WITH the transform-origin tags, it sticks to the top-left, but is ugly when I make it really small; I'd rather it be centered. So, how can I have a div that when I use transform to shrink or grow its contents, stays at a fixed % of the visible window, and is centered. I cannot use jquery because this is run locally on a workstation (a mac, with web sharing enabled) which may or may not have internet access and from what I have read, all that jquery code links to their site somehow. Thanks, Jeff
  16. Hi All, Please forgive me if I'm posting this in the incorrect area; I'm only new to HTML, CSS & W3 Schools. I am currently creating a email shipping notification that integrates with another system to extract information such as the receiver's address and tracking number in order to advise customers when they should expect freight deliveries. These fields are identified by the paramaters { & } in the code below. I have attached three images for reference. Chrome Output Outlook Output Desired Output (have the div 'bodyright' placed beside 'bodyleft') I don't intend to have the grey background showing; I have just done that to identify div easily. I therefore have the following questions: How do I move div 'bodyright' to be placed beside 'bodyleft'? How do I ensure that the social media icons have a gap separating them? How do I ensure that the group of social media icons are centred as shown in the desired output image? You will also note several comment sections in the code below; this is required as I must modify this template to suit individual customer's needs (who may not have certain social media accounts). Put simply - I would like the code to be written in a way that easily allows me to remove any element after the Sender's Phone number for the email. I hope my questions make sense! <html> <head> <style> #main {text-align:center; max-width: 466px; padding: 0px;} #logo {text-align:center; max-width: 466px; padding: 5px; margin: 0; auto} #header {text-align:left; min-width: 466px; padding: 0px; margin: 0; auto} #bodyleft {float:clear; text-align:left; min-width: 200px; max-width: 220px; padding: 0px; margin: 0; auto} #bodyright {text-align:left; min-width: 200px; max-width: 220px; padding: 0px; margin: 0; auto} #signature {float:clear; text-align:left; min-width: 466px; padding: 0px; margin: 0; auto} #footer {float:clear; text-align:center; min-width: 466px; padding: 0px; margin: 0; auto} #social {float:clear; text-align:center; min-width: 466px; padding: 0px; margin: 0; auto} body {font-family: Calibri;} p {margin-left: 10px; margin-right: 10px} .logoimage {content:url(""); align:center; max-width:450px; height:auto;} </style> </head> <body> <div id="main"> <div id="logo"> <img class="logoimage"/> </div> <div id="header"> <p>Dear Valued Customer,</p> <p>Your order has been despatched to:</p> <p>{Receiver}</p> </div> <div id="bodyleft"> <p><b>Tracking Number:</b></p> <p>Reference(s):</p> <p>Freight Description:</p> <p>Additional Instructions:</p> </div> <div id="bodyright"> <p><b> <a href="{Connote}"> {Connote} </a> </b></p> <p>{Reference}</p> <p>{Description}</p> <p>{Instructions}</p> </div> <div id="signature"> <p>Kind Regards,</p> <p>{Sender}.</p> <p>(00) 0000 0000</p> </div> <div id="footer"> <p> <a href="" target="_blank"> </a> </p> </div> <div id="social"> <a href="<!--Replace with Company Facebook URL-->" target="_blank"> <img src="" alt="<!--Replace with Company Name--> Facebook" hspace="10"> </a> <a href="<!--Replace with Company Google Plus URL-->" target="_blank"> <img src="" alt="<!--Replace with Company Name--> Google+" hspace="10"> </a> <a href="<!--Replace with Company Instagram URL-->" target="_blank"> <img src="" alt="<!--Replace with Company Name--> Instagram" hspace="10"> </a> <a href="<!--Replace with Company LinkedIn URL-->" target="_blank"> <img src="" alt="<!--Replace with Company Name--> LinkedIn" hspace="10"> </a> <a href="<!--Replace with Company Pinterest URL-->" target="_blank"> <img src="" alt="<!--Replace with Company Name--> Pinterest" hspace="10"> </a> <a href="<!--Replace with Company Twitter URL-->" target="_blank"> <img src="" alt="<!--Replace with Company Name--> Twitter" hspace="10"> </a> <a href="<!--Replace with Company YouTube URL-->"" target="_blank"> <img src="" alt="<!--Replace with Company Name--> YouTube" hspace="10"> </a> </div> </div> </body></html>
  17. Hey, so this is my code: <!DOCTYPE html><html><head> <script type="text/javascript" src="//"></script> <script type="text/javascript" src="//"></script> <script src='script.js'></script><style>.character{ height: 10px; width: 10px; background-color: red; margin-top: 50px; border: 3px solid black; border-radius: 100%; position: relative; margin-left: 10px;}.character2{ height: 10px; width: 10px; background-color: blue; margin-top: -16px; border: 3px solid black; border-radius: 100%; position: relative; margin-left: 10px;}.outerbox{ width: 400px; height: 400px; border: 2px solid black;}.innerbox{ width: 200px; height: 200px; border: 2px solid black; margin-left: 95px; margin-top: 20px;}</style><script>$(document).ready(function(){ var thing = $(".character"); var position = thing.position(); var thing2 = $( ".character2" ); var position2 = thing2.position(); if (position == position2){ $("#collision").text("Colliding!"); $('.character').animate({left:'+=30px'}, 200); } else{ $("#collision").text("Not colliding!"); } $(document).keydown(function(e){ if (e.keyCode == 37){ $('.character').animate({left:'-=30px'}, 200); } if (e.keyCode == 38){ $('.character').animate({top:'-=30px'}, 200); } if (e.keyCode == 39){ $('.character').animate({left:'+=30px'}, 200); } if (e.keyCode == 40){ $('.character').animate({top:'+=30px'}, 200); } if (e.keyCode == 65){ $('.character2').animate({left:'-=30px'}, 200); } if (e.keyCode == 87){ $('.character2').animate({top:'-=30px'}, 200); } if (e.keyCode == 83){ $('.character2').animate({left:'+=30px'}, 200); } if (e.keyCode == 90){ $('.character2').animate({top:'+=30px'}, 200); } if (position == position2){ $("#collision").text("Colliding!"); $('.character').animate({left:'+=30px'}, 200); } else{ $("#collision").text("Not colliding!"); } });});</script></head><body> <div class = "outerbox"> <div class = "character"></div> <div class = "character2"></div> <div class = "innerbox"> <p id = "thing">Hello</p> <p id = "other"></p> <p id = "other2"></p> <p id = "collision"></p> </div> </div></body></html> What I want to do is for something to happen when the positions of the two character divs are the same, but I am not quite sure how. Please help.
  18. I have built a few web sites in the past but I always used Dreamweaver to do most of the work for me. So now I am going back and forcing myself to learn the nitty, gritty details of what is really going on. I am also taking a basic course on WWW authoring with an instructor who has years of experience. I've run into a problem that my teacher can't answer and is practically "un-Google-able." Why does <div id="middle_container"> in the following code have zero height? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""><html xmlns=""><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>The Utterly Unoriginal Sample Page</title> <style type="text/css"> body { margin: 5px; background-color: white; font-family: Arial, Helvetica, sans-serif; } #main_container { width: 800px; margin: 5px; clear: both; background-color: lightgray; } #header { width: 790px; margin: 5px; background-color: red; } #middle_container { width: 770px; margin: 5px; clear: both; background-color: black; border-style: double; border-width: 10px; border-color: yellow; } #left_nav { width: 100px; margin: 0; float: left; background-color: lime; } #content { width: 670px; /*width: 671px;*/ /*Forces content div down under left_nav.*/ margin: 0; float: left; background-color: cyan; } #footer { width: 790px; margin: 5px; background-color: blue; clear: both; } </style></head><body> <div id="main_container"> <div id="header"> Header placeholder </div> <div id="middle_container"> <div id="left_nav"> Left Nav placeholder </div> <div id="content"> <p>Content placeholder</p> <p>Content placeholder</p> <p>Content placeholder</p> </div> </div> <div id="footer"> Footer placeholder </div> </div></body> I have posted this page at so you can more easily take a look at it and examine it in a DOM inspector. I have pared it down to the bare minimum to illustrate the problem. I have also used contrasting colors and given the middle_container div a double-line, yellow border to make it easier to see what is going on. I have set the margins on the left_nav and content divs to zero, so you can see that their top edges align with the vertical center of middle_container. Because middle_container has zero height, one could also say those two divs are butting right up against the top edge of middle_container, just as they should. If you look closely, the horizontal position and size of left_nav and content are still under the control of middle_container. They are shifted to the right by the 30-pixel-wide border of middle_container. Also, if I increase the width of either div then content gets shifted down below left_nav. So, middle_container seems to be doing its job in the horizontal direction but completely falls down, vertically. (I'm sure there is some kind of joke in there somewhere.) Why is the height of middle_container not expanded to fit the contents of the divs inside it, while main_container does exactly what I expect? Thanks P.S. Yes, I know I could solve the problem by giving everything a fixed height but I do not want to do that. That seems like a hack to get it to look "OK" without solving the problem and actually learning what is going on.
  19. Hi everyone! I am trying to vertically center divs inside another div, using: position: relative;vertical-align: middle; But it's not working! Does anyone know why? On this page: , I am trying to make the dividers - the vertical black lines - be vertically centered within the parent div. You can see my code here: <!doctype html> <style> .jw-1-about-centre-align { width: 300%; border: 0px solid red; font-size: 16px; background-color: rgba(255,255,255,0.0); text-align: center; } .jw-2-about-pad { vertical-align: top; display: inline-block; min-width: 60px; padding: 0px 0px 0px 0px; border: solid rgba(0,0,0,0.2); border-width: 0px 1px 0px 1px; border-radius: 15px 15px 15px 15px / 30px 30px 30px 30px; margin: 0px auto 0px auto; text-align: left; font-size: 16px; background-color: rgba(255,255,255,0.3); } .jw-3-about-column { vertical-align: top; display: inline-block; border: 0px solid orange; width: 300px; height: 100%; margin: 10px 15px 10px 15px; } .jw-3-about-divider { display: inline-block; border: 0px solid green; width: 1px; height: 300px; margin: 0px 0px 0px 0px; background-color: rgba(0,0,0,0.5); position: relative; vertical-align: middle; } .jw-4-about-text-header { width: 100%; border: 0px solid green; margin: 20px auto 20px auto; font-size: 1.2em; font-weight: bold; font-style: italic; } .jw-4-about-text-body { width: 100%; border: 0px solid yellow; margin: 20px auto 20px auto; }</style> <div class="jw-1-about-centre-align"> <div class="jw-2-about-pad"> <div class="jw-3-about-column"> <div class="jw-4-about-text-header"> About me: </div> <!-- JUST SOME CODE FOR THE TEXT - OMITTED FOR SIMPLICITY --> </div> <div class="jw-3-about-divider"> </div> <div class="jw-3-about-column"> <div class="jw-4-about-text-header"> <b>Contact me:</b> </div> <!-- JUST SOME CODE FOR THE FORM - OMITTED FOR SIMPLICITY --> </div> <div class="jw-3-about-divider"> </div> <div class="jw-3-about-column"> <div class="jw-4-about-text-header"> <b>Email updates:</b> </div> <!-- JUST SOME CODE FOR THE FORM - OMITTED FOR SIMPLICITY --> </div> </div> </div> </!doctype>
  20. Hey you all! I'm sorry if it's in the wrong topic, but couldn't find a more suitable one.I've struggled with my code for the past two days, but somehow can't get it to work.First off HTML+PHP+MySQL code: if($_POST){ $name = $fgmembersite->UserFullName(); $comment = $_POST['comment']; $connect = mysql_connect("random", "ranom", "random", "random") or die(mysql_error()); if($connect){ mysql_select_db("random",$connect); $query = "INSERT INTO data(Name, Comment, date) VALUES ("" . $name . "","" . $comment . "",'DATETIME: Auto CURDATE()')"; if(mysql_query($query)){ } } else { die ("Error: " . mysql_error()); } } $connect = mysql_connect("random", "random", "random", "random"); if($connect){ mysql_select_db("random",$connect); $query7 = "SELECT * FROM data ORDER BY date DESC"; $result = mysql_query($query7); while ($row = mysql_fetch_array($result)){ echo '<br />' . $row['Name'] . ': ';; echo $row['Comment']; } } else { die ("Error: " . mysql_error()); } ?>CSS code: body{ background:#FFFFFF; font:bold 12px Arial, Helvetica, sans-serif; margin:0; padding:0; min-width:960px; color:#303030; text-align: center; } #header { background-color:#FFFFFF; color:#303030; padding:5px; list-style-type: none; margin-left:0px; padding-left:0px; min-width: 960px; } #section { margin-left: 80%; width:350px; padding:10px; } #vasak { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #parem { width:350px; float:left; padding:10px; } .logo img { float: left; margin-left: 10%; } .logo p { float: right; text-align: right; display:inline-block; padding: 0; } .kastike { text-align: center; } .container {width: 960px; margin: 0 auto; overflow: hidden;} #content { float: left; width: 100%;} .tervitus { margin-left: 10%; margin-top: 0; } .sein { margin-left: 10%; margin-top: 0%; } .ptekst { float: none; margin-left: 600px; } <div id="header"> <div class="kastike"> <form action = "" method = "POST"> <textarea style="resize:none" name = "comment" rows = "5" cols = "60"></textarea> <input type = "submit" value = "Postita"> </form> </div> </div> I have a header with a textarea in it, CODE:This is what I have this far:When I type something in the textarea and click "submit" - it is sent to MySQL database, after that my code reads from the table and echoes it back on the page.My 1st problem: My table has three rows: "Name - varchar" ; "Comment - varchar" ; "date - timestamp".I'd like to print all the messages in reverse order (newest post are on the top). My code at the moment sometimes works, sometimes messes it all up.Second problem - I can't make the textarea "submit" work via 'Enter'. Things I have tried this far: jQuery and JS.Third problem (with CSS). I'd like my page to look something like that: | <textbox> | | | |side| |$name 1 :| |$comment1| | | |$name 2 :| |$comment2| | | |$name 3 :| |$comment3| I'd like to read from the MySQL table and but the $name and $comment in separate <div>s. All the imported divs should be on a new line.I believe I have tried almost everything and now I'm out of ideas. Sorry if my poor skill in English messed something up.Thanks in advance!Architect
  21. Here's a tricky one. I have a div (80x80) and inside the div is an anchor tag. I want the clickable area for the anchor tag to be the entire width and height of the parent div. Along with that I would like the text center aligned and center justified. The closest I have is display:block that aligns the text top and then I can get the text centered vertically but not horizontally. Can anyone help. I can't do any workarounds this must be done in CSS. Thanks <div class="subBubble"> <a class='node' href='node/89'>Imaging</a> </div> Thanks
  22. So I'm a newb coder, just learned CSS in order to build a site for the music venue I work at. I got everything how I want it, I just can't get the entire page to center as the window enlarges, on bigger displays. I've got everything in a div id="mainbox", thinking that would then be able to be centered. But my fixed header always stays to the left side of the screen. I gave up and just left everything left justified, but it's been bugging me and I think would be an improvement to the site. I'm open to suggestions and looking for advice. This site provided a lot of help when googling CSS questions, so I thought I'd join and ask one myself. Cheers, Andre
  23. Hello, Let's say I have 2 <div>, one wiith id=A and one with id=B I want that, when hovering the mouse cursor to #A, the div #B performs an animation (let's say a transition). Is that possible with CSS? Thanks for reading, tomatoKetchup
  24. Hello Everyone,I'm a total novice with CSS, but I'm trying to learn. I'm trying to place an image with a caption into a paragraph. I did some Googling and found I pretty much copy and pasted an example from this website with a few changes. Everything seemed to work fine, until I tried to align the image to the right of a paragraph with a width of 800px. Here is the css: .imageholder {position: relative; width: 260px; border:thin solid black} .imageholder .caption {position: absolute; width: 260px; bottom: 0px; left: 0px; color: #000000; background: #ffffff; text-align:center; font-size:11pt; font-family:'Palatino Linotype', serif; opacity:0.8; border:thin solid black} and the html: <h2>Glenwood Sunday Market</h2><p><span class="imageholder" style="float:right;"><img src="glenwood.jpg" width="100%" style=:margin:0; padding:0; position:relative; left:-20"> <span class="caption">Natasha and Scott at the Glenwood Market </span></span>Blah blah blah etc etc</p> When I used the code as written at, with a <div> element for "imageholder", the image and caption looked fine, but the <div> element destroyed the paragraph formatting, and the paragraph spread to fill the width of the page, with the image at the far right. I tried using <span> instead of <div> since it is an inline element, and the positioning was fine, but the image was always offset by about 20px right of the <span> frame. I've attached a screen cap with borders added for clarity. What is the right way to do this? Should I be using <div class="imagegolder"> or <span class="imageholder">? Thanks, Adam
  25. i found this code which allows me to put my h1 tag and image in the sameline to create a header, however i would like to make it clickable. i treid other solutions i found online but they didnt work. ahref added to image or h1 doesnt work for the hole header and then i tried a making the div clickable but that didnt work this is my code below please help! <div id='masthead'> <div id='logo'> <img alt='Relaxed Hair Care Guyana' src=' '/> </div> <div id='header'> <h1> Relaxed Hair Care Guyana</h1> </div> </div> #masthead { min-width: 600px; } #logo { float: right; width: 100px; } h1 { display: block; font-size: 4em; margin-top: 1em; margin-bottom:1em; margin-left: 1em; margin-right: 2em; font-weight: bold; font-family: Bradley Hand ITC; color:#38761d; text-align: center; } #container { clear: both; min-width: 600px; } #left_col { float: left; width: 300px; }