Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS LAYOUT CANT FIGURE OUT

Posted on 2014-09-02
23
Medium Priority
?
237 Views
Last Modified: 2014-09-04
Hello there,

I have tried figuring out this custom CSS layout and cannot.

Attached is the image that I want the layout to simulate.

4 equal quadrants that are centered so that I may populate content into them,
css.jpg
0
Comment
Question by:desiredforsome
  • 11
  • 7
  • 5
23 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40298847
At it's most basic level, this is it:

<!doctype HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
		-ms-box-sizing:border-box;
		 -o-box-sizing:border-box; 
			box-sizing:border-box;
		}
		.clearfix {
		  *zoom: 1;
		}

		.clearfix:before,
		.clearfix:after {
		  display: table;
		  line-height: 0;
		  content: "";
		}

		.clearfix:after {
		  clear: both;
		}
		.wrapper{
			max-width: 1024px;
			margin:0 auto;
		}
		.header{
			border:1px solid red;
		}
		.content{
			border:1px solid blue;
		}
		.content > div{
			width:50%;
			float:left;
			border:1px solid black;
		}
		.footer{
			border:1px solid red;

		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="header">
			my header
		</div>
		<div class="content clearfix">
			<div>one</div>
			<div>two</div>
			<div>three</div>
			<div>four</div>
		</div>
		<div class="footer">
			my footer
		</div>
	</div>
	
</body>
</html>

Open in new window

0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40298849
This is a responsive version.  Full sample http://jsbin.com/rapato/1 with edit http://jsbin.com/rapato/1/edit

Notice when you move your browser from full screen to narrow.  That is the bootstrap.  Great article here http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/A_15179-Bootstrap-Masterclass-Part-1.html

http://getbootstrap.com



<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <style>
    div{border:solid;}
  </style>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container header">
  I am header
  
  </div>
  <div class="container">
    <div class="row">
        <div class="col-sm-6">Left</div>
        <div class="col-sm-6">right</div>
    </div>
    <div class="row">
        <div class="col-sm-6">Left</div>
        <div class="col-sm-6">right</div>
    </div>
  </div>
  <div class="container footer">
  I am footer
  
  </div>
</body>
</html>

Open in new window

0
 

Author Comment

by:desiredforsome
ID: 40298971
Is there a way to set these boxes to a larger size? Like make the quadrants larger?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40299045
yes there is. normally, the height of the box would depend on the content that is in it. but you could set a min-height in pixels, or just a plain fixed height. if you want the box heights to depend on the window height, then you would have to do some shenannigans with the css, or use javascript.

if you describe your requirements more, i'm we can come up with some solutions. and rember to take into account different screensizes
0
 

Author Comment

by:desiredforsome
ID: 40299064
what i am looking to do is put content in these individual boxes. One of them being an image box that changes the image based on a sql query. I am currently seeing some issues with centering the image box in one of the squares more primary the 2nd square in the css. I have the image box in the <div> tag however when loading it centers the image across the entire web page.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40299069
If you use the bootstrap code, all the box's in the same row will be the same height. Or at least the row div.   But you can use min-height.   http://jsbin.com/rapato/3/edit

The option I am supplying is based on a modern responsive layout.  If you want everything to be the same, you just set the height and make the site a static width.  Because of the widespread use of multiple devices and viewports (about 1000 different viewport options now), making a fixed width website is not the best way to go.

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <style>
    div{border:solid;}
  </style>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container header">
  I am header
  
  </div>
  <div class="container">
    <div class="row">
      <div class="col-sm-6">Left<P>stuff</p><P>stuff</p></div>
        <div class="col-sm-6">right</div>
    </div>
    <div class="row">
        <div class="col-sm-6">Left</div>
        <div class="col-sm-6">right</div>
    </div>
  </div>
  <div class="container footer">
  I am header
  
  </div>
</body>
</html>

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40299091
please post a link to your page
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40299138
>please post a link to your page

Great idea.  However, at this point, let's stay away from colored squares as that is not realistic.  Too many times people have tried to chase after box border lining up at the bottom for instance when that is not realistic.  As long as we are helping with an actual layout this is a good idea.

Or at least a jpg/pdf of your actual layout.    Do you have plans on this being responsive or fixed?
0
 

Author Comment

by:desiredforsome
ID: 40299180
The site is currently hosted on my local PC it also contains some confidential information at the moment.

I have screen shot of what I am working on and what I would liek to be displayed.

Website Photo
So the picture box not being centered is my current headache. After wards I will reward.
0
 

Author Comment

by:desiredforsome
ID: 40299190
Here is the code for the <div>

<div>Where is your loan currently?<br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <asp:Image ID="Image2" runat="server" />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40299208
we have no way of knowing what your asp application is producing when it comes to that image. Also, using all those brs to position anything is very bad form.

what you need to do so we can help you, is this:

go into devtools in Chrome, and copy and paste the generated html. You can then remove any sensitive data, and post the html here, or on some public server.
0
 

Author Comment

by:desiredforsome
ID: 40299219
Here is the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title><meta charset="UTF-8" />
	
	<style>
		*{
			margin:0;
			padding:0;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
		-ms-box-sizing:border-box;
		 -o-box-sizing:border-box; 
			box-sizing:border-box;
		}
		.clearfix {
		  *zoom: 1;
		}

		.clearfix:before,
		.clearfix:after {
		  display: table;
		  line-height: 0;
		  content: "";
		}

		.clearfix:after {
		  clear: both;
		}
		.wrapper{
			max-width: 1024px;
			margin:0 auto;
		}
		.header{
			border:1px ;
		}
		.content{
			border:1px solid blue;
		}
		.content > div{
			width:50%;
			float:left;
			border:1px solid black;
		}
		.footer{
			border:1px;
			color: Black;
			border: solid;
						

		}
	    .style1
        {
            border-style: solid;
            border-color: inherit;
            border-width: medium;
            color: Black;
            text-align: center;
        }
        .style2
        {
            width: 137px;
            height: 114px;
        }
	</style>
</head>
<body>
    <form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQyNDE2ODQyNg9kFgICAw9kFggCAw8PFgIeBFRleHQFJEJvcnJvd2VyIE5hbWU6IENvcmV5IFBoaWxsaXAgR2FzaGxpbmRkAgUPDxYCHwAFHUxvYW4gT2ZmaWNlcjogRGF2aWQgSC4gTW9yZ2FuZGQCBw8PFgIfAAUXTG9hbiBUeXBlOiBDb252ZW50aW9uYWxkZAIJDw8WAh8ABRBMb2FuIFByb2Nlc3NvcjogZGRkNMtQrtK31dEac56DD9P/LZuVud5bZURKT3Lrk2RsL2A=" />
</div>

   <div class="wrapper">
		<div class="header">
			<img id="Image1" src="Images/MF%20Logo%20Phone.jpg" style="height:313px;width:1077px;" />
		</div>
		<div class="content clearfix">
			<div>Your Loan Information:<br />
                <br />
                <span id="Label1">Borrower Name: John Smith</span>
                <br />
                <span id="Label2">Loan Officer: Jingle Jane</span>
                <br />
                <span id="Label3">Loan Type: Conventional</span>
                <br />
                <span id="Label4">Loan Processor: </span>
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
			<div>Where is your loan currently?<br />
                <img class="style2" src="Images/1409696643_meanicons_9-512.png" /><br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
			<div>Conversation Log:<br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
			<div>Upload Documents:<br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
		</div>
		<div class="style1">
			123 Main St<br />
            
            <br />
            
            <br />
            
            <br />
            </div>
	</div>
	
    </form>
	
</body>
</html>

Open in new window

0
 

Author Comment

by:desiredforsome
ID: 40299230
I think part of the issue has to do with the CSS should be set in default size for each quadrant which I am trying to figure out as well.

Just looking to center any item that I put in these boxes centered to the box iteself.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40299250
What you want to do in this case is recreate the site with sample data that can be public.  You can post to your own site or if you like use a playground like jsbin or jsfiddle  http://jsbin.com/hunof/1/

Your header image is too wide.  You have it set in your code as 1077px wide.
<img id="Image1" src="Images/MF%20Logo%20Phone.jpg" style="height:313px;width:1077px;" />

Open in new window

You will want to use a photo editing software to crop the image or shrink or some combination to get to the proper width.

Also, it is preferred to use external css over inline styles (except for email) as it can interfere with other options such as js code.  Very minor, state the width X height.
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 40299261
centering elements vertically is a huge PIA if you are only using css. Though can be done, it's not ususally worth the hassle. Why do they need to be centered?

avoid using style names like .style1, .style2, and try not to put any styles in-line like you did in the header image. I've made some adjustments for you, but I didn't "correct" everything.

Try this on for size:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title><meta charset="UTF-8" />
	
	<style>
		*{
			margin:0;
			padding:0;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
		-ms-box-sizing:border-box;
		 -o-box-sizing:border-box; 
			box-sizing:border-box;
		}
		.clearfix {
		  *zoom: 1;
		}

		.clearfix:before,
		.clearfix:after {
		  display: table;
		  line-height: 0;
		  content: "";
		}

		.clearfix:after {
		  clear: both;
		}
		.wrapper{
			max-width: 1024px;
			margin:0 auto;
		}
		.header{
			border:1px ;
		}
		.content{
			border:1px solid blue;
		}
		.content > div{
			width:50%;
			float:left;
			border:1px solid black;
            min-height: 300px;
            text-align: center;
            padding:20px;
		}
		.footer{
			border:1px;
			color: Black;
			border: solid;
						

		}
	    .style1
        {
            border-style: solid;
            border-color: inherit;
            border-width: medium;
            color: Black;
            text-align: center;
        }
        .style2
        {
            width: 137px;
            height: 114px;
            
        }
	</style>
</head>
<body>
    <form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQyNDE2ODQyNg9kFgICAw9kFggCAw8PFgIeBFRleHQFJEJvcnJvd2VyIE5hbWU6IENvcmV5IFBoaWxsaXAgR2FzaGxpbmRkAgUPDxYCHwAFHUxvYW4gT2ZmaWNlcjogRGF2aWQgSC4gTW9yZ2FuZGQCBw8PFgIfAAUXTG9hbiBUeXBlOiBDb252ZW50aW9uYWxkZAIJDw8WAh8ABRBMb2FuIFByb2Nlc3NvcjogZGRkNMtQrtK31dEac56DD9P/LZuVud5bZURKT3Lrk2RsL2A=" />
</div>

   <div class="wrapper">
		<div class="header">
			<img id="Image1" src="Images/MF%20Logo%20Phone.jpg" style="height:313px;width:1077px;" />
		</div>
		<div class="content clearfix">
			<div>Your Loan Information:<br />
                <br />
                <span id="Label1">Borrower Name: John Smith</span>
                <br />
                <span id="Label2">Loan Officer: Jingle Jane</span>
                <br />
                <span id="Label3">Loan Type: Conventional</span>
                <br />
                <span id="Label4">Loan Processor: </span>
               
            </div>
			<div>Where is your loan currently?<br />
                <img class="style2" src="Images/1409696643_meanicons_9-512.png" /><br />
              
            </div>
			<div>Conversation Log:<br />
               
            </div>
			<div>Upload Documents:<br />
              
            </div>
		</div>
		<div class="style1">
			123 Main St<br />
            
            <br />
            
            <br />
            
            <br />
            </div>
	</div>
	
    </form>
	
</body>
</html>

Open in new window

0
 

Author Comment

by:desiredforsome
ID: 40299275
I plan on re-building this with the proper ways once I have the base completed. I am primarily a c# programmer and not a web developer but work calls for extra stuff sometimes.

The reason for the elements to be centered within the dividers is for presentation to the client in which this site will be used for eventually.

This picture that is in there now would change as it reads the database. Trying to get everything pretty and centered.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40299282
one more thing, change your doctype to
<!doctype HTML>
   <html>
   ...

 See the first example I posted.

As far as a separate stylesheet file, it should go without saying. You would only put everything in one file for the sake of convenience when giving an example.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40299292
Did you look at the edited code I posted? I do not believe the elements need to be centered vertically to make them "prettier". It does not add any value to either the functionality, the design, or the usability.
0
 

Author Comment

by:desiredforsome
ID: 40301763
I figured it out for tha tpart. Now the final thing I noticed before i award points is that the background color I cant change without it changing the background color in all the quadrants I only want it to change the background that is outside of the quadrants.

So change background color for all css excluding header, footer, content areas.

Is it something small I am missing?
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40301840
The background is done via the body and "behind the quadrants" should be the background of your container.  Then any individual div can be whatever you want.
0
 

Author Comment

by:desiredforsome
ID: 40304715
I tried that but it tursnt he entire page blue with the quadrants as well i want the quadrants to stay white. but the background for everything else to be blue
0
 

Author Comment

by:desiredforsome
ID: 40304719
nvermind
0
 

Author Closing Comment

by:desiredforsome
ID: 40304720
Many thanks to you sir.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question