Space between content and logo

Playing with fluid layouts and getting a space between logo and content DIV's
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Playing with Liquid Layouts</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
          <div id="logo">
              <h1>Welcome to Liquid Layouts</h1>
              <h2 class="logo">Place your slogan here...</h2>
          </div>
          <div id="navigation">
    <ul>
              <li>Home</li>
        <li>Page 1</li>
        <li>Page 2</li>
        <li>Page 3</li>
        <li>Page 4</li>
        <li>Page 5</li>
    </ul>
    </div>
    <div id="content">
    <h1>Adding this element creates a space between logo and content...</h1>
    </div>
          <div id="footer">
    </div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body
          text-align: center;
div#container
          margin-left: auto;
          margin-right: auto;
          min-width: 600px;
          max-width: 2000px;
          text-align: left;
          width: 85%;
div#logo h1, h3
          padding-left: 20px;
          margin-bottom: 0;
div#logo h2
          padding-left: 35px;
          margin-top: 0;
          font-size: 125%;
div#logo
          background-color: #F00;
          width: 100%;
          height: 300px;
div#navigation
          background-color: #0F0;
          width: 25%;
          height: 600px;
          float: left;
div#navigation ul
          padding-left: 25%;
          font-size: 150%;
          list-style-type: square;
div#content
          background-color: #C93;
          width: 100%;
          height: 600px;
          margin-top: 0px;
div#footer
          background-color: #69F;
          height: 30px;;
.footerP
          margin-top: 0px;
          padding-left: 2%;
          line-height: 35px;;
PICTURE:
[IMG]http://i.imgur.com/1nGUG.jpg[/IMG]

