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.
Related
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>
I have translated an image up to go behind a div to make it fit the design, however it leaves a white space below it, where the original image would be. How would I go about fixing this?
This is for a website, I've tried translating the sitemap up however then there is even more white space below the sitemap.
HTML:
<div class="portfolioImage" id="images">
<div class="portLogoImages" id="myDIV5">
<img src="./resources/portfolio/logoportfolio/logoPortfolio1.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio2.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio3.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio4.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio5.png" alt="" class="portfolioImages">
</div>
</div>
<div class="sitemap portAdjustment"> <!-- SITEMAP -->
<div class="sitemapItems">
<img src="./resources/sitemapLogo.png" alt="" class="sitemapLogo" width="166.3px" height="22px">
<div class="links">
<p >Home</p>
<p>Products</p>
<p>Portfolio</p>
<p>About Us</p>
<p>Contact Us</p>
</div>
<div class="finePrint">
<p>X is a part of the family company X that specialises in custom made design ranging from logo design to apparel design.</p>
<p>X</p>
</div>
</div>
</div>
CSS:
.portfolioImages {
border: none;
font-size: 0px;
transform: translateY(-25px);
max-width: 100%;
}
.portLogoImages {
border: none;
font-size: 0px;
transform: translateY(-25px);
max-width: 100%;
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.sitemap {
width: 100%;
height: 215px;
background-color: #f4f4f4;
padding: 30px 0px 30px 0px;
display: block;
text-align: center;
}
.finePrint {
padding-top: 70px;
color: #c8c8c8;
}
.sitemapItems {
padding: 0px 30px 0 30px;
display: block;
}
.sitemap a {
text-decoration: none;
color: #c8c8c8;
transition-duration: .2s;
display: inline-block;
padding-right: 4px;
}
.sitemap a:hover {
text-decoration: underline;
color: #434343;
}
I expect there to be no white space however there is still white space below it.
Just use margin-top instead transform
https://codepen.io/markoslk/pen/qNgWGN
h1 {
color: white;
font-size: 90px;
text-align: center;
width: 950px;
height: 100px;
margin: auto;
margin-top: 20px;
border-radius: 5px;
background-color: darkblue;
}
#slogan {
font-size: 40px;
text-align: center;
margin: auto;
margin-top: -3px;
font-family: Agency FB;
width: 940px;
height: 50px;
background-color: white;
border: 5px solid darkblue;
}
#table {
display: inline-block;
width: 225px;
height: 170px;
margin-top: 59.25px;
margin-left: 59.25px;
text-align: left;
background-color: #c0c0c0;
color: white;
border-radius: 5px;
}
.content {
text-align: center;
border-radius: 5px;
background-color: darkblue;
}
ul {
font-family: Georgia;
text-decoration: none;
list-style-type: none;
padding: 0px;
margin: 0px;
margin-top: -10px;
margin-left: 10px;
}
a {
text-decoration: none;
color: white;
}
.div {
width: 940px;
height: 525px;
margin: auto;
border-radius: 5px;
background-color: white;
border: 5px solid darkblue;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
img {
width: 25px;
height: 25px;
padding-right: 10px;
}
<h1>NBA 2016</h1>
<p id="slogan"><i>Basketball never stops</i>
</p>
<div class="div">
<div id="table">
<h2 class="content">Atlantic</h2>
<ul>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/bos.png&h=25&w=25">Boston Celtics
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/bkn.png&h=25&w=25">Brooklyn Nets
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/ny.png&h=25&w=25">New York Knicks
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/phi.png&h=25&w=25">Philadelphia 76ers
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/tor.png&h=25&w=25">Toronto Raptors
</li>
</ul>
</div>
<div id="table">
<h2 class="content">Central</h2>
<ul>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/chi.png&h=25&w=25">Chicago Bulls
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/cle.png&h=25&w=25">Cleveland Cavaliers
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/det.png&h=25&w=25">Detroit Pistons
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/ind.png&h=25&w=25">Indiana Pacers
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/mil.png&h=25&w=25">Milwaukee Bucks
</li>
</ul>
</div>
<div id="table">
<h2 class="content">Northwest</h2>
<ul>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/den.png&h=25&w=25">Denver Nuggets
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/min.png&h=25&w=25">Minnesota Timberwolves
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/okc.png&h=25&w=25">Oklahoma City Thunder
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/por.png&h=25&w=25">Portland Trail Blazers
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/utah.png&h=25&w=25">Utah Jazz
</li>
</ul>
</div>
<div id="table">
<h2 class="content">Pacific</h2>
<ul>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/gsw.png&h=25&w=25">Golden State Warriors
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/lac.png&h=25&w=25">LA Clippers
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/lal.png&h=25&w=25">Los Angeles Lakers
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/pho.png&h=25&w=25">Phoenix Suns
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/sac.png&h=25&w=25">Sacramento Kings
</li>
</ul>
</div>
<div id="table">
<h2 class="content">Southeast</h2>
<ul>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/atl.png&h=25&w=25">Atlanta Hawks
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/cha.png&h=25&w=25">Charlotte Hornets
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/mia.png&h=25&w=25">Miami Heat
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/orl.png&h=25&w=25">Orlando Magic
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/was.png&h=25&w=25">Washington Wizards
</li>
</ul>
</div>
<div id="table">
<h2 class="content">Southwest</h2>
<ul>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/dal.png&h=25&w=25">Dallas Mavericks
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/hou.png&h=25&w=25">Houston Rockets
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/mem.png&h=25&w=25">Memphis Grizzlies
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/no.png&h=25&w=25">New Orleans Pelicans
</li>
<li>
<img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/sas.png&h=25&w=25">San Antonio Spurs
</li>
</ul>
</div>
</div>
Rest of the code is on codepen link. There seems to be some padding or something on the top of my divs. There wasn't one until I used display: inline-block. I can fit in the title of each div but that would have to be done with setting the adequate margin to it. But I don't want to move gray area,I want it to be where it is because I tried to center it as much as possible. (Is there more efficient way to do it? I did it by calculating margins and dividing. Basically I want all margins to be the same (bottom,top,right,left)) I want title,along with the list to go a bit up to fit the gray area perfectly. How can I do it?
There is a default margin on the h2 element.
When you remove the top margin from the h2 element, you get the desired result.
CSS
h2 {
margin-top: 0;
}
Codepen link
The issue you're facing is not caused by a padding, but a margin-top in your h2 element that exists by default. You can use the following CSS code to alleviate it:
.content {
margin-top: 0;
}
Codepen: → here.
Snippet:
h1 {
color: white;
font-size: 90px;
text-align: center;
width: 950px;
height: 100px;
margin: auto;
margin-top: 20px;
border-radius: 5px;
background-color: darkblue;
}
#slogan {
font-size: 40px;
text-align: center;
margin: auto;
margin-top: -3px;
font-family: Agency FB;
width: 940px;
height: 50px;
background-color: white;
border: 5px solid darkblue;
}
#table {
display: inline-block;
width: 225px;
height: 170px;
margin-top: 59.25px;
margin-left: 59.25px;
text-align: left;
background-color: #c0c0c0;
color: white;
border-radius: 5px;
}
.content {
margin-top:0;
text-align: center;
border-radius: 5px;
background-color: darkblue;
}
ul {
font-family: Georgia;
text-decoration: none;
list-style-type: none;
padding: 0px;
margin: 0px;
margin-top: -10px;
margin-left: 10px;
}
a {
text-decoration: none;
color: white;
}
.div {
width: 940px;
height: 525px;
margin: auto;
border-radius: 5px;
background-color: white;
border: 5px solid darkblue;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
img {
width: 25px;
height: 25px;
padding-right: 10px;
}
</head>
<body>
<h1>NBA 2016</h1>
<p id="slogan"><i>Basketball never stops</i></p>
<div class="div">
<div id="table">
<h2 class="content">Atlantic</h2>
<ul><li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/bos.png&h=25&w=25">Boston Celtics</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/bkn.png&h=25&w=25">Brooklyn Nets</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/ny.png&h=25&w=25">New York Knicks</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/phi.png&h=25&w=25">Philadelphia 76ers</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/tor.png&h=25&w=25">Toronto Raptors</li></ul>
</div>
<div id="table">
<h2 class="content">Central</h2>
<ul><li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/chi.png&h=25&w=25">Chicago Bulls</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/cle.png&h=25&w=25">Cleveland Cavaliers</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/det.png&h=25&w=25">Detroit Pistons</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/ind.png&h=25&w=25">Indiana Pacers</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/mil.png&h=25&w=25">Milwaukee Bucks</li></ul>
</div>
<div id="table">
<h2 class="content">Northwest</h2>
<ul><li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/den.png&h=25&w=25">Denver Nuggets</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/min.png&h=25&w=25">Minnesota Timberwolves</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/okc.png&h=25&w=25">Oklahoma City Thunder</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/por.png&h=25&w=25">Portland Trail Blazers</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/utah.png&h=25&w=25">Utah Jazz</li></ul>
</div>
<div id="table">
<h2 class="content">Pacific</h2>
<ul><li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/gsw.png&h=25&w=25">Golden State Warriors</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/lac.png&h=25&w=25">LA Clippers</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/lal.png&h=25&w=25">Los Angeles Lakers</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/pho.png&h=25&w=25">Phoenix Suns</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/sac.png&h=25&w=25">Sacramento Kings</li></ul>
</div>
<div id="table">
<h2 class="content">Southeast</h2>
<ul><li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/atl.png&h=25&w=25">Atlanta Hawks</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/cha.png&h=25&w=25">Charlotte Hornets</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/mia.png&h=25&w=25">Miami Heat</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/orl.png&h=25&w=25">Orlando Magic</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/was.png&h=25&w=25">Washington Wizards</li></ul>
</div>
<div id="table">
<h2 class="content">Southwest</h2>
<ul><li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/dal.png&h=25&w=25">Dallas Mavericks</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/hou.png&h=25&w=25">Houston Rockets</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/mem.png&h=25&w=25">Memphis Grizzlies</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/no.png&h=25&w=25">New Orleans Pelicans</li>
<li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/sas.png&h=25&w=25">San Antonio Spurs</li></ul>
</div>
</div>
</body>
</html>
You just need to remove the margin from the content header. You can target a specific margin using the top,left, right or bottom. In this case you need to target the margin-top of the h2 tag.
.content {
text-align:center;
border-radius:5px;
background-color:darkblue;
margin-top:0; /*This is the added property*/
}
Is this what you're looking for? https://codepen.io/anon/pen/ZOwEGE
Also it's a good idea to use the web inspector (F12) in the browser to find out whats affecting your elements.
If I understand you well, you want something lie this:
https://codepen.io/bra1N/pen/YWBzXx
CSS:
h1 {
color: white;
font-size: 90px;
text-align: center;
width: 1048px;
height: 100px;
margin: auto;
margin-top: 20px;
border-radius: 5px;
background-color: darkblue;
}
#slogan {
font-size: 40px;
text-align: center;
margin: auto;
margin-top: -3px;
font-family: Agency FB;
width: 1040px;
height: 50px;
background-color: white;
border: 5px solid darkblue;
}
#table {
display: inline-block;
width: 225px;
height: 170px;
margin-top: 59.25px;
margin-left: 59.25px;
text-align: left;
background-color: #c0c0c0;
color: white;
padding: 20px;
border-radius: 5px;
}
.content {
text-align: center;
border-radius: 5px;
background-color: darkblue;
}
ul {
font-family: Georgia;
text-decoration: none;
list-style-type: none;
padding: 0px;
margin: 0px;
margin-top: -10px;
margin-left: 10px;
}
a {
text-decoration: none;
color: white;
}
.div {
width: 1040px;
height: 525px;
margin: auto;
border-radius: 5px;
background-color: white;
border: 5px solid darkblue;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
img {
width: 25px;
height: 25px;
padding-right: 10px;
}
I can't get my social media buttons to align left or right on the footer of my website. I'm not sure what I'm doing wrong, can anyone please help?
I have tried margin-left, margin-right, float: left, float: right
This is what I have and all it does is center.
HTML
<footer class="container-fluid text-center">
<div class="row" id="contact">
<p class="col-sm-4"></p>
<h1>Reach me here</h1>
<br>
<br>
<a href="https://twitter.com/Aarons_coding" target="_blank">
<img src="images/twitter.png" alt="twitter" id="twitt">
<br/> Follower me
</a>
<a href='https://www.facebook.com/freelancecoding/posts/1534409766779543' target="_blank">
<img src="images/fb.png" alt="fb" id="fb">
<br/>Like Me on FB
</a>
<a href='https://www.linkedin.com/in/aaron-s-706193125' target="_blank">
<img src="images/link.png" alt="linkedin" id="link">
<br/>Connect with me
</a>
</div>
<ul>
<li>Top</li>
<li>About the Designer</li>
</ul>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d401398.0917589909!2d-85.9569564028764!3d38.18847214627973!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88690b1ab35bd511%3A0xd4d3b4282071fd32!2sLouisville%2C+KY!5e0!3m2!1sen!2sus!4v1470171263135"
width="350" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
<div style="clear: both"></div>
</footer>
CSS
#twitt {
width: 95px;
height: 95px;
margin: 5px 5px 0 18px;
}
#fb {
width: 95px;
height: 95px;
margin: 5px 0 5px;
}
#link {
width: 95px;
height: 95px;
margin: 5px 5px 0 5px;
}
footer {
background-color: rgba(0, 0, 0, 1);
font-size: 12px;
padding: 20px 0;
text-align: center;
}
footer .col-sm-4 {
display: flex;
justify-content: flex-end;
}
footer ul {
float: right;
text-align: right;
list-style: none;
}
footer li img {
width: 32px;
height: 32px;
}
You probably didn't set styles on correct elements.
If you do it like this it works:
#contact a{
float: left;
}
Example here https://jsfiddle.net/hw3odrba/
You need to set a new style in your css, in case you want to align items to the right:
#contact a{
float: right;
}
Basically i want my see more button, when clicked to enlarge the image above it. So that the image appears in the middle of the page enlarged does anyone know of a way to do this, or a tutorial i could follow, would be much appreciated. by the way im fairly new to web design so a little help thanks!
Also the objects i want to change are under portfolio item
here is a link to the website:
http://www.mmicgt.com/michael_g/portfolio.html
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{Michael Grace} Portfolio website - {Gracey design}</title>
<link href="css/gallery.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<ul id="navigation">
<li><img src="images/images/home_button2.gif" onmouseover="this.src='images/images/home_button1.gif'" onmouseout="this.src='images/images/home_button2.gif'"/>
</li>
<li><img src="images/images/about_button1.gif" onmouseover="this.src='images/images/about_button2.gif'" onmouseout="this.src='images/images/about_button1.gif'"/>
</li>
<li>
<div id="logo" style="padding:16px">
<img src="images/images/logo.png" />
</div>
</li>
<li><img src="images/images/gallery_button1.gif" onmouseover="this.src='images/images/gallery_button2.gif'" onmouseout="this.src='images/images/gallery_button1.gif'"/>
</li>
<li><img src="images/images/contact_button1.gif" onmouseover="this.src='images/images/contact_button2.png'" onmouseout="this.src='images/images/contact_button1.gif'"/>
</li>
</ul>
<div id="header">
<h1><img src="images/images/gallery_03.png" /></h1>
<h2>Portfolio.</h2>
</div>
<div id="line">
</div>
<div id="content">
<p>Did I mention I design stuff? I've had plenty of fun creating a bunch of designs for both Univeristy and for myself as personal projects. Here's a collection of some of my favs.
</p>
<div class="portfolio-item">
<img src="images/home/image1.gif" alt="View more info" />
<p class="btn">SEE MORE</p>
</div>
<div class="portfolio-item">
<img src="images/home/image2.gif" alt="View more info" />
<p class="btn">SEE MORE</p>
</div>
<div class="portfolio-item">
<img src="images/home/image3.gif" alt="View more info" />
<p class="btn">SEE MORE</p>
</div>
<div class="portfolio-item">
<img src="images/home/image4.gif" alt="View more info" />
<p class="btn">SEE MORE</p>
</div>
<div class="portfolio-item">
<img src="images/home/image5.png" alt="View more info" />
<p class="btn">SEE MORE</p>
</div>
<div class="portfolio-item">
<img src="images/home/image6.png" alt="View more info" />
<p class="btn">SEE MORE</p>
</div>
<div class="portfolio-item">
<img src="images/home/image7.png" alt="View more info" />
<p class="btn">SEE MORE</p>
</div>
<div class="portfolio-item">
<img src="images/home/image8.gif" alt="View more info" />
<p class="btn">SEE MORE</p>
</div>
</div>
</div>
</div>
</body>
css:
body {
background: url(../images/images/bg_page.gif) center center;
font: 16px Helvetica, Arial, Sans-Serif;
color: #636363;
line-height: 24px;
}
#container {
width: 940px;
margin: 0 auto;
margin-top: 100px;
}
#header {
height: 177px;
background: url(../images/home/header.gif) top center;
padding: 52px 0 0 28px;
position: relative;
border-radius: 10px 10px 0px 0px;
}
#header h1 {
margin: 0px 0 20px 0;
}
#header h2 {
width: 510px;
font: 30px Helvetica, Arial, Sans-Serif;
color: #f2f0eb;
letter-spacing: 2px;
margin: 0 0 20px 0;
text-shadow: 0px 3px 3px #494949;
}
#logo {
width: 272px;
height: 214px;
position: absolute;
left: 49.5%;
top: 11%;
margin-left: -150px;
margin-top: -86px;
z-index: 2;
}
#navigation {
position: relative;
height: 60px;
}
#navigation li {
display: inline;
width: 160px;
height: 60px;
float: left;
padding: 13px 0 0 16px;
}
#navigation li:nth-child(1) {
margin: 0 0 0 -57px;
}
#navigation li:nth-child(2) {
margin: 0 0 0 0;
}
#navigation li:nth-child(3) {
margin: 0 0 0 0;
}
#navigation li:nth-child(4) {
margin: 0 0 0 77px;
}
#content {
height: 592px;
background: url(../images/home/bg_body.png) top center;
padding: 41px 69px 50px 28px;
overflow: hidden;
position: relative;
border-radius: 0px 0px 10px 10px;
}
#content h2 {
font: 30px Helvetica, Arial, Sans-Serif;
letter-spacing: 2px;
margin: 0 0 20px 0;
}
#content h3 {
font: 26px Helvetica, Arial, Sans-Serif;
letter-spacing: 2px;
margin: 0 0 20px 0;
}
#content p {
margin: 0 0 30px 0;
}
#content a {
color: #671111;
text-decoration: none;
}
#content a:hover {
color: #a12121;
}
#content .portfolio-item {
width: 190px;
padding: 1px;
background: #eee;
text-align: center;
float: left;
margin: 0 7px 14px 7px;
}
#content .portfolio-item p.btn {
margin: 0;
}
#content .portfolio-item p.btn a {
display: block;
width: 183px;
height: 29px;
padding: 7px 0 0 0;
background: url(images/images/background-seemore_03.gif);
font-weight: bold;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
#line {
height: 4px;
background: url(../images/home/line.gif) top center;
position: relative;
}
You should look for satisfying js lib for that. They are often easy-to-install and do not require any coding for basic usage. Here're some popular examples:
LightBox - Very popular lib
FancyBox - I used it for most of my projects, it's lightweight and really fancy
Theese libs support HTML content to show up, so you can add any content to youy pictures. They are recommended, because they are developed for a long time and stable enough. Good luck!
EDIT:
<!-- Usage example -->
See more
Link can have any inline content - image, text, etc.