CSS question [Archive] - SysOpt Forums

Click to See Complete Forum and Search --> : CSS question

nothing

08-27-2004, 12:34 PM

Please, take a look at the images first:

http://home.comcast.net/~kao00/iwantthis.JPG

http://home.comcast.net/~kao00/igetthis.JPG

Here is the source code I have so far:

<html><head><title>Layout</title>

<style type="text/css">
body{margin:20px 20px 20px 20px;}

#main{border:1px solid #000; background:#fff; width:100%; height:100%;}

#main #inside{border:1px solid #000; background:#fff; width: 100%; height:100%;}

.margin{margin:15px 15px 15px 15px;}

</style>

</head><body>

<div id="main">

<div id="inside"class="margin"></div>

</div></body>

</html>

Can somebody help me please? Thanks.

Hola hoop

08-27-2004, 12:51 PM

hello nothing.
tried your code and i get what u wanted (box within a box) code and margin offset is ok, so unsure whats going on? u using notepad? Internet explorer?
ps i tried on resol 1152 x 864 and works fine. Maybe yours different?

Hola hoop

08-27-2004, 12:55 PM

although its not much try re-arranging code this way

<html>
<head>
<title>Layout</title>
</head>

<body>
<style type="text/css">
body{margin:20px 20px 20px 20px;}

#main{border:1px solid #000; background:#fff; width:100%; height:100%;}

#main #inside{border:1px solid #000; background:#fff; width: 100%; height:100%;}

.margin{margin:15px 15px 15px 15px;}

</style>

<div id="main">

<div id="inside"class="margin"></div>

</div>
</body>

</html>

Of course i depends what else your gonna do with it and
what else to incorporate into the BODY tag.

nothing

08-27-2004, 01:10 PM

I got it working on Mozilla Firefox with the following code:

<html><head><title>Layout</title>

<style type="text/css">
body{margin:20px 20px 20px 20px;}

#main{border:1px solid #000; background:#fff; width:100%; height:100%;}

#main #inside{border:1px solid #000; background:#fff; height:660px;}

.margin{margin:15px 15px 15px 15px;}

</style>

</head><body>

<div id="main">

<div id="inside"class="margin"></div>

</div></body>

</html>

It also works on IE even when I change the resolution to 800x600. If I open it using Mozilla at a resolution different than 1152x864 (which is the one I use), this is what happens:

ScaryBinary

08-27-2004, 01:55 PM

You shouldn't specify the height in pixels, because no matter how tall your outer box is (let's say the user makes the window smaller) the inner box is going to be 660px tall. Your initial percentage approach makes more sense.

It actually works in IE because IE usually fails to follow the CSS standard.

Try this in different resolutions (sorry, I've already gone over my lunch break!)
<html><head><title>Layout</title>

<style type="text/css">
body{margin: 20px;}

#main{border:1px solid #000; background:#fff; width:100%; height:100%;}

#inside
{
position: absolute;
top: 35px;
right: 35px;
bottom: 35px;
left: 35px;
border:1px solid #000;
background:#fff;
}

</style>
</head><body>
<div id="main">
<div id="inside" > some stuff</div>
</div></body>
</html>
The "abosolute" position aligns everything based on the size of the display window, so even if you decrease the browser window the boxes stay lined up. Based on what your itent with this is, however, this may not be the best option. I tried to get it to work without the "absolute", but could never get the bottom of the inner box to go all the way down to where it should be....

Oh poop - I just remembered IE doesn't support the "absolute" CSS attribute, so this won't work in IE. Darn it!

Well, I guess this is just a theoretical lesson, then. :D

nothing

08-28-2004, 12:43 PM

I have this code under my style tag

#menu A {
text-decoration: none; color: #000000;
}

#menu A:visited {
text-decoration: nome; color: #000000;
}

#menu A:active {
text-decoration: underline; color: #000000;
}

#menu A:hover {
text-decoration: underline; color: black;
}

This one is under my body tag

<div id="menu">
<a>Link</a><br />
<a>Link</a><br />
<a>Link</a><br />
<a>Link</a>
</div>

It works on Mozilla Firefox but does not work under IE. Can anyone tell me why? Thanks.

ScaryBinary

08-28-2004, 01:18 PM

Because IE is stupid piece of horse feces.

Generally speaking, if something works in FireFox but not in IE, it's because IE is stupid and doesn't follow the CSS standard too well.

