ZioByte ZioByte - 9 days ago 5
CSS Question

W3.CSS how to get a standard header-[left-right]footer layout?

I am trying to learn how to use w3.css to structure a page.

First attempt is to get the standard header/left panel/right-panel/footer layout.

I will have then to complicate the issue inserting nested layouts, but that is for later as I'm unable to make this simple example render as I want :(

my current code is quite simple (I have done many attempts bearing basically no difference):



<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<header class="w3-container w3-indigo">
<div class="w3-xxlarge">Lorem ipsum -- dolor
<a href="login.html" class="w3-btn w3-teal w3-large w3-round-xxlarge w3-right">log in</a>
</div>
</header>
<div class="w3-display-container">
<div class="w3-container w3-left w3-border" style="width: 40%">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Res enim se praeclare habebat, et quidem in utraque parte. Sed in rebus apertissimis nimium longi sumus. Duo Reges: constructio interrete. Aliter enim nosmet ipsos nosse non possumus. Aliud igitur esse censet gaudere, aliud non dolere. Multoque hoc melius nos veriusque quam Stoici. Nam, ut sint illa vendibiliora, haec uberiora certe sunt. </p>
</div>
<div class="w3-container w3-right w3-border" style="width: 60%">
<p>Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. Dat enim intervalla et relaxat. Non autem hoc: igitur ne illud quidem. Sed quot homines, tot sententiae; Quae in controversiam veniunt, de iis, si placet, disseramus.</p>
</div>
</div>
<footer class="w3-container w3-blue">
<p>Iam id ipsum absurdum, maximum malum neglegi. Quae cum essent dicta, discessimus. Hanc ergo intuens debet institutum illud quasi signum absolvere. Deprehensus omnem poenam contemnet. Odium autem et invidiam facile vitabis. Uterque enim summo bono fruitur, id est voluptate. </p>
</footer>
</body>
</html>





This code has several issues I'm unable to pinpoint:


  1. In header : The button is not aligned with text.

  2. Footer: why it's not a footer and fills the space left by the sorter (right) panel? I also tried leaving a gap between the panes (35%-55%) in that case footer is rendered between the panes and then below right, as if also footer would be "float".

  3. Why the color (w3-blue) is applied to all panes? Shouldn't it apply only to footer?



What am I doing wrong?

Any pointer to relevant documentation/tutorial (understandable by a newbie like me) would be welcome.

Answer

The Footer was displaying in the background with the text positioned to fill the gaps where it could and this made the background appear to be blue.

I removed the w3-display-container as I couldn't see a reason not to use w3-container.

As for the button I Couldnt find something in w3.css to add a margin-top: 8px so I added style="margin-top: 8px" to the button.

I would recommend dropping w3.css as it is complicating your learning process. I would start learning HTML and CSS using the W3 resources and once you have mastered the basics if you still feel like using w3.css give it a go, but honestly its a limiting framework.

<!DOCTYPE html>
<html>
<head>
  <title>Page</title>
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
  <header class="w3-container w3-indigo">
    <div class="w3-xxlarge">Lorem ipsum -- dolor
      <a href="login.html" class="w3-btn w3-teal w3-large w3-round-xxlarge w3-right" style="margin-top: 8px">log in</a>
    </div>
  </header>

  <div class="w3-container">
    <div class="w3-container w3-left w3-border" style="width: 40%">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Res enim se praeclare habebat, et quidem in utraque parte. Sed in rebus apertissimis nimium longi sumus. Duo Reges: constructio interrete. Aliter enim nosmet ipsos nosse non possumus. Aliud igitur esse censet gaudere, aliud non dolere. Multoque hoc melius nos veriusque quam Stoici. Nam, ut sint illa vendibiliora, haec uberiora certe sunt. </p>
    </div>
    <div class="w3-container w3-right w3-border" style="width: 60%">
      <p>Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. Dat enim intervalla et relaxat. Non autem hoc: igitur ne illud quidem. Sed quot homines, tot sententiae; Quae in controversiam veniunt, de iis, si placet, disseramus.</p>
    </div>
  </div>

  <footer class="w3-container w3-blue">
    <p>Iam id ipsum absurdum, maximum malum neglegi. Quae cum essent dicta, discessimus. Hanc ergo intuens debet institutum illud quasi signum absolvere. Deprehensus omnem poenam contemnet. Odium autem et invidiam facile vitabis. Uterque enim summo bono fruitur, id est voluptate. </p>
  </footer>
</body>
</html>

Comments