Hi i'm trying to take one slideshow that was orginaly in one div and place it into two div's having a thumbnail hover image on the left and the "output" image on the right but it just refuses to work right and my css knowledge mostly comes down to tinkering with the "code".
JSfiddle
HTML
<!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">
<head>
<title>Blockrim Realms</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<style type="text/css">
.auto-style1 {
font-size: 40pt;
text-align: center;
}
</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<div id="backgroundimg"></div><div id="htext">Blockrim Realms</div></div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation" class="auto-style1"> <strong>Blockrim Realms</strong></div>
<!-- End Navigation -->
<div id="leftcolumn"> Featured Screenshots!<br />
<br />
<a href="#">
<img class="thumb" alt="" src="images/centralstation.png" />
</a><br /> Central Station<br /><br /><br /><br /><br />
<a href="#">
<img class="thumb" alt=""src="images/hydlaaplaza.png" />
<img class="big" alt=""src="images/hydlaaplaza.png" />
</a><br /> Hydlaa Plaza<br /><br /><br /><br /><br />
<a href="#">
<img class="thumb" alt=""src="images/islesofteleport.png" />
<img class="big" alt=""src="images/islesofteleport.png" />
</a><br /> Isles of Teleport<br /><br /><br /><br /><br />
<a href="#">
<img class="thumb" alt=""src="images/blackpearl.png" />
<img class="big" alt=""src="images/blackpearl.png" />
</a>
</div>
<!-- End Left Column -->
<!-- Begin Content Column -->
<!-- Begin Content Column -->
<div id="content">
<div class="container">
<a href="#">
<img class="big" alt=""src="images/centralstation.png" />
</a>
<a href="#">
<img class="big featured" alt=""src="images/spawn.png" />
</a>
<br />
The Black Pearl</div></div>
<!-- End Content Column -->
<!-- Begin Footer -->
<div id="footer"> </div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
CSS
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color:#272B30
}
#wrapper {
margin: 0 auto;
width: 950px;
}
#header {
color: #fff;
width: 922px;
padding: 0px;
border: 0.5px solid #000;
height: 40px;
margin: 0px 0px 0px 0px;
background:#3A3F44;
z-index:2;
}
#backgroundimg {
height: 40px;
width:100%;
background:url('images/grayradiant.jpg') center;
position:absolute;
left:0;
z-index:1;
}
#htext {
color: #BBBFC2;
font-weight:bold;
font-size:large;
position:absolute;
margin-top: 10px;
z-index:3;
}
#navigation {
float: left;
width: 922px;
color: #fff;
padding: 10px;
border: 0.5px solid #000;
border-bottom: 0px solid #000;
margin: 0px 0px 0px 0px;
background-color:#202328;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background:#F6F0E0;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 600px;
width: 300px;
float: left;
}
#content {
float: left;
color: #fff;
border: 0.5px solid #000;
border-top: 0px solid #000;
background:#202328;
margin: 0px 0px 20px 0px;
padding: 10px;
height: 600px;
width: 922px;
display: inline;
}
#footer {
width: 922px;
clear: both;
color: #fff;
border: 0.5px solid #000;
background-color:#202328;
margin: 0px 0px 0px 0px;
padding: 10px;
}
/*SLIDER*/
.container {
position: relative;
height: 500px;
width: 922px;
overflow: hidden;
margin: 0 auto;
}
.big {
position: absolute;
top:1000px;
left:260px;
width:640px;
z-index: 2;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
a {
float: left;
margin: 0px;
}
a:hover .thumb {
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}
.thumb{
width:100px;
margin-left:20px;
}
a:hover .big {
top: 0px;
width:640px;
}
.featured {
width:640px;
top: 0px;
left: 260px;
z-index: 1;
}
Related
Yo! So i'm currently creating a new website using a vertical header i guess you could say for the first time and i've encountered a problem where the link gets removed from the image when I use a fixed position on it.
Thanks in advance!
.header {
width: 200px;
height: 100%;
background-color: #212121;
top: 0;
left: 0;
position: fixed;
-webkit-box-shadow: 2px 0px 1px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 2px 0px 1px 0px rgba(0,0,0,0.5);
box-shadow: 2px 0px 1px 0px rgba(0,0,0,0.5);
}
.menu {
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
}
.menu li a {
display: block;
text-decoration: none;
background-color: #3AC6F4;
padding: 15px 0 15px 10px;
margin-top: 1px;
color: white;
transition: opacity .15s ease-in-out;
-moz-transition: background-color .15s ease-in-out;
-webkit-transition: background-color .15s ease-in-out;
}
.menu li a:hover {
background-color: white;
color: black;
}
.container1 {
margin: 0 auto;
width: 700px;
}
.footer {
position: fixed;
bottom: 30px;
padding: 25px;
height: 150px;
width: 150px;
}
.footertext {
text-align: center;
padding-top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet">
<link href="css/images/favicon.ico" rel="shortcut icon">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Loom | Home</title>
</head>
<body>
<div class="header">
<div class="menu">
<ul>
<li>HOME</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
<div class="footer">
<img src="css/images/loombottomlogo.svg" alt="Logo">
<div class="footertext">
#2016 ExLoom.<br/> All Rights Reserved.
</div>
</div>
</div>
<div class="container1">
<div class="titlebackground">
<div class="title">
text
</div>
</div>
<div class="titlep">
text
</div>
</div>
<div class="footer">
</div>
</body>
</html>
I deleted the additional empty <div class="footer"> (last <div> in your <body> element near the end of your HTML code) and it works.
You have two <div class="footer">'s
I am trying to make the basic HTML5/CSS3 framework for a Minesweeper Web Game thing. But for some reason I can't get my buttons to move out of their static positions. What did I do wrong? Here is my code (Note: I am using the NetBeans 8.1 IDE)
HTML:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Minesweeper Web App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="http://old.no/icon/entertainment/mini-mine.gif" />
<link rel="stylesheet" href="classes.css" type="text/css"/>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
</head>
<body>
<div class="header">
<h1>Minesweeper!!!!</h1>
<p>Made by Desmond</p>
</div>
<div class="sub-header">
<div class="img-box" id="left">
<img src="#" id="smile" alt="this game is broken!"/>
</div>
<div class="img-box" id="right">
<img src="#" id="flag" alt="This game is broken!"/>
</div>
<p id="score">Score: </p>
</div>
<div class="body">
<div class="grid-box">
<div class="button" id="5x5">
<p>Easy (5x5)</p>
</div>
<div class="button" id="8x8">
<p>Medium (8x8)</p>
</div>
<div class="button" id="10x10">
<p>Hard (10x10)</p>
</div>
</div>
</div>
</body>
</html>
css:
`
.header {
width:100%;
height:20%;
border-bottom:2px solid #efefef;
border-radius:5px;
background:#80ffff;
text-align:center;
font-family:"Comic Sans MS", cursive;
}
.sub-header {
width:100%;
height:10%;
border-bottom:2px solid #efefef;
border-radius:5px;
background:#e5ffff;
}
.img-box {
display:inline-block;
position:relative;
width:50px;
height:50px;
background:radial-gradient(#cccccc 20%, #999999 80%);
border:2px solid #cccccc;
border-radius:2px;
align-content:center
}
.img-box img {
vertical-align:middle;
}
.button {
position: relative;
background-color: #efefef;
height: 30px;
width: 100px;
border: 2px #999999 solid;
border-radius:8px;
font-family:"Modern No. 20";
font-weight:bold;
margin-left: 100px;
}
.button p {
position: absolute;
top: -8px;
}
.header p {
text-shadow: 2px 2px gray;
right: 1px;
}
.sub-header {
text-align:center;
margin-top:0px;
}
.body {
background:#d9d9d9;
height:1000px;
width:100%;
}
#8x8 {
left: 500px;
}
#10x10 {
left:1000px;
}
.grid-box {}
You can't move the buttons because the div ids are numeric. They should have at least one character. I changed the id's and now its working.
HTML
<div class="header">
<h1>Minesweeper!!!!</h1>
<p>Made by Desmond</p>
</div>
<div class="sub-header">
<div class="img-box" id="left">
<img src="#" id="smile" alt="this game is broken!" />
</div>
<div class="img-box" id="right">
<img src="#" id="flag" alt="This game is broken!" />
</div>
<p id="score">Score: </p>
</div>
<div class="body">
<div class="grid-box">
<div class="button" id="5x5">
<p>Easy (5x5)</p>
</div>
<div class="button" id="eight">
<p>Medium (8x8)</p>
</div>
<div class="button" id="ten">
<p>Hard (10x10)</p>
</div>
</div>
</div>
CSS:
.header {
width: 100%;
height: 20%;
border-bottom: 2px solid #efefef;
border-radius: 5px;
background: #80ffff;
text-align: center;
font-family: "Comic Sans MS", cursive;
}
.sub-header {
width: 100%;
height: 10%;
border-bottom: 2px solid #efefef;
border-radius: 5px;
background: #e5ffff;
}
.img-box {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
background: radial-gradient(#cccccc 20%, #999999 80%);
border: 2px solid #cccccc;
border-radius: 2px;
align-content: center
}
.img-box img {
vertical-align: middle;
}
.button {
position: relative;
background-color: #efefef;
height: 30px;
width: 100px;
border: 2px #999999 solid;
border-radius: 8px;
font-family: "Modern No. 20";
font-weight: bold;
margin-left: 100px;
}
.button p {
position: absolute;
top: -8px;
}
.header p {
text-shadow: 2px 2px gray;
right: 1px;
}
.sub-header {
text-align: center;
margin-top: 0px;
}
.body {
background: #d9d9d9;
height: 1000px;
width: 100%;
}
#eight {
left: 200px;
}
#ten {
left: 1000px;
}
.grid-box {}
Here's a fiddle with the solution. For more info, read this.
this is my first time making a Tumblr theme and I've run into a problem with the post footer. I adjusted the width of the posts/content on the page, which in turn meant that I also had to adjust the width of the post footers. However, once I had done this, the positioning of the footer was off on most of the posts - but not all. Namely, the footer appears to only be positioned correctly on Answer and Video posts. On all other posts it's off to the right/above where it should be. Can anyone explain how to fix this? The theme is live here. Here's what I'm working with:
<html>
<head>
<meta name="color:Background" content="#000000" />
<meta name="color:Links" content="000000" />
<meta name="color:Sidebar background" content="#000000" />
<meta name="color:Sidebar text" content="#000000" />
<meta name="color:Text" content="#000000" />
<meta name="font:Body" content="Arial, Helvetica, sans-serif"/>
<meta name="if:Following in sidebar" content="1"/>
<meta name="if:Likes in sidebar" content="1"/>
<meta name="if:Search and description in sidebar" content="1"/>
<meta name="image:Background" content=""/>
<meta name="image:Sidebar" content=""/>
<title>{block:TagPage}{Tag} - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<link rel="stylesheet" href="http://static.tumblr.com/hznqxps/ivOmgjf8v/normalize.css" />
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<style>
body {
background: {color:Background} url('{image:Background}') repeat;
color: {color:Text};
font-family: {font:Body};
font-size: 0.7em;
}
a {
color: {color:Links};
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
padding: 0.5% 2%;
}
#sidebar nav li a {
margin-right: 0.5%;
padding: 0.2%;
}
#sidebar {
margin-top: 5%;
margin-bottom: 5%;
margin-left: 5%;
width: 500px;
}
.item {
position: fixed;
height: 80%;
background: #fff;
padding: 1% 5%;
}
.item .even {
background: #f2f2f2;
}
#content {
margin-left: 50%;
width: 543.5px;
}
#content article {
background: #fff;
margin-bottom: 5%;
}
article .inner {
display: inline-block;
padding: 4%;
width: 92%;
}
.title a {
color: {color:Text};
}
.photo img {
display: block;
}
.html_photoset {
text-align: center;
padding: 6% 0;
}
.link .title a {
border-bottom: 1px solid;
}
.chat ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.chat li {
padding: 0.5% 2%;
}
.chat .even {
background: #f2f2f2;
}
blockquote {
border-left: 1px solid #d1d1d1;
margin: 0;
padding: 2%;
}
.metadata {
background: rgba(233, 233, 233, 0.76);
border-top: 1px solid #ADADAD;
font-size: 0.9em;
padding: 2% 4%;
width: 500px;
}
.metadata ul {
width: 100%;
display: inline-block;
}
.metadata ul, #notes ol {
list-style: none;
margin: 0;
padding: 0;
}
.tags {
margin-top: 1% !important;
}
.tags li {
border: 1px solid #353535;
padding: 0.5%;
background: rgba(37, 37, 37, 0.84);
}
.index li, .tags li {
float: left;
margin-right: 2%;
}
.note {
border-bottom: 1px solid white;
padding: 1% 0;
}
#pagination li a {
background: #fff;
float: right;
margin: 0 0 2% 1%;
padding: 1%;
}
#content article, .item, #pagination a {
box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.33);
}
footer {
box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.11) inset;
}
.item form input {
border: none;
border-bottom: 1px solid #d1d1d1;
padding: 2% 1%;
width: 96%;
margin-bottom: 2%;
}
#likes {
list-style: none;
margin: 0;
padding: 0;
}
#followed ul {
display: inline-block;
list-style: none;
margin: 0 0 4% 0;
padding: 0;
width: 100%;
}
#followed img {
display: block;
float: left;
}
{CustomCSS}
</style>
</head>
<body>
<aside id="sidebar">
<div class="item">
<h1>{Title}</h1>
{block:IfSearchAndDescriptionInSidebar}
{block:Description}
<p>{Description}</p>
{block:Description}
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder"{lang:Search}"/>
</form>
{/block:IfSearchAndDescriptionInSidebar}
{block:IfLikesInSidebar}
{block:Likes}
<h2>{lang:Likes}</h2>
{Likes limit="1" summarize="100" width="150"}
<a href="http://www.tumblr.com/liked/by/{Name}">
{lang:More liked posts}
</a>
{/block:Likes}
{/block:IfLikesInSidebar}
{block:IfFollowingInSidebar}
{block:Following}
<h2>{lang:People I follow}</h2>
<div id="followed">
<ul>
{block:Followed}
<li>
<img src="{FollowedPortraitURL-48}"/>
</li>
{/block:Followed}
</ul>
</div>
{/block:Following}
{/block:IfFollowingInSidebar}
<nav>
<ul>
{block:HasPages}
{block:Pages}
<li> {Label}</li>
{/block:Pages}
{/block:HasPages}
{block:SubmissionsEnabled}
<li> {SubmitLabel}</li>
{/block:SubmissionsEnabled}
{block:AskEnabled}
<li> {AskLabel}</li>
{/block:AskEnabled}
<li> Archive</li>
</ul>
</nav>
</div>
</aside>
<div id="content">
{block:Posts}
<article>
{block:Text}
<div class="text inner">
{block:Title}<h1 class="title"><a href="{Permalink}" >{Title}</a></h1>{/block:Title}
{Body}
{/block:Text}{block:Photo}
<div class="photo inner">
{LinkOpenTag}<img src="{PhotoURL-500}" alt ="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}{block:Panorama}
<div class="panorama inner">
{LinkOpenTag}
<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{LinkCloseTag}{block:Caption}{Caption}
{/block:Caption}
{/block:Panorama}{block:Photoset}
<div class="photoset inner">
{Photoset}
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}{block:Quote}
<div class="quote inner">
<blockquote>{Quote}</blockquote>
{block:Source}<p><cite> {Source} </cite></p>{/block:Source}
{/block:Quote}{block:Link}
<div class="link inner">
<h1 class="title">{Name}</h1>
{block:Description}{Description}{/block:Description}
{/block:Link}{block:Chat}
<div class="chat inner">
<ul>
{block:Lines}<li class="{Alt}"><p>{block:Label}<strong >{Label}</strong>{/block:Label} {Line} </p></li>{/block:Lines}
</ul>
{/block:Chat}{block:Video}
<li class="post video">
{Video-500}{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Video}{block:Audio}
<div class="audio inner">
{block:TrackName}<h1 class="title">{TrackName}</h1>{/block:TrackName}
{block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}
{AudioPlayerBlack}
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}{block:Answer}
<div class="answer inner">
<p>{Question} <strong>- {Asker}</strong></p>
{Answer}
</div>{/block:Answer}
{block:Date}
<footer class="metadata">
<ul class="index">
<li> <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}">{DayOfMonth} {Month} {Year}</time> </li>
{block:NoteCount}<li><a class="notecount" href="{Permalink}#notes">{NoteCountWithLabel}</a></li>{/block:NoteCount}
{block:ContentSource}
<li><a href="{SourceURL}">{lang:Source}:{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}
{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}</a></li>
{/block:ContentSource}
</ul>
{block:PermalinkPage}
{block:HasTags}
<ul class="tags">
{block:Tags}<li>{Tag} </li>{/block:Tags}
</ul>
{/block:HasTags}
{block:PostNotes}
<div id="notes">
{PostNotes}
</div>
{/block:PostNotes}
{/block:PermalinkPage}
</footer>
{/block:Date}
</article>
{/block:Posts}
{block:Pagination}
<nav id="pagination">
<ul>
{block:PreviousPage}<li>Previous page</li>{/block:PreviousPage}
{block:NextPage}<li>Next page</li>{/block:NextPage}
</ul>
</nav>
{/block:Pagination}
<p id="footer">
{block:PreviousPage}
« Previous
{/block:PreviousPage}{block:NextPage}
Next »
{/block:NextPage}
</p>
</body>
</html>
Any help would be appreciated! I know there are some other issues with the theme at the moment but this is really frustrating me. Thanks so much!
NEVER MIND, I fixed it! It turns out that I forgot to close off some < div >'s, which lead to the footer being considered part of the post content and aligning with the edge of the content rather than where I wanted it to be. But I fixed it :)
Would love to know how to make my images centered not floating to the left. I tried modifying the float attributes but things just go messy. Help please!
I'm using section tags no grid thingy whatsoever.
When I set the float to "none" this happens
#hover {
color: rgba(188, 175, 204, 0.9);
}
h2#testimonials {
color: #E72635;
}
div#all {
width: 100%;
height: 100%;
}
/* generic css */
.view {
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 0px 20px 0px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
/*2*/
.view-second img {
transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
}
.view-second .mask {
background-color: rgba(12, 19, 27, 0.6);
width: 400px;
padding: 105px;
height: 450px;
opacity: 0;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out;
}
.view-second h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
background: transparent;
margin: 20px 40px 0px 40px;
opacity: 0;
color: #8F1925;
transform: scale(0);
transition: all 0.5s linear 0s;
}
.view-second p {
transform: scale(0);
transition: all 0.5s linear 0s;
}
.view-second a.info {
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
/* */
.view-second:hover .mask {
opacity:1;
transform: translate(-80px, -125px) rotate(45deg);
-webkit-transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2,
.view-second:hover p,
.view-second:hover a.info{
transform: scale(1);
opacity: 3;
}
img#articlePic {
height: 200px;
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>The University Digest</title>
<link rel="shortcut icon" href="img/logo1.png" />
<!-- Bootstrap Core CSS -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/template.css" rel="stylesheet">
<link href="css/indexObjects.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Header Container -->
<div class="container-full" id="headerC">
<header class="masthead">
<p id="headerP">The University Digest</p>
<p id="subheader">The Official Student Publication of Western Mindanao State University</p>
</header>
</div>
<!-- Navigation -->
<div id="nav">
<!-- Content Layout -->
<!-- Portfolio Grid Section -->
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="rows">
<div class="col-lg-12">
<h2 class="section-heading">Articles</h2>
</div>
<div id="all">
<div class="view view-second">
<img src="http://goo.gl/n6eiy5" class="img-responsive img-full" alt="" id="articlePic" />
<div class="mask"></div>
<div class="content">
<h2 id="testimonials">Testimonials</h2>
<p>“A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</div>
</div>
<div class="view view-second">
<img src="http://goo.gl/ikGTbN" class="img-responsive" alt="" id="articlePic" />
<div class="mask"></div>
<div class="content">
<h2 id="testimonials">Testimonials</h2>
<p>“A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</div>
</div>
<div class="view view-second">
<img src="http://jacobstone.co.uk/Livetesting/guy.jpg" class="img-responsive" alt="" id="articlePic" />
<div class="mask"></div>
<div class="content">
<h2 id="testimonials">Testimonials</h2>
<p>“A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</div>
</div>
<div class="view view-second">
<img src="http://jacobstone.co.uk/Livetesting/guy.jpg" class="img-responsive" alt="" id="articlePic"/>
<div class="mask"></div>
<div class="content">
<h2 id="testimonials">Testimonials</h2>
<p>“A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</div>
</div>
<div class="view view-second">
<img src="http://jacobstone.co.uk/Livetesting/guy.jpg" class="img-responsive" alt="" id="articlePic"/>
<div class="mask"></div>
<div class="content">
<h2 id="testimonials">Testimonials</h2>
<p>“A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</div>
</div>
<div class="view view-second">
<img src="http://jacobstone.co.uk/Livetesting/guy.jpg" class="img-responsive" alt="" />
<div class="mask"></div>
<div class="content">
<h2 id="testimonials">Testimonials</h2>
<p>“A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Just make some changes in your css and you can easily get your desired result through the mentioned below css
CSS
div#all {
border: 1px solid;
display: block;
height: 100%;
overflow: hidden;
text-align: center;
width: 100%;
}
.view {
background: url("../images/bgimg.jpg") no-repeat scroll center center #FFFFFF;
border: 10px solid #FFFFFF;
box-shadow: 1px 1px 2px #E6E6E6;
cursor: default;
display: inline-block;
margin: 10px;
overflow: hidden;
position: relative;
text-align: center;
}
DEMO
what about the good old margin: 0 auto; for centering elements?
okay and what about this, for centering the images?
display: block;
margin-left: auto;
margin-right: auto
Another possible solution could be the display: table-cell; css rule and then with the horizontal/vertical alignment. I'm currently at work and cannot test it.
.view {
background: url("../images/bgimg.jpg") no-repeat scroll center center #fff;
border: 10px solid #fff;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
display: block;
margin: auto;
overflow: hidden;
position: relative;
text-align: center;
width: 300px;
}
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.