How to give equal space to two elements? - html

I am creating online test application my problem is if options are in different length means alignment was not correct.for example
1.Test Question?
a).op12 b).op234
c).op145 d).op345
Here You can see b) and d) are not align proper i know this was simple question but i am stuck in this problem.how can i use css or anything else.
mycode is
<div style='padding-left:1em'>a).op12 b).op234</div><br/>
<div style='padding-left:1em'>c).op145 d).op345</div>
if i am using separate tag for each option means it display like
a)op12
b)op234
c)op145
d)op345
can any one give me the idea to solve this
Thanks in advance

I believe you should use Table instead of div
Question
<table width="300px" cellpadding="5" cellspacing="5">
<tr>
<td>a).op12</td><td>b).op234</td>
</tr>
<tr>
<td>a).op12</td><td>b).op234</td>
</tr>
</table>
DEMO

The trick is to use a wrapper div of same width for all options.
Use this code
<div class="opt-row"><span>a).op12</span> <span>b).op234</span></div>
<div class="opt-row"><span>c).op145</span> <span>d).op345</span></div>
& CSS:
.opt-row{padding-left:1em;}
.opt-row span{display:inline-block; width:100px;} /*Change this with accordingy */
Here is DEMO

i think you should use <ul> in this case, <li> can be easily managed with css according to your purpose.
here's an example: JSFiddle
i hope this will help you

As addition to Manwal'w advice:
If you need a list, Use list. Div is meaningless.
While using HTML - the HTML is the content, the css is for design, the js is for behavior.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bla!</title>
<style type='text/css'>
li { min-width:10em; list-style-type: lower-alpha;}
li.odd { float:left; }
</style>
</head>
<body>
<ol>
<li class='odd'>op12</li>
<li class='even'>op234</li>
<li class='odd'>op145</li>
<li class='even'>op345</li>
</ol>
</body>
</html>

Related

Resizing my page make items disappear

When the webpage become too small some part of it disappear but I would like to make it stay the way it's positioned but resize with the page no matter how small it becomes.
Here's the problem
Here's the code
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<img src="c.png" alt="llllll" width="33%" height="100%" />
<img src="n.png" alt="llllll" width="33%" height="100%" />
<img src="m.png" alt="llllll" width="33%" height="100%" />
</div>
</body>
Welcome to Stack Overflow!
First and foremost, Your basic HTML structure should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
And about Your main problem, try and use CSS to style your layout instead of assigning inline properties like width="33%" and others alike. Right now, your images are stretching because of the inlined properties which are not the same as a style applied to them.
By using these properties on your images, you are telling them to be 33% of their container, but images are not block elments so therefore, they need to be in a container, for example a div.
e.g.
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
I have made a JS Fiddle for you to try it yourself.
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
I have changed a few things here and there to show you an example of basic usage. Please feel free to ask what You dont understand.

Inline CSS code is not being read

