• 0

Need help with some CSS alignment

Asked by Mohammad_Khalid_Hussain,

 Share

Question

Collaborator

Mohammad_Khalid_Hussain

Posted
Posted

Hi there guys,

I wanted to create a simple page interface as an offline quiz interface for an event. What I want is for the choices to appear side by side and not one after another like in a list, so overall, it would resemble the Windows logo. Attached are the codes I've typed so far:

HTML:

<!DOCTYPE html>
<html>

<!--This was created by Khalid Hussain-->


<head>
	<title>Quiz System</title>
	<link rel="stylesheet" href="css/design.css"/>
</head>


<body>
	<h1>Heroes: Grand Quiz</h1>
	<h2>Question</h2>

	<div id="question">
	A really really long and tough question goes here ?
	</div>


	<div id="choices">

		<div id="choice1">
		Option 1
		</div>

		<div id="choice2">
		Option 2
		</div>

		<div id="choice3">
		Option 3
		</div>

		<div id="choice4">
		Option 4
		</div>

	</div>


</body>

</html>

CSS:

/*@ import 'reset.css';*/

/*Khalid Hussain's first ever CSS written from scratch for an actual website.*/
/*This is probably not the best CSS you'll ever see.*/

h1
{
	font-size: 35px;
	margin-bottom: 0px;
}

h2
{
	font-size: 30px;
	margin-top: 0px;
	margin-bottom: 0px;
}

body
{
	width: 700px;
	margin: auto;
	text-align: center;
	font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif";
	color: white;
	background-color: black;
}

body #question
{
	font-size: 20px;
	padding: 20px;
	margin-top: 0px;
}

body #choices
{
	color: white;
	width: 700px;
	margin: auto;
}


body #choice1
{
	margin-left: 0px;
	width: 250px;
	padding: 20px 20px;
	background: blue;
	margin-bottom: 15px;
	border-radius: 20px;
}

body #choice2
{
	width: 250px;
	padding: 20px 20px;
	background: red;
	margin-bottom: 15px;
	border-radius: 20px;
}

body #choice3
{
	width: 250px;
	padding: 20px 20px;
	background: blue;
	margin-bottom: 15px;
	border-radius: 20px;
}

body #choice4
{
	width: 250px;
	padding: 20px 20px;
	background: blue;
	border-radius: 20px;
}

Any help or positive criticism is highly appreciated. Thanks.

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
Grand Master

Tomoko

Posted
Posted

I'm still learning CSS so there is probably a better way, but this seems to work:


/*@ import 'reset.css';*/
/*Khalid Hussain's first ever CSS written from scratch for an actual website.*/
/*This is probably not the best CSS you'll ever see.*/
h1
{
		font-size: 35px;
		margin-bottom: 0px;
}
h2
{
		font-size: 30px;
		margin-top: 0px;
		margin-bottom: 0px;
}
body
{
		width: 700px;
		margin: auto;
		text-align: center;
		font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif";
		color: white;
		background-color: black;
}
body #question
{
		font-size: 20px;
		padding: 20px;
		margin-top: 0px;
}
body #choices
{
		color: white;
		width: 700px;
		margin: auto;
}

body #choice1
{
		float: left;
		margin-left: 0px;
		width: 250px;
		padding: 20px 20px;
		background: blue;
		margin-bottom: 15px;
		border-radius: 20px;
}
body #choice2
{	  
		float: right;
		width: 250px;
		padding: 20px 20px;
		background: red;
		margin-bottom: 15px;
		border-radius: 20px;
}
body #choice3
{
		float: left;
		width: 250px;
		padding: 20px 20px;
		background: blue;
		margin-bottom: 15px;
		border-radius: 20px;
}
body #choice4
{
		float: right;
		width: 250px;
		padding: 20px 20px;
		background: blue;
		border-radius: 20px;
}
[/CODE]

  • Mohammad_Khalid_Hussain
  • Like 1
Link to comment
Share on other sites
  • 0
Collaborator

Mohammad_Khalid_Hussain

Posted
  • Author
Posted

Thanks a lot. That seemed to do the trick!

Although I'm not exactly sure if it's the professional way to do it. :)

Link to comment
Share on other sites
  • 0
Collaborator

Mohammad_Khalid_Hussain

Posted
  • Author
Posted

Update: I added some fancy buttons for the choices from CSS-Tricks and it messed up the arrangement. Anyway to resolve this, I already tried the float method though?

New code:

/*@ import 'reset.css';

Khalid Hussain's first ever CSS written from scratch for an actual website.*/
/*This is probably not the best CSS you'll ever see.*/

h1
{
    font-size: 35px;
    margin-bottom: 0px;
}

h2
{
    font-size: 30px;
    margin-top: 0px;
    margin-bottom: 20px;
}

body
{
    width: 700px;
    margin: auto;
    text-align: center;
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif";
    color: white;
    background-color: black;
}

body #question
{
    font-size: 20px;
    padding: 20px;
    margin-top: 0px;
}

body #choices
{
    color: white;
    width: 900px;
    height: 500px;
    margin: auto;
    margin-top: 50px;
    background: yellow;
}

