Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Help with DIVS

  1. #1
    New to the CF scene
    Join Date
    Feb 2019
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with DIVS

    Hello,

    I've currently got this website i've made, it has 2 divs one being a parent one being a child and it has another 2 of the same on the right. I've used float to get them aligned like this. However i'm trying to add a padding to the parent div but the child div is also getting that padding. I've tried taking the child div out of the parent div and the layout messes up. I've attached some images and the code so it's clearer what i mean. I basically want the 'Page Navigation' and 'Main Content' title divs to be seperate from the 'leftcontent' and the 'rightcontent' divs so i can style them independently.

    -untitled-png

    HTML:

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>MB Diagnostics Centre</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <body>
    <div class="container">
      <div class="header"><img src="images/test/header.png" width="800" height="182" alt=""/></div>
      <div class="nav"><?php include 'navbar_inc.php'; ?></div>
      <div class="main">
      <div class="leftcontent">
        <div class="lefttitle"><b>Page Navigation</b></div>
         <?php diagStats(); ?>
        </div>
        <div class="rightcontent">
          <div class="maintitle"><b>Main Content</b></div>
          <?php echo $maincontent; ?>
        </div>
        </div>
        
      </div>
      <div class="footer">© 2019 MB Diagnostics Services</div>
    </body>
    </html>
    CSS:

    Code:
    .container {
    	width: 800px;
    	margin-right: auto;
    	margin-left: auto;
    	overflow:hidden;
    	background-image:url(images/test/bg_container1.png);
    }
    .header {
    	width: 800px;
    	height: 182px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-bottom:-15px;
    }
    .nav {
    	width: 800px;
    	height: 26px;
    	margin-right: auto;
    	margin-left: auto;
    	padding-top:4px;
    	text-align:center;
    	background-image:url(images/test/bg_nav1.png);
    }
    .main {
    	width:750px;
    	margin-left:auto;
    	margin-right:auto;
    	overflow:hidden;
    	margin-top: 10px;
    }
    .leftcontent {
    	width: 250px;
    	height: 200px;
    	margin-left: 15px;
    	float: left;
    	border: 1px #000000 solid;
    }
    .rightcontent {
    	width: 450px;
    	height: auto;
    	margin-left:15px;
    	margin-right: 15px;
    	float: left;
    	border: 1px #000000 solid;
    }
    .footer {
    	width: 800px;
    	height: 73px;
    	margin-right:auto;
    	margin-left:auto;
    	padding-top: 20px;
    	text-align:center;
    	background-image:url(images/test/bg_footer1.png);
    	background-repeat:no-repeat;
    }
    .lefttitle {
    	height: 20px;
    	width: 250px;
    	margin-left:auto;
    	margin-right:auto;
    	background-color:#666666;
    }
    .maintitle {
    	height: 20px;
    	width: 450px;
    	margin-right: auto;
    	margin-left: auto;
    	background-color:#666666;
    }
    body {
    	background-image:url(images/bg_body.png);
    	background-repeat:repeat-x;
    	margin-top: 0px;
    }
    Thank you

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,322
    Thanks
    4
    Thanked 478 Times in 466 Posts
    Why are you using DIV+classes to do numbered heading's structural job? Should that first image even be in the markup instead of a H1+text and a image replacement method? What's with the pixel metric layout are you just TRYING to tell users with accessibility needs to BOHICA?

    Though as to your "problem", padidng gets added to width breaking the layout, which is why you pad/margin the content not the outermost container. What's the markup for what's going into those DIV look like? You might need a extra DIV if there's no actual semantics on your content to target.

    Another trick is to NOT declare widths and floats on everything, leave at least one column fluid so that the one float (usually the smaller one) gets an elastic (em) width. (Not fixed aka px measured!) whilst the rest of the content auto-expands to fit.

    Oh, and this is 2019 not 2009, you can stop saying "type="text/css" on your stylesheet LINK. If you get JS involved you also no longer have to say type="text/JavaScript" on the script tags anymore either.

    ... and where's your MEDIA target on your stylesheet LINK?

    Also depending on if you care about accessibility your content column should TRY to come before your 'extra navigation' in the source-order. This likely means using the new CSS grid layout module, or the old negative margin float layout 'trick'. I would use the latter for maximum legacy compatibility since it's really no more/less code.

    Bottom line, you have a number of DIV for nothing whilst possibly lacking them in some needed spots, DIV doing H1 and H2's job, and possibly a IMG that has no business in the HTML. Not surprising you're having trouble with layout at that point.

    Your markup should likely read more like this:

    Code:
    <!DOCTYPE html><html><head><meta charset="utf-8">
    <meta
    	name="viewport"
    	content="width=device-width,height=device-height,initial-scale=1"
    >
    <link
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    >
    <title>MB Diagnostics Centre</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head><body>
    
    <div id="top">
    
    	<h1>MB Diagnostics Centre</h1>
    	<?php include 'navbar_inc.php'; ?>
    	
    	<div class="columnWrapper">
    	
    		<div id="content">
    			<h2>Main Content</h2>
    			<div class="inner">
    				<?php echo $maincontent; ?>
    			<!-- .inner --></div>
    		<!-- #content --></div>
    		
    		<div id="extras">
    			<h2>Page Navigation</h2>
    			<div class="inner">
    			 <?php diagStats(); ?>
    			<!-- .inner --></div>
    		<!-- #extras --></div>
    		
    	<!-- .columnWrapper --></div>
    	
    	<div class="footer">
    		<hr>
    		&copy; 2019 MB Diagnostics Services
    	<!-- #footer --></div>
    
    <!-- #top --></div>
    
    </body></html>
    The H1, H2 and HR provide navigable accessible structure and ditch a ton of "classes for nothing". You don't like how the HR looks on screen, hide it! Again, semantics before looks!

    Then pad .inner for your inner areas. To do the layout I would suggest something along the lines of:

    Code:
    /* assumes a reset is in use */
    
    #top {
    	max-width:50em;
    	margin:0 auto;
    }
    
    h1 {
    	text-indent:-999em;
    	background:url(images/header.png);
    }
    
    h1:after {
    	/* sneaky trick to maintain aspect ratio if/as image shrinks */
    	content:"";
    	display:block;
    	width:100%;
    	height:0;
    	padding-bottom:22.75%; /* 182/800ths */
    }
    
    .columnWrapper {
    	overflow:hidden;
    	padding-left:17.5em; /* width of sidebar + any desired padding */
    }
    
    #content {
    	float:right;
    	width:100%;
    }
    
    #extras {
    	float:right;
    	width:16em;
    	margin-left:-17.5em;
    }
    Again, all in EM instead of PX so you aren't telling users with accessibility needs to sod off.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  3. #3
    New to the CF scene
    Join Date
    Feb 2019
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for that very informative and great advice/help! i'll certainly be researching and learning from that!

    Just in case you thought that the first screenshot was the only part of the site, i only cropped it to show you what i meant, this is the whole site(by the way, this is my first ever properly(least by looks) designed site

    -untitled-jpg

  4. #4
    New to the CF scene
    Join Date
    Feb 2019
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If my font size was 12pt, would I need a 66em width to stay the same width as I have currently? I’m at 800pxs and I like that size as all my images are sized at that as well

  5. #5
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,322
    Thanks
    4
    Thanked 478 Times in 466 Posts
    Ok, with the full image and what you're saying, you've got some incorrect preconcieved notions when it comes to building a page. Likely you've come across a mix of outdated information and just plain bad advice.

    1) Pt is 1/72th of an inch, a PRINT measurement that has no business being used on a website. It has no fixed relationship to PX nor does it scale properly in all browsers. The measurement to use is EM which starts out based on the user/browser default size (which could be ANYTHING) and is then multiplicative of whatever the parent element is set to.

    2) mixing PT with PX is bound to be broken since there is no fixed relationship betwixt the two.

    3) Fixed width layouts are trash. Not all screen sizes are the same size, some are smaller, some are larger, and you need to design in a manner that works for everyone, not just the perfect mix of screen size and pixels per inch you happen to be using.

    4) Most of what you're using images for isn't stuff web developers of any competence use images for. There's a reason Photoshop is NOT a design tool no matter how many artists under the DELUSION that they are designers try to tell you otherwise.

    In only see one thing I would have in that layout as an actual image file -- the yellow part of that logo with the text inside it. NOT the text next to it. NOT the box around it. NOT the inward slanted section below it. NOT any of those borders. NOT any of those shadows or gradients. NONE of that anytime over the past decade requires images, and most of it using images for is an epic /FAIL/ at web development for some two decades.

    But yes, there are jokers out there who will make up lame excuses about how "we don't have to worry about users of different font sizes anymore" or "that's not our audience" and all sorts of other malarkey that just tricks beginners into making the same mistakes that were made twenty years ago.

    In that way it's a bit like the measles or polio... We know how to stop it, how to avoid it, but some people insist it's harmless and then sucker others into the same delusion.

    Of course I can tell you're being taken advantage of by lies and scams just from one simple thing in your screencap -- that little green icon that says "Dw"... Dreamweaver, the only thing you can learn from it is how NOT to build websites. EVERYTHING it does "For you" it does wrong, everything it tries to teach is wrong, and whilst it's theoretically possible using JUST the code editor part of it to make a decent website, I've never actually seen it done.

    You really should do yourself a favor, kick that bloated overpriced pile of scam bait to the curb, and go get a simple flat text editor like Flo's Notepad 2 (what I use), Atom, Sublime, Visual Studio Code, EditPlus, Notepad++... there are dozens if not hundreds of them, they're free, and it means you won't track any of Adobe's manure across your website's carpets.

    I just tossed together a quick example of how I'd approach what you have so far, again using only the one image.

    https://cutcodedown.com/for_others/mike199028/

    I've had something come across my desk I need to deal with first, but when I'm done with that -- or tomorrow morning -- I'll try to put together one of my infamous "line by line" breakdowns of the how/what/why of the code so you can learn from it.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  6. #6
    New to the CF scene
    Join Date
    Feb 2019
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    WOW I’ve got to hand it to you that looks AMAZING! I’d really be interested in learning how that would be done. So you’re saying simplicity is the key? No need to over complicate things?

  7. #7
    New to the CF scene
    Join Date
    Feb 2019
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, can’t find the edit post button but I’d like to learn how to make sites that are ‘all/most device friendly’


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •