Jump to content

Search the Community

Showing results for tags 'div'.



More search options

  • 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 104 results

  1. Hello & Thanks , I am having trouble giving a <div> a background color : <div class="Cell" style="width: 25%; border-style: solid; border-color: #FF0000; background-color: D3DDEB; display: inline-block; padding-left: 5px; padding-right: 5px; "> I am using this example: https://www.w3schools.com/htmL/tryit.asp?filename=tryhtml5_migrate_7 I am using inline style= , when I get proper results , then I will transpose code into css styles . <!DOCTYPE html> <html lang="en"> <head> <title>HTML5</title> <meta charset="utf-8"> <style> body { font-family: Verdana, sans-serif; font-size: 0.8em; } header, nav, section, article, footer, div.city { border: 1px solid grey; margin: 5px; padding: 8px; } nav ul { margin: 0; padding: 0; } nav ul li { display: inline; margin: 5px; } </style> </head> <body> <header> <h1>HTML5 Skeleton</h1> </header> <nav> <ul> <li>News</li> <li>Sports</li> <li>Weather</li> </ul> </nav> <article> <h2>Famous Cities</h2> <div class="London" style="background-color: #00FF00;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="Paris" style="background-color: #FF0000;"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="Tokyo" style="background-color: #0000FF;"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </article> <footer> <p>&copy; 2014 W3Schools. All rights reserved.</p> </footer> </body> </html> And here is my example code: <!DOCTYPE html> <html> <head> <title>DIVs Template WIP</title> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DivsOnlyTemplate</title> <!-- file:///C:/vmars.us/DivsOnly-STARTover.html https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/ https://htmlformatter.com/ https://www.w3schools.com/htmL/tryit.asp?filename=tryhtml5_migrate_7 --> <style type="text/css"> </style> </head> <body style="background-color: #FFFFFF;"> <br> <div class="Table" style="border-style: solid; text-align: center; border-color: #5A697D; border-width: 16px;"> <!-- ============NewRow============== --> <p></p> <div class="Row" style="border-style: solid solid solid solid; border-width: 4px; border-color: #000000;"> <div class="Cell" style="width: 25%; border-style: solid; border-color: #FF0000; background-color: D3DDEB; display: inline-block; padding-left: 5px; padding-right: 5px; "> <p style="border-style: solid; border-color: #0000FF; background-color: D3DDEB"> Row 1 Column 1 <br><img src="Empty.png" alt="Empty.png"></p> </div> <!-- <div class="Cell" --> <div class="Cell" style="width:70%; border-style: solid; border-color: #00FF00; background-color: 000000; display: inline-block; padding-left: 5px; padding-right: 5px; "> <p> Row 1 Column 2 <br><img src="Empty.png" alt="Empty.png"> </p> </div> <!-- <div class="Cell" --> </div> <!-- <div class="Row" --> </div> <!-- <div class="Table"> --> </body> </html> Please what am I doing wrong ? Thanks
  2. Est

    Position & centering <div>

    Hi all, i am learning html and css from 3wschool, and i am a little lost. i have read all html and css tutorial section and really dont know why i dont understand, thanks for your help & time. Right now i am trying to understand how place some <div> where i want in the page. as you can see i have made 2 div (objects) that will contain things i want be able to place them in everywhere in the "main zone". (or any zone) ?) I cant get my objects centered in the div ?) there is a way to place a div to 100px on the right ( without use margin or padding ) ?)Am i in error, if i think to use div as a box sistem to place things where i want? ?) can someone make a "card" with all the useful and usable div things ? the site talk only about the align attribute and its not supported by html5.. https://www.w3schools.com/tags/tag_div.asp Searching for a solution i found out this site https://css-tricks.com/centering-css-complete-guide/ They use a line of code i didnt find on 3wschool, did i miss it? There they use .child {· position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);} i am also pretty confused by https://www.w3schools.com/cssref/playit.asp?filename=playcss_position i attach a screenshot of his behaviour , it is right? if it is i am fully lost.
  3. ZorroX

    Responsive image inside div

    I want to put a small shop image into my div box which is top of the side bar. The problem is after I set margin, height etc. it is not responsive like the rest of my site and its dissapear after i change windows size. I've created two divs one inside another to fit my 1300px container div width.
  4. Don't matter the browser size, I need that the picture ocup 100% the browser height. For this, I just set the img heith in 100vh, and the code works fine. But, I also need this image be horizontal centered in the browser. For this, I've set the text align of my DIV that contain my IMG in center. When the browser width is greater than the img width, it works fine. But, if the browser width is less than the img width, the img go left aligned. I really need that img be centered in the browser size all the time, don't matter the conditions. I just know that I can do it replacing the img for background-image and set the background-position in center. But, if I did it, Google will not index my images and it results in a big trouble for me. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link type="text/css" rel="stylesheet" href="code/css/test.css"> </head> <body> <div> <img src="image.jpg"> </div> </body> </html> * { margin: 0; padding: 0 } div { background-color: red; text-align: center; } img { height: 100vh; } (The picture I'm working is 1680px x 945px) At the image below I'm showing the correct horizontal align for this picture. Centered: https://uploaddeimagens.com.br/imagens/certo-jpg-feef13d2-44d2-407b-8b1b-f334107cb371 And... At this another image, I'm showing the error it ocurrs. The picture is left aligned and crop only the right side of the picture: https://uploaddeimagens.com.br/imagens/errado-jpg-746c72b8-36d2-4942-9895-0cfb43abd77d What I need is... When the browser width is less than the img width, the picture still be centered in the browser, resulting that the image would be cropped both sides, ledt and right sides, and it will result in this specifically image, the church in background will be centered in the browser all the time. It was a simple example that what I need. Is there any way for center this image like I need using only CSS? I will be very grateful to anyone who can help me with this problem. Thanks. Greetings from Brazil.
  5. Good evening. I'm creating a 3-column layout, in which the left and right columns should have their widths set to 300px, and the middle column should fit in the rest left over. Regarding the layout everything is OK, exactly as I need it. However, within the central DIV, I put an IMG, which I want to always occupy 100% of the height of this DIV and that it is centered horizontally, independently of the width of the DIV in which this IMG is contained is larger or smaller width than the width of the IMG itself. Relative to occupying 100% of the height everything is OK, no matter how I resize the browser window it is self-adjusting as desired. However, it is not getting horizontally centered, as is the goal. It is always left-aligned, except when the width of the DIV is greater than the width of the IMG, so the IMG is thus perfectly centered inside the container DIV. However, when the width of the DIV is smaller than the width of the IMG, the IMG is left-aligned, cutting portions of the image only on its right side, not getting centered as expected. I'm testing on a desktop with 1920x1080 resolution and the image I'm using at IMG is 1680x945px. Here are the HTML and CSS codes: !doctype html> <html lang="pt-br"> <head> <link type="text/css" rel="stylesheet" href="code/css/estudo.css"> </head> <body> <div id="main"> <div id="viewport_left" class="viewports"> </div> <div id="viewport_center" class="viewports"> <img id="imagem_teste" src="imagem_teste_01.jpg"> </div> <div id="viewport_right"> </div> </div> <div id="footer"> </div> </body> </html> * { margin: 0; padding: 0; text-align: center; overflow: hidden; } #main { width: 100%; margin: 0; } #viewport_left { min-height: calc(100vh - 25px); margin-bottom: 25px; width: 324px; background-color: #333333; position: fixed; left: 0; top: 0; } #viewport_center { min-height: calc(100vh - 25px); width: calc(100vw - 650px); margin-bottom: 25px; border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; background-color: red; position: absolute; left: 50%; top: 50%; margin-left: calc(((100vw - 648px) / 2)* -1); margin-top: calc((100vh / 2)* -1); display: table; overflow: hidden; } #imagem_teste { max-height: calc(100vh - 25px); position: absolute; width: auto; height: auto; } #viewport_right { min-height: calc(100vh - 25px); margin-bottom: 25px; width: 324px; background-color: #333333; position: fixed; right: 0; top: 0; } #footer { position: fixed; bottom: 0; left: 0; height: 24px; width: 100%; background-color: #333333; border-top: 1px solid #FFFFFF; text-align: center; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #FFFFFF; } Does anyone know how can I fix this problem? Thank you in advance for any help and cooperation. Thank you, Evair Peterson.
  6. ricardo_t

    Move a Image inside a DIV

    Hi Guys Im trying to move an image to the top left corner inside a div, but it doesnt' works. Can anyone Help? Thanks cheers Ricardo HTML <div id="content"> <h2>Herzlich Willkommen!<br> <br> </></h2> <img class="float" src="images\home1.jpg"/> <h3>Der Sommer kann kommen...!</h3> <p>Die Kartoffeln sind bereits gepflanzt und auch sonst spürt die Natur den Frühling: Alles wächst und gedeiht, sowohl die gewünschten Arten wie auch das Unkraut. Doch dank vielen tüchtigen Händen können wir Ihnen wie gewohnt, jeden Samstag morgen von 7 bis 12 Uhr frischen Biogemüse am Aarauer Wochenmarkt anbieten. Doch nicht nur das, auch knuspriges Brot, Wurstwaren aller Art, Käse und vieles mehr wartet auf Sie! Selbstverständlich sind all unsere Produkte aus eigener Produktion und aus biologischem Anbau. Die Setzlinge für den Setzlingsmarkt am 6. und 7. April auf dem Schloss Wildegg wachsen und warten bald auf ihren neuen Besitzer.</p> <br> <h3>Aktuell</h3> <p>Bereits erhalten Sie bei uns die ersten Sommersalate. Ab Ende April verkaufen wir wieder Gemüse- und Blumensetzlinge aller Art, pünktlich zum Beginn der Pflanzsaison!</p> CSS #content img.float{ float: left; margin-right: 15px; border: 1Px solid #111111; }
  7. Hello , I have a problem , I want to wirte HTML code that only refreshes the <div> test , so just the code between de <div>...</div> I was thinking to use some Javascript but I'm not sure this works in PHP , because my in HTML div there's PHP code. My HTML code: <HTML> <HEAD> </HEAD> <BODY> <div id = "other div"> </div> <div id="test"> <?php refresh this code ?> </div> </BODY> </HTML>
  8. When making two side-by-side divs with different amounts of text in them, and coloring the background, the two divs are of different heights. Now, I can use the style/height to set a height in pixels for the two divs, but I seem to recall seeing something in the w3schools site that showed how to make the two divs automatically the same height without setting the height in pixels. Or am I mistaken?
  9. Dear potential helpers, I try to darken the foreground of my website using a background-color. I created a div which wraps all my other HTML stuff, applied position: relative; to it and a very great z-Index of 999. All my other elements have a z-index of 100 or lower. Why isn't my div not shown in front of the other stuff? In case the background-color of my div foreground is only shown behind all the other elements inside it. Here is my HTML: <html> <body> <div id="foreground"> <!-- All my other HTML stuff having relative positioning and z-index 100 or less --> </div> </body> </html> Here is my CSS: #foreground { position: relative; z-index: 999; display: block; background-color: red; } Maybe u guys have any idea what the matter with this one. Thank you!
  10. harry_ord

    Divs with forced position

    Hello This is my site made with Wordpress using the theme called Divi. http://ciudadcapital.agencialosnavegantes.cl/contacto/ Something really annoying is happening right and that is whatever section i put after the Instagram section, it gets forced to be positioned to the left. Any idea why this is happening? In this moment is the footer what appears aligned to the left, but if i put the footer in another place, it gets centered; the same if i put another section just after the Instagram section, it gets forced to the left. What is causing it?
  11. 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>
  12. Max Castril

    <div id = "hello">

    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??
  13. Mark Laurence

    Changing Object Size in Relation to Window

    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.
  14. anr241193

    HTML5

    What is the difference between: <form> tag and <div> tag ?
  15. kissmecomix

    W3 css and z index syntax

    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
  16. 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
  17. 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>
  18. smus

    <div> visibility

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

    margin-top and div

    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 ?
  20. 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
  21. Matpatnik

    facebook div float won't work with chrome

    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">
  22. 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.
  23. Azii

    CSS Background wont show

    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
  24. 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>
  25. jscooper

    Div inside Div moves when Resized

    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
×