Jump to content

Search the Community

Showing results for tags 'divs'.



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 14 results

  1. I am trying to switch two divs on an onclick command to a search button. One div should replace the other entirely. I have tried to do this two ways: 1) make Div 1 width = 0 when Div 2 width = 100%, and vice versa 2) make Div 1 display = none when Div 2 display = block, and vice versa. My problem is that while both make Div 1 disappear when Div 2 is visible, and Div 2 disappear when Div 1 is visible, in both cases Div 2 remains stacked below the area designated for Div 1, and it should replace its position entirely. Any suggestions why this might be doing this and/or, is there a better way to accomplish this than just changing the CSS? I am including the JS, HTML, and CSS attending this problem. Thanks ahead of time: JS (from Option 2) function getSearch() { document.getElementById("searchcontainer").style.display = "block"; document.getElementById("blogcontainer").style.display = "none"; } HTML <div id="rightcontainer"> <div id="searchbox"> <form> <input type="text" placeholder="Search..." required> <input id="cardib" type="button" value="Search" onclick="getSearch()"> </form> </div> <button id="down" onclick="scrollDown()" onmouseenter="Highlight1()">&#9660</button> <button id="up" onclick="scrollUp()" onmouseenter="Highlight2()">&#9650</button> <div id="blogcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()"> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div id="searchcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()"> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> </div> </div> CSS #blogcontainer{ width: 100%; height: 90%; float: left; overflow-y: hidden; padding: 0; position: static; float: left; margin-left: 0; margin-right: 0; margin-bottom: 0; } #searchcontainer{ width: 100%; height: 90%; float: left; overflow-y: hidden; padding: 0; position: static; float: left; margin-left: 0; margin-right: 0; margin-bottom: 0; } #rightcontainer { height: 100vh; width: calc( 100% - 20vh - (.678*(100%-20vh))); position: fixed; overflow: hidden; background-color: gray; margin-left: calc((.678*(100%-20vh)) + 20vh); float: left; margin-right: 0; }
  2. I am working on a site to make it look and work like the images below. I got the push menu figured out because I found the tutorial here. I have the 2nd div for the line toggle and and the logo and the 3rd div for the main content Problem is I don't know how to make the 2nd div full length height: 100% didn't work nor do I knoq how to center the lines on top or center the logo in the center of the div's length. Underneath the photos is my current code. Please assist as this is a ballpark I've never played in. Thank you in advance !!!!!!!!! <head> <style> body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #212121; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sidenav p { position: absolute; bottom: 100px; color: #CACFD2; font-size: 12px; left:10%; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .sidenav a.mail { color: #CACFD2; font-size: 12px; left:10%; padding: 0; text-decoration: none; } #logozone { background-color: #212121; transition: margin-left .5s; float: left; width: 10%; height: 100%; padding: 2px; } img { display: block; margin: auto; width: 50%; } @media screen and (max-height: 450px) { .sidenav {padding-top: 2px;} .sidenav a {font-size: 18px;} } </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="#">Home</a> <a href="#">Current Projects</a> <p>client info</p> </div> <div id="logozone"> <span style="text-align:center; font-size:30px;color:#CACFD2;cursor:pointer" onclick="openNav()">&#9776; <div><img src="here.jpg"></div> </div> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementById("logozone").style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("logozone").style.marginLeft= "0"; } </script> </div> <div>This is a the main content area</div> </body>
  3. Hey there, I know this is somewhat of a rookie problem, but I'm a little rusty on the subject of float, since my more recent projects haven't dealt with it much. I have created a two-column layout (main content and a navigation sidebar) with floating divs. However, at a certain zoom level the sidebar is kicked down below the main content div. I'm trying to figure out how to keep the two columns side-by-side on the page, no matter what the zoom level is. I used to know how to do this, but as I said, I'm a little rusty in this department. Any help would be greatly appreciated. The url is: http://www.zyggywebs.com body { background-color: white; background-image: url(banner-new2.jpg); background-position: center top; background-attachment: fixed; background-size: 160%; color: black; padding: 20px;}a { color: yellow;}a:hover { color: steelblue;}#header { background-color: black; background-position: left bottom; color: white; padding: 10px; height: 130px; border-radius: 1em;}#main { float: left; width: 960px; background-color: black; opacity: 0.800; color: white; padding-left: 20px; padding-top: 20px; padding-bottom: 20px; padding-right: 20px; min-height: 700px;}#sidebar { float: left; background-color: black; color: white; height: 500px; width: 200px; margin-right: 10px; margin-left: 10px; text-align: center; border-radius: 1em; opacity: 0.800;}#sidebar img { max-width: 150px; border: none;}#footer { clear: both; background-color: black; color: white; padding: 10px; margin-top: 20%; border-radius: 1em;}#galleries img { width: 20%;}.section { padding-bottom: 25px;}
  4. Okay, i have uploaded an attachement to the post here, and as you see. I have some trouble with the menu. I am trying to make a menu just like this website: http://www.templateaccess.com/demos/responsive/html/devclub/index.html And no, it is not stealing. Only educational purpose use! Anyhow and regardless! As you see, the menu drop-down's are going behind the boxes i have right now. And not sure why. I have also attached the 3 .css files, coz the code is a little long, it should be very easy to find out how to work with it inside the .css files. I did try to use z-index with 100000 on .menu ul li ul li inside the panel css file, but since it did not work, i'm on a little thing i would call broke of ideas -.-'. Hope you guys can help me figure out what is wrong here, could be awsome! -Thanks NOTE: If you need more information, please do not hesitate to give a comment etc . And ohh, almost forgot to tell. The Menu is based on .JS file. Meaning i am using .JS to input the different menu-tabs etc to the panel. Hope you can make some sence of this whitch i cannot, just yet. -rootKID
  5. I am working on a website with 4 servers with a load balancer. It is www.cleantelligent.com.All of the servers have an idtentical copy of the website on them. But on one of the servers, there is a white bar above the main content, below the header, that should not be there. I've tried re-copying all of the css and index files to the server, but it's still not working.The server is called enos.So, it's enos.cleantelligent.comCan anyone tell me what's causing this stupid little white bar? It's not showing up as an individual element, but as part of the background content, I think?
  6. Hello Everyone,Please find the attached "MyDesign.png" file. Could you please Help Me with Constructing (Developing) it with DIV tags? Please help.
  7. Unicris

    media only divs

    Hey, I am attempting to place ads on my site. I have a fluid grid layout using dreamweaver in which I have a Left navigation then right content layout. It works well in readjusting my content to view on mobile devices or computer browsers.Anyway, I would like to place ads which would be ok when it has the right and left layout in larger windows. But when switching to mobile, the navigation moves to the top of the content. So since I am including the ads Div inside the Navigation Div so it scales appropriately, I would like to not have the ads shown on the mobile version of the site, or to display a different size ad that would not be as intrusive. I saw somewhere that adding to my CSS would apply to any browser less than 481 px. I am testing on a galaxy s3. @media only screen and (max-width: 481px) { #ads1 a { display: none; }} , but the ad still shows up. In this case its not a huge deal, but if I include a skyscrapper ad, I don't want that showing up in front of all my content.Here is the HTML for the particular DIV arrangement <div id="CareerNav"> <?php include ('../../navigation/careerNav.php'); ?><div id="ads1"><br><hr><br> <a href="http://click.linksynergy.com/fs-bin/click?id=2mtHBT8Zwf4&offerid=145240.10000074&subid=0&type=4"><IMG border="0" alt="234X60" src="http://ad.linksynergy.com/fs-bin/show?id=2mtHBT8Zwf4&bids=145240.10000074&subid=0&type=4&gridnum=3"></a> </div> </div> The site in question is at http://jonccody.com/career/skills/business.php I plan on adding different ad blocks to different pages depending on the size of the adjacent content. But I've gotta get it not to show in the browswers in which the navigation moves above the content. (IE Mobile phones) If I can figure out a way to display a different set of code for those situations, that would be good. I'd probably add a Div below the content for mobile browswers.
  8. Dear all, I am facing one problem with divs. I have included the below code in html. <div style="float: left">Satyaprasad</div><div style="border-bottom: 2px dotted #000000"></div> Actually my required output is as shown below. Satyaprasad............................................................................................. But i am getting the output as shown below...................................................................................................................Satyaprasad Please help me, is there any mistake in my code. Thanks inadvance.-Satyaprasad
  9. Dear all, I am facing one problem with divs. I have included the below code in html. <div style="float: left">Satyaprasad</div><div style="border-bottom: 2px dotted #000000"></div>Actually my required output is as shown below.Satyaprasad.............................................................................................But i am getting the output as shown below...................................................................................................................SatyaprasadPlease help me, is there any mistake in my code.Thanks inadvance.-Satyaprasad
  10. Hi W3, new member over here. I'm in a bit of a bind right now with a project I've been working on for the past few months, and it's now come down to developing html content (using jQuery Mobile framework) to be deployed on mobile devices of varying size. The main problem is resizability and readability of text (which I'm not even sure if this would be a problem or not, however I'd rather be safe than sorry when the deployment phase happens). Currently I've managed the following on this page: http://i.imgur.com/p9JZ6jo.png The final result should look like this: http://i.imgur.com/lRLooXq.png The problem is, as I see it, that everything's clearly too big to be deployed on a mobile device. It's relatively big even for small desktop monitors and I doubt this will be useable on a device since everything will be compressed to extremely tiny values. I need to make this as dynamic as possible based on resolution (so everything should scale properly, including the image, which gets centered in the div (don't know how to pull that off) as well as the text, which takes up just the amount of space available in the div, and adjusts itself in the form of a ratio if possible. The layout must be kept as is, that is 4 divs which take up a quarter of each, with content that's yet to be further added in the middle of each div. I had a problem with making the divs take an equal amount of height so I set the CSS to be exactly 240px long, which is too much for a mobile device in most cases... I've played about with relative/absolute positioning which sent all the content inside the divs flying to the footer or the left margin and other weird results... I appreciate any help possible to make this dynamic and neat looking. CSS being used for the divs specifically is: /*Power Storage*/.batteryZone { width:45.5%; background-color: #878787; border-radius:10px; border: 1px solid #5C5C5C; float: left; margin:1%; padding:1%; min-height:240px;} This allows me to float 2 boxes together next to one another and the remaining two float below it through a clear:both; div tag which separates them. HTML for the page is as follows: <body> <div id="powerStorage" data-role="page"> <div data-role="header"> <a href='index.html' class='ui-btn-left ui-btn-back' data-icon='arrow-l' data-transition="slide" data-direction="reverse">Back</a> <h1>Power Storage</h1> </div> <div data-role="content"> <div id="content"> <div id="title"> <h1>Power Storage</h1> </div> <div class="batteryZone"> <!-- Battery description and general Info--> <h3>Auxiliary Battery 1</h3><br /> <h6>Location: Bridge, Upper Deck</h6> <br /> <h3>Status:</h3> <span id="battStatus1"></span> <br /> <h3>Operation:</h3> <span id="battOp1"></span> </div> <div class="batteryZone"> <!-- Battery level code here--> <img src="/images/battery/Battery5.png" alt = "Battery Low!" width=300px /> <br /> <br /> </div> <div class="extend"></div> <div class="batteryZone"> <!-- Time Code Here --> <h3>Load</h3> <div id="battLoad1"> </div> <br /> <h4>Time Remaining</h4> <br /> <div id = "battTime1"></div> </div> <div class="batteryZone"> <div class="source"> <h3>Current</h3> </div> <div class="source"> <h3>Voltage</h3> </div> <div class="source"> <h3>Temperature</h3> </div> </div> </div> </div> <div data-role="footer"> <h4>Footer content</h4> </div> </div> <!-- / page --> </body>
  11. Hi! I'm afraid I'm ignorant to something here, as I've been trying to apply particular effects via css on this simple site, but cannot figure it out! Before I make even more of a code mess, I thought I'd see if anyone with a clue could help point me in some direction as to what it might be... thank you for your help! INDEX: body {height:auto;background-color:black;margin: 10px auto;}#main {width:1280;background-image:url(images/bg.jpg);margin-left:auto;margin-right:auto;background-repeat:no-repeat;} #header {width:1280;margin:50 0 0 0;background-image:url('images/logo.png');background-repeat:no-repeat;}div.nav {background-color:black;}#navigation {font-size: 20px;font: center;} #content {background-image:url(images/black.png);margin:15px;} ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-image:url('black.png');}li{float:left;}a:link, a:visited{display:block;padding:0px 35px;width:100%;font-weight:bold;color:white;text-align:center;text-decoration:none;text-transform:uppercase;} NAVIGATION PHP: <ul id="nav"><div class="nav"><li><a href="#home">MUSIC</a></li><div><li><a href="#film">FILM SCORE</a></li><li><a href="#production">PRODUCTION / MARKETING</a></li><li><a href="#store">BURN MONEY</a></li><li><a href="#contact">CONTACT / CONNECT</a></li><li><a href="http://www.facebook.com/pages/Sonic-Phantasm/264240086960916"><img src="images/icons/facebook.png" width="50" height="50" alt="facebook" /></a><a href="https://plus.google.com/103043756662788803432/posts"><img src="images/icons/googleplus-icon.png" width="50" height="50" alt="googleplus" /></a></li></ul>CSS: body {height:auto;background-color:black;margin: 10px auto;}#main {width:1280;background-image:url(images/bg.jpg);margin-left:auto;margin-right:auto;background-repeat:no-repeat;} #header {width:1280;margin:50 0 0 0;background-image:url('images/logo.png');background-repeat:no-repeat;}div.nav {background-color:black;}#navigation {font-size: 20px;font: center;} #content {background-image:url(images/black.png);margin:15px;} ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-image:url('black.png');}li{float:left;}a:link, a:visited{display:block;padding:0px 35px;width:100%;font-weight:bold;color:white;text-align:center;text-decoration:none;text-transform:uppercase;}
  12. Hi I'm just learning CSS/HTML (self-taught) and am curious about the process required to achieve something like the image that can be seen on this blog page: http://theletteredcottage.net/our-house/ Any advice/info, and in particular some example code, would be fantastic. As stated, I'm only a newbie so simple explanations with limited jargon much appreciated :-) Thanks so much!
  13. Hi everyone! This is my second post on this forum, and my first thread! I am a semi experienced coder in both (X)HTML, and CSS having done many web pages for simply learning purposes, and for my local Zeitgeist Chapter http://www.zeitgeist-toronto.com. In simple; I won't be needing so much in-depth explanation; simply code will do. So let me get started. If you visit http://www.beta.zeit...oronto.com/test (note this will be updated constantly, and possibly with the solution. feel free to take my code and use it for yourself ) you will notice that there is no real space between my 'contentWrapper' and the 'footer'. Now logically I would figure I need to add a 'margin' to create the space. Well that would work if I did not have two columns in the 'contentWrapper', and needed to use 'clear: left;' which negates my 'margin'. Now I already know the normal solution is to add a 'div' between the 'contentWrapper' and the 'footer' right? Well I don't want to do that. Maybe I have to, but I am challenging the community to find a way to do it without that additional 'div' and to possibly explain why 'margins' can't work when I use 'clear: left;'. My opinion, you mite as well prevent 'padding' and 'boarders' working then if you stop 'margins'. Anyway hope to hear some ideas. PeaceMichael Snape (zip of all the necessary files; no images) betazeittortest.zip
  14. Hi, I am currently designing a website using CSS3 properties such as gradient but have found a strange display bug in IE9 that I really can't fathom currently. The website should look like this (Firefox): Whereas in IE it looks like this (Note right hand side of main content div): My CSS is as follows: @charset "utf-8";/* CSS Document */body {background-color: #B0C7E5;margin: 0px;}body,td,th {color: #FFF;}@font-face { font-family: 'TangerineBold'; src: url('../fonts/Tangerine_Bold-webfont.eot'); src: url('../fonts/Tangerine_Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Tangerine_Bold-webfont.woff') format('woff'), url('../fonts/Tangerine_Bold-webfont.ttf') format('truetype'), url('../fonts/Tangerine_Bold-webfont.svg#TangerineBold') format('svg'); font-weight: normal; font-style: normal;}h1, h2, h3 {font-family: TangerineBold;font-weight: bold;text-decoration:underline;}a {color: #FFF;text-decoration: none;}.txt_shadow{text-shadow: 5px 5px 10px #000;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=135, Color='#000')";filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=135,Color='#000');}.centre_txt {text-align: center;}#sidebars{color: #fff;background: #b0c7e5;background-image: -moz-linear-gradient(top,#85a8d5, #b0c7e5);background-image: -webkit-gradient(lineaer,left top,left bottom,color-stop(0,#85a8d5),color-stop(1,#b0c7e5));-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr='#85a8d5', EndColorStr='#b0c7e5')";filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#85a8d5',EndColorStr='#b0c7e5');}#wrapper{width:960px;color: #fff;background: #b0c7e5;background-image: -moz-linear-gradient(top,#85a8d5, #b0c7e5);background-image: -webkit-gradient(lineaer,left top,left bottom,color-stop(0,#85a8d5),color-stop(1,#b0c7e5));-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr='#85a8d5', EndColorStr='#b0c7e5')";filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#85a8d5',EndColorStr='#b0c7e5');margin: 0 auto 0 auto;}#header{width:960px;margin: 0px;padding-top: 25px;padding-right: 15px;padding-bottom: 25px;padding-left: 15px;font-family: TangerineBold;font-weight: bold;font-size: 60px;}#date {float: right;font-size: 24px;color: #000;}#top_nav{width:960px;font-family: TangerineBold;font-weight: bold;font-size: 38px;}#top_nav ul {margin: 0px;padding-top: 10px;padding-right: 0px;padding-bottom: 10px;padding-left: 15px;}#top_nav li {display: inline;list-style-type: none;}#top_nav a:hover, a:focus, a:active{color: #000;}#main_content {width: 960px;-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;box-shadow: 5px 5px 10px #000;padding: 15px;background-image:url(../assets/backgrounds/main_div_bg.png);color: #000; } #footer{clear:both;padding: 15px;font-size:24px;font-family: TangerineBold;font-weight: bold;color: #000;} Can anyone please suggest why this is happening and how I would go about fixing it? Many thanks, Anthony
×
×
  • Create New...