The space is caused by the default margin in your H1 tag. As such, you need to define a style for H1:
h1{
margin-top:0;
padding: ??;
You can add padding to move the H1 away from the edges of the surrounding DIV.
EDIT:// An after thought. If you are "Playing with fluid layouts", you might want to consider not using heights and/or set the heights/widths in % values.

Similar Messages

How do I clear the blank space between content and footer?

In the process of revising a Muse website, I deleted some content from one of the pages and revised the content that remained on the page. Now I have a blank area between the bottom of the revised content and the top of the footer, and I can't seem to get rid of the blank space. It doesn't appear that there are any text blocks or other images in that area, so I can't find any objects to delete. Help?
The website is currently published in a draft mode for client review. You can examine it at: http://page7creative.com/clients/coremove_jun2012draft/retreats.html. The page in question is the Retreats page. Restarting Muse made no difference. I work on the Mac platform.
Before I sent this post, I decided to try creating a new page, then copy/paste the content onto the new page, and save the Muse site under a different name. Lo and behold, the page (and the site) works like it should...without any extra space above the footer on that page. It would appear that something went astray when I deleted content on that page. I can use the new page to get the site working properly, but decided to go ahead and send this post so that you can look at the page code and perhaps see what is wrong that is causing the blank space...in case I ever run into this again.
Thank you.
pyxis83

Thanks for sending your file.
There is a graphic at the bottom of the content area of the Retreats page that's been cropped to a size of zero width and 2 pixels in width.
Unfortunately, there's a bug with pointer tool drag selection (aka marque selection) that prevents it from selecting an item that has zero width or zero height. Therefore the easiest way to select this item to delete it is to select any other item on the page, then hit the tab key repeatedly to cycle through every item on the page. When you get to this item you should see a little pile of selection handles at the left edge of the third column and right at the bottom of the content area. The width and height will display as zero and 2. Delete this item and the page will resize to fit the remaining content.

Keeping a Consitent Gap between Content and Footer.

Hi !
I spent a couple of days trying to solve how to regulate the space between body and footer on a MUSE-project. I think it‘s worth dropping a few line for humankind.
We’re on a master-page. Let’s say our standard page has the following properties:
The Footer-marker is set to y: 500 px
The Bottom_of_Page-marker is set to y: 650 px
The Bottom_of_Browser-marker is set to y: 680 px
These settings mean, you have 150 px height-space for the Footer, starting from y: 500 px.
If you require more space for the Footer, it’s the Bottom_of_Page-marker you’ll have to drag down ( not the Footer-marker ! ).
If you’d like to add a gap, so your Footer is not directly sticking to the Content of the page anymore, but you’d rather like to preserve some space between both, you’ll have to drag down only your Footer-elements a little bit, e. g. down to y: 520 px. So, in a way, the 20 px gap created is part of the Footer. No changes must occur to the Footer-marker, at least for this reason. You’ll only eventually drag the Bottom_of_Page-marker down, in case Gap-height + Footer-height require more space than already available (depending on your figures).
Cheers
G

Sanjit, I didn't make any changes to the master at all. It was fine online, then I opened it to make a small type change and it was like this, and I can't get it back to where it was.
I tried adjusting the footer, but the slideshow is not on the home master page, just the bottom brown part and the type in it.
I don't know what could have caused it to change from before to now? I haven't touched the file in months.

How to maintain space between value and base unit of measure in sapscript

Hi Guys,
I am working on an upgradtion project, i have problem like while upgrading from 4.6b to 5.0. i need to main a space between value and base unit of measure. can anyone letme know how to maintain in the form. I mean in sapscript.
Thanks,
Yogesh

There are a couple of ways to handle this, if you need a bigger space between, you can use tabs in the paragraph format. Or you can just write the space in between the fields like so.
ZA &MSEG-MENGE& &MSEG-MEINS&
Regards,
RIch Heilman

How to maintain space between table and header in ssrs

Hi Everyone,
I have created a report. In page header of this report, On First Page space between header and
body is good , but from next page, space is not maintain.
Please suggest me how to maintain space at every page of report.
Thanks.

Can you post a screenshot?
This can be achieved if you are repeating column headers on each page. Just change row height of header and align text to bottom, and make sure there is no space between Page Header and Tablix.
- Vishal
SqlAndMe.com

The Correct Space Between You And Your Monitors

Something that always crossed my mind was the space between your monitors and where you are seated. How far exactly are you supposed to be positioned from your speakers in order to read and hear correctly. Most producers would comment that people produce in all types of environments, headphone close rang monitors, far range monitors. But what exactly is the ideal space between you and your speakers? To look into this issued even more closely each speaker is designed differently, there for you cannot look at them all equal as far as performance is concerned.
How far are you away from your speakers?

dude it depends what you want
I got mine at about 1-meter to 1.5-meters at my home studio
at the big studio i've got two pairs of monitors in there and they both 1.5 meters
other people will go as far as 3-meters, in your case get abit closer as you said before that your room is not acoustically treated there for sitting too far away will give you a mix of 50% of the speakers and 50% of the room
but you need 80% of the speakers and 20% of the room
ps: don't just leave this topic alone and start another one, because its annoying when people don't if you've been help or not and they keep trying to help you
and people also don't know if you are reading your post or your just using it as an amusement forum just for fun on your lunch breaks
so please reply back and let people know if they've helped
stash

Need to remove the space between Menu and the Inner screen

Hi
I am using forms 10G.
In my screen there is some space is coming in between menu and the inner screen and also same in the left side as well .
So can any one tell me which parameter I need to change so that the inner screen should display just below to the menu and same for the left side as well ?

Hi
Yes , If I change that then it is woring fine .
But my question is :- I have 10 forms in server , and in 2 forms I have changed some functionalty then I have FTP it to server .
Now all the forms are coming with some spaces between menu and inner screen . This is what I am little confused .

Diff between content and application proposal

Hi
When i am assigning infosource to my standard datasource we have three options content,application proposal,others i know that for generic we use others but for standard business content we have content & application proposal options i think when we enhance the datasource we go for application proposal or if i am wrong plz correct me for standard datasources with no enhancement is it ok to go for content option plz confirm.
Regards,
Nikhil.

Hi Pradip,
Thanks for your reply but suprisingly i got an option while assigning for few datasources in SD where i had an option to choose between content and application proposal i had this doubt at this point of time as the system gave me two options and i had to choose b/w content and application propasal offcourse others option was greyed out i choose content option while assigning the infosource is that ok or i had to go with application proposal plz clarify.
Regards,
Nikhil.
Message was edited by: nikhil sharma

White space between header and main content

Hello all! I have a 25-27px white space between my header and
main content. I read through fixes in the forum and took out any
height that would effect this gap. I still can't get rid of this
white space. Your help is greatly appreciated! Here's the Code:
<!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>
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<link href="p7hscroller/s7/p7HSM07.css" rel="stylesheet"
type="text/css" media="all" />
<script type="text/javascript"
src="p7hscroller/p7hsmscripts.js"></script>
<style type="text/css">

</style>

<script type="text/javascript"
src="slideshow.js"></script>
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<pre><span
class="style4">US-AsianMates</span><span
class="style6">.com</span> <strong><span
class="style9">JOIN FOR FREE <span
class="style7">OR</span> MEMBER LOG
IN</span></strong>
</pre>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><a href="#"
class="style16">HOME</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">ABOUT US</a></div>
</li>
<li>
<div align="center"><a href="#"
class="style16">WHY JOIN US?</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">VISA SUPPORT</a></div>
</li>
<li>
<div align="center" class="style16"><a
href="#">EVENTS</a></div>
</li>
</ul>
<pre>
</pre>
</div>
<div id="mainContent">
<div id="apDiv1"><img
src="Images/Outdoor_Bride1.jpg" alt="Bride" name="Bride"
width="525" id="Bride" /></div>
<p> </p>
<p><br>
</p>
<pre>
</pre>
<table width="200" border="1" align="left">
<tr>
<td><img src="Romantic_Kiss.jpg" alt="VISA"
name="VISASUPPORT" width="200" id="VISASUPPORT" /></td>
</tr>
<tr>
<td><img src="Surfing_At_Home.jpg" alt="JOIN"
name="WHYJOIN" width="200" id="WHYJOIN" /></td>
</tr>
</table>
<pre></pre>
<div id="apDiv3">
<div align="center">
<div align="left">
<pre class="style14"> <strong>LIVING
PROOF</strong>
<span class="style15">"12 YEARS AGO I WENT TO
THE PHILIPPINES IN HOPES
OF FINDING MY FUTURE WIFE. 11 YEARS LATER,
I AM HAPPILY MARRIED! WE ALSO HAVE AN ENERGETIC
5 YEAR OLD SON! DREAM IT, LIVE IT! IT CAN
HAPPEN TO YOU ON US-ASIANMATES.COM
CHRIS"</span></pre>
</div>
</div>
</div>
<pre> </span>
</pre></pre>
<p>
<br>
<pre>
</pre>
<div id="apDiv7"></div>
<div align="center">
<pre>
<script type="text/javascript">
// <![CDATA[
XMLFlashSlideshow_v3({swf:'slideshow.swf',w:'580',h:'140',redirect:'',usePreloader:'true', xml:'slideshow_data0.xml',preventCache:'true',disableMultipleXML:'false',initXML:'%3C?xml% 20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Cslideshow%20version=%223%22%3E%3Cstyles%3 E%3CPreloader%20label=%22Loading%20%7BN%7D%2525%22%20iconColor=%22#666666%22%20iconAlpha=% 2270%22%20iconWidth=%2250%22%3E%3C/Preloader%3E%3CPreloaderLabel%20font=%22Verdana%22%20si ze=%2210%22%20color=%22#666666%22%20bold=%22false%22%3E%3C/PreloaderLabel%3E%3CBackground% 20backgroundColor=%22#FFFFFF%22%20backgroundAlpha=%22100%22%20bevelColor=%22#FFFFFF%22%20b evelStrength=%2270%22%20borderWidth=%222%22%20borderColor=%22#000000%22%3E%3C/Background%3 E%3CLoaderAnimation%20type=%22circle%22%20color=%22#FFFFFF%22%20alphaBackground=%2220%22%2 0alphaInner=%2240%22%20frameWidth=%222%22%20width=%2250%22%20height=%2250%22%3E%3C/LoaderA nimation%3E%3CDataLoader%20useAnimation=%22true%22%20useLabel=%22true%22%20labelPlacement= %22bottom%22%20fadeOutDuration=%22400%22%20textFormat=%22loader_text%22%3E%3C/DataLoader%3 E%3C/styles%3E%3Clocalization%3E%3Ctext%20orig=%22Loading%20Data...%22%20local=%22Loading% 20Data...%22%3E%3C/text%3E%3C/localization%3E%3Cfonts%3E%3Cfont%20id=%22loader_text%22%20n ame=%22Pixelade%22%20embed=%22true%22%20size=%2213%22%20color=%22#666666%22%20bold=%22fals e%22%20selectable=%22false%22%20align=%22left%22%3E%3C/font%3E%3C/fonts%3E%3C/slideshow%3E '});
// ]]>
</script>

</pre>
</div>
<pre>
</pre>
<pre> </pre>
<pre> </pre>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

"phillychris" <[email protected]> wrote in
message
news:[email protected]...
> Yep, it was the 1 pre tag creating the gap. So why is
this page a
> disaster, Tim?
Just because something is created in DW CS3 doesn't mean it's
not a
disaster, any more than using DeWalt power tools guarantees
that my
carpentry won't be a complete mess. The software is not a
replacement for
skills. It is a tool; your workflow and understanding of HTML
and CSS is
what allows you to use DW effectively.
So why did I call this page a disaster? When I see all that
extra markup,
spans, and inline tags, I shudder. It's way too hard to
troubleshoot. You're
not doing nearly enough with descendant selectors; instead,
most of your
code is inline, despite a huge CSS file.
Just one example: individual li tags with div align="center"
inside of them.
Way overkill. If you're centering all the li text in a given
list, control
it with CSS and kill all that extra markup.
E.g.
.MenuBarHorizontal li { text-align:center; }
In fact, if all there is in that .MenuBarHorizontal is the
list, you don't
even need to specify the list in the CSS. Just do:
.MenuBarHorizontal { text-align:center; }
Now you don't need div tags inside your li at all.
And if all of those a tags in that menu are going to be
.style16 class,
don't specify it on each link. In fact, don't even have a
.style 16 class.
Heck, since it's just specifying font size, you don't need to
target the a
tag at all. Just add font-size:x-small; to the
.MenuBarHorizontal ruleset I
gave you above.
The above are just examples from a quick glance at your code.
On the whole,
your markup and approach to styles are largely wasting the
power and point
of CSS.
In addition, several styles spanned onto one line of text...
a sure sign
that either you are using far too many styles to make design
sense, or else
you've got styles that overlap each other.
Here's my advice: Until you get a better handle on CSS, don't
style things
as you go. Forget styles altogether at the start. Create a
very clean HTML
markup and put ID and class selectors on things you know will
need them.
Preferably, place the HTML elements in the order you would
want your page
read if styling did not even exist, nesting elements where
necessary.
After you have created all the HTML structure, then go back
and style the
elements via CSS only. You will end up with less page weight
and far cleaner
code to decipher, not simply in terms of length but in terms
of conflicts
and redundancies.
If you're really insistent on styling things as you go, at
least do this:
don't create a new style every time you want to accomplish
something. Create
CSS rules for IDed containers and container classes. Then as
you go along
and are about to create a style, ask yourself where you are
and what all
this new rule needs to apply to. Specify the rule there,
under the selector
you've already created. Then you won't have .style1 -
.style16 like you do
now, and you won't have all that inline mess of code to sort
through.
Finally - as you create your CSS, discipline yourself to
avoid style spans.
They are necessary on the odd occasion, but very rarely.
Think semantically
(i.e. purpose of the style point you're making at a given
time).
For example, if you're tempted to create a span in order to
put something in
bold red, ask yourself: "Why?" Generally, it means you want
to place special
emphasis or strength on that. Well, in that case you don't
need a span. You
need to be using the proper tag, such as <em>
(emphasis) or <strong>. Then
you can style that tag in CSS. That way, what you have in
your page actually
makes sense apart from the style, and as a bonus you can
apply or edit your
style easily.
Tim G.
http://www.pactumweb.com
http://www.shortordersite.com
Be smart:
http://www.pactumweb.com/client/tips.php

White space issues between content and footer.

I am having white space/page length issue between the end of my content and the footer.
I have read the forums and tried changing the page length minium height to 800 and then I
unchecked the sticky footer in page properties on both the master page and the content page itself.
Here's a link to one of my pages. http://www.ueonline.com/rohs-info.html
This page has very little content and you can see the white space.
Any help is appreciated.

This may be a little dated for a reply, and I'm not 100% sure your issue is the same as mine, but I discovered that unchecking the sticky footer option in site properties solved the problem. I should note that the website I was building for a client was über simple, and while disabling that function solved the headache in my own project, it may incur unwanted results in others, depending on the complexity.
DTA

Space between footer and content

Hello,
I have made a website, but at the bottom of the page there is a space between my content and my footer.
I know more people have this problem and I saw multiple posts about this, but I have not found a solution yet.
My website is devided in multiple 'parts'.
The first part is a big image that is fixed and pinned to the top.
The others parts are rectangles with a background color and content that will go over the first part.
As I said before, at the end of my page, the footer will stick to the bottom like it should, but there is a gap between the footer and the last 'part'.
In the gap you can see a part of the big image where the website starts with (because it is pinned and will stay behind the other layers) and the browser fill (white).
If I uncheck the sticky footer, the footer will go up and stick to the content, but the gap moves to the bottom, so you see the browser fill below my footer.
You can view my website at emilelampe2.net16.net
I hope someone can help me.
Thanks,
Emile

I have changed the header and top page position, now it's the following:
the header guide is at the top of everyting (like a top browser guide), my top page comes after the big image on the border between the big image and the first rectangle, my footer and bottom page guides are on the same place, at the end of the last rectangle on the border between the footer and the last rectangle and my bottom browser guide is at the very bottom of everyting.
What now occurs is that when i scroll down, when the last rectangle is just out of side (so it's 'above' the browser screen) my footer is totally out of side, which makes you see the big images (it was pinned to the top) with the browser fill.
When you scroll down more the footer appears.
My footer part (also a rectangle, but same effect if I delete the rectangle) and footer text are boother checked as 'Footer'.
The arrows are pointing at the two things that are off the screen.
EDIT:
When I unchecked 'Footer' with the foother rectangle and footer text, the rectangle sticked to the last context rectangle and went also up with the last rectangle. The page stopped scrolling when all the rectangles (including the not-footer-anymore footer) disappeared from the screen.
A page like the image above was left, except the footer was above the screen in stead of under it. So it seems like my website stops scrolling when all the 'context' is out of the screen?!

Phtmlb: space between Label and Field

Hello,
I am using <phtmlb:matrix> to arrange the fields next to one another on the view. For fields, <phtmlb:formLayoutInputField> is used in which case the label is taken automatically through binding to DDIC fields. At one particular row of matrix, it is required to break-up the cell in 3 more cells, so that I can display 3 fields adjacent to one another in the space of one cell. For this I am nesting one more matrix inside the outer matrix.
Something like this...
<phtmlb:matrix>
<phtmlb:matrixCell row = "1"
col = "1" />
<phtmlb:formLayout>
<phtmlb:formLayoutInputField>
</phtmlb:formLayout>
<phtmlb:matrixCell row = "2"
col = "1" />
<phtmlb:matrix>
<phtmlb:formLayout>
...3 fields next to one another / 3 cells
</phtmlb:formLayout>
</phtmlb:matrix>
</phtmlb:matrix>
I am able to acheive the desired output of 3 fields next to one another, but facing the following problem.
To get the inner matrix(3 fields) into effect, i need to close the <phtmlb:formLayout>.
Now, the first row properly shows all the filds one below the other with proper spacing between the label and input output field.
(Actually all the input_output fileds are placed at a distance of largest text/label in one formlayout).
But when the second row starts, the spacing between label and field is no longer taken as per the first row in above case.
Is it because since a new <phtmlb:fomlayout> is started , the spacing will be as per the elements in this new formlyout. If yes, How can I assure the same spacing between elements of two different formlayouts. I tried "fieldToLabelFactor" but since no. of fields in my page is too large, I can't afford to decide this factor for every <phtmlb:formLayout>.
Or is there any better way to acheive the required output.
Thanks ,
Priti

did u get the solution?

How to introduce Space between currencyCode and number using convertNumber in adf

Hi,
We are trying to use the af:convertNumber tag inside the af:outputText to apply the currency code in front of the number.
We would like to introduce a space between currency code and number by using the currency converter.
Sample code snippet is as below.
Eg.
<af:outputText value="#{pageFlowScope.myManagedBean.annualSalary}" id="aot8">
<af:convertNumber type="currency" currencyCode="USD"/>
</af:outputText>
Output shown from the above code is as: USD11,234.00
but we want to display as : USD 11,234.00(space after USD)
Please suggest us as what we can use to achieve the above requirements.
we are using jdev version 11.1.1.5.0 on windows 7 OS.
Thanks,
Shivaji

Timo,
if we use value="USD #{pageFlowScope.myManagedBean.annualSalary}", other default formats for the number will not work, it will treat as a string, even if we pass the number/bigdecimal type to the outputtext.
And if we write two separate output texts that will be bad way, to achieve this, as we have many fields to apply the same in our application.
Looking for better options on this.
Thanks,

Labview XY graph with space between data and top/bottom of graph

In Labview, how do I modify the properties of the XY Graph so that there is some empty space (of say 1 unit) between the top and bottom of my graph and the data points I'm plotting. For example, I have a sine wave and when its autoscaled, the top point is at the very top of the graph but I want some space between the top of the graph and the highest point of the sine wave. I could "unautoscale it" and edit the minimum and maximum to be 1 above and below the data points but is there a way to set it so it stays that way regardless of the data points that I input?
Thanks,
Kevin

elset191 wrote:
I don't know how big of a cushion it gives, but it's there.
if you want to programmatically set it you can also do this (as I learned a bit ago right here on these forums!)
Message Edited by for(imstuck) on 05-24-2010 03:45 PM
Message Edited by for(imstuck) on 05-24-2010 03:46 PM
CLA, LabVIEW Versions 2010-2013
Attachments:
graphScale.PNG ‏9 KB

Published site has huge gap between content and footer

So i have just published my site and when i look at it after being published i have a good 2 inch gap between the bottom of the content and the footer.
I have read up on a number of bits and pieces and they say you mauy have a hidden container on the pages, which i totally accepted so i searched and nothing. I then thought it might be a issue with the master page i was using, so checked that. Couldnt see it.
However when i looked through my site and saw the master pages i used i had a mix and some worked and some didnt. Im lost!!!
I launch on Sat and its a bit of a pain. Has anyone had this issue? The preivew looks fine, so im not sure where this gap is coming from.
Thanks in advance!

When Sticky Footer is checked, the footer will stick to the bottom of the browser window unless the page is taller than the browser window.
Glad that I could be of help.
Regards,
Sachin

Space between content and logo

Similar Messages

Maybe you are looking for