I have a problem with aligning images in div which is floated to left.
in the code below how to align "logo.jpg" to center vertically and horizentally?
Thank you.
<!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" />
<title>layout</title>
<style type="text/css">
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form {font-size:11px; margin:0;padding:0;line-height: 150%;}
ul,ol,dl {list-style:none}
img {border:0;vertical-align:top;}
ul {list-style:none; padding:0; margin:0;}
#_layout {margin:0 auto; width:980px;}
#_top_cntr {width:980px; height:150px; background:#fff; margin-bottom:10px;}
/* top_cntr */
#_brand {height:110px; background:url(images/top_bg.jpg);}
#_left_logo {width:280px; height:110px; float:left; padding-left:10px;}
#_right_logo {width:680px; height:110px; float:right; margin-left:10px;}
</style>
</head>
<body>
<div id="_layout">
<div id="_top_cntr">
<div id="_brand">
<div id="_left_logo">
<img src="images/logo.jpg"/>
</div>
<div id="_right_logo">
</div>
</div>
</div>
</div>
</body>
</html>
you have to use vertical-align: middle but as it works only on element with display: table-cell you need to add it also, like in this example (I have modified the style of #_left_logo).
You can take a look at this article, there are a couple of other methods how you can vertically center the content of your div
I think this would typically be done through CSS.
<div id="_brand">
<a id="_left_logo" class="img-replacement"> <!-- best practice to make the logo a link -->
Now you can even throw text Here as a fall back when the image doesn't work
</a>
<div id="_right_logo">
</div>
</div>
And then:
.img-replacement {
display: block;
text-indent: -9999px;
}
#_left_logo {
width:280px;
height:110px;
float:left;
padding-left:10px;
/* and then: */
background: url("/images/logo.png") center center no-repeat;
}
If you know the height of the height of the image, you can do it with position: absolute. For example, image size 200x60.
#_left_logo {width:280px; height:110px; float:left; padding-left:10px; position: relative;}
#_left_logo img {width:200px; height:60px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -30px; }
Related
The following code (jsfiddle) implements an image viewer in CSS
<!DOCTYPE html>
<head>
<title>Trains, Planes, Automobiles, and Boats</title>
<meta charset="UTF-8">
<style type="text/css" media="screen">
html, body { background:#ddd; margin:0; padding:0; height:100%; }
#foo { position:absolute; left:5%; width:60%; top:5%; height:80%; background:#dcc; }
#bar { position:absolute; left:70%; width:25%; top:5%; height:80%; background:#cbd; vertical-align: middle; }
.fullwidth { width: 100%; vertical-align: middle; }
.vcenter {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="foo">
<div class="vcenter">
<img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/19623/philrich123-A380.png" />
</div>
</div>
<div id="bar">
<img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/4703/ryanlerch-Steam-Train-Engine.png" />
<img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/19623/philrich123-A380.png" />
<img class="fullwidth" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
<img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/196201/Model-T-Ford.png&disposition=attachment" />
<img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/24418/Jarno-Boat-1.png&disposition=attachment" />
</div>
</body>
How do I fix the following two bugs?
The bar side does not scroll.
The image in the foo side is not centered. The intention is to make all the image visible in the left side while filling its container in one dimension (vertical/horizontal) and being scaled in the other (horizontal/vertical) to remain at 1:1 ratio.
I'm not sure I understood your question, but if you only want to make your right div scrollable then add this to your css
#bar{
overflow: scroll;
}
Example
To answer your second question (vertically centering the left image), add these rules to your vcenter class
position: relative;
top: 50%;
transform: translateY(-50%);
Example 2
i need your assistance. I am using the below design, but want to set it so that at a set size the columns will no long compress\shrink. I have tried setting "min-width", but just cant get it to work. Please help.
http://matthewjamestaylor.com/blog/equal-height-columns-4-column.htm
Thanks in advance,
Edit: Code added.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style media="screen" type="text/css">
/* <!-- */
body {
margin:0;
padding:0;
}
#header h1,
#header h2,
#header p {
margin-left:2%;
padding-right:2%;
}
#active2 #tab2,
#active3 #tab3,
#active4 #tab4,
#active5 #tab5 {
font-weight:bold;
text-decoration:none;
color:#000;
}
#footer {
clear:both;
float:left;
width:100%;
}
#footer p {
margin-left:2%;
padding-right:2%;
}
/* Start of Column CSS */
#container4 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#b2f0f9; /* column 4 background colour */
}
#container3 {
clear:left;
float:left;
width:100%;
position:relative;
right:25%;
background:#89ffa2; /* column 3 background colour */
}
#container2 {
clear:left;
float:left;
width:100%;
position:relative;
right:25%;
background:#ffa7a7; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:25%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:21%;
position:relative;
left:77%;
overflow:hidden;
}
#col2 {
float:left;
width:21%;
position:relative;
left:81%;
overflow:hidden;
}
#col3 {
float:left;
width:21%;
position:relative;
left:85%;
overflow:hidden;
}
#col4 {
float:left;
width:21%;
position:relative;
left:89%;
overflow:hidden;
}
/* --> */
</style>
</head>
<body id="active4">
<div id="header">
HEADER CONTENT
</div>
<div id="container4">
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">
<!-- Column one start -->
<h2>Equal height columns</h2>
<p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>
<!-- Column one end -->
</div>
<div id="col2">
<!-- Column two start -->
<h2>No Images</h2>
<p>This four column layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and HTML?</p>
<!-- Column two end -->
</div>
<div id="col3">
<!-- Column three start -->
<h2>Valid XHTML strict markup</h2>
<p>The HTML in this layout validates as XHTML 1.0 strict.</p>
<!-- Column three end -->
</div>
<div id="col4">
<!-- Column four start -->
<h2>Cross-Browser Compatible</h2>
<p>This 4 column layout has been tested on the following browsers:</p>
<!-- Column four end -->
</div>
</div>
</div>
</div>
</div>
<div id="footer">
FOOTER CONTENT
</div>
</body>
Would be interestin waht you tried to see where your error is.
When i add the background colors and min-width to col1, ... it works for me:
#col1 {
background: none repeat scroll 0 0 blue;
float: left;
left: 77%;
min-width: 200px;
overflow: hidden;
position: relative;
width: 21%;
}
I'm trying to center vertically a div inside an inline-block,
I used this inline-block to get automatically size of child in order to center my div.
The problem is my children div are floating... in order to constrain it to the left/right position.
Here is how the HTML look like :
<span class="block_container">
<div class="block_text"> <!-- float:right -->
<h1>TITLE</h1>
<p>lorem ipsum</p>
</div>
<div class="block_image"> <!-- float:left -->
<img src="test.png"></img>
</div>
</span>
However, I can't figure out this problem : http://jsfiddle.net/kl94/nH2sd/
Edit:
Here is what I want :
Here is what I tried :
http://jsfiddle.net/kl94/nH2sd/
To get the actual vertical alignment working the way you want it to work as per your attached screenshot, you have to change a few things.
1. Adding a display:table-row; to the parent block.
2. Removing all floats and replacing it with display:table-cell;
This will enforce the exact characteristic of vertical-alignment to co-exist and work the way you want it to work as per the attached screenshot.
Here is the WORKING DEMO
The HTML:
<span class="block_container">
<div class="block_image">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"></img>
</div>
<div class="block_text">
<div class="bgColor">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
<div>
</div>
</span>
The CSS:
.block_text {
/*background: red;*/
/*float: right;*/
width: 60%;
display:table-cell;
vertical-align:middle;
}
.block_image {
background: yellow;
/*float: left;*/
width: 40%;
display:table-cell;
}
.block_image img {
width: 100%;
max-width: 300px;
height:auto;
}
.block_container {
background:teal;
/*display:inline-block;*/
display:table-row;
}
.bgColor{background:red;}
Hope this helps.
You could try something like this: http://codepen.io/pageaffairs/pen/LlEvs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.block_text {
background: red;
display:inline-block;
vertical-align: middle;
}
img {
width: 40%;
max-width: 300px;
vertical-align:middle;
background: yellow;
}
.block_container {
background:teal;
display: inline-block;
}
</style>
</head>
<body>
<div class="block_container">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"><div class="block_text">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
</div>
</div>
</body>
</html>
You can try to add this:
margin-top: 13%; at your .block_text selector in CSS.
I need a way to make a div repeat a certain number (36) of times vertically, with 1px of space between each one. The divs are absolutely positioned, so styling each one individually would be a ton of CSS.
I don't mind putting 36 divs into the HTML directly, although I'd prefer not to, but styling each one would be inefficient.
How about nest them?
you can nest them with relative positioning or maybe some margin: http://jsfiddle.net/zWbUu/
HTML
div id="container">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square"></div>
</div>
</div>
</div>
</div>
</div>
</div>
​
CSS:
#container {
position: absolute;
top: -21px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
position: relative;
top: 21px;
}​
If you need some content int them, you can use a nested absolute positioned div or this trick: http://jsfiddle.net/zWbUu/1/
HTML:
<div id="container">1 (doesn't apear)
<div class="square">2
<div class="square">3
<div class="square">4
<div class="square">5
<div class="square">6
<div class="square">7</div>
</div>
</div>
</div>
</div>
</div>
</div>
​CSS:
#container {
position: absolute;
top: -20px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
line-height: 20px;
position: relative;
top: 1px;
color: #fff;
text-align: center;
}​
As others have said, you cannot do this using pure HTML or CSS.
If you wanted to do it with PHP, you could do something like this:
Say that your div has a class called "mydiv."
This class should have
Position:absolute Height:10px Width:10px Border-radius:4px
just like you said. In addition to those, add a 1px top margin.
Your CSS should now look kinda like this:
.mydiv {
position:absolute;
height:10px;
width:10px;
border-radius:4px;
margin-top:1px;
}
To make your div repeat, put some code like the following inside your HTML where you want it to go.
<?php
for ($i = 1; $i <= 36; $i++) {
echo "<div class='mydiv'>your div</div>";
}
?>
Like I said, this uses PHP. If you've never used PHP before, then you should check if your webserver supports it. See this for a bit more info on using PHP inside HTML:
http://www.ntchosting.com/php/php-in-html.html
This code probably isn't perfect but I'm sure you'll be able to work with it.
This is not possible with absolute positioning, because as you stated with absolute positioning you must define the coordinates of the objective as it is taken out of the document flow.
You can do this with floats however. Take the following code for example:
<!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">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#holder{
width:15px;
margin: 30px auto;
padding: 1px 1px 0 1px;
clear: both;
}
.box{
width:10px;
height:10px;
margin-bottom: 1px;
background-color: #3F6;
float:left;
}
</style>
</head>
<body>
<div id="holder">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
By making the holder div less than the width of two box divs you force the next box div to appear on a newline below the previous one without giving it an exact positioning value. Then just give it a margin to add the spacing.
The only way you can do this with one div would be to create an image of what the current div looks like, with 1px of whitespace. This way, you can create a fixed width/height div that has the background of the image set to repeat. This will give the illusion you want with only one div.
Otherwise, as already stated, you will need x amount of divs to get the repetition you need. This can be easily achieved using jQuery or something similar but if you really only want one div, then the background-image may be the way to go.
If i am right display:inline should display div on the same line without any line break. This is my web page where display:inline simply makes my div invisible:
<html>
<head>
<style type="text/css">
.body{
max-width:3072px;
min-width:3072px;
margin:0px auto;
background:#293231;
}
.page1{
background:url('Main.jpg') no-repeat;
width:1024px;
height:211px;
}
.page2{
background:url('Page2.jpg') no-repeat;
width:1024px;
height:211px;
display:inline;
}
.page3{
background:url('Page3.jpg') no-repeat;
width:1024px;
height:211px;
display:inline;
}
.wrapper{
display:block;
width:100%;
height:auto;
}
</style>
</head>
<body class="body">
<div class="wrapper">
<div class="page1">
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>
I can see divs with class = page1, but page2 and page3 are invisible.
A non-block element can't have height/width specified like that (and with no content inside, it'll have nothing to give it size) - instead you want inline-block, like this:
display: inline-block;
You can see a full list of options for display here
Unfortunately, display: inline-block is not supported by older versions of IE. You can do this by floating your three inner div tags left, and undoing the float on the containing element. Here is the complete example (see my comments for the relevant changes):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.body { max-width:3072px; min-width:3072px; margin:0px auto; background:#293231; }
.page1{ background:url('Main.jpg') no-repeat; }
.page2 { background:url('Page2.jpg') no-repeat; }
.page3{ background:url('Page3.jpg') no-repeat; }
/* These next two lines are my changes. */
/* Float these guys left */.page1, .page2, .page3 { width:1024px; height:211px; float: left; }
/* Add overflow: hidden to "undo" the floating */.wrapper{ overflow: hidden; width:100%; height:auto; }
</style>
</head>
<body class="body">
<div class="wrapper">
<div class="page1">
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>