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.
Related
I am putting in new code as I have been studying, Hopefully this is a clearer picture of what my goal is.
I want to go from a table based to a div setup, I have tried
<div class="image"></div>
with this CSS
div.image:before {
content:url(http://placehold.it/350x150);
}
But I am unsure of the placement of the text, also putting an image in the div as well as making sure the dimension is correct.
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Site</title>
<meta http-equiv="Content Type" content="text/html; charset=utf-8" />
<style type="text/css">
.bgimg {
background-image: ('file:///C:/Location/somimg.jpg');
}
</style>
</head>
<body>
<img src="somimg.jpg" width="246" height="94" alt="sm pic'/>
<div class="bgimg">
</div>
<div class="mainsection">
</div>
</body>
</html>
CSS code:
td {
text-align: left;
vertical-align: top;
font-family:Tahoma;
font-weight: bold;
font-size:15px;
color: #E5E5E5;
}
.div-with-bg
{
width: 263px;
height: 94px;
background-image:url('smpic.jpg');
margin:0;
padding:0;
}
a {
text-decoration: underline;
color:#9D5FBB;
}
A:Hover {
color : #DBACF2;
text-decoration : underline;
}
h1 {
color: #9929bd;
font-weight: normal;
font-size: 20px;
font-family: Tahoma;
}
H3 {
color: #7F409E;
font-weight: bold;
font-size : 20px;
font-family:Tahoma;
}
My goal is to have the div's go out to the edge of the browsers as I have multiple tables that I would like to replace with div elements. I have viewed this setup in a browser and the div and image show up but not at the edge of the page.
I don't know if I understand what you're asking but I just copied your HTML in Sublime text, and did this for css:
div.image:before {
width: 263px;
height: 94px;
background-image:url('somepic.jpg');
content:url(http://placehold.it/350x150);
margin:0;
padding:0;
}
It works for me. I have the left div on the left and the right div next to it.
Also, I would the the style of the divs in the css file:
div.right {
float: "middle"
}
div.left {
float: "left";
}
And for the HTML:
<body>
<div class="image left">Left Div</div>
<div class="right"">Right Div</div>
</body>
And if you want to make your life easier just learn flexbox. The way i learned it was using this site.
.container{
display:flex;
}
<div class="container">
<div>
<img src="http://placehold.it/350x150" />
</div>
<div>
RIGHT
</div>
</div>
This is one way to do it.
However i think that you should change the question into how i can learn to design in the browser (e.g. https://hackernoon.com/css-box-model-45ecf4ac219e) or something like that.
I've started out trying to build a HTML 5 website but have ran into a problem with CSS. Below is a MCVE of the issue:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
div.content {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 75%;
}
div.topbar {
background-color: #777777;
border-bottom: 1px #000000 solid;
color: #FFFFFF;
padding: 5px;
}
</style>
<div class="topBar">
<p>MCVE</p>
</div>
<div class="content">
<p>Here is some content.</p>
</div>
</body>
</html>
If you take out the <!DOCTYPE html> tag, the top bar across the top of the page works but if you put it in, it doesn't render correctly as the background colour of the div element is not rendered and neither is the border.
What am I doing wrong here so that the div.topBar style definition isn't being fully respected?
The problem is that
div.topbar
Should be
div.topBar
Because <div class="topBar"> is not <div class="topbar">
It is still being rendered in quirks mode for some reason but html5 mode wont render it.
(Demo)
HTML and CSS are case sensitive.
'topbar' and 'topBar' are different. Either capitalize the name of the class or correct the div.topbar.
My webpage wont work with IE. I fully validated my webpage with W3C, and I made sure not to use anything that was not supported in all browsers (at least I think I did)
I think I tested it with IE 8 (I don't have IE installed, just used a free webprogram)
Basicly with IE the sidebar took up the full space of the page, and then the rest of the website went below the sidebar. By the way I cannot change things to absolute. (I absolutly can't change it to absolute haha)
http://www.adrianhoulewebprojects.com/
<!--Home Page for adrianhoulewebpojects.com Version 1.0-->
<!--Written by Adrian Houle-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/HomePageStyle.css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Adrian Houle Web Projects</title>
</head>
<body>
<div id="Sidebar">
<h3>Projects</h3>
<ul>
<li>
Under Construction
</li>
<li>Unfinished Project #2</li>
<li>Unfinished Project #3</li>
<li>Unfinished Project #4</li>
<li>Unfinished Project #5</li>
</ul>
</div>
<div class="box">
<div class="HalfSpacer"></div>
<div class="TransBox" id="Header">
<h1>Welcome to<br>AdrianHouleWebProjects.com</h1>
</div>
<div class="Spacer"></div>
<div class="TransBox" id=About>
<h2>About:</h2>
<p>Welcome to my website. I had a bit of time over the holidays and decided to finally get around to learning web programming. The purpose of this website is to give me a place to practice and display what I learn in the form of web projects. I may also be making some blogs that will also serve to showcase my travelling and hobbies. Note: If you are accesing this on a mobile phone you will probaly notice the side bars text is sticking out of its box; this is just part of the joys of web porgraming, I cannot fix it for this page without rewriting it, but my next web page will be compatible.</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="NewStuff">
<h2>Coming Soon</h2>
<ul>
<li>
<h3>Australia Travel Blog</h3>
<img src="http://www.adrianhoulewebprojects.com/img/AustralianFlag100by50.gif" alt="Australian Flag" >
<p>2013-2014 Australia Travel Blog coming soon.</p>
</li>
</ul>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Contact">
<h2>Contact Info:</h2>
<p class="Italic">Please report any compatibility, accessibility, or security issues to:</p>
<p>Adrian Houle</p>
<p>adrianhoule#gmail.com</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Footer">
<p>Website by Adrian Houle</p>
</div>
</div>
<div class="BottomBorder"></div>
</body>
</html>
CSS code
/***************************************** Info *********************************************************/
/*Style Sheet for HomePage of adrianhoulewebprojects.com*/
/*Written by Adrian Houle*/
/*For any issues with my website (compatibility, accessibility, white-hat reports) feel free to contact me at
adrianhoule#gmail.com
/*Page Purpose: Create a homepage that welcomes users to my website and directs them to various projects*/
/***********************************************************************************************************/
/************************************* Table of Contents **************************************************/
/*CSS layout*/
/* -none specific elements*/
/* -classes*/
/* -ID's and children of ID's*/
/* -Other*/
/************************************************************************************************************/
/************************************** CSS code ****************************************************/
/* -none specific elements ***********************************************************************************/
p {
font-size: large;
font-weight: bolder;
}
a {
color: blue;
}
a:hover, a:focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
/* -classes **************************************************************************************************/
/*Element that contains everything except the sidebar and has the main background image.*/
.box {
display: block;
position: relative;
width: 100%; /*test and adjust to keep it from expading the browser*/
height: 100%;
border: 3px solid black;
right: 0;
top: 0px;
padding: 0;
background-image: url(http://www.adrianhoulewebprojects.com/img/CautionStripes.png);
}
/*Allows for synchronised space adjustment between elements*/
.Spacer {
position :relative;
height: 100px;
}
/*Allows for synchronised space adjustment between elements*/
.HalfSpacer {
position :relative;
height: 30px;
}
/*Every element that contains text belongs to this class*/
/*This class has nothing to do with transgender boxes, or gender boxes in general*/
.TransBox {
width: 70%;
padding: 1em;
z-index: 1;
left: 20%;
position: relative;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
moz-box-shadow: 0 0 5px 5px #888; /*shadow effect with cross compatibility*/
webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
.Italic {
font-style: Italic;
}
/* -ID's and children of ID's********************************************************************************/
/*Sidebar, to be fixed to the left hand side of the screen. Must allow conent to the right of it*/
#Sidebar {
height: 100%;
width: 10%;
left: 0px;
top: 0px;
padding: 2%;
display: inline;
position: fixed;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
border-style: solid;
border-width: 3px;
z-index: 2;
}
#Sidebar ul {
padding-left:0;
}
#Sidebar li {
margin: 10%;
}
/*Header text*/
#Header h1 {
text-align: center;
}
#Footer p {
text-align: center;
}
/* -Other (empty)*****************************************************************************************/
Thanks for any help.
You should force IE8 to render with edge:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
It can be placed within the head of your HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- other head tags -->
</head>
<body>
</body>
</html>
Check out this answer for more a more indepth look at how it can be used.
I want to have two input with one button for user to enter their username and password, and
I'm using this css code for controlling the input tag in my website in order to appear it properly on all screen size, and it works fine.
.controller {
width: 98%;
margin: 0;
padding: 7px 5px 4px;
color: #555;
font-size: 18px;
font-family: inherit;
border-style: solid;
border-width: 0 1px 1px 0;
}
I want to have some dynamic text which is retrieved from the database below these two inputs for the user. Now my problem is that if the text is long it will not appear properly below the inputs and affects them to not fit the screen, as long as the text is only 5 to 10 words there is no problem.
here is the html file for the inputs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form method="post" action="answer">
<ul>
<li>
Login Name:<input type="text" name="id" class="controller"></input>
</li>
<li>
Password:<input type="password" name="pass" class="controller"></input>
</li>
<li>
<input type="submit" value="Login"></input>
</li>
</ul>
</form>
</body>
and here is the CSS code
.controller {
width: 98%;
margin: 0;
padding: 7px 5px 4px;
color: #400;
font-size: 18px;
font-family: inherit;
border-style: solid;
border-width: 0 1px 1px 0;
}
please can anyone advice me what I have to do or give a css code for controlling the problem.
thank you very much for any answer and sorry for my long question.
So, I think that this is what you want to do. After your form,
<div id="response">
<p> Some Long Block Of Text That Will Wrap Around This Div </p>
</div>
then, in the CSS you get something like this going on:
#response
{
width: 75px; /*desired width*/
margin-top: 25px; /*distance from the form above*/
}
#response p
{
/*anything you want to do to that specific <p> */
}
I'm not sure how you are getting the dynamic text, but I'm guessing that it is a script that is getting info from answer and putting it in the html. Just place that info inside of the <p> that's in #response
I've seen and read numerous posts on this subject but none worked in my environment or I did something wrong. I have a div that contains images and text of various unknown sizes. I want all the images and in the div to be vertically centered. I'm using Internet Explorer 9.
Here is my code, I'm removed all the various techniques I've attempted for the sake of simplicity:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div.header
{
height:75px;
background-color:#FFF;
padding-left:10px;
padding-right: 10px;
}
div.headerleft
{
border: none;
float: left;
margin: 0;
padding: 0;
}
div.headerright
{
border: none;
float: right;
margin: 0;
padding: 0;
}
h1
{
font: 44px Tahoma, Geneva, Verdana, sans-serif;
margin-bottom: 0;
margin-top: 0;
padding-bottom: 0;
padding-top: 0;
}
img.centerImage
{
vertical-align:middle;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="header">
<div class="headerleft">
<img class="centerImage" border="0" alt="Test 1" src="../Images/test1.jpg" />
<img class="centerImage" border="0" alt="Test 2" src="../Images/test2.jpg" />
</div>
<div class="headerright">
<h1>
Centered Text Vertically
</h1>
</div>
</div>
</form>
</body>
</html>
I'd like to emphasize that the text and images are of unknown sizes. I've found this certainly complicates the solution. Also, based on ActiveX requirements, I'm using Internet Explorer version 9. Any advice out there? Thanks!
To use vertical alignment, you are better off setting a wrapper with the display set to table-cell:
See this Fiddle Example!
THE CSS:
/* the vertical alignment class */
.centerImage {
display: table-cell;
vertical-align:middle;
}
THE HTML
...
<div class="headerleft">
<span class="centerImage">
<img border="0" alt="Test 1" src="path_to_image.jpg" />
</span>
<span class="centerImage">
<img border="0" alt="Test 2" src="path_to_image.jpg" />
</span>
</div>
<div class="headerright">
<h1 class="centerImage">Centered Text Vertically</h1>
</div>
...
Tested:
IE9, IE8, OPERA, SAFARI, FIREFOX, K-MELEON, GOOGLE CHROME
Notes:
You should specify the image width and height to a proper HTML validation and to allow a better understanding by the browser.
Read More About This:
CSS Display Property | CSS vertical-align property | CSS Tricks: What is vertical Align?
EDITED
In regards to the comment given by reisio, to have the same vertical point to the images on the left and the text on the right, we can go with a more simple solution:
See the Fiddle Here!
RELEVANT CSS
/* the trick you want */
.centerImage {
vertical-align:middle;
}
div.headerleft {
border: none;
float: left;
margin: 0;
padding: 0;
line-height: 75px;
}
div.headerright {
border: none;
float: right;
margin: 0;
padding: 0;
line-height: 75px;
}
h1 {
font-size: 44px;
font-family: Tahoma, Geneva, Verdana, sans-serif;
margin-bottom: 0;
margin-top: 0;
padding-bottom: 0;
padding-top: 0;
}
RELEVANT HTML
<div class="headerleft">
<img class="centerImage" border="0" alt="Test 1" src="path_to_img.jpg" />
<img class="centerImage" border="0" alt="Test 2" src="path_to_img.jpg" />
</div>
<div class="headerright">
<h1 class="centerImage">Centered Text Vertically</h1>
</div>
For this solution, we use the vertical-align set to the img tag, and the line-height to create the same vertical-point and to align vertically the text.
You can read: CSS line-height Property
EDITED
If you can't set a height to the images, the only way to solve your issue is to use a bit of JavaScript to dynamically find the tallest image and apply that height to the line-height on the H1 tag.
See this working Fiddle!
JQUERY
$(document).ready(function() {
// initialize the variable to 0
var height = 0;
// run by each image to find the tallest
$('.headerleft img').each(function() {
height = ($(this).outerHeight(true)>height) ? ($(this).outerHeight(true)) : height;
});
// vertical center the text
$('.headerright h1').css({"line-height": height + "px"});
});
Note:
Removed the line-height from the div.headerleft and div.headerright since it is not longer needed!