I've spent a few hours with this, and I think it's much simpler to do this.. I'm trying to center 3 divs horizontally whilst keeping them fully linkable, and I finally gave up on that and tried tables ( :-o )
The first one shows my failed attempt at linking a div.
<center><table>
<tr>
<td>
<a href="http://google.com" style="display:block;height:100%;width:100%">
<div>
a
</div>
</a>
</td>
<td>b</td>
<td>c</td>
</tr>
</table>
With CSS
tbody tr td{
width: 300px;
height: 200px;
border: 2px solid #000;
background-color: #000;
opacity: 0.7;
color: #fff;
font-size: 30px;
font-family: 'calibri'; //temporary
padding: 30px;
}
body center table
{
border-spacing: 20px;
margin-top: -90px;
}
tr td a{
height:150%;
width:150%;
}
If anyone knows how to do this with divs or tables, your responses are greatly appreciated!
No need to use tables at all. The key here is display: inline-block;. See it in action here: little link. HTML:
<div class = "onediv">Glee is awesome!</div>
<div class = "onediv">Glee is awesome!</div>
<div class = "onediv">Glee is awesome!</div>
CSS:
body { /*this should be whatever is containing your three divs*/
text-align: center; /*center them*/
white-space: nowrap; /*make sure they're all on the same line*/
}
.onediv {
display: inline-block; /*magic*/
height: 200px; /*or whatever you want*/
width: 150px;
/*make it look pretty*/
background: rgb(0, 162, 232);
color: white;
}
a {
color: white;
height: 100%; /*spans the whole div vertically*/
width: 100%; /*and horizontally (not necessary, but can't hurt!)*/
display: block; /*otherwise the height and width definitions won't work*/
}
Do you mean something like this?
Demo
HTML:
<div id="wrapper">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
CSS:
#wrapper, #wrapper * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#wrapper {
margin:0 auto;
width:1020px; /* width of divs + margin */
}
#wrapper > div {
float:left;
width:300px;
height: 200px;
text-align:center;
margin:20px;
border: 2px solid #000;
line-height:140px; /* optional, will center the text vertically */
background-color: #000;
opacity: 0.7;
font-size: 30px;
font-family: 'calibri';
padding: 30px;
}
#wrapper > div a {
display:block;
color: #fff;
}
Edit: updated with your styling
<td>
<a href="http://google.com" style="display:block;height:100%;width:100%">
<div>
a
</div>
</a>
</td>
You make all tds div lining.
Related
In the image below, on the left is the output of my html/css, on the right is what I would like the layout to look like.
I'm pretty clueless as to:
how to Center the header
why the 'upper right' text and button are being forced to the next line by the header (as opposed to orienting in the upper right
how to align the text area so that it is to the right of the image
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="outer_border">
<div class="inner_border">
<!--just use a div to represent the image -->
<div class ="image">
</div>
<span class="upper_left_text">
upper left
</span>
<span class ="header">
<h2>
Header
</h2>
</span>
<span class="upper_right_text">
upper right
</span>
<button class="button1">Button</button>
<textarea class="text_area">Text Area</textarea>
<button class="button2">Button 2</button>
</div>
</div>
</body>
</html>
.outer_border {
border: 1px solid black;
width: 600px;
height: 500px;
}
.inner_border {
border: 3px solid black;
width: 400px;
height: 300px;
float: right;
}
.image {
border: 1px solid black;
display: inline-block;
width: 50px;
height: 100px;
margin: 5px;
float: left;
}
.the_header {
text-align: center;
display: inline-block;
}
.button1 {
float: right;
}
.button2 {
float: right;
width: 80px;
height: 60px;
}
.text_area {
clear: both;
display: block;
width: 100%;
height: 150px;
margin: 5px;
/*I have no idea how to position this*/
}
.upper_left_text {
float: left;
}
.upper_right_text {
float: right;
}
I made a jsfiddle, check this one, should get you started :)
https://jsfiddle.net/fazbyxyq/
html5
<div class="right">
<div>upper left</div>
<div>header</div>
<div>upper right</div>
<div><textarea>textarea</textarea></div>
<div>button2</div>
</div>
css3
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.left{
float:left;
width:10%;
height:100px;
border:1px solid #000;
}
.right{
float:left;
width:89%;
margin-left:1%;
}
.right div{
float:left;
width:33%;
border:1px solid #000;
}
.right div:nth-child(2){
text-align:center;
}
.right div:nth-child(3){
text-align:right;
}
.right div:nth-child(4),.right div:nth-child(5){
width:99%;
border:0;
}
.right div:nth-child(4) textarea{
width:100%;
height:100px;
margin:10px 0;
}
.right div:nth-child(5){
text-align:right;
}
Peace out!
well, Your code was wrong in many lvl's. I have fixed it to look like in your image... but it's just a fix. Maybe not what you are looking for.
As a resume: You want a container with an image looks like a column and the rest of the html stay as another column.
Then, as you did, the image container is floating left with a fixed width of 50px but we have to add 10px more as you have given the container 5px margin (5px right and left = 10px),
Then I just add a container which will take the rest of the html. THen it's easy to give the container a float left and as its width 340px so the total of your layout is, as you want, 400px.
I have added both box-sizing: border-box; to make the border be inside the containers and not messing with the fixed widths.
Then I just have added .header {float:left;} as basically ion your code you have a class named the_headerwhich is not even used in the html. and then a bit of margin to the h2 to separete it from upper left
here you have the fiddle
The key lays in treating your layout as a layout with 2 columns. I believe the markup should look something like this:
<div id='demo'>
<div class='col1'>
<img src='http://www.placehold.it/50x100' />
</div>
<div class='col2'>
<div class='header'>
<span class='left'>left</span>
<span class='right'>
<button>button</button>
right
</span>
<h2>center</h2>
</div>
<textarea>Lorem ipsum</textarea>
<button>button</button>
</div>
</div>
to achieve the result in your image, you should add the following css:
#demo {
border: 2px solid black;
padding: 10px;
}
#demo .col1, #demo .col2 {
display: inline-block;
vertical-align: top;
}
#demo .col2 {
width: calc(100% - 60px);
}
#demo .left {
float: left;
}
#demo .right {
float: right;
}
#demo .header {
text-align: center;
}
#demo textarea {
width: 100%;
min-height: 100px;
margin: 8px 0;
}
#demo button {
float: right;
margin-left: 8px;
}
Note that I've used as little fixed dimesions as possible. Just cause it will make your layout adapt easier to different content and different screen sizes.
I've put your code next to my proposal in a fiddle. I think the code should be fairly easy and self explanatory, but feel free to ask if anything isn't clear.
Here is another fiddle that uses the "calc" operation to set the textarea the remaining width of the div.
Here is the fiddle http://jsfiddle.net/SteveRobertson/tyokk1qj/
I wrap this image in and set the height to 100% and then modify the rest of the elements to the right use CSS
.outer_border {
border: 1px solid black;
width: 600px;
height: 500px;
}
.inner_border {
border: 3px solid black;
width: 400px;
height: 300px;
}
#tall{
height:100%;
float:left;
}
.image {
border: 1px solid black;
display: inline-block;
width: 50px;
height: 100px;
margin: 5px;
float: left;
}
.the_header {
text-align: center;
display: inline-block;
}
h2 {
display:inline;
}
.button1 {
float: right;
}
.button2 {
width: 80px;
height: 60px;
display: block;
float:right;
}
.text_area {
clear: both;
display: inline;
width:auto;
height: 150px;
margin-right: 0;
}
.upper_left_text {
float: left;
}
.upper_right_text {
float: right;
}
.text_area{
width:calc(100% - 70px);
}
Basically I have two different headers (different colours) that I have made sit on top of each other how I want but I also have a logo (the smiley face) that is meant to sit next to the headers. And once its in it's place next to (horizontally in line with) the two headers, I want the whole package (the logo and the headers) to be horizontally aligned to the center of their div (.box).
This is a simplified version of my problem and I tried to include all relevant code.
HTML:
<div class="container">
<div class="box">
<h1 class="header1">Hello</h1>
<h1 class="header2">World</h1>
<img src="http://i303.photobucket.com/albums/nn157/sal-ad_daze/smiley-face.png"></img>
</div>
</div>
CSS:
.container {
background-color:#dfdfdf;
border: 2px solid;
width: 800px;
margin: 0px auto;
}
.box {
width: 50%;
height:10%;
margin: 0 auto;
background-color: #5f5f5f;
}
h1 {
font-family:Arial;
line-height:30px;
padding:0;
margin:0;
}
.header1 {
color: red;
padding-top:15px;
}
.header2 {
color: blue;
}
img {
width: 10%;
}
JSFiddle: http://jsfiddle.net/9yWFf/
Add or change whatever you want in the Fiddle that will accomplish this.
Demo
Wrap your header1 and header 2 in a div and give float:left like this :
<div class="Left">
<h1 class="header1">Hello</h1>
<h1 class="header2">World</h1>
</div>
This is what you are expecting:
CSS:
.container {
background-color:#dfdfdf;border: 2px solid;
width: 100%;
margin: 0px auto;
}
.box {
width: 50%;height:10%;
margin: 0 auto;
background-color: #5f5f5f;
text-align: center;
}
h1 {font-family:Arial;line-height:30px;padding:0;margin:0; display:inline-block;}
.header1 {color: red;padding-top:15px;}.header2 {color: blue;display:inline-block;}
img {
width: 10%;
display:inline-block;
}
Fiddle Demo
I am trying to do a vertical align for my texts. I also want to make sure the green background div need to cover from top to bottom inside the red color div. Currently the green color div only covers 90% of the red oolor div. I am not sure what happened in my case. Can anyone explain and help me out?
html
<div id='wrapper'>
<div class='head'></div>
<h2 class='title'>Warm-Up</h2>
</div>
css
.title{
display: inline;
padding-left: 15px;
vertical-align: middle;
margin: 0;
}
.head{
width: 30px;
height: 50px;
display: inline-block;
background-color: #A9D075;
}
#wrapper{
width:200px;
background-color: red;
}
http://jsfiddle.net/rmS2f/3/
Thanks.
Demo http://jsfiddle.net/rmS2f/6/
Your html structure will work but you need to change the styles:
.title {
display: inline-block;
padding-left: 45px;
vertical-align: middle;
margin: 0;
line-height:50px;
}
.head {
position:absolute;
left:0;
width: 30px;
height: 100%;
display: inline-block;
background-color: #A9D075;
}
#wrapper {
position:relative;
width:200px;
height:50px;
background-color: red;
}
I saw a similar post to this which is here but I noticed that no one answered and that when I do press the jsfiddle, it doesn't center it.
I have this current code and what I'm trying to accomplish is to have the image directly in the middle vertically inside the div. I've tried vertical-align and putting it in span and top % but nothing seems to work. I'm also using Chrome so I don't know if that matters.
http://jsfiddle.net/y84mx/
<div class="hours">
<div id="sun">
<img src="http://jsfiddle.net/img/logo.png" alt="Opening" height="auto" width="20%" align="left" vertical-align="middle" />
<span>Hours</span>
</div>
</div>
Thanks!
You can use:
#sun {
position:relative;
}
img {
background: #3A6F9A;
position:absolute;
top:0;
bottom:0;
left:0;
margin:auto;
}
Updated Fiddle
For both items set display: inline-block;
Then make sure to match the line-height of the <span> the height of the image.
Demo
HTML
<div id="hours">
<span id="sun">
<img src="http://jsfiddle.net/img/logo.png" alt="twibuffer" />
</span>
<span> Hours</span>
</div>
CSS
#hours {
margin-bottom:2%;
text-align: center;
}
#hours span {
display: inline-block;
vertical-align: middle;
}
#hours #sun {
border: 1px solid red;
/* to show the centering */
}
I have updated the fiddle, Please check
#sun{
line-height : auto;
border: 1px solid;
text-align : center;
}
.hours{
padding-left: 2%;
padding-right: 2%;
text-align: right;
color: #000;
font-size: 40px;
}
img {
background: #3A6F9A;
}
Check out this
http://jsfiddle.net/chetangawai/y84mx/9/
#sun{
text-align:center;
display:inline-block;
border:solid
}
.hours{
color: #000;
font-size: 40px;
padding-left: 2%;
padding-right: 2%;
}
img {
background: #3A6F9A;
}
I need to create a headline with equal length lines on both sides of the headline text, and a fixed size padding between the lines and the text. The text will vary so it must not set a width. The lines should take up all remaining width available in the headline container. The headline text must not set a background because the background behind it will vary. Something like this:
--------------------------------------------------------- Some text ---------------------------------------------------------
I solved it using a table:
<table width="100%">
<td><hr /></td>
<td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
<td><hr /></td>
</table>
You can try it out here: http://jsfiddle.net/md2dF/3/
Semantically this is a really bad solution, the headline has nothing to do with tabular data. How would you do this without a table?
To summarize (because the suggested solutions have all overlooked one or more requirements):
The headline must not have a fixed width
The headline text must not have a background
The headline text must not have a fixed width
The lines on either side of the text must take up all remaining width
The padding between the lines and the text must have a fixed width
If in doubt, look at http://jsfiddle.net/md2dF/3/
Newer answer that works on newer versions of IE and Firefox
Without any tricks:
fieldset.title {
border-top: 1px solid #aaa;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
}
fieldset.title legend {
padding: 5px 10px;
}
<fieldset class="title">
<legend>Some text</legend>
</fieldset>
Live demo on jsfiddle
Edit:
Without any background color nor image:
<div>
<div><hr></div>
<span>Some text</span>
<div><hr></div>
</div>
CSS:
div {
width:300px;
text-align:center;
display:table;
}
div > div {
display:table-cell;
vertical-align:middle;
}
div > span {
white-space:nowrap;
}
Works in IE8+
Live demo
Original answer:
Without any image:
<div>
<span>Some text</span>
</div>
CSS:
div {
border-bottom:1px solid #000;
line-height:16px;
text-align:center;
}
span {
background:#FFF;
position:relative;
bottom:-8px; /* half of line-height */
padding:0 15px;
}
Live demo
You can use any block element you want (h1, h2, whatever) instead of div.
The way to solve this without knowing the width and the background color is the following:
Structure
<div class="strike">
<span>Kringle</span>
</div>
CSS
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
}
.strike > span {
position: relative;
display: inline-block;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: red;
}
.strike > span:before {
right: 100%;
}
.strike > span:after {
left: 100%;
}
Example: http://jsfiddle.net/z8Hnz/
You can do it like so (for the background, you can make a 1px image of your color choice):
<h1><span>Some Text</span></h1>
h1 { width: 100%; text-align: center; background: url(pixel.jpg) repeat-x left center; }
h1 span { padding: 0 3px; background-color: #ffffff; }
Edit: Without bg color:
.hr { width: 100%; height: 40px; line-height: 40px; }
.hr span { width: 10%; text-align: center; float: left; margin: 0; display: inline-block; }
.hr .line { width: 45%; height: 100%; background: url(pixel.jpg) repeat-x left center; float: left; }
.hr .line.right { float: right;}
<div class="hr">
<div class="line left"></div>
<span>Some Text</span>
<div class="line right"></div>
</div>
You'll need to adjust percents and whatnot, but it works in general.