i should make something like:
But it actualy looks like:
As u can see on images "left" class is moving out of its possition with no reason when i add image or text there, and i am 100% sure that text or image is smaller then width / height of block so i really dont know how to continue and fix this.
My HTML:
<div id="sub-content">
<span class="left">
<img src="images/foto.png">
<span class="topic-name"> Název topicu nebo článku </span>
</span>
<span class="middle"></span>
<span class="right"></span>
</div>
My CSS:
#sub-content{
margin-left: 20px;
margin-top: 0px;
background-image: url("images/sub_content_bg.png");
background-repeat: repeat-x;
height: 145px;
width: 987px;
display:inline-block;
}
#sub-content .left{
width: 326px;
height: 145px;
display: inline-block;
}
#sub-content .left img{
width: 122px;
height: 121px;
display: inline-block;
margin-top: 0px;
margin-left: 5px;
}
#sub-content .left .topic-name{
width: 150px;
margin-bottom: 130px;
margin-left: 10px;
display: inline-block;
vertical-align: top;
text-decoration: underline;
font-weight: 14px;
}
#sub-content .middle{
background-color: orange;
width: 326px;
height: 145px;
display: inline-block;
}
#sub-content .right{
background-color: yellow;
width: 326px;
height: 145px;
display: inline-block;
}
Please can somebody help me to style this or tell me what i am doing wrong?
p.s. Live preview can be also find on: funedit.com/andurit/new/
If you add overflow:hidden to the .left div, it will align correctly.
See: JSFiddle
(I also replaced the inner span with div since div shouldn't occur inside span).
Try to add a position propery to your CSS file. In #sub-content, add position:static;. This should make the elements render in order as they appear in the document.
Related
I have two elements that I want to place next to each other - one is a logo, the other is an "overflow" menu that will display a dropdown when clicked.
I want to have them scale so that the logo is at most 400px wide, and the menu button is always 1.5em wide and tall. The logo should stay vertically center aligned with the menu button, and the button should always be at the far right of the parent.
Tried using flexbox but I'm no CSS genius, I can't make it work. (btw, will we ever see CSS being more like the Android XML layout system? It'd be a breeze to use a LinearLayout with some gravity and weight to do something like this. With CSS it seems you always have to resort to hacks and hard-to-read solutions at some point)
So this is what it would look like when the logo is at it's maximum 400px width:
And here is what it would look like on a phone, where the logo needs to shrink to make room for the menu button:
Here's a solution using flexbox.
.header {
display: flex;
flex-direction: flex-end;
justify-content: space-between;
}
.logo {
background-image: url(http://placehold.it/400x50);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 50px;
max-width: 400px;
width: 100%;
}
.menu-toggle {
background-color: orange;
flex-shrink: 0;
height: 50px;
margin-left: 10px;
width: 50px;
}
<div class="header">
<div class="logo"></div>
<div class="menu-toggle"></div>
</div>
An easy way to do it is here.
.header{
margin:0px !important;
padding: 0px !important;
display: table;
width: 100%;
height: 1.5em;
overflow-y: hidden;
box-shadow: 0 1mm #aaa 5px;
vertical-align: middle !important;
position: relative;
}
#img-holder{
display: table-cell;
vertical-align: middle;
height : 100%;
background-color : blue;
max-width : 400px;
min-width : 250px;
padding: 0px !important;
}
#img {
display: table-cell;
max-width: 350px;
min-width: 150px;
height: 0.75em!important;
vertical-align: middle;
background-color: pink;
}
#menu-btn{
display: block;
margin: auto;
float: right;
height: 1.5em;
width: 1.5em;
background-color: orange;
border:none;
margin: 0px !important;
padding: none;
}
<div class="header">
<div id="img-holder"><span id="img"> Your Img</span></div>
<a id="menu-btn"></a>
</div>
I used line-height and vertical-align with calc.
html:
<div class="row">
<div class="menu-button"></div>
<div class="logo">
<img src="http://placehold.it/400x70">
</div>
</div>
css:
.menu-button {
background-color: #ffa200;
float: right;
height: 70px;
width: 70px;
}
img {
display: inline-block;
max-width: 100%;
vertical-align: middle;
}
.logo {
float: left;
height: 70px;
line-height: 70px;
max-width: calc(100% - 80px);
}
Demo: https://jsfiddle.net/sabeti05/1yg32uqo/
I am trying to align image inside DIV horizontally and vertically. Problem is that I tried several methods and none of them worked for me.
This is code that I am using:
CSS
img{
max-width:100%;
vertical-align: middle;
}
#slika {
float: center;
height: 126px;
width: 111px;
text-align: center;
}
HTML
<div id="slika">
<img src="images/2105602.png" width="auto" height="auto" alt="2105602.png">
</div>
jsfiddle: HERE
Can soemone share his thoughts with me? I can't find solution. It always stays aligned at top.
JSFiddle - DEMO
img {
max-width:100%;
top: 50%;
position: relative;
transform: translateY(-50%);
}
#slika {
height: 126px;
width: 111px;
text-align: center;
border: 1px #000 solid;
}
You can do it by adding a margin of 50% and then a top of -(imageheight/2)
img{
max-width:100%;
vertical-align: middle;
margin-top:50%;
position:relative;
top:-37px;
}
#slika {
float: left;
height: 126px;
width: 111px;
text-align: center;
border:1px solid red;
}
fiddle here: http://jsfiddle.net/dduygx0x/2/
Here is my soluton for your problem using the common table - table-cell way:
I wrapped you image in a new div:
<div id="slika">
<div class="img-wrapper">
<img ....>
</div>
</div>
and altered the CSS:
img{
max-width:100%;
}
.img-wrapper{
display: table-cell;
vertical-align: middle;
}
#slika {
display: table;
float: left;
height: 126px;
width: 111px;
text-align: center;
vertical-align: middle;
}
img{
max-width:100%;
}
.img-wrapper{
display: table-cell;
vertical-align: middle;
}
#slika {
border: 1px solid black;
display: table;
float: left;
height: 126px;
width: 111px;
text-align: center;
vertical-align: middle;
}
<div id="slika">
<div class="img-wrapper">
<img src="http://tommyvirtualnikatalog.com.hr/images/akcija/prehrana/2105602.png" width="auto" height="auto" alt="2105602.png">
</div>
</div>
The benefit of this solution ist that it ist absolut dynamical an can easely made responsive!!
instead of positioning it with hard-coded properties (which would change depending on the image) or using the transform property which wont work in older browsers you can simply wrap the image in a p and set the line-height to match the height of the box
p{
line-height: 126px;
margin: 0;
padding: 0;
}
JSFIDDLE
A solution I've often used is adding an empty span element next to the image, with
#slika span {
display: inline-block;
height: 100%;
vertical-align: middle;
}
The idea is that vertical-align is relative to its siblings, therefore a lone element has nothing to work with. The upside of this method is that its completely dynamic, no fixed pixels, works in older environments ( make sure to test that it meets your lowest-end requirements ) and does not affect the container div. The downside would be the extra html.
I have a panel. Which looks like this:
It's not best, but its a copy of things I have in a PSD. The problem is that when you check HTML <a> is before image display and it still make <a> as 0x0px, the problem is with all 3 images in that panel and I don't know how to fix it. Can somebody help me to make each <a> to be as big as that image and button are?
HTML:
<section class="panel">
<img src="images/right_banner.png">
<div class="panel_button"><span class="text">NAHLÁSIT CHEATERA</span></div>
<div class="panel_button"><span class="text">CW/TG REZERVACE</span></div>
</section>
CSS:
.panel {
width: 200px;
float: left;
margin-top: 13px;
}
.panel a {
width: 201px;
height: 200px;
display: inline-block;
}
.panel_button {
background-image: url("images/panel_blue_button.png");
background-repeat: repeat-x;
width: 198px;
height: 93px;
margin-top: 5px;
font-weight: 16px;
}
.panel_button span{
color: #ffffff;
text-align: center;
display: inline-block;
margin-top: 40px;
margin-left: 30px;
}
Live preview
The anchor element is currently an inline element. You could change it to either block or inline-block to achieve the desired results.
.panel > a {
display: block;
}
i cant get the divs to line up properly, they either jump out of the container or they overlap each other, i want the 3 divs spaced equally in the container but it wont work, each div is named accordingly to position and i have played around with clear and float settings but it just wont go
HTML :
<div class="triplecontainer">
<div class="leftbox">
<p> LEFT </p>
</div>
<div class="middlebox">
<P> MIDDLE </P>
</div>
<div class"rightbox">
<P> RIGHT</P>
</div>
</div>
CSS:
.triplecontainer {
height: 200px;
width: 950px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
}
.leftbox {
height: 180px;
width: 250px;
margin-top: 10px;
margin-left: 10px;
clear: none;
float: left;
}
.middlebox {
height: 180px;
width: 250px;
margin-top: 10px;
margin-left: 10px;
float:none;
clear:left
}
.rightbox {
height: 180px;
width: 250px;
margin-top: 10px;
margin-left: 10px;
float:none;
clear:both;
}
display: inline-block;
Add to all. That is what you are missing, you may still need to tweak pixel widths. Also, you have
clear: both;
Remove this! In fact, remove all clear commands.
I'd suggest using a fixed table display instead:
.triplecontainer {
display: table;
table-layout: fixed;
width: 100%;
}
.triplecontainer > div {
display: table-cell;
}
JSFiddle demo.
i wanna view an image in the size based on div that contains the image. i use yii framework.
i have a css code like this
#ukuran1{
margin: 10px;
width: 250px;
height: 250px;
background: red;
float: left;
display: block;
}
and a layout code like this
<div id="ukuran1"><?php echo $this->ukuran1 ?></div>
and the view code like this
$this->ukuran1 = CHtml::image(Yii::app()->request->baseUrl.'/images/Desert.jpg');
the image shows, but in the actual size of the image. i want the image to sized as the div.
what shoul i do?
thanks guys..
Try putting this rule in your CSS:
#ukuran1 img {
width:100% !important;
height:100% !important;
}
#ukuran1 {
margin: 10px;
width: 250px;
height: 250px;
background: red;
float: left;
display: block;
line-height: 250px;
text-align: center;
}
#ukuran1 img {
vertical-align: middle;
max-width: 250px;
}
Try This