Hi everyone,
I'm a newbie and can;t get this code to work. It is supposed to center
the text block within the wrap, but the centering won't work. I'm quite
new to CSS and have tried to fix this now for a long time. Can anyone
see where I'm going wrong?
Thank you in advance.
Raj
#wrap{
background: #faf1d4 url(../images/bg.gif) repeat-x;
}
#text{
float: left;
width: 1000px;
padding-left: 20px;
padding-right: 20px;
background-color: #f5e9cc;
margin-left: auto;
margin-right: auto;
}
the relevant html code is:
<div id="wrap">
<div id="text">
<p>abcdef</p>
</div>
</div> 9 3655
In article <2008031409494775249-raj@nospamcom>,
raj <ra*@nospam.comwrote:
Hi everyone,
I'm a newbie and can;t get this code to work. It is supposed to center
the text block within the wrap, but the centering won't work. I'm quite
new to CSS and have tried to fix this now for a long time. Can anyone
see where I'm going wrong?
Thank you in advance.
Raj
#wrap{
background: #faf1d4 url(../images/bg.gif) repeat-x;
}
#text{
float: left;
width: 1000px;
padding-left: 20px;
padding-right: 20px;
background-color: #f5e9cc;
margin-left: auto;
margin-right: auto;
}
the relevant html code is:
<div id="wrap">
<div id="text">
<p>abcdef</p>
</div>
</div>
Have you tried #text{
float: left;
width: 1000px;
background-color: #f5e9cc;
text-align: center;
?
(1000px is a lot to be expecting on a webpage, not usually
advisable)
--
dorayme
On 2008-03-14 09:54:54 +0000, dorayme <do************@optusnet.com.ausaid:
In article <2008031409494775249-raj@nospamcom>,
raj <ra*@nospam.comwrote:
>Hi everyone,
I'm a newbie and can;t get this code to work. It is supposed to center the text block within the wrap, but the centering won't work. I'm quite new to CSS and have tried to fix this now for a long time. Can anyone see where I'm going wrong?
Thank you in advance.
Raj
#wrap{ background: #faf1d4 url(../images/bg.gif) repeat-x; }
#text{ float: left; width: 1000px; padding-left: 20px; padding-right: 20px; background-color: #f5e9cc; margin-left: auto; margin-right: auto; }
the relevant html code is:
<div id="wrap"> <div id="text"> <p>abcdef</p> </div> </div>
Have you tried #text{
float: left;
width: 1000px;
background-color: #f5e9cc;
text-align: center;
?
(1000px is a lot to be expecting on a webpage, not usually
advisable)
Hi dorayme,
I have just tried that, but it doesnt accomplish what I want to do. I
want to center the enter text block within the wrap block. The wrap
block should go across the enter width of the screen and the text block
should be centered within the wrap block.
Raj
On 2008-03-14, raj <ra*@nospam.comwrote:
Hi everyone,
I'm a newbie and can;t get this code to work. It is supposed to center
the text block within the wrap, but the centering won't work.
You can't centre a float. It floats to one side or the other.
I'm quite
new to CSS and have tried to fix this now for a long time. Can anyone
see where I'm going wrong?
Thank you in advance.
Raj
#wrap{
background: #faf1d4 url(../images/bg.gif) repeat-x;
}
#text{
float: left;
^^^^^^^^^^^
Just get rid of this line and it should centre OK.
width: 1000px;
padding-left: 20px;
padding-right: 20px;
background-color: #f5e9cc;
margin-left: auto;
margin-right: auto;
}
the relevant html code is:
<div id="wrap">
<div id="text">
<p>abcdef</p>
</div> </div>
On 2008-03-14 10:15:21 +0000, Ben C <sp******@spam.eggssaid:
On 2008-03-14, raj <ra*@nospam.comwrote:
>Hi everyone,
I'm a newbie and can;t get this code to work. It is supposed to center the text block within the wrap, but the centering won't work.
You can't centre a float. It floats to one side or the other.
>I'm quite new to CSS and have tried to fix this now for a long time. Can anyone see where I'm going wrong?
Thank you in advance.
Raj
#wrap{ background: #faf1d4 url(../images/bg.gif) repeat-x; }
#text{ float: left;
^^^^^^^^^^^
Just get rid of this line and it should centre OK.
> width: 1000px; padding-left: 20px; padding-right: 20px; background-color: #f5e9cc; margin-left: auto; margin-right: auto; }
the relevant html code is:
<div id="wrap"> <div id="text"> <p>abcdef</p> </div> </div>
That's fixed it.
Thanks Ben
Ben C wrote:
On 2008-03-14, raj <ra*@nospam.comwrote:
>Hi everyone,
I'm a newbie and can;t get this code to work. It is supposed to center the text block within the wrap, but the centering won't work.
You can't centre a float. It floats to one side or the other.
Though I know that and I can understand it I was wondering of the
following senario:
I have a div with width 100% (so it goes it fills the whole viewport). I
want a div inside it with some pictures:
<div id="wrap">
<div>
<img src="blah.jpg"<img src="blah1.jpg"<img src="blah2.jpg"<img
src="blah3.jpg">
</div>
</div>
By default #wrap div will also have width:100%. What if I want the div
containing the imgs to be centered. The only way I know is to explicit
set the width like:
#wrap div img {margin-left:2em}
#wrap div {width:50em;margin:0 auto}
But I don't know the overall width of the images, so it's wrong to set a
width. How can I accomplish that?
thanks in advance
On Mar 17, 10:08*am, Harris Kosmidhs
<hkosm...@remove.me.softnet.tuc.grwrote:
Ben C wrote:
On 2008-03-14, raj <r...@nospam.comwrote:
Hi everyone,
I'm a newbie and can;t get this code to work. It is supposed to center
the text block within the wrap, but the centering won't work.
You can't centre a float. It floats to one side or the other.
Though I know that and I can understand it I was wondering of the
following senario:
I have a div with width 100% (so it goes it fills the whole viewport). I
want a div inside it with some pictures:
<div id="wrap">
* * * * <div>
* * * * <img src="blah.jpg"<img src="blah1.jpg"<img src="blah2.jpg"<img
src="blah3.jpg">
* * * * </div>
</div>
By default #wrap div will also have width:100%. What if I want the div
containing the imgs to be centered. The only way I know is to explicit
set the width like:
#wrap div img {margin-left:2em}
#wrap div {width:50em;margin:0 auto}
But I don't know the overall width of the images, so it's wrong to set a
width. How can I accomplish that?
thanks in advance
Maybe I don't understand exactly what you are looking for, but if you
just want the images centered, why not just put a declaration of text-
align: center on the img's container?
E.g.:
#wrap div {text-align: center}
Nick
--
Nick Theodorakis ni**************@hotmail.com
contact form: http://theodorakis.net/contact.html
On 2008-03-17, Harris Kosmidhs <hk******@remove.me.softnet.tuc.grwrote:
Ben C wrote:
>On 2008-03-14, raj <ra*@nospam.comwrote:
>>Hi everyone,
I'm a newbie and can;t get this code to work. It is supposed to center the text block within the wrap, but the centering won't work.
You can't centre a float. It floats to one side or the other.
Though I know that and I can understand it I was wondering of the
following senario:
I have a div with width 100% (so it goes it fills the whole viewport). I
want a div inside it with some pictures:
<div id="wrap">
<div>
<img src="blah.jpg"<img src="blah1.jpg"<img src="blah2.jpg"<img
src="blah3.jpg">
</div> </div>
By default #wrap div will also have width:100%. What if I want the div
containing the imgs to be centered. The only way I know is to explicit
set the width like:
#wrap div img {margin-left:2em}
#wrap div {width:50em;margin:0 auto}
But I don't know the overall width of the images, so it's wrong to set a
width. How can I accomplish that?
What you want is "centred shrink-to-fit" for which you need inline-block
(wait for Firefox 3), tables, or JavaScript.
See also dorayme's page: http://netweaver.com.au/alt/shrinkTo...rinkToFit.html
Harris Kosmidhs schrieb:
display:table is just fine
.... until you test it with IE.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.) This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: TABOUT |
last post by:
Hello,
The code which I have attached below properly has the margins working
in Portrait mode. The margin is contained in an object called
settings. The behavior is that the top and bottom...
|
by: Chris Gurk |
last post by:
Hi Newsgroup,
I am working on a website http://www.charter-yachtcharter.com/testsite/
(still in progress).
There are two lists. The first is a simple paragraph (<p>-Tag), the
second an...
|
by: Toronto Web Designer |
last post by:
I'm having trouble with the padding and margin properties. IE tends to be
happier with the padding and Netscape with the margin property.
So I tried this:
<link href="netscape-styles.css"...
|
by: Marita |
last post by:
Hi,
I have a page (several) where the top margin doesn't appear to be working.
I have this in my code:
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right:...
|
by: Michael |
last post by:
Hi!
Please have a look at my website at http://noumlauts.com.
I am currently working on a new design and I cannot find out, why there
is such a huge margin under the first h3 (+subtext) in the...
|
by: Greg Heilers |
last post by:
Perplexing problem: All of a sudden, the code I am tinkering with; renders
a white-space margin around all four edges of the browser window (Mozilla,
Firefox, Konqueror, and Opera). I can not...
|
by: speralta |
last post by:
I'm playing around with a test page that uses a <div id="main"within
the context of a body with a width of 100% to center a fixed width
field on a page. For some reason, the page is not centering...
|
by: Daz |
last post by:
Hi everyone. I have just been making a JavaScript chat applet, which
should open in a new child window. It does all of this fine, and works
within Firefox beatifully. However, IE thinks it's...
|
by: hzgt9b |
last post by:
I am working on a site that is being served to a private network. All
the users are using IE6+.
I am having trouble getting the 1st div added to a containing div to
have its margin-left applied...
|
by: moondaddy |
last post by:
I have a group of elements inside a grid and want to align them along the
left side of the grid. I also want have this group centered vertically and
the xaml below demonstrates the appearance want...
|
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: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
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: 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: 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...
|
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,...
|
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...
| |