|
HTML - Why Do We Need <div> Elements
I'm trying to understand the need for <div> elements, couldnt we do the same things with a <p> element. I understand the <span> element because it allows you to have box models for inline elements.
Is <div> mostly to keep things organized and easy to read? Similar TutorialsHow do I make element's change their height automatically depending on whether they have anything contained within them? My page background is a div's bg image but the div hasn't expanded to the size of the contained elements. The div's name is nicola-bg Here is the site I have the same problem too with #image-section. That div is styled to have large borders but the borders don't extend to the height of the div's containing elements. Is there a way that anyone knows of to put list items side by side in a row? I'm currently working with some html/css/jquery that allows you to move li elements around and order them. However, instead of being on a new line for each element, I'd like to put several side by side in a row. Is there any way with html/css to make this happen, or is there no way to change the "nature" of li elements? Please help me, I'm trying to hide elements (boxes) is HTML in this way: <?php if($_POST) { //left.style.visibility="hidden" document.getElementById(left).style.display = 'none'; } ?> By checking if a form had been submitted...But when displaying the page all elements on the page is hidden not the element "left" only..Why? Thanks is advance. I am using ASP.NET however my front end design skills arent that great. what I was wondering was, since I am using a repeater or a datalist control, I want each element to have a nice design. the site is like a products site (retail type website). I mean, the styling for each element is something I im unsure how to design, any suggestions or tips on how each element should be designed/layed out? product detail: qty, product name, image, smalldescription. styling/designing/theme doesnt matter, you can include that. just a rough guide would be nice in terms of how the layout for a product should be design, like where each piece of information should be layed out. thanks. thanks. Hello everyone, I have a problem and it is driving me insane :/. I am trying to create 3 inline boxes (using span or div?) that are right next to one another (ie. with no borders). The two at either side are of length 25% and the middle is of length 50%. Here is my effort at coding it myself : Code: <!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" />
<title>Untitled Document</title>
<style>
body {
word-spacing: 0px;
}
.sideWrap {
top: 0px;
width: 25%;
height: 100px;
background-color: #0CF;
display: inline-block;
}
.sideWrap2 {
top: 0px;
width: 25%;
height: 100px;
background-color: #0CF;
display: inline-block;
}
.center {
padding: 0px;
margin: 0px;
left: 25%;
width: 50%;
height: 200px;
background-color: #0F0;
display: inline-block;
}
</style>
</head>
<body>
<span class="sideWrap"></span>
<span class="center"></span>
<span class="sideWrap"></span>
</body>
</html>
But unfortunately, this produces ... something I dont want .. as shown by the attachment. This clearly has inexplicable white borders that I have not coded :S, and the three blocks are not inline. Can anyone give a simple explanation as to how to put these in line and eliminate the border between them? Thanks in advance, mintsmike This is my first project using CSS and anything other than basic HTML and it's been going good so far. The page I'm designing is for my new guild on World of Warcraft (yes I'm addicted) and my problem is with the Content DIV i created. The site is http://twilightsdawn.50webs.com/index.html In the code, I nested DIV elements containing the actual news posts themselves within the actual Content DIV, and by not specifying a height I had hoped the element would resize and simply tack on extra DIVS below one another. This seems to be the case with Banner and Content Text DIVs but the second set simply overwrite the previous and all my attempts to force the second "news post" below the first have failed or resulted in bizarre alignments. I am at a loss and would appreciate any design suggestions and/or feedback on the code. Thanks Hi, I have a form with html combo and input elements in a dialog with scrollbar. Problem I am facing is some of combo elements which are disabled disappear. When I scroll the disabled elements appear again. This happens only on IE. Works fine on firefox. Is there any issue with disabled elements as such. Thanks Trying to modify a template.. http://www.varaxon.com/ On the right, below the login box are 3 seperate boxes - I've been trying to make these completely clickable - I just can't seem to figure it out. I tried doing unordered lists, etc. Color me stupid - I'm just a lowly PHP Developer with minimal design/html coding experience. -G I am designing the home page for a website. I have a list of links that is the site index that is 300px wide. I want this on the left side of the page. I want a paragraph that will basically be a introduction to the website to be inline with the index... sitting to the right of the index rather than below it. here is a simplified version of what I have: <body> <div id="wrapper"> <div id="head1"> <h1> page title </h1> </br> </div> <div id="list" <ul> <li> <a href="perps.html"> blah</a> </li> </br> <li> <a href="Why.html"> blah </a> </li> </br> <li> <a href="surveillance.html">blah </a> </li> </br> <li> <a href="me.html"> blah </a> </li> </br> <li> <a href="network.html"> blah </a> </li> </br> <li> <a href="mystory.html">blah </a> </li> </br> </ul> </div> <div id="intro"> <p> ***paragraph text****.</p> </div> </div> </body> CSS sheet: #list { width:230px; padding: 20px 0 0 20px; border-style: solid; list-style:none; } #intro { border-style:solid; float: right; padding: 0 0 0 0px; margin: 0 0 0 300px; border: 0 0 100px 0; } I know i need to use "span" but I have no idea where to start. Any help would be greatly appreciated. I am currently creating some code containing a horizontal rule, some headers and a link that takes the user back to the top of the page. The page should look something like this... ------------------------------------------------------- HEADER ------------------------------------------------------- back to top HEADER How can I make it so that the header is the same distance from the horizontal rule regardless of whether the back to top link is present? At the moment whenever the 'back to top' link is present the header below is pushed down. Here is my code so far... Code:
<style type="text/css">
a{
margin-left:700px;
}
h2{
margin-top:20px;
}
</style>
<hr>
<h2>HEADER</h2>
<p>Paragraph here</p>
<hr>
<a href="#top">back to top</a>
<h2>HEADER</h2>
<p>Paragraph here</p>
I created a form with html. At the end of the form there are two buttons, the button "entry", and the button "reset". When clicking on "entry" button i want to print the form's elements. How can i do it? Hi everyone I've developed a website and now when it got ready someone discovered that the sidebar isn't floating correctly in his mozilla firefox. It works fine in my firefox and IE and in his IE, but not in his FF. So I have a screenie how it looks like when it's wrong and when it's right: Right: Wrong: The source is at www.latvala.com Please help me Sorry, i answered my own question. thanks for looking anyways Hi, I have a form that has a bunch of cascading drop downs - something like Country->State->City->. Each subsequent drop down is populated based on what is selected on the preceding one. What I am having trouble with is the positioning of the labels for these dropdowns. For ex., I want the word 'Country' written exactly above the Country dropdown, the word 'State' above the State dropdown and so on. Unfortunately, anything I try doesn't seem to work. I have used every CSS property I thought would help - margin, position, padding etc., but nothing works. The problem is when I resize the window the labels and the dropdowns are thrown out of whack and it becomes difficult to figure out just by looking which label belongs to which dropdown box. How do I fix this and align the form with their respective labels and make it independent of the size of the window? Thanks! Hi, I was wondering if someone could explain block and inline elements. I know they deal with word wrap but, I have read and I am still confused on how you know what is a block element and what is an inline element. Can someone provide some aid? Thanks. Hello everyone, Hopefully this is simple: I have 2 definitions - and I don't understand what they are trying to say exactly. Definition 1: Logical Element: An element that describes the nature of the enclosed content (but not necessarily how that content should appear in the browser) Definition 2: Physical Element: An element that describes how content should appear, but doesn't indicate the nature of the content What is meant by "the nature of the enclosed content" ... and could someone please break these down for the beginner? Thank you. Hello everyone, I'm new here. I hope someone will help me with my problem. You can see it he http://kahoe.monline.dk/portfolie2/index.php EDIT: Problem 1 solved. Problem 1 is in the grey menu to the right. I've used php include_once to insert four div elements (with images and a little text), but they position themselves in a strange way. It's supposed to be a collumn. You can see the html file with the four elements he http://kahoe.monline.dk/portfolie2/globalmenu.html I should probably say that I've used javascript to make a hover effect with the images. (Do I need to include code in this post, or do you guys usually view CSS and HTML in the browser?) Problem 2 is with IE. I have IE 8 installed, so I don't know about other versions, but this one can't find the images on my website. It works fine in Firefox. What's wrong? Problem 3 is with the div element at the top of the page, the one which contains the text "Denne hjemmeside ses bedst med Firefox. Download Firefox her. " I can't get it to sit at the very top of the page. I've used body { margin: 0; padding: 0; } in the stylesheet already, but it's not enough apparently... Hi All, AHHHHHHHHHHHHHHHHHHHHH Tables have got to be the most useless, but one of the most needed elements of a website and every time I venture out to create a site the majority of my problems are because of this, and in the end cost me mega bucks in wasted time - like now. I just simply need the width function to work like most people wish it would. If I set the TD to be 40px wide, I want it to be 40px wide - regardless of what is trying to be put there. If too large truncate it, if too small pad it. So bottom line is I have a table that is 850px wide, with 12 TD's being various sizes from 10px to 410px. If you maximize your browser it will be in the middle, if you resize the browser width, it will scroll. I would prefer no wrap in cells as well, but can live with it. If someone can show me a way to do this successfully that would be great as over the years I have just micky moused things, but that won't work here. If CSS is needed, no problem. Oh, the cells also have 1px borders on them. So it looks like an Excel Sheet. Thanks for the help Hi, I am looking for some insight on this matter. I currently convert images to html by using fireworks to slice up td backgrounds. and then position elements on an overall table with invisible image spacers. This is very time consuming.. I am looking for an easier way to convert images to html. Is there a program that will let me accomplish this easier? I dont want to use invisible images any more. Any advantages / disadvantages in using either approach? I am looking for a program that will be wc3 compliant and multi browser compatible. Thanks for your input. I need help with a table and tr... I have 3 rows in a table. The first 2 contain the same td(s) - 4 of them. I'd like to have a 3rd row that contains 9 td elements visible. How can I accomplish that? Is it possible to make the third rows td elements independent of the first one (since it follows the layout of the first rows td lengths)? |
|||||||