So I have a page and I'm trying to put all my links on a seperate HTML file and my plan is to use iFrame to easily add the list of links to every page so to change the links I just have to change one file. My problem is that after using iFrame, other text doesn't show up on my page... Here's my code:
Home page:
<html>
<head><title>HTML Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="navigationLinks"><iframe src="links.html" height="100%" width="10%" seamless></iframe></div>
<div id="mainBody">Hello World</div>
</body>
</html>
CSS Page:
body {
}
.navigationLinks, .navigationLinks a:link {
float:left;
margin-left: 0px;
margin-right: 80%;
font-family: impact;
}
.mainBody {
float:center;
margin-left: 22%;
margin-right: 22%;
color:black;
}
My mainBody text doesn't show up. Any ideas?
Fix:
.mainBody {
float:left;
width:100%;
display:block;
margin-left: 22%;
margin-right: 22%;
color:black;
text-align:center;
}
By the way, there is no float: center
Related
I know there are a lot of topics about image header; but I checked most of them, and they couldn't help me.
This is my problem: I have an image that I want to use as header. I finally found the way to place it, but then it shows with its original size. I tried max-width:100%, but the size didn't change and just stays there.
HTML:
<body>
<header id="niberus">
<img src="nib1.jpg" alt="nib1" width="1900px" height="450px"></img>
</header>
And for my CSS, I have this:
header#niberus
{
width: 100%;
}
I tried to remove the width and the height from my HTML file, but then the image stays at normal size. When I add the width and height like now, it fills the screen; but of course, when you make the window smaller, the picture doesn't change.
Here is my full HTML code:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
<title>Niberus-gaming</title>
</head>
<body>
<header id="niberus">
<img src="nib1.jpg" alt="nib1" width="1900px" height="450px"></img>
</header>
<div class="hbuttons">
<ul>
<li>-Home-</li>
<li>-News-</li>
<li>-Forum-</li>
<li>-Upcoming projects-</li>
<li>-About me-</li>
<li>-Contact-</li>
</ul>
</div>
<hr>
<table border="1" cellpadding="5px" cellspacing="10px">
<tr>
<td width="300px"><h1>Under construction</h1></td>
<td width="1300px" ><h1>Under construction</h1></td>
<td width="300px"><h1>Under construction</h1></td>
</tr>
</table>
</body>
</html>
And here is my full css code:
ul.horizontal li{
display:block;
float:left;
padding:0 10px;
width: 150px;
}
header#niberus
{
width: 100%;
}
body
{
background-color:black;
}
h1
{
color: white;
}
table
{
color: white;
text-align: left
}
.hbuttons{
float: left;
width: 100%;
background-color: #00FF00;
overflow:hidden;
position:relative;
}
.hbuttons ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
.hbuttons ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
.hbuttons ul li a {
display:block;
margin:0 0 0 1px;
padding:10px 10px;
font: 30px Impact;
color: white;
text-decoration:none;
line-height:15px
}
Currently you are targeting the header tag, you need to target the image itself. Remove the width and height attribute from the html. You can also set a max-width for the img tag if you need to
Target the image
header#niberus {
display: block;
}
header#niberus img {
width: 100%;
max-width: xxxx;
}
This should be easy for you I hope :)
I am trying to make three buttons with repeating background images. I use two <button> and a link <a>. It works with the link but not with the buttons - the side images (the rounded corners) don't appear. Here is the html:
<!doctype html>
<html>
<head>
<title>Task 1</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="task1.css">
</head>
<body>
<button class="blue-btn"><span id="left"> </span>OK<span id="right"> </span></button><br/>
<button class="blue-btn"><span id="left"> </span>Cancel<span id="right"> </span></button><br/>
<span id="left"> </span>View More Information<span id="right"> </span>
</body>
</html>
Here is the CSS:
.blue-btn{
background: url('button-repeat.png') repeat-x;
border:0;
height:55px;
font: 14px/44px Myriad-Pro, sans-serif;
color:black;
cursor:pointer;
}
a{
display:inline-block;
text-decoration:none;
}
#left{
display:block;
background: url('button-left.png') no-repeat;
height:55px;
width:24px;
float:left;
margin-left:-24px;
}
#right{
display:block;
background: url('button-right.png') no-repeat;
height:55px;
width:24px;
float:right;
margin-right:-24px;
}
I'm pretty sure you can't do that. You might have to give up on using <button>s and style a regular element (probably <a>, <span> or <div>) to look like a button.
It's possible with some position magic. Make the blue_btn position:relative and the left and right part should be position:absolute. Also don't use id's for styling, add some meaningfull class names to the button parts.
.blue-btn{
position: relative;
}
.btn-right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 10px;
}
.btn-left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 10px;
}
Jsfiddle
Try styling your button without the use of spans and instead use multiple background images and multiple positions.
.button {
background-image: url(), url();
background-position: left top, right top;
}
*Note that IE 8 and IE9 are not supported.
I have a simple script that displays a html file
function doGet(e) {
return HtmlService.createTemplateFromFile('Final Contract Agreement').evaluate();
}
and the corrasponing html:
<html>
<head>
<style type="text/css">
#content{
padding :0 0;
margin : 0 auto;
width: 800px;
height : 600px;
background: #FFFFFF;
}
body{
background: #dbdad4;
margin : 0;
}
#header{
width: 100%;
height: 82px;
background: #4F2170;
background-repeat:no-repeat;
}
#header h1{
vertical-align:middle;
text-align:right;
color: white;
padding-right: 50px;
}
</style>
</head>
<body>
<div id="header">
<h1>
Contract Form
</h1>
</div>
<div id="content">
<h3>
Hello World!
<?= new Date() ?>
</h3>
</div>
</body>
</html>
it ouputs this:
I have tried setting all combinations of margins/paddings on the elements but nothing is getting rid of the whitespace on top. When i put the same code in a plane jane html file it works just fine.
Im guessing the caja is adding the whitespace to the top, this css removed the whitespace for me:
* {
margin: 0;
}
also for those wondering this is how i got it to take up the whole browser window:
html {
height:100%;
}
body{
height:100%;
}
I have a page with a container div 900px wide, margin is auto. I have a header tag within this 150px high.
I want the header to consist of ann image on the left, some text and then another image on the right (opposite the imagine on the left). When I put two img tags in the header div, the second image is on lower than the first. I've tried amending to an inline display without any luck.
Any ideas?
CSS
html, body {
background-color: #ccd6cc;
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
}
.hidden {
display: none;
}
#page-container {
width: 900px;
margin: auto;
background-color: white;
}
#header {
height: 150px;
background-color: yellow;
}
#content {
line-height: 18px;
}
img#mcclogo {
display:inline;
float:left;
margin:0;
padding:0;
}
img#bactulogo {
display:inline;
float:right;
margin:0;
padding:0;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="curvy.corners.trunk.js"></script>
<head>
<title>Intranet Layout</title>
<link rel="stylesheet" type="text/css" href="test_layout.css" media="screen" />
</head>
<body>
<div id="page-container">
<div id="header">
<img id="mcclogo" src="../images/logo.gif" alt="xx" width="244" height="48" />
<img id="bactulogo" src="../images/bactu3.gif" alt="xx" width="260" height="124" />
</div>
<div id="content">
Content
</div>
</div>
</body>
</HTML>
Assuming html is correct, http://jsfiddle.net/sbAvB/
css should be something like this then:
#main{
width:900px;
margin: auto; }
#header{
height:150px;
width:100%
}
#picL
{
float:left;
}
#text{
position:absolute;
left:50%;
right:50%;
width:70%;
}
#picR
{
float:right;
margin-right:0px; }
Likely the issue is a lack of a position/margin variables set in the css properties. To align multiple objects in a line, one way to do this is.
i have a very annoying problem. i have made a design of my site using CSS and it seems to work perfectly in Google Chrome and IE but the CSS designing is not all working in Firefox. what Could be the problem , i tried lots of things its still not working.
As new users are not allowed to post the image. i m unable to explain with the screen shot.
My code in Index.php
<!Doctype html>
<html lang="en">
<title>Online Voting RTC</title>
<head>
<link type="text/css" rel="stylesheet" href="css\style.css">
<script type="text/javascript" src="js\create_text_box.js">
</script>
</head>
<body>
<div id="wapper">
<!-- Define Header -->
<?php include("header.php"); ?>
<!-- End Header -->
<!-- Main content area -->
<?php include("maincontent.php");?>
<!-- End of Main content area -->
<!-- Left Sidebar -->
<?php include("sidebar.php");?>
<!-- End Left Sidebar -->
<!-- Footer -->
<?php include("footer.php");?>
<!-- End of Footer -->
</div>
</body>
</html>
This is the Css portion
body {
background: #ffffff;
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #dddddd;
}
#header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #403cf7;
}
.logo {
float:left;
position:relative;
left:20px;
top:20px;
}
.pagetitle {
float:left;
position:relative;
left:550px;
top:20px;
}
.usermenu {
float:right;
position:relative;
right:20px;
top:20px;
}
#sidebar {
width: 20%;
height: 600px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #ffff99;
text-align: center;
}
#maincontent {
width: 80%;
height: 600px;
margin: 0;
padding: 0;
border: 0;
float: right;
background: #95dff8;
}
#footer {
width: 100%;
height: 70px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #272727;
}
/*-----------------------------------------CSS for navigation Menu------------------------*/
#navMenu{
color:#d4d3d3;
font-family:Geneva;
float:left;
}
#navMenu ul li a{
text-decoration:none;
color:#989694;
}
#navMenu ul li a:hover{
color:#f46322;
}
#navMenu ul{
padding:0;
margin:0;
margin-left:25px;
list-style:none;
position:relative;
left:20px;
top:20px;
}
/*----------------------------------------------------------------------------------------*/
i would be very grateful if someone can help me out in this case. Actually i was checking for browser compatibility, and i came across this problem.
Thanks in advance :D
The character “\” (backslash) is not allowed in a URL; change it to “/” (normal slash). Some browsers implicitly convert the incorrect “\” to “/”.
try to remove the type="text/css".
Your code should be look like this:
<link rel="stylesheet" href="css/style.css">
You need to close your link tag
<link type="text/css" rel="stylesheet" href="css/style.css" />
If your css folder is off the route dir of your site you would be better using
<link type="text/css" rel="stylesheet" href="/css/style.css" />
as this will still work if you move your page to a different folder.
You also need to move your title tag within the HEAD element to make the HTML valid.
I had this problem too. Once I removed the z-index of -1 from the container class. the links started working again.