The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Margin?
RockHudson
post Dec 5 2020, 06:41 AM
Post #1





Group: Members
Posts: 4
Joined: 20-July 15
Member No.: 23,033



Can some one help? I am not very conversant with CSS and I want to fix a problem I have and I can't find the answer.
I am writing code for the website that I have created and despite changing several margin parameters in the stylesheet it will not give me a margin on the left hand side.(see image)
Here is the code for the content where the text is placed:
CODE

<div class="content">
        <h1>Welcome 'Lets IoT with Arduino' Website</h1>
        <p><strong>This website has been created for enthusiasts who love making gadgets with this flexible microprocessor board.  </strong>.</p>
        <p>It is our intention to make this site a focus for Arduino users and make available links and pages of useful information for <strong>Arduino enthusiasts.</strong> </p>
        <p>We have become passionate about IoT and have used many IoT modules to automate our home.  Using WiFi gadgets we can even talk to our gadgets with Amazon Alexa, Google Nest and the like.</p>
        <p>My aim for this website is to put all in one place links to useful sites as well as notes and articles concerning the vast
        array of components available to construct useful gadgets which make life much easier in our home.</p>
        <p>Although this site is based around the use of the Arduino microprocessor, some of the items mentioned in this site will work without the Arduino, but can become controlled by the Arduino as a means of control.</p>
        
      </div>

I have attached a copy of the CSS stylesheet.
Please help?


Attached thumbnail(s)
Attached Image

Attached File(s)
Attached File  style.css ( 10.1k ) Number of downloads: 170
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 5 2020, 07:54 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You didn't post all of the HTML. But I think I get what you are after anyway. You want a margin between the menu and the bulk text, right?

The menu is floated. A float doesn't push adjacent block level element aside. It just pushes their inline content (text, images...) aside. In reality the div.content stretches all the way to the left behind the menu.

So, to get a visible margin you need to make it much larger. I.e. it needs to be the width of the float plus the width of the visible margin you want to see.


Take a look at this. You can see the yellow div goes all the way behind the floated div.

CODE
#foo    { width: 300px; height: 800px;
          float: left;
          border: 2px solid }
#bar    { height: 500px;
          background: yellow }



HTML
<div id="foo">Menu</div>
<div id="bar">Blah blah blah blah</div>



Now, if you want to have 20px visible margin you really need...

CODE
#bar    { margin-left: 320px }


That will give you a gap between the divs, but it's only visible if they each have their own background. If you don't want that you can use padding instead.

CODE
#bar    { padding-left: 320px }


Or you can use a combination of margin and padding. Maybe you want the yellow div to have a visible border, not covered by the float.

CODE
#bar    { border: 5px solid blue;
          /* the width of the float+the width of its horizontal borders */
          margin-left: 304px;
          padding-left: 20px }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 5 2020, 01:28 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



If you have had time to try that, I made a typo in the comment in the last CSS snip above (corrected now). I wrote "...+the width of its horizontal margins". That should be +the width of its horizontal borders. Sorry. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RockHudson
post Dec 9 2020, 07:31 AM
Post #4





Group: Members
Posts: 4
Joined: 20-July 15
Member No.: 23,033



QUOTE(pandy @ Dec 5 2020, 01:28 PM) *

If you have had time to try that, I made a typo in the comment in the last CSS snip above (corrected now). I wrote "...+the width of its horizontal margins". That should be +the width of its horizontal borders. Sorry. blush.gif

Hi Pandy
Sorry but I have tried to fix this problem, but I don't think I am grasping the method. Not helped by using the generic Foo Bar terminology.
I have been trying understand and have created a pic of what areas you are referring to.
Could another class for the text be the answer?
Can you help me further?

I have added the html code:
CODE


<!DOCTYPE HTML>
<html>

<head>
  <title>Lets IoT with Arduino Home</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <!-- modernizr enables HTML5 elements and feature detects -->
  <script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>

<body>
<div id="bg">
    <img src="images/background.jpg" alt="home">
</div>
  <div id="main">
    <header>
      <div id="logo">
        <div id="logo_text">
          <!-- class="logo_colour", allows you to change the colour of the text -->
          <h1><a href="index.html"><span class="logo_colour">Lets IoT with Arduino</span></a></h1>
          <h2></h2>
        </div>
      </div>
      <nav>
        <div id="menu_container">
          <ul class="sf-menu" id="nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="Arduino.html">Arduino</a></li>
            <li><a href="Developer Apps.html">IoT Development Apps</a></li>
            <li><a href="ESP8266-WiFi Modules.html">ESP8266 series</a>
            <li><a href="Code Languages.html">Code languages</a></li>
            <li><a href="Datasheets.html">Datasheets</a></li>
            <li><a href="contact.php">Contact Form</a></li>
          </ul>
        </div>
      </nav>
    </header>
    <div id="site_content">
      <div id="sidebar_container">
        <div class="sidebar">
          <h3>Latest News</h3>
          <h4>New Website Launched</h4>
          <h5>1st December 2020</h5>
          <p>2020 sees the new ARDUINO website for Enthusiasts</p>
          <p>Evothings is not supported - but the server is still running on AWS</p>
        </div>
        <div class="sidebar">
          <h3>Useful Links</h3>
          <ul>
            <li><a href="https://www.arduino.cc/">Arduino Organisation Home page</a></li>
            <li><a href="https://en.wikipedia.org/wiki/Internet_of_things">A Wikipedia Description of IoT</a></li>
            <li><a href="https://roboindia.com/tutorials/esp01-input-output/">Introduction to using ESP-01 & ESP8266</a></li>
            <li><a href="http://www.nodemcu.com/index_en.html">Introducion to NodeMCU</a></li>
          </ul>
        </div>
        <div class="sidebar">
          <h3>More Useful Links</h3>
          <ul>
            <li><a href="https://www.instructables.com/circuits/">Instructables - Have all sorts of projects here!</a></li>
            
          </ul>
        </div>
    </div>
      <div class="content">
        <h1>Welcome 'Lets IoT with Arduino' Website</h1>
        <p><strong>This website has been created for enthusiasts who love making gadgets with ths flexiable microprocessor board.  </strong>.</p>
        <p>It is our intention to make this site a focus for Arduino users and make available links and pages of useful information for <strong>Arduino enthusiasts.</strong> </p>
        <p>We have become passionate about IoT and have used many IoT modules to automate our home.  Using WiFi gadgets we can even talk to our gadgets with Amazon Alexa,Google Nest and the like.</p>
        <p>My aim for this website is to put all in one place links to useful sites as well as notes and articles concerning the vast
        array of components available to construct useful gadgets which make life much easier in our home.</p>
        <p>Although this site is based around the use of the Arduino microprocessor, some of the items mentioned in this site will work without the Arduino, but can become controlled by the Arduino as a means of control.</p>
        
      </div>
   </div>
    <div id="scroll">
      <a title="Scroll to the top" class="top" href="#"><img src="images/top.png" alt="top" /></a>
    </div>
    <footer>
      <p><img src="images/twitter.png" alt="twitter" />&nbsp;<img src="images/facebook.png" alt="facebook" />&nbsp;<img src="images/rss.png" alt="rss" /></p>
      <p><a href="index.html">Home</a> | <a href="Arduino.html">Arduino</a> | <a href="IoT.html">IoT</a> | <a href="Cayenne.html"> Cayenne App</a> | <a href="ESP01.html">ESP8266 series </a> | <a href="NodeMCU.html">NodeMCU</a> | <a href="Lua.html">Lua</a> | <a href="contact.php">Contact Us</a></p>
      <p>Copyright &copy; photo_blurred3 | <a href="http://www.css3templates.co.uk">design from css3templates.co.uk</a></p>
    </footer>
  </div>
  <!-- javascript at the bottom for fast page loading -->
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
  <script type="text/javascript" src="js/jquery.sooperfish.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('ul.sf-menu').sooperfish();
      $('.top').click(function() {$('html, body').animate({scrollTop:0}, 'fast'); return false;});
    });
  </script>
</body>
</html>


Attached File(s)
Attached File  Site_layout.pdf ( 142.16k ) Number of downloads: 174
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 9 2020, 10:22 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



#sidebar_container is floated left and it's 234 px wide. As I tried to show above .content isn't pushed aside by the floated menu, as you probably think it is. It stretches under the menu all the way to the left edge of the page and only its content is pushed aside by the float. That's why the margin you use on .content has no visible effect. The margin is there, but way to the left under the float.

You need a margin that's the sum of the width of the float and the margin you want to see.

You have this.
CODE
.content {
...
  margin: 20px 20px 15px 20px;
...
}


The float is 234px and you want to see a 20px left margin. 234 + 20 = 254, so the below is what you need.

CODE
.content {
  margin: 20px 20px 15px 254px;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 9 2020, 01:53 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Just wanted to add that playing with colored DIVs is a good way to learn to understand CSS concepts, like the one we are dealing with now. Trying to get to grip with it with a complex page that uses other concepts too obscures the pictures. Once you can do it right with the empty DIVs it's easy to transfer that knowledge to a real page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 10 2020, 06:15 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



So did that help?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RockHudson
post Dec 11 2020, 05:32 AM
Post #8





Group: Members
Posts: 4
Joined: 20-July 15
Member No.: 23,033



Hi Pandy
Yes it did, but only the <p> text and not the heading which is <h1>.
Why is this?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 11 2020, 01:45 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You have extra margin and padding on the Ps. Not on the H1. I thought you wanted it like that.

If you want everything to have the same left margin/padding, I'd remove that from the Ps and use everything with .content instead. You then need to make the margin on .content a little larger.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:49 AM