Jump to content

Search the Community

Showing results for tags 'div'.

  • Search By Tags

    Type tags separated by commas.

  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End

Last Updated

  • Start

    End

Filter by number of...

Joined

  • Start

    End

Group

AIM

MSN

Website URL

ICQ

Yahoo

Jabber

Skype

Location

Interests

Languages

Found 105 results

  1. anr241193

    HTML5

    anr241193 posted a topic in HTML/XHTML

    What is the difference between: <form> tag and <div> tag ?
  2. kissmecomix
    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
  3. jasonxweb
    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="http://www.jasonwangart.com/p/spreads.html"> <img src="https://1.bp.blogspot.com/-s92F8qjBMsg/VylLTxoeBLI/AAAAAAAABN8/h5nPS8xOxyQE2PSqyNYynPCMhCzxt8OkwCK4B/s400/20160503%2B-%2Bbuttons-02.png" alt="illustrations" width=auto height="25px" /> </a> <a href="http://www.jasonwangart.com/p/tutorials_2.html"> <img src="https://1.bp.blogspot.com/-xAWLlsmJLjA/VylLT3LuO-I/AAAAAAAABOU/6N04uTBi69MvWJtOqPVr5ZvHyKYhV-eKwCK4B/s400/20160503%2B-%2Bbuttons-03.png" alt="tutorials" width=auto height="25px" /> </a> <a href="http://www.jasonwangart.com/p/references_3.html"> <img src="https://2.bp.blogspot.com/-iGP0rlCRJBQ/VylLT61jNxI/AAAAAAAABOQ/oPp61KLO6LgZuSFGLjpWF5JTxto6yqVSQCK4B/s320/20160503%2B-%2Bbuttons-04.png" alt="references" width=auto height="25px" /> </a> <a href="http://www.jasonwangart.com/p/contact.html"> <img src="https://4.bp.blogspot.com/-FJQ2uySI0f0/VylLTxelv9I/AAAAAAAABOY/FjS6c-OOc2Q1hdNhVL_-yBUGvCsX9g10gCK4B/s400/20160503%2B-%2Bbuttons-05.png" alt="contact" width=auto height="25px" /> </a> <a href="http://www.facebook.com/jasonwangart"> <img src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" alt="facebook" width="30px" height="30px" /> </a> <a href="http://instagram.com/jasonwangart/"> <img src="http://3.bp.blogspot.com/-Bip-5XKJURo/VSQhElKMGkI/AAAAAAAAA38/RM3xUkaQWUM/s1600/LOGO%2Binstagram%2Bsimple%2B72%2Bc.png" alt="instagram" width="30px" height="30px" /> </a> </div> </body> However, as you can see the results at: www.jasonwangart.com , 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
  4. Naomi
    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>
  5. smus

    <div> visibility

    smus posted a topic in JavaScript

    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?
  6. WesleyA

    margin-top and div

    WesleyA posted a topic in CSS

    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 ?
  7. Sunamena
    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: http://www.nimblefeather.com/index.php 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: http://www.nimblefeather.com/comics.php 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: http://www.nimblefeather.com/comics/drawingshady/thefutureofsumarnya/chptr1.php 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
  8. Matpatnik
    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 http://www.matpatnik.com/White-Spiders 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="https://www.facebook.com/WhiteSpiders" 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="https://www.facebook.com/WhiteSpiders"> <a href="https://www.facebook.com/WhiteSpiders">WhiteSpiders</a> </blockquote> </div></div><div id="desc" class="outerBox"><div class="innerBox"><div class="contentBox">
  9. dreamilan
    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.
  10. Azii
    Hello. i dont get why my background in my Container isn't showing even to i've done margins in it that works http://2.1m.yt/vLtNTHjtR.png (The code proving that it can find the image) http://4.1m.yt/-dSNxBFUD.png (The result of that coding) but when i write in the body of the html it looks like this http://2.1m.yt/3SNtkz42G.png http://1.1m.yt/4EDAmTcZS.png (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
  11. jasonxweb
    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: http://www.jasonwangart2.blogspot.ca/ 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="http://www.jasonwangart.com">Jason Wang Art</a> </div> </div> <div class="jw-3-nav-bar-right-section"> <div class="jw-3-button-pages"> <a href="http://www.jasonwangart.com/search/label/illustration">illustrations</a> <a href="http://www.jasonwangart.com/search/label/tutorial">tutorials</a> <a href="http://www.jasonwangart.com/search/label/reference">references</a> <a href="http://www.jasonwangart.com/p/about-web.html">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="http://www.facebook.com/jasonwangart"> <img src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" 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>
  12. jscooper
    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 + ")"; d.style.transform = s; d.style.webkitTransform = s; d.style.MozTransform = s; d.style.msTransform = s; curScale = newScale; d.style.width = d.style.width * curScale; d.style.height = d.style.height * 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
  13. frontlawnmaterial
    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("http://mostlywebsites.net/wp-content/uploads/w3schools-logo.jpg"); 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="http://www.companyname.com.au/tracking-tool/?id={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="http://www.customerswebsite.com.au" target="_blank"> customerswebsite.com.au </a> </p> </div> <div id="social"> <a href="<!--Replace with Company Facebook URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/facebook.png" alt="<!--Replace with Company Name--> Facebook" hspace="10"> </a> <a href="<!--Replace with Company Google Plus URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/google_plus.png" alt="<!--Replace with Company Name--> Google+" hspace="10"> </a> <a href="<!--Replace with Company Instagram URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/instagram.png" alt="<!--Replace with Company Name--> Instagram" hspace="10"> </a> <a href="<!--Replace with Company LinkedIn URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/linkedin.png" alt="<!--Replace with Company Name--> LinkedIn" hspace="10"> </a> <a href="<!--Replace with Company Pinterest URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/pinterest.png" alt="<!--Replace with Company Name--> Pinterest" hspace="10"> </a> <a href="<!--Replace with Company Twitter URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/twitter.png" alt="<!--Replace with Company Name--> Twitter" hspace="10"> </a> <a href="<!--Replace with Company YouTube URL-->"" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/youtube.png" alt="<!--Replace with Company Name--> YouTube" hspace="10"> </a> </div> </div> </body></html>
  14. brooke_theperson
    Hey, so this is my code: <!DOCTYPE html><html><head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></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.
  15. GrantRobertson
    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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><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 http://webtrain.austincc.edu/~grobertson/zero_height_div.html 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.
  16. jasonxweb
    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: http://www.jasonwangart.com/p/about-web.html , 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>
  17. Architect
    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
  18. SamohtVII
    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
  19. dre548
    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. http://thedelancey.com 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
  20. tomatoKetchup
    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
  21. swordams
    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 http://www.corelangs.com/css/box/caption.html. 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 corelangs.com, 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
  22. Lissarocs
    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=' https://lh4.googleusercontent.com/-pT5_eNCQ2ag/VFO0T46g2DI/AAAAAAAABWY/BWIU7nLK6p8/w200-h212-no/relaxedhaircare2%2B%2821.jpg '/> </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; }
  23. CosetteGirardot
    Admittedly I'm fairly new to Javascript, but I've taken numerous tutorials, classes, and have searched for hour online and I can't seem to figure out how to make my script work, and have edited it and edited it so many times I just want to start over. What I'm trying to do is, when one of six divs is clicked, a separate div will have 3 specific divs appear in it. Each of the original six divs have three similar but different divs related to it. I have this much, but as I've said I've looked through so many tutorials that I just scrapped loads.http://jsfiddle.net/petiteco24601/hgo8eqdq/ $(document).ready(function () {$(".talkbubble").mouseout(function(){$(".sidebar").show();});$$(".talkbubble").click(function(){$ How do I make it so that when you click a "talkbubble" div, a different "sidebar" div appears with all its contained elements, and when you mouseout, the first talkbubble div automatically activates?
  24. ggkolfin
    Hello everyone, I have been developing a site for fun lately (using Wampserver v. 2.5 on windows 8), and yesterday I was happy to realize that I have finished it! For the next logical step, I decided to check the site on other browsers (I was working with Chrome all the time), i.e. on Firefox and IE for the start. Everything works great except that my bottom div is not appearing at all at the two browsers. Even worse, on firefox only, the div does appear on a single page (contact.php) but it does not appear at any other of the almost 40 pages. I did check for differences between this certain page and any other and as far as I can see there is none! Also, on IE the footer is absent even in contact.php. I searched online and found that adblock plugin maybe causing the block, depending on the div's name, but my div is called "footer"! The stylesheet is common for every page, thus I do not believe it is a CSS related problem, but I do not know for sure. I would love some help and it would be very much appreciated. Thank you all, Georgia PS: Here is the basic html page and the related CSS (of course there is more CSS (for the other divs) but I think it is not relevant. I can post it if you like but not all pages have the same divs, so there is some styling for each page. The code I post is a basis that exists in all pages): <!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" /><link rel="stylesheet" type="text/css" href="style.css"><title>Something</title></head> <body> <div id="holderDiv" style="min-width: 1200px; margin: 0 auto;"> <div id="headerDiv"> <!--some things and more divs here--> </div> <!--end of headerDiv --> <div id="navigationDiv"> <!--a navigation menu here--> </div> <!--end of navigationDiv--> <div id="contentDiv" align="center"> <!--some content and more divs here--> </div><!--end of contentDiv--> <div id="footerDiv"> <p class="footerLinks"> <a href="terms.php">Terms of use</a> <a href="help.php">Help</a> <a href="contact.php">Contact</a></p> <p style="font-size:12px; color: #000000"><br /><br />Copyright 2014 Something</p> </div> <!--end of footerDiv--> </div> <!--end of holderDiv--> </body></html> //CSS: body { background-image: url("back.png"); background-repeat: repeat; background-position: left top; height: 100%; margin: 0; padding: 0; font-family:"Courier New", Courier, monospace; } #holderDiv { min-height: 100%; width: 100%; position: relative; } #footerDiv { clear: both; position: absolute; bottom: 0; width: 80%; height: 100px; margin-left: 10%; margin-right: 10%; margin-bottom: 5%; margin-top: 0%; padding-bottom: 3%; background-color: #99cccc; display: inline-block; overflow: hidden; text-align: center;} .footerLinks>a { color: #000000; font-size: 14px; } .footerLinks>a:hover { color: #000000; font-size: 14px; } .footerLinks>a:visited { color: #000000; font-size: 14px; }
  25. jools
    Hello all, I'm struggling to get rid of a white space between two divs: I have a nav element between a div element called lower footer. They are displayed in the html as... <nav><ul><li><a href="#">Meet Your Sensei</a></li><li><a href="#">Tour Our Dojo</a></li><li><a href="#">Our Martial Arts Program</a></li><li><a href="#">Our Training Schedule</a></li><li><a href="#">Current Events</a></li><li><a href="#">FAQ</a></li><li><a href="#">Contact Us</a></li></ul></nav><div id ="lowerfooter"><p>text here</p><img src="facebook_icon.png"><img src="facebook_icon.png"></div> The CSS for lower footer and the nav are: #lowerfooter { height: 200px; padding-top: 0; margin-top: 0; background-color: #F60; padding-left: 160px; font-family: Verdana, Geneva, sans-serif; font-size:60%; } nav { height:30px; font-family: Meiryo; background-color: #F96; color: #000; border: thin solid #F60; vertical-align: middle; text-align: center; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; /*margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-bottom:0px;*/ } nav * {font-size:0;} /*remove spacing produced by display: inline-block; between li */ I have tried to set upper and lower margins and padding to 0px but it doesn't seem to remove the white space.Thanks.
×
×
  • Create New...