Thank you so much everyone. As previously stated the problem was where I had the CSS code. I didn't have the dot/period prefixing ul and li originally, that was a desperate last-minute act. :-)
I do read W3S, StackO/f, HTMLDog, Tizag and all of the other great sites b4 asking questions. But you're stuck w/me now.
Another question. Should I open a New question? This question refers to the original block of code.
My line color doesn't change. But if I code each individual line, the color changes. I would like to know how to change the color in the li CSS block.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Why I love learning HTML - Part 2</TITLE>
</HEAD>
Colors
<BR>
My favorite colors are:
<BR>
<UL>
<LI><FONT SIZE=2 COLOR="red" >Navy</FONT>
<LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Olive</FONT>
<LI><FONT SIZE=2 COLOR="red" >Purple</FONT>
<LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Teal</FONT>
</UL
</BODY>
</HTML>
This is my 5th week of HTML&CSS class. The stack overflow website always pops up when I Google a question. So I joined and I have a question. My CSS code shows up on my web page as code. The UL and LI part of the code does not read the classes .ul and .li. I have looked at the code for a long time and cannot figure out what is wrong. Thanks for your help
<head>
<meta charset="utf-8" />
<title>Homepage</title>
<style type="text/css">
</style>
</head>
<body>
.ul {
margin:0;
padding:0;
color:#ff0000;
}
.li {
display:inline;
padding:0;
margin:0;
color:#000099;
}
<!-- Site navigation menu -->
<ul>
<li>Home page</li>
<li>Education and Experience</li>
<li>Publications and Committees</li>
<li>Links</li>
</ul>
<h1>can't find the errors</h1>
</body>
</html>
First of all, welcome to the world of HTML and CSS. I'll jump straight into things by saying that there are a couple of issues with the code you've posted up:
1. Putting your CSS in the right place
Your CSS code currently isn't placed within your <style type="text/css"> declaration at the top, it's placed within the document's body. This will output as text to the screen.
To fix this, simply move it all into that style element in your head:
<head>
<style type="text/css">
/* Styling goes here. */
</style>
</head>
(For rendering purposes, styling should never be declared outside of the document's head either.)
2. Fixing your selectors
Once you've fixed that, however, your selectors will still not target your elements. This is because you're prefixing your CSS selectors with a . (.ul and .li). A . prefixes the class selector.
To target your ul and li elements, you'd simply remove the .:
ul { ... }
li { ... }
3. Validating your HTML
On a side note, you need to pay attention to your closing HTML tags. Your closing </a> tags must be within your <li> tags. Change:
<li>...</li>
To:
<li>...</li>
you need to contain your CSS in
<style> </style>
Also, make sure you put it in the head where possible
Because CSS selector start with '.' is for class.
Use ul, li instead, and include ur css style in <style></style>.
That's because you put the CSS "code" as text in the HTLM instead of inside your empty <style> tag.
The correct way to do inline styling is to use the style attribute in your markup:
<ul style="margin:0; padding:0; color:#ff0000;">
The above is not however recommended because as the number of pages grow in your site, with lots of inline styling, maintenance becomes a nightmare.
What you are trying to do is embedded styling and it is not working because you need to have the styling directives inside the tags.
BTW it's always better idea to use ids. As things stand, this styling will be applied to every unordered list in your application which is often not what you want. If you gave the list an id, then you could reference it like this #myId {} and then the styling would be confined to that list.
Finally, the recommended practice is to use external style-sheets, using the HTML link tag:
<link rel="stylesheet" type="text/css" href="styles.css" />
Here is your original code with the embedded styling in the correct place:
<head>
<meta charset="utf-8" />
<title>Homepage</title>
<style type="text/css">
ul {
margin:0;
padding:0;
color:#ff0000;
}
ul li {
display:inline;
padding:10;
margin:0;
color:#000099;
}
</style>
</head>
<body>
<!-- Site navigation menu -->
<ul>
<li>Home page</li>
<li>Education and Experience</li>
<li>Publications and Committees</li>
<li>Links</li>
</ul>
</body>

Logical Grouping of content (layout) without using Tables

I am new to web-designing styles and css. I read that usage of tables for layout is a bad practice. Hence I tried to create this layout using <br\> , div and float.
Problem :
Once, <br\> is applied, I can't render the upper part, (similar to once \n is printed in console, we cant go to the upper line).
So, could any one provide an alternative way of designing the page, without using <table> and <br> tags.
Looks like a perfect example usage of a grid system.
Without using a grid system, you can just use float: left for each of the div and it should be OK.
Here is simple example for doing so,
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>StackOverFlow</title>
<style type="text/css">
.content{
width:150px;
height:100px;
border:1px solid blue;
}
.content .text{
display:block;
border:1px solid red;
}
</style>
</head>
<body>
<div class="content">
<div class="text">
text here
</div>
<div class="text">
another text here
</div>
<div class="text">
yet another text here
</div>
</div>
</body>
</html>
Code Explanation
What i did is wrap text div inside content parent div and assign fixed width and height to parent div.
Now for child div i just used display:block and see the result. You do not need to use <br/> display:block; will do it for you.
Now what is the meaning of display:block; so it just tell browser to allow that particular DOM to take whole width of the parent div.
By adding css to DIV's you can get some great layouts (i.e the three column style you're looking for here) , try this aticle to get you started:
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

Display:inline not working

