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
Related
I'm a newbie at this. I have a problem. I'm creating a personal page where I want a background-color in the top part of the page (covering a section) and I want another background-color in the middle of the page (covering another section).
The thing is that I did that but when I go to developer tools the design it doesn't responsive. My body background kinda "creates" a margin aside my second background.
I don't know if I'm explain it well but here is my code and the bug that I have:
* {
font-family: 'Fredoka', sans-serif;
margin: 0%;
padding: 0%;
}
body {
background-color: #3a5056;
color: white;
text-align: center;
}
html,
body {
height: 100%;
}
.middle {
background-color: white;
height: 1866px;
padding: 50px;
margin-top: 230px;
}
.cards-list {
z-index: 0;
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.card {
margin: 30px auto;
width: 300px;
height: 300px;
border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25), -5px -5px 30px 7px rgba(0, 0, 0, 0.22);
cursor: pointer;
transition: 0.4s;
}
.card .card_image {
width: inherit;
height: inherit;
border-radius: 40px;
}
.card .card_image img {
width: inherit;
height: inherit;
border-radius: 40px;
object-fit: cover;
}
.card .card_title {
text-align: center;
border-radius: 0px 0px 40px 40px;
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
margin-top: -80px;
height: 40px;
color: #2c3d42;
}
section .intro {
height: 40px;
width: 850px;
padding: 6%;
}
.intro {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
min-width: 850px;
}
.intro:nth-child() {
align-self: center;
}
.abt-me {
position: relative;
width: 800px;
height: 250px;
padding: 1%;
color: #2c3d42;
display: block;
content: "";
margin-top: -2550px;
border: 1px hidden;
font-size: 18px;
border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 2px 3px 17px 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 3px 17px 6px rgba(0, 0, 0, 0.3);
}
.text-box {
padding: 1%;
margin-top: -8px;
font-size: 21px;
width: 750px;
height: 250px;
margin-left: 2%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<title></title>
</head>
<body>
<section class="main">
<div id="name">
<h1>Hello, I'm <span id="me">Sapph</span></h1>
</div>
<div id="scroll">
<section id="section02" class="demo">
<span></span>
</section>
</div>
<nav class="social">
<ul>
<li>Twitter <i class="fa fa-twitter"></i></li>
<li>Github <i class="fa fa-github"></i></li>
<li>Linkedin <i class="fa fa-linkedin"></i></li>
</ul>
</nav>
</section>
<section class="middle">
<div id="cards">
<div class="cards-list">
<div class="card 1">
<div class="card_image"></div>
<div class="card_title title-white">
<p>Contact</p>
</div>
</div>
<div class="card 3">
<div class="card_image">
</div>
<div class="card_title">
<p>Projects</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="intro">
<div class="abt-me">
<h2 style="margin-bottom: 12px" ;><b>
About Me</b>
</h2>
<div class="text-box">
<p>
<center>Hello, I'm...</center>
</p>
</div>
</div>
</section>
<footer>© Copyright</footer>
</body>
</html>
This is my problem: https://prnt.sc/w4Zkw0QU7P67
This is what I need: https://prnt.sc/UhNmn4djohPS
I took the photos in the developer tools. Thanks
Try to find the #media section for max-width:890px in your style.css and edit the "section" tag style. or past the below code on your page, this should help. It is the amount of padding added on the section for screen width less than 890px.
#media only screen and (max-width: 890px) {
section{
margin: 0px;
padding: 10px;
}
}
If you want to change the section style for all screen widths just use:
#media only screen and (min-width: 360px) and (max-width: 1360px) {
section{
margin: 0px;
padding: 10px;
}
}
I am currently working on an image gallery where I have different sections that have multiple images. I am currently trying to set up each section of images to be a single row and scoll horizontally similar to what netflix does. Right now I've been unable to get the container to overflow in the x to work and instead goes to a second row.
I've tried using
white-space: nowrap
overflow-x: auto;
overflow-y:hidden;
display: inline-block;
I've also tried taking a containing div for the list and rotating it 90 deg and allow vertical scrolling and then rotating a child div back.
The best I've been able to get for the effect I'm trying to acheive is the second example but I've been unable to get the width correct on the containing wrapper. I'm trying to get the row all the way across.
First example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>list testing</title>
<style>
body {
background-color: #2e2e2e;
margin: 0px;
padding: 0px;
color: white;
}
.galleryContainer {
width: 100%;
margin: 0px;
text-align: center;
}
.gallery {
width: 90%;
text-align: center;
margin: 0% 5% 0% 5%;
}
.sectionWrapper {
width: 100;
height: 100%;
overflow-y: auto;
overflow-x: auto;
}
.section {
height: 100%;
width: 100%;
display: inline-block;
text-align: center;
margin: 0px;
padding: 0.75% 0 0.75% 0;
}
ul > .gallery {
float: left;
white-space: nowrap;
overflow-x: auto;
}
ul > li {
list-style-type: none;
display: inline;
}
li {
float: left;
width: 250px;
height: 200px;
margin-left: 1%;
margin-top: 1%;
border: 1px solid #999999;
background-color: #203d68;
display: inline;
}
li:hover {
filter: grayscale(100%);
transform: scale(1.1);
box-shadow: 4px 4px 4px #222222;
transition: 0.5s ease;
}
h2 {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="galleryContainer">
<div class="gallery">
<div class="sectionWrapper">
<div class="section">
<h2>section 1</h2>
<ul>
<li>test_1</li>
<li>test_2</li>
<li>test_3</li>
<li>test_4</li>
<li>test_5</li>
<li>test_6</li>
<li>test_1A</li>
<li>test_2A</li>
</ul>
</div>
</div>
<div class="sectionWrapper">
<div class="section">
<h2>section 2</h2>
<ul>
<li>test_7</li>
<li>test_8</li>
<li>test_9</li>
<li>test_10</li>
<li>test_11</li>
<li>test_12</li>
</ul>
</div>
</div>
<div class="sectionWrapper">
<div class="section">
<h2>section 3</h2>
<ul>
<li>test_13</li>
<li>test_14</li>
<li>test_15</li>
<li>test_16</li>
<li>test_17</li>
<li>test_18</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Second Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>list testing</title>
<style>
body {
background-color: #2e2e2e;
margin: 0px;
padding: 0px;
color: white;
}
.galleryContainer {
width: 100%;
margin: 0px;
text-align: center;
}
.gallery {
width: 90%;
text-align: center;
margin: 0% 5% 0% 5%;
}
.sectionWrapper {
width: 100;
height: 100%;
overflow-y: auto;
overflow-x: auto;
transform: rotate(-90deg);
/* transform-origin: right top; */
}
.section {
height: 100%;
width: 100%;
display: inline-block;
text-align: center;
margin: 0px;
padding: 0.75% 0 0.75% 0;
transform: rotate(90deg);
/* transform-origin: right top; */
}
ul > .gallery {
width: 100%;
height: 100%;
float: left;
display: inline;
}
ul > li {
list-style-type: none;
display: inline;
}
li {
float: left;
width: 250px;
height: 200px;
margin-left: 1%;
margin-top: 1%;
border: 1px solid #999999;
background-color: #203d68;
display: inline;
}
li:hover {
filter: grayscale(100%);
transform: scale(1.1);
box-shadow: 4px 4px 4px #222222;
transition: 0.5s ease;
}
h2 {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="galleryContainer">
<div class="gallery">
<div class="sectionWrapper">
<div class="section">
<h2>section 1</h2>
<ul>
<li>test_1</li>
<li>test_2</li>
<li>test_3</li>
<li>test_4</li>
<li>test_5</li>
<li>test_6</li>
<li>test_1A</li>
<li>test_2A</li>
</ul>
</div>
</div>
<!-- <div class="section">
<h2>section 2</h2>
<ul>
<li>test_7</li>
<li>test_8</li>
<li>test_9</li>
<li>test_10</li>
<li>test_11</li>
<li>test_12</li>
</ul>
</div>
<div class="section">
<h2>section 3</h2>
<ul>
<li>test_13</li>
<li>test_14</li>
<li>test_15</li>
<li>test_16</li>
<li>test_17</li>
<li>test_18</li>
</ul>
</div> -->
</div>
</div>
</body>
</html>
In the second exampe I'm getting the scolling I'm looking to get but not the width. Any help would be much appreciated.
You can add a fixed width to your .section wrapper instead of 100%
example: 1000px
Both display:inline-block and float:left will detect if there are spaces beside them so you should set a fixed width container.
I am attempting to construct a timeline similar to the one that is shown below:
The difficulty I am having is constructing the bottom portion of the timeline that has icons connected by a single line, as well as adding the triangle to the bottom of each event. This is currently my code:
.navbar {
margin-bottom: 0px;
}
.jumbotron {
margin-bottom: 0px;
}
#timeline {
list-style: none;
white-space: nowrap;
overflow: auto;
padding-left: 0;
}
#timeline li {
display: inline-block;
padding: 1.5%;
border: 1px solid #c0c0c0;
border-radius: 5px;
box-shadow: 1px 1px 6px #757677;
margin-top: 2%;
text-align: center;
padding-bottom: 0;
width: 45%;
}
#timeline li+li {
margin-left: 2%;
}
#timeline li h3,
#timeline li em {
display: block;
}
#timeline_header {
padding-left: 0;
}
hr {
width: 100%;
}
#triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>LinkedIn</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Welcome!</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" id="timeline_header">
<h1>What I've Been Up To</h1>
</div>
</div>
<!--Timeline-->
<div class="row" style="overflow:auto">
<hr>
<ul id="timeline">
<li>
<h2>Job #2</h2>
<em><h4>May 2016 - Present</h4></em>
<h3>Software Developer</h3>
</li>
<div id="triangle"></div>
<div class="timeline_icon">
<img src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt=""></div>
<li>
<h2>Job #1</h2>
<em><h4>May 2012 - May 2016</h4></em>
<h3>Software Developer</h3>
</li>
<li>
<h2>Graduated from Colleg</h2>
<em><h4>May 2012</h4></em>
<h3>Bachelor's Degree</h3>
</li>
</ul>
</div>
</div>
<hr>
<footer>
<p> Copyright ©
<!--Script displays the current year-->
<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>
</p>
</footer>
</body>
</html>
The first list element in my list is my attempt at trying to add a triangle and an icon, but I can't figure out how to position the triangle on the bottom border, and how to position the icon directly below the triangle, with a horizontal rule, or other line, between icons.
The triangle is applied as a pseudo element ::after. The image is aligned with the block - it will be much easier to manipulate. Fixed the scroll view to scroll only in X, not in Y axis. The line is an object external to the scrollview, because otherwise its length is limited to the visible area and scrolls left with the view.
.navbar {
margin-bottom: 0px;
}
.jumbotron {
margin-bottom: 0px;
}
#timeline {
list-style: none;
padding-left: 0;
padding-top: 40px;
padding-bottom: 60px;
position: relative;
}
#timeline_border {
position: relative;
top: -123px;
display: block;
width: 100%;
height: 1px;
border-top: 2px solid #ccc;
z-index: -1;
}
#timeline li {
display: inline-block;
padding: 1.5%;
border: 1px solid #c0c0c0;
border-radius: 5px;
box-shadow: 1px 1px 6px #757677;
margin-top: 2%;
text-align: center;
padding-bottom: 0;
width: 45%;
position: relative;
}
#timeline > li:after {
position: absolute;
bottom: -20px;
left: 40px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: block;
content: "";
}
#timeline li+li {
margin-left: 2%;
}
#timeline li h3,
#timeline li em {
display: block;
}
#timeline_header {
padding-left: 0;
}
hr {
width: 100%;
}
#triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: inline-block;
}
.timeline_ruler {
white-space: nowrap;
overflow-x: scroll;
overflow-y: visible;
display: block;
height: auto;
padding-bottom: 100px;
}
.timeline_icon {
width: 80px;
height: 80px;
position: absolute;
bottom: -102px;
left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>LinkedIn</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Welcome!</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" id="timeline_header">
<h1>What I've Been Up To</h1>
</div>
</div>
<!--Timeline-->
<div class="row" style="overflow:auto">
<hr>
<div class="timeline_ruler">
<ul id="timeline">
<li>
<h2>Job #2</h2>
<em><h4>May 2016 - Present</h4></em>
<h3>Software Developer</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
<li>
<h2>Job #1</h2>
<em><h4>May 2012 - May 2016</h4></em>
<h3>Software Developer</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
<li>
<h2>Graduated from Colleg</h2>
<em><h4>May 2012</h4></em>
<h3>Bachelor's Degree</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
</ul>
</div>
<div id=timeline_border></div>
</div>
</div>
<hr>
<footer>
<p> Copyright ©
<!--Script displays the current year-->
<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>
</p>
</footer>
</body>
</html>
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;
}
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;
}