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

  1. Hello Everyone, Could you please tell me how do I fix Scrolling Action in “A Segment”? Please help. Thank you.
  2. Ok so I made a little scrolly box thing for my stories on my websites little html slide show thingy with all the link buttons right. Well on the first slide it worked, but on the 2nd, the scroll box wouldn't show up. I tried it again with the 3rd. Same thing, yet the first one shows up, and the page is perfect. Help please. Ill post the code. <html> <head> <title> Picture Five </title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <table class="SS"> <tr> <td class="navigation"> <p id="text"> Slide Show Navigation:</p> <p><a href="SSPicturefour.htm" alt="Back"> <img border="0" src="backward.png" alt="back" width="32" height="32" /> </a> <a href="SSInstructions.htm" alt="Restart"> <img border="0" src="restart.png" alt="Restart"> </a> <a href="SSPicturesix.htm" alt="Next"> <img border="0" src="forward.png" alt="next" width="32" height="32" /></a> </p><hr/> </td> </tr> <tr> <td class="picture"> <h1>Old</h1> <hr/> <img src="old.png" width="10%" height="20%> </td> </tr> <tr> <td> <div id="scroll"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis blandit mattis. Maecenas vel tortor sed nisl blandit sollicitudin ut ut nunc. Quisque elementum cursus urna. Suspendisse porttitor mattis metus, eget consequat urna congue id. Aenean at tempor sapien. Sed sollicitudin enim sagittis tellus tincidunt tempor. Quisque nec eros mi, a sodales tellus. Nunc condimentum, ligula sed porttitor lacinia, quam justo interdum est, aliquam varius dui tellus pellentesque sapien. Integer in dui risus. Duis hendrerit libero in dui scelerisque ut consequat velit laoreet. Pellentesque nec urna nisl, eleifend ullamcorper libero. Phasellus ligula dolor, interdum varius imperdiet nec, consequat aliquam orci. Donec tempor tempor elit, vel pretium neque aliquam sed. Vivamus ut elementum nulla. Praesent sollicitudin ultrices leo, consequat sagittis justo egestas sed. Donec eu leo risus, id sollicitudin risus. Suspendisse augue mi, ornare sit amet sollicitudin non, malesuada non urna. Maecenas pulvinar dignissim diam, ac fringilla leo commodo ut. Donec viverra sodales mauris at mollis. Integer et quam mollis nisi hendrerit venenatis quis et arcu. Morbi sollicitudin congue enim in facilisis. Cras id pharetra ligula. Vivamus sed ipsum a quam feugiat auctor at eu erat. Ut tempor consequat enim in tincidunt. Nulla massa ipsum, rhoncus id malesuada ac, pulvinar ut massa. Suspendisse ac ante ut ante fermentum vestibulum. Cras sed mauris in sem hendrerit ultricies in at massa. In vestibulum vestibulum turpis ut aliquet. Integer facilisis ullamcorper ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc in sapien et felis luctus vulputate. Cras aliquet metus ac magna imperdiet pellentesque. Curabitur sed turpis ac nisi porta fringilla in non ligula. Mauris id dolor eget velit adipiscing scelerisque vitae nec nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Sed at magna et nisi vestibulum mollis id a nibh. Aenean sollicitudin vestibulum diam, nec faucibus lorem tempor non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum pellentesque ipsum venenatis malesuada. Suspendisse ullamcorper, enim eget sollicitudin dictum, ante odio commodo odio, vitae aliquet est mi imperdiet enim. Sed nec massa a turpis adipiscing adipiscing. In hac habitasse platea dictumst. Nunc vitae magna tellus, sit amet vehicula orci. Duis ac sagittis tortor. Vestibulum ac tortor a velit tristique porta. Vivamus eu auctor nisi. Fusce sodales, eros non pharetra fringilla, risus neque imperdiet nulla, quis consectetur orci nisl at nisl. Maecenas augue est, porttitor vel tristique non, tincidunt ut nunc. Donec tincidunt odio in sapien euismod suscipit. Sed dictum dictum vulputate. Morbi a molestie nulla. Nunc venenatis rhoncus dolor ac faucibus. Donec tincidunt fermentum tortor, et eleifend sapien accumsan eu. </p> </div> </td> </tr> </body></html> Style Sheet- a:link {text-decoration:none;} a:visited {text-decoration:none;} body {background-image:url('background.png');} table{border-color:white; width:80%; height:100%; background-color:black;} table, tr, td{ border-collapse:collapse; color:grey;} h1 {text-align:center; color:#800000 ;} h2{text-align:center; color:#A00000;} h3{text-align:center; color:#E00000;} p{font-family: courier new; color:white;text-align:center; font-size:20px;} div{background-color:black;} p.story{font-family:arial; font-size:14px; text-indent:50px;text-align:left;} ul.a {list-style-type:circle;} div.scroll{width:100%; height:20%; overflow:scroll;} iframe#bg{background-color:black;}#text{color:grey; font-family:georgia; font-size:14px; text-align:center;} #title{border-color:white; height:1%;} #nav1{width:5%; height:70%;} td.navigation{border-color:white; width:100%; height:1%;} td.picture{ width:885px; height:1%;} table.SS{width:100%;height:100%;} table.ssp{width:10%;}
  3. I'm trying to have a centered <div> that always goes top to bottom, but as content is added it expands with the content. Thanks! Here's what I have so far. <!DOCTYPE HTML><html><head><title>My Site</title><style type="text/css">* {padding: 0;margin: 0;}html, body {height: 100%;}body {background-color: #999;}.container {position: relative;width: 1000px;height: 100%;margin-left: auto;margin-right: auto;background-color: #fff;}</style></head><body><div class="container"><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1></div></body></html>
  4. Okay, here is the problem, the background to it is a little bit lengthy but please bear with me as I think it's probably essential to getting to the root of it. I'm trying to design an on-site navigation system using straight javascript and jquery. The site is for a photographer who has a number of galleries of her images she wants to put up. These are displayed on the page as a series of thumbnails which are arranged in a grid (lets say 3 by 3 here for simplicity's sake). The idea is that these can either be displayed in order of size or in order of the date the gallery was updated. There are two buttons at the top of the page 'size' and 'date' and whenh one of these is clicked the thumbnails should animate into the new position. I've reduced the arrays to their essential parts for the purposes of this question. They're defined in the header of the page as follows: //order: id, gallery size, gallery date (UK format), thumbnail url. x position (px), y position (px) var galDate = new Array();galDate[0] = [0, 7, 12-2-2012,"images/image5.jpg", 100, 100]; galDate[1] = [6, 2, 1-2-2012,"images/image0.jpg", 200, 100]; galDate[2] = [4, 10, 24-1-2012,"images/image8.jpg", 300, 100]; galDate[3] = [9, 3, 11-12-2011,"images/image7.jpg", 100, 200]; galDate[4] = [7, 14, 4-8-2011,"images/image6.jpg", 200, 200]; galDate[5] = [2, 32, 3-8-2011,"images/image3.jpg", 300, 200]; galDate[6] = [8, 11, 10-6-2011,"images/image2.jpg", 100, 300]; galDate[7] = [5, 5, 1-6-2011,"images/image1.jpg", 200, 300]; galDate[8] = [3, 7, 3-4-2011,"images/image4.jpg", 300, 300]; var galSize = new Array();galSize[0] = [2, 32, 3-8-2011,"images/image3.jpg", 300, 200]; galSize[1] = [7, 14, 4-8-2011,"images/image6.jpg", 200, 200]; galSize[2] = [8, 11, 10-6-2011,"images/image2.jpg", 100, 300]; galSize[3] = [4, 10, 24-1-2012,"images/image8.jpg", 300, 100]; galSize[4] = [3, 7, 3-4-2011,"images/image4.jpg", 300, 300]; galSize[5] = [0, 7, 12-2-2012,"images/image5.jpg", 100, 100]; galSize[6] = [5, 5, 1-6-2011,"images/image1.jpg", 200, 300]; galSize[7] = [9, 3, 11-12-2011,"images/image7.jpg", 100, 200]; galSize[8] = [6, 2, 1-2-2012,"images/image0.jpg", 200, 100]; Displaying the thumbnails and the animation is handled by three functions: which are defined in the <head> section of the page as follows: 'Swap' loops through the all the rows in array 1 defining the id, x position and y position as variables id1, x1 and y1 (please forgive the 'document writes' this was part of an earlier debugging attempt) function swap(array1, array2){for(i=0; i<array1.length; i++){var id1 = array1[0];document.write ('id1: ' + id1);document.write ('<br />');var x1 = array1[3];document.write ('x1: ' + x1);document.write ('<br />');var y1 = array1[4];document.write ('y1: ' + y1);document.write ('<br />'); // For each row in the first array, 'Swap' then loops through the second array. When the ids are equal, this triggers the 'animate' function, which then should handle the actual animation for(j=0; j<array2.length; j++){var id2 = array2[j][0];document.write ('id2: ' + id2 );document.write ('<br />');var x2 = array2[j][3];document.write ('x2: ' + x2 );document.write ('<br />');var y2 = array2[j][4];document.write ('y2: ' + y2 );document.write ('<br />'); if (id2==id1){animate(x2, y2);} //close if else {document.write('for loop i should continue');document.write ('<br />'); } } //close for j } // close for i } // close function // 'Animate' is triggered when the ids from each of the arrays correspond and performs the animation (nb – this isn't working perfectly at the moment but the basic animation functionality is working – getting the right thumbnals to animate to the right places is something I have to come back to but its not the main problem at the moment). function animate(x2, y2){$("#"+i).animate({left:x2, top:y2},"slow");document.write ('animate function triggered');document.write ('<br />');} // The actual displaying of the thumbnails is handled by a third function called, surprisingly, 'display' which is as follows. function display (array) {for (i=0, max = array.length; i<max; i++){ $('#container').append('<div id="'+array[0]+'" style="position: absolute; left:'+array[6]+'px; top: '+array[7]+'px;"><a href="#"><img src='+array[5]+' height=75px width=75px></a></div>');}} I have all of the above in the this order in the header of the page. Finally, I have the jquery click function call which is as follows: $(document).ready(function() {$('#size').click(function() {swap (galSize, galDate);}); $('#date').click(function() {swap (galDate, galSize);}); display(galDate); }); The body of the page is as follows: <body><button id="size">Size</button> <button id="date">Date</button><div id="container"></div><script>display (galDate);</script></body> Just to be clear, I realise that some of the actual functionality isn't going to churn out the desired result in terms of positioning etc. The fact of the matter though is that the 'swap' function works in as far as it animates the images (I know because I've tested it!) :-) The problem I have (and thanks to those who've stayed with me thus far!) is that as soon as I click on one of the buttons (size or date) the displayed thumbnails disappear. The swap function is still working because all the 'document writes' display on the page and, similarly the animate function is triggered as well. Its just thet there are no thumbnails anymore and they're sort of central to the whole undertaking. As you can probably tell, I'm pretty new to this and there is no doubt an obvious explanation. The thing is, I don;t know what it is. Any ideas or nods in the right direction would be much appreciated. CheersStef
  5. Hey! So I have an intersting situation:I am trying to make a div stop moving left past a certain point when the browser is resized. But in the method I am using, I can no longer position the Div to sit exactly where I want! I want it to float: left at 50%, and be offset left by about ~150px. My code looks like this: div.main_content {padding: 0 195px;margin: 0 auto;}div.inner_content {position: relative;float: left;top: 150px;left: 50%;margin: 0 auto;min-width: 400px;border: 1px solid #000000;background-color: #A0CFEC;text-align: justify;overflow: hidden;}<div class="main_content"><div class="inner_content"><p>veruib eribwe vbeuvip eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p></div></div> Again, my problem is that now the div sits at exactly 50%, as expected, and overflows off the screen. What I need is a way to offest the div a little to the left, similarly to this: div.main_content {position: absolute;float: left;left: 50%;margin-left: -150px;} As far as I can tell, the div does not stop at a certain point when the browser is resized if I use this method. Any suggestions? Thank you!!
  6. So....i have this series of tabs (visually) and i would like to now if there is a way to refresh their contents everytime i click on them...
  7. Hello my name is Alexander, the last year and a half I've been trying to work on building websites myself. I work on it for a few days or weeks out of a single month, then I quit for a few months and started back up. I quit because my frustration and inability to learn this stuff. I have read and watched and asked so many people, forms, Videos, guides and other tutorials. I'm not familiar with a lot of the terminology and other file associations that go along with building websites. I use Adobe Dreamweaver and probably not use anything else. I know most of the Adobe product and found out but Dreamweaver and other utilities like this for building websites I just can't understand why things don't work. I've attached a file below for anybody that would kindly help me. This is what my problem is, I created a couple different stylesheets and type the code in myself. One of which is header. In header, there is the Div ID for logo frame and within Logo frame there is a logo div and logo text. underneath the logo frame, I have another div element called banner frame. and within banner frame there are two more div's that create a border and the banner image.note: I'm not using the word frame referencing to an actual frame with in HTML code whatever it is. I'm simply referring to frame as the name in which I call things for my own understanding. Not to get anyone confused. For whatever reason, the banner frame moves itself on top of the logo frame. I've literally spent days staring at my computer screen and try and understand positioning and how div tags work with CSS. I'm not exaggerating I've literally spent 6 hours just now before writing this messing with every feature trying to get them to stack up properly. So I decided that a margin from the top pushing the better frame in the correct spot underneath the logo frame. I also have a div tag called page content that stacks up underneath the banner frame with no problems. In page content, there are some more div tags that are displaying correctly it would seem. However when I tried to add my footer CSS and create a new DIV element for this, it puts it on top of my page content. Now the reason why can't the margin this time is because I need what ever is in page content to auto set the height depending on what's inside of it. As of right now I have a website that I have to manually adjust every page they correct height altering and creating duplicate CSS code within those stylesheets just to accommodate this. So now you can feel my frustration this hopefully. In one hand I'm a computer engineer who knows way too much and in the other I am below novice in the HTML coding. So that's why it looks like I know I'm doing, but I really don't. A lot of people had told many use tables in the past. Personally I think the word table just sounds old to me. On top of that all the websites that I checked out. Don't use tables in any other code . If they do using a keyword search and other methods don't seem to bring any results. I tried replicating other people's websites such as trend micro.com. They are using all CSS stylesheets and Div tags but I can't seem to get it right what they're doing. I've also use the program rapid Weaver and exported their code, simple webpage that looks just like mine but again I can't figure out what they're doing. Part of the reason is because they had too much code going to other things it does not pertain. thank you for any help in advance. Merry Christmas to all. Template Test.zip
  8. 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
  9. I have attached my sample website. In it how do i arrange multiple "div" and why do some break up at different screen sizes. Check my code and help me find my mistakes. index.html
  10. Hello Everyone, Greetings! As a part of assignment test I have to make the HTML Code in DIVs (tableless) as per the attached "Screenshot.png" file. FYI - On clicking on the "Populate Values" button, the div below the button should populate the values of the selected radio buttons of the preferred and home locations respectively as shown in the attached .png file. --------------------------------------------Current status of My HTML Code:--------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title><meta name="description" content="#" /><meta name="keywords" content="#" /><link rel="stylesheet" type="text/css" href="StyleSheet.css" /></head><body><div id="container"><div> </div><div class="LogoHeader"></div><div style="float:left;width:280px;text-align:left">Home | About XYZ | Contact Us</div><div style="float:left;width:480px;text-align:right">(icon) Print (icon) Share (icon) RSS</div><div class="clearBoth"> </div><div> </div><div id="OL-Bg"><div class="OL">Office Locations</div><div><textarea name="TextArea1" cols="20" class="OL-Text">Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...</textarea></div></div><div style="float:right;width:738px">ABOUT XYZ</div><div class="content">Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...<br /> <br /> Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...<br /> <br /> Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... <img alt="X" src="images/XYZ.png" width="200" height="86" style="float: left" />Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... <br /> Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... <br /></div><div class="clearBoth"> </div><div class="copyRight">Copyright - Blah... blah... Blah...</div></div></body></html> -------------------------------------------Current status of My CSS Code:-------------------------------------------body { margin-top: 0px; margin-bottom: 0px; background-color: #999999;}div#container { width: 980px; margin: 0 auto; background-color: #FFFFFF;}.FloatRight {float: right;}.FloatLeft { float: left;}.clearBoth { clear: both;}.OL-Text { table-layout: fixed; height: 90px; width: 214px; font-family: Verdana; font-size: 10pt;}.OL { font-family: Verdana; font-size: 11pt; font-weight: bold; width: 220px; background-color: #969696; text-align: center; height: 32px; vertical-align: middle; line-height: 30px;}#OL-Bg { border: 1px solid #B0B0B0; width: 220px; padding: 10px; float: left;}.LogoHeader{ background-image: url('images/XYZ.png'); background-repeat: no-repeat; float:left; width:220px; height:35px; text-align:left;}.copyRight { border-color: #808080; font-family: Verdana; margin-top: 0; margin-bottom: 0; font-size: 11px; color: #333333; text-decoration: none; height: 30px; text-align: center; vertical-align: middle; line-height: 30px; border-top-style: groove; border-top-width: 2px;}.content { border: 1px solid #FFCC00; float: right; width: 736px;; font-family: verdana; font-size: 10pt; color: #333333;} Please help... Thank you.
  11. I have realized a web site using joomla. I started from a very basic template and then I adjusted it to my needs, and everything works as espected. Except one thing, I can't modify the width!Here's the basic code: #minwidth {background: transparent;width: 1100px;border: 0px;height: .01em;overflow: scroll;}#template_framework { position: absolute;left: 50%; margin: 0 0 0 -485px; width: 970px;} Then you can see the whole page at http://www.beachpartyfever.comAnyone knows how I could augment the width of the web site (meaning the width of the visible divs inside which there are the div header, content, logo, etc.Thank's!
  12. Hi, I have my global navigation inside a div element. On browser resize elements of the navigation jump in next line, so that they are visible. I don't want that to happen. I have tried different solutions: - I gave the div element min-width property -> it works but the problem is that this div also has a background color, and the number of navigation elements changes from site to site. So when i have 5 elements it is ok, but when there is only one, because of the min-width, the background color is stil visible on places where no navigational elements exist. - I tried OverFlow:hidden -> it also hides the dropdowns :\. I tried overflow-x but it doesn't work.IAny idea how to solve this? Sandra
  13. OK, so a question mainly about the use of the id class and if something would be proper use or a bad practice as far as coding goes. In an attempt to streamline stuff even further I have been recoding my site and I have been thinking about adding an id tag to the body of some pages. This would of course allow me to set custom css for those specific pages.Examples:<body id="creatures"><body id="core-classes">etc, etc.. Or would it be more proper to just create an extra <div> with the id tags--or a class tag-- inside of the main content div for that section and go that way.Examples: (article being the primary container for that section with all the positioning/etc data for the container)<div id="articles"> <div id="creatures"> --insert content entry here-- </div></div> OR <div id="articles"> <div class="creatures"> --insert content entry here-- </div></div> I've read a few things on it and some seem to be for it and some against it but the articles I've found are fairly old so need some fresh thoughts on it.
  14. I am frustrated because this: <div style='width:400px:height:150px;border:1px solid blue'>...</div> does not give me a 400 by 150 pixel region on the page.(the 'border' could be background-color; it's just there toshow the region boundaries.) <div> always seems to be page width.The best I can get is with <td> (table cell),which will be no bigger than the enclosed contents. I want a "box" into which I can put thingsand those things will be inside the boxand the box will be around those thingswith the specified size.Exclusive - nothing else on the page will be inside the box(<\<div><img align='left' eats contents way past the </div>)! Is this even possible with HTML and CSS ?
×
×
  • Create New...