I want my labels display left up in the text-fields, here is the screenshot where i want them exactly http://s20.postimg.org/p8h11xrot/label_1.png.
I don't know really how to do that i tried with text-align or float: left.
this is my css file:
body {
}
#container{
background-color:#ccccff;
width:100%;
margin-left:auto;
margin-right:auto;
}
.content {
padding: 5px;
width:100%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
label {
text-align: center;
}
article p{
text-align:center;
}
header{
width: auto;
height: 100px;
background-color: #ffffff;
background: url(image.png) center center no-repeat;
text-align:center;
}
footer{
text-align:center;
background-color: #999999;
}
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Intes - Register</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header> Header Image </header>
<section id="container">
<article><p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed eget vehicula sapien.
Donec vitae quam id dolor pretium viverra.
Nulla viverra quam eget fringilla ultrices.</article>
<label>First Name</label>
<br />
<div class="content">
<input type="text" name="first_name" size="50">
<br />
</div>
<label>Last Name</label>
<br />
<div class="content">
<input type="text" name="last_name" size="50">
<br />
</div>
<label>E-mail Address</label>
<br />
<div class="content">
<input type="text" name="email_address" size="50">
<br />
</div>
<div class="content">
<input type="submit" value="Register">
</div>
</section>
<footer>copyright stuff</footer>
</body>
</html>
To have your desired visual effect you need to figure out to center the form and
get the labels to show above the inputs.
#container{
text-align: center;
}
/* FORMS */
#my_form {
display: inline-block;
text-align: left;
line-height: 1.5;
}
#my_form label {
display: block;
}
#my_form input {
margin: 0.25em 0 0.5em;
}
http://fiddle.jshell.net/g4yzZ/13/
http://fiddle.jshell.net/g4yzZ/13/show
Float your .labels and input elements to the left {float:left} and use {clear:right} on the labels.
Give the label or container a width, and then use text-align: left. It should work.
label {
width: 100px;
text-align: center;
}
You can accomplish this with width.
The trick is to wrap the input and label tags in wrapper divs. You almost got there, but the nesting in your code was off.
Once that's done, you can set the content class to the width of your inputs, 333px and align it center with margin, then text-align left the labels, which are now flush with the inputs.
The working code is here: http://jsfiddle.net/bronzehedwick/xpB3v/
And the relevant css:
.content {
padding: 5px;
width:333px;
margin: 0 auto;
}
label {
text-align: left;
display: block;
}
Related
I working in a page builder
For a shop, I am creating. I can change the CSS which is great.
I’m struggling to get a responsive resize of the images in this 4 column row. Since the images are different heights I have to have to set a height and have responsive width. Is there any way to get it to scale correctly?
The width is auto and the height is a set height based on the size of the screen.
You can see that when I resize it separates from the box and then sometimes get squished.
object-fit property
I did your design by using display : flex; and object-fit : cover; properties. I think that this object-fit property directly on the image is the only lacking property to make your images still looking good despite the screen resolution.
Notice the use of object-position : center; which makes the resizing always axed on the center of the image.
index.html
<div class="foo">
<div class="bar">
<img src="https://picsum.photos/200/300" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/500/200" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/200/700" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/500/400" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
</div>
style.css
body {
background-color: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
}
.foo {
width: 100%;
display: flex;
gap: 20px;
}
.bar {
background-color: #ffffff;
display: flex;
flex-direction: column;
width: 100%;
border-radius: 15px;
overflow: hidden;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.bar > img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
}
h4 {
color:#9ccf74;
}
.bar > div {
padding: 10px;
height: 100px;
}
If I have a Bootstrap 3 list-group of <a> elements. I would like one of them split in half so that within the group it looks similar to a button group as shown in the snippet.
How can I do this?
.container {
width: 75%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="list-group">
Left Side
Right Side
Dapibus ac facilisis in
Vestibulum at eros
</div>
<p>How to divide list-group-items .left-side and .right-side so they appear on the same line but seperated similar to this:
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<a type="button" class="btn btn-default">Left Side</a>
<a type="button" class="btn btn-default">Right Side</a>
</div>
</div>
Class your special case so we can target the items with the correct specificity
Notice the .clearfix that will put the floats back where they should be once finished.
.container {
width: 75%;
}
.list-group-item.left-side,
.list-group-item.right-side {
margin: 0 0 -1px;
float: left;
width: 50%;
border-bottom-width:0px;
}
.split-items .list-group-item.left-side{
border-top-right-radius:0px;
border-bottom-right-radius:0px;
}
.split-items .list-group-item.right-side{
border-top-left-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-top-right-radius:4px;
border-left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br>
<div class="container">
<div class="list-group">
<div class="clearfix split-items">
Left Side
Right Side
</div>
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
</div>
</div>
Why don't you just float the a tags?
Add float:left and width:50% to your .list-group-item CSS:
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
width: 50%;
float: left }
I am working on getting a two column layout that extends to the bottom of my page.
However, my sidebar cuts off at the container-fluid height even though I am trying to get it to extend to the whole page.
What is weird is that my content column works fine.
HTML:
<div class="container-fluid">
<div class="row-fluid columns no-margin fill">
<div id="sidebar" class="span2 columns no-margin right-edge"></div>
<div id="contentWrapper" class="span10 columns no-margin pull-right"></div>
</div>
</div>
CSS:
html, body, form {
height: 100%;
min-height: 100%;
background-image:url("../../images/lightGreyBackground.png");
background-repeat: repeat;
font-family:"Segoe UI", Helvetica, Arial, Sans-Serif;
}
.container-fluid {
margin: 0 auto;
height: auto;
padding: 0px;
}
.columns {
height: 100%;
min-height:100%;
margin: 0px;
width: 100%;
}
.fill {
position: absolute;
height: 100%;
min-height: 100%;
}
.no-margin {
margin-left: 0%;
width: 100%;
}
.right-edge {
border-right: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#sidebar {
background-color: White;
padding-top:15px;
}
For have 2 column :
<html>
<head>
<style type="text/css">
.container-fluid { width: 100%;}
.float {
float: left;
width: 50%; /* Size colonne */
margin: 1em 0; /* Margin colonne */
}
.spacer { clear: both; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="float">Colonne 1</div>
<div class="float">Colonne 2</div>
<div class="spacer"></div>
</div>
</body>
</html>
Use the framework bootstrap or 960.gs, powerful front-end framework for faster and easier web development.
With bootstrap 3 :
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
</div>
</div>
I'm trying to center a Div that will have varying width's (based on content of a website).
I read about a relative positioning technique here:
http://www.tightcss.com/centering/center_variable_width.htm
But I thought there has to be an easier way to do it?
That's a pretty solid method that should work well in most browsers. It's not really that complex when you break it down. Here's a basic example:
<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>
<div id="hideoverflow">
<div id="outer">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo libero, commodo ut iaculis in, placerat vel purus.
</div>
</div>
</div>
#Talon; you can do it like this http://jsfiddle.net/sandeep/7PXQF/
CSS:
.container{
background-color:red;
text-align:center;
}
.center{
background-color:yellow;
display:inline-block;
text-align:left;}
HTML:
<div class="container">
<div class="center">
<p>This is a div with an much wider width, to make the yellow div go off the page to the right. We'll type a bit more to be sure.</p>
<p>Most people will see a horizontal scroll bar on the bottom, unless their screen is very wide.</p>
</div>
</div>
Well, it can't get any simpler than this and has full support on all browsers; doesn't even need a container:
.centered {
display:table;
margin:0 auto;
}
<div class="centered">
content
</div>
Here is a working fiddle: https://jsfiddle.net/1tnprnoz/
Now with flex-box you can easily achieve this with justify-content: center;.
#container{
background: gray;
display: flex;
justify-content: center;
}
<div id="container">
<div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
This is a centered div This is a centered div This is a centered div This is a centered div
</div>
</div>
This can also be achieved by applying margin: auto to the containers child selector #container>*.
#container{
background: #c7c7c7;
}
#container>*{
margin: auto;
}
<div id="container">
<div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
This is a centered div This is a centered div This is a centered div This is a centered div
</div>
</div>
Note: content div is styled inline as these styles are generated styles and are out of the scope of this question.
I have some CSS code with a header, footer, left menu pane, and content. The layout is working on all browsers except IE6. In IE6 the linksPanel div does not render correctly within the masterContent div. I believe it has something to do with the position element. I've looked at a bunch of articles but have not been able to find a solution that works. Unfortunately I have to support IE6 and need a solution. Code is below. Any help would be greatly appreciated!
<!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 runat="server">
<title></title>
<style type="text/css">
.masterContent
{
position:fixed;
top:178px;
bottom:42px;
left:0px;
right:0px;
overflow:auto;
background:#fff;
}
.linksPanel
{
position:absolute;
top:0px;
left:10px;
bottom:0px;
width:254px;
overflow:auto;
background:#f4f4f3;
line-height:20px;
padding:5px;
}
.mainPanel
{
position:absolute;
top:5px;
bottom:0px;
right:10px;
width:70%;
overflow:auto;
padding-left:10px;
padding-bottom:0px;
}
.footerPanel
{
position:absolute;
bottom:0px;
left:0px;
padding:0px;
margin:0px;
width:100%;
height:44px;
text-align:right;
overflow:hidden;
background:#f4f4f3;
z-index:100;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div class="headerPanel">
<p>Header stuff here.</p>
<p>More header stuff here.</p>
</div>
</td>
</tr>
</table>
<div class="masterContent">
<div class="linksPanel">
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
<p>Link5</p>
<p>Link6</p>
<p>Link7</p>
<p>Link8</p>
<p>Link9</p>
<p>Link10</p>
<p>Link11</p>
<p>Link12</p>
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
<p>Link5</p>
<p>Link6</p>
<p>Link7</p>
<p>Link8</p>
<p>Link9</p>
<p>Link10</p>
<p>Link11</p>
<p>Link12</p>
</div>
<div class="mainPanel">
<p>test content</p>
<p>test more content</p>
<p>test</p>
<p>test</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="footerPanel">
<p>Footer stuff here.</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
This is a very strange design and I have seen some strange designs indeed.
You are putting everthing in a <form> element and by everything, I mean everything including the header, div#masterContent and footer.
Than you are using tables and I have no idea why. Everying that you have done with tables can be done with divs.
You are giving you div.masterContent a position:fixed with a top:178px and bottom: 42px. Are you familiar with the positioning concepts in CSS? When you give any element a position of fixed, that element remains on the screen regardless if you scroll down. Is that what you want, and if you do, I can not imagine what kind of a page it will be.
You are giving your div.linksPanel a position of absolute with a top: 0, bottom: 0 and left: 10px. As i said this does not make sense in any way. How can it be 0 from the top as well as 0 from the bottom. These offset properties are set by using top-left, top-right or bottom-left, bottom-right.
Your div.mainPanel has the same issues.
I think, either you have totally missunderstood CSS Positioning and Layouts, or I have utterly failed to understand it. Maybe this is what you are looking for.
<!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" lang="en" xml:lang="en" dir="ltr">
<head runat="server">
<title>Document Template</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="basic.css" />
</head>
<body>
<div id="wrapper">
<form id="form1" runat="server">
<div id="header">
<p>Header Stuff Here</p>
<p>More Header Stuff Here</p>
</div>
<div id="content">
<div id="links_panel">
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
<p>Link5</p>
<p>Link6</p>
<p>Link7</p>
<p>Link8</p>
<p>Link9</p>
<p>Link10</p>
<p>Link11</p>
<p>Link12</p>
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
<p>Link5</p>
<p>Link6</p>
<p>Link7</p>
<p>Link8</p>
<p>Link9</p>
<p>Link10</p>
<p>Link11</p>
<p>Link12</p>
</div>
<div id="main_panel">
<p>test content</p>
<p>test more content</p>
<p>test</p>
<p>test</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem
</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<br />
</div>
<div id="footer_panel">
<p>Footer stuff here.</p>
</div>
</form>
</div>
With the following CSS
/* START - BASIC CSS */
/* START - CSS Reset */
*
{
margin: 0;
padding: 0;
}
p
{
line-height: 20px;
margin: 20px 0;
}
/* END - CSS Reset */
/* START - div wrapper */
div#wrapper
{
margin: 0 auto;
width: 960px;
border: 1px solid black;
}
/* END - div wrapper */
/* START - hack for "margin: auto" for IE6*/
body
{
text-align: center;
}
div#wrapper
{
text-align: left;
}
/* END - hack for "margin: auto" for IE6*/
/* START - form form1 */
form#form1
{
}
/* END - form form1 */
/* START - div header */
div#header
{
border: 1px solid black;
}
/* END - div header */
/* START - div content */
div#content
{
border: 1px solid black;
height: 500px;
}
/* END - div content */
/* START - div links_panel */
div#links_panel
{
width: 250px;
float: left;
height: 500px;
overflow: auto;
border: 1px solid black;
}
/* END - div links_panel */
/* START - div main_panel */
div#main_panel
{
width: 704px;
float: right;
height: 500px;
overflow: auto;
border: 1px solid black;
}
/* END - div main_panel */
/* START - div footer_panel */
div#footer_panel
{
clear: both;
border: 1px solid black;
}
/* END - div main_panel */
/* END - BASIC CSS */
Basically you want a header, followed by a linkspanel on the left which should have a scroolbar, followed by a mainPanel which should also have a scroolbar and it has to be to the right of the linksPanle and lastly followed by a fotter.