body #choice1
{    
    background: #d11717;
    border: 2px solid #eee;
    height: 50px;
    width: 200px;
    /*margin: 0px 0 0 0px;
    overflow: hidden;
    display: block;*/
    text-align: center;
    line-height: 38px;

    /*Rounded Corners*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    /*Gradient*/
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

    /*Shadow*/
    -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

    /*Transition*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    transition: All 0.5s ease;
}

body #choice2
{
    float: right;
    background: #d11717;
    border: 2px solid #eee;
    height: 50px;
    width: 200px;
    /*margin: 0px 0 0 0px;
    overflow: hidden;
    /*display: block;*/
    text-align: center;
    line-height: 38px;

    /*Rounded Corners*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    /*Gradient*/
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

    /*Shadow*/
    -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

    /*Transition*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    transition: All 0.5s ease;
}

body #choice3
{
    float: left;
    background: #d11717;
    border: 2px solid #eee;
    height: 50px;
    width: 200px;
    margin: 50px 0 0 50px;
    overflow: hidden;
    display: block;
    text-align: center;
    line-height: 38px;

    /*Rounded Corners*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    /*Gradient*/
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

    /*Shadow*/
    -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

    /*Transition*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    transition: All 0.5s ease;
}

body #choice4
{
    float: right;
    background: #d11717;
    border: 2px solid #eee;
    height: 50px;
    width: 200px;
    margin: 50px 0 0 50px;
    overflow: hidden;
    display: block;
    text-align: center;
    line-height: 38px;

    /*Rounded Corners*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    /*Gradient*/
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

    /*Shadow*/
    -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

    /*Transition*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    transition: All 0.5s ease;
}

body #choice1:hover
{
  background-color: #ff3434;
}

body #choice2:hover
{
  background-color: #ff3434;
}

body #choice3:hover
{
  background-color: #ff3434;
}

body #choice4:hover
{
  background-color: #ff3434;
}

Link to comment
Share on other sites
  • 0
Mentor

Guth

Posted
Posted

I'm by no means a CSS expert but what you did when you copy pasted those buttons was remove the "float" properties from the choice's div's.

Also the first way isnt the way I would do them, I would float them all LEFT and use a div inbetween the two with the css property clear:both

this gives you the two seperate lines you needed.

If you change the width of those buttons, or the borders, you need to change the width of #choicesInner to add up to two buttons plus their borders (in this case 408px) its the only way I could get them to centre as for margin: 0 auto; to work you need a width defined.

anyway, heres you'r html and CSS


<!DOCTYPE html>
<html>
<!--This was created by Khalid Hussain-->

<head>
	    <title>Quiz System</title>
	    <link rel="stylesheet" href="css/design.css"/>
</head>

<body>
	    <h1>Heroes: Grand Quiz</h1>
	    <h2>Question</h2>

	    <div id="question">
	    A really really long and tough question goes here ?
	    </div>


	    <div id="choices">
		 <div id="choicesInner">
			    <div id="choice1">
			    Option 1
			    </div>

			    <div id="choice2">
			    Option 2
			    </div>

		  <div id="clear">
			    </div>

			    <div id="choice3">
			    Option 3
			    </div>

			    <div id="choice4">
			    Option 4
			    </div>
		 </div>
	    </div>


</body>
</html>
[/CODE]

CSS:

[CODE]
/*@ import 'reset.css';
Khalid Hussain's first ever CSS written from scratch for an actual website.*/
/*This is probably not the best CSS you'll ever see.*/
h1
{
font-size: 35px;
margin-bottom: 0px;
}
h2
{
font-size: 30px;
margin-top: 0px;
margin-bottom: 20px;
}
body
{
width: 700px;
margin: 0 auto;
text-align: center;
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif";
color: white;
background-color: black;
}
#question
{
font-size: 20px;
padding: 20px;
margin-top: 0px;
}
#choices
{
color: white;
height: 500px;
margin:0 auto;
background: yellow;
width: 700px;
}
#choicesInner{
margin: 0 auto;
width: 408px;;
}
#choice1
{
float: left;
background: #d11717;
border: 2px solid #eee;
height: 50px;
width: 200px;
text-align: center;
line-height: 38px;

/*Rounded Corners*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

/*Shadow*/
-webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
#choice2
{
float: left;
background: #d11717;
border: 2px solid #eee;
height: 50px;
width: 200px;
text-align: center;
line-height: 38px;

/*Rounded Corners*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

/*Shadow*/
-webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
#choice3
{ float: left;
background: #d11717;
border: 2px solid #eee;
height: 50px;
width: 200px;
overflow: hidden;
display: block;
text-align: center;
line-height: 38px;

/*Rounded Corners*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

/*Shadow*/
-webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
#choice4
{
float: left;
background: #d11717;
border: 2px solid #eee;
height: 50px;
width: 200px;
overflow: hidden;
display: block;
text-align: center;
line-height: 38px;

/*Rounded Corners*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

/*Shadow*/
-webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
#choice1:hover
{
background-color: #ff3434;
}
#choice2:hover
{
background-color: #ff3434;
}
#choice3:hover
{
background-color: #ff3434;
}
#choice4:hover
{
background-color: #ff3434;
}
#clear {
clear: both;
}
[/CODE]

ps. also removed the "body" from your CSS selectors as it is not needed and looked untidy.

  • Stokkolm and Tomoko
  • Like 2
Link to comment
Share on other sites
  • 0
Collaborator

Mohammad_Khalid_Hussain

Posted
  • Author
Posted

Thanks a lot guys for all the help. Just one more small thing. Let's say I have text which is longer than the buttons' width, it has text wrapping but the distance between the first and second line is pretty far. Any idea how to solve this?

Link to comment
Share on other sites
  • 0
Neowinian

haz-gb

Posted
Posted

Thanks a lot guys for all the help. Just one more small thing. Let's say I have text which is longer than the buttons' width, it has text wrapping but the distance between the first and second line is pretty far. Any idea how to solve this?

Change the line-height.

Also, to make your markup more professional think about coding semantically. E.g. Your options could be in an unordered list which would make more sense.

Might want to show us your markup in a jsfiddle just so we don't have to make the files and run it ourselves. http://jsfiddle.net/

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing