Hello, basically, I'm just learning intermediate CSS and trying to convert
my old table webpage completely to CSS. Hoorah, right? Well, it's not quite
going as planned. It's an extremely simple layout, and I'm finding myself
stuck with small white space in between my images where I planned for the
graphics to be stacked up right on top of one another.
Here's the simple vertical layout: width is 640px, centered with a CSS
border. I'd basically like absolutely no space in between all these
elements.
[logo image (about 300px), centered]
[navbar top image, centered, 7px high] - a horizontal navbar
[navbar link images, 3 of 'em with 2 separator images between, all centered,
45px high]
[navbar bottom bar image, centered, 7px high, identical to top image]
[content, right under that with no space]
[footer]
My main problem is that there's a few seemingly random px worth of white
space in between my navbar lines, each in their own <div>. Even when I
specify a margin: 0; padding: 0; for my images or the <div>, there's still
that space and they are not stacking vertically without the space.
What is a simple way to stack these images on top of one another without
absolute positioning? I'm just learning about absolute and relative
positioning btw.
Thanks 5 12327
Applebrown wrote in
<YRQuc.636673$Ig.371568@pd7tw2no> Hello, basically, I'm just learning intermediate CSS and trying to convert my old table webpage completely to CSS. Hoorah, right? Well, it's not quite going as planned. It's an extremely simple layout, and I'm finding myself stuck with small white space in between my images where I planned for the graphics to be stacked up right on top of one another.
Here's the simple vertical layout: width is 640px, centered with a CSS border. I'd basically like absolutely no space in between all these elements.
[logo image (about 300px), centered] [navbar top image, centered, 7px high] - a horizontal navbar [navbar link images, 3 of 'em with 2 separator images between, all centered, 45px high] [navbar bottom bar image, centered, 7px high, identical to top image] [content, right under that with no space] [footer]
My main problem is that there's a few seemingly random px worth of white space in between my navbar lines, each in their own <div>. Even when I specify a margin: 0; padding: 0; for my images or the <div>, there's still that space and they are not stacking vertically without the space.
What is a simple way to stack these images on top of one another without absolute positioning? I'm just learning about absolute and relative positioning btw.
It's easier with a URL but have you tried removing any line breaks between
images? The break is interpreted as a space by the browser.
<img...><img...> - no white space
<img...>
<img...> - produces a line of white space between the images.
--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.
Thanks for the response.
I found out later by searching a CSS forum that IE has a default line-height
of 16px. Therefore, each of my 7px high navbars had 9px extra of white
space. When I added:
line-height: 1px;
font-size: 1px;
to the navbar rules, they all matched up perfectly. That's something that I
probably wouldn't have guessed easily...
"PeterMcC" <pe***@mccourt.org.uk> wrote in message
news:40bc4000$0$27217$ed2619ec@ptn-nntp- It's easier with a URL but have you tried removing any line breaks between images? The break is interpreted as a space by the browser.
<img...><img...> - no white space
<img...> <img...> - produces a line of white space between the images.
-- PeterMcC If you feel that any of the above is incorrect, inappropriate or offensive in any way, please ignore it and accept my apologies.
"Applebrown" <ap********@gamebanshee.takethis.andthisout.com> wrote: Thanks for the response.
Not top posting would be the best way to thank the regulars. ;-)
I found out later by searching a CSS forum that IE has a default line-height of 16px.
No it doesn't. IE has a factory default font-size of 16px, the
line-height will be somewhat larger than that (about 18 or 19px).
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
"Steve Pugh" <st***@pugh.net> wrote in message
news:4d********************************@4ax.com... "Applebrown" <ap********@gamebanshee.takethis.andthisout.com> wrote:
Thanks for the response. Not top posting would be the best way to thank the regulars. ;-)
Deal. I found out later by searching a CSS forum that IE has a default
line-heightof 16px.
No it doesn't. IE has a factory default font-size of 16px, the line-height will be somewhat larger than that (about 18 or 19px). Steve -- "My theories appal you, my heresies outrage you, I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
"Applebrown" <ap********@gamebanshee.takethis.andthisout.com> wrote: Not top posting would be the best way to thank the regulars. ;-)
Deal.
Trimming quotes is an essential part of bottom posting.
--
Spartanicus This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Stephen Poley |
last post by:
People in these groups, and on web-pages, not infrequently suggest that
it is worthwhile cutting down on white-space and comments in HTML and
CSS in order to reduce loading times. I and others have...
|
by: Markus Ernst |
last post by:
Hi
I have a strange problem with vertical-align. The case can be viewed at
http://www.brainput.info/geschichte.html.
HTML code:
<div id="bild"><img src="geschichte.gif" width="274"...
|
by: Uncle Pirate |
last post by:
This has me stumped. I am trying to use as little space as possible at
the top of my document but Firefox/Mozilla insists on placing vertical
space before any element. IE displays it correctly...
|
by: Harlan Messinger |
last post by:
What rules deal with attribute values with trailing spaces, or tags or
attribute values with embedded newlines? Examples below: the HREF with
embedded newline, the SRC with trailing spaces, and IMG...
|
by: Nathan Sokalski |
last post by:
I have two asp:ImageMaps in a table cell as follows:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr valign="top">
<td align="center">
<asp:ImageMap ID="mapBanner"...
|
by: dave8421 |
last post by:
Hi,
I have a (strict) html document with the following portion:
<ul>
<li><img alt="" src="images/image1.jpg" /></li>
<li><img alt="" src="images/image2.jpg" /></li>
<li><img alt=""...
|
by: lolo |
last post by:
hello. happy new year.
I'm trying to build a website for my wife and she is adament on having
a horizontal thumbnail scrolling div. great. I have a good vertical
scrolling thing, but can't...
|
by: joeriatscripts |
last post by:
The example: Example. And the code again down this post.
There is a vertical gap (assumable 3px) between the MENU & CONTENT and MENU & HEADER. The layout shows perfectly in IE7 / FF2 etc. Just IE6...
|
by: FairyLucy |
last post by:
Hello web experts, a question form a lonely beginner in HTML and CSS crying out for help!!,
I am trying to stack 5 images of the same dimensions next to each other horizontally as the top bar of...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |