Here is the code:
https://jsfiddle.net/Krzysiek_35/Ljybwz97/44/
body
{
left: 8%;
top: 10%;
position: absolute;
background-color: #6699cc;
}
.box3
{
background-color: #191919;
position: absolute;
padding: 15px 40px 0px;
font-size: 12px;
color: #DDDDDD;
font-family: Verdana;
font-size: 12px;
width: 400px;
}
.box3 > li
{
display: flex;
align-items: center;
}
.box3 > li span
{
margin: 5px;
}
<body>
<div class="box3">
<li>
<img src="pictures/contact/skype.png" width="34px" height="34px" />
<span>Skype name</span>
</li>
<li>
<img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
<span>Gadu-Gadu number</span>
</li>
<li>
<img src="pictures/contact/email.png" width="34px" height="34px" />
<span>Email address</span>
</li>
</div>
</body>
Unfortunately, these 2 variants are wrong!
Variant number 1:
.box3 > li img
{
margin-bottom: 15px;
}
Variant number 2:
.box3 > li img
{
padding: 0px 0px 15px;
}
padding -> 15px (as the upper space), 40px (as the left space) and 0px (as the bottom space)
How to make 15px of free space under the picture?
I will be very grateful for effective help.
just add margin bottom to LI
body
{
left: 8%;
top: 10%;
position: absolute;
background-color: #6699cc;
}
.box3
{
background-color: #191919;
position: absolute;
padding: 15px 40px 0px;
font-size: 12px;
color: #DDDDDD;
font-family: Verdana;
font-size: 12px;
width: 400px;
}
.box3 > li
{
display: flex;
align-items: center;
margin-bottom: 15px;
}
.box3 > li span
{
margin: 5px;
}
<div class="box3">
<li>
<img src="pictures/contact/skype.png" width="34px" height="34px" />
<span>Skype name</span>
</li>
<li>
<img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
<span>Gadu-Gadu number</span>
</li>
<li>
<img src="pictures/contact/email.png" width="34px" height="34px" />
<span>Email address</span>
</li>
</div>
First of all, you should never ever put position: absolute on your body element because that will make the element loose its box dimensions. Your body element is actually 0x0 px.
To address your issue, just remove the 0px in the padding, as I did in the code below.
[edit] OK, you wanted all images to have space beneath them, not just the single picture, which was asked in the OP. I added additional code below:
body
{
left: 8%;
top: 10%;
position: absolute;
background-color: #6699cc;
}
.box3
{
background-color: #191919;
position: absolute;
/* padding: 15px 40px 0px; */
padding: 15px 40px;
font-size: 12px;
color: #DDDDDD;
font-family: Verdana;
font-size: 12px;
width: 400px;
}
.box3 > li
{
display: flex;
align-items: center;
}
.box3 > li span
{
margin: 5px;
}
/* Added. select li that is followed by an li. */
.box3 > li ~ li {
margin-top: 15px;
}
<body>
<div class="box3">
<li>
<img src="pictures/contact/skype.png" width="34px" height="34px" />
<span>Skype name</span>
</li>
<li>
<img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
<span>Gadu-Gadu number</span>
</li>
<li>
<img src="pictures/contact/email.png" width="34px" height="34px" />
<span>Email address</span>
</li>
</div>
</body>
Related
This question already has answers here:
Vertically align text next to an image?
(26 answers)
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
Look that every text is displayed below the picture. I would like every text to be displayed perfectly in the center of the picture.
Here is the code:
https://jsfiddle.net/Krzysiek_35/Ljybwz97/37/
body {
left: 8%;
top: 10%;
position: absolute;
background-color: #6699cc;
}
.box3 {
background-color: #191919;
position: absolute;
padding: 15px 40px 15px;
font-size: 12px;
color: #DDDDDD;
font-family: Verdana;
font-size: 12px;
width: 400px;
}
.box3 > li {
display: block;
}
.box3 > li span {
display: inline-block;
vertical-align: middle;
}
<body>
<div class="box3">
<li>
<img src="pictures/contact/skype.png" width="34px" height="34px" />
<span>Skype name</span>
</li>
<li>
<img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
<span>Gadu-Gadu number</span>
</li>
<li>
<img src="pictures/contact/email.png" width="34px" height="34px" />
<span>Email address</span>
</li>
</div>
</body>
How do you make every text display perfectly in the center of the image?
I will be very grateful for effective help.
Set vertical-align: middle to img:
body
{
left: 8%;
top: 10%;
position: absolute;
background-color: #6699cc;
}
.box3
{
background-color: #191919;
position: absolute;
padding: 15px 40px 15px;
font-size: 12px;
color: #DDDDDD;
font-family: Verdana;
font-size: 12px;
width: 400px;
}
.box3 > li
{
display: block;
}
.box3 > li span
{
display: inline-block;
vertical-align: middle;
}
.box3 img{
vertical-align: middle;
}
<body>
<div class="box3">
<li>
<img src="pictures/contact/skype.png" width="34px" height="34px" />
<span>Skype name</span>
</li>
<li>
<img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
<span>Gadu-Gadu number</span>
</li>
<li>
<img src="pictures/contact/email.png" width="34px" height="34px" />
<span>Email address</span>
</li>
</div>
</body>
.box3 > li {
display: flex;
align-items: center;
}
you can use this also
.box3 > li span
{
display: inline-block;
vertical-align: middle;
margin-top:-30px;
}
I have these blocks of code that I want to stay center the entire time. But I am not sure how. I am hoping you guys could help me out here.
Here is the code
main {
width: 70%;
float: left;
clear: both;
border-right: 1px solid #331a00;
}
main ul {
margin-top: 1em;
margin: auto;
width: 100%;
margin: auto
}
.index {
float: left;
border: 3px solid #b88f61;
margin-top: 1em;
margin-right: 2em;
list-style: none;
}
main ul {
margin-left: 3em
}
.index:hover {
box-shadow: 1px 2px 3px 4px grey;
border: 3px solid #331a00;
}
.index a div h3 {
background-color: #331a00;
padding: .5em;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 100%;
text-align: center;
text-decoration: underline
}
.index a {
text-decoration: none;
}
.index a div img {
width: 150px;
height: 150px;
margin-bottom: -5px
}
#mobile_index {
display: none;
}
#medusa {
background-color: white;
;
}
#intro {
width: 70%;
margin: auto;
margin-bottom: 4em;
clear: both;
font-size: 120%
}
#intro h4 {
text-align: center;
padding: 1em 0;
font-size: 150%;
}
#intro h1 a {
text-decoration: none;
}
#intro h1 {
text-align: center;
}
/*ASIDE*/
aside figure {
width: 100%
}
aside {
width: 24%;
float: right;
margin-top: 1.5em;
}
aside h3 {
font-family: "Times New Roman", serif;
font-size: 1.5em;
font-weight: bolder;
padding-bottom: .5em;
text-align: center;
}
.popular {
display: block;
background-color: #331a00;
color: white;
padding: .5em;
margin-bottom: .3em;
margin-right: .1em;
margin-left: 0;
font-weight: bold;
}
aside figure figcaption {
margin-bottom: 1em;
width: 100%;
background-color: #331a00;
color: white;
font-weight: bold;
padding: .5em 0;
font-size: 1.2vw
}
form {
width: 100%
}
input[type="submit"] {
margin: auto
}
<main>
<h1 id="page_title">The Compendium of Greek Mythology</h1>
<ul>
<li class="index">
<a href="Compendium Gods.html">
<div>
<img src="images/The Gods.jpg" alt="Gods">
<h3>Gods</h3>
</div>
</a>
</li>
<li class="index">
<a href="#" alt="Heroes">
<div>
<img src="images/The Heroes.JPG">
<h3>Heroes</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Monsters.png" id="medusa" alt="Monsters">
<h3>Beasts</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Titans">
<h3>Titans</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Giants">
<h3>Giants</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Nymphs</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Constellations</h3>
</div>
</a>
</li>
</ul>
</main>
<aside>
<div>
<form method="get" action="http://www.google.com/search">
<h3>Search the Compendium</h3>
<input type="search" name="q" size="" maxlength="" placeholder="Google Search">
<input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz">
<input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br>
<input type="submit" name="search" value="Search">
</form>
</div>
<div>
<h3>Popular</h3>
<p class="popular">Zeus</p>
<p class="popular">Poseidon</p>
<p class="popular">Hercules</p>
<p class="popular">Dragon</p>
<p class="popular">Cyclops</p>
<p class="popular">Ares</p>
<p class="popular">Kronos</p>
<p class="popular">Perseus</p>
<p class="popular">Giants</p>
<p class="popular">Gaia</p>
<p class="popular">Oranos</p>
</div>
</aside>
Right now, the .index list items are staying on the left hand side of the main element. I've tried various things, but none of them worked out, which is why I am coming to you guys.
Remove padding and margin from <ul>, add text-align:center;
Remove the float:left; from .index and add display:inline-block;
main {
width: 70%;
float: left;
clear: both;
border-right: 1px solid #331a00;
}
main ul {
margin-top: 1em;
margin: auto;
width: 100%;
margin: auto;
}
/* Remove the float: left; from .index and add display: inline-block; */
.index {
display: inline-block;
border: 3px solid #b88f61;
margin-top: 1em;
margin-right: 2em;
list-style: none;
}
/* Remove padding and margin from UL, add text-align:center; */
main ul {
margin-left: 0;
padding-left: 0;
text-align: center;
}
.index:hover {
box-shadow: 1px 2px 3px 4px grey;
border: 3px solid #331a00;
}
.index a div h3 {
background-color: #331a00;
padding: .5em;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 100%;
text-align: center;
text-decoration: underline;
}
.index a {
text-decoration: none;
}
.index a div img {
width: 150px;
height: 150px;
margin-bottom: -5px
}
#mobile_index {
display: none;
}
#medusa {
background-color: white; /* Removed extra ; */
}
#intro {
width: 70%;
margin: auto;
margin-bottom: 4em;
clear: both;
font-size: 120%;
}
#intro h4 {
text-align: center;
padding: 1em 0;
font-size: 150%;
}
#intro h1 a {
text-decoration: none;
}
#intro h1 {
text-align: center;
}
/*ASIDE*/
aside figure {
width: 100%
}
aside {
width: 24%;
float: right;
margin-top: 1.5em;
}
aside h3 {
font-family: "Times New Roman", serif;
font-size: 1.5em;
font-weight: bolder;
padding-bottom: .5em;
text-align: center;
}
.popular {
display: block;
background-color: #331a00;
color: white;
padding: .5em;
margin-bottom: .3em;
margin-right: .1em;
margin-left: 0;
font-weight: bold;
}
aside figure figcaption {
margin-bottom: 1em;
width: 100%;
background-color: #331a00;
color: white;
font-weight: bold;
padding: .5em 0;
font-size: 1.2vw
}
form {
width: 100%
}
input[type="submit"] {
margin: auto
}
<main>
<h1 id="page_title">The Compendium of Greek Mythology</h1>
<ul>
<li class="index">
<a href="Compendium Gods.html">
<div>
<img src="images/The Gods.jpg" alt="Gods">
<h3>Gods</h3>
</div>
</a>
</li>
<li class="index">
<a href="#" alt="Heroes">
<div>
<img src="images/The Heroes.JPG">
<h3>Heroes</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Monsters.png" id="medusa" alt="Monsters">
<h3>Beasts</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Titans">
<h3>Titans</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Giants">
<h3>Giants</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Nymphs</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Constellations</h3>
</div>
</a>
</li>
</ul>
</main>
<aside>
<div>
<form method="get" action="http://www.google.com/search">
<h3>Search the Compendium</h3>
<input type="search" name="q" size="" maxlength="" placeholder="Google Search">
<input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz">
<input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br>
<input type="submit" name="search" value="Search">
</form>
</div>
<div>
<h3>Popular</h3>
<p class="popular">Zeus</p>
<p class="popular">Poseidon</p>
<p class="popular">Hercules</p>
<p class="popular">Dragon</p>
<p class="popular">Cyclops</p>
<p class="popular">Ares</p>
<p class="popular">Kronos</p>
<p class="popular">Perseus</p>
<p class="popular">Giants</p>
<p class="popular">Gaia</p>
<p class="popular">Oranos</p>
</div>
</aside>
I cant seem to get three divs to stay inline. The third always goes to another line. I've tried display inline block, float left on the wrapper, i've tried changing the sizes of the divs and several other things and i cant get it to work. I haven't found another stack overflow question that can solve my problem. Heres the html and css.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin:0;
padding:0;
background-image: url("download.png");
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px;
text-decoration: none;
float: left;
}
li a:hover {
background-color: #111111;
}
.blue {
position:absolute;
width:100%;
float:right;
background-color:#62ADDB;
height:5px;
}
.body {
background-color: white;
width: 100%;
height: 600px;
position: absolute;
font-family: 'Roboto', sans-serif;
}
.tdes {
font-size: 1.2em;
}
.des {
background-color: #D0DAE0;
width: 100%;
padding: 30px;
width: 100%;
position: absolute;
}
.profilePic {
border-radius: 50%;
width: 30%
}
.p1 {
right: 30%;
float: left;
background-color: white;
padding: 10px;
width: 30%;
height: 300px;
}
.p2 {
right: 60%;
float: center;
background-color: white;
padding: 10px;
width: 30%;
height: 300px;
}
.p3 {
right: 0%;
float: right;
background-color: white;
padding: 10px;
width: 30%;
height: 300px;
}
a {
text-decoration: none;
}
.des a:link{
color: #000000;
}
.inline {
display:inline;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<ul>
<li>Minds Gaming</li>
<li> MG Channel</li>
<li> 18+</li>
<li>Contact us</li>
</ul>
<div class="blue"></div>
<br />
<br />
<div class="body"><center>
<div class="des">
<br />
<h2>
Welcome to the MindsGaming Community!
</h2>
<p class="tdes">
The #1 Community on Minds, We have the best open groups and members!
<br />Make sure to check out as many groups and fun members you can!
</p>
<br /> <br /> <br />
Our supporters:
<br /><br /><br />
<div class="p1">
<img class="profilePic" src="test.png">
<br />
#channel
<br /> <br />
Description about person
</div>
<div class="p2">
<img class="profilePic" src="test.png">
<br />
#channel
<br /> <br />
Description about person
</div>
<div class="p3">
<img class="profilePic" src="test.png">
<br />
#channel
<br /> <br />
Description about person
</div>
</center>
</div>
</div>
</body>
</html>
There's no float: center in CSS. You need to give this way:
.p2 {
right: 60%;
float: left; /* Change this as well. */
background-color: white;
padding: 10px;
width: 30%;
height: 300px;
margin: 0 5px; /* And add the margin. */
}
Preview:
im new to web design, getting a understanding for it now though and enjoying it, ive searched my question for awhile now and getting no where with it, hope someone can help me out!
So my problem is, my left margin is set at 25% and the right margin is set at 25%
my width of the div is set to 750px
so when i go to resize the screen, the right margin shrinks but the left margin stays at 25%!!!!
this means when viewing it on my mobile or a smaller screen, the website looks like its more to the right hand side...
my website is http://lawrencetrigg.tk if anybody could suggest what my issue is, would help me loads!
Thanks guys!
a:-webkit-any-link{
text-decoration:none !important;
}
body {
background-color: black;
}
#top {
position: absolute;
top: 0px;
background-image: url("images/background-top-one.jpg");
background-repeat: repeat-x;
left: 25%;
right: 25%;
width: 750px;
height: 100%;
text-align:center;
margin-left: auto;
margin-right: auto;
}
#bottom1 {
position: fixed;
background-image: url("images/background-bottom-one.jpg");
bottom: 0px;
left: 25%;
right: 25%;
width: 750px;
height: 150px;
color: black;
text-align:center;
margin-left: auto;
margin-right: auto;
}
div.transbox {
font-size: 16px;
margin: 30px;
background-color: #AAAAAA;
border: 1px solid black;
opacity: 0.7;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
div.col-top-one {
float: left;
width: 100%;
font-size: 20px;
padding: 1px;
height: 250px;
border-color: white;
color: white;
top: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
top: 0px;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:60px; margin-left:-160px;
width:300px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute;
border:2px solid #FFF; color:#EEE;
background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:2px;
box-shadow: 0px 0px 8px 4px #666;
/*opacity: 0.8;*/
}
</style>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lawrence Trigg</title>
<link rel="images/favicon.ico" href="images/favicon.ico">
<style type="text/css">
a:-webkit-any-link{
text-decoration:none !important;
}
body {
background-color: black;
}
#top {
position: absolute;
top: 0px;
background-image: url("images/background-top-one.jpg");
background-repeat: repeat-x;
left: 25%;
right: 25%;
width: 750px;
height: 100%;
text-align:center;
margin-left: auto;
margin-right: auto;
}
#bottom1 {
position: fixed;
background-image: url("images/background-bottom-one.jpg");
bottom: 0px;
left: 25%;
right: 25%;
width: 750px;
height: 150px;
color: black;
text-align:center;
margin-left: auto;
margin-right: auto;
}
div.transbox {
font-size: 16px;
margin: 30px;
background-color: #AAAAAA;
border: 1px solid black;
opacity: 0.7;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
div.col-top-one {
float: left;
width: 100%;
font-size: 20px;
padding: 1px;
height: 250px;
border-color: white;
color: white;
top: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
top: 0px;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:60px; margin-left:-160px;
width:300px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute;
border:2px solid #FFF; color:#EEE;
background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:2px;
box-shadow: 0px 0px 8px 4px #666;
/*opacity: 0.8;*/
}
<div id="top">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Education</li>
<li>Skills</li>
<li>Work</li>
<li>Gym</li>
<li>Download CV</li>
<a href="https://www.facebook.com/Lawrencetrigg" class="tooltip">
<img src="images/icons/social-facebook32.png" onmouseover="this.src='images/icons/social-facebook322.png'" onmouseout="this.src='images/icons/social-facebook32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-facebook32.png" style="float:right;" />
<strong>Facebook</strong><br />
</span>
</a>
<a href="https://www.steam.com" class="tooltip">
<img src="images/icons/social-steam32.png" onmouseover="this.src='images/icons/social-steam322.png'" onmouseout="this.src='images/icons/social-steam32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-steam32.png" style="float:right;" />
<strong>Steam</strong><br />
</span>
</a>
<a href="https://www.youtube.com" class="tooltip">
<img src="images/icons/social-youtube32.png" onmouseover="this.src='images/icons/social-youtube322.png'" onmouseout="this.src='images/icons/social-youtube32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-youtube32.png" style="float:right;" />
<strong>Youtube</strong><br />
</span>
</a>
<a href="https://www.dropbox.com" class="tooltip">
<img src="images/icons/social-dropbox32.png" onmouseover="this.src='images/icons/social-dropbox322.png'" onmouseout="this.src='images/icons/social-dropbox32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-dropbox32.png" style="float:right;" />
<strong>Dropbox</strong><br />
</span>
</a>
<a href="https://www.skype.com" class="tooltip">
<img src="images/icons/social-skype32.png" onmouseover="this.src='images/icons/social-skype322.png'" onmouseout="this.src='images/icons/social-skype32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-skype32.png" style="float:right;" />
<strong>Skype</strong><br />
</span>
</a>
<a href="https://www.google.com" class="tooltip">
<img src="images/icons/social-googleplus32.png" onmouseover="this.src='images/icons/social-googleplus322.png'" onmouseout="this.src='images/icons/social-googleplus32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-googleplus32.png" style="float:right;" />
<strong>Google Plus</strong><br />
</span>
</a>
</ul>
<div class="col-top-one">
<div class="transbox">
<p>Lawrence William Trigg</p>
<p>I am a bright, young and ambitious individual who is self-motivated and organised. I can work well under pressure and am able to meet targets and deadlines, I am eager to learn new skills and feel the ones currently gained give a vast and varied history to draw from and implement in new situations. Working well within a team is something I enjoy, however I am also capable of working under my own initiative. </p>
</div>
<div class="transbox">
<p>Under Construction</p>
</div>
</div>
</div>
<div id="bottom1">
<a href="#" class="tooltip">
<img src="images/icons/icon-mobile1.png" onmouseover="this.src='images/icons/icon-mobile2.png'" onmouseout="this.src='images/icons/icon-mobile1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-mobile1.png" style="float:right;" />
<strong>Mobile Number</strong><br />
0481718550
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-email1.png" onmouseover="this.src='images/icons/icon-email2.png'" onmouseout="this.src='images/icons/icon-email1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-email1.png" style="float:right;" />
<strong>Email Address</strong><br />
lawrencetrigg#me.com
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-picture1.png" onmouseover="this.src='images/icons/icon-picture2.png'" onmouseout="this.src='images/icons/icon-picture1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-picture1.png" style="float:right;" />
<strong>Name</strong><br />
Lawrence William Trigg
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-home1.png" onmouseover="this.src='images/icons/icon-home2.png'" onmouseout="this.src='images/icons/icon-home1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-home1.png" style="float:right;" />
<strong>Test</strong><br />
Home
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-favorite1.png" onmouseover="this.src='images/icons/icon-favorite2.png'" onmouseout="this.src='images/icons/icon-favorite1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-favorite1.png" style="float:right;" />
<strong>Test</strong><br />
Favorite
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-website1.png" onmouseover="this.src='images/icons/icon-website2.png'" onmouseout="this.src='images/icons/icon-website1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-website1.png" style="float:right;" />
<strong>Test</strong><br />
Website
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-dob1.png" onmouseover="this.src='images/icons/icon-dob2.png'" onmouseout="this.src='images/icons/icon-dob1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-dob1.png" style="float:right;" />
<strong>Date Of Birth</strong><br />
8th May 1989 / 26 Years old
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-location1.png" onmouseover="this.src='images/icons/icon-location2.png'"
<!-- begin snippet: js hide: false -->
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-location1.png" style="float:right;" />
<strong>Test</strong><br />
Location
</span>
</a>
</div>
Change left and right position on this element by that :
#top {
position: absolute;
top: 0px;
background-image: url("images/background-top-one.jpg");
background-repeat: repeat-x;
left: 0;
right: 0;
width: 750px;
height: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
And this position of this element by that :
#bottom1 {
position: fixed;
background-image: url("images/background-bottom-one.jpg");
bottom: 0px;
left: 0;
right: 0;
width: 750px;
height: 150px;
color: black;
text-align: center;
margin-left: auto;
margin-right: auto;
}
And now it should works :)
I have a content with Title, image and description. I have 3 differents contents, which i have to put side by side. What would be better do achive this ? I did with <ul>. But the image wasnts below title, and description below image, so i just but after <li></li> a break, and it worked. But in IE it doesnt.
Here is what i got - > http://jsfiddle.net/5xfR9/12/
<div id="content">
<ul>
<li>
<h3>Custom clearance</h3><br/>
<img src="..." style="width:360px; height: 160px;" alt="Custom clearance" /><br/>
<p style="width:360px;">...<br />Learn more <img src="images/arrow.png" alt="learn more" style="width:6px; height:9px; border: 0px;"/><br/>
</p>
</li>
<li>
<h3>Cargo Inspections</h3><br/>
<img src="..." style="width:360px; height: 160px;" alt="Custom clearance" /><br/>
<p style="width:360px; padding">...<br />Learn more <img src="images/arrow.png" alt="learn more" style="width:6px; height:9px; border: 0px;"/>
</p><br/>
</li>
<li>
<h3>Our Location</h3><br/>
<img src="..." style="width:360px; height: 160px;" alt="Custom clearance" /><br/>
<p style="width:360px;">....<br />Learn more <img src="images/arrow.png" alt="learn more" style="width:6px; height:9px; border: 0px;"/>
</p><br/>
</li>
</ul>
</div>
using this CSS
#content {
width: 100%;
min-height: 450px;
display: block;
padding-bottom:40px;
}
#content ul li {
display: inline;
list-style: none;
float: left;
min-width:32%;
}
#content ul li > h3 {
text-decoration: none;
display:block;
float:left;
font-size: 24px;
margin: 0 0 0 20px;
font-family: gothamlight;
padding: 10px 20px 10px 20px;
}
#content ul li > img {
display: block;
float:left;
margin: 0 0 0 10px;
padding: 0px 25px 0px 25px;
}
#content ul li > p {
text-decoration: none;
line-height: 1.3;
display:block;
color: #404041;
float:left;
font-size: 14px;
margin: 0 0 0 20px;
padding: 5px 20px 5px 20px;
display: block;
}
I guess I did it wrong, I put <br /> after a <li></li>, so that content would be vertical.
But of course IE is smart and it shows Content 1 for the whole width page, and other content is after the first one.