LinuxQuestions.org - html css not rendering as expected

- Programming (https://www.linuxquestions.org/questions/programming-9/)

- - html css not rendering as expected (https://www.linuxquestions.org/questions/programming-9/html-css-not-rendering-as-expected-4175555751/)

rblampain

10-10-2015 12:36 AM

html css not rendering as expected

I have very limited experience in HTML. The following code unexpectedly renders past the edge of the available screen creating a scrolling bar at the bottom, I simply cannot figure out why this is so, it is valid code under the w3c validator and it applies correctly parts of the external CSS file as shown below, which means it finds it. This screen result is corrected if I comment out

Code:

"width: 100;"

but in both cases the

Code:

"text-align: center;"

is not respected even if inserted in

Code:

.div05

, it is displayed to the left, although the content after

Quote:

<br>

renders in the center in relation to the content before

Quote:

<br>

. (Some contents have been removed between <div></div>)

Can someone tell me what I am doing wrong?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title></title>

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

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

</head><body class="pluie">



<div class="div04" style="background-color:#6666FF; border-color:#99FF66;">

  <div class="div05" style="color:#999900;">

    <i>

      "Destiny: A tyrant's authority for crime and a fool's excuse for failure."

    <br>

    <span 

      onMouseOver="parent.panl.location='authors/Ambrose_Bierce.htm'; return true" 

      onMouseOut="parent.panl.location='../toc.htm'; return true"

    >

      Ambrose Bierce

    </span>

    </i>



</div></div><div class="tabl01"><div>

</div></div></body></html>

Code:

.div04 {

        width: 100%;

        border-style: solid;

        border-width: 16px;

        padding: 12px;

        text-align: center;

        }

Code:

.div05 {

    width: 50%;

    padding: 20px;

}

Thank you for your help.

lindebuxian

10-10-2015 07:16 AM

Hi rblampain

The problem I think is the width of the div at 100%
Because you the add padding and border it sends the actual width past 100%
Change the width to 90% and see what happens

HTH

sycamorex

10-10-2015 09:42 AM

Also, once you've decreased the percentage to 90% or whatever value you need and you want to centre div4 across the page, add

Code:

margin: auto;

to div4 css.

Additionally, avoid putting any css in the html code. Try to keep all styling in your css files. It's good practice to keep content from presentation separate.

rblampain

10-11-2015 12:25 AM

Thank you for the answers.

I thought I need to keep some css in the html code because I need different colours for each snippet, contrasting with the previous and following ones, this would create a few hundred more definitions in the css file and would also be more difficult to manage (moving/additions/deletions), however you raise a new possibility to have these colours defined in the css. I will investigate if I can manage that with a script.

Defining the width as a percentage would give different results depending on the width of the monitor of the visitor, would I get a more consistent result if I simply omit the

Quote:

width

, this seems to work satisfactorily under the 5 browsers installed on my system when defining a percentage gives different left and right margins depending on these browsers?

Adding

Code:

margin: auto;

Quote:

div04

makes no difference but adding it in

Quote:

div05

centers the text as wanted.

ondoho

10-11-2015 09:18 AM

rblampain, could you post the complete css & html to reproduce the problem?
so we can test it?

it's all very confusing and there's a few typos in your first post.

all in all, some simple style rules/conventions for modern html/css coding...

don't call a class by the same name as a html tag (e.g. div), rather choose something more expressive like "content-wrapper"
it's <br />, not <br> (although the latter works fine)

you might want to look at w3schools.com.
some folks dis it, but it's really good for newbies.

you might want to look at & use "normalizing" css sheets, e.g. https://github.com/necolas/normalize.css/
some quick suggestions:

your elements width's percenatge is defined by the parent element, so the width of the topmost element (html or body) must be defined. try setting "html,body{width:100;margin:0;padding:0;}" at the top of your css.
try setting "box-sizing: border-box;" in the topmost element, and understand what it does.

NevemTeve

10-11-2015 12:51 PM

style="width: 100" does absolutely nothing. Use a dimension: 100%, 100pt, 100cm, 100px, 100em etc
Note: or the forum has eaten your %percent?

Rinndalir

10-11-2015 03:15 PM

Let w3.org validator look at your page and it will create a report.

rblampain

10-12-2015 01:52 AM

I tried to correct

Code:

"width: 100;"

but lq software refuses to insert the percent character, however it is correct where the browser is going to find it. The full html document is about 15k with many repetitions of snippets of the code mentioned above and a lot of paragraphs. What I have done is to take the first occurrence of the code (they are all generated by script and identical) including its text then appended the necessary "end" tags and tested. Everything in my question is copied and pasted and the document was first tested successfully with W3C validator as said in my first post. The css is obviously an external file made specially for this case and the only part not reported in my first post is the first line:

Code:

@charset "utf-8";

If you simply copy and paste this code you will have exactly what I tested. Everything works as intended except for the scrolling to the right if

Code:

width: 100;

is not commented out. (percent character is still automatically censored - did the same thing to ondoho's post, if you say '$!#%@*', '%' is probably exceptionally rude.)

Please note it is only worth your time if you think you might learn or find something unusual since I am quite happy to proceed on the basis of the first answers . The question of omitting the "width" property is not important in my view but learning something will be a bonus of course.

I have looked at ondoho's suggestions and will follow the good advices.

ondoho

10-12-2015 02:50 AM

just to reiterate, your problem is that width doesn't behave as it should, yes?

in that case you should really look at some sort of minimum normalizing, e.g.

Code:

body {

  margin: 0;

  box-sizing: border-box;

  width: 100(percent);

}

and see how it affects your problem.

NevemTeve

10-12-2015 03:06 AM

meta: press [Go Advanced] then your %percents won't get lost
on: provide a minimal (but complete) example that shows the problem

rblampain

10-13-2015 09:45 PM

to NevemTeve: I think I was using "Go Advanced" but I will check below.
I have "copied and pasted" and tested again the code described above in case I mislead you but I got exactly the result described above, it is exactly the code tested initially, I think it is complete (it validates) and it does not matter if it comes from a larger html page. To satisfy your suggestion I would have to reproduce it here verbatim which is unnecessary and could become confusing if people start to look for any possible difference. This snippet has NOT been condensed after testing a larger one, it is precisely the code tested, nothing removed, nothing added.
(width="100%" width=100% in "Advanced" mode)

to ondoho:
-the width attribute is definitely the problem and lindebuxian's explanation that it goes above 100% due to the addition of padding and border makes good sense to me. Specifying an arbitrary value gives the box a margin on the right provided the value is low enough, however, if anybody does not get the result I do then I do not know what the problem could be.
-I have added the "body" attributes exactly as you specified but it has no influence on the result which, in my inexperienced view, is to be expected since the specifications established in ".div04" are read after those relating to "body" and the guilty "width" attribute is unaffected.
-again, I am willing to ignore it completely in the expectation the browser will then give a result neater than defining a value which will give a different result according to the width of the monitor. On my machine and with my browsers, this neatly takes all the available width, which is what I need.

NevemTeve

10-13-2015 11:09 PM

Remove both width's

Code:

.div04 {

/*        width: 100%; */

        border-style: solid;

        border-width: 16px;

        padding: 12px;

        text-align: center;

}



.div05 {

/*  width: 50%; */

    padding: 20px;

}

ondoho

10-14-2015 02:06 PM

your example from post #1 provides a valid html document, but no css stylesheet.
maybe you think you provided a "working example", but who knows what else you have in your cascading stylesheet that affects the outcome?

also you haven't tried the "box-sizing: border-box;"? you should really understand what it does.

also, you keep leaving out semicolons ";" from your examples - html and css are patient and forgiving, but when they fail, they fail silently, and i've had them fail silently on a semicolon. so, better to get it right.

about width:
width of an element in percent is always percent of the width of its parent's element.
example:

Code:

<body>

  <div style="width:50%;">

    <div style="width:50%;">bla.

    </div>

  </div>

</body>

the outer div will be 50% of the body, the inner div will be 50% of the outer div.

rblampain

11-18-2015 06:27 AM

Thanks to ondoho's and NevemTeve's last post, I will check all that.

All times are GMT -5. The time now is 03:02 AM.