LinuxQuestions.org
Review your favorite Linux distribution.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 10-10-2015, 12:36 AM   #1
rblampain
Senior Member
 
Registered: Aug 2004
Location: Western Australia
Distribution: Debian 9.2
Posts: 1,166

Rep: Reputation: 51
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.

Last edited by rblampain; 10-12-2015 at 01:08 AM.
 
Old 10-10-2015, 07:16 AM   #2
lindebuxian
LQ Newbie
 
Registered: Oct 2015
Location: London UK
Distribution: Debian
Posts: 8

Rep: Reputation: Disabled
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
 
1 members found this post helpful.
Old 10-10-2015, 09:42 AM   #3
sycamorex
LQ Veteran
 
Registered: Nov 2005
Location: London
Distribution: Slackware64-current
Posts: 5,833
Blog Entries: 1

Rep: Reputation: 1230Reputation: 1230Reputation: 1230Reputation: 1230Reputation: 1230Reputation: 1230Reputation: 1230Reputation: 1230Reputation: 1230
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.
 
1 members found this post helpful.
Old 10-11-2015, 12:25 AM   #4
rblampain
Senior Member
 
Registered: Aug 2004
Location: Western Australia
Distribution: Debian 9.2
Posts: 1,166

Original Poster
Rep: Reputation: 51
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;
to
Quote:
div04
makes no difference but adding it in
Quote:
div05
centers the text as wanted.
 
Old 10-11-2015, 09:18 AM   #5
ondoho
LQ Addict
 
Registered: Dec 2013
Posts: 12,507
Blog Entries: 9

Rep: Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393
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.

Last edited by ondoho; 10-11-2015 at 09:19 AM.
 
Old 10-11-2015, 12:51 PM   #6
NevemTeve
Senior Member
 
Registered: Oct 2011
Location: Budapest
Distribution: Debian/GNU/Linux, AIX
Posts: 3,862

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

Last edited by NevemTeve; 10-11-2015 at 12:52 PM.
 
1 members found this post helpful.
Old 10-11-2015, 03:15 PM   #7
Rinndalir
Member
 
Registered: Sep 2015
Posts: 733

Rep: Reputation: Disabled
Let w3.org validator look at your page and it will create a report.
 
1 members found this post helpful.
Old 10-12-2015, 01:52 AM   #8
rblampain
Senior Member
 
Registered: Aug 2004
Location: Western Australia
Distribution: Debian 9.2
Posts: 1,166

Original Poster
Rep: Reputation: 51
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.

Last edited by rblampain; 10-12-2015 at 02:37 AM.
 
Old 10-12-2015, 02:50 AM   #9
ondoho
LQ Addict
 
Registered: Dec 2013
Posts: 12,507
Blog Entries: 9

Rep: Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393
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.
 
1 members found this post helpful.
Old 10-12-2015, 03:06 AM   #10
NevemTeve
Senior Member
 
Registered: Oct 2011
Location: Budapest
Distribution: Debian/GNU/Linux, AIX
Posts: 3,862

Rep: Reputation: 1347Reputation: 1347Reputation: 1347Reputation: 1347Reputation: 1347Reputation: 1347Reputation: 1347Reputation: 1347Reputation: 1347Reputation: 1347
meta: press [Go Advanced] then your %percents won't get lost
on: provide a minimal (but complete) example that shows the problem
 
Old 10-13-2015, 09:45 PM   #11
rblampain
Senior Member
 
Registered: Aug 2004
Location: Western Australia
Distribution: Debian 9.2
Posts: 1,166

Original Poster
Rep: Reputation: 51
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.

Last edited by rblampain; 10-13-2015 at 09:52 PM.
 
Old 10-13-2015, 11:09 PM   #12
NevemTeve
Senior Member
 
Registered: Oct 2011
Location: Budapest
Distribution: Debian/GNU/Linux, AIX
Posts: 3,862

Rep: Reputation: 1347Reputation: 1347Reputation: 1347Reputation: 1347Reputation: 1347Reputation: 1347Reputation: 1347Reputation: 1347Reputation: 1347Reputation: 1347
Remove both width's
Code:
.div04 {
/*	width: 100%; */
	border-style: solid;
	border-width: 16px;
	padding: 12px;
 	text-align: center;
}

.div05 {
/*  width: 50%; */
    padding: 20px;
}
 
1 members found this post helpful.
Old 10-14-2015, 02:06 PM   #13
ondoho
LQ Addict
 
Registered: Dec 2013
Posts: 12,507
Blog Entries: 9

Rep: Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393Reputation: 3393
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.
 
1 members found this post helpful.
Old 11-18-2015, 06:27 AM   #14
rblampain
Senior Member
 
Registered: Aug 2004
Location: Western Australia
Distribution: Debian 9.2
Posts: 1,166

Original Poster
Rep: Reputation: 51
Thanks to ondoho's and NevemTeve's last post, I will check all that.

Last edited by rblampain; 11-18-2015 at 06:29 AM.
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS - Is there a way to put several lines of HTML into one line using CSS? Chronothread Programming 12 01-05-2011 06:06 AM
HTML/CSS/JS: Problem with <p> not having an absolute position with CSS. RHLinuxGUY Programming 7 03-03-2007 12:21 AM
Help with XHTML/CSS rendering in IE vharishankar General 14 09-03-2006 05:07 AM
CGI not rendering as expected rblampain Programming 13 09-19-2005 03:44 AM
what browser for apache css rendering? rblampain Linux - Software 4 09-18-2005 10:41 AM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 11:27 PM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration