When I try to alter the CSS for the input field named "title" below, which is classed by "submissionfield", the position changes, but the height, length, and font of the field do not change.
How could I make the height of the input field "title" 22 px, the length 550 px, and the font Times New Roman? The CSS below does not do it.
Thanks in advance,
John
echo '<form action="http://www...com/.../submit2.php" method="post">
<input type="hidden" value="'.$_SESSION['loginid'].'" name="uid">
<div class="submissiontitle"><label for="title">Story Title:</label></div>
<div class="submissionfield"><input name="title" type="title" id="title" maxlength="1000"></div>
<div class="urltitle"><label for="url">Link:</label></div>
<div class="urlfield"><input name="url" type="url" id="url" maxlength="500"></div>
<div class="submissionbutton"><input name="submit" type="submit" value="Submit"></div>
</form>
';
The CSS:
.submissiontitle
{
position:absolute;
width:100px;
left:30px;
top:200px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}
.submissionfield
{
position:absolute;
width:550px;
left:50px;
top:230px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family: "Times New Roman", Times, serif;
font-size: 22px;
color:#000000;
}
.urltitle
{
position:absolute;
width:250px;
left:30px;
top:300px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}
.urlfield
{
position:absolute;
width:550px;
left:30px;
top:330px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color:#000000;
}
.submissionbutton
{
position:absolute;
width:250px;
left:30px;
top:380px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color:#000000;
}
.submittitle
{
position:absolute;
width:250px;
left:30px;
top:150px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}
Use this css:
#title {
font-family: 'Times New Roman';
height:22px;
width:550px;
}
You target the div with just .submissionfield. Try .submissionfield input { // stuff } to target the input element within the div with that class.
Related
Hello im building my wordpress site, and used contact form to build contact form. I have few questions.
Text in text area is one line, and when i click ENTER contact form try to send form. How to enable enters?
How to enable scrolling in text area?
When i typing text, only big letters appear, like when i using caps-lock, how to enable small letters also?
/*contact*/
.one-half,
.one-third {
position: relative;
margin-right: 4%;
float: left;
margin-bottom: 20px;
}
.one-half { width: 48%; }
.one-third { width: 30.66%; }
.last {
margin-right: 0 !important;
clear: right;
}
#media only screen and (max-width: 767px) {
.one-half, .one-third {
width: 100%;
margin-right: 0;
}
}
#name-form {
background:0 0;
border:none;
width:100%;
border-bottom:2px solid #FFFFFF;
text-transform:uppercase;
font-weight:900;
padding-bottom:10px;
font-family: Josefin Sans, sans-serif;
margin-bottom:58px;
font-size:14px
}
#mail-form {
background:0 0;
border:none;
width:100%;
border-bottom:2px solid #FFFFFF;
text-transform:uppercase;
font-weight:900;
padding-bottom:10px;
font-family: Josefin Sans, sans-serif;
margin-bottom:58px;
font-size:14px
}
#phone-form {
background:0 0;
border:none;
width:100%;
border-bottom:2px solid #FFFFFF;
text-transform:uppercase;
font-weight:900;
padding-bottom:10px;
font-family: Josefin Sans, sans-serif;
margin-bottom:58px;
font-size:14px;
}
#text-form {
background:0 0;
border:none;
width:100%;
border-bottom:2px solid #FFFFFF;
text-transform:uppercase;
font-weight:900;
padding-bottom:10px;
font-family: Josefin Sans, sans-serif;
margin-bottom:58px;
font-size:14px;
height:100px;
}
::placeholder {
color: white;
font-weight:900;
font-size: 15px;
font-family: Josefin Sans, sans-serif;
}
.wpcf7-form > p {
color: #FFFFFF;
font-family: Open Sans, sans-serif;
font-weight:900;
font-size: 15px;
}
.wpcf7-form input, .wpcf7-form textarea {
font-weight:900;
font-size: 15px;
color: #FFFFFF;
width: 100%;
font-family: Josefin Sans, sans-serif;
}
.wpcf7-form textarea {
font-weight:900;
font-size: 15px;
color: #FFFFFF;
font-family: Josefin Sans, sans-serif;
}
<div class="one-third">
[text* text-757 id:name-form placeholder "IMIĘ"]
</div>
<div class="one-third">
[tel tel-789 id:phone-form placeholder "TELEFON"]
</div>
<div class="one-third last">
[email* email-910 id:mail-form placeholder "E-MAIL"]
</div>
[text* text-757 id:text-form placeholder "WIADOMOŚĆ"]
[submit "Wyślij"]
I am newbie in coding so please be forgiving :)
You need to use <textarea> instead of <input type="text">.
You are also setting text-transform:uppercase; in the styles which will make all of the text uppercase. Remove that and it should fix your third problem.
I would like to add a border to the input fields on my login form, however when i add border:1px solid black; to #login-form input then all of the text boxes move out of position.
Here is what it looks like without a border : http://imgur.com/mjXjf3W
Here it is with the border : http://imgur.com/Yt9H2Nr
When the user inputs the incorrect credentials into the form then a message is displayed above the form, this also causes the form to change position, this happens even when there is no border applied to the inputs.
Here is a screen shot of this : http://imgur.com/c3Frc0z
I have tried clearing all the floats however this did not make a difference:
Here is my HTML:
<div class="sign_in_header">
<div class="sign_in">Sign In</div><div class="sign_up"> or Sign Up</div>
</div>
<div class="sign_in_text">
Sign in with your account
</div>
<div id="login_error"></div>
<div id="login-form">
<form method="post">
<div id="login_form_input">
<label>Email:</label><input align="right" text="Email" name="email" required />
<br>
<label>Password:</label><input type="password" name="pass" required />
</div>
<button type="submit" name="btn-login">Log In</button>
<div class="sign_up_label">Not Registered ?</div>
</form>
</div>
Here is the CSS:
.sign_in_header {
margin-top:40px;
width:100%;
border-bottom:1px solid #aaa;
line-height:30px;
}
.sign_in, .sign_up{
font-size:20px;
color:#000000;
font-family: 'Roboto', sans-serif;
font-weight:300;
display:inline-block;
}
.sign_up {
font-size:14px;
}
.sign_up a {
text-decoration: none;
color:#0790cb;
}
.sign_up a:hover {
text-decoration: underline;
}
.sign_in_text {
margin-top:20px;
font-family: 'Roboto', sans-serif;
font-weight:500;
font-size:16px;
}
#login-form {
margin-top:20px;
}
#login-form label {
float: left;
width: 150px;
text-align: right;
margin-right: 0.5em;
margin-bottom:15px;
font-size:13px;
line-height:30px;
}
#login-form input {
width:250px;
height:25px;
margin-bottom:15px;
clear:both;
}
#login-form button {
-webkit-border-radius: 2;
-moz-border-radius: 2;
border-radius: 2px;
border:none;
font-family: 'Roboto', sans-serif;
color: #ffffff;
font-size: 14px;
background: #004d6e;
padding: 8px 20px 8px 20px;
text-decoration: none;
display:inline-block;
}
#login-form button:hover {
background: #343434;
text-decoration: none;
}
.sign_up_label {
display:inline-block;
margin-left:20px;
font-size:12px;
font-weight:300;
font-family: 'Roboto', sans-serif;
}
If anybody would please be able to update my code with any solution and possibly explain how the issue was fixed - it would be greatly appreciated.
Many thanks in advance.
I just increase margin bottom in #login-form input and add border in this.
margin-top:40px;
width:100%;
border-bottom:1px solid #aaa;
line-height:30px;
}
.sign_in, .sign_up{
font-size:20px;
color:#000000;
font-family: 'Roboto', sans-serif;
font-weight:300;
display:inline-block;
}
.sign_up {
font-size:14px;
}
.sign_up a {
text-decoration: none;
color:#0790cb;
}
.sign_up a:hover {
text-decoration: underline;
}
.sign_in_text {
margin-top:20px;
font-family: 'Roboto', sans-serif;
font-weight:500;
font-size:16px;
}
#login-form {
margin-top:20px;
}
#login-form label {
float: left;
width: 150px;
text-align: right;
margin-right: 0.5em;
margin-bottom:15px;
font-size:13px;
line-height:30px;
}
#login-form input {
width:250px;
height:25px;
border:1px solid black;
margin-bottom:18px;/*increase margin -bottom*/
clear:both;
}
#login-form button {
-webkit-border-radius: 2;
-moz-border-radius: 2;
border-radius: 2px;
border:none;
font-family: 'Roboto', sans-serif;
color: #ffffff;
font-size: 14px;
background: #004d6e;
padding: 8px 20px 8px 20px;
text-decoration: none;
display:inline-block;
}
#login-form button:hover {
background: #343434;
text-decoration: none;
}
.sign_up_label {
display:inline-block;
margin-left:20px;
font-size:12px;
font-weight:300;
font-family: 'Roboto', sans-serif;
}
<div class="sign_in_header">
<div class="sign_in">Sign In</div><div class="sign_up"> or Sign Up</div>
</div>
<div class="sign_in_text">
Sign in with your account
</div>
<div id="login_error"></div>
<div id="login-form">
<form method="post">
<div id="login_form_input">
<label>Email:</label><input align="right" text="Email" name="email" required />
<br>
<label>Password:</label><input type="password" name="pass" required />
</div>
<button type="submit" name="btn-login">Log In</button>
<div class="sign_up_label">Not Registered ?</div>
</form>
</div>
If you add a second <br> after your fist input, it works. Can't explain why your code wasn't working, thought.
I have a website, and I have a problem that text doesn't display correctly. It varies, I think according to screen resolution, but I have no idea why.
Any idea why is this happening?
http://jsfiddle.net/948DD/ here is the source code
<body>
<div id="navwrap">
<div id="nav" align="center">
<ul>
<img src="img/notify_icon.png"/>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
<div id="contentwrap">
<div id="welcome" align="center">
<table>
<tr id="tr01">
<td id="td01">
<p id="p01">Hi.</p>
<p id="p02">welcome to the webpage of</p>
<p id="p03">NOT!fy</p>
<p id="p04">the best solution against annoying notifications</p>
</td>
<td id="td02"><img src="img/notify_big_icon.png"/></td>
</tr>
</table>
</div>
<div id="divider" align="center">
<img src="img/divider_with_arrow.png"alt="divider" id="dividerpng"/>
</div>
<div id="featureset_chrome" align="center">
<table>
<tr id="chrometr">
<td id="chrometd01"><img src="img/featureset_chrome.png"/>
</td>
<td id="chrometd02">
<p id="chromep01">feature set</p>
<p id="chromep02">- a world first solution to get rid of annoying notifications</p>
<p id="chromep03">- you just need a Google Chrome extension and our app installed on your mobile device and you are good to go</p>
<p id="chromep04">behind the scenes</p>
<p id="chromep05">the Chrome extension watches which sites you are currently viewing and mutes the matching applications on your phone</p>
</td>
</tr>
</table>
</div>
<div id="divider2" align="center">
<img src="img/divider_points.png"alt="divider" id="dividerpointspng"/>
</div>
<div id="per_app_muting" align="center">
<table>
<tr id="perapptr">
<td id="perapptd01">
<p id="perapp_p01">per app muting</p>
<p id="perapp_p02">- forget the annoying notifications (e.g.: game notifications) </p>
<p id="perapp_p03">- with our sleek UI you can easily pick the applications which you rather want to be muted</p>
</td>
<td id="perapptd02"><img src="img/per_app_muting.png"/>
</td>
</tr>
</table>
</div>
<div id="divider3" align="center">
<img src="img/divider_points.png"alt="divider" id="dividerpointspng"/>
</div>
<div id="quiet_hours" align="center">
<table>
<tr id="qhtr">
<td id="qhtd01"><img src="img/quiet_hours.png"/>
</td>
<td id="qhtd02">
<p id="qhp01">quiet hours</p>
<p id="qhp02">- set your cycle to turn on silent mode for your smartphone in specific time intervallum </p>
<p id="qhp03">- no more awkward moments because of your ringing phone</p>
<div id="whoareweclick"></div>
</td>
</tr>
</table>
</div>
<div id="divider4" align="center">
<img src="img/divider.png"alt="divider" id="dividerpng"/>
</div>
<div id="whoarewe" align="center">
<p id="whop1">Who are we? </p>
<p id="whop2">Two passionate and determined boy who believe that they can change the way how the Android notification system works.</p>
<p id="whop3">We live in Hungary and attend university in Budapest.</p>
</div>
<div id="whopics" align="center">
<table>
<tr id="whotr">
<td id="whotd01"><img src="img/kerdojel.png"/>
<p id="name"> bendegúz </p>
<p id="descr"> 18 yrs <br />
our spokesman <br />
also good at: <br />
html, css <br />
</p>
</td>
<td id="whotd02"><img src="img/kristof.png"/>
<p id="name"> kristóf </p>
<p id="descr"> 19 yrs <br />
owner of the idea <br />
responsible for: <br />
design <br />
</p>
</td>
</tr>
</table>
</div>
<div id="whopics2" align="center">
<table>
<tr id="whotr">
<td id="whotd01"><img src="img/kerdojel.png"/>
<p id="name"> X Y </p>
<p id="descr"> we are looking for an android developer, if you are brave enough to join our startup, then head over to "Contact us" section
</p>
</td>
</tr>
</table>
</div>
<div id="divider5" align="center">
<img src="img/divider.png"alt="divider" id="dividerpng"/>
</div>
<div id="indiegogo" align="center">
<p id="indiep1">Indiegogo </p>
<p id="indiep2">As we are students, we don't own a big amout of equity.</p>
<p id="indiep3">That is why we decided to crowdfund our idea at Indiegogo.</p>
<p id="indiep4">We find it the best way to get noticed and be able to get funded.</p>
<p id="indiep5">Soon a pitch video will be released.</p>
<p id="indiep6">our state at the moment:</p>
<p id="ourstate"><img src="img/ourstate.png"/></p>
</div>
</div>
<footer id="footer">
<p>Copyright: NOT!fy 2014, development and design by: Kristóf Dombi, Máté Bendegúz Kovács</p>
</footer>
#charset "utf-8";
/* CSS Document */
#navwrap {
z-index:10;
}
#contentwrap {
padding-top:92px;
z-index:5;
}
#nav {
font-family: Century Gothic;
font-size: 16px;
color: #fff;
background-color: #353539;
height: 100px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
padding:0px;
width:100%;
position:fixed;
top:0;
left:0;
}
#nav ul {
margin:0 auto;
width:auto;
height:100px;
margin-bottom:
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
height: 10px;
vertical-align: middle;
}
#nav ul li {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: inline-block;
padding: 30px;
margin-bottom: 90px;
vertical-align: middle;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
#nav img{
width:100px;
}
body
{
background-color:#c5c5c5;
}
#welcome {
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
#tr01 {
height:300px;
}
#td01 {
text-align:left;
vertical-align: top;
}
#td02 {
text-align:right;
}
#td02 img {
width:200px;
margin-left: 110px;
margin-top: 10px;
}
#p01 {
text-decoration:none;
color:#3c3c40;
font-family: Roboto, thin;
font-size:60px;
font-weight:300;
margin-top: 30px;
}
#p02 {
text-decoration:none;
color:#3c3c40;
font-family: Roboto;
font-size:30px;
font-weight:300;
}
#p03 {
text-decoration:none;
color:#3c3c40;
font-family: Roboto condensed;
font-weight:400;
font-size:35px;
margin-top:7px;
margin-bottom:7px;
}
#p04 {
text-decoration:none;
color:#3c3c40;
font-family: Roboto;
font-weight:300;
font-size:15px;
}
#featureset_chrome {
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
#chrometr {
height:450px;
}
#chrometd01 {
text-align:left;
vertical-align: top;
width:450px;
}
#chrometd02 {
text-align:right;
margin-left:0px;
width:400px;
}
#chrometd01 img {
width:300px;
margin-left: 50px;
margin-top: 0px;
}
#chromep01 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:50px;
margin-bottom:20px;
}
#chromep02 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#chromep03 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#chromep04 {
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:35px;
margin-top:10px;
margin-bottom:20px;
text-decoration:underline;
}
#chromep05 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#per_app_muting {
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
#perapptr {
height:450px;
}
#perapptd01 {
text-align:left;
vertical-align: top;
width:450px;
}
#perapptd02 {
text-align:right;
margin-left:0px;
width:400px;
}
#perapptd02 img {
width:300px;
margin-left: 50px;
margin-top: 0px;
}
#perapp_p01 {
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:35px;
margin-top:10px;
margin-bottom:20px;
text-decoration:underline;
}
#perapp_p02 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#perapp_p03 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#quiet_hours {
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
#qhtr {
height:500px;
}
#qhtd01 {
text-align:left;
vertical-align: top;
width:450px;
}
#qhtd02 {
text-align:right;
margin-left:0px;
width:400px;
}
#qhtd01 img {
width:300px;
margin-left: 50px;
margin-top: 0px;
}
#qhp01 {
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:35px;
margin-top:10px;
margin-bottom:20px;
text-decoration:underline;
}
#qhp02 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#qhp03 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#whoareweclick {
padding-top:200px;
}
#whoarewe{
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
text-align:left;
}
#whop1 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:50px;
margin-bottom:20px;
}
#whop2 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#whop3 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#whopics {
width:600px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
text-align:center;
}
#whotr {
height:250px;
}
#whotd01 {
text-align:center;
vertical-align: top;
width:300px;
}
#whotd02 {
text-align:center;
margin-left:0px;
width:300px;
}
#whotd01 img {
width:200px;
margin-top: 30px;
margin-left:auto;
margin-right:auto;
}
#whotd02 img {
width:200px;
margin-top: 30px;
margin-left:auto;
margin-right:auto;
}
#name {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:40px;
margin-bottom:5px;
margin-left:auto;
margin-right:auto;
}
#descr {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:25px;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
}
#desctd01 {
text-align:center;
vertical-align: top;
width:320px;
}
#desctd02 {
text-align:center;
margin-left:0px;
width:320px;
}
#divider5 {
margin-top:50px;
}
#indiegogo{
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
text-align:right;
}
#indiep1 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:50px;
margin-bottom:20px;
}
#indiep2 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#indiep3 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#indiep4 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#indiep5 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#indiep6 {
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:30px;
margin-top:30px;
margin-bottom:30px;
text-decoration:underline;
}
#ourstate {
margin-left:auto;
margin-right:auto;
text-align:center;
}
#ourstate img {
width:600px;
margin-left:auto;
margin-right:auto;
}
#footer {
background-color: #353539;
height:50px;
margin-top:100px;
margin-bottom:0px;
opacity:0.95;
}
#footer p {
color:#d2d2d2;
font-family: Roboto;
font-weight:300;
font-size:17px;
text-align:center;
padding-top:17px;
}
A broad answer to your question:
This is the result of type hinting, anti-aliasing and the rendering quality based upon display. Generally speaking Windows does not anti-alias text to the extent that, Mac OS X does. That means that the type will not be "smoothed" using sub-pixels or surrounding pixels causing the type to look jagged.
This is compounded when a font is not hinted, which is the tedious task of hand picking pixels that will be used in font rendering at each individual size. When this is compounded with the lack of anti-aliasing you may miss actual pieces of your letter forms!
This is further compounded if you are looking at a monitor with a smaller number of pixels.
Try and find a hinted version of your font, try using a larger size, or perhaps using a different font all together.
I am trying to replicate as closely as possible the look of a book in html that includes drop caps floated left and multiple images that are floated right. Everything works fine with 1 image floated right...but the drop caps change position when more than 1 image is floated right. It looks fine in my editor but not in any browser I've tested. I've tried everything I can think of...
The css:
body {
background:#9CF;
margin:0;
padding:0;
}
h1 {
font-family:Lusitana, serif;
font-size:14px;
letter-spacing:.3em;
}
h2 {
font-family:'Crimson Text', serif;
font-size:12px;
letter-spacing:.3em;
font-weight:400;
}
p {
font-family:'Crimson Text', serif;
font-size:12px;
line-height:16px;
font-weight:400;
margin-top:0;
color:#000;
text-align:justify;
}
.dropcap {
font-family:'Crimson Text', serif;
font-size:310%;
line-height:65%;
margin-top:3px;
margin-right:6px;
color:#333;
display:inline-block;
float:left;
}
#container {
background:#FFF;
height:698px;
width:452px;
padding:30px 30px 40px;
}
#imagediva {
height:229px;
width:127px;
background:rgba(200,255,255,0.5);
margin:0 0 10px 20px;
}
#imagedivb {
height:180px;
width:268px;
background:rgba(200,255,255,0.5);
margin:0 0 10px 20px;
}
.floatright {
clear:right;
float:right;
}
h1.short,h2.short {
line-height:0;
}
The html
<div id="container">
<div class="floatright" id="imagediva"></div>
<div class="floatright" id="imagedivb"></div>
<h1 class="short">First Flight</h1>
<hr size="1" noshade>
<h2 class="short">1929</h2>
<br>
<p><span class="dropcap">W</span>alter’s first flight experience was in a two seater open biplane when he was ten years old. His father hired a pilot take Walter and his cousin Victor Azevedo on a flight around the Oakland, CA. airport, the same airport from which Amelia Earhart would begin her ill fated attempt to circumnavigate the globe six years later in 1937.
</p>
</div>
Check This Fiddle
Give absolute position to the paragraph tag and also give some width to it. This will solve your problem.
body {
background:#9CF;
margin:0;
padding:0;
}
h1 {
font-family:Lusitana, serif;
font-size:14px;
letter-spacing:.3em;
}
h2 {
font-family:'Crimson Text', serif;
font-size:12px;
letter-spacing:.3em;
font-weight:400;
}
p {
font-family:'Crimson Text', serif;
font-size:12px;
line-height:16px;
font-weight:400;
margin-top:0;
color:#000;
text-align:justify;
position: absolute;
width: 300px
}
.dropcap {
font-family:'Crimson Text', serif;
font-size:310%;
line-height:65%;
margin-top:3px;
margin-right:6px;
color:#333;
display:inline-block;
float:left;
}
#container {
background:#FFF;
height:698px;
width:452px;
padding:30px 30px 40px;
}
#imagediva {
height:229px;
width:127px;
background:rgba(200,255,255,0.5);
margin:0 0 10px 20px;
}
#imagedivb {
height:180px;
width:268px;
background:rgba(200,255,255,0.5);
margin:0 0 10px 20px;
}
.floatright {
clear:right;
float:right;
}
h1.short,h2.short {
line-height:0;
}
I am using one template to build my web site. I want to add some pictures on a page that are enlarged and opened in a new window when user clicks them.
I have found some pieces of code by search but real problem I am facing is that this template is build using CSS of which I have very less exposure. Those pieces of code required putting code in body of HTML that I am not able to do here using this template.
Here is style sheet I am using & made all pages using it. How do I add few pictures to a page like when they are clicked, are enlarged in a new window.
* {
margin: 0;
padding: 0;
}
a:link {
color: #506F09;
}
body {
background: url(images/backgr.jpg) top left no-repeat #2D2E2B;
}
#tot{
position:relative;
overflow:hidden;
z-index:0;
}
#antet{
background:#2D2E2B;
height:100px;
border-bottom:#F7FDE1 solid 7px;
margin-left: 157px;
}
.butonas1{
background:url(images/butonas3.png) left no-repeat;
height:62px;
width:125px;
position:absolute;
top:-36px;
font-family: Arial, Helvetica, sans-serif;
color:;
font-size:22px;
line-height:62px;
text-align:center;
font-weight:bold;
}
.butonas1 a:link{
text-decoration:none;
color:#2D2E2B;
height:62px;
width:125px;
}
.butonas1 a:visited{
text-decoration:none;
color:#2D2E2B;
height:62px;
width:125px;
}
.butonas1 a:hover{
text-decoration:none;
color:#2D2E2B;
}
.butonas2{
background:url(images/butonas1.png) left no-repeat;
height:62px;
width:125px;
position:absolute;
top:-36px;
font-family: Arial, Helvetica, sans-serif;
color:#F7FDE1;
font-size:22px;
line-height:62px;
text-align:center;
font-weight:bold;
}
.butonas2 a:link{
text-decoration:none;
color:#F7FDE1 ;
}
.butonas2 a:visited{
text-decoration:none;
color:#F7FDE1 ;
}
.butonas2 a:hover{
background:url(images/butonas3.png) left top no-repeat;
text-decoration:none;
height:62px;
width:125px;
position:absolute;
top:0;
left:0;
color:#2D2E2B;
}
#logo_sus{
background:url(images/logo1.png) left no-repeat;
height:178px;
width:171px;
position:absolute;
left:274px;
top:60px;
}
#bara {
position:relative;
height:62px;
}
#container{
width:408px;
background:url(images/sus.jpg) top center no-repeat #F7FDE1;
float:left;
margin-left:470px;
display:inline;
z-index:1;
}
#jos {
background:url(images/jos.jpg) no-repeat bottom center;
width:408px;
height:30px;
z-index:1;
}
.text{
width:380px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
margin:30px 12px;
}
.titlu {
color:#506F09;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
}
.titlu2 {
color:#506F09;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:22px;
font-weight:bold;
padding-left:170px;
padding-top:20px;
}
.clear{
height:1px;
clear:both;
}
#bottom {
background:url(images/bara.jpg) bottom left no-repeat;
height:30px;
width:556px;
float:left;
margin-left:340px;
margin-top:30px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#F7FDE1;
text-align:right;
display:inline;
z-index:1;
}
#bottom span{
padding-right:25px;
}
#jos2 {
background:url(images/jos2.jpg) no-repeat bottom center;
width:563px;
height:53px;
z-index:1;
}
How do I add few pictures to a page like when they are clicked, are enlarged in a new window.
You do not need CSS to achieve that. Just add an anchor around the image in your markup:
<a href="/images/image1_large.jpg" title="Open picture in new window" target="_blank">
<img src="/images/image1_small.jpg" alt="Image 1" />
</a>
But if you like a STRICT doctype, or if you trust your readers on using the therefore designed browser features, I would recommend to open the image in the same window; the user can always override that with middle- or right mouseclick:
<a href="/images/image1_large.jpg" title="Open picture in this window">
<img src="/images/image1_small.jpg" alt="Image 1" />
</a>
And to open a link in a popup window, you need to call the JavaScript window.open(); routine, as explained e.g. on this page.