I am trying to get 3 icons horizontally aligned with the title of my website. I can't seem to get them within the same margin as my banner.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
CrossFit Villains
</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<header>
<span class="title">
CrossFit Villains
</span>
<div id="social">
<img src="fb.png" />
<img src="bird.png" />
<img src="tv.png" />
</div>
<br />
<span>1702 McAra Street, Regina, SK</span>
<br />
<br />
</header>
<div id="banner">
<img src ="banner.jpg" />
</div>
The CSS for the icons:
#social img {
float: right;
width: 70px;
height: 70px;
}
Allright,
First of all be sure to float the a elements instead of the img.
The title should be floated as well, to lign them up correctly.
Also give classes to the other span element in your header so you can apply styles to it. Using <br /> for a new line between elements in HTML is wrong practice.
span.title {
float:left;
}
#social {
float:right;
}
#social a {
float:left;
margin-right:2px; /* just for the spacing of the elements in example */
}
span.address { /* Added this class to the span in the HTML for styling */
float:left;
}
div#banner {
clear:both; /* to replace the <br /> tag */
}
Please see the edited fiddle.
Note: The images weren't linked properly, so I gave the "icons" a red background and your body a black one for readability..
Cheers, Jeroen
Related
I want to generate a PDF from an specified view respecting my actual CSS.
<html>
<head>
<meta charset="utf-8" />
<style>
.justify {
text-align: justify;
text-rendering: geometricPrecision;
}
.center {
text-align: center;
}
body {
font-size: 15px;
white-space: normal;
line-height: 110%;
text-rendering: geometricPrecision;
}
.rightheader {
font-size: 12px;
}
.bigger{
font-size:18px;
}
</style>
<link href="~/Content/uikit.css" rel="stylesheet" />
<link href="~/Content/CartaSates.css" rel="stylesheet" />
<title>
</title>
</head>
<body style="padding:10px;">
<div class="uk-grid" style="margin-top:10px;margin-left:0px !important;">
<div class="uk-width-2-3" style="padding-left:0px;padding-top:0px;">
<img src="~/src/img/logo.png" style="width:200px" />
</div>
<div class="uk-width-1-3 justify" style="padding-left:0px;padding-top:0px;">
<div class="uk-grid">
<div class="uk-width-1-4 justify rightheader" style="padding-left:0px;padding-top:0px;text-align:right">
<strong>Section:</strong><br />
<strong>Office:</strong><br />
<strong>Case:</strong>
</div>
<div class="uk-width-3-4 justify rightheader" style="padding-left:15px;padding-top:0px;">
<span><strong>Foreign Trade Directorate</strong></span><br />
<span><strong>SATES-DCE-UV-2887/2019</strong></span><br />
<span>Request for verification of request.</span>
</div>
</div>
</div>
</div>
</body>
</html>
I already have the my HTML with CSS and it´s showed as intended, logo to the left, and text separated in two minnor divs to the right, but when the PDF is generated, it separate my divs in diferent rows.
<!DOCTYPE html>
<html>
<head>
<title>my web page</title>
<meta name="author" content="akhil">
<style>
h1{color: red;font-size: 400%}
p{color: red}
</style>
</head>
<body>
<section>
<h1>hello how are you?</h1>
<p>i am fine.<hr> what about you?</p>
</section>
</body>
</html>
In this document style is applying to h1 and p but it is not applying to line after hr tag, how to make style apply to line after hr tag?
A paragraph cannot contain a <hr /> tag, so all text after <hr /> will be out of <p> tag. It's better to use this way:
h1 {
color: red;
font-size: 400%;
}
p {
color: red;
}
<section>
<h1>hello how are you?</h1>
<p>i am fine.</p>
<hr />
<p>what about you?</p>
</section>
This is how the browsers render your code:
Your content isn't inside the <p /> tag anymore.
you can close and open the paragraf:
<p>i am fine.</p> <hr><p> what about you?</p>
I am interested in putting a survey (using survey monkey) into a website. I want it to be in a fixed position as a side bar on the left and shrink the size of the survey box. I do not know much about CSS at all.
<!DOCTYPE html>
<html dir='ltr' lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<div>
<head>
<title>
Home
| qfo4produce
</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<link href='css/inuit.css' media='all' rel='stylesheet'>
<link href='css/grid.inuit.css' media='all' rel='stylesheet'>
<link href='css/style.css' media='all' rel='stylesheet'>
</head>
<body class='wrapper'>
<div id='header'>
<a href='index.html' rel='home'>
<img src='images/banner.png' alt="" title='Home'>
</a>
</div>
<div>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
top:0;
left:-30;
iframe { width: 250px !important; }
height:100%;
}
</style>
<div id="surveyInfo"> <div><script src="http://www.surveymonkey.com/jsEmbed.aspx?sm=wtvL1HViBjWad5DOwtqu7A_3d_3d"> </script>
</div>
<ul class='nav'>
<li class='first'>
<a href='what-is-qfo.html' title='What Is QFO?'>What Is QFO?</a>
</li>
<li>
<a href='team.html' title='Team'>Team</a>
</li>
<li>
<a href='examples.html' title='Examples'>Examples</a>
</li>
<li>
<a href='technology.html' title='Technology'>Technology</a>
</li>
<li class='last'>
<a href='mailto:info#franwell.com' title='Contact'>Contact</a>
</li>
</ul>
<a class='login' href='qfo.aspx.html' title='Login'>Login</a>
<div id='main'>
<p>
<img src='images/summary.png' alt="Summary of QfO Process" />
</p>
</div>
Copyright © 2011
</div>
</body>
</html>
What you are asking and the code you have presented is extremely unclear. If you are extremely new to html/css then drawing a picture instead of trying to explain it in words often helps.
Here is an example where the sidebar is in a fixed position on the left. Fixed means that it will always be there, no matter where the page scrolls to.
http://jsfiddle.net/Bceat/
Don't make CSS declarations inside of other CSS declarations. They should each be on their own.
/* BAD */
div#left-sidebar{
position:fixed;
iframe { width: 250px !important; }
}
/* GOOD */
div#left-sidebar {
position:fixed;
}
iframe { width: 250px !important; }
You've also declared your styles inside the body of your html. Don't do that. Declare styles between the <head></head> tags.
/* BAD */
<head>
</head>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
}
</style>
/* GOOD */
<head>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
}
</style>
</head>
You also have some invalid declarations like:
/* right-sidebar-<length> means nothing */
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
I know that you are new, but you are going to have to read up on the basics of html and css. That will allow you to do two things. One is pose questions using language that other developers will understand. The second is presenting at a minimum, code that is properly formatted. That way even if your terminology is incorrect, your code can speak for you. Right now you aren't getting any answers because everything is kind of a mess.
I think you must create a table layout like this
<table width ="100%">
<tr><td></td> </tr>
<tr ><td rowspan="3"></td></tr>
your monkey servey here
<tr><td>nav content</td></tr>
<tr><td> main content</td></tr>
</table>
I have problem of display an hidden image when mouse over to an image by using CSS hover in Chrome and IE, but is working fine in Firefox.
Here is my link: https://www.solarisdutamas.com/fb/Elvieloon/welcome1.php
Here is my coding:
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css-hover.css" />
</head>
<title>Elvie Loon</title>
<meta content="Professional Makeup Artist and Hair Stylist" name="description">
<style type="text/css">
.over .pic1 {
display:none;
visibility:hidden;
}
.over:hover .pic1 {
display:inline;
visibility:visible;
position:absolute;
top:250px;
left:100px;
z-index:11;
}
</style>
<body style="margin: 0px; width: 520px;">
<img src="landing-page.jpg" usemap ="#fly1map" />
<a class="over">
<map name="fly1map">
<area shape="poly" coords="387,339,433,365,416,376,425,395,371,393,391,369,387,339" href="">
</map>
<img src="pic-1.png" class="pic1">
</a>
</body>
</html>
Please help, thank you.
Instead of visibility try this...
#something:hover
{
opacity:1; //100% opacity
filter:alpha(opacity=100);
}
#something
{
opacity:0; //0% opacity
filter:alpha(opacity=0);
}
P.s Both lines inside the statement do the same thing, the bottom filter, is just IE's way of doing it.
The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).
Two ideas...
1. You could use a technique with two images. In addition to your image, create a transparent image of the same size. Then flip them on the mouse hover.
<html>
<head>
</head>
<style type="text/css">
.flipimage { border:solid 1px pink; height:65px; width:65px; background-image:url("blank.jpg"); }
.flipimage:hover { border:solid 1px pink; height:65px; width:65px; background-image:url("truck.jpg"); }
</style>
<body style="margin: 0px; width: 520px;">
<div class="flipimage"></div>
</body>
</html>
2. This approach takes some additional markup, but essentially it places a <div> above the image. When you hover over the <div> it is moved below the image using the z-index.
<html>
<head>
<style type="text/css">
.placeholder{ background-color:pink; height:64px; width:64px; position:absolute; z-index:99; }
.placeholder:hover { z-index:-1; }
.over { position:absolute; z-index:1;}
</style>
</head>
<body style="margin: 0px; width: 520px;">
<div>
<div class="placeholder"></div>
<a class="over"><img src="vcard.jpg" class="pic1"></a>
</div>
</body>
</html>
There is a known bug with Chrome and IE8 related to :hover and z-index on absolute positioned elements.
Chrome: Issue 83533
I know this question gets asked a lot because I have looked at many "solutions" trying to get this to work for me. I can get it to work if I hack up the html but I want to use all CSS. All I want is a header with two columns below it, and I want these three items to fill the entire page/screen, and I want to do it with CSS and without frames or tables. The XAMPP user interface looks exactly how I want my page to look, but again, I do not want to use frames. I cannot get the two orangeish colored columns to extend to the bottom of the screen. I do have it so it looks like the right column extends to the bottom of the screen just by changing the body background color to the same color as the background color of the right column, but I would like both columns to extend to the bottom so I didn't have to do that. Here is what I have so far:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="masthead">
MY SITE</div>
<div id="left_col">
Employee Management<br />
Add New Employee<br />
Edit Existing Employee<br />
<br/>
Load Management<br />
Log New Load<br />
Edit Existing Load<br />
<br/>
Report Management<br />
Employee Report<br />
Load Report</div>
<div id="page_content">
<div id="page_content_heading">Welcome!</div>
Lots of words</div>
</div>
</body>
</html>
CSS
#masthead {
background-color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:xx-large;
font-weight:bold;
padding:30px;
text-align:center;
}
#container {
min-width: 600px;
min-height: 100%;
}
#left_col {
padding: 10px;
background-color: #339933;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: large;
font-weight: bold;
width: 210px;
}
#page_content {
background-color: #CCCCCC;
margin-left: 230px;
padding: 20px;
}
#page_content_heading {
font-family:Arial,Helvetica,sans-serif;
font-size:large;
font-weight:bold;
padding-bottom:10px;
padding-top:10px;
}
a {
color:#0000FF;
font-family:Arial,Helvetica,sans-serif;
font-size:medium;
font-weight:normal;
}
a:hover {
color:#FF0000;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
background-color: #CCCCCC;
}
Something like this should work
<div id="header" style="position:absolute; top:0px; left:0px; height:100px; width:100%; overflow:hidden; background-color:#00FF00">
</div>
<div id="leftnav" style="position:absolute;top:100px; left:0px; width:100px; bottom:0px; overflow:auto;background-color:#0000FF">
</div>
<div id="content" style="position:absolute;top:100px; left:100px; bottom:0px; right:0px; overflow:auto;background-color:#FF0000">
</div>
Well, this is your code altered to fit what you want:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
html, body {padding:0;margin:0;background-color:#CCCCCC;height:100%;}
#hd{position:absolute;top:0;left:0;width:100%;height:100px;background-color:green;z-index:1;}
#col{float:left;width:230px;height:100%;background-color:red;}
#bd{width:100%;height:100%;background:pink;}
.content{padding:100px 0 0 230px;}
</style>
</head>
<body>
<div id="hd">MY SITE</div>
<div id="col">
Employee Management<br />
Add New Employee<br />
Edit Existing Employee<br />
<br/>
Load Management<br />
Log New Load<br />
Edit Existing Load<br />
<br/>
Report Management<br />
Employee Report<br />
Load Report
</div>
<div id="bd">
<div class="content">
Lots of words
</div>
</div>
</body>
</html>
Please not that inside containers like the one on the body div may be required to allow proper format of your html elements!
Hope this helps... :)