When trying to display image effects on my website they don't display.
If I run the image on jsfiddle.net it works perfectly fine. However my image doesn't work when i test it inside all my code. I want a border shadow effect all around the image. The code to do so is in my code but as you can see in my web site image there is no shadow.
Here is the image when I test it in jsfiddle.net without an image.
My code:
CSS:
#collage-container {
/*width: 699px;*/
width: 800px;
/*height: 510px;*/
height: 320px;
float: left;
margin-left: 200px;
margin-top: 10px;
background-color: #DADADA;
}
#collage-one{
width: 699px;
height: 300px;
margin-left: 50px;
margin-top: 10px;
box-shadow: 0 0 20px black;
}
HTML:
<div id = "collage-container">
<img src = "longblue.jpg" id = "collage-one"/>
</div>
Update: here is all my css
<head>
<style type = "text/css">
/* Formating for body of Web Site */
* {margin: 0; padding: 0;}
body {
font-family: times new roman;
background-color: #ebebeb;
}
/* Fixed screen size so objects don't shift */
#screen {
/*
min-width: 768px;
min-height: 100% !important;
margin-bottom: 30px;
*/
/* This locks everything in place*/
top:0px;
margin: 0 auto;
width:1500px;
height: 100%;
padding-top:0;
padding-bottom: 30px;
margin-bottom: 150px;
postion: absolute;
margin-left: 70px;
}
/* Format for black strip header */
#header {
background-color: black;
height: 168px;
width: 100%;
position: relative;
}
/* Class1: Holds the navigation buttons in header */
.container {
width: 960px;
height: auto;
margin: 0 auto;
margin-left: 0;
}
/* Class2: Holds the small containers for short articles */
.containerShort {
width: 480px;
height: auto;
margin: 0 auto;
}
/* Sub Classes: For Class2 */
.short1 {
right: 30px;
}
.short2 {
right: 30px;
}
/* Format for Tree logo in header */
#logoArea {
width: 300px;
height: 168px;
background-image: url(treesmall.jpg);
float: left;
margin-left: 30px;
}
/* Formating for location of navagation buttons */
#navArea
{
height: 100%;
float: right;
margin-right: 0px;
margin-top: 80px;
margin-left: 100px;
}
/* Removes the bullets for navagation buttons in header */
#nav
{
list-style: none;
}
/* Navagation formating */
#nav a
{
color: white;
text-decoration: none; /*removes underline*/
}
/* Formats the links of navagation buttons */
#nav li
{
float: left;
margin-left: 60px;
background-color: #252525;
padding: 8px;
bording: 1px solid silver;
border-radius: 5px;
}
/* Makes a hovering effect where when the mouse hovers over the
links they change color */
#nav li:hover
{
background-color: gray;
}
/* Sub class formating for container class */
.page
{
background-color: white;
padding: 10px;
margin-top: 10px;
width: 1100px;
float: right;
border-radius: 5px;
padding-bottom: 1px;
}
/* Side quote article main page */
.article
{
background-color: #ebebeb;
padding-top: 1px;
margin-top: 20px;
width: 120px;
float: right;
border-radius: 20px;
height: 300px;
border: 1px solid black;
margin-right: 20px;
text-align: left;
}
/* Formating for left sidebar of information */
#sidebar {
background-color: #B4B4B4;
height: auto;
width:350px;
float:left;
margin-top: 10px;
border-radius: 5px;
padding: 10px;
color: #483D8B;
}
/* footer formating */
#footer {
background-color: black;
height: 40px;
width: 1500px;
color: white;
padding-top: 10px;
position: relative center;
bottom: 0;
text-align: center;
margin-left:70px;
}
/* Formating of Header quote */
#quote {
color: white;
float: right;
}
/* Paragraph formating */
p {
color: black;
margin-bottom: 20px;
padding: 5px;
padding-left: 40px;
}
p.light {
color: white !important;
margin-bottom: 60px;
padding: 5px;
padding-left: 40px;
}
p .imagespace {
padding-left: 40px;
margin: auto;
}
h3 {
margin-bottom: 60px;
}
h2 {
font-family: "Times New Roman";
font-style: oblique;
}
#collage-container {
/*width: 699px;*/
width: 800px;
/*height: 510px;*/
height: 320px;
float: left;
margin-left: 200px;
margin-top: 10px;
background-color: #DADADA;
}
#collage-one{
width: 699px;
height: 300px;
margin-left: 50px;
margin-top: 10px;
box-shadow: 0 0 20px black;
}
/*#collage-two,#collage-three,
#collage-four{
width: 226px;
height: 200px;
padding: 5px;
background-color: black;
background-position: top center;
float: right;
}*/
/*#space {
width:300px;
height: 508px;
background-color: white;
float: left;
margin-top: 0;
margin-left: 120px;
box-shadow: hshadow, vshadow blur color
box-shadow: 10px 0 20px #B4B4B4;
border-radius: 10px;
}*/
#ego {
box-shadow: 0 0 20px #B4B4B4;
}
#marquee{
color: #483D8B;
margin-top: 10px;
margin-bottom: 0px;
width: 1025px;
float: right;
}
</style>
</head>
From advice in comments, looks like I have to fix my shadow to accept more browser versions.
Thanks everyone I will play with it.
Main help: #Phillips126
Related
I can't get the text box at the bottom to appear over the image without messing up the navigation bar
https://imgur.com/a/n2lfl57
I've tried all sorts of things and the text either just doesn't move the way I expect or messes up my navbar as I said
I'd be extremely happy if someone could help as I need to finish this in a few days for school.
here's my css code
body{
margin: 0px;
padding: 0px;
height: 100%;
}
header{
margin-bottom: -20px;
padding: 0px;
overflow: hidden;
}
footer{
background-color: black;
margin-top: : -5px;
padding: 0px;
}
.bgimage{
margin-bottom: -5px;
width: 1920px;
}
.container{
}
.imgtext{
border-style: solid;
color: white;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
.YeStage{
margin: 0px;
padding: 0px;
width: 1920px;
height: 700px;
object-fit: cover;
}
.menu {
margin-top: : -20px;
ma
padding: 0px;
background-color: #3b1113;
overflow: hidden;
list-style-type: none;
position: sticky;
top: 0;
margin-bottom: 0
border:0;
}
.Logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px
margin-bottom: 0px
width: 440px;
height: 50px;
}
.menu a {
float: left;
color: #FFFF;
text-align: center;
padding: 36px 38px;
text-decoration: none;
font-size: 17px;
}
.menu a:hover {
background-color: #f5bd0e;
color: black;
}
.menu a.active {
background-color: #f5bd0e;
color: black;
}
So, I'm just making a mock webpage (HTML & CSS), but when I used the background-image attribute, it gets misaligned.
Here's a snapshot of what it looks like (added the green border around the ul for the div, #watchlisten):
Here is my HTML code:
<div id="watchlisten">
<h2>Watch/Listen</h2>
<img class="boxesimg" src="images/boxes.png" alt="boxes" />
<div class="break"></div>
<img class="leftarrow" src="images/leftarrowbutton.png" alt="leftarrow" />
<div class="wlblock">
<img src="images/leftimage.png" />
<p>Titanic letter could fetch £100,000</p>
</div> <!-- watchlistenblock div -->
<div class="wlblock">
<img src="images/rightimage.png" />
<p>Cameron defends "Muppet" remark</p>
</div> <!-- watchlistenblock div -->
<img class="rightarrow" src="images/rightarrowbutton.png" alt="rightarrow" />
<ul>
<li>Sentence 1</li>
<li>Sentence 2</li>
<li>Sentence 3</li>
</ul>
</div> <!-- watchlisten div -->
And here is my CSS:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
/* background-color: green; */
}
/* BBC Logo */
#logodiv {
padding-top: 8px;
float: left;
border-right: 1px solid #990000;
padding-right: 15px;
}
/* Sign In Text */
#signindiv {
font-weight: bold;
font-size: 0.9em;
float: left;
padding: 5px 50px 8px 8px;
border-right: 1px solid #990000;
}
/* Sign In Image */
#signindiv img {
position: relative;
float: left;
margin: 6px 0 0 2px;
}
#signindiv p {
float: left;
margin: 10px 0 0 4px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
float: left;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style-type: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 15px 20px 10px 20px;
text-align: center;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 8px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 5px;
padding-right: 22px;
background-image:url('images/magnifyglass.png');
background-repeat: no-repeat;
background-position: right center;
}
/* Clears all float attributes */
.break {
clear: both;
}
#newsbar {
background-color:#990000;
width: 100%;
height: 100px;
color: #FFFFFF;
}
#newsbar p {
margin: 10px 0 0 0;
padding: 0;
padding-top: 10px;
float: left;
}
#newsheader {
font-size: 3em;
}
#uk {
font-size: 0.7em;
padding-left: 20px;
}
#rss {
float: right;
margin-top: 38px;
}
#rss img {
height: 13px;
padding-right: 16px;
}
/* Topics Menu: Home, World, UK, England, N. Ireland, etc. */
#topicmenu {
padding-right: 16px;
}
#topicmenu ul {
background-color: #3E0C0D;
padding: 5px 0 0 5px;
margin: 0;
height: 20px;
}
#topicmenu li {
list-style-type: none;
font-size: 0.8em;
border-right: 1px solid #990000;
padding: 0 6px 0 6px;
float: left;
text-align: center;
background-color: none;
}
/* UK Tab: Grey; */
.selected {
background-color: #EDEDED;
color: #666666;
height: 20px;
position: relative;
top: -4px;
padding-top: 4px !important;
}
/* Content DIV */
#content {
width: 100%;
color: #535353;
font-size: 0.75em;
}
/* 2 April 2014 Last updated 15:23 */
#content p {
margin-right: 16px;
}
/* 2 April 2014 */
.date {
font-weight: bold;
}
/* Headline: Pollution to spread across England */
h1 {
color: #1F4F82;
font-size: 2.5em;
}
/* Headline Image */
.headlineimg {
height: 220px;
float: left;
}
/* Content div with paragraph and 4 links */
.newsitem {
position: relative;
left: 10px;
top: -15px;
width: 280px;
float: left;
font-size: 1.1em;
}
/* Link with color and no underline */
.newsitem a {
color: #1F4F82;
}
/* All anchor links have no underline */
a {
text-decoration: none;
}
/* Links have underline when hovered */
a:hover {
text-decoration: underline;
}
/* Play button next to Links */
.video {
background-image:url("images/playbutton.png");
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
/* line heights for 4 links */
.linkheight {
line-height: 1.6em;
}
/* sound image */
.sound {
background-image:url("images/soundbutton.png");
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
/* Watch/Listen DIV */
#watchlisten {
background-color: #EEEEEE;
float: right;
width: 367px;
position: relative;
top: -80px;
right: 17px;
}
/* Watch/Listen H2 */
h2 {
color:#505050;
position: relative;
margin: 0;
padding-top: 10px;
padding-left: 10px;
font-size: 1.8em;
}
/* 4 boxes (one orange) image */
.boxesimg {
float: right;
position: relative;
top: -14px;
right: 10px;
}
/* left arrow image (WATCH/LOOK) */
.leftarrow {
float: left;
border-right: 1px solid white;
height: 134px;
}
/* Orange Div with words in them */
.wlblock {
float: left;
background-color: #D1700E;
width: 157px;
border-right: 1px solid white;
}
/* a tag in class wlblock, made to be clickable */
.wlblock a {
color: white;
}
/*P tag in class wlblock */
.wlblock p {
margin: 9px 10px 6.5px 10px;
}
/* right arrow image (WATCH/LOOK) */
.rightarrow {
float: left;
height: 134px;
}
#watchlisten ul {
border: 2px solid green;
position: relative;
}
#watchlisten li {
list-style-type: none;
background-image:url("images/liveimg.png");
background-repeat: no-repeat;
font-size: 1.4em;
border-bottom: ;
}
And here is my JSFiddle with HTML & CSS:
http://jsfiddle.net/bbx4xdad/
You need to add padding to the list items. The CSS code that you provided shows that the Sentence 1, Sentence 2 etc list items are not targeted. Try adding this code:
#watchlisten ul li {
padding-left: 25px;
}
Alternatively, you may try using the "list-style-image" attribute this way:
ul {
list-style-image: url('my-image.png');
}
There are two things causing you issues:
There is no padding on the list items to create space for the background image. Give them some left padding and remove the padding on ul
The left arrow has float: left and this is bringing your unordered list with it. Clear the float with #watchlistendiv ul { clear: left; }
HTML / CSS / Demo
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
background-color: #7A0000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
/* background-color: green; */
}
/* BBC Logo */
#logodiv {
padding-top: 8px;
float: left;
border-right: 1px solid #990000;
padding-right: 15px;
}
/* Sign In Text */
#signindiv {
font-weight: bold;
font-size: 0.9em;
float: left;
padding: 5px 50px 8px 8px;
border-right: 1px solid #990000;
}
/* Sign In Image */
#signindiv img {
position: relative;
float: left;
margin: 6px 0 0 2px;
}
#signindiv p {
float: left;
margin: 10px 0 0 4px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
float: left;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style-type: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 15px 20px 10px 20px;
text-align: center;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 8px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 5px;
padding-right: 22px;
background-image: url('images/magnifyglass.png');
background-repeat: no-repeat;
background-position: right center;
}
/* Clears all float attributes */
.break {
clear: both;
}
#newsbar {
background-color: #990000;
width: 100%;
height: 100px;
color: #FFFFFF;
}
#newsbar p {
margin: 10px 0 0 0;
padding: 0;
padding-top: 10px;
float: left;
}
#newsheader {
font-size: 3em;
}
#uk {
font-size: 0.7em;
padding-left: 20px;
}
#rss {
float: right;
margin-top: 38px;
}
#rss img {
height: 13px;
padding-right: 16px;
}
/* Topics Menu: Home, World, UK, England, N. Ireland, etc. */
#topicmenu {
padding-right: 16px;
}
#topicmenu ul {
background-color: #3E0C0D;
padding: 5px 0 0 5px;
margin: 0;
height: 20px;
}
#topicmenu li {
list-style-type: none;
font-size: 0.8em;
border-right: 1px solid #990000;
padding: 0 6px 0 6px;
float: left;
text-align: center;
background-color: none;
}
/* UK Tab: Grey; */
.selected {
background-color: #EDEDED;
color: #666666;
height: 20px;
position: relative;
top: -4px;
padding-top: 4px !important;
}
/* Content DIV */
#content {
width: 100%;
color: #535353;
font-size: 0.75em;
}
/* 2 April 2014 Last updated 15:23 */
#content p {
margin-right: 16px;
}
/* 2 April 2014 */
.date {
font-weight: bold;
}
/* Headline: Pollution to spread across England */
h1 {
color: #1F4F82;
font-size: 2.5em;
}
/* Headline Image */
.headlineimg {
height: 220px;
float: left;
}
/* Content div with paragraph and 4 links */
.newsitem {
position: relative;
left: 10px;
top: -15px;
width: 280px;
float: left;
font-size: 1.1em;
}
/* Link with color and no underline */
.newsitem a {
color: #1F4F82;
}
/* All anchor links have no underline */
a {
text-decoration: none;
}
/* Links have underline when hovered */
a:hover {
text-decoration: underline;
}
/* Play button next to Links */
.video {
background-image: url("images/playbutton.png");
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
/* line heights for 4 links */
.linkheight {
line-height: 1.6em;
}
/* sound image */
.sound {
background-image: url("images/soundbutton.png");
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
/* Watch/Listen DIV */
#watchlisten {
background-color: #EEEEEE;
float: right;
width: 367px;
position: relative;
top: -80px;
right: 17px;
}
/* Watch/Listen H2 */
h2 {
color: #505050;
position: relative;
margin: 0;
padding-top: 10px;
padding-left: 10px;
font-size: 1.8em;
}
/* 4 boxes (one orange) image */
.boxesimg {
float: right;
position: relative;
top: -14px;
right: 10px;
}
/* left arrow image (WATCH/LOOK) */
.leftarrow {
float: left;
border-right: 1px solid white;
height: 134px;
}
/* Orange Div with words in them */
.wlblock {
float: left;
background-color: #D1700E;
width: 157px;
border-right: 1px solid white;
}
/* a tag in class wlblock, made to be clickable */
.wlblock a {
color: white;
}
/*P tag in class wlblock */
.wlblock p {
margin: 9px 10px 6.5px 10px;
}
/* right arrow image (WATCH/LOOK) */
.rightarrow {
float: left;
height: 134px;
}
#watchlistendiv ul {
border: 2px solid green;
position: relative;
clear: left;
padding: 0;
}
#watchlistendiv li {
list-style-type: none;
background-image: url("http://www.placehold.it/50");
background-repeat: no-repeat;
padding-left: 50px;
font-size: 1.4em;
}
<div id="content">
<!-- newsitem -->
<div id="watchlisten">
<h2>Watch/Listen</h2>
<img class="boxesimg" src="images/boxes.png" alt="boxes" />
<div class="break"></div>
<img class="leftarrow" src="images/leftarrowbutton.png" alt="leftarrow" />
<div class="wlblock">
<img src="images/leftimage.png" />
<p>Titanic letter could fetch £100,000
</p>
</div>
<!-- watchlistenblock div -->
<div class="wlblock">
<img src="images/rightimage.png" />
<p>Cameron defends "Muppet" remark
</p>
</div>
<!-- watchlistenblock div -->
<img class="rightarrow" src="images/rightarrowbutton.png" alt="rightarrow" />
<div id="watchlistendiv">
<ul>
<li>Sentence 1
</li>
<li>Sentence 2
</li>
<li>Sentence 3
</li>
</ul>
</div>
</div>
<!-- watchlisten div -->
</div>
<!-- fixedwidth -->
</div>
<!-- content -->
</div>
<!-- topbar -->
</div>
<!-- container -->
So I am developing a little forum and I ran into a little design problem. The sidebar in each post is supposed to match the height of the content (the text written) but the sidebar only goes to the height necessary to display everything and then stops.
JSFiddle: http://jsfiddle.net/9stPU/5/
CSS:
.forumContent {
list-style-type: none;
background: #34495e;
letter-spacing: 1px;
width: 1170px;
margin: 0;
color: white;
}
.forumContent li {
padding: 0 0 0 10px; /* 5px 0 5px 10px */
margin-left: -40px;
min-height: 41px;
overflow: auto;
border-bottom: 1px solid #000;
}
.forumContent li:last-child {
border-bottom: none;
}
.forumContent li h3 {
margin: 0;
padding: 0;
font-size: 14px;
}
.forumContent li small {
font-size: 9px;
}
.forumContent a {
color: white;
text-decoration: none;
width: 100%;
height: 100%;
}
.forumContent li:hover {
background: #3E5368;
}
.forumContent a li {
float: left;
width: 366px;
}
.forumContent a li:first-child {
width: 100px;
}
.forumContent li .new b {
font-size: 12px;
}
.forumContent li .new {
float: right;
margin-right: 8px;
margin-top: -2px;
font-size: 9px;
background: #2c3e50;
padding: 4px;
border-radius: 6px;
}
.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
min-height: 100%;
height: 100%;
}
.topicUser h3 {
margin-left: 2 .5px !important;
}
.topicUser small {
position: absolute;
margin-top: -15px;
margin-left: 7 .5px;
}
.topicUser p {
margin-top: 2px;
margin-left: 3px;
}
.topicContent {
width: 1060px;
float: right;
height: 100%;
}
.topicContent p {
padding: 5px;
}
You can use display:table; properties: DEMO
a single patch to test it ;
li {
display:table;
}
li > div {
display:table-cell;
float:none!important;/* float kills display; so do not use it with display; */
vertical-align:top;
}
Put:
.forumContent li {
padding: 0 0 0 10px; /* 5px 0 5px 10px */
margin-left: -40px;
min-height: 41px;
overflow: auto;
border-bottom: 1px solid #000;
position: relative;
}
and
.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
min-height: 100%;
height: 100%;
position:absolute;
}
notice position properties.
Look here http://jsfiddle.net/9stPU/6/
With character: http://jsfiddle.net/nuu6g/
For some reason, I cannot click on my text on my navigation menu. This is most likely due to the (missing) image on the left, which I will refer to as the "character." However, when I remove the character, I can indeed click on the text again.
Without character: http://jsfiddle.net/aN5s5/
body {
background:grey;
}
.topContainer {
width: 1000px;
height: 125px;
margin: 0 auto;
padding-bottom: 20px;
}
#logo {
float: left;
padding: 10px 10px;
}
/* Navigation */
#navigation {
background: #107AEB;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#107AEB), to(#106FEB));
background: -webkit-linear-gradient(top, #107AEB, #106FEB);
background: -moz-linear-gradient(top, #107AEB, #106FEB);
background: -ms-linear-gradient(top, #107AEB, #106FEB);
background: -o-linear-gradient(top, #107AEB, #106FEB);
border: 2px solid rgba(16, 86, 235, 0.9);
border-radius: 15px;
float: right;
width: 455px;
height: 55px;
margin-top: 22px;
z-index: 1;
}
#navigation ul {
display: inline-block;
position: absolute;
list-style-type: none;
}
#navigation li {
display: inline-block;
}
#navigation a {
color: #FFF;
font-family: SEGOEUIL, Arial, sans-serif;
text-shadow: 0 1px 0 #000;
text-align: center;
padding: 5px 10px;
font-size: 17px;
}
#navigation a:hover {
background: rgba(16, 86, 235, 0.9);
border-radius: 5px;
}
#navigation a:active {
text-decoration: none;
}
#navigation a:link {
text-decoration: none;
}
.character {
z-index: 2;
padding: 0 275px;
float: left;
position: absolute;
width: 187px;
height: 174px;
}
/* Wrapper */
#wrapper {
background: #FFF;
/*rgba(255, 255, 255, 0.85);*/
border-top-left-radius: 25px;
border-top-right-radius: 25px;
width: 1000px;
height: 1200px;
position: relative;
z-index: 3;
overflow: hidden;
margin: 0 auto;
}
#photoContent {
background: #ffcc00;
border: 1px solid #b62100;
border-radius: 8px;
width: 781px;
height: 231px;
margin-top: 12px;
display: block;
margin-left: auto;
margin-right: auto;
}
.displayPhoto {
width: 771px;
height: 221px;
border: 0;
border-radius: 8px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 3px;
border: 1px solid #b62100;
}
#leftContent {
padding-top: 15px;
width: 500px;
height: 140px;
float: left;
padding-left: 45px;
}
.title {
font-family: Arial, sans-serif;
color: #3abfee;
font-size: 20px;
}
.desc {
color: #575757;
font-size: 15px;
font-family: Arial, sans-serif;
}
#rightContent {
padding-top: 15px;
width: 300px;
height: 140px;
float: right;
padding-right: 25px;
}
#flashContent {
padding-left: 25px;
width: 700px;
height: 500px;
}
hr {
width: 750px;
height: 1px;
background: #CCC;
border: none;
margin-top: 10px;
}
/* Bottom Wrapper */
#bwCont {
width: 1000px;
height: 500px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.galleryCont {
display: block;
margin-left: auto;
margin-right: auto;
width: 650px;
height: 150px;
}
.galleryImgCont {
width: 175px;
height: 175px;
float: left;
}
.galleryTitle {
font-family:'Exo 2', sans-serif;
font-size: 17px;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
padding-top: 145px;
}
.galleryDesc {
font-family:'Exo 2', sans-serif;
font-size: 15px;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
#galleryImg {
width: 175px;
height: 125px;
border: 5px solid #F5F5F5;
box-shadow: 0 0 7px;
border-radius: 5px;
float: left;
}
.readMore {
width: 175px;
height: 50px;
background: #000;
border: 0;
border-radius: 5px;
padding: 10px 10px;
color: #FFF;
font-family:'SEGOEUIL', sans-serif;
font-size: 17px;
}
.readMore:hover {
background: #202020;
}
Please help me, thanks! Also, just an extra question; is there any way I can keep the read more buttons inline, instead of like a staircase? Sorry, but thank you!
For your links to be "clickable", either adjust the padding/width of #character or use the following CSS so #navigation comes up top of #character
#navigation {
z-index: 3;
position: relative;
}
DEMO
For "Read More" to be aligned, you're going to need to have the same number of lines in the title and the description, or you can set a minimum height (or even just the height) of those by adding the following CSS for eaxmple:
.galleryTitle {
min-height:40px;
}
.galleryDesc {
min-height:60px;
}
DEMO
Your nav items are displaying in a staircase because there is not enough room due to the width of your ul. adding width 100% will allow them to display inline the way you want.
#navigation ul {
width: 100%
}
the reason you can't click your text link is because of your character class overlaying your images with a higher z-index.
I'm trying to create a new page in which I apply my own CSS and use some of the components developed here: http://aozora.github.io/bootmetro/index.html.
Problem is that on one component the browser is only applying the style from my file and not the style defined on the .css file I downloaded from the site. Trouble is that firebug shows that the file is being tranfered to the user but somehow its not being used even if the class defined from tag is clearly defined on the other .css file.
Heres the source of the page:
<div class="header">
<div class="right textHeader">
<div class="left logo"><p class="title">Portal para la gestión y control<br>
de la implementación del sistema de información PAI
</p>
</div>
<div class="right textInfo">
<div class="left greetTime">
<img src="/Content/Images/calendar.png"> 27/04/2013 12:15:25 p.m.
</div>
<div class="greet">
Hola, <a class="username" href="/Account/Manage" title="Manage">administrador</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" value="gsGgnTHMhT55z7aQFmarrbLlUQK4x2nuMNZP_kXbqRx2j3kWOhNSc3RptPzG8118PGgkQOpU_erRuCcZ7GvH4FhKNAlaCug0dFUGKjiFqbP5wjhFTJConDCIZzZppq090" type="hidden"> Desconectarse
</form> </div>
</div>
</div>
<div class="left imgHeader">
<img src="/Content/Images/logo-minSalud.png">
<img src="/Content/Images/logo-prosperidad.png">
</div>
</div>
<div id="categories">
Inicio
</div>
<div id="content">
<h2>Bienvenido</h2>
This is the item I want to apply the class to
Administrar banco de información**Administrar usuariosReportes gerenciales
</div>
Here's the firebug screenshot:
And here's the screenshot showing that both files are being downloaded:
Here's my css file:
body {
color: #353535;
background-color: #fff;
background: url("Images/bg.jpg") repeat-x 0 0 #EBEBEB;
font-size: 1em;
margin: 0;
padding: 0;
font-family: 'Maven Pro', sans-serif;
}
header, footer, nav, section
{
display: block;
}
.editButton {
background:url(Images/editarPequeño.ico);
background-repeat: no-repeat;
display: block;
text-indent: -9999px; /* hides the link text */
}
.deleteButton {
background:url(Images/deletePequeno.ico);
background-repeat: no-repeat;
display: block;
text-indent: -9999px; /* hides the link text */
}
.left
{
float:left
}
.right {
float: right;
}
.navBar {
background-color: #F7921E;
height: 48px;
}
/*//////////TABLA LISTADO /////////////////////////*/
table {
color: #333;
/*font-family: Helvetica, Arial, sans-serif;*/
/*width: 640px;*/
border-collapse:
collapse; border-spacing: 0;
margin-left:auto;
margin-right:auto;
}
td, th {
border: 1px solid transparent; /* No more visible border */
height: 30px;
transition: all 0.3s; /* Simple transition for hover effect */
}
th {
background: #5DBCD2; /* Darken header a bit */
font-weight: bold;
border: 1px solid #CCC;
}
td {
background: #FAFAFA;
text-align: center;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td { background: #F1F1F1; }
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td { background: #FEFEFE; }
tr td:hover { background: #666; color: #FFF; } /* Hover cell effect! */
/*///////////////////////////////*/
.title {
/*font-family: 'Montserrat', sans-serif;*/
/*width: 500px;*/
font-weight: bold;
}
.greet {
font-size: 0.78em;
}
.textInfo {
width:50%;
/*height:100%;*/
}
/*///////////////////////////////////////*/
.listView {
margin-left: 0px;
list-style: none outside none;
}
ul{
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
.metrouicss .listview:before, .metrouicss .listview:after {
display: table;
content: "";
}
/*///////////////////////////////////////*/
.okButton {
background: -moz-linear-gradient(center top , #ff6600 0px, #ff6600 100%) repeat scroll 0 0 transparent;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
opacity: 0.75;
padding: 6px 10px;
margin-top:5px;
display:block;
margin:0px auto;
}
.okButton {
transition: opacity 0.2s ease 0s;
}
.footer {
width: 100%;
height: 100px;
background: none repeat scroll 0% 0% rgb(138, 188, 203);
margin-top:50px;
color: rgb(0, 0, 0);
font-size: 0.7em;
border-top: 1px solid rgb(98, 143, 156);
}
.logo {
width:50%
}
.textHeader {
width:63%
}
.greetTime {
font-size: 0.58em;
/*width: 15px;*/
}
.header {
height: 122px;
width: auto;
margin-top:20px;
/*margin-left:5%;*/
/*margin: 0px auto;*/
}
/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
border: 1px solid #ddd;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
}
legend {
font-size: 1.2em;
font-weight: bold;
color:black
}
textarea {
min-height: 75px;
}
.editor-label {
margin: 1em 0 0 0;
}
.editor-field {
margin: 0.5em 0 0 0;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #f00;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}
.validation-summary-errors {
font-weight: bold;
color: #f00;
}
.validation-summary-valid {
display: none;
}
/*CSS Aditions*/
BODY { font-size: 1em; margin: 0; }
DIV#header DIV.title, DIV.item H3, DIV.item H4, DIV.pager A
{
/*font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;*/
}
A#loginLink {
font-size:1.5em;
}
/*DIV#header { background-color: #5DBCD2; border-bottom: 2px solid #111; color: black; }*/
DIV#header DIV.title { font-size: 2em; padding: .6em; }
DIV#title { font-size: 2em; padding: .6em;float:right }
DIV#headerImages { float:left}
/*DIV#content { border-left: 2px solid gray; margin-left: 9em; padding: 1em; }*/
DIV#categories { float: left; width: 8em; padding: .3em; }
DIV.item { border-top: 1px dotted gray; padding-top: .7em; margin-bottom: .7em; }
DIV.item:first-child { border-top:none; padding-top: 0; }
DIV.item H3 { font-size: 1.3em; margin: 0 0 .25em 0; }
DIV.item H4 { font-size: 1.1em; margin:.4em 0 0 0; }
DIV.pager { text-align:right; border-top: 2px solid silver;
padding: .5em 0 0 0; margin-top: 1em; }
DIV.pager A { font-size: 1.1em; color: #666; text-decoration: none;
padding: 0 .4em 0 .4em; }
DIV.pager A:hover { background-color: Silver; }
DIV.pager A.selected { background-color: #353535; color: White; }
DIV#categories A
{
font: bold 1.1em "Arial Narrow","Franklin Gothic Medium",Arial; display: block;
text-decoration: none; padding: .6em; color: Black;
border-bottom: 1px solid silver;
}
DIV#categories A.selected { background-color: #666; color: White; }
DIV#categories A:hover { background-color: #CCC; }
DIV#categories A.selected:hover { background-color: #666; }
And heres the css file i downloaded
/* Metro Tiles
-------------------------------------------------- */
.bg-color-blue {
background-color: #0072BC !important;
}
.bg-color-blueDark {
background-color: #662D91 !important;
}
.bg-color-green {
background-color: #01a31c !important;
}
.bg-color-greenDark {
background-color: #008641 !important;
}
.bg-color-red {
background-color: #bc1c48 !important;
}
.bg-color-yellow {
background-color: #ffc40d !important;
}
.bg-color-orange {
background-color: #CD4900 !important;
}
.bg-color-pink {
background-color: #c3325f !important;
}
.bg-color-purple {
background-color: #603cba !important;
}
.bg-color-darken {
background-color: #1c1c1c !important;
}
.metro {
overflow: hidden;
}
.metro .carousel-control {
top: 20%;
}
.metro .metro-sections {
height: auto;
position: relative;
overflow: hidden;
width: 10000px;
}
.metro-sections h2 {
margin-left: 5px;
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
text-transform: lowercase;
}
.metro .metro-sections .metro-section {
position: relative;
float: left;
/*width: 810px !important;*/
width: auto;
height: auto;
margin-right: 75px;
}
/* fixed widths for tile sections
units are measured per square tile width, i.e.: tile-span-1 = 160px = 1 square tile width (including margin)
*/
.metro .metro-sections .metro-section.tile-span-1 { width: 160px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-2 { width: 320px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-3 { width: 480px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-4 { width: 640px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-5 { width: 640px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-6 { width: 800px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-7 { width: 960px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-8 { width: 1120px; margin-left: 0;}
/*default tile definition */
.metro .tile {
position: relative;
display: block;
float: left;
margin: 5px;
padding: 0;
/*padding-bottom: 1px;*/
width: 150px;
height: 150px;
color: #FFF;
cursor: pointer;
overflow: hidden;
text-decoration: none;
background-color: #2C83EF;
}
.metro .tile:hover {
outline: 3px #225a68 solid;
}
.scroll {
-webkit-transition:left 0.6s ease; /* here the animation is set on 5 seconds */
-moz-transition:left 0.6s ease;
-o-transition:left 0.6s ease;
transition:left 0.6s ease;
}
/* Metro Tiles Templates
-------------------------------------------------- */
.metro .tile.square.text {
width: 110px;
height: 110px;
padding: 20px;
}
.metro .tile.square.image {
width: 150px;
height: 150px;
padding: 0;
}
.metro .tile.square.image img {
max-width: 150px;
max-height: 150px;
}
.metro .tile.squarepeek {
width: 150px;
height: 300px;
}
.metro .tile.squarepeek .text-inner {
width: 110px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.text {
width: 270px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.image {
width: 310px;
height: 150px;
}
.metro .tile.wide.image.collection img {
max-width: 158px;
max-height: 150px;
float: left;
}
/* template for full image */
.metro .tile.wide.imagetext.wideimage {
width: 310px;
height: 150px;
padding: 0;
}
/* template with normal 80x80 image */
.metro .tile.wide.imagetext {
width: 270px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.imagetext .textover-wrapper {
position: absolute;
bottom: 0;
width: 270px;
height: 48px;
padding: 2px 20px;
background-color: inherit;
}
.metro .tile.widepeek {
width: 310px;
height: 300px;
}
/* Default Tile
-------------------------------------------------- */
.metro .tile.app .image-wrapper {
display: block;
width: 150px;
height: 80px;
margin-top: 20px;
padding: 8px 0;
text-align: center;
vertical-align: middle;
}
.metro .tile.app .image-wrapper img {
max-width: 80px;
max-height: 80px;
margin: 0 auto;
}
.metro .tile .app-label {
bottom: 5px;
font-size: 12px;
left: 20px;
position: absolute;
}
.metro .tile .app-count {
position: absolute;
right: 20px;
bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.metro .tile.wide.app {
width: 310px;
height: 150px;
}
.metro .tile.wide.app .image-wrapper {
width: 310px;
}
.image-wrapper span.icon {
font-size: 80px;
height: 80px;
line-height: 80px;
width: 80px;
}
/*
-------------------------------------------------- */
.metro .tile.square.text .text-big {
font-size: 76px;
line-height: 76px;
text-align: left;
overflow: hidden;
}
.metro .tile.square.text.tilesquareblock .text {
font-size: 14px;
font-weight: bold;
text-align: left;
overflow: hidden;
}
/* normal header in 1 line of wrapped text*/
.metro .tile .text-header {
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
font-size: 34px;
line-height: 36px;
max-height: 36px;
text-align: left;
overflow: hidden;
}
/* One string of large text wrapped over a maximum of three lines.*/
.metro .tile .text-header3 {
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
font-size: 34px;
line-height: 36px;
text-align: left;
max-height: 110px;
overflow: hidden;
}
/* 1 line of regular text (not wrapped) */
.metro .tile .text {
font-size: 15px;
line-height: 18px;
height: 18px;
font-weight: normal;
text-align: left;
overflow: hidden;
}
/* regular text wrapped over a maximum of 2 lines */
.metro .tile .text2 {
font-size: 15px;
font-weight: normal;
line-height: 20px;
max-height: 44px;
overflow: hidden;
text-align: left;
}
/* regular text wrapped over a maximum of 3 lines */
.metro .tile .text3 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 56px;
overflow: hidden;
}
/* regular text wrapped over a maximum of 4 lines */
.metro .tile .text4 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 72px;
overflow: hidden;
}
/* regular text wrapped over a maximum of 5 lines */
.metro .tile .text5 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 92px;
overflow: hidden;
}
/* Image Only Tiles
-------------------------------------------------- */
.metro .tile.square.image img {
max-width: 150px;
max-height: 150px;
}
/* Wide Text Only Tiles
-------------------------------------------------- */
.metro .tile .column {
display: block;
float: left;
width: 130px;
}
.metro .tile .column2-label {
display: block;
float: left;
width: 90px;
}
.metro .tile .column2-text {
display: block;
float: left;
width: 160px;
}
.metro .tile .column3-label {
display: block;
float: left;
width: 50px;
}
.metro .tile .column3-text {
display: block;
float: left;
width: 200px;
}
/* Wide Image Only Tiles
-------------------------------------------------- */
.metro .tile.wide.image .mini-tiles {
display: inline-block;
float: left;
width: 152px;
height: 150px;
}
.metro .tile.wide.image .mini-tiles img {
display: inline-block;
float: left;
max-width: 75px;
max-height: 75px;
border-left: 1px solid #2A2A2A;
}
/* Wide Image & Text Tiles
-------------------------------------------------- */
.metro .tile.wide.imagetext .column-text,
.metro .tile.wide.text .column-text {
display: block;
float: left;
width: 180px;
padding-left: 10px;
}
.metro .tile.wide.text .column-text-big {
display: block;
float: left;
width: 80px;
}
.metro .tile.wide.imagetext .image-wrapper {
display: block;
float: left;
width: 80px;
height: 80px;
}
.metro .tile.wide.imagetext .image-wrapper img {
max-width: 80px;
max-height: 80px;
}
/* ListView
-------------------------------------------------- */
.listview-container.grid-layout {
border: solid 2px rgba(0, 0, 0, 0.13);
height: 240px;
overflow: auto;
padding: 2px;
background-color: #FFF;
}
.mediumListIconTextItem {
display: inline-block;
position: relative;
vertical-align: top;;
width: 282px;
height: 70px;
padding: 5px;
margin-bottom: 7px;
margin-right: 24px;
border: solid 3px transparent;
overflow: hidden;
background-color: #FFF;
cursor: pointer;
}
.mediumListIconTextItem:hover {
border: solid 3px #b3b3b3;
background-color: #b3b3b3;
}
.mediumListIconTextItem img.mediumListIconTextItem-Image {
display: inline-block;
vertical-align: top;;
width: 60px;
height: 60px;
margin: 5px;
}
.mediumListIconTextItem .mediumListIconTextItem-Image[class^="icon-"],
.mediumListIconTextItem .mediumListIconTextItem-Image[class*=" icon-"] {
display: inline-block;
width: 60px;
height: 60px;
font-size: 60px;
line-height: 60px;
margin: 5px;
}
.mediumListIconTextItem .mediumListIconTextItem-Detail {
display: inline-block;
vertical-align: top;;
margin: 5px;
}
.mediumListIconTextItem.selected {
background-color: #4617b4;
}
.mediumListIconTextItem.selected:after {
position: absolute;
top: 5px;
right: 5px;
width: 16px;
height: 16px;
font-family: 'IcoMoon';
content: "\e03c";
color: #FFF;
font-size: 16px;
}
.mediumListIconTextItem.selected:hover {
border: solid 3px #b3b3b3;
background-color: #4617b4;
}
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail,
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail h4,
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail h6 {
color: #FFF;
}
/* Special undocumented tiles for ads
-------------------------------------------------- */
#ad-container {
background-color: #0072BC;
height: 90px;
margin-top: 10px;
text-align: center;
width: 100%;
}
/*Button (125x125)*/
.metro .tile.ad.ad125 {
width: 125px;
height: 125px;
padding: 12px 13px 13px 12px;
}
/*Small Rectangle (180x150)*/
.metro .tile.wide.ad.ad125 {
width: 180px;
height: 150px;
padding: 0 65px;
}
All the rules from the downloaded file that affect the .tile class start like this .metro .tile which means that the .tile element must be a descendant of a .metro element (an element with class metro)
You html does not show your link being inside a .metro element so the styles do not apply ..
it seems that stylesheets are loaded, but from basic look at the Metro Tiles CSS I decided that you forgot to put metro class to any parent of your tile, for example add class to your content
<div id="content" class="metro">