Need Help Html

TrAsHeR · December 20, 2007

Ok Iam trying to learn how to build a web site using html language, Iam now on my css file and i have put the background image but its only taking half of a internet page what shold i do to make it so it takes all the rest of the page so I have no blanc space?

h1
{
text-indent: -100px;
text-align: center;
font-family: "Arial Black", Arial, Verdana, serif;
}
p
{
color: rgb(203,71,23);
text-align: left;
font-family: "comic sans ms", Arial, Verdana, serif;
}
body
{
background-image: url("http://www.espacetrial.com/wallpaper/Giacomo%201024-768.jpg");
background-repeat: repeat-y;
}
li
{
color: rgb(203,71,23);
text-align: left;
font-family: "comic sans ms", Arial, Verdana, serif;
}

Thanks

Village Idiot · December 20, 2007

What web browser (FireFox, Internet Explorer, etc) are you using?

I copied the CSS you had and it seems to work in FireFox and Internet Explorer for me. Basically the image is repeated vertically to fill the length of the page.

Any chance you could post the html up as well?

TrAsHeR · December 20, 2007

Yeah sure here you are but i only worked on this on for the last hour so it is really empty.

<!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" xml:lang="fr" >
<head>
<title>Bienvenu sUr mOn site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css" />
</head>
<body>
<h1>Bienvenu sur le site de mes passions...</h1>
<p>
Bonjour !<br />
Sur mes heures libre j'ai deciser de monter un site sur trois choses qui me sont importante:<br/>
<ul>
<li>Le velo</li>
<li>Silkroad Online</li>
<li>Les Potos</li>
</p>
</body>
</html>

Iam not too good at understanding english so keep it easy

Edited December 20, 2007 by TrAsHeR

Charlie Jennings · December 20, 2007

Je pense que le code français est différent à l'anglais. Je ne suis pas totalement sûr.

Village Idiot · December 20, 2007

Yeah sure here you are but i only worked on this on for the last hour so it is really empty.

Iam not too good at understanding english so keep it easy

No problems - sorry if my last post didn't make much sense.

Do you mean the image is not the full width of the internet page? If so try this:

h1
{
text-indent: -100px;
text-align: center;
font-family: "Arial Black", Arial, Verdana, serif;
}
p
{
color: rgb(203,71,23);
text-align: left;
font-family: "comic sans ms", Arial, Verdana, serif;
}
body
{
background-image: url("http://www.espacetrial.com/wallpaper/Giacomo%201024-768.jpg");
background-repeat: repeat;
}
li
{
color: rgb(203,71,23);
text-align: left;
font-family: "comic sans ms", Arial, Verdana, serif;
}

TrAsHeR · December 20, 2007

I probably didnt explain my self very well but the reapeat just reapeat the image to fill in the blanc space.

But i would like my image to maybe "adapt" it self to fill all the space of the internet space, leaving no blanc space.

Hope that makes sence and you understand it

Village Idiot · December 20, 2007

Do you mean you want to stretch the image to fill the space?

I'm not sure how you'd do that with css. Your image might look a bit odd if you stretched it - the wheels would be oval shaped rather than a circle.

Oh and, the image looks really good by the way . How did you make it? Is it a drawing or did you use photoshop or something?

Edited December 20, 2007 by Village Idiot

Pashley26 · December 20, 2007

Bien il tout semble travailler bien sur mon Mac. .....

Tout le mieux !

Et Noël Heureux !

Jarrod

TrAsHeR · December 20, 2007

Do you mean you want to stretch the image to fill the space?
I'm not sure how you'd do that with css. Your image might look a bit odd if you stretched it - the wheels would be oval shaped rather than a circle.
Oh and, the image looks really good by the way . How did you make it? Is it a drawing or did you use photoshop or something?

No need to strech it just adapt to the page.

And if i would strech it would be wight and lenght So the wheels dont look oval =)

Je pense que le code français est différent à l'anglais. Je ne suis pas totalement sûr.

Non le html est un language unique cest a dire que les mot son tous englais =)

nc7r · December 20, 2007

Put the website design up, and a link to the live website. We've no idea what your 'blank space' is.

Just put it in a Div, so put like

#content { background-image:whatever; background-repeat: repeat; }

then

content bla bla bla

</div>

Voila

Simon · December 21, 2007

What do you mean by adapt? You can only position a background image in HTML/CSS, it is impossible to make it stretch or fill an area.

spode@thinkbikes · December 21, 2007

What do you mean by adapt? You can only position a background image in HTML/CSS, it is impossible to make it stretch or fill an area.

