Loading...


Ask A Question?

 
 
 
 
 
 
Posted in Computers & Tech / Designing / Web Design and HTML
Author: MediYama Total-Replies: 19


I'm now rebuilding my website, and I have come against a problem of which I don't know how to fix it. I am using div tags (of course) but what I want to know is how to center the site, without having the text layout centered. Does anyone know how? I have not found any solutions yet. Thanks in advance.

MediYama

Sun Jul 15, 2007    Reply    New Discussion   
 

Posted in Computers & Tech / Designing / Web Design and HTML
Author: Flamez Total-Replies: 5


This is going to be a little hard to explain so just let me know whats confusing you.
Ok I'm making an online game and i will have a banner on top and have all the page links on the left and have other options on the right and when ever you click one of these links i want it to open in the center of the page and want the rest of the page to look the same. In other words i want the page layout the same and what ever page you go to open in the center which will also be in a box/table.
How could i do this. I know it's possible because I've seen it on many other gaming websites.

Sun Aug 31, 2008    Reply    New Discussion   
 
Posted in Computers & Tech / Designing / Web Design and HTML
Author: Quatrux Total-Replies: 13


To make a CSS layout with two columns isn't a problem, but when making a 3 column layout without tables, I encountered some things where I find tables to be better for designing layouts.. so here is my problem: I have a menu bar at the left, a sidebar at the right and the content/center bar at the center of the page and of course a header and a footer with which I didn't have any problems, the problem is with the content/center bar, here is what I have: (all links won't be anchors, due to those pages are only temporary) quatrux.net/index_css.html but my pages aren't strict with fixed width, so here is the problem: quatrux.net/index_cssx.html - when the left menu bar gets longer in width, all the layout breaks, the effect which I want to get is here: quatrux.net/index_tables.html - this is made with pure old tables, from which I am trying to run away and you can see here: quatrux.net/index_tablesx.html - the center/content bar doesn't break when the left menu bar gets longer as this is with made with tables and everywhere I am using nowrap except for the content/center bar.

So I want to do it with divs and without tables, but have the same effect like with tables.. I don't want my three columns to be strict with: 200px or something, I want that the left and right bars could be white-space: nowrap; and could get wider if some menu link will be longer or any text without breaking a line with a br tag.. so somehow I need the content/center bar to get between the left and right bar and be there, the same like a table.. and if the left and right sidebars gets wider/longer in width, the content/center bar would get smaller as it won't be using nowrap option.. I hope I was understood and didn't confuse anyone to much.. I really want this to be solved, I tried a lot of things Today and even #css support channels on freenode, but this is something what needs to be looked at a bit longer than one minute, so I really would be grateful if anyone could help me., as I am more a programmer, than a designer and don't have an idea what to do further. ;)

Thu Feb 22, 2007    Reply    New Discussion   
 

Posted in Computers & Tech / Designing / Web Design and HTML
Author: FirefoxRocks Total-Replies: 9


Many sites have a ~780px layout because it fits well with a 800x600px resolution monitor. The problem is that I want the whole thing centered in the middle of the screen with equal margins at the sides. My CSS is at (Gone, this was MY site - 404)http://portal.trap17.com/wdl/styles.css and as you would probably guess, my site is at (Gone, this was MY site - 404)http://portal.trap17.com/wdl/

It is centered in Gecko (Firefox) browsers, but in Internet Explorer it isn't centered. No matter what I use, whether it is a container <div> or centering the <html> and <body> elements, it just doesn't work in Internet Explorer :ph34r:

I use a table for layout (yes, I know it is a bad habit) and I serve my pages text/html to IE and application/xhtml+xml to Firefox and Opera. Maybe that might be the problem?

NOTE: This problem was also posted in the W3Schools forum, but no one found a solution yet :)

Wed Apr 18, 2007    Reply    New Discussion   
 
Posted in Computers & Tech / Designing / Web Design and HTML
Author: mzwebfreak Total-Replies: 5


Actually, from the HTML browsing I've done, since I think I do much the same thing on my website, Nevernormal.com, there's actually two ways to do it: the Javascript vizsky mentioned and also you can use PHP to do the same thing. First, you create the basic layout for what you want as a basic HTML file. (I do it this way because I'm a visual designer and need to see how it's going to look like in the end.) You just cut and paste the code that's semi-static (i.e. the navigation) into a header.inc file as is. To use my website as an example, if you look at the index page code, everything up to this line:

