Hello,
I am trying to create a header with a background color and a padding
of the text.
I know that if I apply the background color to the header it will
expand 100%.
So I did the following:
<h1><span>Heade r</span></h1>
h1 {}
h1 span {
background-color: #252525;
color: #D2D2D2;
font: normal 1.2em/1.8 Verdana, Geneva, sans-serif;
letter-spacing: 0.1em;
padding: 0.8em;
}
But now I am not able to apply the top and bottom border.
How should I created this header?
Thanks,
Miguel
11  2767 
"shapper" <md*****@gmail. comwrote in message
news:7e******** *************** ***********@a1g 2000hsb.googleg roups.com...
Hello,
I am trying to create a header with a background color and a padding
of the text.
I know that if I apply the background color to the header it will
expand 100%.
So I did the following:
<h1><span>Heade r</span></h1>
h1 {}
h1 span {
background-color: #252525;
color: #D2D2D2;
font: normal 1.2em/1.8 Verdana, Geneva, sans-serif;
letter-spacing: 0.1em;
padding: 0.8em;
}
But now I am not able to apply the top and bottom border.
How should I created this header?
What do you mean?
I was able to apply a top and bottom border just fine, using exactly your
code:: http://nrkn.com/headerBackground/
On May 20, 1:40 am, "Nik Coughlin" <nrkn....@gmail .comwrote:
"shapper" <mdmo...@gmail. comwrote in message
news:7e******** *************** ***********@a1g 2000hsb.googleg roups.com...
Hello,
I am trying to create a header with a background color and a padding
of the text.
I know that if I apply the background color to the header it will
expand 100%.
So I did the following:
<h1><span>Heade r</span></h1>
h1 {}
h1 span {
background-color: #252525;
color: #D2D2D2;
font: normal 1.2em/1.8 Verdana, Geneva, sans-serif;
letter-spacing: 0.1em;
padding: 0.8em;
}
But now I am not able to apply the top and bottom border.
How should I created this header?
What do you mean?
I was able to apply a top and bottom border just fine, using exactly your
code::
http://nrkn.com/headerBackground/
Sorry, not border. Top and Bottom padding.
In article
<7e************ *************** *******@a1g2000 hsb.googlegroup s.com>,
shapper <md*****@gmail. comwrote:
I know that if I apply the background color to the header it will
expand 100%.
How do you know things that look false?
--
dorayme
"shapper" <md*****@gmail. comwrote in message
news:3f******** *************** ***********@34g 2000hsf.googleg roups.com...
On May 20, 1:40 am, "Nik Coughlin" <nrkn....@gmail .comwrote:
>"shapper" <mdmo...@gmail. comwrote in message
news:7e******* *************** ************@a1 g2000hsb.google groups.com...
Hello,
I am trying to create a header with a background color and a padding
of the text.
I know that if I apply the background color to the header it will
expand 100%.
So I did the following:
<h1><span>Heade r</span></h1>
h1 {}
h1 span {
background-color: #252525;
color: #D2D2D2;
font: normal 1.2em/1.8 Verdana, Geneva, sans-serif;
letter-spacing: 0.1em;
padding: 0.8em;
}
But now I am not able to apply the top and bottom border.
How should I created this header?
What do you mean?
I was able to apply a top and bottom border just fine, using exactly your
code::
http://nrkn.com/headerBackground/
Sorry, not border. Top and Bottom padding.
Top and bottom padding work fine. See the following example, where I've
removed top and bottom padding from the second h1: http://nrkn.com/headerBackground/
On 2008-05-20, shapper <md*****@gmail. comwrote:
Hello,
I am trying to create a header with a background color and a padding
of the text.
I know that if I apply the background color to the header it will
expand 100%.
It will take all of the available width, since auto width is "greedy"
for normal-flow block boxes.
So I did the following:
<h1><span>Head er</span></h1>
h1 {}
h1 span {
background-color: #252525;
color: #D2D2D2;
font: normal 1.2em/1.8 Verdana, Geneva, sans-serif;
letter-spacing: 0.1em;
padding: 0.8em;
}
But now I am not able to apply the top and bottom border.
How should I created this header?
Are you talking about the way the span's padding and border overflow the
<h1>'s box?
I would advise don't decorate inline boxes in this way. Background
colours are OK, but as I tried to explained previously, top and bottom
borders and padding on inline boxes are ephemera without substance that
are visible but have no ability to move anything else on the page out of
their way.
(Inline box top and bottom margins are even worse: they are invisible
ephemera without substance.)
Better decorate the <h1itself but give it shrink-to-fit width, which
you can do by floating it left or making it display: table (the latter
won't work in IE).
Or you could stick to inline box decoration but give the <h1enough
padding to make room for it, but this involves guesswork.
On May 20, 8:16 am, Ben C <spams...@spam. eggswrote:
On 2008-05-20, shapper <mdmo...@gmail. comwrote:
Hello,
I am trying to create a header with a background color and a padding
of the text.
I know that if I apply the background color to the header it will
expand 100%.
It will take all of the available width, since auto width is "greedy"
for normal-flow block boxes.
So I did the following:
<h1><span>Heade r</span></h1>
h1 {}
h1 span {
background-color: #252525;
color: #D2D2D2;
font: normal 1.2em/1.8 Verdana, Geneva, sans-serif;
letter-spacing: 0.1em;
padding: 0.8em;
}
But now I am not able to apply the top and bottom border.
How should I created this header?
Are you talking about the way the span's padding and border overflow the
<h1>'s box?
I would advise don't decorate inline boxes in this way. Background
colours are OK, but as I tried to explained previously, top and bottom
borders and padding on inline boxes are ephemera without substance that
are visible but have no ability to move anything else on the page out of
their way.
(Inline box top and bottom margins are even worse: they are invisible
ephemera without substance.)
Better decorate the <h1itself but give it shrink-to-fit width, which
you can do by floating it left or making it display: table (the latter
won't work in IE).
Or you could stick to inline box decoration but give the <h1enough
padding to make room for it, but this involves guesswork.
Hi,
Sorry, for the delay of my answer. I had problems with my ISP for the
past hours.
Ben, if I use float I will need to clear the float after it the header
tag?
I am using the guessing method in this method using pixels as measure
and not em.
It work with the list items I was working on ...
About display: table I have done it a few hours ago and it worked ...
but I was told this is not a good option sometime ago.
I am not sure if I can do this ...
I will upload some of my experiences later today ...
Thank You,
Miguel
On 2008-05-20, shapper <md*****@gmail. comwrote:
On May 20, 8:16 am, Ben C <spams...@spam. eggswrote:
>On 2008-05-20, shapper <mdmo...@gmail. comwrote:
Hello,
I am trying to create a header with a background color and a padding
of the text.
I know that if I apply the background color to the header it will
expand 100%.
It will take all of the available width, since auto width is "greedy"
for normal-flow block boxes.
[...]
>>
Are you talking about the way the span's padding and border overflow the
<h1>'s box?
I would advise don't decorate inline boxes in this way. Background
colours are OK, but as I tried to explained previously, top and bottom
borders and padding on inline boxes are ephemera without substance that
are visible but have no ability to move anything else on the page out of
their way.
(Inline box top and bottom margins are even worse: they are invisible
ephemera without substance.)
Better decorate the <h1itself but give it shrink-to-fit width, which
you can do by floating it left or making it display: table (the latter
won't work in IE).
Or you could stick to inline box decoration but give the <h1enough
padding to make room for it, but this involves guesswork.
Hi,
Sorry, for the delay of my answer. I had problems with my ISP for the
past hours.
Ben, if I use float I will need to clear the float after it the header
tag?
Yes.
I am using the guessing method in this method using pixels as measure
and not em. It work with the list items I was working on ...
At least guess with em-- then it should be fairly close. The inline box
usually runs vertically from the font's max ascent to its max descent,
which is about 1em.
But it all depends on what the particular font designer thought "1em"
and "max ascent" and "max descent" meant, and whether/how the browser
creators also fudged things...
About display: table I have done it a few hours ago and it worked ...
but I was told this is not a good option sometime ago.
I am not sure if I can do this ...
Display: table is a good 'un, except it doesn't work in IE. So it just
depends on whether you need to support IE.
On May 20, 2:42 pm, Ben C <spams...@spam. eggswrote:
On 2008-05-20, shapper <mdmo...@gmail. comwrote:
On May 20, 8:16 am, Ben C <spams...@spam. eggswrote:
On 2008-05-20, shapper <mdmo...@gmail. comwrote:
Hello,
I am trying to create a header with a background color and a padding
of the text.
I know that if I apply the background color to the header it will
expand 100%.
It will take all of the available width, since auto width is "greedy"
for normal-flow block boxes.
[...]
Are you talking about the way the span's padding and border overflow the
<h1>'s box?
I would advise don't decorate inline boxes in this way. Background
colours are OK, but as I tried to explained previously, top and bottom
borders and padding on inline boxes are ephemera without substance that
are visible but have no ability to move anything else on the page out of
their way.
(Inline box top and bottom margins are even worse: they are invisible
ephemera without substance.)
Better decorate the <h1itself but give it shrink-to-fit width, which
you can do by floating it left or making it display: table (the latter
won't work in IE).
Or you could stick to inline box decoration but give the <h1enough
padding to make room for it, but this involves guesswork.
Hi,
Sorry, for the delay of my answer. I had problems with my ISP for the
past hours.
Ben, if I use float I will need to clear the float after it the header
tag?
Yes.
I am using the guessing method in this method using pixels as measure
and not em. It work with the list items I was working on ...
At least guess with em-- then it should be fairly close. The inline box
usually runs vertically from the font's max ascent to its max descent,
which is about 1em.
But it all depends on what the particular font designer thought "1em"
and "max ascent" and "max descent" meant, and whether/how the browser
creators also fudged things...
About display: table I have done it a few hours ago and it worked ...
but I was told this is not a good option sometime ago.
I am not sure if I can do this ...
Display: table is a good 'un, except it doesn't work in IE. So it just
depends on whether you need to support IE.
Hi,
using the display: table is not a solution. I would like IE to not
exist ... but it does. lol
About the float left is a good solution because I don't need guessing
but I don't like very much to add empty tags only for clear ...
.... but if it is needed then ...
The guessing is ok but I am afraid that there will be a browser or
configuration when this will break the design.
I am trying to put the header just next to the tag after ... no space
and no overlapping ... just on the limit.
I was using px for margin guessing because when I was solving the list
problem that space increased with the text resize ... now in the
header it does not ... I am confused ... In my opinion it should
increase.
Here are my latest experiments: http://www.27lamps.com/public/Header1.htm http://www.27lamps.com/public/Header2.htm http://www.27lamps.com/public/Header3.htm
On Header2 example I am not sure why am I getting a bigger size ...
maybe the spam is getting 1.2em relative to the h1? Not sure ... how
to solve this?
Thanks,
Miguel
On May 20, 2:42 pm, Ben C <spams...@spam. eggswrote:
On 2008-05-20, shapper <mdmo...@gmail. comwrote:
On May 20, 8:16 am, Ben C <spams...@spam. eggswrote:
On 2008-05-20, shapper <mdmo...@gmail. comwrote:
Hello,
I am trying to create a header with a background color and a padding
of the text.
I know that if I apply the background color to the header it will
expand 100%.
It will take all of the available width, since auto width is "greedy"
for normal-flow block boxes.
[...]
Are you talking about the way the span's padding and border overflow the
<h1>'s box?
I would advise don't decorate inline boxes in this way. Background
colours are OK, but as I tried to explained previously, top and bottom
borders and padding on inline boxes are ephemera without substance that
are visible but have no ability to move anything else on the page out of
their way.
(Inline box top and bottom margins are even worse: they are invisible
ephemera without substance.)
Better decorate the <h1itself but give it shrink-to-fit width, which
you can do by floating it left or making it display: table (the latter
won't work in IE).
Or you could stick to inline box decoration but give the <h1enough
padding to make room for it, but this involves guesswork.
Hi,
Sorry, for the delay of my answer. I had problems with my ISP for the
past hours.
Ben, if I use float I will need to clear the float after it the header
tag?
Yes.
I am using the guessing method in this method using pixels as measure
and not em. It work with the list items I was working on ...
At least guess with em-- then it should be fairly close. The inline box
usually runs vertically from the font's max ascent to its max descent,
which is about 1em.
But it all depends on what the particular font designer thought "1em"
and "max ascent" and "max descent" meant, and whether/how the browser
creators also fudged things...
About display: table I have done it a few hours ago and it worked ...
but I was told this is not a good option sometime ago.
I am not sure if I can do this ...
Display: table is a good 'un, except it doesn't work in IE. So it just
depends on whether you need to support IE.
Hi,
using the display: table is not a solution. I would like IE to not
exist ... but it does. lol
About the float left is a good solution because I don't need guessing
but I don't like very much to add empty tags only for clear ...
.... but if it is needed then ...
The guessing is ok but I am afraid that there will be a browser or
configuration when this will break the design.
I am trying to put the header just next to the tag after ... no space
and no overlapping ... just on the limit.
I was using px for margin guessing because when I was solving the list
problem that space increased with the text resize ... now in the
header it does not ... I am confused ... In my opinion it should
increase.
Here are my latest experiments: http://www.27lamps.com/public/Header1.htm http://www.27lamps.com/public/Header2.htm http://www.27lamps.com/public/Header3.htm
On Header2 example I am not sure why am I getting a bigger size ...
maybe the spam is getting 1.2em relative to the h1? Not sure ... how
to solve this?
Thanks,
Miguel This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Dan V. |
last post by:
Still struggling with css.
Anyone know how to put a tope background colour (matches the right part of
the banner image) that stretches to the max. size of the window like the
main div? My header has a big black 'box' at the top right. I would like
to keep black as the main background colour of the header div though.
Unless someone knows another way to make my header look good.
Please see:
http://officeactivate.com/schuit/
|
by: Dan V. |
last post by:
Does anyone know why the header looks correct in IE 6.0 and not Firefox
1.07?
I am trying to have a header that looks good when you expand it wider and
smaller.
In other words when you shrink the window narrower than the main header
image it does not wrap, and when you expand the window wider than the main
banner image the corner and background image expand to the size.
It has one large image about 500 pix wide, a right corner that is...
|
by: ~john |
last post by:
I'm trying to get my header to have 2 images, one for the top left and
one for the top right. Here's a link to my page...
http://levelwave.com/dev/div/index.html
and will eventually be images but what I'm
wanting is for the to be aligned left and to
be aligned right. As of now they're both squished to the left and I'm
not sure how to change my CSS to do this.
|
by: KoosHopeloos |
last post by:
L.S.,
I'm trying to make a layout which is completely fixed in width and
height if needed by using three divs rows (header, content, footer)
which have each 3 div again to be able to play around better with the
webdesign.
The problem is that I need the content div row to nudge up
automatically to the header div row, independantly of the header
height. The same goes for the footer/content div row.
|
by: guitar |
last post by:
Hi,
I have created a table, which has a stable header and a scroller for data. One of my data field has a combo box... Everything works fine but the combo moves over the header when scrolled...
Can anyone help me out?
The code is...
<HTML>
<DIV style="width: 180 px;height:200 px;overflow:scroll">
| | |
by: Mel |
last post by:
I created a header that adjusts with the size of the browser windows.
How do I place labels in the header section so they also maintain
their position when the window is resized? One of the labels is
constant but the rest will be entered programmatically, for example,
the users name, their company, city, state and zip.
My example code:
<body>
<form id="form1" runat="server">
|
by: swc76801 |
last post by:
I desperately need help. My understanding of CSS is non-existent. I have a store http://astore.amazon.com/texasheat-20 with Amazon.com. According to the information from Amazon.com "Write your own overriding CSS to customize your aStore." Their setup page is divided into two sections. On the right they show the existing CSS. On the left there is a box where you can add the new code. They have tabs for "Global", "Category Page", "Detail Page",...
|
by: darkzone |
last post by:
Looked almost ok in my editor but not so good in fire fox. I was going for a layout that was elastic some what. A header with one image repeating 100%, an there image slightly to the left also in the header, a container a 20% wide box for a list, two 80% wide boxes for content, a footer with the same image set up to end it. It was looking almost there for white but the footer image could now
be viewed.
?=
<!DOCTYPE HTML PUBLIC...
|
by: Noorain |
last post by:
I designed a site. i want to header,footer,left & right column fixed but body information only scrolling. this site screen to be 800/600 px. i designed this way but when i used position fixed all information to show as displace. please help me.
my coding are as below:
<!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>...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