A little bit of Javascript would fix that, but it's an ugly solution really.

nc7r · December 21, 2007

A little bit of Javascript would fix that, but it's an ugly solution really.

Massive bodge.

**Danny** · December 21, 2007

Why is javascript always a bodge with you nick?

Another thing you could do is centre it in a container in the middle of the page like so...

h1 {
    text-indent: -100px;
    text-align: center;
    font-family: "Arial Black", Arial, Verdana, serif;
}

p {
    color: rgb(203,71,23);
    text-align: left;
}

body {
    font-family: "comic sans ms", Arial, Verdana, serif;
}


li {
    color: rgb(203,71,23);
    text-align: left;
}

#container {
    background: url("http://www.espacetrial.com/wallpaper/Giacomo%201024-768.jpg") no-repeat;
    width: 1024px;
    height: 768px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -512px;
    margin-top: -384px;
}[/code]


[code]<!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" xml:lang="fr" >
<head>
<title>Bienvenu sUr mOn site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css" />
</head>
<body>

<div id="container">
    <h1>Bienvenu sur le site de mes passions...</h1>

    <p>Bonjour !<br />
    Sur mes heures libre j'ai deciser de monter un site sur trois     choses qui me sont importante:</p>

    <ul>
        <li>Le velo</li>
        <li>Silkroad Online</li>
        <li>Les Potos</li>
    </ul>
</div>

</body>
</html>

But then your limiting your possible content area.

spode@thinkbikes · December 21, 2007

Why is javascript always a bodge with you nick?
But then your limiting your possible content area.

Yeah, the easiest way to achieve what he wants would be to have a fixed width, rather than dynamic. If he posted up a URL, I'd take a closer look, but nothing is sprining to mind as I don't generally advocate background images

But in this case Javascript would be a bodge. Ideally, sites should function without the need for Javascript. Javascript should only add to the page. So needing Javascript just to get the layout right kinds of fits in that category..

nc7r · December 21, 2007

Why is javascript always a bodge with you nick?

But in this case Javascript would be a bodge. Ideally, sites should function without the need for Javascript. Javascript should only add to the page. So needing Javascript just to get the layout right kinds of fits in that category..

Spode expains quite well

Not always a bodge at all, but in that case it would be.

TrAsHeR · December 21, 2007

Ok thanks its going quiet well ill post a link when ive put it on the internet

omgnoseat · January 5, 2008

Need some help aswell, but figured that It didn't need a new topic

So I've put together this page:

And the right box just won't take the scrolling bar.

I was also wondering how I could put it next to box at the right.

here is the code:

body{
    color: black;
    font-family: arial, sans-serif; 
    background-image: url(leafbackground.gif);
    background-repeat: no-repeat;
    background-position: center;
}

div#wrapper {
    width: 70em;
    height: 47em;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    background-color: transparant;
    border-color: blue;
    border-style: solid;
}

div#documentation {
    width: 30em;
    height: 20em:
    margin-right: auto;
    padding: 1em;
    background-color: white;
    border-style: solid;
    border-color: black;    
}

div#schetsen {
    clear: both;
    Float: right; 
    width: 20em;
    height: 10em:
    padding: 1em;
    background-color: white;
    border-style: solid;
    border-color: black;
    overflow: auto;
        
}

Div# Documentation is the one at the left, and div#schetsen is the one at the right, just put some dummy text in there btw..

Hope anyone could figure it out for me.

Simon · January 5, 2008

You mean overflow:scroll?

omgnoseat · January 5, 2008

You mean overflow:scroll?

Tried that, makes no difference

Village Idiot · January 6, 2008

Need some help aswell, but figured that It didn't need a new topic

Any chance you could post the html?

poopipe · January 6, 2008

Any chance you could post the html?

does he not need to set an explicit pixel/percentage height for the div? I thought em was one of the weird ones that pissed you about.

oh, DX image filters let you scale images in CSS but won't work on firefox or any of the other gay browsers

I'm glad I gave up web development - it's a pain in the arse

Simon · January 6, 2008

em is relative to the size of the font inside that object.

People use it for elastic layouts, and to make font sizing work in IE6, and add's about a week of development time onto a normal pixel cut-up site.

**Danny** · January 6, 2008

Em does my head in.

nc7r · January 6, 2008

What I don't get is with php and html, why the f**k does a script work perfect for 6 months, the client doesn't have access to editing coding, only use the CMS, and they seem to f**k it up so it won't list images in the gallery?

WTF?

Sign In

Need Help Html

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members