LinuxQuestions.org
Welcome to the most active Linux Forum on the web.
Home Forums Tutorials Articles Register
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
Reload this Page [SOLVED] HTML - CSS - Removing Whitespace
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
Page 2 of 2 1 2
  Search this Thread
Old 11-01-2016, 09:25 AM   #16
killingthemonkey
Member
 
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 259

Original Poster
Rep: Reputation: 24

grail,
You are exactly right.

The change I made was changing the .box class from:
Code:
.box {
            width: 50px;
            height: 50px;
            display: inline-block;
            padding: 0;
            margin: 0;
            border: collapse;
            float: left;
            font-size: 12;
            column-width: 0;
            z-index: -1;
        }
to:
Code:
.box {
            width: 50px;
            height: 50px;
            padding: 0;
            margin: 0;
            float: left;
        }
That worked for the first row. My first issue is that I don't know why. I tell you, I had it that way to begin with before I ended up where I started the thread.

Now, to look at astogeek's code and see if I can solve problem two and mark the thread as solved, and go find my next problem.

Quote:
Originally Posted by grail View Post
Ultimately the question has changed seeing as you solved your original problem, however, you have not advised what it was you changed that made the difference? Remember, others will find
your question and would like to know what changed without having to go through the code and miss the subtlety, especially when you have now changed the code to perform an additional task (like more rows)
 
Old 11-01-2016, 10:20 AM   #17
killingthemonkey
Member
 
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 259

Original Poster
Rep: Reputation: 24
Maestro, drum roll, please.

Aaaaaannnnnd, done.

The true underlying issue is that I don't fully understand the concepts of CSS yet. That is fixable, but is going to take time, and I expect patience from the lot of you.

Thanks again, for the help.

This is where I ended up.

Code:
<!--<!DOCTYPE html>-->
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <title>div test</title>
    <style>
        body {
            background-color: #AAAAAA;
        }
        
        .box {
            width: 50px;
            height: 50px;
            padding: 0;
            margin: 0;
            float: left;
        }
        
        .blackSquare {
            background: black;
        }
        
        .whiteSquare {
            background: white;
        }
        .newrow {
        	clear: both;
        }
        
    </style>
</head>

<body>
    <div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div>
	<div class="box whiteSquare newrow"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div> <div class="box whiteSquare "></div><div class="box blackSquare"></div>
    <div class="box blackSquare newrow"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div>
	<div class="box whiteSquare newrow"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div> <div class="box whiteSquare "></div><div class="box blackSquare"></div>
    <div class="box blackSquare newrow"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div>
	<div class="box whiteSquare newrow"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div> <div class="box whiteSquare "></div><div class="box blackSquare"></div>
    <div class="box blackSquare newrow"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div>
    	<div class="box whiteSquare newrow"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div> <div class="box whiteSquare "></div><div class="box blackSquare"></div>
</body>

</html>
I have attached the final result.
Attached Thumbnails
Click image for larger version Name: Screen Shot 2016-11-01 at 11.14.55 AM.png Views: 9 Size: 18.5 KB ID: 23411  
 
Old 11-01-2016, 01:45 PM   #18
keefaz
LQ Guru
 
Registered: Mar 2004
Distribution: Slackware
Posts: 6,552

Rep: Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872
Another way, using li's and nth-child() Selector
http://www.w3schools.com/cssref/sel_nth-child.asp

Edit: of course, the easiest way would be to use table, if religion permits

Code:
<!--<!DOCTYPE html>-->
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <title>div test</title>
    <style>
        body {
            background-color: #AAAAAA;
        }
        
        #board {
		padding:0;
		margin:0;
        }
        
        #board ul {
		list-style:none;
		clear:left;
		padding:0;
		margin:0;
        }
        
        #board ul li {
            width: 50px;
            height: 50px;
            float: left;
            background: black;
        }
        
        #board ul:nth-child(odd) li:nth-child(even),
        #board ul:nth-child(even) li:nth-child(odd)
        {
		background: white;
        }
        
    </style>
</head>

<body>
    <div id="board">
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
    </div>
</body>

</html>
Last edited by keefaz; 11-01-2016 at 02:47 PM.
 
Old 11-01-2016, 09:09 PM   #19
grail
LQ Guru
 
Registered: Sep 2009
Location: Perth
Distribution: Manjaro
Posts: 10,008

Rep: Reputation: 3193Reputation: 3193Reputation: 3193Reputation: 3193Reputation: 3193Reputation: 3193Reputation: 3193Reputation: 3193Reputation: 3193Reputation: 3193Reputation: 3193
I found this interesting take :- http://cssdeck.com/labs/css-chess-board
 
Old 11-02-2016, 08:29 AM   #20
keefaz
LQ Guru
 
Registered: Mar 2004
Distribution: Slackware
Posts: 6,552

Rep: Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872
Using floating p's and br's, it is possible to switch background color without taking care of the even/odd rows change
Code:
<!--<!DOCTYPE html>-->
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <title>Checkboard test</title>
    <style>
        body {
            background-color: #AAAAAA;
        }
        
        #board {
		padding:0;
		margin:0;
        }
        
        #board p {
            width: 50px;
            height: 50px;
            float: left;
            background: black;
            margin:0;
        }
        
        #board br {
		clear: left;
        }
        
        #board :nth-child(even) {
		background: white;
        }
    </style>
</head>

<body>
    <div id="board">
       <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><br>
       <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><br>
       <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><br>
       <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><br>
       <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><br>
       <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><br>
       <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><br>
       <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><br>
    </div>
</body>

</html>
 
Old 11-02-2016, 08:06 PM   #21
killingthemonkey
Member
 
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 259

Original Poster
Rep: Reputation: 24
See, this is what I'm talking about. I don't yet know my way around. I'm going to, however.

---------------------

Quote:
Originally Posted by keefaz View Post
Another way, using li's and nth-child() Selector
http://www.w3schools.com/cssref/sel_nth-child.asp

Edit: of course, the easiest way would be to use table, if religion permits

Code:
<!--<!DOCTYPE html>-->
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <title>div test</title>
    <style>
        body {
            background-color: #AAAAAA;
        }
        
        #board {
		padding:0;
		margin:0;
        }
        
        #board ul {
		list-style:none;
		clear:left;
		padding:0;
		margin:0;
        }
        
        #board ul li {
            width: 50px;
            height: 50px;
            float: left;
            background: black;
        }
        
        #board ul:nth-child(odd) li:nth-child(even),
        #board ul:nth-child(even) li:nth-child(odd)
        {
		background: white;
        }
        
    </style>
</head>

<body>
    <div id="board">
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
       <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
    </div>
</body>

</html>
------------------

Quote:
Originally Posted by grail View Post
I found this interesting take :- http://cssdeck.com/labs/css-chess-board
 
  


Reply
Page 2 of 2 1 2



Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
bash: removing whitespace filled element from array ezekieldas Linux - Newbie 4 09-30-2013 08:43 PM
[SOLVED] sed regex and removing 'whitespace' uncle-c Linux - Newbie 5 04-23-2012 08:25 AM
CSS - Is there a way to put several lines of HTML into one line using CSS? Chronothread Programming 12 01-05-2011 06:06 AM
HTML/CSS/JS: Problem with <p> not having an absolute position with CSS. RHLinuxGUY Programming 7 03-03-2007 12:21 AM
BASH: Removing ALL whitespace from variable eur0dad Programming 1 09-07-2006 10:25 AM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 09:53 PM.

Contact Us - Advertising Info - Rules - Privacy - LQ Merchandise - Donations - Contributing Member - LQ Sitemap -
Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration