The title needs to be at bottom of the text, and just above the video. The border for the wrapper is breaking near the bottom left corner (because of the YouTube video) when viewed in Chrome.
<head>
<style type="text/css">
body{font:15px arial,sans-serif;}
img{border-style: none;}
a:link {color:#0000FF;} /* unvisited link */
a:visited {color:#0000FF;} /* visited link */
a:hover {color:#0000FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
#title{
font-size:130%;
vertical-align:bottom; /*What am I doing wrong here? */
white-space:nowrap;
}
#arrows{
float:left;
margin-top:25px;
margin-left: 25px;
}
#list{
float:right;
margin-right:60px;
}
#wrapper{
width:300px;
border: 10px solid orange; /*Why is the YouTube video breaking this when viewed in Chrome? */
}
#video{
margin:20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="arrows">
<br />
<img src='img/up.png'><br />
<img src='img/down.png'>
</div>
<div id="list">
<ul>
<li><a href='...' id='0' >zero</a></li>
<li><a href='...' id='1' >one</a></li>
<li><a href='...' id='2' >two</a></li>
<li><a href='...' id='3' >three</a></li>
<li><a href='...' id='4' >four</li>
<li><a href='...' id='5' >five</a></li>
</ul>
</div>
<div id='title'>Beginner Tutorial 1</div>
<div id='video'><embed style="width:260px; height:176px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=4204540069740232845&hl=en" flashvars=""> </embed></div>
</div>
</body>
</html>
Just move
<div id='title'>Beginner Tutorial 1</div>
below the
<div id='video'><embed style="width:260px; height:176px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=4204540069740232845&hl=en" flashvars=""> </embed></div>
but before the last
</div>
This happened because your other elements are floated and, therefore, are outside the flow of the document.
EDIT: I don't see the border issue in Chrome, BTW.
EDIT #2: To place the div id-title above the video, add the following line above the title:
<br style="clear:both;" />
Related
I'm new to CSS. The tutorials taught me, that settings defined in the upper part of the css file are overwritten by the settings defined below. Now I try to create a custom cursor for my whole page, which is animated while clicking on a link. My code looks like this:
* {
cursor: url("../dartpfeil.cur"), auto;
}
...
.menu a:active {
cursor: url("../dartpfeil_steckt.cur"), auto;
}
But this doesn't work. The cursor defined in the * section works, but if I click on the menu link, the cursor doesn't change. If I delete the * section and add the following code:
.menu a:hover {
cursor: url("../dartpfeil.cur"), auto;
}
it works, but the "dartpfeil.cur" cursor is only shown by hovering the links. I also tried
*:hover {
cursor: url("../dartpfeil.cur"), auto;
}
but then the cursor is also only shown by hovering a link. I want to use the "dartpfeil.cur" on the whole page as if it is defined in *, but i want also the "dartpfeil_steckt.cur" while link is active. Is there any possible solution for this problem?
Thanks and a happy new year to all!
EDIT: Error in code fixed
EDIT2: As asked, the html code below:
<html>
<head>
<title>Dartverein XY</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="index.php" id="headerLink">
<section id="header">
<div id="title">Steeldartverein<br>Mühldorf e.V.</div>
</section>
</a>
<div class="horizontalBorder"></div>
<section class="menu">
<p class="verticalBorder"></p>
<div class="menuElementRed">News</div>
<p class="verticalBorder"></p>
<div class="menuElementGreen">Über uns</div>
<p class="verticalBorder"></p>
<div class="menuElementRed">Weiteres</div>
<p class="verticalBorder"></p>
<div class="menuElementGreen">Login</div>
<p class="verticalBorder"></p>
<p class="lastVerticalBorder"></p>
</section>
<div class="horizontalBorder"></div>
</body>
</html>
Why it does not work is because it is your div that is the active element and for a div to respond to the :active class it need tabindex.
I added tabindex (and an extra CSS rule) to/for the News link div so you see how that work, and I also removed the div on the Über uns link and now that one work too
* {
cursor: url("../dartpfeil.cur"), auto;
color: lime;
}
.menu a:active {
cursor: url("../dartpfeil_steckt.cur"), auto;
color: red;
}
.menu a div:active {
cursor: url("../dartpfeil_steckt.cur"), auto;
color: red;
}
<html>
<head>
<title>Dartverein XY</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="index.php" id="headerLink">
<section id="header">
<div id="title">Steeldartverein<br>Mühldorf e.V.</div>
</section>
</a>
<div class="horizontalBorder"></div>
<section class="menu">
<p class="verticalBorder"></p>
<div tabindex="0" class="menuElementRed">News</div>
<p class="verticalBorder"></p>
Über uns
<p class="verticalBorder"></p>
<div class="menuElementRed">Weiteres</div>
<p class="verticalBorder"></p>
<div class="menuElementGreen">Login</div>
<p class="verticalBorder"></p>
<p class="lastVerticalBorder"></p>
</section>
<div class="horizontalBorder"></div>
</body>
</html>
Does "dartpfeil_steckt.cur" work for *? Your code looks fine, and it should override the wildcard because it's more specific. My best guess is that you have misplaced the file, or misspelled the filename.
http://jsfiddle.net/RyanHell078/MgcDU/6511/
I am working through my first project using Twitter's Bootsrap. My frontend and CSS skills are fledgling and I am working on understanding CSS and responsive layouts better. I have tried to understand why my H2 classes are not separated when viewing on a smaller display, but they are fine when viewing on a full desktop view.
I like Bootstrap overall, but I am still stuck. I have tried multiple remedies and searched high and low and I am still unable to determine an exact cause or better way to implement the titles for these image divs.
My project is to create a gallery site with 6 image tiles on the homepage (index.html). I will be adding some JavaScript, modals, and tooltips etc later. For now I need to get my layout sharp and working properly.
I decided to use a fluid layout. I created a 'fluid container', then filled it with some rows and spans.My code looks like this:
my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Gallery Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- My Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<!-- responsive fallbacks for apple and ie -->
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/favicon.png">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<!-- Navigation -->
<style type="text/css">
body { background: black; }
</style>
<!-- fluid container start -->
<div class="container-fluid">
<div class="row-fluid">
<!-- horizontal bar top of body -->
<div class="span12"><a class="brand" href="index.html">
<img src="/assets/images/logo.png"></a>
<div class="wrapper"><h1><br><p style="color:white;margin-left:20px;">
Welcome to my Gallery Site</p></h1>
</div>
<!-- navbar -->
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
</a> My Gallery 2013
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active">
Artist
</li>
<li>
Art News
</li>
<li>
Commissions
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Gallaries<br></a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider">
</li>
<li class="nav-header">
contact me
</li>
<li>
<div>
email me
<strong>my phone number here</strong>
</div>
</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>
resources
</li>
<li class="divider-vertical">
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Galleries
</a>
<ul class="dropdown-menu">
<li>
action
</li>
<li>
another action
</li>
<li>
something else here
</li>
<li class="divider">
</li>
<li>
separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<body>
<!-- Main Body Container →
<div class="container-fluid">
<div class="row-fluid">
<!-- span for music -->
<div class="span4">
<div class="image">
<img src="assets/images/music.jpg" alt="music" />
<h2 class="music">music</h2>
</div>
</div>
<!-- end of span for music -->
<!-- span for bio -->
<div class="span4">
<div class="image">
<img src="assets/images/about.jpg" alt="artist biography" />
<h2 class="music">bio</h2>
</div>
</div>
<!-- end of span for bio -->
<!-- span for new art -->
<div class="span4">
<div class="image">
<img src="assets/images/newart.jpg" alt="new art" />
<h2 class="illuminatedanddecor">new art</h2>
</div>
</div><!-- end of span for new art -->
</div><!-- end row fluid -->
<!-- /////////////////// Second tile content row //////////////////////// -->
<div class="row-fluid">
<!-- span for illuminated & decor -->
<div class="span4">
<div class="image">
<img src="assets/images/illumanddecor.jpg" alt="illuminated and decor art" />
<h2 class="illuminatedanddecor">illuminated & decor</h2>
</div>
</div>
<!-- end of span for illuminated & decor -->
<!-- span for commissions -->
<div class="span4">
<div class="image">
<img src="assets/images/commissions.jpg" alt="commissions" />
<h2 class="illuminatedanddecor">commissions</h2>
</div>
</div>
<!-- end of span for commissions -->
<!-- span for ceramics -->
<div class="span4">
<div class="image">
<img src="assets/images/ceramics.jpg" alt="ceramics" />
<h2 class="music">ceramics</h2>
</div>
</div>
<!-- end of span for ceramics -->
</div><!-- end row fluid -->
</div> <!-- /end container fluid-->
</body>
</html>
// My Custom Style Sheet //
/* Footer Border Top */
hr.style-one {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
div.horizontalRule {
clear:both;
width:100%;
background-color:#d1d1d1;
height:3px;
margin-top:10px;
margin-bottom:10px;
}
body {
max-width:950px;
background-color:black;
margin: 0 auto;
font color: white;
}
/* element blocks */
#container
{
height:100%;
width:auto;
position:relative;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
/* custom h2's for each image tile (div) header */
/* music heading */
H2.music {
background:rgba(150, 150, 150, 0.5);
text-align:left;
padding-top:77px;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;
}
/* bio heading */
H2.bio {
background:rgba(170, 187, 97, 0.5);
text-align:left;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;
}
/* new art heading */
H2.newart {
background:rgba(150, 150, 150, 0.5);
text-align:left;
padding-top:77px;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;
}
/* illuminated and decor */
H2.illuminatedanddecor {
background: rgba(170, 187, 97, 0.5);
text-align:left;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;}
}
/* commissions heading */
H2.commissions {
background:rgba(109, 255, 36, .75);
text align:right;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;}
}
/* ceramics heading */
H2.ceramics {
background: rgba(2, 6, 143, 0.5);
text align:right;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;}
}
/* end custom headers for tiles */
.wrapper {
background-image: url(http://nwtronix.com/word/assets/images/navbartile.jpg);
background-repeat: repeat-x;
background-size: height="100%" width="auto";
width: 100%;
height: 100%;
}
/* header */
h1 {
font-family: 'Satisfy', cursive;
font-color: '#E5E4E2';
}
/* Copyright */
copyright {
font-color: '#333333';
}
/* Bar Background for H2's */
.bar {
height: 22px;
padding-top: opx;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacity=50);
background: black;
border-top: 3px solid #ccc;
border-bottom: 3px solid #ccc;
margin-top: 5.0em;
}
p {
margin-left: 20px;
}
For now I have laid out a responsive theme. I created a fluid container. Inside of the fluid-container I created a row fluid, inside of which are 3 span-4’s. There are two rows of these span4’s inside one single container.
I am looking for help with understanding what I am doing wrong with CSS regarding the H2 classes here.
What I did was create some h2 alternatives for each image tile (div). The H2’s define the way I want each title’s title to be. Since the tile’s titles will be on varying background images, I think I need to be able to uniquely position the titles depending on each image. I hoped to use some background opacities to help the titles pop out a bit more from their background images.
My understanding is a custom h2 selector will allow me to create unique styles for any div that I select the custom h2 style inside of. Why the h2 styles are all staying linked when viewing on a small screen is stumping me.
Why are my H2’s all clustered on one single image tile div, when I view in a small display? What am I missing or messing up. I appreciate any and all help and will +1 the best answer.
Thank you
I am developing an events page using jquery mobile. I have a stylish way of showing the date. It currently works flawlessly on my desktop, yet when I view it on my iphone 3gs, I get a blurry Image. The text seems as though it is duplicated on itself just slightly to look like this: help please.
link to the page : here
Here is the css:
.caldate2 { background: url(http://www.fsb.muohio.edu/fsb/templates/images/calpage-red.gif) no-repeat;
width:38px;
height:38px;
text-align:center;
margin-right:8px;
float: left; }
.caldate2 .day {
color: #fff;
margin-top:4px; }
.month { text-transform:uppercase;
color:#d5b549;
font-size:9px; }
and the Markup:
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<a data-rel="back" data-icon="back" data-direction="reverse">Back</a>
<h1>Events</h1>Home
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-dividertheme="a" data-inset="true">
<li data-role="list-divider">Divider</li>
<li>
<div class="caldate2">
<div class="day">
28
</div>
<div class="month">
MAR
</div>
</div>This is a test
</li>
</ul>
</div>
</div><!-- /page -->
</body>
mumis,
looking into it, it would appear the class:
.ui-btn-up-a {
color: #000000;
font-weight: bold;
text-shadow: 0 1px 1px #EEEEEE;
}
is causing an extra "#EEE" text-shadow on the text.
Try removing that from the fsb.min.css file!
Oh and btw,
I'm from around SWOhio area (noticed the MUOhio)
I have a two-column layout. I have a #mainContainer div that contains all of the following (except the #footer):
Across the top: a header div (#intro)(contains a small gradient image),
and a #hero div (contains images)
To contain the two columns: a #content div
Within the #content div on the left: a #mainContent div
Within the #content div on the right: a #sideBar div
Across the bottom (outside the #mainContainer div): a #footer div on the bottom
(including a gradient image like the header div)
Simple, right? But I'm having trouble getting the #mainContainer div to be at the top of the browser (no spaces or that 6-8px default margin/padding all browsers have at the top) and getting the #footer div to span across the entire bottom of the browser window (not inside any of the Div's ). (disregard inline styles in footer). Could someone help me out?
UPDATED: ADDED HTML
body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
background:#bbb;
text-align:center;
}
#mainContainer {
width:980px;
margin: 0 auto;
background: #fff url(../i/content-box-header-gray.jpg) repeat-x;
text-align:left;
/*height: 700px;*/
}
#intro {
/*top:0;*/
margin: 0;
text-align:left;
}
#hero {
width:960px;
padding-left:10px;
padding-right:10px
}
#content {
width:960px;
padding-left:10px;
padding-right:10px;
}
#mainContent_left {
float:left;
width:640px;
margin:0;
padding-right: 20px;
background:#ccc;
}
#sideBar {
float:left;
width:300px;
margin:0;
/*padding-right: 20px;*/
background:#ffd;
}
#footer {
width:960px;
clear:both;
background:#cc9;
}
HTML:
<title>Descriptions </title>
<link rel="stylesheet" href="css/mainstyles.css" type="text/css" />
</head>
<body>
<div id="mainContainer">
<div id="intro"><h2>introducing</h2></div>
<div id="Hero">
<ul>
<li class="name"></li>
<li class="textJoin">is a member of </li>
<li class="name"></li>
</ul>
</div>
<div id="content">
<div id="mainContent">
<h3>First Topic title</h3>
<p>floated left image and text</p>
<p>Some content</p>
<p>Some content</p>
<h3>Second Topic title</h3>
<p>Some content</p>
<p>Image here</p>
<h3>Third Topic title</h3>
<p>(floated left image here) Some text</p>
<h3>Fourth Topic title</h3>
<p>(floated left image here) Some text</p>>
<h3>Fifth Topic title</h3>
<p>(floated left image here) Some text</p>
<p>Image here</p>
<p>(link to FAQ page)</p>
</div>
<div id="sideBar">sidebar content
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="footer_warranty">footer content
<div id="wf_logos" style="float:left; padding:0 10px 0 0;"><p>contact info</p>
</div>
<div id="wf_footerCopy" style="float:left; padding:0 10px 0 0;">
<p>some text</p></div>
<p style="clear:both;" />
</div>
</div>
<p style="clear:both;" />
</div>
</body>
</html>
I am unable to reproduce your problem. However, I have created a fiddle for you, where I have also added some CSS reset rules which should take care of a problem such as this, cross any and all browsers.
You should always use a reset CSS when you start a new site. That way, it's all on your terms and you don't have to "code away" specific browser behaviour.
I have also created some placeholder code since you did not provide any.
I hope the reset fixes your problem.
http://jsfiddle.net/dekket/eERsK/
Edit:
Check this new fiddle. Out to work.
http://jsfiddle.net/dekket/6bTkZ/
Try importing Meyer's reset stylesheet:
http://meyerweb.com/eric/tools/css/reset/
try adding float:left and overflow:hidden to your #mainContainer
you need to set the html and body css margin and padding properties to 0.
use the following in your css file
html, body {
margin: 0;
padding: 0;
}
I'm using this CSS script to create tooltip popup bubbles.
http://trentrichardson.com/examples/csstooltips/
I have it working ok but it is being hidden by an embedded iframe video in the div below.
When I hover over "number one" you can see it get hidden behind the video.
However, when I hover over "number eleven" it is displayed correctly in front of the image.
I have tried changing the z-index values, but no change.
thank for your help
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> ToolTip</title>
<style type="text/css">
* { padding: 0; margin: 0; }
#wrapper {
position: relative;
margin: 0 auto;
width: 980px;
height: 550px;
}
#main {
width:980px;
height:50px;
}
#main ul {
margin:0;
padding:0;
list-style:none;
}
#main ul li {
list-style:none;
display:inline;
}
#video {
width:620px;
height:500px;
float:left;
}
#img {
width:360px;
height:500px;
float:right;
}
/* TOOLTIP HOOVER */
a.tt {
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:normal;
text-decoration:none;
}
a.tt span {
display: none;
}
/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover {
z-index:25;
color: #aaaaff;
background:;
}
a.tt:hover span.tooltip {
display:block;
position:absolute;
top:2px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #111;
text-align: center;
filter: alpha(opacity:80);
KHTMLOpacity: 0.80;
MozOpacity: 0.80;
opacity: 0.80;
}
a.tt:hover span.top {
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle { /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom {
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(bubble.gif) no-repeat bottom;
}
/* end TOOLTIP HOOVER */
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<ul>
<li>
<a href="#" class="tt">Number One
<span class="tooltip">
<span class="top">
</span>
<span class="middle">
Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. You can hover over meThis is my Bubble Tooltip with CSS to see how well these bubble tooltips work
</span>
<span class="bottom">
</span>
</span>
</a>
</li>
<li>Number Two</li>
<li>Number Three</li>
<li>Number Four</li>
<li>Number Five</li>
<li>Number Six</li>
<li>Number Seven</li>
<li>Number Eight</li>
<li>Number Nine</li>
<li>Number Ten</li>
<li>
<a href="#" class="tt">Number Eleven
<span class="tooltip">
<span class="top">
</span>
<span class="middle">
Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. You can hover over meThis is my Bubble Tooltip with CSS to see how well these bubble tooltips work
</span>
<span class="bottom">
</span>
</span>
</a>
</li>
</ul>
</div>
<div id="video">
<iframe width="601" height="353" src="https://www.youtube.com/embed /oao0H5dfyEQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="img">
<img src="http://i.imgur.com/P0ken.jpg" />
</div>
</div>
</body>
</html>
I assume the iframe is going to pull up a flash player. You need to pass wmode=opaque to the player http://kb2.adobe.com/cps/127/tn_12701.html and as you don't control the iframe you are not going to be able to use it the way you need.
The older embed code for youtube with wmode setting was.
<object width='425' height='344'>
<param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'>
<param name='type' value='application/x-shockwave-flash'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name="wmode" value="opaque" />
<embed width='425' height='344'
src='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'
type='application/x-shockwave-flash'
allowfullscreen='true'
allowscriptaccess='always'
wmode="opaque"
></embed>
</object>
Hat tip http://australiansearchengine.wordpress.com/2010/06/19/youtube-video-css-z-index/
As a side note wmode="transparent" also works.