Hi, I have the following code:
<div id="navAlpha"><div id="mainImage"><img
src="/All/10001/main.jpg"></div>
<div id="mainInfo">
// a list apart's mountain top
<dl id="red"><dt>nick: astronomer</dt><dd> R: 800</dd><dd> P:
875</dd></dl></div>
<div style='clear: both;'> </div></div>
I would like to wrap any text between mainInfo. Basically, the text in
mainInfo and mainImage can change from time to time, and I am looking
for a css method to simply wrap my text without changing the css/html
each time. Currently, the text remains to the right of mainImage but is
overlapped by mainInfo for some reason. Any help or suggestion will be
appreciated.
here is navAlpha:
#navAlpha {
position:absolute;
height: auto;
top:62px;
left:5%;
// border:1px solid #000000;
// border-top: 0px solid;
background-color:#FFFFFF;
voice-family: "\"}\"";
voice-family:inherit;
padding: 0px;
margin: 0 0 0 0;
width:auto;
}
mainImage:
#mainImage {
position: static;
float: left;
height: auto;
width: auto;
background-color: #FFAFAF;
padding: 0px;
width: auto;
}
mainInfo:
#mainInfo {
position: absolute;
right:0%;
margin: 0 0 0 0;
padding: 0px;
background: #FFFFFF;
width: auto;
padding-top: 1%;
padding-right: 1%;
float: right;
}
a list apart's mount top:
dl {
width: auto;
margin: 0 0 0px 0px;
padding: 0;
/* background: #ccc url(/images/box_bottom.gif) no-repeat bottom
left;*/
background: #ccc;
}
dt {
margin: 0 0 10px 0;
padding: 10px;
font-size: 130%;
color: #fff;
border-bottom: 1px solid #fff;
/* background: #999 url(/images/box_top.gif) no-repeat top left;*/
background: #999;
}
dd {
margin: 0 0 0 10px;
padding: 0 10px 10px 10px;
color: #000000;
font-family: Verdana, sans-serif;
font-size: 90%;
background: url(/images/arrow.gif) no-repeat 0 3px;
}
#red dt {
background-color: #933;
}
#red {
background-color: #c99;
} 4 2574
Shark wrote: Hi, I have the following code:
<div id="navAlpha"><div id="mainImage"><img src="/All/10001/main.jpg"></div>
<div id="mainInfo"> // a list apart's mountain top <dl id="red"><dt>nick: astronomer</dt><dd> R: 800</dd><dd> P: 875</dd></dl></div> <div style='clear: both;'> </div></div>
I would like to wrap any text between mainInfo.
"between mainInfo"... between mainInfo and what?
Basically, the text in mainInfo and mainImage can change from time to time, and I am looking for a css method to simply wrap my text without changing the css/html each time. Currently, the text remains to the right of mainImage but is overlapped by mainInfo for some reason. Any help or suggestion will be appreciated.
[snip code]
mainImage:
#mainImage { position: static;
position:static is default - no need to mention that.
float: left; height: auto; width: auto;
width and height are auto already - no need to mention.
background-color: #FFAFAF; padding: 0px; width: auto;
nor to mention it twice ;-)
}
mainInfo:
#mainInfo { position: absolute;
That's what causes the overlapping.
Get rid of it.
right:0%;
Doesn't do anything when there's no positioning, so you can skip that
too.
margin: 0 0 0 0; padding: 0px; background: #FFFFFF; width: auto; padding-top: 1%; padding-right: 1%; float: right;
float:right? You can't float and position an element at the same time.
Also, by floating it to the right, it won't wrap around the #mainImage
which is floated left. So take out the float:right;.
}
[snip more code]
If this doesn't do what you want, you might consider giving a URL to
the page, so we don't have to guess at what it is you're looking at
:-)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Technohead - I Wanna Be A Hippy
Els wrote: Shark wrote:
Hi, I have the following code:
<div id="navAlpha"><div id="mainImage"><img src="/All/10001/main.jpg"></div>
<div id="mainInfo"> // a list apart's mountain top <dl id="red"><dt>nick: astronomer</dt><dd> R: 800</dd><dd> P: 875</dd></dl></div> <div style='clear: both;'> </div></div>
I would like to wrap any text between mainInfo.
"between mainInfo"... between mainInfo and what?
Basically, the text in mainInfo and mainImage can change from time to time, and I am looking for a css method to simply wrap my text without changing the css/html each time. Currently, the text remains to the right of mainImage but is overlapped by mainInfo for some reason. Any help or suggestion will be appreciated.
[snip code]
mainImage:
#mainImage { position: static;
position:static is default - no need to mention that.
float: left; height: auto; width: auto;
width and height are auto already - no need to mention.
background-color: #FFAFAF; padding: 0px; width: auto;
nor to mention it twice ;-)
}
mainInfo:
#mainInfo { position: absolute;
That's what causes the overlapping. Get rid of it.
right:0%;
Doesn't do anything when there's no positioning, so you can skip that too.
margin: 0 0 0 0; padding: 0px; background: #FFFFFF; width: auto; padding-top: 1%; padding-right: 1%; float: right;
float:right? You can't float and position an element at the same time. Also, by floating it to the right, it won't wrap around the #mainImage which is floated left. So take out the float:right;.
}
[snip more code]
If this doesn't do what you want, you might consider giving a URL to the page, so we don't have to guess at what it is you're looking at :-)
Thank you Els, its only at my hone computer so there is no Url to point
to. I mean to say I wanted the text to wrap between mainInfo and
mainImage. I will try your suggestions and get back with more info if
it doesn't work. Thanks again!
Els wrote: #mainInfo { position: absolute; That's what causes the overlapping. Get rid of it.
Still true. right:0%;
Doesn't do anything when there's no positioning, so you can skip that too.
[snip] float: right;
float:right? You can't float and position an element at the same time. Also, by floating it to the right, it won't wrap around the #mainImage which is floated left. So take out the float:right;.
Sorry, I now see what you are trying to do: you want #mainInfo to be
on the right and #mainImage on the left *and* have more text in
between them. In which case, leave 'float:right;' in :-)
Also, in the HTML, move the text you want displayed in between them
below the closing tag of the #mainInfo div. First the floats, then
what needs to be wrapped in between. Clearing div remains last inside
#navAlpha, after the text.
If this doesn't do what you want, you might consider giving a URL to the page, so we don't have to guess at what it is you're looking at :-)
That's still true too ;-)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Eddy Grant - Gimme Hope Joanna
Els wrote: Shark wrote:
Hi, I have the following code: #mainInfo { position: absolute;
wow, i changed it to static and it worked! thanks!!!! This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: sneill |
last post by:
Hello,
I have the following HTML / CSS that draws 2 rows. Each row has 3
cells. I want the cells within each row to span a single line. Each
cell is 100px wide, and the row containing them is...
|
by: bryanrite |
last post by:
I have two floating divs within a 100% width container div. In IE when
you resize the window to the point where the text should wrap, it wraps
and extends the height of the container div. In...
|
by: Andrew Poulos |
last post by:
I have a DIV with a nested DIV. The nested DIV is to sit in the bottom
right corner of the outer DIV. I tried using absolute positioning but
that means that the text the outer DIV contains goes...
|
by: russ |
last post by:
Hello all,
A bit new to CSS layouts - I've been putting everything in tables until
now. I'd like to line up several divs all floating left, so they stack
up across the screen. But I don't want...
|
by: hendedav |
last post by:
Gang,
I am not quite sure if this has been posted before. I have
searched google groups and couldn't find anything. I am trying to
setup a container div that contains columns of divs (to...
|
by: dreadsword |
last post by:
Hey all - I'm having a problem with getting text to wrap around a DIV in IE7. It of course renders nicely in FF.
The page in question is http://techwatching.com.
The content on that page...
|
by: littlealex |
last post by:
IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS!
In IE6 the text for the following page doesn't display properly - rather than being...
|
by: trondhuso |
last post by:
Hi,
I have a solution that - at time of writing - has to use tables to
render a list of database-results. My challenge though is that we have
used iframes and such to render the different lists...
|
by: natecoventry |
last post by:
Below is link to a still image of what the site I'm developing looks like, I want to wrap the text around the two parts of the stethoscope that come into the page. What's the best rout to go? I've...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...
|
by: ryjfgjl |
last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
|
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:
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: 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: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
| |