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.
Related
So basically i'm formatting a code, and the spacing isn't formatting for the id but the color is, why is it picking up on one of the formatting elements and not the others.
jsp code
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="/web_project1/jquery/jquery-1.4.2.js">
</script>
<script type="text/javascript" src="functions.js"></script>
<link type="text/css" rel="Stylesheet" href="Stylesheet.css"/>
<title>Sam's Game</title>
</head>
<body>
<h1 class="format" id="title">Sam's Game</h1>
<h1 id="you">You <span id="enemy">Opponent</span></h1>
<h1 id="stats">Stats:<span id="theirStats">Stats:</span></h1>
</body>
</html>
And my css file
#CHARSET "ISO-8859-1";
#title {
font-family: Snap ITC, chiller;
font-size: 50px;
color:red;
text-align:center;
}
.format{
background-color:yellow;
margin-left: 480px;
width:360px;
height:60px;
}
#you {
margin-left:150px;
font-family:verdana;
color:blue;
font-size:25px;
}
#enemy{
margin-left:850px;
font-family:verdana;
color:blue;
font-size:25px;
}
#stats{
margin-left: 90;
font-family: comic;
color:green;
}
#theirStats{
margin-left: 800;
font-family: comic;
color:green;
}
I'm probably missing something simple but anyways, the margin-left should add spacing to look like
Stats: Stats:
but it's currently appearing
Stats:Stats:
^^ in green font currently
Try margin-left: 90px and margin-left: 800px instead of margin-left: 90 and margin-left: 800
Try this..
#CHARSET "ISO-8859-1";
#title {
font-family: Snap ITC, chiller;
font-size: 50px;
color:red;
text-align:center;
}
.format{
background-color:yellow;
margin-left: 480px;
width:360px;
height:60px;
}
#you {
margin-left:150px;
font-family:verdana;
color:blue;
font-size:25px;
}
#enemy{
margin-left:850px;
font-family:verdana;
color:blue;
font-size:25px;
}
#stats{
margin-left: 90px;
font-family: comic;
color:green;
}
#theirStats{
margin-left: 800px;
font-family: comic;
color:green;
}
<h1 class="format" id="title">Sam's Game</h1>
<h1 id="you">You <span id="enemy">Opponent</span></h1>
<h1 id="stats">Stats:<span id="theirStats">Stats:</span></h1>
Check out this Fiddle
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;
}
I want to create a contact me section on a website i'm making but the problem is my whole website has text-align:center and i am using a definition list for the contact information. is there a way i can still use the wrapper for my page but align the text to the left without it going out of the white border?
CSS:
#charset "utf-8";
html {
text-align: center
}
#container {
margin-left:auto;
margin-right:auto;
margin-top:50 auto;
margin-bottom:50 auto;
width:1000px;
background-color:#666666;
}
#body1 {
background-color:#666666;
width:1000px;
height:405px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body2 {
background-color:#666666;
width:1000px;
height:800px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body3{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body4{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body5{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {
margin:0px;
background-color:#999;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px;
}
ul.navbar li {
width:20%;
display:inline-block;
}
ul.navbar a {
color:white;
font-size:20px;
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
color:#000000;
background-color:#CCC;
}
body {
background-color:#333333;
}
#portrait {
position:relative;
top:20px;
right:420px;
}
#headerhome {
position:relative;
bottom:130px;
left:50px;
font-size:30px;
text-decoration:underline;
font-family:arial;
color:#CCCCCC
}
#goal {
margin-left:40px;
text-align:left;
text-indent:40px;
position:relative;
bottom:110px
}
.tab {
margin-left:40px;
}
#contact {
position:relative;
right:390px;
text-align:left
}
HTML:
<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joe Scotto | Contact</title>
</head>
<body>
<div id="container">
<div id="body3">
<img src="banner.png" width="1000" height="100" />
<!--Navbar Start-->
<center>
<ul class="navbar">
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
</ul>
</center>
<!--Navbar End-->
<div id="contact">
<dl>
<dt><h3>Phone Number</h3></dt>
<dd>XXX-XXX-XXXX</dd>
<dt><h3>Email Address</h3></dt>
<dd>XXXXXX#gmail.com</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
If i understand you correctly then your problem can be fixed using two things:
in #contact css add "!important" after the "text-align:left;" on the same line
add margin if it overlaps.
If this doesnt answer your question please send me a link so i can see what is happening.
hope i helped.
#contact {
text-align:left;
} Might work. position:relative; Try removing. Because CSS goes from top to bottom and over-writes the properties with new values.. Check this
If you want to keep the "contact block" in the body3 (which is centered), why you added the code - "right: 390px;" to the #contact, I do not see the reason. So if you delete it everything will be okay.
Have you tried this?
dl {
text-align: left;
}
Edit: I added the above to your css and the list was aligned to the left.
remove the text-align:center from css in html tag and add text-align attribute in every div tag so you will get align as you want
The layout for this is rather simple and easy to achieve and has been covered here a lot, my problem comes from when I want the right div to be scrollable.
I simply cannot get the left side to be fluid and statically positioned while allowing the right side to be a fixed width and scrollable.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" style="display: none !important;">
body {
margin: 0 0 0 0;
overflow: hidden;
}
#page-wrap {
background: white;
max-width: 100%;
}
#main-content {
background-color: #797979;
padding-right: 350px;
padding-top: 20px;
height: 100%;
float: left;
position: absolute;
}
#right-sidebar {
background-color: #cacaca;
width: 350px;
float: right;
overflow: auto;
height:100%;
}
</style>
</head>
<body>
<div class="page-wrap">
<div id="main-content">
<h2>Content Area</h2>
</div>
<div id="right-sidebar">
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Try this - jsFiddle
body {
margin: 0 0 0 0;
background-color: #797979;
/*overflow: hidden;*/
}
#page-wrap {
background: white;
max-width: 100%;
}
#main-content {
position:absolute;
right:200px;
left:0px;
padding:20px;
}
#right-sidebar {
background-color: #cacaca;
position:fixed;
overflow-y:scroll;
right:0px;
width:200px;
height:100%;
}
I will a style of asp.net webpage like:
body
{
font-family: Times New Roman, Serif;
color: #000000;
text-align: center;
min-height:100%;
height:auto;
}
#container
{
/*background-color: #00CCFF; */
margin: auto;
width: 100%;
}
#header
{
/* background-color: #FF00FF; */
width: 100%;
height: 95px;
background-image:url('../Images/Back_logo.png');
background-repeat:repeat-x;
background-color:Transparent;
}
#menu
{
/*background-color: #FFFF00; */
height:40px;
}
#left
{
/* background-color: #00FF00; */
width: 20%;
float: left;
text-align:left;
border:1px solid #C8E3F1;
background-color:#EEFFFF;
overflow:hidden;
}
#center
{
width: 79%;
float: right;
/* background-color: #FF0000; */
}
#footer
{
/*background-color: #008000; */
clear: both;
height:70px;
margin-top:10px;
background-image: url('../Images/footer.png');
background-repeat:repeat-x;
background-color:Transparent;
}
I have a problem is the height of page not 100%. I used min-height or height is 100% in body, but don't work. The footer change by the long of content center. How to fix?
The html is very simple:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="layout.master.cs" Inherits="layout" %>
<!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>Layout</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="App_Themes/theme1/custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="header">HEADER</div>
<div id="menu">MENU</div>
<div id="left">LEFT</div>
<div id="center">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"</asp:ContentPlaceHolder>
</div>
<div id="footer">FOOTER</div></div>
</form>
</body>
</html>
In other pages use this Master Page, the div have ID is center can stretch or shrink belong to the contain in it. So that the display of footer isn't exact.
Use HTML, Body
html, body {
height: 100%;
}
#footer
{
/*background-color: #008000; */
clear: both;
height:70px;
position:absolute;
bottom:0px;
margin-top:10px;
background-image: url('../Images/footer.png');
background-repeat:repeat-x;
background-color:Transparent;
}
We need to give 100% height to both the html and the body tag. This is often overlooked but is vitally important as no element will adjust to a percentage height unless it knows what it’s parent height is currently occupying. As the container is a descendant of the body tag which is a descendant of the html tag, then this is required.
100% height is one of those things CSS doesn’t do so easily. When you specify an element to have a height of 100%, the 100% refers to the containing element’s height. The containing element would then need to be 100% the height of its containing element and so on. The trick is to set the height of the outermost elements to be 100%
Put html { height: 100% } at the beginning and see if it helps.
Make sure that the height is set to 100% in every point of your Xpath layout hierarchy. That is html->body->form->div id="center"
style="height:100% "
You can then continue using style="height:100% " in the child pages that will inherit from ContentPlaceHolder2 at the inheriting content place holder.
There are areas you might need to adjust(lower) the % height to allow other elements to fit in the area e.g. the other div s.