CODE

<DIV style="LEFT: 322; WIDTH: 540; POSITION: absolute; TOP: 303;>


goes into my header.inc file. Then I have the different pages, like my blog on the main one. However, I also have separate php pages with other malleable info, such as websites and such. I'm not that good at explaining how I go about doing the separate pages, but there's a way to put more than one page of info onto one php file, and access it all from that one file. It's kinda like HTML bookmarks, but instead of you still having the whole page there, you actually just pull out the specific info for that "bookmark" of the document.

Or, there's this way to specify what happens in the specific div layers in CSS...which may be more along what you want...I though it could be a couple of things, hence the longwinded post. Okay, say you have a layout with three DIV layers: left with navigation, center with the basic changing pages, and right with more information about the site. Now, you want the left (hereafter known as info) and the right (hereafter known as updates) to have a different background to the center navigation section. So, in the DIV section, much like you see in the code above, you want to classify it as "info". So, what you do in the HTML document is this:

CODE

<DIV id=info>


Now, why not all the other info into the HTML? Because it's all in the css document. In the CSS, you put this information, exactly as is:

CODE

#info   { padding:2; left: 5px; width: 225px; position: absolute; top: 5px; BACKGROUND-COLOR: #000000}

Mon Nov 14, 2005    Reply    New Discussion   
 
Posted in Computers & Tech / Designing / Web Design and HTML
Author: Arbitrary Total-Replies: 4


@minnieadkins, Yep, that works well. :(

Here's something else that's a bit more decorated and is a three-column template:



<html>
<head>
<title>Example</title>
<style type="text/css">


div.header {
position: absolute;
top: 15px;
padding: 10px;
height: 50px;
width: 100%;
border: 1px dashed orange;
}
div.left {
padding: 10px;
position: absolute;
left: 15px;
top: 100px;
width: 200px;
height: 500px;
border: 1px dashed orange;
}
div.center {
padding: 10px;
position: absolute;
top: 100px;
left: 250px;
height: 500px;
width: 500px;
border: 1px dashed orange;
}
div.right {
padding: 10px;
position: absolute;
right: 15px;
top: 100px;
width: 200px;
height: 500px;
border: 1px dashed orange;
}
div.footer {
padding: 10px;
position: absolute;
right: 15px;
top: 660px;
height: 50px;
width: 100%;
margin: 20px;
padding: 10px;
border: 1px dashed orange;
}
</style>
</head>

<body>

<div class="header">
Header
</div>

<div class="left">
Left Menu
</div>

<div class="center">
Main Content Div
</div>

<div class="right">
Right Menu
</div>
<div class="footer">
Footer
</div>

</body>
</html>



Except that I used absolute positioning...so it's not really a liquid layout, if that's what you wanted. And definitely Google it! Tons of stuff out there. The useful stuff is...colored. :(

Wed Jun 21, 2006    Reply    New Discussion   
 

Posted in Computers & Tech / Designing / Web Design and HTML
Author: miCRoSCoPiC^eaRthLinG Total-Replies: 6


QUOTE (Silent Soul X)

Hey, i know many people will be thinking off expandable content but my questions is different. Ok here it is i have my website Dreams in Digital and you can see that i want to make my middle area expand if the sidebars is longer so something like this:
Project Angel

see how the sidebars go down further then the main content box, so the main content box expands to make it level for the footer, i was wondering how do i do that. I know my question is really hard to understand if you don't get me first time but, i was trying to think of an easy way to put it but i couldn't can someone please help me  ;)
[post="16575"]<{POST_SNAPBACK}>[/post]


The center doesnt expand. It's the same length as the sidebars. You can leave a lot of empty space for the center column by making it span out all the rows that consist of the side tables by using the "rowspan=x" directive for the "<tr>" table row tag, where x is the number of rows you want this particular row to span downwards. You can use the same with columns using the "colspan=x" option for "<td>" tag.
Hope this helps.

Tue Feb 8, 2005    Reply    New Discussion   
 
Posted in Computers & Tech / Designing / Web Design and HTML
Author: antitoxic Total-Replies: 7


Ok. 10x that you tell me about the iframe scroolbar.But I want to ask something else:

I found a way to change the position of the iframe . I put the iframe in a div layer and I just move the layer. But now I have a problem ..I want to put the iframe into a cell in a table ..The cell is centered in the page but when I put the iframe in that cell the iframe back in the left part of the page and stretch the table cell.

How to correct it?!

Sat Sep 25, 2004    Reply    New Discussion   
 
Posted in Computers & Tech / Designing / Web Design and HTML
Author: lmatt Total-Replies: 14


some cool css

insert:

#content a[href ^="http://"],
#content a[href ^="gopher://"] {
background: url(external.png) center right no-repeat;
padding-right: 13px;
}

