I got the following HTML:
<div style="width:300px">
<div class="goals">
<div class="goalLeft">
<span class="goalImage"><img src="setup/images/tor.png"></span><span class="goalMin">7' (ET)</span>
<span class="goalResult">1:0</span><span class="player">Goetze </span>
</div>
<div class="goalRight">
<span class="goalImage"><img src="setup/images/tor.png"></span><span class="goalMin">9'</span>
<span class="goalResult">1:1</span><span class="player">Goetze </span>
</div><div class="goalRight">
<span class="goalImage"><img src="setup/images/tor.png"></span><span class="goalMin">80'</span>
<span class="goalResult">1:2</span><span class="player">Goetze </span>
</div><div class="goalLeft">
<span class="goalImage"><img src="setup/images/tor.png"></span><span class="goalMin">123' (ET)</span>
<span class="goalResult">2:2</span><span class="player">Goetze </span>
</div>
</div>
</div>
And this CSS for that:
.goalLeft
{
clear:both;
float:left;
}
.goalRight
{
clear:both;
float:right;
}
.goals
{
margin-left: 1em;
margin-right: 1em;
}
#NeuesVomSpocht div.arrow
{
background:transparent url(setup/images/arrows.png) no-repeat scroll 0px -16px;
width:16px;
height:16px;
display:block;
}
#NeuesVomSpocht div.up
{
background-position:0px 0px;
}
.goalImage
{
display:block;
background-color:red;
width:22px;
}
.goalMin
{
width:65px;
background-color: cyan;
}
.goalResult
{
display:block;
background-color:green;
}
.goalLeft .goalImage
{
float:left;
}
.goalRight .goalImage
{
float:right;
margin-left:auto; margin-right:0px;
}
.goalLeft .goalResult
{
float: left;
}
.goalRight .goalResult
{
float: right;
margin-left:auto; margin-right:0px;
}
.goalRight .player
{
float:right;
margin-left:auto; margin-right:0px;
}
.goalRight .goalMin
{
float:right;
margin-left:auto;
margin-right:0px;
}
.goalLeft .goalMin
{
float:left;
}
.goalImage img
{
width: 20px;
height: 20px;
vertical-align: top;
}
What I want is that the text in the right Cyan (9,80) area should be aligned to the right. What am I doing wrong here?
So many floats... You shouldn't really use floats to replace text-align. But here is the fix:
.goalRight .goalMin {
text-align: right;
}
See it here: http://jsfiddle.net/eS7LL/
Related
So essentially I am writing a game in javascript. I have a canvas on the left, a canvas in the middle, a textarea topright, and a canvas bottom right. But I can't seem to get the right CSS code to figure out this layout like the picture. I want the middle to take up about 50-60% of the middle of the page, and the left and right columns taking the rest of the space. Would be nice if it auto resized with browser window. Any help would be appreciated.
Set a container to hold all the elements and then make smaller containers inside. Target each with CSS and set its properties.
Here I set a general CSS class .generalStyles just to simplify the code.
You would use something like this: (run the snippet)
.generalStyles
{
position:relative;
float:left;
background-color:#000;
border-radius:4px;
box-sizing:border-box;
color:#f00;
height:100px;
padding:5px;
text-align:center;
}
.container
{
width:100%;
background-color:#FFF;
}
.leftPanel
{
width:24%;
margin:0 1% 0 0;
}
.rightPanel
{
width:24%;
margin:0 0 0 1%;
background-color:#FFF;
padding:0;
}
.middlePanel
{
width:50%;
margin:0;
}
.topPanel
{
width:100%;
margin:0;
height:49.5%;
}
.bottomPanel
{
width:100%;
margin:1% 0 0 0;
height:49.5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div class="container generalStyles">
<div class="leftPanel generalStyles">left stuff goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="middlePanel generalStyles">middle goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="rightPanel generalStyles">
<div class="topPanel generalStyles">top stuff<br/>and more here</div>
<div class="bottomPanel generalStyles">bottom stuff<br/>and more here</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
h2 {
text-align:center;
font-family:arial;
color:red;
font-weight:normal;
}
.left {
background-color: #000;
border-radius:10px;
float: left;
width: 20%;
padding: 10px;
margin:10px;
height: 300px;
}
.middle {
background-color: #000;
border-radius:10px;
float: left;
width: 60%;
padding: 10px;
margin:10px;
height: 300px;
}
.right {
float: left;
width: 20%;
margin: 10px;
height: 300px;
position: relative;
top: 0;
}
.top {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
}
.bottom {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.row {
box-sizing:border-box;
display: flex;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="left">
<h2>left</h2>
</div>
<div class="middle">
<h2>middle</h2>
</div>
<div class="right">
<div class="top">
<h2>top right</h2>
</div>
<div class="bottom">
<h2>bottom right</h2>
</div>
</div>
</div>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right">
<div class="rightDiv"></div>
<div class="rightDiv"></div>
</div>
</div
and css
.container{display:block;width:100%}.left,.middle,.right{width:100px;display:inline-block}.left{border:1px solid red;height:100px}.middle{border:1px solid green;height:100px}.rightDiv{border:1px solid #ff0;height:40px;margin:10px 0}
Fiddle
I have a Div with a 10% width and within its content there is an image I want to be able to center vertically/Horizontally and resize to fit in its container.
It resize well when the windows resize but do not know how can i center the image within the container.
<div class="proyecto_holder">
<div class="tipo_proyecto_image">
<img src="http://i57.tinypic.com/vgo9k5.png" border="0" />
</div>
<div class="proyecto_datos_holder">
<div class="proyecto_titulo">This id the title of the project</div>
<div class="proyecto_tipo">Type of Project</div>
</div>
.proyecto_holder {
width:100%;
float:left;
height:75px;
overflow:hidden;
background-color:#F2F2F2;
margin-top:1px;
}
.tipo_proyecto_image {
width:10%;
height:75px;
float:left;
}
.tipo_proyecto_image img {
width:80%;
}
.proyecto_datos_holder {
width:90%;
height:75px;
float:left;
}
.proyecto_titulo {
width:100%;
float:left;
font-family: Titillium Web;
font-size:18px;
font-weight:bold;
line-height:20px;
margin-top:10px;
color:#666666;
}
.proyecto_tipo {
float:left;
font-family: Titillium Web;
font-size:16px;
line-height:20px;
color:#11BB00;
padding: 10px 15px;
}
Here is the demo: https://jsfiddle.net/3t2shesb/
Thanks in advance.
If I understand what you want to do, try using transform and position:relative on the img to give you something like this:
.tipo_proyecto_image img {
width: 80%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
As shown here:
.proyecto_holder {
width:100%;
float:left;
height:75px;
overflow:hidden;
background-color:#F2F2F2;
margin-top:1px;
}
.tipo_proyecto_image {
width:10%;
height:75px;
float:left;
}
.tipo_proyecto_image img {
width: 80%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.proyecto_datos_holder {
width:90%;
height:75px;
float:left;
}
.proyecto_titulo {
width:100%;
float:left;
font-family: Titillium Web;
font-size:18px;
font-weight:bold;
line-height:20px;
margin-top:10px;
color:#666666;
}
.proyecto_tipo {
float:left;
font-family: Titillium Web;
font-size:16px;
line-height:20px;
color:#11BB00;
padding: 10px 15px;
}
<div class="proyecto_holder">
<div class="tipo_proyecto_image">
<img src="http://i57.tinypic.com/vgo9k5.png" border="0" />
</div>
<div class="proyecto_datos_holder">
<div class="proyecto_titulo">This id the title of the project</div>
<div class="proyecto_tipo">Type of Project</div>
</div>
The following works ...
HTML:
<div class='Container'>
<img src='test.png'>
</div>
CSS:
div.Container {
position:absolute;
top:25%;left:25%;
width:50%;height:50%;
background:#FF0;
}
div.Container > img {
display:block;
position:absolute;
left:10%; width:auto;
top:35%; height:30%;
}
Here I assign all 100% of the parents height in the img’s css-declaration (2*)35% + 30%, and use that for scaling ... Maybe not what you want, but it works ... try it out :)
I'm currently developping a website and encountered a problem with CSS.
I have a parent div containing 2 or more children: one containing the name of a user that sits on top of the other children, and just below 1 or more side by side divs which display items owned by the user.
At the moment it works fine, but if the user's name (top div) is larger than the total width of the divs below, it will expand the parent div.
I'd like to only allow the bottom divs to expand the parent div and make the title div use the full parent div's width without being able to make it larger.
I created a fiddle about it: http://jsfiddle.net/mLxjL/2/
HTML:
<div class="matches">
<div class="match-container">
<div class="user-match-container">
<div class="match-owner user">You</div>
<div class="match">
<div class="thumbnail">
<img class="image-container" src="img-path">
<div class="thumbnail-count">2</div>
</div>
<div class="item-name">The Zeppelin of Consequence (Trading Card)</div>
</div>
</div> <span class="arrow">→</span>
<div class="user-match-container">
<div class="match-owner friend">PfaU- [W] King Arthurs Gold</div>
<div style="clear:both;"></div>
<div class="match">
<div class="thumbnail">
<img class="image-container" src="img-path">
<div class="thumbnail-count">2</div>
</div>
<div class="item-name">The Lost Hobo King</div>
</div>
</div>
</div>
</div>
CSS:
.match-container:before, .match-container:after {
content:"";
display:table;
}
.match-container:after {
clear:both;
}
.match-container {
border:1px solid #666;
background-image:url('img/stripes.png');
border-radius:5px;
padding:10px;
margin:10px;
float:left;
}
.match {
width:112px;
float:left;
margin: 0 2px;
}
.match .image-container {
width:112px;
height:130px;
display:block;
}
.match .item-name {
line-height:12px;
font-size:10px;
margin-top:4px;
text-align:center;
height:24px;
overflow:hidden;
clear:both;
}
.match-container .arrow {
float:left;
position:relative;
top:70px;
margin:5px;
}
.match-owner {
line-height:14px;
font-size:12px;
margin-top:4px;
text-align:center;
height:14px;
overflow:hidden;
margin-bottom:4px;
border:1px solid #666;
background-image:url('img/stripes.png');
border-radius:5px;
}
.match-owner.user {
background-color:green;
}
.match-owner.friend {
background-color:red;
}
.thumbnail-count {
position:relative;
top:-24px;
margin-bottom:-24px;
font-size:16px;
font-weight:bold;
border-top:1px solid white;
border-right:1px solid white;
border-top-right-radius: 7px;
font-size:18px;
background: rgb(160, 160, 160) transparent;
background: rgba(160, 160, 160, 0.70);
padding: 0 4px;
float:left;
}
.user-match-container {
float:left;
}
Is it possible to do this without using JavaScript?
You can use Absolute positioning
FIDDLE
position:absolute;
top:0;
left:0;
width:100%;
and on the container div :
padding-top: /*the height of the absolutly positioned child*/ ;
position:relative;
If you add the following styles you should achieve what you want:
.user-match-container {
position: relative;
padding-top: 22px;
}
.match-owner {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
top: 4px;
left: 0;
right: 0;
}
Example
i have this CSS:
<style type="text/css">
#box {
width:100%;
height:80px;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
#text, #text a {
font-size:16px;
color:#F36F25;
margin:10px;
}
#text:hover, #text a:hover {
color:#666666;
text-decoration:none;
}
#text img {
vertical-align: middle;
margin-right:20px;
}
</style>
its currently displaying the image and text inline but i have multiple images/text below each other. how can i make all the images align in the same position below each other?
here is a fiddle: http://jsfiddle.net/8dsTu/
http://jsfiddle.net/8dsTu/4/
<div id="text">
<img src="../images/icons/address.png" height="60" />
<div style="display:inline-block;">
Address 1,<br />
Address 2,<br />
County Post Code
</div>
</div>
Edit css:
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:left;
margin-left:100px;
}
Your HTML is invalid, id property is meant to be unique and you have a few <div> elements with id="text". To get what you want you'll have to: (jsFiddle)
replace all id="text" with class="text" and add <div class="caption"> to wrap each of the captions:
<div id="box">
<div class="box-inner">
<div class="text">
<img src="../images/icons/telephone.png" height="60" />
<div class="caption">00000 00 00 00</div>
</div>
<div class="text">
<img src="../images/icons/email.png" height="60" />
<div class="caption">sales#domain.co.uk</div>
</div>
<div class="text">
<img src="../images/icons/address.png" height="60" />
<div class="caption">Address 1,<br />Address 2,<br />County Post Code</div>
</div>
</div>
</div>
Adjust the css:
#box {
width:100%;
height:80px;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
.text, .text a {
font-size:16px;
color:#F36F25;
margin:10px;
}
.text:hover, .text a:hover {
color:#666666;
text-decoration:none;
}
.text img {
vertical-align: middle;
margin-right:20px;
}
.caption{ /* This is the new bit - display:inline-block does the trick. adjust margin-top to your needs */
display:inline-block;
vertical-align:top;
margin-top:15px;
}
#box {
width:100%;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
.text, .text a {
font-size:16px;
color:#F36F25;
}
.text:hover, .text a:hover {
color:#666666;
text-decoration:none;
}
.text img {
vertical-align: middle;
margin-right:20px;
width: 60px;
background: black;
float: left;
}
.text {
overflow: hidden;
width: 250px;
margin: 10px auto;
}
Something like this? But you must replace your id's with classes.
I would put the site name in the middle of this header but unfortunately I can not do it, I've tried many combinations but I just can not. I'll post the source
CSS
.header {
background-color:#00B9ED;
height:50px;
border-bottom:0px;
padding-left:auto;
padding-right:auto;
width:100%;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:1000px;
padding-top:0px;
padding-bottom:0px;
}
.logo {
width:150px;
margin: 0 auto;
}
.logo img {
width:150px;
height:50px;
}
.logo:hover {
height:50px;
background-color:#A9E2F3;
cursor:pointer;
}
HTML
<div class="header">
<div id="wrapper">
<div class="logo">
<img src="image.png" />
</div>
</div>
</div>
have no idea how can I do? Thanks
Use Below Code
<style>
.header {
background-color:#00B9ED;
height:50px;
border-bottom:0px;
padding-left:auto;
padding-right:auto;
width:100%;
}
#wrapper {
margin-left:auto;
margim-right:auto;
padding-top:0px;
padding-bottom:0px;
}
.logo {
text-align: center;
}
.logo img {
width:150px;
height:50px;
}
.logo:hover {
height:50px;
background-color:#A9E2F3;
cursor:pointer;
}
</style>
<div class="header">
<div id="wrapper">
<div class="logo">
<a>Bhavin<img src="image.png"></a>
</div>
</div>
</div>
Always try to code with standards. You can use text-align but it is for align paragraph or other elements with text. Insted align I would recommend to use margin:0 auto;width:150px;.
Here you got jsFiddle
try this
CSS
#wrapper {
margin: 0 auto;
padding-bottom: 0;
padding-top: 0;
width: 1000px;
}
.logo {
margin: 0 auto;
width: 150px;
}
HTML
<div class="header">
<div id="wrapper">
<div class="logo">
logo<img src="image.png" alt="LOGO"/>
</div>
</div>
</div>