I'm fairly new to html and css.
I learned the basics and a few advanced techniques but, i have been having a problem with lists for a long time and would like to know how i could possibly fix my problem.
Here's the idea.
I'm making an online shop but i want to avoid positioning every single images,texts,links using a different id.
I had this idea, I would put my li inside a div so that way, everything inside my list would be stuck inside this box, make a class positioning my text,links,images properly, use display:inline and et voila, i can create an entire page of products using only a class.
The problem is display:inline isn't working.
I would really appreciate it if someone could help me out on this one.
This is a bad example but, you understand the principle.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;}
.nav_button {background-color:purple;width:100px;height:50px;}
.nav_button:hover {background-color:pink;}
.nav_button li {display:inline;} /* Not working ?!? */
.nav_button a {position:relative;color:white;text-decoration:none;top:13px;}
</style>
</head>
<body>
<table style="width:600px;margin:0 auto;">
<tr>
<td>
<ul id="nav_bar">
<div class="nav_button"> <li> Home </li> </div>
<div class="nav_button"> <li> Contact us </li> </div>
<div class="nav_button"> <li> Shipping </li> </div>
<div class="nav_button"> <li> About us </li> </div>
</ul>
</td>
</tr>
</table>
</body>
</html>
display:inline is very limited and doesn't allow any block-level styling to added to it. You're better off using display:inline-block or using float:left. Keep in mind that if you use floats then you need to set the overflow of the parent element to overflow:auto (use visible for IE < 8) and this should work. Use inline-block first.
The reason it's not working is because you are using it insidea a div and that div element has only li element , the inline property would work if you have more than one li elements under a div.
Try this
<ul id="nav_bar">
<li class="nav_button"> Home </li>
<li class="nav_button"> Contact us </li>
<li class="nav_button"> Shipping </li>
<li class="nav_button" > About us </li>
</ul>
and for css
#nav_bar .nav_button {display:inline-block;}
or alternatively you can also use :
#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/
if you use the float method make sure you are using a element specified with clear:both; in the end.
note that : if the parent element width is too short to display horizantally then
ul {
width: 20px;
}
li
{
display: inline;
}
will not work.
also
under li element if you have display:block; statement such as
li
{
display: inline;
}
li a{
display: block;
}
not work.
use
display:flex;
It's worked for me
An inline element will not accept height and width. It will just ignore it. So the height and width that you have entered in css will be ignored that is why the empty div is not visible. moreover try using inline-block, it will solve the issue.

Mixing relative and absolute sizes in CSS

I have a question about a problem, of which I originally thought, that it would be fairly simple to solve. But apparently it is not - at least not with only CSS.
This is the basic situation:
<div id="wrapper" style="height:90%;width:410px;background:#aaaaaa;">
<div id="top" style="margin:5px;width:400px;background:#ffffff;">
</div>
<div id="content" style="margin:5px;width:400px;background:#ffffff;">
</div>
</div>
I have a wrapper div that fills up 90% of the screen height and two inner divs. The first div "top" contains some varying elements. The second div "content" should fill out the remaining space of the wrapper div.
So far, I haven't found a way to set the div "content" to fill up the remaining space - even if I would know the exact height of the div "top" as I only know the relative height of the wrapper div.
Thus, I would be happy to learn of a method to either the div "content" to fill up the remaining space or how to mix relative and absolute sizes (i.e. height:100%-100px).
There is currently no cross-browser solution to achieve what you're trying with div elements and CSS. You can however get the behavior you want with the tried and true method of using a table instead.
<html>
<head>
<style type="text/css">
#wrapper {
height:90%;width:410px;background:#aaaaaa;border-spacing:5px;
}
#wrapper td {
padding:0;vertical-align:top;
}
#top {
background:#ffffff;
}
#content {
height:100%;background:#ffffff;
}
</style>
</head>
<body>
<table id="wrapper" role="presentation">
<tr>
<td id="top">Top</td>
</tr>
<tr>
<td id="content">Content</td>
</tr>
</table>
</body>
</html>
EDIT:
It appears I stirred a nest of hornets with my answer. There seems to be a near-religious following of people who say using tables for layout is bad. In many cases that is absolutely true, however there are situations where a table will do what CSS cannot. This is one of those situations, where a CSS alternative is on the horizon, but most browsers do not support it yet. It is up to the site designer to decide whether he wants to have a layout with cross-browser functionality now, or use a pure CSS layout with its limitations that may become easier to maintain in the future.
Your HTML code is really wrong:
don't use comma's after attributes
don't use inline CSS, put all CSS in a stylesheet and load the stylesheet in your HTML page
CSS syntax is: propertie: value; example: width: 10px; not: width=10px
To use 100% - 100px you can use CSS3 calc, but this feature has less browser support. You can use JS to make a sort of calc function.
There is no cross-browser way to get the content div to fill all available space with CSS, but it is fairly easy to make things look as if it did:
<html>
<head>
<style type="text/css">
#wrapper {
width:400px;height:90%;border-style:none solid;border-color:#aaaaaa;border-width:5px;background:#ffffff;
}
#top {
border-bottom: 5px solid #aaaaaa;
}
#content {
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
Top
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>
This should be sufficient for most situations, unless you want to use something like an onmouseover handler on the content.