I am trying to a make a header exactly like for facebook but when I make it fixed its content inside starts changing position on window resize .
Like here http://www.housetostay.co.za/
how can I fix this
Below is my code
<html>
<head>
<style>
.heading {
display:block;
top:0px;
left:0px;
right:0px;
height:20px;
position:fixed;
border:1px solid #888;
padding:0px;
text-align:center;
font-weight:bold;
color:#000;
background: #ccc;
width: 100%;
height: 100px;
z-index:3;
}
</style>
</head>
<body>
<div class = "heading">
<table id ="headertable" align="left">
<tr>
<td>
<a href="http://www.housetostay.co.za">
<h2 class= "logo">HouseToStay</h2>
<td> </td>
</a>
</td>
<td>How it works</td>
<td>Contact us</td>
<td>PostAd</td>
<td>Jobs</td>
<td>Buy it</td>
<td>
</td>
</table>
<table class ="profile">
<tr>
<td>
<h2>user</h2>
</td>
<td>
<img src="bhubezi/images/logos/nopic.png" width="50" height="40">
</td>
</tr>
</table>
</div>
You can try do this by jQuery.
Here You have a simple Demo
Here you have a Tutorial
This sample wroks fine when resizing page.
Using <table> for layout is generally frowned upon, and in this case makes it harder to achieve what you're trying to do. I would recommend replacing your <table>-based layout with more standard HTML elements (for example, by putting your menu into a list <ul> and your user profile into its own <div>), then absolutely positioning those elements and giving them explicit pixel positions. Then they shouldn't move around when you resize the window.
Here's an example (using your own code with as few modifications as possible):
<html>
<head>
<style>
.heading {
display:block;top:0px;left:0px;right:0px;height:20px;position:fixed;border:1px solid #888;padding:0px;text-align:center;font-weight:bold;color:#000;background: #ccc;width: 100%;height: 100px;z-index:3;
}
#logo {
position:absolute; /* This will keep it one place */
left:200px; /* This specifies what place */
}
#menu {
position:absolute; /* This will keep it one place */
left:320px; /* This specifies what place */
width:400px; /* This makes sure the menu doesn't shrink if the window is made smaller */
list-style-type:none;
}
#menu li {
float:left;
margin-right:10px;
}
#profile {
position:absolute; /* This will keep it one place */
left:750px; /* This specifies what place */
width:100px; /* This makes sure the profile doesn't shrink if the window is made smaller */
}
#profile h2 {
display:inline;
}
</style>
</head>
<body>
<div class="heading">
<a href="http://www.housetostay.co.za" id="logo">
<h2>HouseToStay</h2>
</a>
<ul id="menu">
<li>How it works </li>
<li>Contact us</li>
<li>PostAd</li>
<li>Jobs</li>
<li>Buy it</li>
</ul>
<div id="profile">
<h2>user</h2>
<img src="bhubezi/images/logos/nopic.png" width="50" height="40">
</div>
</div>
Edit: added explicit pixel positions to header elements.
Related
I am facing an issue, the text in next line is starting right beneath from Icon. But i want that text shall start right beneath under above line of text.
It is appearing as below:
But it shall look like this
HTML for above markup is
<div class="column selected-category-label small-7 medium-9">
<span id="image" class="label-image"><svg class="icon icon-418"
focusable="false"><use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#icon-418"></use></svg> </span>
<span id="category" class="label-category">Lewn og gwld</span>
</div>
CSS markup is
.selected-category-label .icon {
height: 2.5rem;
width: 2.5rem;
stroke: #012F60;
fill: #012F60;
top: 0.3125rem;
position: relative;}
.selected-category-label .icon {
margin-left: -0.625rem;
margin-top: -1.25rem;
}
This might help. Use two inline block level containers and declare the margin on one so as to set the distance between them.
#image {
display:inline-block;
height:30px;
width:100px;
background: silver;
}
#category {
display:inline-block;
margin-left:5px;
text-align:left;
vertical-align:top;
width:70px;
font-size:20px;
}
<div class="column selected-category-label small-7 medium-9">
<div id="image" class="label-image"></div>
<div id="category" class="label-category">Lewn ogasdasdas gwldasdasdasdasd</div>
</div>
Another simple way of achieving this (apart from the inline-block approach, mentioned above) is to use flexbox. If you just add the rule:
.selected-category-label {
display:flex;
}
...then the .selected-category-label container becomes a flex container, and the two spans inside it will be flex items, which should behave the way you require.
Would something like this work?
<table>
<tr>
<td><span id="image" class="label-image"><svg class="icon icon-418"
focusable="false"</td>
<td valign="bottom">Lewn og </td>
</tr>
<tr>
<td></td>
<td valign="top">gwld</td>
</tr>
</table>
Please check the image:
Check the black circle.
This black circle contains the chart that was locates in the Service Level Per Campaing, but when I added the red area, the charts drop down as you see.
can you help me please?
I want to keep the chart in its correct location and put this red area above it.
This is the code:
<div style="width: 45%; float: left; margin-left:5%">
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<%-- Start Dropdown Code --%>
<a id="DropdownSeviceLink" href="#">+</a>
<div ID="campaignDiv" runat="server" >
<ul>
</ul>
</div>
<script type="text/javascript" src="Scripts/DropdownCheckbox.js"></script>
<%-- End Dropdown Code --%>
</div>
The red area is the div with id campaignDiv I fill it dynamically.
The css of campaignDiv is:
#DropdownSeviceLink {
float:right;
margin-right:10px;
}
a#DropdownServiceLink:visited {
color:inherit;
}
#campaignDiv {
background-color:red;
width:200px;
height:200px;
float:right;
position:relative;
}
The whole code
http://jsfiddle.net/jdhMs/
If the red box has to be above then the most easy way to do this is to change the position:relative to absolute. (The parent div, chartHeaderClass, should have a position: relative).
#campaignDiv {
background-color:red;
width:200px;
height:200px;
position:absolute;
top: 0;
right: 0;
}
I've looked through other answers on this site but am not able to find exactly what I need. I'm building a site which uses width as percentages on divs and tables. I figured this would help me keep the layout of the site static no matter what screen resolution the viewer is using. However, I notice that when I resize my window, 2 things are happening that I don't want:
1) The text elements are jumping to new lines and throwing off the whole layout. I'd really like to keep it from doing that but not sure if that goes against using the percentage thing.
2) I've used absolute positioning on some elements because they didn't really work in a table format (specifically the skills and languages portion on the right hand side--see screenshot below). But if I resize the window, they don't stay with everything else.. they just stay in one place. And I know that's what they're supposed to do but I'm just wondering if there's a way to get it to stay with everything else when resized and still be absolute (or fixed? static?).
The reason why I'm using percentages for width is because I want my site to fill the screen based on the resolution but also keep all content centered in the middle of that screen. If I resize the window, everything gets screwed up and even a nav bar which is floated to the right ends up on the other side of the screen over my logo. It's incredibly frustrating.
I don't know what the answer is but here's a screenshot of how the page looks on my browser (i.e. how it's supposed to look) and my code (below). I'd really appreciate any insight people can give me into how I should better design this site. I can't seem to do everything I want it to do and I know it's probably way simpler than I'm making it. Please let me know what you think. Thanks!
Pooja
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pooja's Designs :: Resume</title>
<style type="text/css">
body#home {
text-align:center;
margin:0px;
padding:0px;
width:100%;
height:100%;
font-family:Open Sans;
}
body#home a#nav-home,
body#resume a#nav-resume,
body#portfolio a#nav-portfolio,
body#contact a#nav-contact
{
color: #dfadec;
text-decoration:none;
}
#container {
background-color:#eae5e5;
width:100%;
text-align:left;
margin: 0 auto;
height:auto;
}
#main {
padding-top:40px !important;
padding-bottom:35px !important;
width:50%;
margin: 0 auto;
color:#4d4d4f;
}
#header {
border-top:solid 15px #4d4d4f;
font-size:30px;
color:#4d4d4f;
background-color:#FFF;
width:100%;
padding-bottom:45px;
}
#title {
padding-top:30px;
}
#footer {
color:#FFF;
font-size:12px;
background-color:#dfadec;
width:100%;
padding-bottom:45px;
padding-top:45px;
margin: 0 auto;
height: 100%;
border-top:solid white 3px;
}
#nav {
font-size:12px;
color:#CCC;
float:right;
margin-top:-18px;
}
#nav a:link {
color:#CCC;
text-decoration:none;
}
#nav a:hover {
color:#dfadec;
text-decoration:none;
}
#nav a:visited {
color:#CCC;
text-decoration:none;
}
h1 {
font-size:60px;
color:#4d4d4f;
margin-top:-150px;
}
h2 {
font-size:40px;
color:#4d4d4f;
font-weight:normal;
margin-top:-40px;
}
#resume-title {
color:#FFF;
letter-spacing:5px;
font-size:70px;
}
img#icon {
background-color:#4d4d4f;
padding:12px;
}
#prof_info {
width:115px;
height:115px;
background-color:#dfadec;
margin-top:30px;
}
#prof_info p {
color:#FFF;
font-size:16px;
padding-left:10px;
letter-spacing:0px;
vertical-align:middle;
padding-top:37px;
font-weight:600;
}
#work_exp {
width:115px;
height:115px;
background-color:#dfadec;
margin-top:30px;
}
#work_exp p {
color:#FFF;
font-size:16px;
padding-left:10px;
letter-spacing:0px;
vertical-align:middle;
padding-top:37px;
font-weight:600;
}
#education {
width:115px;
height:115px;
background-color:#dfadec;
margin-top:30px;
}
#education p {
color:#FFF;
font-size:16px;
padding-left:10px;
letter-spacing:0px;
vertical-align:middle;
padding-top:47px;
font-weight:600;
}
#contact {
width:45%;
margin: 0 auto;
}
#title-nav {
width:50%;
margin: 0 auto;
}
.position {
font-size:14px;
font-weight:600;
}
ul {
margin:0;
padding:0;
padding-left:20px;
}
ul li {
color:#dfadec;
}
</style>
</head>
<body id="home">
<div id="container">
<div id="header">
<div id="title-nav">
<div id="title">
<strong>Pooja's Designs</strong><br />
<span style="font-size:16px; color:#dfadec;">Web Development / Design</span>
</div>
<div id="nav">
<strong><a href="http://www.poojasdesigns.com/" id="nav-
home">HOME</a> | <a href="http://www.poojasdesigns.com/resume"
id="nav-resume">RESUME</a> | <a
href="http://www.poojasdesigns.com/portfolio" id="nav-
portfolio">PORTFOLIO</a> | CONTACT</strong>
</div>
</div>
</div>
<div id="main">
<div id="resume-title">
RESUME
</div>
<div style="border-bottom:solid #999 1px; width:72%; height:5px;"> </div>
<div style="position: absolute; left: 1040px; top: 273px;">
<img id="icon" src="exclamation.png" style="padding-left:17px; padding-right:17px;
padding-top:10px; padding-bottom:8px; background-color:#dfadec; vertical-align:middle;
margin-bottom:5px;" /><br />
Skills
<div style="border-bottom:solid #999 1px; width:200px; height:5px; margin
-bottom:15px;"> </div>
<span style="font-size:12px;">DREAMWEAVER<br />
PHOTOSHOP<br />
ILLUSTRATOR<br />
FLASH<br />
INDESIGN</span>
</div>
<div style="position: absolute; left: 1038px; top: 477px;">
<img id="icon" src="globe.png" style="padding:6px; padding-left:5px; background-
color:#dfadec; vertical-align:middle; margin-bottom:5px;" /><br />
Languages
<div style="border-bottom:solid #999 1px; width:200px; height:5px; margin-
bottom:15px;"> </div>
<span style="font-size:12px;">HTML<br />
CSS<br />
JAVASCRIPT<br />
JQUERY<br />
PHP</span>
</div>
<table width="70%">
<tr>
<td>
<div id="prof_info">
<p>Professional<br />
info</p>
</div>
</td>
<td style="padding-left:20px; font-size:12px; text-align:justify; line-height:18px;"
valign="bottom">
My objective is to secure the position of Web Developer/Designer in an established
organization which will enable me to use my talents, creativity and ability to the
maximum, and contribute to the growth of the organization, as well as myself. I am
fluent in English and Hindi, with some basic knowledge of Spanish.
</td>
</tr>
</table>
<div style="border-bottom:solid #999 1px; width:72%; height:5px; padding-
top:30px;"> </div>
<table width="70%">
<tr>
<td valign="top">
<div id="work_exp">
<p>Work<br />
experience</p>
</div>
</td>
<td style="padding-left:20px; padding-top:60px; font-size:12px; text-align:justify;
line-height:18px;">
<span class="position">Web Producer | Random House, Inc<br />
2011 - present</span><br /><br />
<ul>
<li><span style="color:#4d4d4f;">Create and manage content on the AtRandom website, as
well as author and imprint websites</span></li>
<li><span style="color:#4d4d4f;">Compile, code, and send out email newsletters (web and
mobile-responsive) using Emailvision, ExactTarget, and MailChimp</span></li>
<li><span style="color:#4d4d4f;">Manage email distribution lists (importing and
exporting subscribers)</span></li>
<li><span style="color:#4d4d4f;">Carry out website-related requests for colleagues, such
as uploading graphics to the live server and making changes to websites as
needed</span></li>
<li><span style="color:#4d4d4f;">Pull reports from Google Analytics and Omniture Site
Catalyst for newsletters and websites</span></li>
<li><span style="color:#4d4d4f;">Create and edit PDF documents of book excerpts to be
uploaded on Scribd</span></li>
<li><span style="color:#4d4d4f;">Upload book trailers to YouTube</span></li>
<li><span style="color:#4d4d4f;">Create giveaways on LibraryThing</span></li>
<li><span style="color:#4d4d4f;">Compile Google forms for giveaways and
contests</span></li>
</ul>
</td>
</tr>
</table>
<div style="border-bottom:solid #999 1px; width:72%; height:5px; padding-
top:30px;"> </div>
<table width="56%">
<tr>
<td valign="top">
<div id="education">
<p>Education</p>
</div>
</td>
<td style="padding-top:60px; font-size:12px; text-align:justify; line-height:18px;">
<span class="position">American Sentinel University<br />
2008 - 2010</span><br /><br />
Bachelor of Science, Web Design & Development<br /><br />
<span class="position">University of Kentucky<br />
2005 - 2007</span><br /><br />
General Studies
</td>
</tr>
</table>
</div>
<div id="footer">
<div id="contact">
<table width="100%" style="padding-left:10px;">
<tr>
<td>
<img id="icon" src="mail-icon.png" />
</td>
<td>
<strong>Contact</strong><br />
myemail at gmail dot com
</td>
<td>
<img id="icon" src="add-icon.png" />
</td>
<td style="padding-right:25px;">
<strong>Follow me</strong><br />
<a href="" target="_blank"><img
src="Pace_Social_Icon_Set/PNG/facebook.png" width="25" border="0" style="margin-left:-
8px;" /></a><a href="" target="_blank"><img
src="Pace_Social_Icon_Set/PNG/twitter.png" width="25" border="0" /></a><a
href="" target="_blank"><img
src="Pace_Social_Icon_Set/PNG/linkedin.png" width="30" border="0" /></a>
</td>
<td>
<img id="icon" src="call-icon.png" style="padding:8px; padding-left:12px; padding-
right:12px;" />
</td>
<td>
<strong>Call</strong><br />
C: 123.456.7890
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
A key concept for building responsive layouts is Absolute Positioning Inside Relative Positioning. Chris Coyier has a great article here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/. This concept allows you to position items absolutely inside a relatively position element.
I've applied this concept to your code so you can start to get the idea of what I'm talking about. However, with all the tables and inline styles, your markup still needs some major refactoring. See here: http://jsfiddle.net/meub/4pcx5/4/
Some key code in the fiddle:
#main {
padding-top:40px !important;
padding-bottom:35px !important;
width: 830px;
margin: 0 auto;
color:#4d4d4f;
/* Important! Lets you position elements absolutely INSIDE this div */
position: relative;
}
Some other important lessons to make your life easier in the future:
Don't use inline styles
Don't use tables for layout
Indent your code so it's easier to read (this is a good tool for messy code)
To leave everything in the center you need the body to be something like this:
body{
padding: 0 0 0 0;
border:0;
margin:0 auto;
width:100%;
}
and then you need a wrapper div, let's say:
.wrapper{
text-align:center;
margin:0 auto;
width:900px; //modify this to the size you want
}
then put everything inside that wrapper div, everything will be in the center of that wrapper div
Ok, I have tried everything I can think to remedy this issue...The links at just the top of my site arent working.
Links anywhere else are fine.
Here is my html:
<div id="header" class="header1" align="center">
</div><!--end blue header div-->
<div class="logo" align="center">
<table align="center" width="800px"><tr><td width="800px" align="center">
<img align="middle" src="images/phwm_sc_logo.png" width="170" height="212" alt="logo" />
</td></tr></table>
<!--must be same width as navigation "header2 div"-->
</div>
<!--end logo div-->
<div id="header" class="header2" align="center">
<table width="800px" height="80px" style="padding-top:10px"> <!--height of table must match height of div "header 2" -->
<tr>
<td width="138"><h1>[ HOME ]</h1></td>
<td width="149"><h1>[ TEAMS ]</h1></td>
<td width="220"><h1></td>
<td width="137"><h1>[ STAFF ]</h1></td>
<td width="132"><h1>[ GALLERY ]</h1></td>
</tr>
</table>
</div><!--end red navigation header div-->
and here is my external CSS:
a.ex1:link {
color:#666335;
text-decoration:none
} /* unvisited link */
a.ex1:visited {
color:#666335;
text-decoration:none
} /* visited link */
a.ex1:hover {
color:#D85D27;
text-decoration:none
} /* mouse over link */
a.ex1:active {
color:#D85D27;
text-decoration:none
} /* selected link */.header1 { position:fixed; top: 0px;
width: 100%; height:50px;
background-color: rgba(0, 54, 103, 0.6); /* Color white with alpha 0.9*/
}
.header2 { position:fixed; top:60px;
width: 100%; height:80px;
background-color: rgba(210, 6, 46, 0.4); /* Color white with alpha 0.9*/
}
.logo {position:fixed; top: 5px;
z-index:10; width:100%;
}
I can always include more of both the HTML and CSS if needed...Help!! How do i fix this?
The table containing your center logo is overlaying the links, so when you think you're clicking on the links, you're actually clicking on the table - preventing the links from being accessed. Make the logo container the same size as the logo and you should be fine.
I'm in the early stages of building a mobile version of our website, and I'm already having an issue with a div tag & background not centering. The stylesheet code is as follows:
<!DOCTYPE html>
<html><head>
<style type="text/css">
BODY{margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px; background-color:#fff;FONT-SIZE:12px;COLOR:#000000;FONT-FAMILY:Arial, Helvetica, sans-serif;}
header {
display:block;text-align:center;width:100%;height:6.5em;
}
.topHeader {display:block; width:100%; height:5.4em;}
#acdlogo {
float:left;text-align:left; overflow:hidden; display:inline;
}
#acdHeadLinks {
float:right;text-align:right;margin-top:5px;
}
.clearAll { clear:both; font-size:0; padding:0; margin:0; }
.search-bg {
text-align:center;width:85%;background-color:#265e99;
height:45px;z-index:1000; border-radius:5px; -webkit-border-radius:5px;
}
</style>
</head>
Here is the code that appears after the stylesheet code:
<body>
<div>
<header>
<div class="topHeader" align="center">
<div id="acdlogo">
<img src="images/logo.gif" border="0" alt="Alt Text">
</div>
<div id="acdHeadLinks">
<img src="images/mcontact.png" border="0"><br>
Directions My Account My Cart
</div>
</div>
<div align="center" class="search-bg" id="searchgcs">
hello world
</div>
</header>
</div>
</body></html>
The problem is that the blue background is supposed to hold the search engine form, but it's aligning left not center, and I don't know what I need to do to center it. I'm trying real hard not to have to use tables. Anybody can help me figure this out? Thanks!
UPDATE: Alright I have a new error. I'm trying to center an image using div tags and I'm not getting anywhere, even with the answer below. I've even stripped down the code to only attempt to center the image and no go. The image is always aligned left inside the div tag and I want it centered. Here is my code:
<!DOCTYPE html>
<html><head><title></title>
<style type="text/css">
#mainImage {
width:300px;
margin:0 auto;
padding:0;
}
img.curMainImage {
max-height:240px;
max-width:240px;
}
</style>
</head>
<body>
<div id="mainImage"><img class="curMainImage" src="Image Here" border="0" /></div>
</body>
</html>
Anybody can help?
add margin: 0 auto; to your .search-bg - http://jsfiddle.net/7djxY/1/
.search-bg {
text-align:center;
width:85%;
margin: 0 auto;
background-color:#265e99;
height:45px;
z-index:1000;
border-radius:5px;
-webkit-border-radius:5px;
}
Update: the margin: 0 auto; is used to set the top and bottom margins to 0, and the left-right margins to auto. In that case the browser will automatically detect the available side margin space and distribute it equally to the left and right. And with the same margins both sides the element becomes centered.