where external.png is an image

all external links will be marked

Mon Jul 11, 2005    Reply    New Discussion   
 
Posted in Computers & Tech / How-To's and Tutorials / Programming / HTML, XML and other Markup Lan..
Author: Karmen Total-Replies: 13


hmm this is what i came up with

<html>
<head>
<title>My Name Is Karmen</title>
</head>

<body>
</center><h1>This Is My Webpage</h1>
<br>Hi!</center>
</body>
</html>


I tryed doing the center thingy but it didnt work. how come?

Wed Dec 12, 2007    Reply    New Discussion   
 
Posted in Computers & Tech / Programming / Scripting / PHP
Author: (G) Total-Replies: 16


<?php     opentable($locale);     if ($settings == "1") {       echo "<div style='text-align:center'><br/>and".$locale."<br /><br/>and".$locale."<br /><br />and</div>and";     } else {       echo "<div style='text-align:center'><br/>and".$locale."<br /><br/>and".$locale."<br /><br />and</div>and";     }     closetable();?>


Tue Feb 9, 2010    Reply    New Discussion   
 
Posted in Computers & Tech / Designing / Web Design and HTML
Author: veerumits Total-Replies: 5


I have some question in mind that need solution so please

1) What is benefit of using header and footer tag in our web page ?
2) How we can registered our website on any search engine?
3) Did I use animated image without flash in website.?
4) What is the correct way to display web page on center in any browser.? if we use css style ?

I have little idea off all question answer but i need specific help so welcome.

Thanks

Sun Nov 2, 2008    Reply    New Discussion   
 
Posted in Computers & Tech / How-To's and Tutorials / Programming / HTML, XML and other Markup Lan..
Author: rkage Total-Replies: 5


Knowing what XHTML is set out to do

You may think that coding your site to meet XHTML standards requirements makes you look as if you are keeping up with your web page but unless you know what XHTML job is, then you can look like a fool.

For years, web browsers were designed to open one page and show it in a human understandable fashion. But, although not as well known, another mark up language has been floating around called XML. XML was made to separate what content there was, from how the content is meant to look.

When you go to a site, you are looking for the content of the webpage, not to look at how it is laid out. But if the content is laid out neatly and professionally, the content is easier to read, isn't it? So using XML to hold the content and the XSL (stylesheet) to display the content literally separated HTML into two parts. Now the exact same content can be seen on PDA's, WAP enabled phones, satellite on TV's even old computers with different resolutions and software. It was, and is even more so, a great benefit.

But if you ask billions of website owners to learn a new language and transform all their work to this new language, there is just no chance in hell. So they created an inbetween state XHTML which is meant to obey standards that relate to what XML is set out to be but also work on all browsers as normal HTML does.


I Know How To Use It!

Do you? If a user has visual difficulties does your website cater for this by allowing color changes and can the screen readers read out your site correctly? Can users with physical difficulties navigate your website without using a mouse? These may seem to be insignificant details but if you are going to obey XHTML, then obey it to its fullness. More users will be able to see your site without difficulties.

So I am assuming you know what you need to do to validate XHTML such as lower case tags, doc type declaration, close all tags etc etc. So here are a few tags I never want to see again;

Donts!

  1. <center> - Never use this tag. Use CSS to center the text in the parent tag. So, for example, if you have a table cell you want to have the text centered in, then your XHTML will be;

CODE

<td>Centered</td>


