Questions about CSS.

Exide · Sep 2, 2008

Hi.
I wasn't sure what to name the thread.. I've only got one question as of now, but I might need more help in the future, so that's the best thread name I could think of.

I'm supposed to make a nice looking website (easier said than done.)
It can't be some HTML-only coded website, like I've done before. It needs cool effects and whatnot.
So now I need to learn CSS!

To my first question:
-I've gathered that using 'Divs' is much neater than 'Frames'..
However I can't define the size of the 'Divs'.
I tried setting the width like this: #left {width: 10%;, but using % isn't working.

What I want is three 'Divs' next to eachother. Left, Center and Right.
I want Left and Right to take 10% of the screen each, in width. And Center to have the other 80%.

I can set the width with other units, such as: px and 'em'. But then, I believe, the website will look differently on different resolutions?

So.. any idea how to fix so that I can use %?

duyen · Sep 2, 2008

Use float: left; on the left part and float: right; on the right part. Then just set them to 100px wide (or w/e) and the middle ones margin-left & margin-right to 105px (or what you earlier assigned +5px).

If you insist on using %'s I'd just use tables.

If you want I can write a basic outline of code for you.

Exide · Sep 2, 2008

I believe I got it to work.
Here's what my code looks like:

Code:

#container {width: 90%; background: #ffde9b; float: left; margin: 5%;}

#left {width: 10%; float: left; padding: 1em; border-left: 1px solid #999999;}

#center {width: 70%; float: left; padding: 1em; text-align: center; background-color: #ABC999; border-left: 1px solid #999999; border-right: 1px solid #999999;}

#right {width: 10%; float: right; padding: 1em; border-right: 1px solid #999999;}

However.
I tried setting my resolution to 1024x768, and the website looked messed-up..
I was hoping that the Divs would scale-down, due to the % unit.
-Is it possible to make that happen?

duyen · Sep 2, 2008

I personally would do this:

Code:

#center
{
 margin-left: 105px;
 margin-right: 105px;
 /*Insert Any Other CSS here*/
}

#left
{
 float: left;
 width: 100px;
 /*Insert Any Other CSS here*/
}

#right
{
 float: right;
 width: 100px;
 /*Insert Any Other CSS here*/
}

If the resolution is over 600x800 this CSS should work fine.

Exide · Sep 2, 2008

Thanks.
But now 'Right' is on the line below Left and Center. (As if I had used <br>, but I haven't.)

duyen · Sep 2, 2008

Exide said:
Thanks.
But now 'Right' is on the line below Left and Center. (As if I had used <br>, but I haven't.)

Oh, then it's more or less a footer?

Anyone when your setting it up just don't use any of the code I posted and "right" will be at the bottom.

____

EDIT: Wait, are you saying you WANT it at the bottom or are you saying it IS at the bottom with my code?

Exide · Sep 2, 2008

It IS "at the bottom" (really just below the other two).
I want it on the same row.

duyen · Sep 2, 2008

Exide said:
It IS "at the bottom" (really just below the other two).
I want it on the same row.

Ah ok, hold on I'll test it myself.

EDIT: What you need to do is put <div id="right"> BEFORE <div id="center">

Here's my code:

Code:

<html>
<head>
<style type="text/css">
#center
{
 margin-left: 105px;
 margin-right: 105px;
 background-color: red;
 border: 1px solid black;
 /*Insert Any Other CSS here*/
}

#left
{
 float: left;
 width: 100px;
 background-color: red;
 border: 1px solid black;
 /*Insert Any Other CSS here*/
}

#right
{
 float: right;
 width: 100px;
 background-color: red;
 border: 1px solid black;
 /*Insert Any Other CSS here*/
}
</style>
</head>
<body>
<div id="left">
Left
</div>
<div id="right">
right
</div>
<div id="center">
center
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</body>
</html>

Exide · Sep 2, 2008

Anman64 said:
EDIT: What you need to do is put <div id="right"> BEFORE <div id="center">

That did the trick!

Thanks. :thup:

I'll return with more questions later, when I need answers.

duyen · Sep 2, 2008

Exide said:
That did the trick!
Thanks. :thup:

I'll return with more questions later, when I need answers.

Your welcome.

Here are 2 tips for general website building:

-Don't forget the doctype

-Don't forget to include the encoding. example:

Code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Exide · Sep 3, 2008

More questions!

I'm using this doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
That should cover what I need, right? (I'm using HTML and CSS and maybe PHP later on..)

I did this:

Code:

 margin-left: 5em;
 margin-right: 5em;

However, it seems like there's more space to the right, than it is to the left?

Another, related, question:
I got pictures for the website. But they're in .pdf files..
(I wanted them to be in .png or maybe .jpg format.)
-Can I convert them someway? Does it matter if they're in .pdf? What's the difference?

Thank you.

duyen · Sep 3, 2008

pdf is not an image format so yes you must convert them. What I would do is open the pdf file, take a screenshot of it (Print Screen), then paste it into paint (Ctrl + V), then crop it, then save as .PNG

____

Also: I recommend learning JavaScript before you learn PHP.

_____

The margins should be the same.

There might be something else "increasing" the margins though like an image link.

___

Another tip: If you want your code to be nice, clean and look proper on all browsers use the w3c validator.

Exide · Sep 3, 2008

Yea, that's what I thought.
No way to export the image from Acrobat Reader to .jpg or .png?

This is the complete code, shouldn't change the size on either size:

Code:

#container 
{
 width: 85%;
 height: 45em;
 margin-left: 5em;
 margin-right: 5em;
 margin-top: 1em;
 margin-bot: 10em;
 background-color: #ffde9b;
 float: left;
}

#top
{
 height: 10em;
 text-align: center;
 background-image: url(loggo.png);
}

#center
{
 height: 40em;
 text-align: center;
 background: #ABC999;
}

#left
{
 float: left;
 width: 10%;
 background: #999ABC;
}

#right
{
 height: 40em;
 background-image: url(test.jpg);
 float: right;
 width: 10%;
}

duyen · Sep 3, 2008

Exide said:

Yea, that's what I thought.
No way to export the image from Acrobat Reader to .jpg or .png?

This is the complete code, shouldn't change the size on either size:

Code:

#container 
{
 width: 85%;
 height: 45em;
 margin-left: 5em;
 margin-right: 5em;
 margin-top: 1em;
 margin-bot: 10em;
 background-color: #ffde9b;
 float: left;
}

#top
{
 height: 10em;
 text-align: center;
 background-image: url(loggo.png);
}

#center
{
 height: 40em;
 text-align: center;
 background: #ABC999;
}

#left
{
 float: left;
 width: 10%;
 background: #999ABC;
}

#right
{
 height: 40em;
 background-image: url(test.jpg);
 float: right;
 width: 10%;
}

You'd need to show me part of the HTML code. (The part where the left and right div is)

SFilip · Sep 3, 2008

> No way to export the image from Acrobat Reader to .jpg or .png?
Google FTW.
http://it.cas.psu.edu/training/howto/util/pdf_extract_graphics_v6.htm
Alternatively you can use software like PDF Image Extract or PDF Ripper.

Exide · Sep 4, 2008

Anman64 said:
You'd need to show me part of the HTML code. (The part where the left and right div is)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Work Factory</title>

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


<body background="background.jpg">


<div id="container">
<div id="top">  </div>

<div id="left">Vänster

<br><br><br><br><br><br><br><br><br>
test
<br><br><br>

</div>
<div id="right">Höger

<br><br><br><br><br><br><br><br><br>
test
<br><br><br>

</div>
<div id="center">Center</div>
</div>


</body>
</html>

Thanks, SFilip.
I'll try that out.

(If everyone used google, there would be nothing to do for you guys, right?)

EDIT:
Can I open links in DIV? -Like in Frames?

EDIT #2:
Why does my .png files look weird in Internet Explorer (7.0)?

duyen · Sep 4, 2008

>Can I open links in DIV? -Like in Frames?

To do that you would need to change your doctype to Frameset.

But read this.

>Why does my .png files look weird in Internet Explorer (7.0)?

They shouldn't look any different from Firefox, unless ofc your really using IE6 then any transparency in a png is turned black.

___

You might want to change

Code:

<body background="background.jpg">

into

Code:

<body>

and add this CSS

Code:

body
{
background-image: 
url('background.jpg');
background-repeat: repeat
}

It's not required, nor will make a difference but I think it looks cleaner.

Besides that, nothing looks wrong with your code... the margins [should] be the same.

Exide · Sep 4, 2008

I thought frames "was ugly".
(I read that somewhere..)

So the whole idea of using divs, is to get rid of the "ugly frames".

I was hoping there was a way of using divs as frames, sort of, without using frames at all?

duyen · Sep 4, 2008

Exide said:
I was hoping there was a way of using divs as frames, sort of, without using frames at all?

Not really.

And vBulletin uses frames in the Mod CP anyhow.

Exide · Sep 4, 2008

Thanks.

I'm using iFrames. -Anything wrong with that?

Should I use tables together with iFrames?

Questions about CSS.

I am amazingly focused right now!

New Member

I am amazingly focused right now!

New Member

I am amazingly focused right now!

New Member

I am amazingly focused right now!

New Member

I am amazingly focused right now!

New Member

I am amazingly focused right now!

New Member

I am amazingly focused right now!

New Member

Gone but not forgotten

I am amazingly focused right now!

New Member

I am amazingly focused right now!

New Member

I am amazingly focused right now!

Log in

The Helper Discord

Share this page

Affiliates

Network Sponsors