I'm having a headache of a time trying to code an image, that's in the same directory as the html and css files. My marker image for bullet points works without a problem, but my background-image for the header doesn't seem to work. I ran it through a css validator and nothing shows up.
EDIT: What I want to accomplish now that I know my image is loading, is to figure out how to overlay my image on top of the h1 element.
HTML5:
<!DOCTYPE html>
<head>
<link style = "text/css" rel ="stylesheet" href = "pacific.css">
<title>Pacific Trails Resort</title>
<meta Charset="utf-8">
</head>
<body>
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
Home
Yurts
Activities
Reservations
</nav>
<main>
<h2>Enjoy Nature In Luxury</h2>
<img src = "coast.jpg" alt = "Pacific Trails Resort" height = "250" width = "320">
<p><span class = "resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast.
Relax in serenity with panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours opf the redwoods</li>
</ul>
<div>
<span class ="resort">Pacific Trails Resort</span>
<br>
12010 Pacific trails Road
<br>
Zephyr, CA 95555
<br>
<br>
888-555-5555
<br>
</div>
<br>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort
<br>
Contact Ian Rosenberg
</footer>
</body>
CSS:
body{background-color: #FFFFFF; color: #666666; font-family: Arial, Helvetica, sans-serif}
header{ background-image: url('sunset.jpg');
background-position: right;
background-repeat: no-repeat;
line-height: 400%;
text-indent: 1em;}
h1{background-color: #000033;
color: #FFFFFF}
nav{background-color: #90C7E3;
font-weight: bold}
nav a{text-decoration: none}
h1{margin-bottom: 0;
font-family: Georgia, Times New Roman, serif}
h2{color: #3399CC;
font-family: Georgia, Times New Roman, serif}
h3{font-family: Georgia, Times New Roman, serif}
ul{list-style-image: url("marker.gif")}
dt{color: #000033}
footer{font-size: 70%;
font-style: italic;
text-align: center;
font-family: Georgia, Times New Roman, serif}
.resort{color: #5C7FA3;
font-weight: bold}
#contact{font-size: 90%}
Your background is loading its just hidden. The problem you are seeing is that your H1 element is covering up the entire background because it's display is set to block (which is default for H1 elements.
I am not sure how you want it to display but you have lots of options. You could remove the background-color from the H1 css definition. Which would make the background appear. DEMO
Or you could change the display of the H1 element to inline-block or inline depending on your requirements. DEMO
Finally you could set a height of your header class that would still allow the background color of the H1 to show up. DEMO
Again these are a few possibilities still plenty of other ways you could change it. I dont know what your ultimate design goal is so you have to determine the next steps really. But that is the cause of why you cannot see your background.
NOTE: I changed the H1 class in your CSS for the first two. If you do go this route I suggest that you target that H1 more precisely because I dont think you would want the same style for the H1 header applied to other H1's in your page. I did it simply to illustrate how you could fix it.
Remove your h1 color style it's overriding the background image style.
Also your .nav color rule.
Use firebug or chromes inspect element to go through your styles and see which ones are overriding which. You can turn off and on various styles to see which works.
body {
background-color: #FFFFFF;
color: #666666;
font-family: Arial, Helvetica, sans-serif
}
header {
background-image: url(http://fandom.wikia.com/wp-content/uploads/2016/09/Arrowverse.jpg);
background-position: right;
background-repeat: no-repeat;
line-height: 400%;
text-indent: 1em;
}
h1 {
/* remove this
background-color: #000033; */
color: #FFFFFF
}
nav {
background-color: #90C7E3;
font-weight: bold
}
nav a {
text-decoration: none
}
h1 {
margin-bottom: 0;
font-family: Georgia, Times New Roman, serif
}
h2 {
color: #3399CC;
font-family: Georgia, Times New Roman, serif
}
h3 {
font-family: Georgia, Times New Roman, serif
}
ul {
list-style-image: url("sqpurple.gif")
}
dt {
color: #000033
}
footer {
font-size: 70%;
font-style: italic;
text-align: center;
font-family: Georgia, Times New Roman, serif
}
.resort {
color: #5C7FA3;
font-weight: bold
}
#contact {
font-size: 90%
}
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
Home
Yurts
Activities
Reservations
</nav>
<main>
<h2>Enjoy Nature In Luxury</h2>
<img src="coast.jpg" alt="Pacific Trails Resort" height="250" width="320">
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours opf the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span>
<br> 12010 Pacific trails Road
<br> Zephyr, CA 95555
<br>
<br> 888-555-5555
<br>
</div>
<br>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort
<br>
Contact Ian Rosenberg
</footer>
I figured out what I was doing wrong, the exercise I was following did not have a background color or color attribute on the h1 element. To display the image on top of the background I changed my header code to
header{background-color: #000033;
color: #FFFFFF;
background-position: right;
background-repeat: no-repeat;
line-height: 400%;
text-indent: 1em;
background-image: url('sunset.jpg');}
Related
I'm in the process of building a small website for my Roleplay group, and was overjoyed to figure out how to create a vertical navigation bar, but I'm noticing that on every display, the text falls behind it.
Is there a way to set where text begins and navigation ends?
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000 color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 52;
}
#welcome {
text-align: center;
font-family: "Arial"
}
#intro {
text-align: center;
font-family: "Arial"
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="HOME_PAGE.css">
<title>FFXIV RP Database</title>
<style>
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
</style>
</head>
<body>
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact
<li>
</ul>
</div>
<!--HEADER-->
<div class="Head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--BELOW HEAD CONTENT-->
<div class="Welcome">
<p>
<h2 id="welcome">Welcome to Eorzea!</h2>
<div style="text-align:center;">
<img src="group.png" width="40%">
</div>
<div class="IntroParagraph" style="text-align:center;" id="Intro">
<p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
<br/><b>Orrick Ballard (Explorer and Map-Maker)</b><br/>
<br/>
<b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its outlying islands. The realm has known many unique civilizations throughout its long history,
and harbors many starkly different ones to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the South, a vast expanse of unforgiving desert harbors few willing to brave
its scalding heat.</p>
<p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the very stones of the land rich with veins of the power-infused crystals. </p>
<!--WRITE-UP: "EORZEA"-->
<div class="Welcome">
<p>
<h2 id="welcome">City-States of Eorzea</h2>
<div style="text-align:left;">
<img src="eorzea.jpg" width="40%">
<p>Due to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
<ol type="I">
<li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
<li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft. The city-state greatly emphasizes the harmony of man and nature,
its resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
<li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls. Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the
wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential to determine the fate of the city’s citizens. </li>
<li>
</div>
</p>
</body>
</html>
To start, I would suggest pinning through your code and making some adjustments tot he structure. There looks to be a lot of missing tags (which I tried to correct in the fiddle). One tip would be to add comments to your closing div tags so you can see where each section ends.
With that said, what you can do is apply a margin-left: 200px; to your .Welcome class in order to shift everything over from the left side of the page. Since 200px is the width of your fixed navigation, you want to compensate that width. And since your Welcome class is wrapping your body content, you would add the margin to this class
https://fiddle.jshell.net/kez8aLam/
.Welcome {
margin-left: 200px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000 color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 52;
}
#welcome {
text-align: center;
font-family: "Arial";
}
#intro {
text-align: center;
font-family: "Arial"
}
<div class="home-wrap">
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact
<li>
</ul>
</div>
<!--HEADER-->
<div class="Head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--BELOW HEAD CONTENT-->
<div class="Welcome">
<p>
<h2 id="welcome">Welcome to Eorzea!</h2>
<div style="text-align:center;">
<img src="group.png" width="40%">
</div>
<div class="IntroParagraph" style="text-align:center;" id="Intro">
<p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
<br/><b>Orrick Ballard (Explorer and Map-Maker)</b>
<br/>
<br/>
<b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its outlying islands. The realm has known many unique civilizations throughout its long history,
and harbors many starkly different ones to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the South, a vast expanse of unforgiving desert harbors few willing to brave
its scalding heat.</p>
<p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the very stones of the land rich with veins of the power-infused crystals. </p>
</div>
</div>
</div>
<!--WRITE-UP: "EORZEA"-->
<div class="Welcome">
<p>
<h2 id="welcome">City-States of Eorzea</h2>
<div style="text-align:left;">
<img src="eorzea.jpg" width="40%">
<p>Due to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
<ol type="I">
<li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
<li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft. The city-state greatly emphasizes the harmony of man and nature,its
resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
<li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls.
<li>Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential to determine the fate of the city’s citizens. </li>
</ol>
</div>
</div>
The reason of why "text falls behind navigation" is: the ul element's position is fixed, which makes it detached from document (moved to another layer and does not occupy any space in the page). Thus the text occupies all page space and part of them falls behind ul.
As you may need fixed ul for good reason, the below code only adds one css rule -- define left padding for text, which leaves space for ul element display:
.Head, .Welcome {
padding-left: 200px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000
color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 52;
}
#welcome {
text-align: center;
font-family: "Arial"
}
#intro {
text-align:center;
font-family: "Arial"
}
.Head, .Welcome {
padding-left: 200px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="HOME_PAGE.css">
<title>FFXIV RP Database</title>
<style>
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
</style>
</head>
<body>
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact<li>
</ul>
</div>
<!--HEADER-->
<div class="Head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--BELOW HEAD CONTENT-->
<div class="Welcome">
<p>
<h2 id="welcome">Welcome to Eorzea!</h2>
<div style="text-align:center;">
<img src="group.png" width="40%">
</div>
<div class="IntroParagraph" style="text-align:center;" id="Intro">
<p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
<br/><b>Orrick Ballard (Explorer and Map-Maker)</b><br/>
<br/>
<b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its
outlying islands. The realm has known many unique civilizations throughout its long history, and harbors many starkly different ones
to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the
South, a vast expanse of unforgiving desert harbors few willing to brave its scalding heat.</p>
<p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the
very stones of the land rich with veins of the power-infused crystals. </p>
<!--WRITE-UP: "EORZEA"-->
<div class="Welcome">
<p>
<h2 id="welcome">City-States of Eorzea</h2>
<div style="text-align:left;">
<img src="eorzea.jpg" width="40%">
<p>Due to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
<ol type="I">
<li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
<li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft.
The city-state greatly emphasizes the harmony of man and nature, its resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
<li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls.
Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential
to determine the fate of the city’s citizens. </li>
<li>
</div>
</p>
</body>
</html>
screenshot
I am trying out Flexbox. Building a menu. I have no margins defined but My menu s being pushed out from the side. Is this a bug? Any other ideas? I am really stuck
`
<html>
<head>
<title>Ribbit - A flexbox Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
background-color: #ff9;
font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.row,
.columns,
nav ul {
display: flex;
flex-direction: column;
}
.row {
background-color: rgba(255,255,255, .33);
border: 1px solid rgba(150,150,150, .66);
}
.columns {
background-color: rgba(200,200,200, .5);
border: 1px solid rgba(150,150,150, .66);
}
nav ul {
text-transform:uppercase;
font-size: .75rem;
font-weight: 900;
letter-spacing: .025rem;
list-style: none;
border: 1px solid orange;
}
nav ul li {
background-color: rgba(0,0,0, .9);
padding: .75em 1em;
border-bottom: 1px solid white;
color: #fff;
}
#media (min-width: 769px) {
body {
background-color: #f9f;
}
nav ul {
flex-direction: row;
}
nav ul li {
display: flex;
flex: 1;
}
}
#media (min-width: 1024px) {
body {
background-color: #9ff;
}
}
</style>
</head>
<body>
<div class="row">
<header class="row">
<h1>Flexbox <span>Inc.</span></h1>
</header>
</div>
<nav>
<ul class="row">
<li class="item">One</li>
<li class="item">Two</li>
<li class="item">Three</li>
<li class="item">Four</li>
<li class="item">Five</li>
</ul>
</nav>
<div class="content row">
<div class="main">
<img src="http://placehold.it/1024x512/B4081E/ffffff/" width="100%" height="auto" alt="screenshot">
<p>Cause longer included relaxing deal world's if. Calories world's one style refreshing worthwhile win newer world's introducing better class.</p>
<p>Wholesome sleek below advanced crispy save spring elegent. Sold worthwhile spacious oily hearty. On screamin' tangy dazzling.</p>
<p>What appearance big credit-card bonus asked polished. More light sensible picky devour each appetizing newest duty people. Extra gigantic thank-you.</p>
<p>Absorbent vinyl thick industry now. Unique to thirsty absolutely settle smooth.</p>
</div>
<div class="aside"></div>
<div class="promo"></div>
</div>
<footer class="row">
<div class="columns">
<p>Twitter: this</p>
<p>Facebook: this</p>
<p>LinkedIN: this</p>
<p>Pinterest: this</p>
</div>
<div class="columns">
<p>Cause longer included relaxing deal world's if. Calories world's one style refreshing worthwhile win newer world's introducing better class.</p>
<p>Wholesome sleek below advanced crispy save spring elegent. Sold worthwhile spacious oily hearty. On screamin' tangy dazzling.</p>
<p>What appearance big credit-card bonus asked polished. More light sensible picky devour each appetizing newest duty people. Extra gigantic thank-you.</p>
<p>Absorbent vinyl thick industry now. Unique to thirsty absolutely settle smooth.</p>
</div>
<div class="columns"><p>© 2005 Flexbox inc.</p></div>
</footer>
</body>
</html>
`
I am confused why there is space on the left hand side of the menu
Most browsers have default styles. In your screenshot, the list inherits Chrome's default left padding and top and bottom margins.
I have issues with how tags are showing up on posts on my website. I have a screenshot here displaying the issue:
http://i.imgur.com/VaY3xfM.png
The top pos shows how it's supposed to look, with all tags within the borders. But as you see in the second one, the amount of tags breaks the design. I'd like it to I'd like it to keep all tags on one row, not displaying the rest of the tags, or showing a "…" instead, so it can all fit within the borders.
#tags{
font-weight:normal;
font-size:11px;
text-transform: lowercase;
font-family: "Goudy Old Style", Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;color:{color:o main text};
padding-left:20px;
width:350px;
padding-bottom:5px;
}
#tags a{
color:{color:o main text};
}
#tags hover{
color:{color:white main text};
}
-
<divabc class="reblog_etc" style="text-transform: lowercase;font-size:10px;height:20px;margin-top:0px;margin-left:0px;margin-right:0px;float:left;background-image:url(http://static.tumblr.com/ssdtkch/OOHmg0ppe/middle.png);background-repeat:repeat-x;color:#FFF;opacity:1;filter:alpha(opacity=100);padding-top:2px;" >
{block:HasTags}
<span id="tags hover">
<span style="padding-left:13px; font-size:15px; color:{color:white}; font-family:'PictosRegular';">z </span>
tags
{block:Tags} <a style="color:{color:white}" href="{TagURL}">{Tag},</a> {/block:Tags}
</span></br>
<div style="height:5px; width:auto;"> </div>{/block:HasTags}</divabc>
Try adding something like this:
#tags{
height:30px;
overflow:hidden;
}
You will need to test the height, but that should work.
I have a few questions with the code below.
1) I went to the Twitter site to get the code to embed a "Tweet" button but am having two issues - a) the button just shows up as a link and b) the text that I had pre-loaded into the tweet box does not appear
2) I'd like the two yellow buttons to be centered on the page, next to each other. Can someone help with the positioning?
3) Can I get rid of the hyperlink on the text within the button? Right now, the link only works if you click on the text (I'd like it to work if you click anywhere on the button).
Really appreciate the help. Thanks.
<!-- doc type declaration lets browser know which xhtml doc type declaration we are using -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>SAMPLE TEXT</title>
</head>
<style type="text/css">
#wtf_title {font-family: "Garamond"; font-weight: bold; font-size: 200%; padding-top:50px}
#intro_text {font-family: "Helvetica", serif; color: black; padding-top:10px;
font-style: italic;}
#reason {font-family: "Helvetica", serif; color: white; padding-top:50px; padding-bottom:50px;}
#credit
{
font-family: "helvetica";
font-size: 20%;
color: black;
}
#button1 {padding-left:20px;}
button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}
button:hover{background-color:rgba(255,204,0,0.8);}
button:active{position:absolute;top:100px; left:50px}
</style>
<body>
<div id="wtf_title" >
<center>sample text<br/>
</div>
<hr noshade size=8 width="53%">
<div id="intro_text" >
<center>Sample text
</div>
<button>
<center>sample text
</button>
<button>
<a target="_blank" href="http://www.americanbar.org" class="button2">sample text</a>
</button>
<div id="twitter-share-button"; style="position: absolute; top: 2px;" >
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0];if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.in sertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div id="fb_share"; style="position: absolute; top: 2px; left: 90px;" >
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
</div>
<div id="credit"; style="position: absolute; bottom: 5px; left: 32%;" >
This site was created by Varun Shetty and Bobby Corp. Inspired by LBJ and WTF Obama. Bobby loves Lebron; Varun loves the idea of Lebron.
</div>
</body>
</html>
Your HTML is not valid in many places, you really need to put your HTML through a WC3 validator before posting here, it would save you a lot of time and effort.
Here is a jsfiddle to start you out:
http://jsfiddle.net/RPc95/
For making the entire button click-able you either need to create a proper submit / button element or style a href to look like a button.
Thanks to StackOverflow I finally found a way to style my email link, but I wonder why it doesn't work without the solution I found on here.
Since the link is part of the span with the attributed class "about", which has font size and style defined, shouldn't the email link show up in 11px and sans serif?
and while
a[href^="mailto:"]
{
font-family: sans-serif;
color: black;
font-size: 11px;
}
works great, as soon as i try to change it into
.about a[href^="mailto:"]
{
font-family: sans-serif;
color: black;
font-size: 11px;
}
it does not function as it's supposed too.
do tags not listen to span formatting or class nesting?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
height:100%;
}
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
}
.bottom-left {
position: absolute;
font:sans-serif;
bottom: 15px;
left: 15px;
}
.bold {
font-family: serif;
}
.about {
font-size: 11px;
font-family: sans-serif;
}
/*a[href^="mailto:"]
{
font-family: sans-serif;
color: black;
font-size: 11px;
}*/
.address {
font-size: 11px;
border-bottom: 1px grey dotted;
}
</style>
<title>TEMP</title>
</head>
<body>
<div class="bottom-left">
<span class="about">
<span class="bold">XYZ</span> is a project space . |
<span="address">Website Information</span> — info#info.eu
</span>
</div>
</body>
</html>
Hi actually you have commented your email link css:-
so now write the css like this method its working fine......
a[href^="mailto:"]
{
font-family: sans-serif;
color: red;
font-size: 11px;
}
see the demo:- http://jsbin.com/ijofoq/edit#html,live
UPDATED
Now its working fine...edit your HTML and add in your HTML
<div class="bottom-left">
<div class="about">
<span class="bold">XYZ</span> is a project space . |
<span="address">Website Information</span> — info#info.eu
</div>
basically you have to remove the span tag from .about class.
check this :- http://jsbin.com/ijofoq/2/edit
I think .about take precedence over a.
cf. Css Rule Specificity.
Basically, a css ruleset is assign a priority like a version number like this:
{#id}.{#class}.{#element}.{order}
with
{#id} : count of id selectors
{#class} : count of classes, pseudo-classes, attributes
{#element} : count of elements, pseudo-elements
{order} : the index of this rule across all files
So, we have the following order:
0.2.1.* .about a[href^="mailto:"] (0 id, 1 class + 1 attr, 1 element)
0.1.1.a span.about (0 id, 1 class, 1 element)
0.1.1.b a[href^="mailto:"] (0 id, 1 attr, 1 element)
0.1.0.* .about (0 id, 1 class, 0 element)
span.about and a[href^="mailto:"] have same specifity (1 class or attribute, and 1 element), so the order is important, the last wins.
If you remove the span then the rule is less specific and loose.
(Also, distinguish between rules directly applied to an element, and other inhertited from parent elements...)