1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to center the website and and float list inside left sidebar to the right

Discussion in 'HTML & Website Design' started by ketting00, Sep 21, 2019.

  1. #1
    Hi guys,

    I did not code for three years and html isn't my thing and when I come back it's kind of I have to start over. So bear with me if I ask stupid questions or too much.

    What I'm trying to achieve is to center the whole web site and move the list on the left sidebar to the right side. The result is as ugly as the attached image.

    Here's what I'm attempting so far:
    
    <!doctype html>
    <html><head>
        <title>mysite</title>
     
        <meta charset="utf-8" />
        <link rel="canonical" href="" />
     
        <link rel="stylesheet" type="text/css" href="/mysite/css/styles.css" media="screen" />
     
        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     
    </head><body>
        <div class="wrapper">
            <ul id="left-sidebar">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <div id="right-box">
                <div id="content-container">
                    <nav>
                        <h1 class="visuallyhidden">MySite</h1>
                        <h2>Home</h2>
                        <div id="menu"></div>
                    </nav>
                    <div>
                        <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                        </ul>
                    </div>
                </div>
                <div id="right-sidebar">
                    <input type="text" placeholder="Search.." />
                </div>
            </div>
        </div>
        <script src="./mysite/js/main.js"></script>
    </body></html>
    
    Code (markup):
    The CSS one:
    
    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }
    html, body {height: 100%; margin: 0px;}
    /* Left Sidebar */
    #left-sidebar {
        margin: 0;
        padding: 0 0.5em 0 0;
        width: 4em;
        float: left;
    }
    #left-sidebar ul li {float: right;}
    /* Content Container */
    #content-container {
        margin: 0;
        padding: 0.5em;
        float: left;
        width: 50em;
        border-left: 0.08em solid #ccddee;
        border-right: 0.08em solid #ccddee;
    }
    /* Right Sidebar */
    #right-box {
        margin: 0;
        padding: 0 0 0 0.5em;
        height: 100%;
        float: left;
    }
    #right-sidebar {
        padding-left: 2em;
        float: left;
    }
    
    ul {list-style: none;}
    .wrapper {
        margin: 0 auto;
        padding: 0;
    }
    .visuallyhidden {display: none;}
    
    Code (markup):
    Thanks for your help in advance.
     

    Attached Files:

    Solved! View solution.
    ketting00, Sep 21, 2019 IP
  2. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #2
    And one more thing please, how to make the middle column full height.

    Thank you,
     
    ketting00, Sep 21, 2019 IP
  3. #3
    Well, your HTML has some issues, it's hard to say what the proper code should be given I'm not sure where it is you want things to go...

    But for example, what makes "home" the start of the first major subsection of the page? Aka a H2's meaning. How can you have content preceding an H1 -- the heading that everything on every page of the site should be a subsection of? What makes an H1 and H2 "navigation"? (Not that the dumbass NAV tag should ever have been added to HTML in the first place!)... and dont' forget that placeholder is NOT a label! No matter how many artsy fartsy types piss on accessibility from orbit doing that... and your content column should be fluid with the outer wrapper semi-fluid. Fixed layout -- even in EM -- is an epic /FAIL/ at web development.

    Oh, and your charset meta should be BEFORE any other content-bearing elements, like TITLE. It's why I make it the first tag immediately after <head> in my code.

    Now, thankfully most of what you're asking for is EASIER now thanks to something called "flex". Assuming that first UL should actually be AFTER the heading that opens the site, and that "home" is part of the UL that contains your main menu...

    
    <!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="columns.screen.css"
    	media="screen,projection,tv"
    >
    <title>mysite</title>
    </head><body>
    
    <div id="top">
    
    	<div id="content">
    		<h1>Mysite</h1>
    		<ul id="mainMenu">
    			<li><a href="/">Home</a></li>
    			<li>2</li>
    			<li>3</li>
    			<li>4</li>
    			<li>5</li>
    		</ul>
    	<!-- #content --></div>
    	
    	<div id="firstExtras">
    		<ul id="secondaryMenu">
    				<li>1</li>
    				<li>2</li>
    				<li>3</li>
    				<li>4</li>
    				<li>5</li>
    		</ul>
    	<!-- #firstExtras --></div>
    	
    	<div id="secondExtras">
    		<form id="mainSearch">
    			<fieldset>
    				<label for="mainSearch_text">Search:</label>
    				<input type="text" name="q" id="mainSearch_text">
    				<button title="search">&#x1f50d;</button>
    			</fieldset>
    		</form>
    	<!-- #secondExtras --></div>
    	
    <!-- top --></div>
    
    </body></html>
    
    Code (markup):
    Again, guessing wildly since I don't know what's what there -- your placeholder content not being a realistic example of what the final content was, and all your classes/id's saying what you want things to look like, and not what they are! Hence the "div for nothing" to compensate for the possibility of the columns holding more content.

    Tip, if you're saying things like "right", "left", or "center" in your classes/Id's, you're doing it all wrong.

    For the CSS: (I'm adding a background to BODY so we can see what's going on)

    
    #top {
    	display:flex;
    	flex-direction:row;
    	min-height:100%;
    	max-width:68em;
    	margin:0 auto; /* center it */
    	background:#FFF;
    }
    
    #content {
    	flex:1 1 auto; /* grow, shrink, auto-size */
    	order:2; /* move to center */
    	border:solid #CDE;
    	border-width:0 0.08em;
    }
    
    #firstExtras {
    	flex:0 0 4em; /* don't grow, don't shrink, stay 4em wide */
    	order:1;
    }
    
    #secondExtras {
    	flex:0 1 auto; /* don't grow, shrink, auto-size, will be content width */
    	order:3;
    }
    
    Code (markup):
    Assuming a reset is in use of course. Flex takes all the headaches -- even that of proper source-order / logical document structure -- out of things. You can re-arrange the order, dynamically scale, and even properly do a min-height layout! The only drawback? Doesn't work in IE11/earlier.

    You know what, WHO CARES. Seriously, IE10/earlier users should be used to broken layouts by now. Oh noes, they get one column instead of the proper columnar design. OH WELL.

    Another good step would be to add a media query so that if the window gets too small for the content, we slip the two smaller side columns BELOW the content.

    
    @media (max-width:52em) {
    	#top {
    		flex-wrap:wrap;
    	}
    	#content {
    		order:0;
    		flex:1 0 100%; /* fill full width */
    		border-width:0 0 0.08em;
    	}
    	#secondExtras {
    		border-left:0.08em solid #CDE;
    	}
    }
    
    Code (markup):
    Using flex-wrap:wrap also means that when the window is too small for the 'extras' to fit next to each-other the layout will drop itself to a single column one!

    Live demo here:
    https://cutcodedown.com/for_others/ketting00/columns/

    Gave you a .txt of the HTML in there too just in case "view source" or "save as" is difficult (such as on touch interfaces).

    That about what you're trying to do?
     
    deathshadow, Sep 22, 2019 IP
  4. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #4
    Thank you @deathshadow. This is superb. You are an html ninja grand master. You've saved me tons of time. The next thing I'll come here for is seeking an advice on responsive layout. You've provided that all in one shot. Less code, did the job well. Superb, I love it.

    This is all I needed, the master scheme. I'll build things up from here.

    It's a typical plain three columns website which shrink and expand to fit all screens, no fancy two columns here multiple columns there kind of thing. The main space for content are typical the headline, images, excerpt, comments, etc. like most ordinary blog posts. It will be javascript-heavy as I build things up from node.js. This is my dream since 2008 and it's just possible recently.

    That's because I don't know how to do things the way you did it. I never know you can have the first div appears as the second column. All I know is things go from left to right and top to bottom.

    The reason I hide the H1 tag is to replace it with an awesome logo );

    This is my new knowledge.

    Thanks to you, I don't even know flex order exists.

    Yes, the content is fed up by javascript.

    Thanks in deed.

    I'll be studying these further.

    My website isn't going to work on IE. Only modern browsers.

    This is special bonus. Thanks so much.

    Ps. I have no idea that you can name a file like columns.screen.css.
     
    Last edited: Sep 22, 2019
    ketting00, Sep 22, 2019 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Either use gilder-levin to place a non-opaque image OVER the text, or slide the text off-screen with text-indent:-999em; Either approach will then let you apply that image from the stylesheet without screwing with the H1 itself in terms of flow. It becomes your image container.

    Regardless of what you're back-ending it with language-wise, I advise that design should ALWAYS start with content, or at least something that looks like your real content.

    You should read my article on progressive enhancement as it outlines the process with a working (though at this point dated) example.

    https://cutcodedown.com/article/progressive_enhancement

    The process is simple.

    1) Put your content or a facsimile of future content into a flat text editor and arrange it as if HTML, CSS, and JavaScript don't even exist.

    2) Mark up that content semantically, saying what things are and helping further establish your logical document structure. As this is the semantics stage, neutral tags like DIV and SPAN have ZERO business even being used.

    I also advise against EVER using the dumbass HTML 5 "structural" tags as they are a pointless redundancy that just creates code bloat. Basically the tags ARTICLE, ASIDE, HEADER, FOOTER, MAIN, NAV, and SECTION serve ZERO legitimate purpose other than the creators of HTML 5 never having grasped the point of semantic markup or how to use H1..H6 and HR properly. Just... don't use them, they're stupid and pointless.

    3) Apply CSS to bend the markup to your will creating the layouts, THIS is when you get to add your DIV, SPAN, classes and ID's as hooks for your presentation -- WITHOUT said hooks saying what things look like. If you do ANYTHING to say what things look like in the markup -- <style>, style="", or classes like "left", you're doing it all wrong. Hence why if you see code such as:

    
    <body>
        <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
          <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
          <nav class="my-2 my-md-0 mr-md-3">
            <a class="p-2 text-dark" href="#">Features</a>
            <a class="p-2 text-dark" href="#">Enterprise</a>
            <a class="p-2 text-dark" href="#">Support</a>
            <a class="p-2 text-dark" href="#">Pricing</a>
          </nav>
          <a class="btn btn-outline-primary" href="#">Sign up</a>
        </div>
    Code (markup):
    You are looking at 3i of the highest order. What's "3i"? Ignorance, incompetence, and ineptitude.

    Start with the legacy desktop layout FIRST, making the page semi-fluid (max width so long paragraphs aren't hard to follow), elastic (all measurements in EM where possible so it dynamically scales to user preference without zoom).

    Once that is complete narrow the window until it breaks, and use a media query (again in EM) to re-arrange the layout to fit. Lather, rinse, repeat.

    Some people will tell you "mobile first" and that's so utterly idiotic ... why idiotic? Because legacy desktop CANNOT be targeted by media queries for adjustment, so how do you take a mobile layout and adjust it to be desktop friendly? There are ZERO tools in HTML or CSS for doing that, so "mobile first' is just painting yourself into a corner at the start!

    4) Then only once you have a fully working page should you even CONSIDER enhancing the page with JavaScript. For normal accessible websites that are useful to users, if you can't make a fully usable page without client side JavaScript FIRST, you likely have not one lick of business adding JavaScript to it.

    This is where halfwitted trash like react and vue often drop the ball, though the systems themselves are often not so much at fault as the people who use them; unlike HTML/CSS frameworks like bootcrap or w3.css where it's painfully obvious the people who created them don't know enough HTML or CSS to tell others how to build websites! (see the snippet I included above!)

    All in all this stuff is SO simple, yet due to bad learning, web rot tutorials, and blindly copying other people's work there seems to be this overall trend towards making everything as complicated and painful to do as possible. THEN the fanboys of this dipshit trash have the unmitigated gall to call their 3i BS "easier" or "simpler', or worst of all "better for collaboration".

    When reality is the people defending, promoting -- and even those creating -- these "Frameworks" are flapping their arse-cheeks in the wind.
     
    Last edited: Sep 23, 2019
    deathshadow, Sep 23, 2019 IP
    ketting00 likes this.