If you do a minor adjustment to change your anchors to something like this:<a href="">Link</a> IE will figure out that it should apply the style. For some reason it ignores just the anchor tag.

As a side note, I've found that if I want a web page to display well in various browsers, it's best to test with FireFox. I used to start out with IE, but soon realized that IE will accept the sloppiest HTML and CSS code but still display it - while FireFox requires that one stick to the actual CSS and HTML standards a little better. Of course, the flip side of this is that IE fails to properly handle several of the CSS attributes (see my above post, for instance).

nothing

08-29-2004, 07:14 PM

Please, take a look at the attached image. How do I control the space between the words in the menu?

ScaryBinary

08-29-2004, 09:09 PM

If you're talking about the items over there on the left (no hablo espanol? O Italiano?), you can control the spacing between lines using the "margin" attribute. You can apply this to the paragraph item like<p style="margin: 5px, 0px, 5px, 0px;">menu item</p>
As a refresher, the order of settings is top, right, bottom, left. You can also mess with the "padding" attribute. The one you use will affect where a border is drawn, if you apply a border. I forget exactly how it works....

If you're talking about the horizontal space between words in a sentance, there's actually a "word-spacing" attribute. Use the "letter-spacing" attribute for space between individual characters in text.

nothing

08-29-2004, 09:25 PM

It didn't work :(

Here is the source code for the page so you can have a better idea of what I'm doing. Thanks in advance.

<html><head><title>Granamar</title>

<style type="text/css">

</style><body>

<div id="menu">
<a href="">Estoque</a><br />
<a href="">Maquinário</a><br />
<a href="">Trabalhos principais</a><br />
<a href="">Trabalhos executados</a>
</div>

<div id="main">
<h1>Granamar</h1>
<p>Granamar é uma empresa nacional que presta serviços relativos à decoração, utilizando a nobreza do mármore e granito em seu melhor

acabamento.</p>
<p class="manager">Sergio Granata - Diretor</p>
</div>

</body></html>

Oh, and that is portuguese ;)

Thanks!

:t

ScaryBinary

08-29-2004, 09:38 PM

Well, duh, you are in Brazil. ScaryBinary is as dumb as he looks!

All you should have to do is change your anchor style to something like this:a { text-decoration: none; color: #000000; margin: 10px 0px 10px 0px; }

Woops, just realized I told you in my previous post to put commas in there, when you're not supposed to. I'm getting sloppy.

Of course, if you don't want this spacing for all your links, you'd make a special subclass for menu links.

ScaryBinary

08-29-2004, 09:39 PM

Also, you've got the anchor style defined twice.

nothing

08-29-2004, 10:59 PM

I changed my code to this:

<html><head><title>Granamar</title>

<style type="text/css">

</style><body>

<div id="menu">
<a href="">Estoque</a><br />
<a href="">Maquinário</a><br />
<a href="">Trabalhos principais</a><br />
<a href="">Trabalhos executados</a>
</div>

<div id="main">
<h1>Granamar</h1>
<p>Granamar é uma empresa nacional que presta serviços relativos à decoração, utilizando a nobreza do mármore e granito em seu melhor

acabamento.</p>
<p class="manager">Sergio Granata - Diretor</p>
</div>

</body></html>

Still doesn't work :(
I'm the dumb one here, ScaryBinary!

ScaryBinary

08-30-2004, 09:00 AM

Hmmm...maybe the anchor tag can't support the "margin" attribute? A quick fix would be to surround your anchor tags with paragraph tags, and set the margins of those paragraphs. Make a p.link class or something. Meanwhile, back at the lab, we'll do a little research on this anchor issue and see what turns up.

nothing

08-30-2004, 11:03 AM

<div id="menu">

<p><a href="">Estoque</a></p>
<p><a href="">Maquinário</a></p>
<p><a href="">Trabalhos principais</a></p>
<p><a href="">Trabalhos executados</a></p>
</div>

p {
font:11px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}

I did it like this and it worked. Thanks ScaryBinary.

nothing

08-30-2004, 10:22 PM

I have another problem :D

Take a look at the attached image please. Do you see those boxes where the pictures are in? How can I center them?

Here's the source code I have:

<html><head><title>Estoque</title>

<link rel="stylesheet" type="text/css" href="style.css" /></head>

<div id="main">
<h1>Estoque</h1>
<p style="text-align:center;">Clique nas fotos para ampliar</p>

<div class="pic ls"><a href="../imagens/grande/DSC_0234.JPG" target="resource window"><img src="../imagens/pequeno/DSC_0234_small.JPG"></a></div>
<div class="pic ls"><a href="../imagens/grande/DSC_0256.JPG" target="resource window"><img src="../imagens/pequeno/DSC_0256_small.JPG"></a></div>
<div class="pic ls"><a href="../imagens/grande/DSC_0257.JPG" target="resource window"><img src="../imagens/pequeno/DSC_0257_small.JPG"></a></div>
<div class="pic ls"><a href="../imagens/grande/DSC_0259.JPG" target="resource window"><img src="../imagens/pequeno/DSC_0259_small.JPG"></a></div>
<div class="pic ls"><a href="../imagens/grande/DSC_0260.JPG" target="resource window"><img src="../imagens/pequeno/DSC_0260_small.JPG"></a></div>

</div>

<div id="menu">

<p><a href="granamar.html">Principal</a></p>
<p><a href="estoque.html">Estoque</a></p>
<p><a href="">Maquinário</a></p>
<p><a href="">Trabalhos principais</a></p>
<p><a href="">Trabalhos executados</a></p>
</div>

</body></html>

Here is the style sheet:

body {
color:#000;
background-color:white;
margin:0px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
}
h1 {
margin:0px 0px 10px 0px;
padding:0px;
font-size:35px;
color:#ccc;
letter-spacing:15px;
text-align:center;
}
p {
font:11px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
a {
color:#000;
text-decoration:none;
}

a:link {color:#000;}
a:visited {color:#000;}
a:hover {text-decoration:underline;}

#main {
position:relative;
width:510px;
height:400px;
margin:20px 210px 20px 170px;
border:1px solid black;
background-color:#eee;
padding:10px;
z-index:2;
}

#menu {
position:absolute;
width:125px;
height:85;
top:20px;
left:5px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:1;
}

div.pic {
float:left;
height:66px;
width:90px;
padding:0px 0px 0px 0px;
background:#eee;
border:1px solid #ccc;
margin: 10px 10px 0px 0px;
}

div.pic img {
border:0px solid black;
}

div.ls img {
margin:10px 0px 0px 10px;
}

Thanks!

ScaryBinary

08-30-2004, 10:51 PM

You don't really need a <div> around each image. In fact, that's what is messing up your alignment. Put all your images in one division, or scrap the division all together and use the <p> tag instead. Either way, you then just need to set your corresponding division style to center everything, and apply the borders and stuff to an image style (instead of the division).

So, you'll end up with something like <div class="pics-center">
<img class="thumbnail" src="yadda.jpg" />
<img class="thumbnail" src="yadda.jpg" />
<img class="thumbnail" src="yadda.jpg" />
</div>

The "pics-center" division style will center the entire division. Then you apply your picture margin/border styles using the "thumbnail" image class instead of the division class. Or you can replace the <div> tag with a <p> and do the same thing with the images.

nothing

08-30-2004, 11:46 PM

What would "pics-center" look like? Should I use tex-align?

ScaryBinary

08-31-2004, 12:11 AM

Yep. You'd have something like #pics-center {text-align: center;}
img.thumbnail {margin: 10px; border: solid; border-width: 2px; border-color: black;}
I named the division (<div id="pics-center">) but you could just class it, too. Then apply the thumbnail class to each of your images to apply the desired border/margin.

I attached a sample HTML file (you'll have to rename the extension, of course, since we can only post .txt....) so you can see with out too much trouble how it looks. My sample is ugly, but you get the idea.

ScaryBinary

08-31-2004, 12:37 AM

Also, for closure :D I figured out the whole anchor with margins thing. A little digging through the HTML and CSS specs leads me to believe that (a) Anchors are by default 'inline' elements, and (b) margin settings are properly drawn only for 'block' elements. The way around it is to display your anchors as blocks. Seems obvious, right? :rolleyes:

You can do this using CSS:a {margin: 10px; display: block;}
This will force the anchor to be treated like a block, much like a division or paragraph.

Since we just told the browser to display the anchor as a block, this of course means that you can't display them in the middle of normal text. This is easily remedied as you might guess by simply defining two different classes of anchors, one for menus and one for inline links.

I've attached another crummy sample, if you're interested. I know you are. I can see it in your avatar's eyes.

nothing

08-31-2004, 12:52 AM

ScaryBinary. I think you didn't notice the borders around the thumbnails. I tried doing what you told me but I kept messing it up. Could you fix my code with your ideas? As you might have noticed already, I don't know a lot about CSS and this is getting confusing. Sorry for bothering you and thanks a lot for your help!

ScaryBinary

08-31-2004, 01:51 PM

I have good news and bad news.

The good news is that I got your page to work in the manner of which I spoke earlier - using a single division to center all the pics, and using an image class to handle the borders and margins.

The bad news is, of course, it works in FireFox but not that other lousy browser whose name I can't even speak because I'm so mad at it.

I've attached a few code snippets at the end of this post to show you how I got it to work in FireFox.

Give me a little more time and I'll figure it out. You can mess around with it too.

To get this to work in FireFox, I added two new styles:/* New division class to center all images. */
div.pics-center {
text-align: center ; /* Center everything in the division. */
}

/* New image class for border/margin. */
img.thumbnail {
margin: 5px ; /* Put 5px around the BORDER of the picture. */
padding: 10px ; /* Put 10px between the IMAGE and its BORDER */
border-width: 1px ;
border-style: solid ;
border-color: #CCC ;
}. Then I changed your HTML: 



<div class="pics-center">
<a href="../imagens/grande/DSC_0234.JPG" target="resource window"><img class="thumbnail" src="../imagens/pequeno/DSC_0234_small.JPG"></a>
<a href="../imagens/grande/DSC_0256.JPG" target="resource window"><img class="thumbnail" src="../imagens/pequeno/DSC_0256_small.JPG"></a>
<a href="../imagens/grande/DSC_0257.JPG" target="resource window"><img class="thumbnail" src="../imagens/pequeno/DSC_0257_small.JPG"></a>
<a href="../imagens/grande/DSC_0259.JPG" target="resource window"><img class="thumbnail" src="../imagens/pequeno/DSC_0259_small.JPG"></a>
<a href="../imagens/grande/DSC_0260.JPG" target="resource window"><img class="thumbnail" src="../imagens/pequeno/DSC_0260_small.JPG"></a>
</div> . Once again this worked in FireFox, but not IE (OOOPS! I said it! :eek: )

All that being said, I think we can get it to work by tweaking and using both of our ideas.

nothing

08-31-2004, 02:08 PM

ScaryBinary, you are the man :cool:

nothing

09-01-2004, 12:39 AM

I tried some minor changes using my old code and the new code but couldn't get it to work on IE :(
How about you buddy, any success? If you set the border color to black, you can see it's there, but the padding is not working. This is tricky :rolleyes:

ScaryBinary

09-01-2004, 01:46 PM

No luck here either. Thought maybe I could fake IE out using strategically placed divisions or something. The problem is that IE doesn't seem to realize it should apply the "padding" settings to images. The only solution seems to be doing what you started out with, putting a division around each image --- but of course that gets us right back to the original problem of centering the whole thing.

I have one more trick up my sleeve. It might be a little uglier, but I'll give it a shot....;) Hopefully it won't take too long.

I hate IE. They're on version 6 now, and they still don't support the CSS standard? Gimme a break. I'd rather have consistent standards than a freaking auto-complete feature!

ScaryBinary

09-01-2004, 02:03 PM

OK, here it is. As close as I can get, hopefully satisfactory. I had to add a table, and put each photo in it's own cell. Kind of sloppy, but it seems to look OK.

Change your HTML to this:

<table border="0" width="100%" style="margin: 0px;">
<tr> 
<td align="center"><div class="pic ls"><a href="../imagens/grande/DSC_0234.JPG" target="resource window"><img src="../imagens/pequeno/DSC_0234_small.JPG"></a></div></td>
<td align="center"><div class="pic ls"><a href="../imagens/grande/DSC_0256.JPG" target="resource window"><img src="../imagens/pequeno/DSC_0256_small.JPG"></a></div></td>
<td align="center"><div class="pic ls"><a href="../imagens/grande/DSC_0257.JPG" target="resource window"><img src="../imagens/pequeno/DSC_0257_small.JPG"></a></div></td>
<td align="center"><div class="pic ls"><a href="../imagens/grande/DSC_0259.JPG" target="resource window"><img src="../imagens/pequeno/DSC_0259_small.JPG"></a></div></td>
</tr> 
</table>

Then I had to change your margins in the "div.pic" class to 0px.

I hate using tables to force layout issues, but maybe this isn't too bad. See what you think.