XHTML - How do I get a white space between paragraphs Thread

	Posts
XHTML - How do I get a white space between paragraphs (Forums : Coding & Scripting : XHTML - How do I get a white space between paragraphs )	Locked
Thread Options
djjonastybe	Mar 27 2010 Anchor
Normally I get whitespaces between two paragraphs in a body. But on the website I am developping I won't get the spaces. Does anyone know a solution? OR can see what I am doing wrong? I am using it with css. I tried it on a clean html document and there I can get that whitespace. On that clean html document I dont use css. HTML <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Contact - Di Corpo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="contact.css" /> </head> <body> <div id="container"> <div id="body"> <h1>Contactgegevens + Route</h1> <h2>Contactgegevens</h2> <p>Di Corpo Massages<br>Francis & Karin<br>VAT: 0777-194-088</p> <p>Adres:</p> <ul style="list-style-type: none"> <li>Kumtichstraat 313</li> <li>3300 Tienen(Vissenaken)</li> <li>Belgi(qu)e</li> </ul> <p>Telefonisch:</p> <ul style="list-style-type: none"> <li>+32 016825321</li> <li>+32 016814634</li> </ul> <p>E-mail:<br>dicorpo@skynet.be</p> </p> </div> </div> </body> </html> CSS `*{margin:0;padding:0;} #container{width:864px;margin:auto;}` Now please don't ask me questions like why XHTML Strict. It is for school and they tell me to use it. So XHTML Strict is obligatory.
Death_Grin Environmental Artist, Level Artist	Mar 27 2010 Anchor
Doesn't the break tag work in xhtml? Or do you mean a whitespace between two alligned columns like a newspaper? If so just use two tables with no borders side by side. Edited by: Death_Grin
Dragonlord Linux-Dragon of quick wit and sharp tongue	Mar 27 2010 Anchor
You are using "margin:auto". This tells the browser to automatically choose a spacing to the previous paragraph. In your case this happens to be 0px but that's not mandatory. If you want a given gap to the previous paragraph use something like this: margin-top: 1em; or margin-top: 10px; If possible use em as measurement as this is relative to the text height (1em = height of 1 line with decimals possible). EDIT: Correction. margin:auto is on the container tag. You use margin:0 (which equals to 0px) on the * tag which means it applies to all tags in your document. Never use * tag unless you really, really, REALLY know what you are doing Edited by: Dragonlord
Arxae Resident Stepmania Freak :D	Mar 29 2010 Anchor
Death_Grin wrote: Doesn't the break tag work in xhtml? Or do you mean a whitespace between two alligned columns like a newspaper? If so just use two tables with no borders side by side. for the record, xhtml = html with rules everything that in html works, works on xhtml, but some things/combinations are not allowed in xhtml -- °w°
djjonastybe	Mar 30 2010 Anchor
I found it, it was because of the {margin:0;padding:0;} Well Dragonlord, considering your answer, I might think my teacher doesn't know anything about webdesign. She states we have to start every .css document with that line . By the way how do I play two divs next to eachother? Assuming I have one named "navbar" and another "contentbox" I thought this would do it: #navbar {float:left; width:100px;} #contentbox{float:right;width:100px;} But they won't be placed next to eachother, although the contentbox is aligned to the right of the screen it is placed under the navbar. I managed to get them next to eachother earlier, but google isn't helping me out either. I tried nearly everything. I am sure I am forgetting something. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Home - Di Corpo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <div id="container"> <div id="navigation"> <ul> <li><a href="index.htm">Homepage</a></li> <li><a href="soortenmassages.htm">Soorten massages</a></li> <li><a href="index.htm">Homepage</a></li> <li><a href="index.htm">Homepage</a></li> <li><a href="index.htm">Homepage</a></li> <li><a href="index.htm">Homepage</a></li> <li><a href="index.htm">Homepage</a></li> <li><a href="index.htm">Homepage</a></li> <li><a href="index.htm">Homepage</a></li> <li><a href="index.htm">Homepage</a></li> </ul> </div> <div id="contentbox"> <h1>We kennen het allemaal,</h1> <p>De dagelijkse drukte, een maatschappij die steeds meer van ons eist, we lopen op onze tenen en vergeten te ontspannen! Geen wonder dat er zoveel mensen klachten hebben zoals vermoeidheid, depressie, burnout, hoofdpijn, rugpijn, spierpijn etc. Zelfs onze kinderen voelen tegenwoordig al de druk van het "moeten" presteren op school en kunnen daardoor al heel vroeg spanningsklachten ontwikkelen die zich op verschillende manieren uiten. Denk aan bijvoorbeeld, onzekerheid, zich terug trekken of juist heel opstandig gedrag. Ook uit het zich vaak in vage hoofdpijn of buikpijn klachten. Gelukkig hebben wij allemaal iets heel unieks.... Ons eigen lichaam! Ons lichaam is namelijk heel goed in staat om zichzelf, bij bepaalde klachten, te genezen. Maar soms heeft het net dat duwtje in de rug nodig. Dan heeft u een ander nodig die ervoor kan zorgen dat stress, vermoeidheid of andere klachten worden weggenomen. Daarom kunt u bij "DiCorpo" terecht voor diverse ontspannings massages. Hierdoor wordt een ontspanning op lichamelijk- en geestelijk niveau teweeg gebracht. Ontspanningsmassages kunnen worden ingezet bij diverse lichamelijke klachten maar ook bij het verwerken van verdriet (door bijvoorbeeld het verlies van een dierbare).</p> <p>DiCorpo is een massagepraktijk, waar de volledige aandacht gaat naar de massage. We geven maximaal 2 massages per dag wat de kwaliteit van de massages ten goede komt. Er is altijd voldoende tijd voorzien voor een eventuele voor of nabespreking. Want je kan pas genieten van een massage als je vertrouwen hebt in je massagetherapeut of massagetherapeute! Daarom geef ons vrijblijvend een telefoontje als je vragen hebt over onze werking.</p> <p>Bij ons betaal je niet voor dure infrastructuur (sauna..., champagne of caviaar) maar enkel voor de massage en dat maakt dat we aan iedereen betaalbare massages kunnen aanbieden.</p> <h1>Nieuw!!!</h1> <h2>Massagecursussen of workshops:</h2> <p>Je kan bij ons ook terecht voor massagecursussen waarbij we je in 5 lessen aanleren hoe je zelf een 100 minuten durende massage kan geven. Francis is zelf ook docent in massages bij Syntra in Aalst. Daar kan je de cursussen Hot chocolate en Wellnessmassage volgen onder zijn begeleiding.</p> </div> </div> </body> </html> `*{font-family: Goudy Old Style;} #container{margin:auto;width:800px;} #navbar{} #contentbox{}` Can someone help me putting the content next to the navbar? Solved! Stupid mistake I made navbar in CSS file and navigation in HTML file.
Dragonlord Linux-Dragon of quick wit and sharp tongue	Mar 30 2010 Anchor
HTML Box Model sucks major balls. If you want to learn one thing by heart, then it's this. It is only really well suited for text document (aka word or open-office writer) style documents which compose of text and some images breaking the text flow. Any kind of sane layout job as you do in a DTP is just a chore in HTML/CSS. Now to the problem. The float tag is an evil bastard. If you want a nav-bar design you have to do some trickery. First the navbar div only has to use the float:left parameter. The float tag simply states that the div it is applied to breaks the rest of the text-flow either by sitting on the (float:)left side and the text flows around the right side or sitting on the (float:)right side and the text flows along the left side. As you can see it's vice-versa. So text flows right around the element if you specify float:left. One of the many idiocies in the box model. Now float is not enough. A div always spans the entire width of the document as it is a block type element. You have to limit the width as otherwise no text fits on the right side anymore. You end up then with something like this: `div.navbar{ float: left; width: 15em; }` Now again this is not enough yet. The problem is that the div tag with the text itself is again a block type element and will spawn the entire width of the document. This way the text will flow under the nav bar below the height of it. This is usually not what you want. For this you need to margin the text div tag on the left side to prevent it from flowing under. This would then look like this: `div.text{ margin-left: 15em; }` Using these two tags it should work out and stay valid no matter what text size the user uses in his browser. There are many bad designs around which are not flowing designs (sorry Scott but your site also belongs in that category I'm afraid) and therefore don't use the space available in the browser. If possible always use flowing designs. It's very tempting to use static layouts but as simple as they are to do as much do they suck if you use non-standard means to visit the website. And if you want to you can tell your teacher about the stupid for-all-tag line she included. It's simply crap and this gives me the impression that she is a static layout teacher which is not something to teach web designers to begin with. -- DragonDreams: Epsylon \| Drag[en]gine Game Engine by Salohcin
djjonastybe	Mar 30 2010 Anchor
I will certainly tell her, when I try to contradict her she becomes angry like start learning your lessons first. That is the answer I get every time. And not only in webdesign, also in Java class. I am one of the better students in programming. The first thing I looked up was the resolution most of the internet users are using in their browser. And I noticed there is still a 800x600 1% out there on the net. So I will probably support those too. Also still having 16-bit color users out there, I assume it is the best using 32-bit colors? I don't believe this will give errors as I had from my experience. Another thing I am trying to do is making 3D buttons for my left hand side navigation bar. I am still looking for a way to do so. I however already know how to do it. I would need to place the image as a background. And repeat in on the X-axis as many times as possible. And repeat that for every tag which contains the page link. Then I would simply overlay the text on it. Aside from that I would also like to make some kind of RSS feed for the news page. Maybe some kind of reversed RSS feed. So the man I am making the website for, can simply enter his news update in a program I will be making as well which sends the news update to the website. But this is optional of course. I was just wondering if this is possible. I doubt it will be. I will try your code right now and test it with different browsers / resolutions. Thank you!
Dragonlord Linux-Dragon of quick wit and sharp tongue	Mar 30 2010 Anchor
Color resolution is not a problem since you indicate colors as RGB so the browser is free to interprate them the way he wants. In general though for good web design use colors sparse and avoid using colors which have a special meaning (blue/purple/red for example for links) as well as special formatting (underline refers to links... a good bad example is BlenderArtists forum for how to not do it). Concerning 3D buttons there are two solutions. What I used recently on a website is without any images just using border tag in a clever way. This also works splendid with fluid web design and works on all resolutions. With images you always have a problem. Firefox for example scales images up if the text size enlarges. Not sure anymore about IE but I think it keeps the size. Older browsers though or special ones (like for handicapped people) tend to handle images in specific ways so avoiding them for layout purpose is a plus. Remember the major rule of web design is information. A website is about giving information to people looking for it. Overloading websites with graphics, colors and busy elements is very bad design. A website with simple but clean design wins anytime over a graphic-festival one. -- DragonDreams: Epsylon \| Drag[en]gine Game Engine by Salohcin
djjonastybe	Apr 3 2010 Anchor
Good job on the code. the one you provided me works even better. I have no problems using it and it is actually much easier. However now there is something else I want. Take a look on this website. Assuming this website has a solid gray background. How can I have these divs have a slightly darker background than the global gray background? For example: If you are looking at this page you see two divs: Reply To Thread and the Forum Thread I use now: *{background-color:#000;} #container{background-color:#333;} But for some reason the background color doesn't work everywhere so the background color is kind of screwed up. And what I want is nice blocks of different colors. And I would like little space between the divs also if that is possible. But by the time you will have responded I will probably have found the solution. I actually try avoiding images as much as possible. Since images decrease performance of the website and the loading time. There are still users out there with a crappy graphics card. And certainly it is for the people I am making this website for. My girl friend still has a 56k connection from the stone age. Not to mention there are 3 people using it at the same time. Dicorpo.be this is the original website. It looks very bed and the layout is screwed up. For information, I did not make that. But I am supposed to make the new one.
Arxae Resident Stepmania Freak :D	Apr 3 2010 Anchor
Dragonlord wrote: Color resolution is not a problem since you indicate colors as RGB so the browser is free to interprate them the way he wants. In general though for good web design use colors sparse and avoid using colors which have a special meaning (blue/purple/red for example for links) as well as special formatting (underline refers to links... a good bad example is BlenderArtists forum for how to not do it). .... Remember the major rule of web design is information. A website is about giving information to people looking for it. Overloading websites with graphics, colors and busy elements is very bad design. A website with simple but clean design wins anytime over a graphic-festival one. here are 2 other examples on how not to do it: Angelfire.com -> was made so on purpose to demonstrate bad websites Havenworks.com -> no idea whats up with him >_> this is the worst one ever -> Yvettesbridalformal.com in case you couldn't find out, they sell dresses :p also, HTML is NOT code and its NOT programming, its a markup language :p -- °w°
SiPlus	Apr 3 2010 Anchor
Use BR Edited by: SiPlus
Dragonlord Linux-Dragon of quick wit and sharp tongue	Apr 3 2010 Anchor
djjonastybe wrote: Good job on the code. the one you provided me works even better. I have no problems using it and it is actually much easier. However now there is something else I want. Take a look on this website. Assuming this website has a solid gray background. How can I have these divs have a slightly darker background than the global gray background? For example: If you are looking at this page you see two divs: Reply To Thread and the Forum Thread I use now: {background-color:#000;} #container{background-color:#333;} But for some reason the background color doesn't work everywhere so the background color is kind of screwed up. And what I want is nice blocks of different colors. And I would like little space between the divs also if that is possible. But by the time you will have responded I will probably have found the solution. I actually try avoiding images as much as possible. Since images decrease performance of the website and the loading time. There are still users out there with a crappy graphics card. And certainly it is for the people I am making this website for. My girl friend still has a 56k connection from the stone age. Not to mention there are 3 people using it at the same time. Dicorpo.be this is the original website. It looks very bed and the layout is screwed up. For information, I did not make that. But I am supposed to make the new one. In general just use background-color:#RRGGBB; for the div in question. I don't know where you get the 3 number value from but don't use it, use the 6 number one as it is guaranteed to work on all kinds of browsers. Concerning divs and background color this doesn't work because, as I said, you are using the wrath of god of CSS land, the -tag. Here you see exactly the reason why you should never use this tag unless you really know what you are doing. The * affects all tags, especially those include inside the div-tag you set the background color for. And if inside a div tag there is another block-style tag it will be affected by the * tag and since it is a block-style tag it covers the entire div-tag space hiding the color you set. Please, I beg you, get rid of the -tag unless you are a masochist EDIT: For spaces between divs use margin- where * is either top, left, bottom or right. There is also a multi-tag version which is margin:A B C D; where A=top, B=right, C=bottom, D=left. This puts a gap around the div tag of the given size. Edited by: Dragonlord
djjonastybe	Apr 3 2010 Anchor
Great examples you have given. But please don't tell me last two websites really exist and have a purpose. Or are they really meant to show the same as the first? I definately prefer soft colors and a soft lay-out. I prefer less on my screen than too much. I will be showing off my screenshots maybe tomorrow or something.it finally starts to look nice. I believe developing is the best in Firefox with Firebug, HTML Validator Plugin, Developer Toolbar, Color Hunter. Those are the best plugins I have found. And they really work well. You immediately see whether you have bugs in your 'mark-up language' or not (Since saying code might get you slapping me in the face presumably) Assuming a webpage or surfing on the net may not irritate the user. What would you say about loading times of web pages? I yesterday was with my girlfriend with her 56k connection not allowing me to play flash games. Assuming there are lots of 56k users being the download speed 56kbps and the loading time not being longer than 5 seconds (also CPU GPU dependable but let's forget about those for a second). So each webpage may not be larger than 300kB although in my opinion this is still way too much. I think the maximum should be 100 kB which is fairly better. The webspace we get from school to develop our website on has only 2Mb. As far as I found I better use jpg for complex images, and gif for simple images. But what about PNG? It reads to be better alternative for gif, since it also supports transparancy. But I remember some computers not supporting PNG, or I once had trouble viewing PNG graphics on my computer. I can't remember the circumstances, but they are existant as far as I know. Maybe the * thing is just a lazy left-over from Java I had. I was sometimes to lazy looking up the correct packages. But I use that thing for the fonts. *{font:beautifulfont;} So I don't have to redo that for everything.
Dragonlord Linux-Dragon of quick wit and sharp tongue	Apr 3 2010 Anchor
PNG is the choice if you need lossless compression or transparency. Some IE versions have huge troubles with PNG but that's no reason to not use it. GIF is the bigger devil on stage than some missing transparency. Use JPG when lossy compression doesn't matter. If the colors can be reduced to 256 palettized then use PNG with color reduction (JPG can not do 256 palettized). Often you can down-sample images to 256 colors with little loss of visual fidelity. Most of the images I use on websites are palettized PNGs. With larger images JPG works well enough too. -- DragonDreams: Epsylon \| Drag[en]gine Game Engine by Salohcin
Spector WWIII	Apr 3 2010 Anchor
Just from half reading this page, your teacher is a dumbass (when it comes to web design). However she is aiming in the right direction. I obviously haven't read every word in this thread, but if it's been said it's been said. What she was aiming for with the required , is to reset the browser defaults for everyone, thus giving you a level playing field. The proper way to do this is to use a reset.css which sets everything to a default value, so when you design you have a better change of getting everything the same across all computers and browsers. `/ RESET / body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,img,input,textarea,p,blockquote,th,td,object,embed { margin:0; padding:0; border:0; } table { border-collapse:collapse; border-spacing:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; }` Anyways; I'd read more but I'm a little behind. As far as PNGs go, IE6 and older do not support them. However a quick google will give you a slew of solutions for this problem. -- snetErz.com* - Web Design Some guy in the space time continuum.
Dragonlord Linux-Dragon of quick wit and sharp tongue	Apr 3 2010 Anchor
Which is though against the initial idea of HTML/CSS that each browser/user has (possibly) his own settings and that you should not force foreign settings on a user. Let's say somebody has certain disabilities and sets his browser to have certain formatting aiding him to read a website. If you cast a wrath of god as mentioned above you make the website unusable for the person in question. I can understand where this "wrath of god" thinking is coming from but it's definitely not something one should use unless he can be sure that every and any person accessing his website is the exact same type of person. -- DragonDreams: Epsylon \| Drag[en]gine Game Engine by Salohcin
Arxae Resident Stepmania Freak :D	Apr 3 2010 Anchor
djjonastybe wrote: Great examples you have given. But please don't tell me last two websites really exist and have a purpose. only the first one was like that on purpose :x the other 2 are real pages >_> -- °w°
Spector WWIII	Apr 3 2010 Anchor
Dragonlord wrote: Which is though against the initial idea of HTML/CSS that each browser/user has (possibly) his own settings and that you should not force foreign settings on a user. Let's say somebody has certain disabilities and sets his browser to have certain formatting aiding him to read a website. If you cast a wrath of god as mentioned above you make the website unusable for the person in question. I can understand where this "wrath of god" thinking is coming from but it's definitely not something one should use unless he can be sure that every and any person accessing his website is the exact same type of person. Well most of the people who are impaired, visually or otherwise; use either a special browser that renders text only (basically without the css files, thus not being particularly problematic for them); which is also a good reason to type out all the content first in the html document before designing, to keep document flow proper (for screen readers); or have increased the font size. The reset code I have above does not effect the font-sizes that they choose, merely makes sure they are 100% of their defaulted value in the browser settings. This is mostly useful for people who use the EM, and Percentage methods of font deployment (and for the most part, as far as I have ever scene, most people use the default browser shipping size of 16px). The thing also removes all padding, margin, and borders from tags, in order to not induce unwanted padding on elements. Thus allowing the designer to have greater control over how the page looks; which helps when debugging browsers such as IE6, which take padding, margins, and widths literally. While there should be certain precautions taken for the visually impaired, and or whatever else happens to come our way; it would be fairly time consuming to worry about it in depth. I mostly only focus on designing for impairments when it's a website that has a higher chance of receiving such people. You really have to find a balance for the market you are designing for (which you mentioned in the last sentence). Went back through to read some more of the thread; The three number value for colors in CSS is perfectly acceptable. It's only used though for repeated values (mostly grays), 333333 can be written as 333, 000000(black) can be written as 000, etc. Other colors like F10F10 can be written as F10 and still be the same color. Of course this is not possible in a program like photoshop which needs all 6 numbers. F10: alleo;(albeit this wyswig rewrites it to FF1100) F10F10; asdklad Other things that were talked about would be shorthand code for defining more specific things: margin: top right bottom left (margin: 10px 5px 0 5px; ) font: style size/line-height family (font: normal 11px/25px "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;) of course there are quite a few of these to use (and order of the calls do make a huge difference in how it looks). Edited by: Spector
Dragonlord Linux-Dragon of quick wit and sharp tongue	Apr 3 2010 Anchor
Never had troubles with relative sizes in connection with various browsers as in the box model the sizes are handed down from higher level elements. I tend to only redefine the body tag as well as the main div tag. Everything else is relative to them so I never had to use a reset css in any way. -- DragonDreams: Epsylon \| Drag[en]gine Game Engine by Salohcin

Thread Options

djjonastybe

Mar 27 2010 Anchor

Normally I get whitespaces between two paragraphs in a body. But on the website I am developping I won't get the spaces. Does anyone know a solution? OR can see what I am doing wrong? I am using it with css. I tried it on a clean html document and there I can get that whitespace. On that clean html document I dont use css.

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contact - Di Corpo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="contact.css" />
</head>
<body>
<div id="container">
  <div id="body">
	  <h1>Contactgegevens + Route</h1>
		<h2>Contactgegevens</h2> 
    <p>Di Corpo Massages<br>Francis &amp; Karin<br>VAT: 0777-194-088</p>
 
    <p>Adres:</p>
		<ul style="list-style-type: none">
		  <li>Kumtichstraat 313</li> 
      <li>3300 Tienen(Vissenaken)</li> 
      <li>Belgi(qu)e</li>
		</ul>
    <p>Telefonisch:</p>
    <ul style="list-style-type: none">
		  <li>+32 016825321</li>
      <li>+32 016814634</li>
		</ul>
		<p>E-mail:<br>dicorpo@skynet.be</p>
    </p>
	</div>
</div>
</body>
</html>

CSS

*{margin:0;padding:0;}
#container{width:864px;margin:auto;}

Now please don't ask me questions like why XHTML Strict. It is for school and they tell me to use it. So XHTML Strict is obligatory.

Death_Grin Environmental Artist, Level Artist

Mar 27 2010 Anchor

Doesn't the break tag work in xhtml?

Or do you mean a whitespace between two alligned columns like a newspaper?
If so just use two tables with no borders side by side.

Edited by: Death_Grin

Dragonlord Linux-Dragon of quick wit and sharp tongue

Mar 27 2010 Anchor

You are using "margin:auto". This tells the browser to automatically choose a spacing to the previous paragraph. In your case this happens to be 0px but that's not mandatory. If you want a given gap to the previous paragraph use something like this:
margin-top: 1em;
or
margin-top: 10px;
If possible use em as measurement as this is relative to the text height (1em = height of 1 line with decimals possible).

EDIT: Correction. margin:auto is on the container tag. You use margin:0 (which equals to 0px) on the * tag which means it applies to all tags in your document. Never use * tag unless you really, really, REALLY know what you are doing

Edited by: Dragonlord

Arxae Resident Stepmania Freak :D

Mar 29 2010 Anchor

Death_Grin wrote: Doesn't the break tag work in xhtml?

Or do you mean a whitespace between two alligned columns like a newspaper?
If so just use two tables with no borders side by side.

for the record, xhtml = html with rules
everything that in html works, works on xhtml, but some things/combinations are not allowed in xhtml

--

°w°

djjonastybe

Mar 30 2010 Anchor

I found it, it was because of the *{margin:0;padding:0;}

Well Dragonlord, considering your answer, I might think my teacher doesn't know anything about webdesign. She states we have to start every *.css document with that line -_- .

By the way how do I play two divs next to eachother? Assuming I have one named "navbar" and another "contentbox"

I thought this would do it:

#navbar {float:left; width:100px;}
#contentbox{float:right;width:100px;}

But they won't be placed next to eachother, although the contentbox is aligned to the right of the screen it is placed under the navbar. I managed to get them next to eachother earlier, but google isn't helping me out either. I tried nearly everything. I am sure I am forgetting something.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Home - Di Corpo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="container">
  <div id="navigation">
	  <ul>
		  <li><a href="index.htm">Homepage</a></li>
			<li><a href="soortenmassages.htm">Soorten massages</a></li>
			<li><a href="index.htm">Homepage</a></li>
			<li><a href="index.htm">Homepage</a></li>
			<li><a href="index.htm">Homepage</a></li>
			<li><a href="index.htm">Homepage</a></li>
			<li><a href="index.htm">Homepage</a></li>
			<li><a href="index.htm">Homepage</a></li>
			<li><a href="index.htm">Homepage</a></li>
			<li><a href="index.htm">Homepage</a></li>
		</ul>
	</div>
	<div id="contentbox">
    <h1>We kennen het allemaal,</h1>
      <p>De dagelijkse drukte, een maatschappij die steeds meer van ons eist, we lopen op onze tenen en vergeten te ontspannen! Geen wonder dat er zoveel mensen klachten hebben zoals vermoeidheid, depressie, burnout, hoofdpijn, rugpijn, spierpijn etc. Zelfs onze kinderen voelen tegenwoordig al de druk van het "moeten" presteren op school en kunnen daardoor al heel vroeg spanningsklachten ontwikkelen die zich op verschillende manieren uiten. Denk aan bijvoorbeeld, onzekerheid, zich terug trekken of juist heel opstandig gedrag. Ook uit het zich vaak in vage hoofdpijn of buikpijn klachten. Gelukkig hebben wij allemaal iets heel unieks.... Ons eigen lichaam! Ons lichaam is namelijk heel goed in staat om zichzelf, bij bepaalde klachten, te genezen. Maar soms heeft het net dat duwtje in de rug nodig. Dan heeft u een ander nodig die ervoor kan zorgen dat stress, vermoeidheid of andere klachten worden weggenomen. Daarom kunt u bij "DiCorpo" terecht voor diverse ontspannings massages. Hierdoor wordt een ontspanning op lichamelijk- en geestelijk niveau teweeg gebracht. Ontspanningsmassages kunnen worden ingezet bij diverse lichamelijke klachten maar ook bij het verwerken van verdriet (door bijvoorbeeld het verlies van een dierbare).</p>
      <p>DiCorpo is een massagepraktijk, waar de volledige aandacht gaat naar de massage. We geven maximaal 2 massages per dag  wat de kwaliteit van de massages ten goede komt. Er is altijd voldoende tijd voorzien voor een eventuele voor of nabespreking. Want je kan pas genieten van een massage als je vertrouwen hebt in je massagetherapeut of massagetherapeute! Daarom geef ons vrijblijvend een telefoontje als je vragen hebt over onze werking.</p>
      <p>Bij ons betaal je niet voor dure infrastructuur (sauna..., champagne of caviaar) maar enkel voor de massage en dat maakt dat we aan iedereen betaalbare massages kunnen aanbieden.</p>
    <h1>Nieuw!!!</h1> 
      <h2>Massagecursussen of workshops:</h2>
        <p>Je kan bij ons ook terecht voor massagecursussen waarbij we je in 5 lessen aanleren hoe je zelf een 100 minuten durende massage kan geven. Francis is zelf ook docent in massages bij Syntra in Aalst. Daar kan je de cursussen Hot chocolate en Wellnessmassage volgen onder zijn begeleiding.</p>
  </div>
</div>
</body>
</html>

*{font-family: Goudy Old Style;}
#container{margin:auto;width:800px;}
#navbar{}
#contentbox{}

Can someone help me putting the content next to the navbar?

Solved! Stupid mistake I made navbar in CSS file and navigation in HTML file.

Dragonlord Linux-Dragon of quick wit and sharp tongue

Mar 30 2010 Anchor

HTML Box Model sucks major balls. If you want to learn one thing by heart, then it's this. It is only really well suited for text document (aka word or open-office writer) style documents which compose of text and some images breaking the text flow. Any kind of sane layout job as you do in a DTP is just a chore in HTML/CSS.

Now to the problem. The float tag is an evil bastard. If you want a nav-bar design you have to do some trickery. First the navbar div only has to use the float:left parameter. The float tag simply states that the div it is applied to breaks the rest of the text-flow either by sitting on the (float:)left side and the text flows around the right side or sitting on the (float:)right side and the text flows along the left side. As you can see it's vice-versa. So text flows right around the element if you specify float:left. One of the many idiocies in the box model. Now float is not enough. A div always spans the entire width of the document as it is a block type element. You have to limit the width as otherwise no text fits on the right side anymore. You end up then with something like this:

div.navbar{
   float: left;
   width: 15em;
}

Now again this is not enough yet. The problem is that the div tag with the text itself is again a block type element and will spawn the entire width of the document. This way the text will flow under the nav bar below the height of it. This is usually not what you want. For this you need to margin the text div tag on the left side to prevent it from flowing under. This would then look like this:

div.text{
   margin-left: 15em;
}

Using these two tags it should work out and stay valid no matter what text size the user uses in his browser. There are many bad designs around which are not flowing designs (sorry Scott but your site also belongs in that category I'm afraid) and therefore don't use the space available in the browser. If possible always use flowing designs. It's very tempting to use static layouts but as simple as they are to do as much do they suck if you use non-standard means to visit the website.

And if you want to you can tell your teacher about the stupid for-all-tag line she included. It's simply crap and this gives me the impression that she is a static layout teacher which is not something to teach web designers to begin with.

--

User Posted Image
DragonDreams: Epsylon | Drag[en]gine Game Engine

by Salohcin

djjonastybe

Mar 30 2010 Anchor

I will certainly tell her, when I try to contradict her she becomes angry like start learning your lessons first. That is the answer I get every time. And not only in webdesign, also in Java class. I am one of the better students in programming.

The first thing I looked up was the resolution most of the internet users are using in their browser. And I noticed there is still a 800x600 1% out there on the net. So I will probably support those too. Also still having 16-bit color users out there, I assume it is the best using 32-bit colors? I don't believe this will give errors as I had from my experience.

Another thing I am trying to do is making 3D buttons for my left hand side navigation bar. I am still looking for a way to do so. I however already know how to do it. I would need to place the image as a background. And repeat in on the X-axis as many times as possible. And repeat that for every

tag which contains the page link. Then I would simply overlay the text on it.

Aside from that I would also like to make some kind of RSS feed for the news page. Maybe some kind of reversed RSS feed. So the man I am making the website for, can simply enter his news update in a program I will be making as well which sends the news update to the website. But this is optional of course. I was just wondering if this is possible. I doubt it will be.

I will try your code right now and test it with different browsers / resolutions. Thank you!

Dragonlord Linux-Dragon of quick wit and sharp tongue

Mar 30 2010 Anchor

Color resolution is not a problem since you indicate colors as RGB so the browser is free to interprate them the way he wants. In general though for good web design use colors sparse and avoid using colors which have a special meaning (blue/purple/red for example for links) as well as special formatting (underline refers to links... a good bad example is BlenderArtists forum for how to not do it).

Concerning 3D buttons there are two solutions. What I used recently on a website is without any images just using border tag in a clever way. This also works splendid with fluid web design and works on all resolutions. With images you always have a problem. Firefox for example scales images up if the text size enlarges. Not sure anymore about IE but I think it keeps the size. Older browsers though or special ones (like for handicapped people) tend to handle images in specific ways so avoiding them for layout purpose is a plus.

Remember the major rule of web design is information. A website is about giving information to people looking for it. Overloading websites with graphics, colors and busy elements is very bad design. A website with simple but clean design wins anytime over a graphic-festival one.

--

User Posted Image
DragonDreams: Epsylon | Drag[en]gine Game Engine

by Salohcin

djjonastybe

Apr 3 2010 Anchor

Good job on the code. the one you provided me works even better. I have no problems using it and it is actually much easier. However now there is something else I want.

Take a look on this website. Assuming this website has a solid gray background. How can I have these divs have a slightly darker background than the global gray background?

For example: If you are looking at this page you see two divs: Reply To Thread and the Forum Thread

I use now:

*{background-color:#000;}
#container{background-color:#333;}

But for some reason the background color doesn't work everywhere so the background color is kind of screwed up. And what I want is nice blocks of different colors.

And I would like little space between the divs also if that is possible. But by the time you will have responded I will probably have found the solution. I actually try avoiding images as much as possible. Since images decrease performance of the website and the loading time. There are still users out there with a crappy graphics card. And certainly it is for the people I am making this website for. My girl friend still has a 56k connection from the stone age. Not to mention there are 3 people using it at the same time.

Dicorpo.be this is the original website. It looks very bed and the layout is screwed up. For information, I did not make that. But I am supposed to make the new one.

Arxae Resident Stepmania Freak :D

Apr 3 2010 Anchor

Dragonlord wrote: Color resolution is not a problem since you indicate colors as RGB so the browser is free to interprate them the way he wants. In general though for good web design use colors sparse and avoid using colors which have a special meaning (blue/purple/red for example for links) as well as special formatting (underline refers to links... a good bad example is BlenderArtists forum for how to not do it).

....

Remember the major rule of web design is information. A website is about giving information to people looking for it. Overloading websites with graphics, colors and busy elements is very bad design. A website with simple but clean design wins anytime over a graphic-festival one.

here are 2 other examples on how not to do it:
Angelfire.com -> was made so on purpose to demonstrate bad websites
Havenworks.com -> no idea whats up with him >_>
this is the worst one ever -> Yvettesbridalformal.com
in case you couldn't find out, they sell dresses :p

also, HTML is NOT code and its NOT programming, its a markup language :p

--

°w°

SiPlus

Apr 3 2010 Anchor

Use BR

Edited by: SiPlus

Dragonlord Linux-Dragon of quick wit and sharp tongue

Apr 3 2010 Anchor

djjonastybe wrote: Good job on the code. the one you provided me works even better. I have no problems using it and it is actually much easier. However now there is something else I want.

Take a look on this website. Assuming this website has a solid gray background. How can I have these divs have a slightly darker background than the global gray background?

For example: If you are looking at this page you see two divs: Reply To Thread and the Forum Thread

I use now:

*{background-color:#000;}
#container{background-color:#333;}

But for some reason the background color doesn't work everywhere so the background color is kind of screwed up. And what I want is nice blocks of different colors.

And I would like little space between the divs also if that is possible. But by the time you will have responded I will probably have found the solution. I actually try avoiding images as much as possible. Since images decrease performance of the website and the loading time. There are still users out there with a crappy graphics card. And certainly it is for the people I am making this website for. My girl friend still has a 56k connection from the stone age. Not to mention there are 3 people using it at the same time.

Dicorpo.be this is the original website. It looks very bed and the layout is screwed up. For information, I did not make that. But I am supposed to make the new one.

In general just use background-color:#RRGGBB; for the div in question. I don't know where you get the 3 number value from but don't use it, use the 6 number one as it is guaranteed to work on all kinds of browsers. Concerning divs and background color this doesn't work because, as I said, you are using the wrath of god of CSS land, the *-tag. Here you see exactly the reason why you should never use this tag unless you really know what you are doing. The * affects all tags, especially those include inside the div-tag you set the background color for. And if inside a div tag there is another block-style tag it will be affected by the * tag and since it is a block-style tag it covers the entire div-tag space hiding the color you set. Please, I beg you, get rid of the *-tag unless you are a masochist

EDIT: For spaces between divs use margin-* where * is either top, left, bottom or right. There is also a multi-tag version which is margin:A B C D; where A=top, B=right, C=bottom, D=left. This puts a gap around the div tag of the given size.

Edited by: Dragonlord

djjonastybe

Apr 3 2010 Anchor

Great examples you have given. But please don't tell me last two websites really exist and have a purpose. Or are they really meant to show the same as the first? I definately prefer soft colors and a soft lay-out. I prefer less on my screen than too much. I will be showing off my screenshots maybe tomorrow or something.it finally starts to look nice.

I believe developing is the best in Firefox with Firebug, HTML Validator Plugin, Developer Toolbar, Color Hunter. Those are the best plugins I have found. And they really work well. You immediately see whether you have bugs in your 'mark-up language' or not (Since saying code might get you slapping me in the face presumably)

Assuming a webpage or surfing on the net may not irritate the user. What would you say about loading times of web pages? I yesterday was with my girlfriend with her 56k connection not allowing me to play flash games. Assuming there are lots of 56k users being the download speed 56kbps and the loading time not being longer than 5 seconds (also CPU GPU dependable but let's forget about those for a second). So each webpage may not be larger than 300kB although in my opinion this is still way too much. I think the maximum should be 100 kB which is fairly better. The webspace we get from school to develop our website on has only 2Mb.

As far as I found I better use jpg for complex images, and gif for simple images. But what about PNG? It reads to be better alternative for gif, since it also supports transparancy. But I remember some computers not supporting PNG, or I once had trouble viewing PNG graphics on my computer. I can't remember the circumstances, but they are existant as far as I know.

Maybe the * thing is just a lazy left-over from Java I had. I was sometimes to lazy looking up the correct packages. But I use that thing for the fonts. *{font:beautifulfont;}

So I don't have to redo that for everything.

Dragonlord Linux-Dragon of quick wit and sharp tongue

Apr 3 2010 Anchor

PNG is the choice if you need lossless compression or transparency. Some IE versions have huge troubles with PNG but that's no reason to not use it. GIF is the bigger devil on stage than some missing transparency. Use JPG when lossy compression doesn't matter. If the colors can be reduced to 256 palettized then use PNG with color reduction (JPG can not do 256 palettized). Often you can down-sample images to 256 colors with little loss of visual fidelity. Most of the images I use on websites are palettized PNGs. With larger images JPG works well enough too.

--

User Posted Image
DragonDreams: Epsylon | Drag[en]gine Game Engine

by Salohcin

Spector WWIII

Apr 3 2010 Anchor

Just from half reading this page, your teacher is a dumbass (when it comes to web design). However she is aiming in the right direction. I obviously haven't read every word in this thread, but if it's been said it's been said.

What she was aiming for with the required *, is to reset the browser defaults for everyone, thus giving you a level playing field. The proper way to do this is to use a reset.css which sets everything to a default value, so when you design you have a better change of getting everything the same across all computers and browsers.

/* RESET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,img,input,textarea,p,blockquote,th,td,object,embed { 
	margin:0;
	padding:0;
	border:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

Anyways; I'd read more but I'm a little behind. As far as PNGs go, IE6 and older do not support them. However a quick google will give you a slew of solutions for this problem.

--

snetErz.com - Web Design
Some guy in the space time continuum.

Dragonlord Linux-Dragon of quick wit and sharp tongue

Apr 3 2010 Anchor

Which is though against the initial idea of HTML/CSS that each browser/user has (possibly) his own settings and that you should not force foreign settings on a user. Let's say somebody has certain disabilities and sets his browser to have certain formatting aiding him to read a website. If you cast a wrath of god as mentioned above you make the website unusable for the person in question. I can understand where this "wrath of god" thinking is coming from but it's definitely not something one should use unless he can be sure that every and any person accessing his website is the exact same type of person.

--

User Posted Image
DragonDreams: Epsylon | Drag[en]gine Game Engine

by Salohcin

Arxae Resident Stepmania Freak :D

Apr 3 2010 Anchor

djjonastybe wrote: Great examples you have given. But please don't tell me last two websites really exist and have a purpose.

only the first one was like that on purpose :x the other 2 are real pages >_>

--

°w°

Spector WWIII

Apr 3 2010 Anchor

Dragonlord wrote: Which is though against the initial idea of HTML/CSS that each browser/user has (possibly) his own settings and that you should not force foreign settings on a user. Let's say somebody has certain disabilities and sets his browser to have certain formatting aiding him to read a website. If you cast a wrath of god as mentioned above you make the website unusable for the person in question. I can understand where this "wrath of god" thinking is coming from but it's definitely not something one should use unless he can be sure that every and any person accessing his website is the exact same type of person.

Well most of the people who are impaired, visually or otherwise; use either a special browser that renders text only (basically without the css files, thus not being particularly problematic for them); which is also a good reason to type out all the content first in the html document before designing, to keep document flow proper (for screen readers); or have increased the font size. The reset code I have above does not effect the font-sizes that they choose, merely makes sure they are 100% of their defaulted value in the browser settings. This is mostly useful for people who use the EM, and Percentage methods of font deployment (and for the most part, as far as I have ever scene, most people use the default browser shipping size of 16px). The thing also removes all padding, margin, and borders from tags, in order to not induce unwanted padding on elements. Thus allowing the designer to have greater control over how the page looks; which helps when debugging browsers such as IE6, which take padding, margins, and widths literally.

While there should be certain precautions taken for the visually impaired, and or whatever else happens to come our way; it would be fairly time consuming to worry about it in depth. I mostly only focus on designing for impairments when it's a website that has a higher chance of receiving such people. You really have to find a balance for the market you are designing for (which you mentioned in the last sentence).

Went back through to read some more of the thread;

The three number value for colors in CSS is perfectly acceptable. It's only used though for repeated values (mostly grays), 333333 can be written as 333, 000000(black) can be written as 000, etc. Other colors like F10F10 can be written as F10 and still be the same color. Of course this is not possible in a program like photoshop which needs all 6 numbers.

F10: alleo;(albeit this wyswig rewrites it to FF1100) F10F10; asdklad

Other things that were talked about would be shorthand code for defining more specific things:

margin: top right bottom left (margin: 10px 5px 0 5px; )
font: style size/line-height family (font: normal 11px/25px "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;)

of course there are quite a few of these to use (and order of the calls do make a huge difference in how it looks).

Edited by: Spector

Dragonlord Linux-Dragon of quick wit and sharp tongue

Apr 3 2010 Anchor

Never had troubles with relative sizes in connection with various browsers as in the box model the sizes are handed down from higher level elements. I tend to only redefine the body tag as well as the main div tag. Everything else is relative to them so I never had to use a reset css in any way.

--

User Posted Image
DragonDreams: Epsylon | Drag[en]gine Game Engine

by Salohcin