|
HTML - Making Div Tags Into Tables Q&a Thread!
Here's a Q&A thread for people who make tables out of div tags with CSS. I am pretty inexperienced and I'll start with a question I have:
Is it possible to use the colspan property with div tables? I've tried and it doesn't work. What am I doing wrong? Here's what I have: <div style="display: table; width: 500px"> <div style="display: table-row" colspan="2"> <div style="display: table-cell"> Blah blah blah... </div> </div> <div style="display: table-row"> <div style="display: table-cell; width: 100px"> Nav bar goes here. </div> <div style="display: table-cell"> Blah blah blah... </div> </div> </div> Please help! Similar TutorialsHello, On the website I'm currently building, I've got several places where I intend to use the <a name> tag to refer to different places around the page. However, when I link to that point, rather than having the page load with that point at the top of the page, I would like it to be positioned a specified amount further down the page. I'm racking my brains and coming up stumped - is there anyone who can think of a way that might be achieved? Hey, I'm trying to create a site in Joomla which uses <div> tags for different effects. This particular effect places a rounded corner border around the 'divided' area. I am trying to create tables within this divided area, tables with no borders, but with the rounded corners as well. Here is a link to a preview page of where I am now: http://site476.mysite4now.net/ericpo...id=20&Itemid=4 I also attached an image of how the content area should be laid out. And I attached a .txt file of the current code written related to the <div> areas and tables within them. Any help is appreciated.... I cannot figure this out for the life of me... I'm starting to think it isn't possible. I know about tables, but are there advance programming for certain condition? I mean if I want certain cells to certain lengths and so on? Hi guys.. I currently have a php file that will take information from my phpbb forum and post it on the main section of my joomla website. What I want it to do, works. I just can't get it to look the way I want it to. Here's the code: Quote: { echo "</a><li><strong>Forum</strong> <a href=\"".$urlPath."/viewforum.php?f=".$row['forum_id']."\">".$row["forum_name"]."</a><strong> Thread</strong> <a href=\"".$urlPath."/viewtopic.php?p=".$row['post_id']."#".$row['post_id']."\">".$row["topic_title"]."</a> by <a href=\"".$urlPath."/profile.php?mode=viewprofile&u=".$row['user_id']."\">".$row['username']."</li>"; } it currently looks like this: http://img260.imageshack.us/img260/9721/faramdx8.png as you see, I would like FORUM to be in one column, THREAD in another, and author in another column. Aligned to center. I was hoping to get something like this: it's in spanish but I guess you can get the idea. Mainly I would love to have the php output in columns, that's my main concern. But it would be nice to have the different kind of colors for each line. Like Dark gray, next light gray, etc. Well anyways.. If somebody knows how to do this and is willing to help me out, I'd very much appreciate it http://img241.imageshack.us/img241/4821/19744730zr5.png Hi there. So I don't need it for 800x600, only the sizes over 1024x768. Basically I made this template which I need to be able to be re-sized when in your browser. I thought I did this right, however I forgot about other resolutions other than 1024x768. When in higher res, the tables break a little and from what I can make out just get a little larger. What I can't work out is how to make them all work properly most large resolutions? Link to the template is he http://www.ruthlessintent.com/penguins/ Sorry for being so lazy, but I wanted to ask if you could show me any one especially execellent posts that I should read first, so I can get involved here?because my moto first read and first reply to every post i like sleek systms dot net because my mission quickly reply to all post There are three pragraphes. The first one is "Start", When I click it, it should disappear, then the second pragraph will move from left to the right. The third pragraph will move from right to left. But it doesn't work. Please help me. Thanks Code: <html>
<head>
<title>DOM</title>
<script type="text/javascript">
var left;
var right;
var p2;
var count = 10;
function run()
{
document.getElementById("p1").innerHTML = "";
window.setInterval("slide()",100);
}
function slide()
{
count += 5;
if ( ( count % 200 ) == 0 ) {
p2.style.color="red";
p2.style.left = count;
p2.innerHTML = "TEST";
}
}
</script>
</head>
<body>
<p id = "p1" style="color:blue" onclick="run()">Start!</p>
<br>
<br>
<br>
<p id = "p2"
style = "position: absolute; left: 0; top:50;width:30%;">
Hello! This is me. A graduate student major
in Computer Science. I am looking for an intern opening
in the summer.Would you please provide some information?
</p>
<p id = "p3"
style = "position: absolute; left: 600; top:50;width: 40%">
Student development services: counseling,
leadership development, student housing and student
activities, student governance and community service to help students
find "a sense of belonging, responsibility, and achievement."
</p>
</body>
</html>
Detete This Plz I'm fairly sure that this is a quite a common thread, yet on doing a quick search of the forums couldn't find anything that matched my exact needs. So..... My site looks great in FF but not in IE and i need some help. http://tp.eyeoftime.co.uk/index.php (there is no php in the file yet, despite the extension) Ok, thats my site, as you can see there are problems with tables and images here. The site as viewed in firefox, is what i want the site to look like, the site as viewed in IE is how IE thinks i want the site to look like .Although i'm not a beginner with html, I am rather new at trying to get real cross-browser compatability. So, yeah, any help much appreciated. PS i know the page contains xhtml errors (fails validation), its still a work in progress. As some may know I have been trying tom gte my nav menu code ina style sheet, which I thought would be relatively straightforward with a bit of help. I approached the support of my program Serif WebplusX5 yesterday and said; "Please look at http://www.brand-newhomes.co.uk/page134.htm I want to get all the nav code intop an external stylesheet. The page will load faster (better for SEO) Every page wont contain the 120 links (better for SEO - google penguin!) and it will be easier for me to manage and edit without re loading the whole site every time. All in all it is a must have for me! I was advised on the forum that X5 would let me do this and that X5 had external stylesheets. I just need some help with the script and javascript files and links to them. I have with some help managed to do the CSS ones. Can you also tell me where the "Optimise your sites for search engines and speed" is located in X%? I have looked in Site Properties and that is not much better than WP10 that I had been using". This was the reply i got fobbing me off - so much for "support" "Stylesheets are used in WebPlus, but only as far as listing text styles. This doesn't to extend to fully fledged CSS stylesheets I'm afraid. The navigation bars in WebPlus use Flash and in some cases JavaScript. As the nav bars are in this format, you would wee need some form of 3rd party tool / coding to convert this into a CSS stylesheet. I'm afraid as we are essentially modifying the code that WebPlus provides, here in technical support would not be provide help or support on making a stylesheet from a nav bar - my sincerest apologies for this. "Optimize your sites for search engines and speed", as advised on the forum, as a catch all term for a number of different parts of the program. the site checker can detect any problems in the site such as long loading times and the Search section of the Site Properties will help you cerate robots.txt file for SEO purposes, amongst other tools." THIS IS WHY I AM DESPERATE FOR A BIT OF GUIDANCE ON MY OTHER POST AT: http://www.htmlforums.com/html-xhtml...ml-147517.html Hello! I am working on updating a website a bit with some new features and one of the new features is "latest thread". I've seen it before on other sites, but I'm not sure how to do it myself. So, how would I code in an area that lists the 5 latest threads from my phpbb3 forums? Thanks for your time! i'm looking for a cheap way out of making collapse/expand code. i've learned a lot of 'ghetto' techniques n thought mayb i can use something similar to the html tricks i've learned in the past. the theory i have is.. i use the title of the collapse/expand text as a link to the text below it to open and close by using the navigating tags: Code: <a name="content">opening/closing text here</a> and the title above the content: Code: <a href="#content">Title</a> to open the area of text. now my idea of a shortcut around the whole css/html/javacript combo is to make the text below it use a Code: <font size=0>content</font> at default and have the href title link change the font size to the default 9pt but I don't know if that's even possible. Is it possible with the Code: <div> tags? and if so, using that, would i still b able to make a link like that? Is it possible to trigger the action of a form with a submit button that's outside the form tags? If so, how should this example be rescripted to make the input tag work outside the form tags? [/code] <html> <body> <form name="input" action="html_form_action.asp" method="get"> First name: <input type="text" name="FirstName" value="Mickey" /><br /> Last name: <input type="text" name="LastName" value="Mouse" /><br /> <input type="submit" value="Submit" /> </form> </body> </html> [/code] Hi all, In need of some advice if possible! Myself and a friend are putting together a website, we have little knowledge and I've came across a layout issue. The site looks good in Firefox but within IE the formatting is lost in one small section see below; I need the 'read more' box to be in the same location as the Firefox one when viewed IE. The page can be viewed here http://www.jeffkingsland.com/test3/aboutme2.html Any constructive advice is really appreciated. I'm aware of typos and colouring issues Hi Normally, when you have more than one table in your code, the tables will be placed one under each other. Example: <table> ... </table> <table> ... </table> When you want the tables to be placed next to each other, you need to set the align attribute. Example: <table align="left"> ... </table> <table align="left"> ... </table> BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables". Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag? Thanks for your help praiser Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code. How I want it to look: How it looks now: I want the tables to line up at the top and re-size according to each other so they're always aligned at the top. Code: coming in next 2 posts I was doing reading and practicing at the w3 site and came along the <pre>/</pre> tag section. I find it easier using these tags instead of the <p>/<p> tags as you don't have to insert <br> tags everytime you want to start a new sentence within your paragraph. Does it really matter as far as coding goes if you use this or is it just considered not proper coding techiques? Note: Also,i added a paragraph at the very end of my test page just using the <pre>/</pre> tags and the "Style/Type Attributes" did not apply to it.Why is this? Kindly, Texan Hi all, I'm working on a wordpress site with nextgen plugin (not really important) My problem is this: Let's say i have this structu HTML Code: <p>
<a href="">
<img src="" />
</a>
</p>
Now if my img is 100px height, the <p> still stays 0px, and i think that's because of the <a> tag. But the <p> has to adjust its height to whatever height the <img> is. How can i achieve this? I hope you understand what i mean here Thanks already. Hello there, I need some help with my DIV tag as it isnt doing what I tell it to do. Heres a screenshot of it: And here is the CSS code: Code: body{
background-image: url(img/bg.gif);
font-family: verdana, arial;
font-size: 12px;
color: black;
}
#content{
height: 100%;
width: 750px;
background-color: #afafaf;
margin-left: auto;
margin-right: auto;
border: medium;
border-color: red;
border-style: solid;
padding-left: 5px;
padding-top: 5px;
}
#copyright{
height: 20px;
width: 740px;
background-color: #9f9f9f;
margin-left: auto;
margin-right: auto;
padding-left: 5px;
padding-bottom: 15px;
border: medium;
border-color: black;
border-style: solid;
}
Its the "copyright" one that is messing with me, as you can see the red border is there. But the small div tag wont center in the div tag. I hope you understand what I mean i have a problem about using div tags in general and positioning layers on a page. i'm a beginner so forgive my way of asking but i would appreciate any help i could get in understanding it. |
|||||||