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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2019
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I can't get rid of the white space at the bottom of my HTML. Prob cause position rel

    So I'm coding a personal website for college and I have a portfolio page. The page was originally all position absolute, with images and buttons and text, but I realized the horrific cluster it becomes upon resizing the window. So I decided to switch to position relative and make my HTML responsive. I have the layout I would like, but I now have a huge white space at the bottom of my HTML very likely because of how I used negative top values to move all my relative elements in line with each other instead of below each other. I tried switching them to different settings and tried messing with the height of the html and the wrapper and container, but I got this CSS from some free open source project and ITS SO LONG. The majority of everything on the portfolio page is all in the beginning of the CSS. If you can figure out what the issue is and how to get rid of the huge white space I would be extremely grateful.

    Here's my HTML and CSS;
    https://codepen.io/nchowdhury/pen/XOEYMJ

    THanks.

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,327
    Thanks
    4
    Thanked 478 Times in 466 Posts
    You've got a lot of problems there, but the biggest is that you aren't doing anything that warrants the use of positioning -- it's ALL flow content that something as simple as float could handle.

    This is only further exacerbated by the lack of semantics. You've got DIV+classes doing numbered heading's job, DIV+classes doing P's job, classes on things that shouldn't even need classes (like the HTML tag), tables for layout doing UL/LI's job, buttons (a form / scripting target) doing what is likely Anchor's job, multiple instances of the same ID (Id's are unique and can only be used once per page), invalid gibberish use of CSS' px metric on HTML attributes (width and height), no ALT text for images off / search assist on the images, and at least one image that doesn't even belong in the HTML since structurally the text it would represent would be the H1. (Your site logo/title)

    The CSS is no winner either, with PX media queries for EM elements being broken gibberish, PX font-sizes pissing on accessibility from so on high you'd think the almighty just got back from a kegger, the use of "all" transition on elements that cause odd pop-in issues in FF...

    I'm not sure what resources you're learning HTML and CSS from, but you're missing most of the "basics" of using either properly.

    First let's clean up that HTML to what it likely should be.

    Code:
    <!DOCTYPE html><html lang="en"><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>Portfolio - Nafi Chowdhury</title>
    </head><body>
    
    <h1><a href="/">Nafi Chowdhury</a></h1>
    
    <ul id="mainMenu">
    	<li><a href="home.html">HOME</a></li>
    	<li><a href="about Me.html">ABOUT ME</a></li>
    	<li><a href="portfolio.html">PORTFOLIO</a></li>
    	<li><a href="Extracurriculars.html">EXTRACURRICULARS</a></li>
    	<li><a href="Gallery.html">GALLERY</a></li>
    	<li><a href="Contact Me.html">CONTACT ME</a></li>
    </ul>
    
    <div id="portfolio">
    
    	<div class="subsection">
    		<img
    			src="images/placeholder.png"
    			alt="DESCRIBE THIS IMAGE, ALT IS NOT OPTIONAL"
    			class="leadingPlate"
    		>
    		<div class="postPlate">
    			<h2>AAAAAAA</h2>
    			<p>
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor sapien vel leo eleifend aliquam. Etiam dignissim tincidunt magna nec facilisis. Quisque consectetur eros justo. Vestibulum tincidunt at neque ac hendrerit. Fusce cursus, elit et lacinia ornare, sapien elit fringi
    			</p>
    			<a href="#" class="more">Learn More</a>
    		<!-- .postPlate --></div>
    	<!-- .subsection --></div>
    
    	<div class="subsection">
    		<img
    			src="images/placeholder.png"
    			alt="DESCRIBE THIS IMAGE, ALT IS NOT OPTIONAL"
    			class="leadingPlate"
    		>
    		<div class="postPlate">
    			<h2>English Esssays/Documents</h2>
    			<p>
    				A collection of my essays and analysis responses throughout my high school career in Language Arts.
    			</p>
    			<a href="#" class="more">Learn More</a>
    		<!-- .postPlate --></div>
    	<!-- .subsection --></div>
    
    	<div class="subsection">
    		<img
    			src="images/placeholder.png"
    			alt="DESCRIBE THIS IMAGE, ALT IS NOT OPTIONAL"
    			class="leadingPlate"
    		>
    		<div class="postPlate">
    			<h2>Newspaper Publications</h2>
    			<p>
    				Some of my work in English class was published to the local township  newspaper, the XSWADSDQAS, and was framed by my parents in our living room.
    			</p>
    			<a href="#" class="more">Learn More</a>
    		<!-- .postPlate --></div>
    	<!-- .subsection --></div>
    
    	<div class="subsection">
    		<img
    			src="images/placeholder.png"
    			alt="DESCRIBE THIS IMAGE, ALT IS NOT OPTIONAL"
    			class="leadingPlate"
    		>
    		<div class="postPlate">
    			<h2>Creative Work</h2>
    			<p>
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor sapien vel leo eleifend aliquam. Etiam dignissim tincidunt magna nec facilisis. Quisque consectetur eros justo. Vestibulum tincidunt at neque ac hendrerit. Fusce cursus, elit et lacinia ornare, sapien elit fringilla leo, non interdum massa sem in tellus. Sed tristique lectus sit amet m
    			</p>
    			<a href="#" class="more">Learn More</a>
    		<!-- .postPlate --></div>
    	<!-- .subsection --></div>
    
    <!-- #portfolio --></div>
    
    </body></html>
    You can see a lot of your DIV and classes got axed for semantic tags whilst some new ones were added to control behavior. In particular we have a H1 as THE (singular) structural headING (singular) that everything on the page is a subsection of. You want an image for the logo apply it from the CSS. Then we have H2 indicating the start of major subsections of the page... If those subsections had subsections you'd start them with H3. That's what numbered headings MEAN. They do not exist and should not be used just because "I want text in different weights and sizes" any more than you should use P -- indicating a grammatical paragraph -- just because you want a gap after something.

    All HTML tags except for DIV, SPAN, and Anchor have meanings, and you should be leveraging those meanings and their structure. Basically if you choose your tags based on what you want things to look like, you're choosing all the wrong tags for all the wrong reasons.

    ... and whilst DIV are good for grouping semantic tags for the POSSIBILITY of receiving some sort of style, you shouldn't be adding those to the HTML until AFTER you've written your semantic markup describing all your plaintext.

    Now, as to your layout...

    Code:
    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,dl,dt,dd,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    	line-height:1.5em;
    }
    
    img, fieldset {
    	border:none;
    }
    
    hr {
    	display:none;
    	/*
    		HR in my code are for semantic breaks in topic/section, NOT
    		style/presenation, so hide them from screen.css users
    	*/
    }
    
    @media (max-width:480px) {
    	/*
    		Fix older small screen devices that don't know what a
    		viewport META is.
    	*/
    	* {
    		-webkit-text-size-adjust:none;
    		-ms-text-size-adjust:none;
    	}
    }
    
    body, button, input, select, table, textarea {
    	font:normal 100%/150% arial,helvetica,sans-serif;
    }
    
    body {
    	max-width:60em;
    	margin:0 auto;
    }
    
    h1 {
    	width:475px;
    	height:225px;
    	text-indent:-999em;
    	background:url(images/h1logo.png) 0 0 no-repeat;
    	background-size:cover;
    }
    
    #mainMenu {
    	list-style:none;
    	display:table;
    	width:100%;
    	margin:0.5em 0;
    }
    
    #mainMenu li {
    	display:table-cell;
    }
    
    #mainMenu a {
    	display:block;
    	padding:0.5em;
    	text-align:center;
    	text-decoration:none;
    	color:#000;
    	border-radius:0.5em;
    }
    
    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover {
    	background:rgba(0,0,0,0.05);
    }
    
    p {
    	margin-bottom:1.5em;
    }
    
    .subsection {
    	display:flex;
      align-items: center;
      justify-content: center;
      margin-bottom:1.5em;
    }
    
    .leadingPlate {
    	display:block;
    	width:250px;
    	height:250px;
    }
    
    .postPlate {
    	overflow:hidden; /* obey float, do not wrap under */
    	padding:1.5em;
    }
    
    .more {
    	float:right;
    	padding:0.5em 1em;
    	text-decoration:none;
    	background:#000;
    	color:#FFF;
    }
    
    #portfolio {
    	color:#FFF;
    }
    
    #portfolio > div:nth-child(3n+1) {
    	background:#00F;
    }
    
    #portfolio > div:nth-child(3n+2) {
    	background:#080;
    }
    
    #portfolio > div:nth-child(3n+0) {
    	background:#C00;
    }
    (Skipping the webfont stuff for now)

    Display:flex to the rescue. Doesn't work right in legacy IE, OH WELL.

    I put a live demo of that here:

    https://cutcodedown.com/for_others/ninjanafi

    Is that roughly what you're trying to do? I kind of had to guess since I couldn't tell if those colourations were intentional or simply placeholders so you could see what's going on. I also didn't get as far as trying to make it responsive / mobile friendly since you'd want to kill off that table behavior on the menu at minimum... probably change the plates to being regular plates instead of leading.
    “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
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, ****. Well that was a lot. Um, to start- ouch. But thanks for all your tips and cleaned up code. The colors were just meant to help me figure out what could be causing the white space. I'll tinker around with this and see if I can get it to what I need exactly - thanks a lot!


 

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
  •