And your CSS;

CODE

td {
  text-align: center;
}

  • <font> - Once again CSS does this job far more efficiantly, like the <center> tag, it is a waste of space. If you want the text in your cell to be Georgia, and it's size to be 12px, then you just easily update the CSS;

    CODE

    td {
      text-align: center;
      font-family: georgia;
      font-size: 12px;
    }


  • <iframe> - These don't work in alot of browsers and certainly dont work on many other devices. The main reason for this is people want the same banner and links on every page and this seems the easiest way to do this. If you've seen a frames site and you click on a link, it opens in the frame but the URL never changes, when in reality it should. But using CSS and a little PHP, iFrames may never, thankfully, be used again!

    Just put all the header information, banners and links in a PHP file called header.php. Then wherever you want that information displayed, use the PHP include function;

    CODE

    <? php include('header.php'); ?>


    I'm pretty sure this is covered in depth in other tutorials so that's just a brief summary of better alternatives to iFrames.

  • < color="#cc00ff"> - CSS does this and you know it does - same for bgcolor, border, width and other attributes. Putting them in with the "content" doesn't make sense.

    What tags to use?

    So in case you are confused to what tags to use, ask yourself this - Does this tag tell the browser information about the content or does it explain how to display the content?

    The <form> tag explains that a the following information is to be displayed in a form, so that is fine. The attributes for the form (method, action) also tell the browser how to handle the form, so they are perfectly acceptable (and there is no other choice around it anyway :D )

    So yes, that means that tags like <b>, <u> and <i> are not welcome anymore and in a few years should be gone forever.

    Now to bold your text, you can use the preset tag <strong>, that makes the content strong and so it stands out.

    Most italicised text is styled like that because it they are emphasizing a point (Yeh that was pretty contrived...) so the tag <em> will emphasize the text inside and the default styling for the <em> tag is italics.

    And finally <u>. I think there is a tag to replace this but underlining text is generally only used for titles, links, abbreviations etc and so it is somewhat confusing to have randomly underlined text in a paragraph, as the user will try to hover over it and click.

    Of course, you still use CSS to style things when necessary. So if we wanted out text in the cell to be bolded, underlined and italicised, then we wouldn't do this;

    CODE

    <td><u><b><i>Centered</i></b></u><td>


    Not only is that ugly and inefficient to write but it defeats the purpose. Are we emphasizing the cell? No, so we keep the same XHTML, and then we define how it looks in CSS.

    CODE

    <td>Centered</td>


    Nicer code, eh?

    And I dont think I need to tell you not to use <blink> or <marquee>. Whoever jokingly put these tags in should be shot.

    What Tags Should I Use
    There is such a wide range out there, I can't name them all but here are a few -

    1. <p> - Still acceptable - use whenever you have a paragraph of information
    2. <quote> - A great tag when you are inputting source content that is not your own
    3. <ins>/<del> - Great tags for editorial pieces where you change articles from the past.

    See how these tags describe what the content is? That is what you should be aiming to achieve.

    How do I layout my page?

    First off, don't use tables for layout. Use divs (dividers) for layouts, far more efficient and flexible! Use tables for data such as member details.

    Secondly put your navigation links into an unordered list <ul>. That is effectively what navigation is, a list of links. So the XHTML might look like this;

    CODE

    <ul id='navigation'>
     <li><a href='home.php'>Home</a></li>
     <li><a href='away.php'>Away</a></li>
     <li><a href='contact.php'>Contact</a></li>
    </ul>


    Screen readers read these out properly.

    And as a last note structure your content wisely. Use heading tags (<h1>,<h2>...) effectively to split your content up. If you are using images ask yourself are they images assosciated with your content (in which case you just use the <img> tag) or are they images to increase the design aesthetics (this time you must use the background-image property of CSS).

    Following these rules might seem difficult at first but after a while, they become second nature and you don't even have to think about what you are doing. Your site will load faster and be far more accessible if you dont just stop at the XHTML validation rules, but go that one step further to what XHTML stands for!

    Just one more thing - HTML Tag Reference. Spend a while reading up on every single tag and what they are used for. In fact read that whole site when you get the chance. That is how XHTML should be. It will save you time and hassle in the future.

    So I hope you enjoyed this tutorial to some extent and I have inspired you, even in the slightest, to follow a few more rules when creating your next website. Take it a step at a time. Try replacing every <b> tag with <strong> until you get into that habit.

    Happy Web Designing

    Kage

  • Sun Mar 20, 2005    Reply    New Discussion   
     
    Posted in Computers & Tech / Designing / Web Design and HTML
    Author: miCRoSCoPiC^eaRthLinG Total-Replies: 11


    Damn guys - that was such a silly blunder and got fixed in one go ;) Thanks to all of you... However, I'll be back with more questions soon.

    As of now, there's an issue with the site - do you know of any way to fix the footer below ? What I mean is that, if I stuff in a lot of content in the Center column, it expands below and covers up the footer. What's the CSS trick, that'll make it move down along with the content ??

    Tue Jan 30, 2007    Reply    New Discussion   
     
    Posted in Computers & Tech / Designing / Web Design and HTML
    Author: (G)Francesca Total-Replies: 11


    Please help us with our myspace background issuesWhat Is The Best Size To Make A Background In Photoshop?

    Hello All,

    We read everything on this page and tried to fix this issue but it just won't work. I understand that you think full background images are a bad idea, but we love how the page looks on a mac. Problem is that most browsers / pcs cut off the image on the left side and only one of us is displayed. Can you please help us fixing this? Thanks so much in advance. Here is the code we use presently:

    [TCOL]
    [TROW][TCOL]

    <imgStyle="visibility:hidden;width:0px;height:0px;" border="0" width="0"Height="0"Src="http://counters.Gigya.Com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNTIwMzM5MDE2OTUmcHQ9MTI1MjAzMzkwOTUzOCZwPTMyMzAwMiZkPW15c3BhY2VsYXlvdXRzJmc9MSZvPWEzYTZkY2E5Y2RkNjRkOGJhZTE*YzM2NmFiYTY4YTg5.Gif"/> <p align="center"><aHref="http://www.Msplinks.Com/MDFodHRwOi8vd3d3LnBpbXAtbXktcHJvZmlsZS5jb20v"><imgBorder="0" src="http://content.Pimp-my-profile.Com/support2.Gif"Alt="MySpace Layouts" title="Myspace Layouts"Style="position:absolute;top:0px;left:0px;" /></a></p><style> .Pimp_my_profile { Generated at Pimp My ProfileWww.Pimp-my-profile.Com } table, tr, td { background-color:transparent;} table, tr, td { background-color:transparent; border:none;Border-width:0px; } table table table { width:100%; max-width: 600px; }Table table table table { width:100%;; } body, .BodyContent {Background-color:000000;Background-image:url(http://img2.Pimp-my-profile.Com/i43/2/8/10/f_c9275bf7b66d.Jpg);Background-position:Top Right; background-attachment:fixed;Background-repeat:no-repeat; border-color:FF2222; border-width:6px;Border-style:Solid; } table table { border:0px; } table table tableTable { border:0px; background-image:none;Background-color:transparent; } table table table { border-style:Solid;Border-width:2px; border-color:2222AA;Background-image:url(http://content.Pimp-my-profile.Com/tp/000000-70-tp.Png);Background-repeat:repeat; background-attachment:fixed; } table, tr, td,Li, p, div { color:ffffff; } </style> <p><aHref="http://www.Msplinks.Com/MDFodHRwOi8vd3d3LnBpbXAtbXktcHJvZmlsZS5jb20vbXlzcGFjZS1sYXlvdXRzLw==">MyspaceLayouts</a> / <aHref="http://www.Msplinks.Com/MDFodHRwOi8vd3d3LnBpbXAtbXktcHJvZmlsZS5jb20vaXNjdXRlLw==">HotComments</a> / <aHref="http://www.Msplinks.Com/MDFodHRwOi8vaW1hZ2VmcmEubWUv">ImageHosting</a> </p>  

    [/TCOL][/TROW]
    [/TCOL]

     

    -question by FrancescaKeywords:

    Read Entire Discussion (11 replies)
    Fri Sep 4, 2009    Reply    New Discussion   
     

    Ask a Question (w/o registration) to get Quick Answers!


    astaHost